From c55d12e361cbe053cef32d1bb2fae48dbc086d4b Mon Sep 17 00:00:00 2001
From: Bodhish Thomas <bodhish@gmail.com>
Date: Fri, 18 Oct 2024 18:45:09 -0500
Subject: [PATCH 01/54] Add shadcn components

---
 package-lock.json                 | 631 +++++++++++++++++++++++-------
 package.json                      |   7 +-
 src/Components/ui/command.tsx     | 153 ++++++++
 src/Components/ui/dialog.tsx      | 120 ++++++
 src/Components/ui/input.tsx       |  25 ++
 src/Components/ui/label.tsx       |  24 ++
 src/Components/ui/popover.tsx     |  31 ++
 src/Components/ui/scroll-area.tsx |  46 +++
 8 files changed, 901 insertions(+), 136 deletions(-)
 create mode 100644 src/Components/ui/command.tsx
 create mode 100644 src/Components/ui/dialog.tsx
 create mode 100644 src/Components/ui/input.tsx
 create mode 100644 src/Components/ui/label.tsx
 create mode 100644 src/Components/ui/popover.tsx
 create mode 100644 src/Components/ui/scroll-area.tsx

diff --git a/package-lock.json b/package-lock.json
index aa99337d8d6..1d783d73067 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,8 +19,12 @@
         "@hello-pangea/dnd": "^17.0.0",
         "@pnotify/core": "^5.2.0",
         "@pnotify/mobile": "^5.2.0",
+        "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-icons": "^1.3.0",
+        "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-scroll-area": "^1.2.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-toast": "^1.2.2",
         "@radix-ui/react-tooltip": "^1.1.3",
@@ -33,6 +37,7 @@
         "browserslist-useragent-regexp": "^4.1.3",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "cmdk": "^1.0.0",
         "cross-env": "^7.0.3",
         "cypress": "^13.14.2",
         "dayjs": "^1.11.11",
@@ -115,6 +120,7 @@
     "apps/care_livekit_fe": {
       "name": "care-livekit",
       "version": "0.0.1",
+      "extraneous": true,
       "license": "ISC",
       "dependencies": {
         "@livekit/components-react": "^2.6.2",
@@ -1779,11 +1785,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bufbuild/protobuf": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
-      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag=="
-    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -2647,64 +2648,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@livekit/components-core": {
-      "version": "0.11.9",
-      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.11.9.tgz",
-      "integrity": "sha512-LPE1BZ+YTaqsVqGy/GAlpiO5rEI8XpEaf1TQcGdZN1BCBas9hTHt7/aHMbHQJ0K5xuAFQx8is6dFe451T4qXIQ==",
-      "dependencies": {
-        "@floating-ui/dom": "1.6.11",
-        "loglevel": "1.9.1",
-        "rxjs": "7.8.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "livekit-client": "^2.5.7",
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@livekit/components-react": {
-      "version": "2.6.5",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.6.5.tgz",
-      "integrity": "sha512-G3BpBlKy+lWTV9MH3/oBTBC17Z8CWqZ9GnjcG/xmYI0IvqmY89tVWph7cj2Bq0taniA+mD3U9EMPr68fOb1m1g==",
-      "dependencies": {
-        "@livekit/components-core": "0.11.9",
-        "clsx": "2.1.1",
-        "usehooks-ts": "3.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@livekit/krisp-noise-filter": "^0.2.12",
-        "livekit-client": "^2.5.7",
-        "react": ">=18",
-        "react-dom": ">=18",
-        "tslib": "^2.6.2"
-      },
-      "peerDependenciesMeta": {
-        "@livekit/krisp-noise-filter": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@livekit/components-styles": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@livekit/components-styles/-/components-styles-1.1.4.tgz",
-      "integrity": "sha512-QCupn7tQ/dy/WZclrfsgtDe8peiGYS6Ied1IGkKOysaXo04l90t62SIUTKyxgd0dNDhUDC0p34qCggGZs/44lQ==",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@livekit/protocol": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.24.0.tgz",
-      "integrity": "sha512-9dCsqnkMn7lvbI4NGh18zhLDsrXyUcpS++TEFgEk5Xv1WM3R2kT3EzqgL1P/mr3jaabM6rJ8wZA/KJLuQNpF5w==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.10.0"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -3118,6 +3061,11 @@
         "@pnotify/core": "^5.2.0"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
@@ -3212,6 +3160,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -3343,6 +3326,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.0.tgz",
+      "integrity": "sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-menu": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz",
@@ -3382,6 +3387,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.2.tgz",
+      "integrity": "sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -3539,6 +3580,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.0.tgz",
+      "integrity": "sha512-q2jMBdsJ9zB7QG6ngQNzNwlvxLQqONyL58QbEGwuyRZZb/ARQwk3uQVbCF7GvQVOtV6EU/pDxAw3zRzJZI3rpQ==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
@@ -6195,10 +6266,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/care-livekit": {
-      "resolved": "apps/care_livekit_fe",
-      "link": true
-    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -6450,6 +6517,366 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/codepage": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@@ -10932,26 +11359,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/livekit-client": {
-      "version": "2.5.9",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.5.9.tgz",
-      "integrity": "sha512-oDpK6SKYB1F+mNO+25DA0bF0cD2XoOJeD8ji4YQpzDBQv2IxeyKrQhoqXAqrYgIKuiMNkImSf+yg2v7EHSl4Og==",
-      "dependencies": {
-        "@livekit/protocol": "1.24.0",
-        "events": "^3.3.0",
-        "loglevel": "^1.8.0",
-        "sdp-transform": "^2.14.1",
-        "ts-debounce": "^4.0.0",
-        "tslib": "2.7.0",
-        "typed-emitter": "^2.1.0",
-        "webrtc-adapter": "^9.0.0"
-      }
-    },
-    "node_modules/livekit-client/node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
-    },
     "node_modules/load-plugin": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-6.0.3.tgz",
@@ -11052,7 +11459,8 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -11138,18 +11546,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/loglevel": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
-      "integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
-      "engines": {
-        "node": ">= 0.6.0"
-      },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/loglevel"
-      }
-    },
     "node_modules/long": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
@@ -16101,14 +16497,6 @@
       "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
       "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw=="
     },
-    "node_modules/sdp-transform": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.2.tgz",
-      "integrity": "sha512-icY6jVao7MfKCieyo1AyxFYm1baiM+fA00qW/KrNNVlkxHAd34riEKuEkUe4bBb3gJwLJZM+xT60Yj1QL8rHiA==",
-      "bin": {
-        "sdp-verify": "checker.js"
-      }
-    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -17329,11 +17717,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-debounce": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/ts-debounce/-/ts-debounce-4.0.0.tgz",
-      "integrity": "sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg=="
-    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -17501,14 +17884,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typed-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz",
-      "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==",
-      "optionalDependencies": {
-        "rxjs": "*"
-      }
-    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -18043,20 +18418,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
-      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
-      "dependencies": {
-        "lodash.debounce": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=16.15.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17 || ^18"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 57d0c3d3405..1ebb6190f6b 100644
--- a/package.json
+++ b/package.json
@@ -58,8 +58,12 @@
     "@hello-pangea/dnd": "^17.0.0",
     "@pnotify/core": "^5.2.0",
     "@pnotify/mobile": "^5.2.0",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
@@ -72,6 +76,7 @@
     "browserslist-useragent-regexp": "^4.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "cross-env": "^7.0.3",
     "cypress": "^13.14.2",
     "dayjs": "^1.11.11",
@@ -173,4 +178,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "npm@10.5.0"
-}
\ No newline at end of file
+}
diff --git a/src/Components/ui/command.tsx b/src/Components/ui/command.tsx
new file mode 100644
index 00000000000..92b332a0444
--- /dev/null
+++ b/src/Components/ui/command.tsx
@@ -0,0 +1,153 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/Components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-gray-400",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-gray-950 dark:text-gray-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-gray-500 dark:[&_[cmdk-group-heading]]:text-gray-400",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-gray-200 dark:bg-gray-800", className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-gray-100 data-[selected=true]:text-gray-900 data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-gray-800 dark:data-[selected=true]:text-gray-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-gray-500 dark:text-gray-400",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/src/Components/ui/dialog.tsx b/src/Components/ui/dialog.tsx
new file mode 100644
index 00000000000..e39e6cb23fd
--- /dev/null
+++ b/src/Components/ui/dialog.tsx
@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] dark:border-gray-800 dark:bg-gray-950 sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-gray-500 dark:text-gray-400", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/src/Components/ui/input.tsx b/src/Components/ui/input.tsx
new file mode 100644
index 00000000000..2de761f037d
--- /dev/null
+++ b/src/Components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/src/Components/ui/label.tsx b/src/Components/ui/label.tsx
new file mode 100644
index 00000000000..44912aff543
--- /dev/null
+++ b/src/Components/ui/label.tsx
@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
diff --git a/src/Components/ui/popover.tsx b/src/Components/ui/popover.tsx
new file mode 100644
index 00000000000..1c338bfaa9d
--- /dev/null
+++ b/src/Components/ui/popover.tsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/src/Components/ui/scroll-area.tsx b/src/Components/ui/scroll-area.tsx
new file mode 100644
index 00000000000..cb6d5726563
--- /dev/null
+++ b/src/Components/ui/scroll-area.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-gray-200 dark:bg-gray-800" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

From 6b0daf2bc85b3bea588b163d244e5b8ad9f328d4 Mon Sep 17 00:00:00 2001
From: Bodhish Thomas <bodhish@gmail.com>
Date: Fri, 18 Oct 2024 20:29:29 -0500
Subject: [PATCH 02/54] Add seach by multiple fileds

---
 .../Common/SearchByMultipleFields.tsx         | 220 ++++++++++++++++++
 src/Components/Form/FormFields/FormField.tsx  |   4 +-
 .../Form/FormFields/PhoneNumberFormField.tsx  |  14 +-
 src/Components/Patient/ManagePatients.tsx     |  91 +++++---
 4 files changed, 284 insertions(+), 45 deletions(-)
 create mode 100644 src/Components/Common/SearchByMultipleFields.tsx

diff --git a/src/Components/Common/SearchByMultipleFields.tsx b/src/Components/Common/SearchByMultipleFields.tsx
new file mode 100644
index 00000000000..d2c84d18769
--- /dev/null
+++ b/src/Components/Common/SearchByMultipleFields.tsx
@@ -0,0 +1,220 @@
+import React, {
+  useState,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
+import { useTranslation } from "react-i18next";
+import { Input } from "@/Components/ui/input";
+import { Button } from "@/Components/ui/button";
+import { cn } from "@/lib/utils";
+import CareIcon from "@/CAREUI/icons/CareIcon";
+import PhoneNumberFormField from "@/Components/Form/FormFields/PhoneNumberFormField";
+import {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandList,
+} from "@/Components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/Components/ui/popover";
+
+interface SearchOption {
+  key: string;
+  label: string;
+  type: "text" | "phone";
+  placeholder: string;
+  value: string;
+  shortcut_key: string;
+  component?: React.ComponentType<any>;
+}
+
+interface SearchByMultipleFieldsProps {
+  options: SearchOption[];
+  onSearch: (key: string, value: string) => void;
+  initialOption?: SearchOption;
+  className?: string;
+  inputClassName?: string;
+  buttonClassName?: string;
+}
+
+const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
+  options,
+  onSearch,
+  initialOption,
+  className,
+  inputClassName,
+  buttonClassName,
+}) => {
+  const { t } = useTranslation();
+  const [selectedOption, setSelectedOption] = useState<SearchOption>(
+    initialOption || options[0],
+  );
+  const [searchValue, setSearchValue] = useState(selectedOption.value || "");
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "/" && document.activeElement !== inputRef.current) {
+        e.preventDefault();
+        setOpen(true);
+      }
+
+      if (open) {
+        if (e.key === "Escape") {
+          setOpen(false);
+        }
+      }
+
+      options.forEach((option) => {
+        if (e.key.toLowerCase() === option.shortcut_key.toLowerCase()) {
+          e.preventDefault();
+          handleOptionChange(option);
+        }
+      });
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const handleOptionChange = useCallback(
+    (option: SearchOption) => {
+      setSelectedOption(option);
+      setSearchValue(option.value || "");
+      setOpen(false);
+      inputRef.current?.focus();
+      onSearch(option.key, option.value);
+    },
+    [onSearch],
+  );
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearchValue(value);
+      onSearch(selectedOption.key, value);
+    },
+    [selectedOption, onSearch],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      console.log(e.key);
+      if (e.key === "Escape") {
+        setSearchValue("");
+        onSearch(selectedOption.key, "");
+      }
+      if (e.key === "/") {
+        e.preventDefault();
+        setOpen(true);
+      }
+    },
+    [selectedOption, onSearch],
+  );
+
+  const renderSearchInput = useMemo(() => {
+    const commonProps = {
+      ref: inputRef,
+      value: searchValue,
+      onChange: (e: any) =>
+        handleSearchChange(e.target ? e.target.value : e.value),
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "flex-grow border-none shadow-none focus-visible:ring-0 h-10",
+        inputClassName,
+      ),
+    };
+
+    switch (selectedOption.type) {
+      case "phone":
+        return (
+          <PhoneNumberFormField
+            name={selectedOption.key}
+            placeholder={t(selectedOption.placeholder)}
+            types={["mobile", "landline"]}
+            {...commonProps}
+          />
+        );
+      default:
+        return (
+          <Input
+            type="text"
+            placeholder={t(selectedOption.placeholder)}
+            {...commonProps}
+          />
+        );
+    }
+  }, [
+    selectedOption,
+    searchValue,
+    handleSearchChange,
+    handleKeyDown,
+    t,
+    inputClassName,
+  ]);
+
+  return (
+    <div className={className}>
+      <div className="flex items-center rounded-t-lg border-x border-t border-gray-200 bg-white">
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              variant="ghost"
+              className="focus:ring-0"
+              size="sm"
+              onClick={() => setOpen(true)}
+            >
+              <CareIcon icon="l-search" className="mr-2 h-4 w-4" />/
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-[200px] p-0">
+            <Command>
+              <CommandList>
+                <CommandGroup>
+                  {options.map((option) => (
+                    <CommandItem
+                      key={option.key}
+                      onSelect={() => handleOptionChange(option)}
+                    >
+                      <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
+                      <span className="flex-1">{t(option.label)}</span>
+                      <kbd className="ml-auto text-xs text-gray-400">
+                        {option.label.charAt(0).toUpperCase()}
+                      </kbd>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+        {renderSearchInput}
+      </div>
+      <div className="flex flex-wrap gap-2 rounded-b-lg border-x border-b border-gray-200 bg-gray-50 p-2 shadow">
+        {options.map((option) => (
+          <Button
+            key={option.key}
+            onClick={() => handleOptionChange(option)}
+            variant="outline"
+            size="xs"
+            className={cn(
+              selectedOption.key === option.key
+                ? "bg-primary-100 text-primary-700"
+                : "bg-gray-100 text-gray-700 hover:bg-gray-200",
+              buttonClassName,
+            )}
+          >
+            {t(option.label)}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SearchByMultipleFields;
diff --git a/src/Components/Form/FormFields/FormField.tsx b/src/Components/Form/FormFields/FormField.tsx
index 9c2903682b6..c5774205330 100644
--- a/src/Components/Form/FormFields/FormField.tsx
+++ b/src/Components/Form/FormFields/FormField.tsx
@@ -71,7 +71,9 @@ const FormField = ({
         )}
       </div>
       <div className={field?.className}>{props.children}</div>
-      <FieldErrorText error={field?.error} className={field?.errorClassName} />
+      {field?.error && (
+        <FieldErrorText error={field.error} className={field?.errorClassName} />
+      )}
     </div>
   );
 };
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index c46d2690ad3..dcac56dc901 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -101,19 +101,17 @@ export default function PhoneNumberFormField(props: Props) {
       field={{
         ...field,
         error: field.error || error,
-        labelSuffix: field.labelSuffix || (
-          <PhoneNumberTypesHelp types={props.types} />
-        ),
+        labelSuffix: field.labelSuffix || "",
       }}
     >
-      <div className="relative rounded-md shadow-sm">
+      <div className="relative rounded-md">
         <Popover>
           {({ open }: { open: boolean }) => {
             return (
               <>
                 <PopoverButton className="absolute h-full">
-                  <div className="absolute inset-y-0 left-0 m-0.5 flex w-[4.5rem] cursor-pointer items-center justify-around bg-slate-100">
-                    <span className="rounded-md pl-4">
+                  <div className="hover:border-1 absolute inset-y-0 left-0 flex cursor-pointer items-center justify-around border-gray-200 hover:border hover:bg-gray-50">
+                    <span className="rounded-md pl-2">
                       {country?.flag ?? "🇮🇳"}
                     </span>
                     <CareIcon
@@ -128,7 +126,7 @@ export default function PhoneNumberFormField(props: Props) {
                   name={field.name}
                   autoComplete={props.autoComplete ?? "tel"}
                   className={classNames(
-                    "cui-input-base h-full pl-20 tracking-widest sm:leading-6",
+                    "cui-input-base h-full pl-14 tracking-widest sm:leading-6",
                     field.error && "border-danger-500",
                     field.className,
                   )}
@@ -204,7 +202,7 @@ const CountryCodesList = ({
   const [searchValue, setSearchValue] = useState<string>("");
 
   return (
-    <div className="absolute z-10 w-full rounded-md border border-secondary-300 bg-white shadow-lg transition-all duration-300">
+    <div className="absolute z-10 w-full rounded-md border border-gray-300 bg-white shadow-lg transition-all duration-300">
       <div className="relative m-2">
         <CareIcon
           icon="l-search"
diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 7d49ffdaad1..034331fabf8 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -12,7 +12,7 @@ import {
 } from "../../Common/constants";
 import { FacilityModel, PatientCategory } from "../Facility/models";
 import { Link, navigate } from "raviger";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode, useEffect, useState, useCallback } from "react";
 import { parseOptionId } from "../../Common/utils";
 
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
@@ -56,6 +56,8 @@ import request from "../../Utils/request/request.js";
 import { Avatar } from "../Common/Avatar.js";
 
 import Loading from "@/Components/Common/Loading";
+import SearchByMultipleFields from "@/Components/Common/SearchByMultipleFields";
+
 interface TabPanelProps {
   children?: ReactNode;
   dir?: string;
@@ -783,6 +785,54 @@ export const PatientManager = () => {
   const onlyAccessibleFacility =
     permittedFacilities?.count === 1 ? permittedFacilities.results[0] : null;
 
+  const searchOptions = [
+    {
+      key: "phone_number",
+      label: "Phone Number",
+      type: "phone" as const,
+      placeholder: "Search by phone number",
+      value: qParams.phone_number || "",
+      shortcut_key: "p",
+    },
+    {
+      key: "name",
+      label: "Name",
+      type: "text" as const,
+      placeholder: "Search by patient name",
+      value: qParams.name || "",
+      shortcut_key: "n",
+    },
+    {
+      key: "patient_no",
+      label: "UHID",
+      type: "text" as const,
+      placeholder: "Search by UHID",
+      value: qParams.patient_no || "",
+      shortcut_key: "u",
+    },
+    {
+      key: "emergency_contact_phone_number",
+      label: "Emergency Contact Phone Number",
+      type: "phone" as const,
+      placeholder: "Search by emergency contact phone number",
+      value: qParams.emergency_contact_phone_number || "",
+      shortcut_key: "e",
+    },
+  ];
+
+  const handleSearch = useCallback(
+    (key: string, value: string) => {
+      if (key === "phone_number" || key === "emergency_contact_phone_number") {
+        if (value.length >= 13 || value === "+91" || value === "") {
+          updateQuery({ [key]: value });
+        }
+      } else {
+        updateQuery({ [key]: value });
+      }
+    },
+    [updateQuery],
+  );
+
   return (
     <Page
       title={t("patients")}
@@ -979,41 +1029,10 @@ export const PatientManager = () => {
         </div>
         <div className="col-span-3 w-full">
           <div className="mt-2">
-            <div className="mb-4 mt-1 md:flex md:gap-4">
-              <SearchInput
-                label="Search by Patient"
-                placeholder="Enter patient name"
-                {...queryField("name")}
-                className="w-full grow"
-              />
-              <SearchInput
-                label="Search by IP/OP Number"
-                placeholder="Enter IP/OP Number"
-                secondary
-                {...queryField("patient_no")}
-                className="w-full grow"
-              />
-            </div>
-            <div className="mb-4 md:flex md:gap-4">
-              <PhoneNumberFormField
-                label="Search by Primary Number"
-                {...queryField("phone_number", "+91")}
-                value={phone_number}
-                onChange={(e) => setPhoneNum(e.value)}
-                error={phoneNumberError}
-                types={["mobile", "landline"]}
-                className="w-full grow"
-              />
-              <PhoneNumberFormField
-                label="Search by Emergency Number"
-                {...queryField("emergency_phone_number", "+91")}
-                value={emergency_phone_number}
-                onChange={(e) => setEmergencyPhoneNum(e.value)}
-                error={emergencyPhoneNumberError}
-                types={["mobile", "landline"]}
-                className="w-full"
-              />
-            </div>
+            <SearchByMultipleFields
+              options={searchOptions}
+              onSearch={handleSearch}
+            />
           </div>
         </div>
       </div>

From cb5d5778076da680d284cfefa981e08d6db7805d Mon Sep 17 00:00:00 2001
From: arunava pari <arunavapari536@gmail.com>
Date: Sun, 20 Oct 2024 11:22:52 +0530
Subject: [PATCH 03/54] Add seach by multiple fileds

---
 src/Components/Patient/ManagePatients.tsx | 62 ++---------------------
 1 file changed, 3 insertions(+), 59 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 0715fc27fa1..b4257e05a65 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -23,12 +23,12 @@ import CountBlock from "../../CAREUI/display/Count";
 import DoctorVideoSlideover from "../Facility/DoctorVideoSlideover";
 import { ExportMenu } from "../Common/Export";
 import FacilitiesSelectDialogue from "../ExternalResult/FacilitiesSelectDialogue";
-import { FieldChangeEvent } from "../Form/FormFields/Utils";
+
 import FilterBadge from "../../CAREUI/display/FilterBadge";
 import PatientFilter from "./PatientFilter";
-import PhoneNumberFormField from "../Form/FormFields/PhoneNumberFormField";
+
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-import SearchInput from "../Form/SearchInput";
+
 import SortDropdownMenu from "../Common/SortDropdown";
 import {
   formatPatientAge,
@@ -107,46 +107,6 @@ export const PatientManager = () => {
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
   const [showDialog, setShowDialog] = useState<"create" | "list-discharged">();
   const [showDoctors, setShowDoctors] = useState(false);
-  const [phone_number, setPhoneNumber] = useState("");
-  const [phoneNumberError, setPhoneNumberError] = useState("");
-  const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
-  const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
-    useState("");
-
-  const setPhoneNum = (phone_number: string) => {
-    setPhoneNumber(phone_number);
-    if (phone_number.length >= 13) {
-      setPhoneNumberError("");
-      updateQuery({ phone_number });
-      return;
-    }
-
-    if (phone_number === "+91" || phone_number === "") {
-      setPhoneNumberError("");
-      qParams.phone_number && updateQuery({ phone_number: null });
-      return;
-    }
-
-    setPhoneNumberError("Enter a valid number");
-  };
-
-  const setEmergencyPhoneNum = (emergency_phone_number: string) => {
-    setEmergencyPhoneNumber(emergency_phone_number);
-    if (emergency_phone_number.length >= 13) {
-      setEmergencyPhoneNumberError("");
-      updateQuery({ emergency_phone_number });
-      return;
-    }
-
-    if (emergency_phone_number === "+91" || emergency_phone_number === "") {
-      setEmergencyPhoneNumberError("");
-      qParams.emergency_phone_number &&
-        updateQuery({ emergency_phone_number: null });
-      return;
-    }
-
-    setEmergencyPhoneNumberError("Enter a valid number");
-  };
 
   const tabValue =
     qParams.last_consultation__new_discharge_reason ||
@@ -333,14 +293,6 @@ export const PatientManager = () => {
 
   const { loading: isLoading, data } = useQuery(routes.patientList, {
     query: params,
-    onResponse: () => {
-      if (!params.phone_number) {
-        setPhoneNumber("+91");
-      }
-      if (!params.emergency_phone_number) {
-        setEmergencyPhoneNumber("+91");
-      }
-    },
   });
 
   const getTheCategoryFromId = () => {
@@ -793,14 +745,6 @@ export const PatientManager = () => {
     );
   }
 
-  const queryField = <T,>(name: string, defaultValue?: T) => {
-    return {
-      name,
-      value: qParams[name] || defaultValue,
-      onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
-    };
-  };
-
   const onlyAccessibleFacility =
     permittedFacilities?.count === 1 ? permittedFacilities.results[0] : null;
 

From c4cfde4c60c7e4281d572fba12b0bfcb4a32b28d Mon Sep 17 00:00:00 2001
From: arunava pari <arunavapari536@gmail.com>
Date: Wed, 23 Oct 2024 00:30:24 +0530
Subject: [PATCH 04/54] required changes fixed

---
 .../Common/SearchByMultipleFields.tsx         |   9 +-
 .../Form/FormFields/PhoneNumberFormField.tsx  | 256 +++++++++---------
 src/Components/Form/FormFields/Utils.ts       |   2 +-
 src/Components/ui/input.tsx                   |   2 +-
 4 files changed, 131 insertions(+), 138 deletions(-)

diff --git a/src/Components/Common/SearchByMultipleFields.tsx b/src/Components/Common/SearchByMultipleFields.tsx
index d2c84d18769..4d74787e7ac 100644
--- a/src/Components/Common/SearchByMultipleFields.tsx
+++ b/src/Components/Common/SearchByMultipleFields.tsx
@@ -11,6 +11,7 @@ import { Button } from "@/Components/ui/button";
 import { cn } from "@/lib/utils";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import PhoneNumberFormField from "@/Components/Form/FormFields/PhoneNumberFormField";
+import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import {
   Command,
   CommandGroup,
@@ -82,7 +83,11 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, []);
-
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [selectedOption]);
   const handleOptionChange = useCallback(
     (option: SearchOption) => {
       setSelectedOption(option);
@@ -121,7 +126,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     const commonProps = {
       ref: inputRef,
       value: searchValue,
-      onChange: (e: any) =>
+      onChange: (e: FieldChangeEvent<string>) =>
         handleSearchChange(e.target ? e.target.value : e.value),
       onKeyDown: handleKeyDown,
       className: cn(
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index dcac56dc901..e52790d6f22 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -7,7 +7,7 @@ import {
   formatPhoneNumber as formatPhoneNumberUtil,
   getCountryCode,
   CountryData,
-  humanizeStrings,
+  // humanizeStrings,
 } from "../../../Utils/utils";
 import phoneCodesJson from "../../../Common/static/countryPhoneAndFlags.json";
 import {
@@ -17,8 +17,8 @@ import {
 } from "../FieldValidators";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { useTranslation } from "react-i18next";
-
+// import { useTranslation } from "react-i18next";
+import React from "react";
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
@@ -28,148 +28,135 @@ interface Props extends FormFieldBaseProps<string> {
   disableValidation?: boolean;
 }
 
-export default function PhoneNumberFormField(props: Props) {
-  const field = useFormFieldPropsResolver(props);
-  const [error, setError] = useState<FieldError | undefined>();
-  const [country, setCountry] = useState<CountryData>({
-    flag: "🇮🇳",
-    name: "India",
-    code: "91",
-  });
-  const validator = useMemo(
-    () => PhoneNumberValidator(props.types),
-    [props.types],
-  );
+const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
+  (props, ref) => {
+    const field = useFormFieldPropsResolver(props);
+    const [error, setError] = useState<FieldError | undefined>();
+    const [country, setCountry] = useState<CountryData>({
+      flag: "🇮🇳",
+      name: "India",
+      code: "91",
+    });
+    const validator = useMemo(
+      () => PhoneNumberValidator(props.types),
+      [props.types],
+    );
 
-  const validate = useMemo(
-    () => (value: string | undefined, event: "blur" | "change") => {
-      if (!value || props.disableValidation) {
-        return;
-      }
+    const validate = useMemo(
+      () => (value: string | undefined, event: "blur" | "change") => {
+        if (!value || props.disableValidation) {
+          return;
+        }
 
-      const newError = validator(value);
+        const newError = validator(value);
 
-      if (!newError) {
-        return;
-      } else if (event === "blur") {
-        return newError;
-      }
-    },
-    [props.disableValidation],
-  );
+        if (!newError) {
+          return;
+        } else if (event === "blur") {
+          return newError;
+        }
+      },
+      [props.disableValidation],
+    );
 
-  const setValue = useCallback(
-    (value: string) => {
-      value = value.replaceAll(/[^0-9+]/g, "");
-      if (value.length > 12 && value.startsWith("+910")) {
-        value = "+91" + value.slice(4);
-      }
+    const setValue = useCallback(
+      (value: string) => {
+        value = value.replaceAll(/[^0-9+]/g, "");
+        if (value.length > 12 && value.startsWith("+910")) {
+          value = "+91" + value.slice(4);
+        }
 
-      const error = validate(value, "change");
-      field.handleChange(value);
+        const error = validate(value, "change");
+        field.handleChange(value);
 
-      setError(error);
-    },
-    [field, validate],
-  );
+        setError(error);
+      },
+      [field, validate],
+    );
 
-  const handleCountryChange = (value: CountryData): void => {
-    setCountry(value);
-    setValue(conditionPhoneCode(value.code));
-  };
+    const handleCountryChange = (value: CountryData): void => {
+      setCountry(value);
+      setValue(conditionPhoneCode(value.code));
+    };
 
-  useEffect(() => {
-    if (field.value && field.value.length > 0) {
-      if (field.value.startsWith("1800")) {
-        setCountry({ flag: "📞", name: "Support", code: "1800" });
-        return;
-      }
-      if (field.value === "+") {
-        setCountry({ flag: "🌍", name: "Other", code: "+" });
-        return;
+    useEffect(() => {
+      if (field.value && field.value.length > 0) {
+        if (field.value.startsWith("1800")) {
+          setCountry({ flag: "📞", name: "Support", code: "1800" });
+          return;
+        }
+        if (field.value === "+") {
+          setCountry({ flag: "🌍", name: "Other", code: "+" });
+          return;
+        }
+        setCountry(phoneCodes[getCountryCode(field.value)!]);
       }
-      setCountry(phoneCodes[getCountryCode(field.value)!]);
-    }
-  }, [setValue]);
-
-  useEffect(() => {
-    setValue(field.value || "+91");
-  }, []);
-
-  return (
-    <FormField
-      field={{
-        ...field,
-        error: field.error || error,
-        labelSuffix: field.labelSuffix || "",
-      }}
-    >
-      <div className="relative rounded-md">
-        <Popover>
-          {({ open }: { open: boolean }) => {
-            return (
-              <>
-                <PopoverButton className="absolute h-full">
-                  <div className="hover:border-1 absolute inset-y-0 left-0 flex cursor-pointer items-center justify-around border-gray-200 hover:border hover:bg-gray-50">
-                    <span className="rounded-md pl-2">
-                      {country?.flag ?? "🇮🇳"}
-                    </span>
-                    <CareIcon
-                      icon="l-angle-down"
-                      className={`text-2xl font-bold ${open && "rotate-180"}`}
-                    />
-                  </div>
-                </PopoverButton>
-                <input
-                  type="tel"
-                  id={field.id}
-                  name={field.name}
-                  autoComplete={props.autoComplete ?? "tel"}
-                  className={classNames(
-                    "cui-input-base h-full pl-14 tracking-widest sm:leading-6",
-                    field.error && "border-danger-500",
-                    field.className,
-                  )}
-                  maxLength={field.value?.startsWith("1800") ? 11 : 15}
-                  placeholder={props.placeholder}
-                  value={formatPhoneNumber(field.value, props.types)}
-                  onChange={(e) => setValue(e.target.value)}
-                  disabled={field.disabled}
-                  onBlur={() => setError(validate(field.value, "blur"))}
-                />
-                <PopoverPanel className="w-full">
-                  {({ close }) => (
-                    <CountryCodesList
-                      handleCountryChange={handleCountryChange}
-                      onClose={close}
-                    />
-                  )}
-                </PopoverPanel>
-              </>
-            );
-          }}
-        </Popover>
-      </div>
-    </FormField>
-  );
-}
+    }, [setValue]);
 
-const PhoneNumberTypesHelp = (props: { types: PhoneNumberType[] }) => {
-  const { t } = useTranslation();
+    useEffect(() => {
+      setValue(field.value || "+91");
+    }, []);
 
-  return (
-    <div className="tooltip mt-1 pr-1 text-secondary-500">
-      <CareIcon icon="l-question-circle" className="text-lg" />
-      <div className="tooltip-text tooltip-bottom w-64 -translate-x-full whitespace-pre-wrap text-sm">
-        Supports only{" "}
-        <span className="font-bold lowercase">
-          {humanizeStrings(props.types.map((item) => t(item)))}
-        </span>{" "}
-        numbers.
-      </div>
-    </div>
-  );
-};
+    return (
+      <FormField
+        field={{
+          ...field,
+          errorClassName: "hidden",
+          error: field.error || error,
+          labelSuffix: field.labelSuffix || "",
+        }}
+      >
+        <div className="relative rounded-md">
+          <Popover>
+            {({ open }: { open: boolean }) => {
+              return (
+                <>
+                  <PopoverButton className="absolute h-full">
+                    <div className="hover:border-1 absolute inset-y-0 left-0 flex cursor-pointer items-center justify-around border-gray-200 hover:border hover:bg-gray-50">
+                      <span className="rounded-md pl-2">
+                        {country?.flag ?? "🇮🇳"}
+                      </span>
+                      <CareIcon
+                        icon="l-angle-down"
+                        className={`text-2xl font-bold ${open && "rotate-180"}`}
+                      />
+                    </div>
+                  </PopoverButton>
+                  <input
+                    type="tel"
+                    id={field.id}
+                    name={field.name}
+                    autoComplete={props.autoComplete ?? "tel"}
+                    className={classNames(
+                      "cui-input-base h-full pl-14 tracking-widest sm:leading-6",
+                      field.error && "border-danger-500",
+                      field.className,
+                    )}
+                    maxLength={field.value?.startsWith("1800") ? 11 : 15}
+                    placeholder={props.placeholder}
+                    value={formatPhoneNumber(field.value, props.types)}
+                    onChange={(e) => setValue(e.target.value)}
+                    disabled={field.disabled}
+                    onBlur={() => setError(validate(field.value, "blur"))}
+                    ref={ref}
+                  />
+                  <PopoverPanel className="w-full">
+                    {({ close }) => (
+                      <CountryCodesList
+                        handleCountryChange={handleCountryChange}
+                        onClose={close}
+                      />
+                    )}
+                  </PopoverPanel>
+                </>
+              );
+            }}
+          </Popover>
+        </div>
+      </FormField>
+    );
+  },
+);
 
 const conditionPhoneCode = (code: string) => {
   code = code.split(" ")[0];
@@ -275,3 +262,4 @@ const CountryCodesList = ({
     </div>
   );
 };
+export default PhoneNumberFormField;
diff --git a/src/Components/Form/FormFields/Utils.ts b/src/Components/Form/FormFields/Utils.ts
index ed01f01c4ab..01a1cc99a07 100644
--- a/src/Components/Form/FormFields/Utils.ts
+++ b/src/Components/Form/FormFields/Utils.ts
@@ -1,6 +1,6 @@
 import { FieldError } from "../FieldValidators";
 
-export type FieldChangeEvent<T> = { name: string; value: T };
+export type FieldChangeEvent<T> = { name: string; value: T; target?: any };
 export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
 
 /**
diff --git a/src/Components/ui/input.tsx b/src/Components/ui/input.tsx
index 2de761f037d..06c88477a19 100644
--- a/src/Components/ui/input.tsx
+++ b/src/Components/ui/input.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "@/lib/utils";
 
 export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {

From 2c8e2556a07e3d8c3ff3a30e7019be91a67ea0bf Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 23 Oct 2024 22:06:24 +0530
Subject: [PATCH 05/54] conflict resolved

---
 package-lock.json                             | 137 ------------------
 .../Common/SearchByMultipleFields.tsx         |  34 ++++-
 src/components/Patient/ManagePatients.tsx     |   4 +-
 3 files changed, 29 insertions(+), 146 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e44202d8df0..ef3375281ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,10 +115,7 @@
     "apps/care_livekit_fe": {
       "name": "care-livekit",
       "version": "0.0.1",
-<<<<<<< HEAD
       "extraneous": true,
-=======
->>>>>>> v/develop
       "license": "ISC",
       "dependencies": {
         "@livekit/components-react": "^2.6.2",
@@ -1895,11 +1892,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bufbuild/protobuf": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
-      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag=="
-    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -2800,64 +2792,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@livekit/components-core": {
-      "version": "0.11.9",
-      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.11.9.tgz",
-      "integrity": "sha512-LPE1BZ+YTaqsVqGy/GAlpiO5rEI8XpEaf1TQcGdZN1BCBas9hTHt7/aHMbHQJ0K5xuAFQx8is6dFe451T4qXIQ==",
-      "dependencies": {
-        "@floating-ui/dom": "1.6.11",
-        "loglevel": "1.9.1",
-        "rxjs": "7.8.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "livekit-client": "^2.5.7",
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@livekit/components-react": {
-      "version": "2.6.5",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.6.5.tgz",
-      "integrity": "sha512-G3BpBlKy+lWTV9MH3/oBTBC17Z8CWqZ9GnjcG/xmYI0IvqmY89tVWph7cj2Bq0taniA+mD3U9EMPr68fOb1m1g==",
-      "dependencies": {
-        "@livekit/components-core": "0.11.9",
-        "clsx": "2.1.1",
-        "usehooks-ts": "3.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@livekit/krisp-noise-filter": "^0.2.12",
-        "livekit-client": "^2.5.7",
-        "react": ">=18",
-        "react-dom": ">=18",
-        "tslib": "^2.6.2"
-      },
-      "peerDependenciesMeta": {
-        "@livekit/krisp-noise-filter": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@livekit/components-styles": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@livekit/components-styles/-/components-styles-1.1.4.tgz",
-      "integrity": "sha512-QCupn7tQ/dy/WZclrfsgtDe8peiGYS6Ied1IGkKOysaXo04l90t62SIUTKyxgd0dNDhUDC0p34qCggGZs/44lQ==",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/@livekit/protocol": {
-      "version": "1.24.0",
-      "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.24.0.tgz",
-      "integrity": "sha512-9dCsqnkMn7lvbI4NGh18zhLDsrXyUcpS++TEFgEk5Xv1WM3R2kT3EzqgL1P/mr3jaabM6rJ8wZA/KJLuQNpF5w==",
-      "dependencies": {
-        "@bufbuild/protobuf": "^1.10.0"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -6730,10 +6664,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/care-livekit": {
-      "resolved": "apps/care_livekit_fe",
-      "link": true
-    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -12189,26 +12119,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/livekit-client": {
-      "version": "2.5.9",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.5.9.tgz",
-      "integrity": "sha512-oDpK6SKYB1F+mNO+25DA0bF0cD2XoOJeD8ji4YQpzDBQv2IxeyKrQhoqXAqrYgIKuiMNkImSf+yg2v7EHSl4Og==",
-      "dependencies": {
-        "@livekit/protocol": "1.24.0",
-        "events": "^3.3.0",
-        "loglevel": "^1.8.0",
-        "sdp-transform": "^2.14.1",
-        "ts-debounce": "^4.0.0",
-        "tslib": "2.7.0",
-        "typed-emitter": "^2.1.0",
-        "webrtc-adapter": "^9.0.0"
-      }
-    },
-    "node_modules/livekit-client/node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
-    },
     "node_modules/load-plugin": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-6.0.3.tgz",
@@ -12414,18 +12324,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/loglevel": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
-      "integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
-      "engines": {
-        "node": ">= 0.6.0"
-      },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/loglevel"
-      }
-    },
     "node_modules/long": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
@@ -17681,14 +17579,6 @@
       "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==",
       "license": "MIT"
     },
-    "node_modules/sdp-transform": {
-      "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.2.tgz",
-      "integrity": "sha512-icY6jVao7MfKCieyo1AyxFYm1baiM+fA00qW/KrNNVlkxHAd34riEKuEkUe4bBb3gJwLJZM+xT60Yj1QL8rHiA==",
-      "bin": {
-        "sdp-verify": "checker.js"
-      }
-    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -19014,11 +18904,6 @@
         "typescript": ">=4.2.0"
       }
     },
-    "node_modules/ts-debounce": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/ts-debounce/-/ts-debounce-4.0.0.tgz",
-      "integrity": "sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg=="
-    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -19199,14 +19084,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/typed-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz",
-      "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==",
-      "optionalDependencies": {
-        "rxjs": "*"
-      }
-    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -19784,20 +19661,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
-      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
-      "dependencies": {
-        "lodash.debounce": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=16.15.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17 || ^18"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 1462681c87b..3441c0284c3 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -58,31 +58,45 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const [searchValue, setSearchValue] = useState(selectedOption.value || "");
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-
+  const [focusedIndex, setFocusedIndex] = useState(0);
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "/" && document.activeElement !== inputRef.current) {
         e.preventDefault();
         setOpen(true);
+      } else if (e.key === "ArrowDown") {
+        setFocusedIndex((prevIndex) =>
+          prevIndex === options.length - 1 ? 0 : prevIndex + 1,
+        );
+        console.log(focusedIndex);
+      } else if (e.key === "ArrowUp") {
+        setFocusedIndex((prevIndex) =>
+          prevIndex === 0 ? options.length - 1 : prevIndex - 1,
+        );
+        console.log(focusedIndex);
+      } else if (e.key === "Enter") {
+        handleOptionChange(options[focusedIndex]);
       }
 
-      if (open) {
-        if (e.key === "Escape") {
-          setOpen(false);
-        }
+      if (e.key === "Escape") {
+        inputRef.current?.focus();
+        setOpen(false);
       }
 
       options.forEach((option) => {
         if (e.key.toLowerCase() === option.shortcut_key.toLowerCase()) {
           e.preventDefault();
+
           handleOptionChange(option);
+        } else if (e.key === "/") {
+          setOpen(true);
         }
       });
     };
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, []);
+  }, [focusedIndex]);
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus();
@@ -181,10 +195,16 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             <Command>
               <CommandList>
                 <CommandGroup>
-                  {options.map((option) => (
+                  {options.map((option, index) => (
                     <CommandItem
                       key={option.key}
                       onSelect={() => handleOptionChange(option)}
+                      className={
+                        selectedOption.label === option.label ||
+                        focusedIndex === index
+                          ? "bg-gray-200"
+                          : "bg-white"
+                      }
                     >
                       <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
                       <span className="flex-1">{t(option.label)}</span>
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index a0c8a77e3d6..8cd97893fd1 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -57,8 +57,8 @@ import { isPatientMandatoryDataFilled } from "./Utils.js";
 import request from "../../Utils/request/request.js";
 import { Avatar } from "../Common/Avatar.js";
 
-import Loading from "@/Components/Common/Loading";
-import SearchByMultipleFields from "@/Components/Common/SearchByMultipleFields";
+import Loading from "@/components/Common/Loading";
+import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 
 interface TabPanelProps {
   children?: ReactNode;

From 4a5d79df3017fae8382f45ee05f0098af0ed5e6b Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 24 Oct 2024 14:16:25 +0530
Subject: [PATCH 06/54] checked

---
 package-lock.json                             | 63 +++++++++++++++++++
 package.json                                  |  1 +
 .../Form/FormFields/PhoneNumberFormField.tsx  |  4 +-
 3 files changed, 65 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ef3375281ba..73288cf86a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,6 +62,7 @@
         "rehype-raw": "^6.1.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
+        "twemoji": "^14.0.2",
         "use-keyboard-shortcut": "^1.1.6",
         "xlsx": "^0.18.5"
       },
@@ -18979,6 +18980,68 @@
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
       "license": "Unlicense"
     },
+    "node_modules/twemoji": {
+      "version": "14.0.2",
+      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.2.tgz",
+      "integrity": "sha512-BzOoXIe1QVdmsUmZ54xbEH+8AgtOKUiG53zO5vVP2iUu6h5u9lN15NcuS6te4OY96qx0H7JK9vjjl9WQbkTRuA==",
+      "license": "MIT",
+      "dependencies": {
+        "fs-extra": "^8.0.1",
+        "jsonfile": "^5.0.0",
+        "twemoji-parser": "14.0.0",
+        "universalify": "^0.1.2"
+      }
+    },
+    "node_modules/twemoji-parser": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
+      "integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA==",
+      "license": "MIT"
+    },
+    "node_modules/twemoji/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/twemoji/node_modules/fs-extra/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "license": "MIT",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/twemoji/node_modules/jsonfile": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
+      "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^0.1.2"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/twemoji/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 107ea4e1adf..7ee5ca8db63 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
     "rehype-raw": "^6.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
+    "twemoji": "^14.0.2",
     "use-keyboard-shortcut": "^1.1.6",
     "xlsx": "^0.18.5"
   },
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 3015771abd7..1fd837d1e92 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -113,9 +113,7 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
                 <>
                   <PopoverButton className="absolute h-full">
                     <div className="hover:border-1 absolute inset-y-0 left-0 flex cursor-pointer items-center justify-around border-gray-200 hover:border hover:bg-gray-50">
-                      <span className="rounded-md pl-2">
-                        {country?.flag ?? "🇮🇳"}
-                      </span>
+                      <span className="rounded-md pl-2">{country?.flag}</span>
                       <CareIcon
                         icon="l-angle-down"
                         className={`text-2xl font-bold ${open && "rotate-180"}`}

From 0cec042bf17788b4f3b56228a26e932a240db7a0 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Tue, 29 Oct 2024 22:10:58 +0530
Subject: [PATCH 07/54] tested locally

---
 .env                                          |  2 +-
 cypress/pageobject/Patient/PatientCreation.ts |  4 +-
 package-lock.json                             | 56 ++++++++++----
 .../Common/SearchByMultipleFields.tsx         | 30 ++++----
 src/components/Facility/AssetCreate.tsx       | 74 +++++++++----------
 .../Form/FormFields/PhoneNumberFormField.tsx  | 20 ++---
 src/components/Form/FormFields/Utils.ts       | 10 ++-
 src/components/Patient/ManagePatients.tsx     | 21 ++----
 src/components/ui/command.tsx                 |  2 +-
 src/components/ui/input.tsx                   |  1 +
 10 files changed, 126 insertions(+), 94 deletions(-)

diff --git a/.env b/.env
index ebc0ebd5be3..d09f2f6c653 100644
--- a/.env
+++ b/.env
@@ -14,4 +14,4 @@ ESLINT_NO_DEV_ERRORS=true
 CARE_CDN_URL="https://egov-s3-facility-10bedicu.s3.amazonaws.com https://egov-s3-patient-data-10bedicu.s3.amazonaws.com http://localhost:4566"
 REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn"
 
-REACT_ENABLED_APPS="ohcnetwork/care_livekit_fe@main"
+REACT_ENABLED_APPS="ohcnetwork/care_livekit_fe@main"
\ No newline at end of file
diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
index a583844a632..76dcbf70fa4 100644
--- a/cypress/pageobject/Patient/PatientCreation.ts
+++ b/cypress/pageobject/Patient/PatientCreation.ts
@@ -11,7 +11,8 @@ export class PatientPage {
   }
 
   visitPatient(patientName: string) {
-    cy.get("#name").click().type(patientName);
+    cy.get("button").contains("Name").click();
+    cy.get("#name").type(patientName); // Type the patient name
     cy.intercept("GET", "**/api/v1/consultation/**").as("getPatient");
     cy.get("#patient-name-list").contains(patientName).click();
     cy.wait(2000);
@@ -68,6 +69,7 @@ export class PatientPage {
   }
 
   typePatientNameList(patientName: string) {
+    cy.get("button").contains("Name").click();
     cy.get("#name").click().type(patientName);
   }
 
diff --git a/package-lock.json b/package-lock.json
index c9f897aefc0..965882a9ce8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -116,7 +116,6 @@
     "apps/care_livekit_fe": {
       "name": "care-livekit",
       "version": "0.0.1",
-      "extraneous": true,
       "license": "ISC",
       "dependencies": {
         "@livekit/components-react": "^2.6.2",
@@ -1893,6 +1892,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bufbuild/protobuf": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-1.10.0.tgz",
+      "integrity": "sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==",
+      "license": "(Apache-2.0 AND BSD-3-Clause)"
+    },
     "node_modules/@colors/colors": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -2794,9 +2799,10 @@
       }
     },
     "node_modules/@livekit/components-core": {
-      "version": "0.11.9",
-      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.11.9.tgz",
-      "integrity": "sha512-LPE1BZ+YTaqsVqGy/GAlpiO5rEI8XpEaf1TQcGdZN1BCBas9hTHt7/aHMbHQJ0K5xuAFQx8is6dFe451T4qXIQ==",
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.11.10.tgz",
+      "integrity": "sha512-PvFlKq1W64b9GfFjG7L4/o7ulAl5yFFpDTvG+JHQiXkaPaecMPt/qPbs6zdvUlC7om1TGMuW/pIN7o585Xz9Fg==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@floating-ui/dom": "1.6.11",
         "loglevel": "1.9.1",
@@ -2811,11 +2817,12 @@
       }
     },
     "node_modules/@livekit/components-react": {
-      "version": "2.6.5",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.6.5.tgz",
-      "integrity": "sha512-G3BpBlKy+lWTV9MH3/oBTBC17Z8CWqZ9GnjcG/xmYI0IvqmY89tVWph7cj2Bq0taniA+mD3U9EMPr68fOb1m1g==",
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.6.7.tgz",
+      "integrity": "sha512-z8dgrBrRXIe7oagwFyjehdwL/4zpySJyPdAjeMDXZVbTXYNAugb3a88Ws9yQz4PZFECLkIPXJCN3C3YR+bgh5Q==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@livekit/components-core": "0.11.9",
+        "@livekit/components-core": "0.11.10",
         "clsx": "2.1.1",
         "usehooks-ts": "3.1.0"
       },
@@ -2839,14 +2846,22 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@livekit/components-styles/-/components-styles-1.1.4.tgz",
       "integrity": "sha512-QCupn7tQ/dy/WZclrfsgtDe8peiGYS6Ied1IGkKOysaXo04l90t62SIUTKyxgd0dNDhUDC0p34qCggGZs/44lQ==",
+      "license": "Apache-2.0",
       "engines": {
         "node": ">=18"
       }
     },
+    "node_modules/@livekit/mutex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@livekit/mutex/-/mutex-1.0.0.tgz",
+      "integrity": "sha512-aiUhoThBNF9UyGTxEURFzJLhhPLIVTnQiEVMjRhPnfHNKLfo2JY9xovHKIus7B78UD5hsP6DlgpmAsjrz4U0Iw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@livekit/protocol": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/@livekit/protocol/-/protocol-1.24.0.tgz",
       "integrity": "sha512-9dCsqnkMn7lvbI4NGh18zhLDsrXyUcpS++TEFgEk5Xv1WM3R2kT3EzqgL1P/mr3jaabM6rJ8wZA/KJLuQNpF5w==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@bufbuild/protobuf": "^1.10.0"
       }
@@ -6723,6 +6738,10 @@
         "node": ">=6"
       }
     },
+    "node_modules/care-livekit": {
+      "resolved": "apps/care_livekit_fe",
+      "link": true
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -12179,10 +12198,12 @@
       }
     },
     "node_modules/livekit-client": {
-      "version": "2.5.9",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.5.9.tgz",
-      "integrity": "sha512-oDpK6SKYB1F+mNO+25DA0bF0cD2XoOJeD8ji4YQpzDBQv2IxeyKrQhoqXAqrYgIKuiMNkImSf+yg2v7EHSl4Og==",
+      "version": "2.5.10",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.5.10.tgz",
+      "integrity": "sha512-H7EeIb19LAH8ejlvhh0JWtWkvXDan6Yf3bpFGlDMb54uPmyRgBY+McfgQsFgJCB9WJL0X+GYUoV1Cmnn8iAoIQ==",
+      "license": "Apache-2.0",
       "dependencies": {
+        "@livekit/mutex": "1.0.0",
         "@livekit/protocol": "1.24.0",
         "events": "^3.3.0",
         "loglevel": "^1.8.0",
@@ -12196,7 +12217,8 @@
     "node_modules/livekit-client/node_modules/tslib": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="
+      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
+      "license": "0BSD"
     },
     "node_modules/load-plugin": {
       "version": "6.0.3",
@@ -12308,8 +12330,7 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -12407,6 +12428,7 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
       "integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
       },
@@ -17674,6 +17696,7 @@
       "version": "2.14.2",
       "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-2.14.2.tgz",
       "integrity": "sha512-icY6jVao7MfKCieyo1AyxFYm1baiM+fA00qW/KrNNVlkxHAd34riEKuEkUe4bBb3gJwLJZM+xT60Yj1QL8rHiA==",
+      "license": "MIT",
       "bin": {
         "sdp-verify": "checker.js"
       }
@@ -19006,7 +19029,8 @@
     "node_modules/ts-debounce": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/ts-debounce/-/ts-debounce-4.0.0.tgz",
-      "integrity": "sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg=="
+      "integrity": "sha512-+1iDGY6NmOGidq7i7xZGA4cm8DAa6fqdYcvO5Z6yBevH++Bdo9Qt/mN0TzHUgcCcKv1gmh9+W5dHqz8pMWbCbg==",
+      "license": "MIT"
     },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
@@ -19254,6 +19278,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/typed-emitter/-/typed-emitter-2.1.0.tgz",
       "integrity": "sha512-g/KzbYKbH5C2vPkaXGu8DJlHrGKHLsM25Zg9WuC9pMGfuvT+X25tZQWo5fK1BjBm8+UrVE9LDCvaY0CQk+fXDA==",
+      "license": "MIT",
       "optionalDependencies": {
         "rxjs": "*"
       }
@@ -19839,6 +19864,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
       "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "license": "MIT",
       "dependencies": {
         "lodash.debounce": "^4.0.8"
       },
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 3441c0284c3..9eaa15586d2 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
+import { FieldError } from "@/components/Form/FieldValidators";
 import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import {
   Command,
@@ -31,7 +32,7 @@ interface SearchOption {
   placeholder: string;
   value: string;
   shortcut_key: string;
-  component?: React.ComponentType<any>;
+  component?: React.ComponentType<HTMLDivElement>;
 }
 
 interface SearchByMultipleFieldsProps {
@@ -59,6 +60,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const [focusedIndex, setFocusedIndex] = useState(0);
+  const [error, setError] = useState<string | undefined | boolean>();
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "/" && document.activeElement !== inputRef.current) {
@@ -83,12 +85,8 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         setOpen(false);
       }
 
-      options.forEach((option) => {
-        if (e.key.toLowerCase() === option.shortcut_key.toLowerCase()) {
-          e.preventDefault();
-
-          handleOptionChange(option);
-        } else if (e.key === "/") {
+      options.forEach(() => {
+        if (e.key === "/") {
           setOpen(true);
         }
       });
@@ -106,8 +104,10 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     (option: SearchOption) => {
       setSelectedOption(option);
       setSearchValue(option.value || "");
+      setFocusedIndex(options.findIndex((op) => op.key === option.key));
       setOpen(false);
       inputRef.current?.focus();
+      setError(false);
       onSearch(option.key, option.value);
     },
     [onSearch],
@@ -147,6 +147,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         "flex-grow border-none shadow-none focus-visible:ring-0 h-10",
         inputClassName,
       ),
+      myfunc: (er: FieldError) => setError(er),
     };
 
     switch (selectedOption.type) {
@@ -157,6 +158,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             placeholder={t(selectedOption.placeholder)}
             types={["mobile", "landline"]}
             {...commonProps}
+            errorClassName="hidden"
           />
         );
       default:
@@ -199,12 +201,9 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                     <CommandItem
                       key={option.key}
                       onSelect={() => handleOptionChange(option)}
-                      className={
-                        selectedOption.label === option.label ||
-                        focusedIndex === index
-                          ? "bg-gray-200"
-                          : "bg-white"
-                      }
+                      className={`${
+                        focusedIndex === index ? "bg-gray-100" : ""
+                      } hover:bg-secondary-100`}
                     >
                       <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
                       <span className="flex-1">{t(option.label)}</span>
@@ -220,6 +219,11 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         </Popover>
         {renderSearchInput}
       </div>
+      {error && (
+        <div className="error-text ml-3 bg-white text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">
+          Invalid phone number
+        </div>
+      )}
       <div className="flex flex-wrap gap-2 rounded-b-lg border-x border-b border-gray-200 bg-gray-50 p-2 shadow">
         {options.map((option) => (
           <Button
diff --git a/src/components/Facility/AssetCreate.tsx b/src/components/Facility/AssetCreate.tsx
index 40bf4d276dd..656f9090c56 100644
--- a/src/components/Facility/AssetCreate.tsx
+++ b/src/components/Facility/AssetCreate.tsx
@@ -509,8 +509,8 @@ const AssetCreate = (props: AssetProps) => {
                 onSubmit={(e) => handleSubmit(e, false)}
                 className="rounded bg-white p-6 transition-all sm:rounded-xl sm:p-12"
               >
-                <div className="grid grid-cols-1 items-start gap-x-12">
-                  <div className="grid grid-cols-6 gap-x-6">
+                <div className="grid grid-cols-1 items-start gap-5 gap-x-12">
+                  <div className="grid grid-cols-6 gap-6 gap-x-6">
                     {/* General Details Section */}
                     {sectionTitle("General Details")}
                     {/* Asset Name */}
@@ -530,14 +530,15 @@ const AssetCreate = (props: AssetProps) => {
                     </div>
 
                     {/* Location */}
-                    <FieldLabel className="w-max text-sm" required>
-                      {t("asset_location")}
-                    </FieldLabel>
+
                     <div
                       ref={fieldRef["location"]}
                       className="col-span-6"
                       data-testid="asset-location-input"
                     >
+                      <FieldLabel className="w-max text-sm" required>
+                        {t("asset_location")}
+                      </FieldLabel>
                       <LocationSelect
                         name="Facilities"
                         setSelected={(selectedId) =>
@@ -594,25 +595,21 @@ const AssetCreate = (props: AssetProps) => {
                       />
                     </div>
                     {/* Divider */}
+
+                    {/* Working Status */}
                     <div
+                      ref={fieldRef["is_working"]}
                       className="col-span-6"
-                      data-testid="asset-divider-input"
+                      data-testid="asset-working-status-input"
                     >
                       <hr
                         className={
                           "transition-all " +
                           (is_working === "true"
                             ? "my-0 opacity-0"
-                            : "my-4 opacity-100")
+                            : " my-4 opacity-100")
                         }
                       />
-                    </div>
-                    {/* Working Status */}
-                    <div
-                      ref={fieldRef["is_working"]}
-                      className="col-span-6"
-                      data-testid="asset-working-status-input"
-                    >
                       <SwitchV2
                         className="col-span-6"
                         required
@@ -653,7 +650,9 @@ const AssetCreate = (props: AssetProps) => {
                       />
                     </div>
                     {/* Divider */}
-                    <div className="col-span-6">
+
+                    {/* Asset QR ID */}
+                    <div className="col-span-6 flex flex-col">
                       <hr
                         className={
                           "transition-all " +
@@ -662,32 +661,31 @@ const AssetCreate = (props: AssetProps) => {
                             : "mb-7 opacity-100")
                         }
                       />
-                    </div>
-                    {/* Asset QR ID */}
-                    <div className="col-span-6 flex flex-row items-center gap-3">
-                      <div className="w-full" data-testid="asset-qr-id-input">
-                        <TextFormField
-                          id="qr_code_id"
-                          name="qr_code_id"
-                          placeholder=""
-                          label={t("asset_qr_id")}
-                          value={qrCodeId}
-                          onChange={(e) => setQrCodeId(e.value)}
-                          error={state.errors.qr_code_id}
-                        />
-                      </div>
-                      <div
-                        className="ml-1 mt-1 flex h-10 cursor-pointer items-center justify-self-end rounded border border-secondary-400 px-4 hover:bg-secondary-200"
-                        onClick={() => setIsScannerActive(true)}
-                      >
-                        <CareIcon
-                          icon="l-focus"
-                          className="cursor-pointer text-lg"
-                        />
+                      <div className="flex flex-row items-center gap-3">
+                        <div className="w-full" data-testid="asset-qr-id-input">
+                          <TextFormField
+                            id="qr_code_id"
+                            name="qr_code_id"
+                            placeholder=""
+                            label={t("asset_qr_id")}
+                            value={qrCodeId}
+                            onChange={(e) => setQrCodeId(e.value)}
+                            error={state.errors.qr_code_id}
+                          />
+                        </div>
+                        <div
+                          className="ml-1 mt-1 mt-7 flex h-10 cursor-pointer items-center justify-self-end rounded border border-secondary-400 px-4 hover:bg-secondary-200"
+                          onClick={() => setIsScannerActive(true)}
+                        >
+                          <CareIcon
+                            icon="l-focus"
+                            className="cursor-pointer text-lg"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div className="grid grid-cols-6 gap-x-6">
+                  <div className="grid grid-cols-6 gap-6 gap-x-6">
                     {sectionTitle("Warranty Details")}
 
                     {/* Manufacturer */}
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 1fd837d1e92..cb5082b94bf 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -7,7 +7,6 @@ import {
   formatPhoneNumber as formatPhoneNumberUtil,
   getCountryCode,
   CountryData,
-  // humanizeStrings,
 } from "../../../Utils/utils";
 import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json";
 import {
@@ -22,6 +21,7 @@ import React from "react";
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
+  myfunc?: (er: FieldError) => void;
   types: PhoneNumberType[];
   placeholder?: string;
   autoComplete?: string;
@@ -71,9 +71,15 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
 
         setError(error);
       },
-      [field, validate],
+      [field, validate, error],
     );
-
+    useEffect(() => {
+      if (field.value!.length > 3) {
+        if (props.myfunc) {
+          props.myfunc(error);
+        }
+      }
+    }, [error]);
     const handleCountryChange = (value: CountryData): void => {
       setCountry(value);
       setValue(conditionPhoneCode(value.code));
@@ -93,15 +99,11 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       }
     }, [setValue]);
 
-    useEffect(() => {
-      setValue(field.value || "+91");
-    }, []);
-
     return (
       <FormField
         field={{
           ...field,
-          errorClassName: "hidden",
+
           error: field.error || error,
           labelSuffix: field.labelSuffix || "",
         }}
@@ -187,7 +189,7 @@ const CountryCodesList = ({
   const [searchValue, setSearchValue] = useState<string>("");
 
   return (
-    <div className="absolute z-10 w-full rounded-md border border-gray-300 bg-white shadow-lg transition-all duration-300">
+    <div className="absolute z-10 w-full rounded-md border border-secondary-300 bg-white shadow-lg transition-all duration-300">
       <div className="relative m-2">
         <CareIcon
           icon="l-search"
diff --git a/src/components/Form/FormFields/Utils.ts b/src/components/Form/FormFields/Utils.ts
index 01a1cc99a07..8124a7188b9 100644
--- a/src/components/Form/FormFields/Utils.ts
+++ b/src/components/Form/FormFields/Utils.ts
@@ -1,6 +1,12 @@
 import { FieldError } from "../FieldValidators";
-
-export type FieldChangeEvent<T> = { name: string; value: T; target?: any };
+interface targettype {
+  value: string;
+}
+export type FieldChangeEvent<T> = {
+  name: string;
+  value: T;
+  target?: targettype;
+};
 export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
 
 /**
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 8cd97893fd1..49f84862065 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -1,5 +1,4 @@
 import * as Notification from "../../Utils/Notifications";
-
 import {
   ADMITTED_TO,
   CONSENT_TYPE_CHOICES,
@@ -13,8 +12,7 @@ import {
 import { FacilityModel, PatientCategory } from "../Facility/models";
 import { Link, navigate } from "raviger";
 import { ReactNode, useEffect, useState, useCallback } from "react";
-import { parseOptionId } from "../../common/utils";
-
+import { parseOptionId } from "@/common/utils";
 import { AdvancedFilterButton } from "../../CAREUI/interactive/FiltersSlideover";
 import ButtonV2 from "@/components/Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -23,13 +21,10 @@ import CountBlock from "../../CAREUI/display/Count";
 import DoctorVideoSlideover from "../Facility/DoctorVideoSlideover";
 import { ExportMenu } from "@/components/Common/Export";
 import FacilitiesSelectDialogue from "../ExternalResult/FacilitiesSelectDialogue";
-
 import FilterBadge from "../../CAREUI/display/FilterBadge";
 import PatientFilter from "./PatientFilter";
-
 import RecordMeta from "../../CAREUI/display/RecordMeta";
-
-import SortDropdownMenu from "../Common/SortDropdown";
+import SortDropdownMenu from "@/components/Common/SortDropdown";
 import {
   formatPatientAge,
   humanizeStrings,
@@ -49,14 +44,12 @@ import {
   DiagnosesFilterKey,
   FILTER_BY_DIAGNOSES_KEYS,
 } from "./DiagnosesFilter.js";
-import { ICD11DiagnosisModel } from "../Diagnosis/types.js";
-import { getDiagnosesByIds } from "../Diagnosis/utils.js";
+import { ICD11DiagnosisModel } from "../Diagnosis/types";
+import { getDiagnosesByIds } from "../Diagnosis/utils";
 import Tabs from "../Common/components/Tabs.js";
-
-import { isPatientMandatoryDataFilled } from "./Utils.js";
-import request from "../../Utils/request/request.js";
-import { Avatar } from "../Common/Avatar.js";
-
+import { isPatientMandatoryDataFilled } from "./Utils";
+import request from "../../Utils/request/request";
+import { Avatar } from "../Common/Avatar";
 import Loading from "@/components/Common/Loading";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 5491876a4b6..3d56f725cdd 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-gray-100 data-[selected=true]:text-gray-900 data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-gray-800 dark:data-[selected=true]:text-gray-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:text-gray-900 data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-gray-800 dark:data-[selected=true]:text-gray-50",
       className,
     )}
     {...props}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 06c88477a19..dade8c7d2ee 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -9,6 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
     return (
       <input
+        id="name"
         type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-gray-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-gray-950 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:file:text-gray-50 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",

From 6115516207fd987e46e18c8a67738bdb2224da70 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 30 Oct 2024 00:31:54 +0530
Subject: [PATCH 08/54] tested locally

---
 src/components/Common/SearchByMultipleFields.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 9eaa15586d2..6eecc1e8bb3 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -85,16 +85,23 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         setOpen(false);
       }
 
-      options.forEach(() => {
+      options.forEach((option) => {
         if (e.key === "/") {
           setOpen(true);
+        } else if (
+          e.key.toLocaleLowerCase() ===
+            option.shortcut_key.toLocaleLowerCase() &&
+          open
+        ) {
+          e.preventDefault();
+          handleOptionChange(option);
         }
       });
     };
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [focusedIndex]);
+  }, [focusedIndex, open]);
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus();

From 65b58bc6e862c2a077ce366f54bb5251a43e6bcc Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 30 Oct 2024 00:40:54 +0530
Subject: [PATCH 09/54] tested done locally

---
 src/components/Form/FormFields/PhoneNumberFormField.tsx | 1 -
 src/components/Patient/ManagePatients.tsx               | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index cb5082b94bf..611cb380735 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -16,7 +16,6 @@ import {
 } from "../FieldValidators";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-// import { useTranslation } from "react-i18next";
 import React from "react";
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 4e2a1d86168..0651b9fe025 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -43,13 +43,13 @@ import {
   DIAGNOSES_FILTER_LABELS,
   DiagnosesFilterKey,
   FILTER_BY_DIAGNOSES_KEYS,
-} from "./DiagnosesFilter.js";
+} from "./DiagnosesFilter";
 import { ICD11DiagnosisModel } from "../Diagnosis/types";
 import { getDiagnosesByIds } from "../Diagnosis/utils";
-import Tabs from "../Common/components/Tabs.js";
+import Tabs from "@/components/Common/components/Tabs";
 import { isPatientMandatoryDataFilled } from "./Utils";
 import request from "../../Utils/request/request";
-import { Avatar } from "../Common/Avatar";
+import { Avatar } from "@/components/Common/Avatar";
 import Loading from "@/components/Common/Loading";
 import SearchByMultipleFields from "@/components/Common/SearchByMultipleFields";
 

From b6e1aca869435d94b05344a9ecb13a5a02fd3b9e Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 30 Oct 2024 10:48:14 +0530
Subject: [PATCH 10/54] tested done locally made required changes and removed
 unused packages and variables

---
 package-lock.json | 63 -----------------------------------------------
 package.json      |  1 -
 2 files changed, 64 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 965882a9ce8..c09b7e88c12 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,7 +62,6 @@
         "rehype-raw": "^6.1.1",
         "tailwind-merge": "^2.5.2",
         "tailwindcss-animate": "^1.0.7",
-        "twemoji": "^14.0.2",
         "use-keyboard-shortcut": "^1.1.6",
         "xlsx": "^0.18.5"
       },
@@ -19107,68 +19106,6 @@
       "integrity": "sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==",
       "license": "Unlicense"
     },
-    "node_modules/twemoji": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-14.0.2.tgz",
-      "integrity": "sha512-BzOoXIe1QVdmsUmZ54xbEH+8AgtOKUiG53zO5vVP2iUu6h5u9lN15NcuS6te4OY96qx0H7JK9vjjl9WQbkTRuA==",
-      "license": "MIT",
-      "dependencies": {
-        "fs-extra": "^8.0.1",
-        "jsonfile": "^5.0.0",
-        "twemoji-parser": "14.0.0",
-        "universalify": "^0.1.2"
-      }
-    },
-    "node_modules/twemoji-parser": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-14.0.0.tgz",
-      "integrity": "sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA==",
-      "license": "MIT"
-    },
-    "node_modules/twemoji/node_modules/fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=6 <7 || >=8"
-      }
-    },
-    "node_modules/twemoji/node_modules/fs-extra/node_modules/jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
-      "license": "MIT",
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/twemoji/node_modules/jsonfile": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz",
-      "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==",
-      "license": "MIT",
-      "dependencies": {
-        "universalify": "^0.1.2"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
-    "node_modules/twemoji/node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 7ee5ca8db63..107ea4e1adf 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,6 @@
     "rehype-raw": "^6.1.1",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "twemoji": "^14.0.2",
     "use-keyboard-shortcut": "^1.1.6",
     "xlsx": "^0.18.5"
   },

From 3028543796f637b941c24ba1a1efce81333a3768 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 30 Oct 2024 13:42:59 +0530
Subject: [PATCH 11/54] fised issue erroclassname=hidden

---
 src/components/Facility/AssetCreate.tsx      | 74 ++++++++++----------
 src/components/Form/FormFields/FormField.tsx |  4 +-
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/components/Facility/AssetCreate.tsx b/src/components/Facility/AssetCreate.tsx
index ec7211b7676..60676f9ca18 100644
--- a/src/components/Facility/AssetCreate.tsx
+++ b/src/components/Facility/AssetCreate.tsx
@@ -509,8 +509,8 @@ const AssetCreate = (props: AssetProps) => {
                 onSubmit={(e) => handleSubmit(e, false)}
                 className="rounded bg-white p-6 transition-all sm:rounded-xl sm:p-12"
               >
-                <div className="grid grid-cols-1 items-start gap-5 gap-x-12">
-                  <div className="grid grid-cols-6 gap-6 gap-x-6">
+                <div className="grid grid-cols-1 items-start gap-x-12">
+                  <div className="grid grid-cols-6 gap-x-6">
                     {/* General Details Section */}
                     {sectionTitle("General Details")}
                     {/* Asset Name */}
@@ -530,15 +530,14 @@ const AssetCreate = (props: AssetProps) => {
                     </div>
 
                     {/* Location */}
-
+                    <FieldLabel className="w-max text-sm" required>
+                      {t("asset_location")}
+                    </FieldLabel>
                     <div
                       ref={fieldRef["location"]}
                       className="col-span-6"
                       data-testid="asset-location-input"
                     >
-                      <FieldLabel className="w-max text-sm" required>
-                        {t("asset_location")}
-                      </FieldLabel>
                       <LocationSelect
                         name="Facilities"
                         setSelected={(selectedId) =>
@@ -595,21 +594,25 @@ const AssetCreate = (props: AssetProps) => {
                       />
                     </div>
                     {/* Divider */}
-
-                    {/* Working Status */}
                     <div
-                      ref={fieldRef["is_working"]}
                       className="col-span-6"
-                      data-testid="asset-working-status-input"
+                      data-testid="asset-divider-input"
                     >
                       <hr
                         className={
                           "transition-all " +
                           (is_working === "true"
                             ? "my-0 opacity-0"
-                            : " my-4 opacity-100")
+                            : "my-4 opacity-100")
                         }
                       />
+                    </div>
+                    {/* Working Status */}
+                    <div
+                      ref={fieldRef["is_working"]}
+                      className="col-span-6"
+                      data-testid="asset-working-status-input"
+                    >
                       <SwitchV2
                         className="col-span-6"
                         required
@@ -650,9 +653,7 @@ const AssetCreate = (props: AssetProps) => {
                       />
                     </div>
                     {/* Divider */}
-
-                    {/* Asset QR ID */}
-                    <div className="col-span-6 flex flex-col">
+                    <div className="col-span-6">
                       <hr
                         className={
                           "transition-all " +
@@ -661,31 +662,32 @@ const AssetCreate = (props: AssetProps) => {
                             : "mb-7 opacity-100")
                         }
                       />
-                      <div className="flex flex-row items-center gap-3">
-                        <div className="w-full" data-testid="asset-qr-id-input">
-                          <TextFormField
-                            id="qr_code_id"
-                            name="qr_code_id"
-                            placeholder=""
-                            label={t("asset_qr_id")}
-                            value={qrCodeId}
-                            onChange={(e) => setQrCodeId(e.value)}
-                            error={state.errors.qr_code_id}
-                          />
-                        </div>
-                        <div
-                          className="ml-1 mt-1 mt-7 flex h-10 cursor-pointer items-center justify-self-end rounded border border-secondary-400 px-4 hover:bg-secondary-200"
-                          onClick={() => setIsScannerActive(true)}
-                        >
-                          <CareIcon
-                            icon="l-focus"
-                            className="cursor-pointer text-lg"
-                          />
-                        </div>
+                    </div>
+                    {/* Asset QR ID */}
+                    <div className="col-span-6 flex flex-row items-center gap-3">
+                      <div className="w-full" data-testid="asset-qr-id-input">
+                        <TextFormField
+                          id="qr_code_id"
+                          name="qr_code_id"
+                          placeholder=""
+                          label={t("asset_qr_id")}
+                          value={qrCodeId}
+                          onChange={(e) => setQrCodeId(e.value)}
+                          error={state.errors.qr_code_id}
+                        />
+                      </div>
+                      <div
+                        className="ml-1 mt-1 flex h-10 cursor-pointer items-center justify-self-end rounded border border-secondary-400 px-4 hover:bg-secondary-200"
+                        onClick={() => setIsScannerActive(true)}
+                      >
+                        <CareIcon
+                          icon="l-focus"
+                          className="cursor-pointer text-lg"
+                        />
                       </div>
                     </div>
                   </div>
-                  <div className="grid grid-cols-6 gap-6 gap-x-6">
+                  <div className="grid grid-cols-6 gap-x-6">
                     {sectionTitle("Warranty Details")}
 
                     {/* Manufacturer */}
diff --git a/src/components/Form/FormFields/FormField.tsx b/src/components/Form/FormFields/FormField.tsx
index c5774205330..9c2903682b6 100644
--- a/src/components/Form/FormFields/FormField.tsx
+++ b/src/components/Form/FormFields/FormField.tsx
@@ -71,9 +71,7 @@ const FormField = ({
         )}
       </div>
       <div className={field?.className}>{props.children}</div>
-      {field?.error && (
-        <FieldErrorText error={field.error} className={field?.errorClassName} />
-      )}
+      <FieldErrorText error={field?.error} className={field?.errorClassName} />
     </div>
   );
 };

From a6b754d03cccf3cc5a581a46853a06824bc9b123 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 30 Oct 2024 21:16:07 +0530
Subject: [PATCH 12/54] fised issue erroclassname=hidden

---
 src/components/Common/SearchByMultipleFields.tsx       |  8 ++++++--
 .../Form/FormFields/PhoneNumberFormField.tsx           |  8 +++++---
 src/components/Form/FormFields/Utils.ts                | 10 ++--------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 6eecc1e8bb3..07b5f81733a 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -12,7 +12,6 @@ import { cn } from "@/lib/utils";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
 import { FieldError } from "@/components/Form/FieldValidators";
-import { FieldChangeEvent } from "../Form/FormFields/Utils";
 import {
   Command,
   CommandGroup,
@@ -44,6 +43,11 @@ interface SearchByMultipleFieldsProps {
   buttonClassName?: string;
 }
 
+export type eventType = {
+  value: string;
+  target?: { value: string };
+};
+
 const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   options,
   onSearch,
@@ -147,7 +151,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     const commonProps = {
       ref: inputRef,
       value: searchValue,
-      onChange: (e: FieldChangeEvent<string>) =>
+      onChange: (e: eventType) =>
         handleSearchChange(e.target ? e.target.value : e.value),
       onKeyDown: handleKeyDown,
       className: cn(
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 611cb380735..8acf5ccdb20 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -73,9 +73,11 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       [field, validate, error],
     );
     useEffect(() => {
-      if (field.value!.length > 3) {
-        if (props.myfunc) {
-          props.myfunc(error);
+      if (field.value) {
+        if (field.value.length > 3) {
+          if (props.myfunc) {
+            props.myfunc(error);
+          }
         }
       }
     }, [error]);
diff --git a/src/components/Form/FormFields/Utils.ts b/src/components/Form/FormFields/Utils.ts
index 67423b53caa..d7d2848a51e 100644
--- a/src/components/Form/FormFields/Utils.ts
+++ b/src/components/Form/FormFields/Utils.ts
@@ -1,13 +1,7 @@
 import { FocusEvent } from "react";
 import { FieldError } from "../FieldValidators";
-interface targettype {
-  value: string;
-}
-export type FieldChangeEvent<T> = {
-  name: string;
-  value: T;
-  target?: targettype;
-};
+
+export type FieldChangeEvent<T> = { name: string; value: T };
 export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
 
 /**

From 973d068ae71112038be2e571ba63ad4c9cef74bd Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 30 Oct 2024 23:42:07 +0530
Subject: [PATCH 13/54] added i18n content for serchfield compnent

---
 src/CAREUI/display/Count.tsx                            | 5 +++--
 src/Locale/en.json                                      | 3 ++-
 src/Locale/hi.json                                      | 4 ++--
 src/Locale/kn.json                                      | 3 ++-
 src/Locale/ml.json                                      | 3 ++-
 src/Locale/mr.json                                      | 4 ++++
 src/Locale/ta.json                                      | 3 ++-
 src/components/Common/SearchByMultipleFields.tsx        | 4 ++--
 src/components/Form/FormFields/PhoneNumberFormField.tsx | 8 ++------
 src/components/Patient/ManagePatients.tsx               | 2 +-
 10 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
index 6b28ca4f962..34a296299c2 100644
--- a/src/CAREUI/display/Count.tsx
+++ b/src/CAREUI/display/Count.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "../../Utils/utils";
 import CareIcon, { IconName } from "../icons/CareIcon";
-
+import { useTranslation } from "react-i18next";
 interface Props {
   count: number;
   text: string;
@@ -10,6 +10,7 @@ interface Props {
 }
 
 export default function CountBlock(props: Props) {
+  const { t } = useTranslation();
   return (
     <div className={classNames("rounded-lg", props.className)}>
       <dl className="flex gap-3">
@@ -18,7 +19,7 @@ export default function CountBlock(props: Props) {
         </div>
         <div>
           <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
-            {props.text}
+            {t(props.text)}
           </dt>
           {props.loading ? (
             <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
diff --git a/src/Locale/en.json b/src/Locale/en.json
index 9a7f4d750c2..d31e2a7346a 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -201,6 +201,7 @@
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
+  "Total_Patients": "Total Patients",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",
@@ -595,7 +596,7 @@
   "email_discharge_summary_description": "Enter your valid email address to receive the discharge summary",
   "email_success": "We will be sending an email shortly. Please check your inbox.",
   "emergency": "Emergency",
-  "emergency_contact_number": "Emergency Contact Number",
+  "emergency_contact_phone_number": "emergency contact phone number",
   "empty_date_time": "--:-- --; --/--/----",
   "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
   "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
diff --git a/src/Locale/hi.json b/src/Locale/hi.json
index 20a822323bf..7d5caef9921 100644
--- a/src/Locale/hi.json
+++ b/src/Locale/hi.json
@@ -328,7 +328,7 @@
   "email_discharge_summary_description": "डिस्चार्ज सारांश प्राप्त करने के लिए अपना वैध ईमेल पता दर्ज करें",
   "email_success": "हम जल्द ही आपको ईमेल भेजेंगे। कृपया अपना इनबॉक्स देखें।",
   "emergency": "आपातकाल",
-  "emergency_contact_number": "आपातकालीन संपर्क नंबर",
+  "emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर",
   "empty_date_time": "--:-- --; --/--/----",
   "encounter_date_field_label__A": "सुविधा में प्रवेश की तिथि और समय",
   "encounter_date_field_label__DC": "घरेलू देखभाल प्रारंभ की तिथि और समय",
@@ -738,7 +738,7 @@
   "test_type": "परीक्षण प्रकार",
   "titrate_dosage": "टाइट्रेट खुराक",
   "to_be_conducted": "संचालित किया जाना है",
-  "total_beds": "कुल बिस्तर",
+  "Total_Patients": "कुल रोगी",
   "total_users": "कुल उपयोगकर्ता",
   "transfer_in_progress": "स्थानांतरण प्रगति पर है",
   "transfer_to_receiving_facility": "प्राप्ति सुविधा में स्थानांतरण",
diff --git a/src/Locale/kn.json b/src/Locale/kn.json
index 0fa96427b85..583010caa2e 100644
--- a/src/Locale/kn.json
+++ b/src/Locale/kn.json
@@ -329,7 +329,7 @@
   "email_discharge_summary_description": "ಡಿಸ್ಚಾರ್ಜ್ ಸಾರಾಂಶವನ್ನು ಸ್ವೀಕರಿಸಲು ನಿಮ್ಮ ಮಾನ್ಯ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿ",
   "email_success": "ನಾವು ಶೀಘ್ರದಲ್ಲೇ ಇಮೇಲ್ ಕಳುಹಿಸುತ್ತೇವೆ. ದಯವಿಟ್ಟು ನಿಮ್ಮ ಇನ್‌ಬಾಕ್ಸ್ ಪರಿಶೀಲಿಸಿ.",
   "emergency": "ತುರ್ತು ಪರಿಸ್ಥಿತಿ",
-  "emergency_contact_number": "ತುರ್ತು ಸಂಪರ್ಕ ಸಂಖ್ಯೆ",
+  "emergency_contact_phone_number": "ಅತ್ಯಾವಶ್ಯಕ ಸಂಪರ್ಕ ಫೋನ್ ನಂಬರ್",
   "empty_date_time": "--:-- --; ------------",
   "encounter_date_field_label__A": "ಸೌಲಭ್ಯಕ್ಕೆ ಪ್ರವೇಶದ ದಿನಾಂಕ ಮತ್ತು ಸಮಯ",
   "encounter_date_field_label__DC": "ಡೊಮಿಸಿಲಿಯರಿ ಕೇರ್ ಪ್ರಾರಂಭದ ದಿನಾಂಕ ಮತ್ತು ಸಮಯ",
@@ -740,6 +740,7 @@
   "titrate_dosage": "ಟೈಟ್ರೇಟ್ ಡೋಸೇಜ್",
   "to_be_conducted": "ನಡೆಸಲಾಗುವುದು",
   "total_beds": "ಒಟ್ಟು ಹಾಸಿಗೆಗಳು",
+  "Total_Patients": "ಒಟ್ಟು ರೋಗಿಗಳು",
   "total_users": "ಒಟ್ಟು ಬಳಕೆದಾರರು",
   "transfer_in_progress": "ವರ್ಗಾವಣೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ",
   "transfer_to_receiving_facility": "ಸ್ವೀಕರಿಸುವ ಸೌಲಭ್ಯಕ್ಕೆ ವರ್ಗಾಯಿಸಿ",
diff --git a/src/Locale/ml.json b/src/Locale/ml.json
index b9a45ca73fb..b1c36561281 100644
--- a/src/Locale/ml.json
+++ b/src/Locale/ml.json
@@ -328,7 +328,7 @@
   "email_discharge_summary_description": "ഡിസ്ചാർജ് സംഗ്രഹം ലഭിക്കുന്നതിന് നിങ്ങളുടെ സാധുവായ ഇമെയിൽ വിലാസം നൽകുക",
   "email_success": "ഞങ്ങൾ ഉടൻ ഒരു ഇമെയിൽ അയയ്ക്കും. ദയവായി നിങ്ങളുടെ ഇൻബോക്സ് പരിശോധിക്കുക.",
   "emergency": "അടിയന്തരാവസ്ഥ",
-  "emergency_contact_number": "എമർജൻസി കോൺടാക്റ്റ് നമ്പർ",
+  "emergency_contact_phone_number": "അപാതക്കാല വിളി നമ്പർ",
   "empty_date_time": "--:-- --; ------------",
   "encounter_date_field_label__A": "സൗകര്യത്തിലേക്കുള്ള പ്രവേശന തീയതിയും സമയവും",
   "encounter_date_field_label__DC": "ഡൊമിസിലിയറി കെയർ ആരംഭിച്ച തീയതിയും സമയവും",
@@ -739,6 +739,7 @@
   "titrate_dosage": "ടൈട്രേറ്റ് ഡോസ്",
   "to_be_conducted": "നടത്തേണ്ടത്",
   "total_beds": "മൊത്തം കിടക്കകൾ",
+   "Total_Patients": "ആകെ രോഗികൾ",
   "total_users": "മൊത്തം ഉപയോക്താക്കൾ",
   "transfer_in_progress": "കൈമാറ്റം പുരോഗമിക്കുന്നു",
   "transfer_to_receiving_facility": "സ്വീകരിക്കാനുള്ള സൗകര്യത്തിലേക്ക് ട്രാൻസ്ഫർ ചെയ്യുക",
diff --git a/src/Locale/mr.json b/src/Locale/mr.json
index 06e9c5bbbde..2da91b8d261 100644
--- a/src/Locale/mr.json
+++ b/src/Locale/mr.json
@@ -31,6 +31,7 @@
   "download_type": "डाउनलोड प्रकार",
   "downloads": "डाउनलोड",
   "email": "ई-मेल पत्ता",
+  "emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर",
   "enter_valid_age": "वैध वय प्रविष्ट करा",
   "facility_search_placeholder": "हॉस्पिटल / जिल्हा यानुसार शोध घ्या",
   "field_required": "हे भरणे आवश्यक आहे",
@@ -47,6 +48,7 @@
   "last_name": "आडनाव",
   "login": "लॉगिन",
   "new_password": "नवीन पासवर्ड",
+  "name": "नाव",
   "no_duplicate_facility": "बनावट हॉस्पिटल सुविधा मुळीच तयार करू नका",
   "no_facilities": "कोणतेही हॉस्पिटल नाही",
   "password": "पासवर्ड",
@@ -54,6 +56,7 @@
   "password_reset_failure": "पासवर्ड रिसेट झाला नाही",
   "password_reset_success": "पासवर्ड यशस्वीपणे रिसेट झाला",
   "password_sent": "पासवर्ड रिसेट झाला इमेल पाठवला",
+  "patient_no": "रुग्ण संख्या",
   "phone_number": "दूरध्वनी क्रमांक",
   "register_hospital": "हॉस्पिटलचे नाव नोंदवा",
   "register_page_title": "हॉस्पिटल व्यवस्थापक म्हणून नोंदणी करा",
@@ -62,5 +65,6 @@
   "send_reset_link": "रीसेट लिंक  पाठवा",
   "sign_out": "साइन आउट",
   "something_wrong": "काहीतरी चूक झाली! पुन्हा प्रयत्न करा",
+  "Total_Patients": "एकूण रुग्ण",
   "username": "युजरनेम"
 }
diff --git a/src/Locale/ta.json b/src/Locale/ta.json
index fb5dd0a72c8..a0729a703f8 100644
--- a/src/Locale/ta.json
+++ b/src/Locale/ta.json
@@ -328,7 +328,7 @@
   "email_discharge_summary_description": "டிஸ்சார்ஜ் சுருக்கத்தைப் பெற உங்கள் சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்",
   "email_success": "விரைவில் மின்னஞ்சல் அனுப்புவோம். உங்கள் இன்பாக்ஸை சரிபார்க்கவும்.",
   "emergency": "அவசரநிலை",
-  "emergency_contact_number": "அவசர தொடர்பு எண்",
+  "emergency_contact_phone_number": "அபாய கால தொடர்பு தொலைபேசி எண்",
   "empty_date_time": "--:-- --; ------------",
   "encounter_date_field_label__A": "வசதிக்கான சேர்க்கை தேதி மற்றும் நேரம்",
   "encounter_date_field_label__DC": "வீட்டு பராமரிப்பு தொடங்கும் தேதி மற்றும் நேரம்",
@@ -739,6 +739,7 @@
   "titrate_dosage": "டைட்ரேட் அளவு",
   "to_be_conducted": "நடத்தப்பட வேண்டும்",
   "total_beds": "மொத்த படுக்கைகள்",
+  "Total_Patients": "மொத்த நோயாளிகள்",
   "total_users": "மொத்த பயனர்கள்",
   "transfer_in_progress": "இடமாற்றம் நடைபெறுகிறது",
   "transfer_to_receiving_facility": "பெறும் வசதிக்கு இடமாற்றம்",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 07b5f81733a..79af8a59545 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -217,7 +217,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                       } hover:bg-secondary-100`}
                     >
                       <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
-                      <span className="flex-1">{t(option.label)}</span>
+                      <span className="flex-1">{t(option.key)}</span>
                       <kbd className="ml-auto text-xs text-gray-400">
                         {option.label.charAt(0).toUpperCase()}
                       </kbd>
@@ -249,7 +249,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
               buttonClassName,
             )}
           >
-            {t(option.label)}
+            {t(option.key)}
           </Button>
         ))}
       </div>
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 8acf5ccdb20..8810e790422 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -73,12 +73,8 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       [field, validate, error],
     );
     useEffect(() => {
-      if (field.value) {
-        if (field.value.length > 3) {
-          if (props.myfunc) {
-            props.myfunc(error);
-          }
-        }
+      if (props.myfunc) {
+        props.myfunc(error);
       }
     }, [error]);
     const handleCountryChange = (value: CountryData): void => {
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 0651b9fe025..f87ed59a1c8 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -976,7 +976,7 @@ export const PatientManager = () => {
         <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
           <div className="flex-1" id="total-patientcount">
             <CountBlock
-              text="Total Patients"
+              text="Total_Patients"
               count={data?.count || 0}
               loading={isLoading}
               icon="l-user-injured"

From c7bb7b7e024fba88c766ec844df2cec574613255 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 00:03:02 +0530
Subject: [PATCH 14/54] added i18n content for serchfield compnent

---
 src/Locale/en.json                        | 4 ++++
 src/Locale/hi.json                        | 4 ++++
 src/Locale/kn.json                        | 4 ++++
 src/Locale/ml.json                        | 4 ++++
 src/Locale/mr.json                        | 4 ++++
 src/Locale/ta.json                        | 4 ++++
 src/components/Patient/ManagePatients.tsx | 8 ++++----
 7 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/Locale/en.json b/src/Locale/en.json
index d31e2a7346a..2d8a67f4499 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -199,6 +199,10 @@
   "SORT_OPTIONS__name": "Patient name A-Z",
   "SORT_OPTIONS__review_time": "Oldest review date first",
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
+  "Search_by_UHID": "Search by UHID",
+  "Search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
+  "Search_by_patient_name": "Search by Patient Name",
+  "Search_by_phone_number": "Search by Phone Number",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
   "Total_Patients": "Total Patients",
diff --git a/src/Locale/hi.json b/src/Locale/hi.json
index 7d5caef9921..8c586275740 100644
--- a/src/Locale/hi.json
+++ b/src/Locale/hi.json
@@ -696,6 +696,10 @@
   "set_average_weekly_working_hours_for": "औसत साप्ताहिक कार्य घंटे निर्धारित करें",
   "settings_and_filters": "सेटिंग्स और फ़िल्टर",
   "severity_of_breathlessness": "सांस फूलने की गंभीरता",
+  "Search_by_phone_number": "फोन नंबर से खोजें",
+  "Search_by_patient_name": "रोगी के नाम से खोजें",
+  "Search_by_UHID": "UHID द्वारा खोजें",
+  "Search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर से खोजें",
   "shift_request_updated_successfully": "शिफ़्ट अनुरोध सफलतापूर्वक अपडेट किया गया",
   "shifting": "स्थानांतरण",
   "shifting_approval_facility": "स्थानांतरण अनुमोदन सुविधा",
diff --git a/src/Locale/kn.json b/src/Locale/kn.json
index 583010caa2e..bf038e6707e 100644
--- a/src/Locale/kn.json
+++ b/src/Locale/kn.json
@@ -697,6 +697,10 @@
   "set_average_weekly_working_hours_for": "ಸರಾಸರಿ ಸಾಪ್ತಾಹಿಕ ಕೆಲಸದ ಸಮಯವನ್ನು ಹೊಂದಿಸಿ",
   "settings_and_filters": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಫಿಲ್ಟರ್‌ಗಳು",
   "severity_of_breathlessness": "ಉಸಿರಾಟದ ತೀವ್ರತೆ",
+  "Search_by_phone_number": "ಫೋನ್ ನಂಬರ್ನಿಂದ ಹುಡುಕಿರಿ",
+  "Search_by_patient_name": "ರೋಗಿಯ ಹೆಸರಿನಿಂದ ಹುಡುಕಿರಿ",
+  "Search_by_UHID": "UHID ಮೂಲಕ ಹುಡುಕಿರಿ",
+  "Search_by_emergency_contact_phone_number": "ಅತ್ಯಾವಶ್ಯಕ ಸಂಪರ್ಕ ಫೋನ್ ನಂಬರ್‌ನಿಂದ ಹುಡುಕಿರಿ",
   "shift_request_updated_successfully": "ಶಿಫ್ಟ್ ವಿನಂತಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ",
   "shifting": "ಶಿಫ್ಟಿಂಗ್",
   "shifting_approval_facility": "ಶಿಫ್ಟಿಂಗ್ ಅನುಮೋದನೆ ಸೌಲಭ್ಯ",
diff --git a/src/Locale/ml.json b/src/Locale/ml.json
index b1c36561281..afe6999176b 100644
--- a/src/Locale/ml.json
+++ b/src/Locale/ml.json
@@ -696,6 +696,10 @@
   "set_average_weekly_working_hours_for": "ഇതിനായി ശരാശരി പ്രതിവാര പ്രവൃത്തി സമയം സജ്ജമാക്കുക",
   "settings_and_filters": "ക്രമീകരണങ്ങളും ഫിൽട്ടറുകളും",
   "severity_of_breathlessness": "ശ്വാസതടസ്സത്തിൻ്റെ തീവ്രത",
+  "Search_by_phone_number": "फोन नंबरद्वारे शोधा",
+  "Search_by_patient_name": "रुग्णाच्या नावाने शोधा",
+  "Search_by_UHID": "UHID द्वारे शोधा",
+  "Search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
   "shift_request_updated_successfully": "ഷിഫ്റ്റ് അഭ്യർത്ഥന വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
   "shifting": "ഷിഫ്റ്റിംഗ്",
   "shifting_approval_facility": "ഷിഫ്റ്റിംഗ് അംഗീകാര സൗകര്യം",
diff --git a/src/Locale/mr.json b/src/Locale/mr.json
index 2da91b8d261..7a223879ce7 100644
--- a/src/Locale/mr.json
+++ b/src/Locale/mr.json
@@ -63,6 +63,10 @@
   "reset": "रीसेट करा",
   "reset_password": "रिसेट पासवर्ड",
   "send_reset_link": "रीसेट लिंक  पाठवा",
+  "Search_by_phone_number": "फोन नंबरद्वारे शोधा",
+  "Search_by_patient_name": "रुग्णाच्या नावाने शोधा",
+  "Search_by_UHID": "UHID द्वारे शोधा",
+  "Search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
   "sign_out": "साइन आउट",
   "something_wrong": "काहीतरी चूक झाली! पुन्हा प्रयत्न करा",
   "Total_Patients": "एकूण रुग्ण",
diff --git a/src/Locale/ta.json b/src/Locale/ta.json
index a0729a703f8..aaa9016be10 100644
--- a/src/Locale/ta.json
+++ b/src/Locale/ta.json
@@ -696,6 +696,10 @@
   "set_average_weekly_working_hours_for": "சராசரி வாராந்திர வேலை நேரத்தை அமைக்கவும்",
   "settings_and_filters": "அமைப்புகள் மற்றும் வடிப்பான்கள்",
   "severity_of_breathlessness": "மூச்சுத் திணறலின் தீவிரம்",
+  "Search_by_phone_number": "தொலைபேசி எண் மூலம் தேடு",
+  "Search_by_patient_name": "நோயாளியின் பெயரால் தேடு",
+  "Search_by_UHID": "UHID மூலம் தேடு",
+  "Search_by_emergency_contact_phone_number": "அபாய கால தொடர்பு தொலைபேசி எண்ணால் தேடு",
   "shift_request_updated_successfully": "ஷிப்ட் கோரிக்கை வெற்றிகரமாக புதுப்பிக்கப்பட்டது",
   "shifting": "மாறுதல்",
   "shifting_approval_facility": "ஒப்புதல் வசதியை மாற்றுதல்",
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index f87ed59a1c8..6a31939451b 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -747,7 +747,7 @@ export const PatientManager = () => {
       key: "phone_number",
       label: "Phone Number",
       type: "phone" as const,
-      placeholder: "Search by phone number",
+      placeholder: "Search_by_phone_number",
       value: qParams.phone_number || "",
       shortcut_key: "p",
     },
@@ -755,7 +755,7 @@ export const PatientManager = () => {
       key: "name",
       label: "Name",
       type: "text" as const,
-      placeholder: "Search by patient name",
+      placeholder: "Search_by_patient_name",
       value: qParams.name || "",
       shortcut_key: "n",
     },
@@ -763,7 +763,7 @@ export const PatientManager = () => {
       key: "patient_no",
       label: "UHID",
       type: "text" as const,
-      placeholder: "Search by UHID",
+      placeholder: "Search_by_UHID",
       value: qParams.patient_no || "",
       shortcut_key: "u",
     },
@@ -771,7 +771,7 @@ export const PatientManager = () => {
       key: "emergency_contact_phone_number",
       label: "Emergency Contact Phone Number",
       type: "phone" as const,
-      placeholder: "Search by emergency contact phone number",
+      placeholder: "Search_by_emergency_contact_phone_number",
       value: qParams.emergency_contact_phone_number || "",
       shortcut_key: "e",
     },

From 4c9d929e7c889033279e0eee6cea464935606c1f Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 00:54:42 +0530
Subject: [PATCH 15/54] type are defined in correct way

---
 src/Locale/en.json                               | 2 +-
 src/components/Common/SearchByMultipleFields.tsx | 8 ++++----
 src/components/Patient/ManagePatients.tsx        | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Locale/en.json b/src/Locale/en.json
index 2d8a67f4499..3f8458ca660 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -948,7 +948,7 @@
   "patient_details_incomplete": "Patient Details Incomplete",
   "patient_face": "Patient Face",
   "patient_name": "Patient name",
-  "patient_no": "OP/IP No",
+  "patient_no": "UHID",
   "patient_notes_thread__Doctors": "Doctor's Discussions",
   "patient_notes_thread__Nurses": "Nurse's Discussions",
   "patient_phone_number": "Patient Phone Number",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 79af8a59545..3e7409daa9b 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -30,7 +30,7 @@ interface SearchOption {
   type: "text" | "phone";
   placeholder: string;
   value: string;
-  shortcut_key: string;
+  shortcutKey: string;
   component?: React.ComponentType<HTMLDivElement>;
 }
 
@@ -43,7 +43,7 @@ interface SearchByMultipleFieldsProps {
   buttonClassName?: string;
 }
 
-export type eventType = {
+export type EventType = {
   value: string;
   target?: { value: string };
 };
@@ -94,7 +94,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           setOpen(true);
         } else if (
           e.key.toLocaleLowerCase() ===
-            option.shortcut_key.toLocaleLowerCase() &&
+            option.shortcutKey.toLocaleLowerCase() &&
           open
         ) {
           e.preventDefault();
@@ -151,7 +151,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     const commonProps = {
       ref: inputRef,
       value: searchValue,
-      onChange: (e: eventType) =>
+      onChange: (e: EventType) =>
         handleSearchChange(e.target ? e.target.value : e.value),
       onKeyDown: handleKeyDown,
       className: cn(
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 6a31939451b..6ed008efdb8 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -749,7 +749,7 @@ export const PatientManager = () => {
       type: "phone" as const,
       placeholder: "Search_by_phone_number",
       value: qParams.phone_number || "",
-      shortcut_key: "p",
+      shortcutKey: "p",
     },
     {
       key: "name",
@@ -757,7 +757,7 @@ export const PatientManager = () => {
       type: "text" as const,
       placeholder: "Search_by_patient_name",
       value: qParams.name || "",
-      shortcut_key: "n",
+      shortcutKey: "n",
     },
     {
       key: "patient_no",
@@ -765,7 +765,7 @@ export const PatientManager = () => {
       type: "text" as const,
       placeholder: "Search_by_UHID",
       value: qParams.patient_no || "",
-      shortcut_key: "u",
+      shortcutKey: "u",
     },
     {
       key: "emergency_contact_phone_number",
@@ -773,7 +773,7 @@ export const PatientManager = () => {
       type: "phone" as const,
       placeholder: "Search_by_emergency_contact_phone_number",
       value: qParams.emergency_contact_phone_number || "",
-      shortcut_key: "e",
+      shortcutKey: "e",
     },
   ];
 

From c9404a85b6710b8b18764f546a5857745a136407 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 01:32:47 +0530
Subject: [PATCH 16/54] Update src/components/Patient/ManagePatients.tsx

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
---
 src/components/Patient/ManagePatients.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 6ed008efdb8..e1c54e338fb 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -976,7 +976,7 @@ export const PatientManager = () => {
         <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
           <div className="flex-1" id="total-patientcount">
             <CountBlock
-              text="Total_Patients"
+              text={t("total_patients")}
               count={data?.count || 0}
               loading={isLoading}
               icon="l-user-injured"

From 593eda3c30ede51cb2f682145a8753f341d2b2c4 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 01:33:24 +0530
Subject: [PATCH 17/54] Update src/CAREUI/display/Count.tsx

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
---
 src/CAREUI/display/Count.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
index 34a296299c2..8f4f7e6eef6 100644
--- a/src/CAREUI/display/Count.tsx
+++ b/src/CAREUI/display/Count.tsx
@@ -19,7 +19,7 @@ export default function CountBlock(props: Props) {
         </div>
         <div>
           <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
-            {t(props.text)}
+            {props.text}
           </dt>
           {props.loading ? (
             <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />

From ba889eb07ff7f113e00018acd3115138be9f63c4 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 01:33:58 +0530
Subject: [PATCH 18/54] Update src/Locale/en.json

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
---
 src/Locale/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Locale/en.json b/src/Locale/en.json
index 3f8458ca660..0026ac595ce 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -205,7 +205,7 @@
   "Search_by_phone_number": "Search by Phone Number",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
-  "Total_Patients": "Total Patients",
+  "total_patients": "Total Patients",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",

From 0d3bf6218dbbbe556f3bd25e52d8065e960ab25a Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 01:35:06 +0530
Subject: [PATCH 19/54] Update src/Locale/en.json

Co-authored-by: Rithvik Nishad <rithvikn2001@gmail.com>
---
 src/Locale/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Locale/en.json b/src/Locale/en.json
index 0026ac595ce..f56ced90020 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -201,7 +201,7 @@
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
   "Search_by_UHID": "Search by UHID",
   "Search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
-  "Search_by_patient_name": "Search by Patient Name",
+  "search_by_patient_name": "Search by Patient Name",
   "Search_by_phone_number": "Search by Phone Number",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",

From a3d1fb964e4fed5ede3f22edd0fb7298d338f592 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 01:49:03 +0530
Subject: [PATCH 20/54] type are defined in correct way

---
 src/CAREUI/display/Count.tsx              | 5 ++---
 src/Locale/en.json                        | 8 ++++----
 src/Locale/hi.json                        | 8 ++++----
 src/Locale/kn.json                        | 8 ++++----
 src/Locale/ml.json                        | 8 ++++----
 src/Locale/mr.json                        | 8 ++++----
 src/Locale/ta.json                        | 8 ++++----
 src/components/Patient/ManagePatients.tsx | 8 ++++----
 8 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/CAREUI/display/Count.tsx b/src/CAREUI/display/Count.tsx
index 34a296299c2..6b28ca4f962 100644
--- a/src/CAREUI/display/Count.tsx
+++ b/src/CAREUI/display/Count.tsx
@@ -1,6 +1,6 @@
 import { classNames } from "../../Utils/utils";
 import CareIcon, { IconName } from "../icons/CareIcon";
-import { useTranslation } from "react-i18next";
+
 interface Props {
   count: number;
   text: string;
@@ -10,7 +10,6 @@ interface Props {
 }
 
 export default function CountBlock(props: Props) {
-  const { t } = useTranslation();
   return (
     <div className={classNames("rounded-lg", props.className)}>
       <dl className="flex gap-3">
@@ -19,7 +18,7 @@ export default function CountBlock(props: Props) {
         </div>
         <div>
           <dt className="mb-1 truncate text-sm font-semibold text-secondary-700">
-            {t(props.text)}
+            {props.text}
           </dt>
           {props.loading ? (
             <dd className="h-10 w-full max-w-[100px] animate-pulse rounded-lg bg-secondary-300" />
diff --git a/src/Locale/en.json b/src/Locale/en.json
index 3f8458ca660..c5188da8313 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -199,13 +199,9 @@
   "SORT_OPTIONS__name": "Patient name A-Z",
   "SORT_OPTIONS__review_time": "Oldest review date first",
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
-  "Search_by_UHID": "Search by UHID",
-  "Search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
-  "Search_by_patient_name": "Search by Patient Name",
   "Search_by_phone_number": "Search by Phone Number",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
-  "Total_Patients": "Total Patients",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
   "URINATION_FREQUENCY__INCREASED": "Increased",
   "URINATION_FREQUENCY__NORMAL": "Normal",
@@ -1088,6 +1084,9 @@
   "save_and_continue": "Save and Continue",
   "save_investigation": "Save Investigation",
   "scan_asset_qr": "Scan Asset QR!",
+  "search_by_UHID": "Search by UHID",
+  "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
+  "search_by_patient_name": "Search by Patient Name",
   "search_by_username": "Search by username",
   "search_for_facility": "Search for Facility",
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
@@ -1177,6 +1176,7 @@
   "to_be_conducted": "To be conducted",
   "total_amount": "Total Amount",
   "total_beds": "Total Beds",
+  "total_patients": "Total Patients",
   "total_staff": "Total Staff",
   "total_users": "Total Users",
   "transfer_in_progress": "TRANSFER IN PROGRESS",
diff --git a/src/Locale/hi.json b/src/Locale/hi.json
index 8c586275740..2f555a26766 100644
--- a/src/Locale/hi.json
+++ b/src/Locale/hi.json
@@ -697,9 +697,9 @@
   "settings_and_filters": "सेटिंग्स और फ़िल्टर",
   "severity_of_breathlessness": "सांस फूलने की गंभीरता",
   "Search_by_phone_number": "फोन नंबर से खोजें",
-  "Search_by_patient_name": "रोगी के नाम से खोजें",
-  "Search_by_UHID": "UHID द्वारा खोजें",
-  "Search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर से खोजें",
+  "search_by_patient_name": "रोगी के नाम से खोजें",
+  "search_by_UHID": "UHID द्वारा खोजें",
+  "search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर से खोजें",
   "shift_request_updated_successfully": "शिफ़्ट अनुरोध सफलतापूर्वक अपडेट किया गया",
   "shifting": "स्थानांतरण",
   "shifting_approval_facility": "स्थानांतरण अनुमोदन सुविधा",
@@ -742,7 +742,7 @@
   "test_type": "परीक्षण प्रकार",
   "titrate_dosage": "टाइट्रेट खुराक",
   "to_be_conducted": "संचालित किया जाना है",
-  "Total_Patients": "कुल रोगी",
+  "total_patients": "कुल रोगी",
   "total_users": "कुल उपयोगकर्ता",
   "transfer_in_progress": "स्थानांतरण प्रगति पर है",
   "transfer_to_receiving_facility": "प्राप्ति सुविधा में स्थानांतरण",
diff --git a/src/Locale/kn.json b/src/Locale/kn.json
index bf038e6707e..d04dc06011c 100644
--- a/src/Locale/kn.json
+++ b/src/Locale/kn.json
@@ -698,9 +698,9 @@
   "settings_and_filters": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಫಿಲ್ಟರ್‌ಗಳು",
   "severity_of_breathlessness": "ಉಸಿರಾಟದ ತೀವ್ರತೆ",
   "Search_by_phone_number": "ಫೋನ್ ನಂಬರ್ನಿಂದ ಹುಡುಕಿರಿ",
-  "Search_by_patient_name": "ರೋಗಿಯ ಹೆಸರಿನಿಂದ ಹುಡುಕಿರಿ",
-  "Search_by_UHID": "UHID ಮೂಲಕ ಹುಡುಕಿರಿ",
-  "Search_by_emergency_contact_phone_number": "ಅತ್ಯಾವಶ್ಯಕ ಸಂಪರ್ಕ ಫೋನ್ ನಂಬರ್‌ನಿಂದ ಹುಡುಕಿರಿ",
+  "search_by_patient_name": "ರೋಗಿಯ ಹೆಸರಿನಿಂದ ಹುಡುಕಿರಿ",
+  "search_by_UHID": "UHID ಮೂಲಕ ಹುಡುಕಿರಿ",
+  "search_by_emergency_contact_phone_number": "ಅತ್ಯಾವಶ್ಯಕ ಸಂಪರ್ಕ ಫೋನ್ ನಂಬರ್‌ನಿಂದ ಹುಡುಕಿರಿ",
   "shift_request_updated_successfully": "ಶಿಫ್ಟ್ ವಿನಂತಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ",
   "shifting": "ಶಿಫ್ಟಿಂಗ್",
   "shifting_approval_facility": "ಶಿಫ್ಟಿಂಗ್ ಅನುಮೋದನೆ ಸೌಲಭ್ಯ",
@@ -744,7 +744,7 @@
   "titrate_dosage": "ಟೈಟ್ರೇಟ್ ಡೋಸೇಜ್",
   "to_be_conducted": "ನಡೆಸಲಾಗುವುದು",
   "total_beds": "ಒಟ್ಟು ಹಾಸಿಗೆಗಳು",
-  "Total_Patients": "ಒಟ್ಟು ರೋಗಿಗಳು",
+  "total_patients": "ಒಟ್ಟು ರೋಗಿಗಳು",
   "total_users": "ಒಟ್ಟು ಬಳಕೆದಾರರು",
   "transfer_in_progress": "ವರ್ಗಾವಣೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ",
   "transfer_to_receiving_facility": "ಸ್ವೀಕರಿಸುವ ಸೌಲಭ್ಯಕ್ಕೆ ವರ್ಗಾಯಿಸಿ",
diff --git a/src/Locale/ml.json b/src/Locale/ml.json
index afe6999176b..ef50b258ff5 100644
--- a/src/Locale/ml.json
+++ b/src/Locale/ml.json
@@ -697,9 +697,9 @@
   "settings_and_filters": "ക്രമീകരണങ്ങളും ഫിൽട്ടറുകളും",
   "severity_of_breathlessness": "ശ്വാസതടസ്സത്തിൻ്റെ തീവ്രത",
   "Search_by_phone_number": "फोन नंबरद्वारे शोधा",
-  "Search_by_patient_name": "रुग्णाच्या नावाने शोधा",
-  "Search_by_UHID": "UHID द्वारे शोधा",
-  "Search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
+  "search_by_patient_name": "रुग्णाच्या नावाने शोधा",
+  "search_by_UHID": "UHID द्वारे शोधा",
+  "search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
   "shift_request_updated_successfully": "ഷിഫ്റ്റ് അഭ്യർത്ഥന വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
   "shifting": "ഷിഫ്റ്റിംഗ്",
   "shifting_approval_facility": "ഷിഫ്റ്റിംഗ് അംഗീകാര സൗകര്യം",
@@ -743,7 +743,7 @@
   "titrate_dosage": "ടൈട്രേറ്റ് ഡോസ്",
   "to_be_conducted": "നടത്തേണ്ടത്",
   "total_beds": "മൊത്തം കിടക്കകൾ",
-   "Total_Patients": "ആകെ രോഗികൾ",
+   "total_patients": "ആകെ രോഗികൾ",
   "total_users": "മൊത്തം ഉപയോക്താക്കൾ",
   "transfer_in_progress": "കൈമാറ്റം പുരോഗമിക്കുന്നു",
   "transfer_to_receiving_facility": "സ്വീകരിക്കാനുള്ള സൗകര്യത്തിലേക്ക് ട്രാൻസ്ഫർ ചെയ്യുക",
diff --git a/src/Locale/mr.json b/src/Locale/mr.json
index 7a223879ce7..777fc2b1e06 100644
--- a/src/Locale/mr.json
+++ b/src/Locale/mr.json
@@ -64,11 +64,11 @@
   "reset_password": "रिसेट पासवर्ड",
   "send_reset_link": "रीसेट लिंक  पाठवा",
   "Search_by_phone_number": "फोन नंबरद्वारे शोधा",
-  "Search_by_patient_name": "रुग्णाच्या नावाने शोधा",
-  "Search_by_UHID": "UHID द्वारे शोधा",
-  "Search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
+  "search_by_patient_name": "रुग्णाच्या नावाने शोधा",
+  "search_by_UHID": "UHID द्वारे शोधा",
+  "search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
   "sign_out": "साइन आउट",
   "something_wrong": "काहीतरी चूक झाली! पुन्हा प्रयत्न करा",
-  "Total_Patients": "एकूण रुग्ण",
+  "total_patients": "एकूण रुग्ण",
   "username": "युजरनेम"
 }
diff --git a/src/Locale/ta.json b/src/Locale/ta.json
index aaa9016be10..30758aa8aa6 100644
--- a/src/Locale/ta.json
+++ b/src/Locale/ta.json
@@ -697,9 +697,9 @@
   "settings_and_filters": "அமைப்புகள் மற்றும் வடிப்பான்கள்",
   "severity_of_breathlessness": "மூச்சுத் திணறலின் தீவிரம்",
   "Search_by_phone_number": "தொலைபேசி எண் மூலம் தேடு",
-  "Search_by_patient_name": "நோயாளியின் பெயரால் தேடு",
-  "Search_by_UHID": "UHID மூலம் தேடு",
-  "Search_by_emergency_contact_phone_number": "அபாய கால தொடர்பு தொலைபேசி எண்ணால் தேடு",
+  "search_by_patient_name": "நோயாளியின் பெயரால் தேடு",
+  "search_by_UHID": "UHID மூலம் தேடு",
+  "search_by_emergency_contact_phone_number": "அபாய கால தொடர்பு தொலைபேசி எண்ணால் தேடு",
   "shift_request_updated_successfully": "ஷிப்ட் கோரிக்கை வெற்றிகரமாக புதுப்பிக்கப்பட்டது",
   "shifting": "மாறுதல்",
   "shifting_approval_facility": "ஒப்புதல் வசதியை மாற்றுதல்",
@@ -743,7 +743,7 @@
   "titrate_dosage": "டைட்ரேட் அளவு",
   "to_be_conducted": "நடத்தப்பட வேண்டும்",
   "total_beds": "மொத்த படுக்கைகள்",
-  "Total_Patients": "மொத்த நோயாளிகள்",
+  "total_patients": "மொத்த நோயாளிகள்",
   "total_users": "மொத்த பயனர்கள்",
   "transfer_in_progress": "இடமாற்றம் நடைபெறுகிறது",
   "transfer_to_receiving_facility": "பெறும் வசதிக்கு இடமாற்றம்",
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 6ed008efdb8..e841b46f8d5 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -755,7 +755,7 @@ export const PatientManager = () => {
       key: "name",
       label: "Name",
       type: "text" as const,
-      placeholder: "Search_by_patient_name",
+      placeholder: "search_by_patient_name",
       value: qParams.name || "",
       shortcutKey: "n",
     },
@@ -763,7 +763,7 @@ export const PatientManager = () => {
       key: "patient_no",
       label: "UHID",
       type: "text" as const,
-      placeholder: "Search_by_UHID",
+      placeholder: "search_by_UHID",
       value: qParams.patient_no || "",
       shortcutKey: "u",
     },
@@ -771,7 +771,7 @@ export const PatientManager = () => {
       key: "emergency_contact_phone_number",
       label: "Emergency Contact Phone Number",
       type: "phone" as const,
-      placeholder: "Search_by_emergency_contact_phone_number",
+      placeholder: "search_by_emergency_contact_phone_number",
       value: qParams.emergency_contact_phone_number || "",
       shortcutKey: "e",
     },
@@ -976,7 +976,7 @@ export const PatientManager = () => {
         <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
           <div className="flex-1" id="total-patientcount">
             <CountBlock
-              text="Total_Patients"
+              text={t("total_patients")}
               count={data?.count || 0}
               loading={isLoading}
               icon="l-user-injured"

From 2a33019a9b90286fe988c896ef8bef078b41948b Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 31 Oct 2024 03:29:20 +0530
Subject: [PATCH 21/54] phonehelp section problem is fixed

---
 src/Locale/hi.json                            |  8 ++-----
 src/Locale/kn.json                            |  7 +-----
 src/Locale/ml.json                            |  7 +-----
 src/Locale/mr.json                            | 10 +-------
 src/Locale/ta.json                            |  7 +-----
 .../Common/SearchByMultipleFields.tsx         |  1 +
 src/components/Form/FormFields/FormField.tsx  | 16 ++++++++++---
 .../Form/FormFields/PhoneNumberFormField.tsx  | 24 +++++++++++++++++--
 src/components/Form/FormFields/Utils.ts       |  1 +
 9 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/Locale/hi.json b/src/Locale/hi.json
index 2f555a26766..20a822323bf 100644
--- a/src/Locale/hi.json
+++ b/src/Locale/hi.json
@@ -328,7 +328,7 @@
   "email_discharge_summary_description": "डिस्चार्ज सारांश प्राप्त करने के लिए अपना वैध ईमेल पता दर्ज करें",
   "email_success": "हम जल्द ही आपको ईमेल भेजेंगे। कृपया अपना इनबॉक्स देखें।",
   "emergency": "आपातकाल",
-  "emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर",
+  "emergency_contact_number": "आपातकालीन संपर्क नंबर",
   "empty_date_time": "--:-- --; --/--/----",
   "encounter_date_field_label__A": "सुविधा में प्रवेश की तिथि और समय",
   "encounter_date_field_label__DC": "घरेलू देखभाल प्रारंभ की तिथि और समय",
@@ -696,10 +696,6 @@
   "set_average_weekly_working_hours_for": "औसत साप्ताहिक कार्य घंटे निर्धारित करें",
   "settings_and_filters": "सेटिंग्स और फ़िल्टर",
   "severity_of_breathlessness": "सांस फूलने की गंभीरता",
-  "Search_by_phone_number": "फोन नंबर से खोजें",
-  "search_by_patient_name": "रोगी के नाम से खोजें",
-  "search_by_UHID": "UHID द्वारा खोजें",
-  "search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर से खोजें",
   "shift_request_updated_successfully": "शिफ़्ट अनुरोध सफलतापूर्वक अपडेट किया गया",
   "shifting": "स्थानांतरण",
   "shifting_approval_facility": "स्थानांतरण अनुमोदन सुविधा",
@@ -742,7 +738,7 @@
   "test_type": "परीक्षण प्रकार",
   "titrate_dosage": "टाइट्रेट खुराक",
   "to_be_conducted": "संचालित किया जाना है",
-  "total_patients": "कुल रोगी",
+  "total_beds": "कुल बिस्तर",
   "total_users": "कुल उपयोगकर्ता",
   "transfer_in_progress": "स्थानांतरण प्रगति पर है",
   "transfer_to_receiving_facility": "प्राप्ति सुविधा में स्थानांतरण",
diff --git a/src/Locale/kn.json b/src/Locale/kn.json
index d04dc06011c..0fa96427b85 100644
--- a/src/Locale/kn.json
+++ b/src/Locale/kn.json
@@ -329,7 +329,7 @@
   "email_discharge_summary_description": "ಡಿಸ್ಚಾರ್ಜ್ ಸಾರಾಂಶವನ್ನು ಸ್ವೀಕರಿಸಲು ನಿಮ್ಮ ಮಾನ್ಯ ಇಮೇಲ್ ವಿಳಾಸವನ್ನು ನಮೂದಿಸಿ",
   "email_success": "ನಾವು ಶೀಘ್ರದಲ್ಲೇ ಇಮೇಲ್ ಕಳುಹಿಸುತ್ತೇವೆ. ದಯವಿಟ್ಟು ನಿಮ್ಮ ಇನ್‌ಬಾಕ್ಸ್ ಪರಿಶೀಲಿಸಿ.",
   "emergency": "ತುರ್ತು ಪರಿಸ್ಥಿತಿ",
-  "emergency_contact_phone_number": "ಅತ್ಯಾವಶ್ಯಕ ಸಂಪರ್ಕ ಫೋನ್ ನಂಬರ್",
+  "emergency_contact_number": "ತುರ್ತು ಸಂಪರ್ಕ ಸಂಖ್ಯೆ",
   "empty_date_time": "--:-- --; ------------",
   "encounter_date_field_label__A": "ಸೌಲಭ್ಯಕ್ಕೆ ಪ್ರವೇಶದ ದಿನಾಂಕ ಮತ್ತು ಸಮಯ",
   "encounter_date_field_label__DC": "ಡೊಮಿಸಿಲಿಯರಿ ಕೇರ್ ಪ್ರಾರಂಭದ ದಿನಾಂಕ ಮತ್ತು ಸಮಯ",
@@ -697,10 +697,6 @@
   "set_average_weekly_working_hours_for": "ಸರಾಸರಿ ಸಾಪ್ತಾಹಿಕ ಕೆಲಸದ ಸಮಯವನ್ನು ಹೊಂದಿಸಿ",
   "settings_and_filters": "ಸೆಟ್ಟಿಂಗ್‌ಗಳು ಮತ್ತು ಫಿಲ್ಟರ್‌ಗಳು",
   "severity_of_breathlessness": "ಉಸಿರಾಟದ ತೀವ್ರತೆ",
-  "Search_by_phone_number": "ಫೋನ್ ನಂಬರ್ನಿಂದ ಹುಡುಕಿರಿ",
-  "search_by_patient_name": "ರೋಗಿಯ ಹೆಸರಿನಿಂದ ಹುಡುಕಿರಿ",
-  "search_by_UHID": "UHID ಮೂಲಕ ಹುಡುಕಿರಿ",
-  "search_by_emergency_contact_phone_number": "ಅತ್ಯಾವಶ್ಯಕ ಸಂಪರ್ಕ ಫೋನ್ ನಂಬರ್‌ನಿಂದ ಹುಡುಕಿರಿ",
   "shift_request_updated_successfully": "ಶಿಫ್ಟ್ ವಿನಂತಿಯನ್ನು ಯಶಸ್ವಿಯಾಗಿ ನವೀಕರಿಸಲಾಗಿದೆ",
   "shifting": "ಶಿಫ್ಟಿಂಗ್",
   "shifting_approval_facility": "ಶಿಫ್ಟಿಂಗ್ ಅನುಮೋದನೆ ಸೌಲಭ್ಯ",
@@ -744,7 +740,6 @@
   "titrate_dosage": "ಟೈಟ್ರೇಟ್ ಡೋಸೇಜ್",
   "to_be_conducted": "ನಡೆಸಲಾಗುವುದು",
   "total_beds": "ಒಟ್ಟು ಹಾಸಿಗೆಗಳು",
-  "total_patients": "ಒಟ್ಟು ರೋಗಿಗಳು",
   "total_users": "ಒಟ್ಟು ಬಳಕೆದಾರರು",
   "transfer_in_progress": "ವರ್ಗಾವಣೆ ಪ್ರಗತಿಯಲ್ಲಿದೆ",
   "transfer_to_receiving_facility": "ಸ್ವೀಕರಿಸುವ ಸೌಲಭ್ಯಕ್ಕೆ ವರ್ಗಾಯಿಸಿ",
diff --git a/src/Locale/ml.json b/src/Locale/ml.json
index ef50b258ff5..b9a45ca73fb 100644
--- a/src/Locale/ml.json
+++ b/src/Locale/ml.json
@@ -328,7 +328,7 @@
   "email_discharge_summary_description": "ഡിസ്ചാർജ് സംഗ്രഹം ലഭിക്കുന്നതിന് നിങ്ങളുടെ സാധുവായ ഇമെയിൽ വിലാസം നൽകുക",
   "email_success": "ഞങ്ങൾ ഉടൻ ഒരു ഇമെയിൽ അയയ്ക്കും. ദയവായി നിങ്ങളുടെ ഇൻബോക്സ് പരിശോധിക്കുക.",
   "emergency": "അടിയന്തരാവസ്ഥ",
-  "emergency_contact_phone_number": "അപാതക്കാല വിളി നമ്പർ",
+  "emergency_contact_number": "എമർജൻസി കോൺടാക്റ്റ് നമ്പർ",
   "empty_date_time": "--:-- --; ------------",
   "encounter_date_field_label__A": "സൗകര്യത്തിലേക്കുള്ള പ്രവേശന തീയതിയും സമയവും",
   "encounter_date_field_label__DC": "ഡൊമിസിലിയറി കെയർ ആരംഭിച്ച തീയതിയും സമയവും",
@@ -696,10 +696,6 @@
   "set_average_weekly_working_hours_for": "ഇതിനായി ശരാശരി പ്രതിവാര പ്രവൃത്തി സമയം സജ്ജമാക്കുക",
   "settings_and_filters": "ക്രമീകരണങ്ങളും ഫിൽട്ടറുകളും",
   "severity_of_breathlessness": "ശ്വാസതടസ്സത്തിൻ്റെ തീവ്രത",
-  "Search_by_phone_number": "फोन नंबरद्वारे शोधा",
-  "search_by_patient_name": "रुग्णाच्या नावाने शोधा",
-  "search_by_UHID": "UHID द्वारे शोधा",
-  "search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
   "shift_request_updated_successfully": "ഷിഫ്റ്റ് അഭ്യർത്ഥന വിജയകരമായി അപ്ഡേറ്റ് ചെയ്തു",
   "shifting": "ഷിഫ്റ്റിംഗ്",
   "shifting_approval_facility": "ഷിഫ്റ്റിംഗ് അംഗീകാര സൗകര്യം",
@@ -743,7 +739,6 @@
   "titrate_dosage": "ടൈട്രേറ്റ് ഡോസ്",
   "to_be_conducted": "നടത്തേണ്ടത്",
   "total_beds": "മൊത്തം കിടക്കകൾ",
-   "total_patients": "ആകെ രോഗികൾ",
   "total_users": "മൊത്തം ഉപയോക്താക്കൾ",
   "transfer_in_progress": "കൈമാറ്റം പുരോഗമിക്കുന്നു",
   "transfer_to_receiving_facility": "സ്വീകരിക്കാനുള്ള സൗകര്യത്തിലേക്ക് ട്രാൻസ്ഫർ ചെയ്യുക",
diff --git a/src/Locale/mr.json b/src/Locale/mr.json
index 777fc2b1e06..47df5718d90 100644
--- a/src/Locale/mr.json
+++ b/src/Locale/mr.json
@@ -31,7 +31,6 @@
   "download_type": "डाउनलोड प्रकार",
   "downloads": "डाउनलोड",
   "email": "ई-मेल पत्ता",
-  "emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबर",
   "enter_valid_age": "वैध वय प्रविष्ट करा",
   "facility_search_placeholder": "हॉस्पिटल / जिल्हा यानुसार शोध घ्या",
   "field_required": "हे भरणे आवश्यक आहे",
@@ -48,7 +47,6 @@
   "last_name": "आडनाव",
   "login": "लॉगिन",
   "new_password": "नवीन पासवर्ड",
-  "name": "नाव",
   "no_duplicate_facility": "बनावट हॉस्पिटल सुविधा मुळीच तयार करू नका",
   "no_facilities": "कोणतेही हॉस्पिटल नाही",
   "password": "पासवर्ड",
@@ -56,19 +54,13 @@
   "password_reset_failure": "पासवर्ड रिसेट झाला नाही",
   "password_reset_success": "पासवर्ड यशस्वीपणे रिसेट झाला",
   "password_sent": "पासवर्ड रिसेट झाला इमेल पाठवला",
-  "patient_no": "रुग्ण संख्या",
   "phone_number": "दूरध्वनी क्रमांक",
   "register_hospital": "हॉस्पिटलचे नाव नोंदवा",
   "register_page_title": "हॉस्पिटल व्यवस्थापक म्हणून नोंदणी करा",
   "reset": "रीसेट करा",
   "reset_password": "रिसेट पासवर्ड",
   "send_reset_link": "रीसेट लिंक  पाठवा",
-  "Search_by_phone_number": "फोन नंबरद्वारे शोधा",
-  "search_by_patient_name": "रुग्णाच्या नावाने शोधा",
-  "search_by_UHID": "UHID द्वारे शोधा",
-  "search_by_emergency_contact_phone_number": "आपातकालीन संपर्क फोन नंबरद्वारे शोधा",
   "sign_out": "साइन आउट",
   "something_wrong": "काहीतरी चूक झाली! पुन्हा प्रयत्न करा",
-  "total_patients": "एकूण रुग्ण",
   "username": "युजरनेम"
-}
+}
\ No newline at end of file
diff --git a/src/Locale/ta.json b/src/Locale/ta.json
index 30758aa8aa6..fb5dd0a72c8 100644
--- a/src/Locale/ta.json
+++ b/src/Locale/ta.json
@@ -328,7 +328,7 @@
   "email_discharge_summary_description": "டிஸ்சார்ஜ் சுருக்கத்தைப் பெற உங்கள் சரியான மின்னஞ்சல் முகவரியை உள்ளிடவும்",
   "email_success": "விரைவில் மின்னஞ்சல் அனுப்புவோம். உங்கள் இன்பாக்ஸை சரிபார்க்கவும்.",
   "emergency": "அவசரநிலை",
-  "emergency_contact_phone_number": "அபாய கால தொடர்பு தொலைபேசி எண்",
+  "emergency_contact_number": "அவசர தொடர்பு எண்",
   "empty_date_time": "--:-- --; ------------",
   "encounter_date_field_label__A": "வசதிக்கான சேர்க்கை தேதி மற்றும் நேரம்",
   "encounter_date_field_label__DC": "வீட்டு பராமரிப்பு தொடங்கும் தேதி மற்றும் நேரம்",
@@ -696,10 +696,6 @@
   "set_average_weekly_working_hours_for": "சராசரி வாராந்திர வேலை நேரத்தை அமைக்கவும்",
   "settings_and_filters": "அமைப்புகள் மற்றும் வடிப்பான்கள்",
   "severity_of_breathlessness": "மூச்சுத் திணறலின் தீவிரம்",
-  "Search_by_phone_number": "தொலைபேசி எண் மூலம் தேடு",
-  "search_by_patient_name": "நோயாளியின் பெயரால் தேடு",
-  "search_by_UHID": "UHID மூலம் தேடு",
-  "search_by_emergency_contact_phone_number": "அபாய கால தொடர்பு தொலைபேசி எண்ணால் தேடு",
   "shift_request_updated_successfully": "ஷிப்ட் கோரிக்கை வெற்றிகரமாக புதுப்பிக்கப்பட்டது",
   "shifting": "மாறுதல்",
   "shifting_approval_facility": "ஒப்புதல் வசதியை மாற்றுதல்",
@@ -743,7 +739,6 @@
   "titrate_dosage": "டைட்ரேட் அளவு",
   "to_be_conducted": "நடத்தப்பட வேண்டும்",
   "total_beds": "மொத்த படுக்கைகள்",
-  "total_patients": "மொத்த நோயாளிகள்",
   "total_users": "மொத்த பயனர்கள்",
   "transfer_in_progress": "இடமாற்றம் நடைபெறுகிறது",
   "transfer_to_receiving_facility": "பெறும் வசதிக்கு இடமாற்றம்",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 3e7409daa9b..b18238e398f 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -170,6 +170,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             types={["mobile", "landline"]}
             {...commonProps}
             errorClassName="hidden"
+            help={false}
           />
         );
       default:
diff --git a/src/components/Form/FormFields/FormField.tsx b/src/components/Form/FormFields/FormField.tsx
index 9c2903682b6..3ca0e6432e0 100644
--- a/src/components/Form/FormFields/FormField.tsx
+++ b/src/components/Form/FormFields/FormField.tsx
@@ -1,7 +1,8 @@
+import { useEffect } from "react";
 import { classNames } from "../../../Utils/utils";
 import { FieldError } from "../FieldValidators";
 import { FormFieldBaseProps } from "./Utils";
-
+import { useState } from "react";
 type LabelProps = {
   id?: string | undefined;
   required?: boolean;
@@ -54,6 +55,15 @@ const FormField = ({
   field?: FormFieldBaseProps<any>;
   children: React.ReactNode;
 }) => {
+  const [phhelp, setPhhelp] = useState(false);
+  useEffect(() => {
+    if ((field && field?.help == undefined) || (field && !("help" in field))) {
+      setPhhelp(true);
+    } else if (field?.help == false) {
+      setPhhelp(false);
+    }
+  }, []);
+
   return (
     <div className={field?.className}>
       <div className="flex items-center justify-between">
@@ -66,8 +76,8 @@ const FormField = ({
             {field?.label}
           </FieldLabel>
         )}
-        {field?.labelSuffix && (
-          <span className="mb-2 text-xs">{field?.labelSuffix}</span>
+        {field?.labelSuffix && phhelp && (
+          <span className="mb-2 text-xs">{field.labelSuffix}</span>
         )}
       </div>
       <div className={field?.className}>{props.children}</div>
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 8810e790422..a03c236dd18 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -7,6 +7,7 @@ import {
   formatPhoneNumber as formatPhoneNumberUtil,
   getCountryCode,
   CountryData,
+  humanizeStrings,
 } from "../../../Utils/utils";
 import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json";
 import {
@@ -17,10 +18,12 @@ import {
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import React from "react";
+import { useTranslation } from "react-i18next";
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
   myfunc?: (er: FieldError) => void;
+  help?: boolean;
   types: PhoneNumberType[];
   placeholder?: string;
   autoComplete?: string;
@@ -100,9 +103,11 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       <FormField
         field={{
           ...field,
-
+          help: props?.help,
           error: field.error || error,
-          labelSuffix: field.labelSuffix || "",
+          labelSuffix: field.labelSuffix || (
+            <PhoneNumberTypesHelp types={props.types} />
+          ),
         }}
       >
         <div className="relative rounded-md">
@@ -154,7 +159,22 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
     );
   },
 );
+const PhoneNumberTypesHelp = (props: { types: PhoneNumberType[] }) => {
+  const { t } = useTranslation();
 
+  return (
+    <div className="tooltip mt-1 pr-1 text-secondary-500">
+      <CareIcon icon="l-question-circle" className="text-lg" />
+      <div className="tooltip-text tooltip-bottom w-64 -translate-x-full whitespace-pre-wrap text-sm">
+        Supports only{" "}
+        <span className="font-bold lowercase">
+          {humanizeStrings(props.types.map((item) => t(item)))}
+        </span>{" "}
+        numbers.
+      </div>
+    </div>
+  );
+};
 const conditionPhoneCode = (code: string) => {
   code = code.split(" ")[0];
   return code.startsWith("+") ? code : "+" + code;
diff --git a/src/components/Form/FormFields/Utils.ts b/src/components/Form/FormFields/Utils.ts
index d7d2848a51e..ed7624d5600 100644
--- a/src/components/Form/FormFields/Utils.ts
+++ b/src/components/Form/FormFields/Utils.ts
@@ -32,6 +32,7 @@ export type FormFieldBaseProps<T> = {
   error?: FieldError;
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  help?: boolean;
 };
 
 /**

From 9efea86a137f0f8657b6e7830197c8b01932eddc Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Fri, 1 Nov 2024 00:51:56 +0530
Subject: [PATCH 22/54] work removed usestae and useeffect and added phhelp
 feature in a simple way

---
 src/components/Form/FormFields/FormField.tsx      | 15 ++-------------
 .../Form/FormFields/PhoneNumberFormField.tsx      | 14 ++++++++++----
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/components/Form/FormFields/FormField.tsx b/src/components/Form/FormFields/FormField.tsx
index 78230a8f5ce..3110c9a7629 100644
--- a/src/components/Form/FormFields/FormField.tsx
+++ b/src/components/Form/FormFields/FormField.tsx
@@ -1,8 +1,7 @@
-import { useEffect } from "react";
 import { classNames } from "../../../Utils/utils";
 import { FieldError } from "../FieldValidators";
 import { FormFieldBaseProps } from "./Utils";
-import { useState } from "react";
+
 type LabelProps = {
   id?: string | undefined;
   required?: boolean;
@@ -55,16 +54,6 @@ const FormField = ({
   field?: FormFieldBaseProps<any>;
   children: React.ReactNode;
 }) => {
-  const [phhelp, setPhhelp] = useState(false);
-
-  useEffect(() => {
-    if ((field && field?.help == undefined) || (field && !("help" in field))) {
-      setPhhelp(true);
-    } else if (field?.help == false) {
-      setPhhelp(false);
-    }
-  }, []);
-
   return (
     <div className={field?.className}>
       <div className="flex items-center justify-between">
@@ -77,7 +66,7 @@ const FormField = ({
             {field?.label}
           </FieldLabel>
         )}
-        {field?.labelSuffix && phhelp && (
+        {field?.labelSuffix && (
           <span className="mb-2 text-xs">{field.labelSuffix}</span>
         )}
       </div>
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index a03c236dd18..d2182320c4f 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -19,6 +19,7 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
+
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
@@ -99,15 +100,20 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       }
     }, [setValue]);
 
+    // Biswanaths change
+
     return (
+      //  ? thingy
       <FormField
         field={{
           ...field,
-          help: props?.help,
+
           error: field.error || error,
-          labelSuffix: field.labelSuffix || (
-            <PhoneNumberTypesHelp types={props.types} />
-          ),
+          labelSuffix:
+            field.labelSuffix ||
+            (props.help == undefined && (
+              <PhoneNumberTypesHelp types={props.types} />
+            )),
         }}
       >
         <div className="relative rounded-md">

From fe09b27a5855a6e594a1ff7ff9db641ebe858a02 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Fri, 1 Nov 2024 00:55:53 +0530
Subject: [PATCH 23/54] work removed usestae and useeffect and added phhelp
 feature in a simple way

---
 src/components/Form/FormFields/PhoneNumberFormField.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index d2182320c4f..837beb77182 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -100,10 +100,7 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       }
     }, [setValue]);
 
-    // Biswanaths change
-
     return (
-      //  ? thingy
       <FormField
         field={{
           ...field,

From 1919710393e7d627f4eefe48b652f1266c0e7bab Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Sat, 2 Nov 2024 16:17:30 +0530
Subject: [PATCH 24/54] fixed at a one time only one filter will be applied for
 the serchbymultifieldcomponent

---
 package-lock.json                             |  6 +++---
 src/Locale/en.json                            |  8 +++----
 src/common/hooks/useFilters.tsx               |  6 ++++++
 .../Common/SearchByMultipleFields.tsx         |  2 +-
 .../Form/FormFields/PhoneNumberFormField.tsx  |  6 +++---
 src/components/Patient/ManagePatients.tsx     | 21 +++++++++++--------
 6 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c09b7e88c12..a4b19cd5d8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12197,9 +12197,9 @@
       }
     },
     "node_modules/livekit-client": {
-      "version": "2.5.10",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.5.10.tgz",
-      "integrity": "sha512-H7EeIb19LAH8ejlvhh0JWtWkvXDan6Yf3bpFGlDMb54uPmyRgBY+McfgQsFgJCB9WJL0X+GYUoV1Cmnn8iAoIQ==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.6.0.tgz",
+      "integrity": "sha512-hpxNBtyWIFCefoHjHoSjqPCw3m7AfSJVcVZw6rMsqds4u+dSpWLfYkglWP8JuPGUIssyOsZm/+bV3gBWfuOGGQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/mutex": "1.0.0",
diff --git a/src/Locale/en.json b/src/Locale/en.json
index 088555d54d9..6e620af2869 100644
--- a/src/Locale/en.json
+++ b/src/Locale/en.json
@@ -199,9 +199,6 @@
   "SORT_OPTIONS__name": "Patient name A-Z",
   "SORT_OPTIONS__review_time": "Oldest review date first",
   "SORT_OPTIONS__taken_at": "Oldest taken date first",
-  "Search_by_UHID": "Search by UHID",
-  "Search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
-  "Search_by_phone_number": "Search by Phone Number",
   "Submit": "Submit",
   "TELEMEDICINE": "Telemedicine",
   "URINATION_FREQUENCY__DECREASED": "Decreased",
@@ -598,7 +595,7 @@
   "email_discharge_summary_description": "Enter your valid email address to receive the discharge summary",
   "email_success": "We will be sending an email shortly. Please check your inbox.",
   "emergency": "Emergency",
-  "emergency_contact_phone_number": "emergency contact phone number",
+  "emergency_phone_number": "emergency contact phone number",
   "empty_date_time": "--:-- --; --/--/----",
   "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
   "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
@@ -1086,7 +1083,10 @@
   "save_and_continue": "Save and Continue",
   "save_investigation": "Save Investigation",
   "scan_asset_qr": "Scan Asset QR!",
+  "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
   "search_by_patient_name": "Search by Patient Name",
+  "search_by_phone_number": "Search by Phone Number",
+  "search_by_uhid": "Search by UHID",
   "search_by_username": "Search by username",
   "search_for_facility": "Search for Facility",
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
diff --git a/src/common/hooks/useFilters.tsx b/src/common/hooks/useFilters.tsx
index 49e1d9fe0e2..eaef43dfed0 100644
--- a/src/common/hooks/useFilters.tsx
+++ b/src/common/hooks/useFilters.tsx
@@ -61,6 +61,11 @@ export default function useFilters({
     filter = hasPagination ? { page: 1, limit, ...filter } : filter;
     setQueryParams(Object.assign({}, qParams, filter), { replace: true });
   };
+  const updateSerchByField = (filter: FilterState) => {
+    filter = hasPagination ? { page: 1, limit, ...filter } : filter;
+    console.log(filter);
+    setQueryParams(Object.assign({}, filter), { replace: true });
+  };
   const updatePage = (page: number) => {
     if (!hasPagination) return;
     setQueryParams(Object.assign({}, qParams, { page }), { replace: true });
@@ -256,6 +261,7 @@ export default function useFilters({
      * To prevent reset to page 1, pass the `page` property along with the obj.
      */
     updateQuery,
+    updateSerchByField,
     /** Temp. alias of `updateQuery` until the new Filters slideover. Do not use. */
     applyFilter: updateQuery,
     /** Updates the query params with the specified page. */
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index b18238e398f..0971f5567b3 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -158,7 +158,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         "flex-grow border-none shadow-none focus-visible:ring-0 h-10",
         inputClassName,
       ),
-      myfunc: (er: FieldError) => setError(er),
+      phoneFieldError: (er: FieldError) => setError(er),
     };
 
     switch (selectedOption.type) {
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 837beb77182..6757e5a494e 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -23,7 +23,7 @@ import { useTranslation } from "react-i18next";
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
-  myfunc?: (er: FieldError) => void;
+  phoneFieldError?: (er: FieldError) => void;
   help?: boolean;
   types: PhoneNumberType[];
   placeholder?: string;
@@ -77,8 +77,8 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       [field, validate, error],
     );
     useEffect(() => {
-      if (props.myfunc) {
-        props.myfunc(error);
+      if (props.phoneFieldError) {
+        props.phoneFieldError(error);
       }
     }, [error]);
     const handleCountryChange = (value: CountryData): void => {
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index e841b46f8d5..6c538d9d36f 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -81,6 +81,8 @@ export const PatientManager = () => {
   const {
     qParams,
     updateQuery,
+    updateSerchByField,
+    removeFilters,
     advancedFilter,
     Pagination,
     FilterBadges,
@@ -763,31 +765,32 @@ export const PatientManager = () => {
       key: "patient_no",
       label: "UHID",
       type: "text" as const,
-      placeholder: "search_by_UHID",
+      placeholder: "search_by_uhid",
       value: qParams.patient_no || "",
       shortcutKey: "u",
     },
     {
-      key: "emergency_contact_phone_number",
+      key: "emergency_phone_number",
       label: "Emergency Contact Phone Number",
       type: "phone" as const,
-      placeholder: "search_by_emergency_contact_phone_number",
-      value: qParams.emergency_contact_phone_number || "",
+      placeholder: "search_by_emergency_phone_number",
+      value: qParams.emergency_phone_number || "",
       shortcutKey: "e",
     },
   ];
 
   const handleSearch = useCallback(
     (key: string, value: string) => {
-      if (key === "phone_number" || key === "emergency_contact_phone_number") {
-        if (value.length >= 13 || value === "+91" || value === "") {
-          updateQuery({ [key]: value });
+      if (key === "phone_number" || key === "emergency_phone_number") {
+        value.length < 13 ? removeFilters() : null;
+        if (value.length >= 13 || value === "") {
+          updateSerchByField({ [key]: value });
         }
       } else {
-        updateQuery({ [key]: value });
+        updateSerchByField({ [key]: value });
       }
     },
-    [updateQuery],
+    [updateSerchByField],
   );
 
   return (

From 4f15037ad7b4f8d8e3302afdb2436036901d8513 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:42:57 +0530
Subject: [PATCH 25/54] error function name changed to Onerro in phnumberfiedl
 and serchbyfield

---
 src/components/Common/SearchByMultipleFields.tsx        | 2 +-
 src/components/Form/FormFields/PhoneNumberFormField.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 0971f5567b3..71105facc9e 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -158,7 +158,6 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         "flex-grow border-none shadow-none focus-visible:ring-0 h-10",
         inputClassName,
       ),
-      phoneFieldError: (er: FieldError) => setError(er),
     };
 
     switch (selectedOption.type) {
@@ -171,6 +170,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             {...commonProps}
             errorClassName="hidden"
             help={false}
+            onError={(er: FieldError) => setError(er)}
           />
         );
       default:
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 6757e5a494e..2d8fe893405 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -23,7 +23,7 @@ import { useTranslation } from "react-i18next";
 const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
-  phoneFieldError?: (er: FieldError) => void;
+  onError?: (error: FieldError) => void;
   help?: boolean;
   types: PhoneNumberType[];
   placeholder?: string;
@@ -77,8 +77,8 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       [field, validate, error],
     );
     useEffect(() => {
-      if (props.phoneFieldError) {
-        props.phoneFieldError(error);
+      if (props.onError) {
+        props.onError(error);
       }
     }, [error]);
     const handleCountryChange = (value: CountryData): void => {

From f7c535fd5b1edc8bfed612ad1bff397644fd795d Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:44:40 +0530
Subject: [PATCH 26/54] error function name changed to Onerro in phnumberfiedl
 and serchbyfield

---
 src/components/Common/SearchByMultipleFields.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 71105facc9e..c4b3fa48c04 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -170,7 +170,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             {...commonProps}
             errorClassName="hidden"
             help={false}
-            onError={(er: FieldError) => setError(er)}
+            onError={(error: FieldError) => setError(error)}
           />
         );
       default:

From 6ff1219dfb432a6deae8c4c47a25c0a0d7eb6110 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Sun, 3 Nov 2024 10:35:58 +0530
Subject: [PATCH 27/54] made some changes,requseted by reviewer

---
 src/common/hooks/useFilters.tsx                    |  1 -
 src/components/Common/SearchByMultipleFields.tsx   | 14 ++++++--------
 .../Form/FormFields/PhoneNumberFormField.tsx       |  4 ++--
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/common/hooks/useFilters.tsx b/src/common/hooks/useFilters.tsx
index eaef43dfed0..a470c7f8401 100644
--- a/src/common/hooks/useFilters.tsx
+++ b/src/common/hooks/useFilters.tsx
@@ -63,7 +63,6 @@ export default function useFilters({
   };
   const updateSerchByField = (filter: FilterState) => {
     filter = hasPagination ? { page: 1, limit, ...filter } : filter;
-    console.log(filter);
     setQueryParams(Object.assign({}, filter), { replace: true });
   };
   const updatePage = (page: number) => {
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index c4b3fa48c04..fcc75595967 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -74,12 +74,10 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         setFocusedIndex((prevIndex) =>
           prevIndex === options.length - 1 ? 0 : prevIndex + 1,
         );
-        console.log(focusedIndex);
       } else if (e.key === "ArrowUp") {
         setFocusedIndex((prevIndex) =>
           prevIndex === 0 ? options.length - 1 : prevIndex - 1,
         );
-        console.log(focusedIndex);
       } else if (e.key === "Enter") {
         handleOptionChange(options[focusedIndex]);
       }
@@ -134,7 +132,6 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
-      console.log(e.key);
       if (e.key === "Escape") {
         setSearchValue("");
         onSearch(selectedOption.key, "");
@@ -169,7 +166,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             types={["mobile", "landline"]}
             {...commonProps}
             errorClassName="hidden"
-            help={false}
+            phoneNumberHelp={false}
             onError={(error: FieldError) => setError(error)}
           />
         );
@@ -213,9 +210,10 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                     <CommandItem
                       key={option.key}
                       onSelect={() => handleOptionChange(option)}
-                      className={`${
-                        focusedIndex === index ? "bg-gray-100" : ""
-                      } hover:bg-secondary-100`}
+                      className={cn({
+                        "bg-gray-100": focusedIndex === index,
+                        "hover:bg-secondary-100": true,
+                      })}
                     >
                       <CareIcon icon="l-search" className="mr-2 h-4 w-4" />
                       <span className="flex-1">{t(option.key)}</span>
@@ -233,7 +231,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
       </div>
       {error && (
         <div className="error-text ml-3 bg-white text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">
-          Invalid phone number
+          {t("invalid_phone_number")}
         </div>
       )}
       <div className="flex flex-wrap gap-2 rounded-b-lg border-x border-b border-gray-200 bg-gray-50 p-2 shadow">
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 2d8fe893405..7968417b486 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -24,7 +24,7 @@ const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
   onError?: (error: FieldError) => void;
-  help?: boolean;
+  phoneNumberHelp?: boolean;
   types: PhoneNumberType[];
   placeholder?: string;
   autoComplete?: string;
@@ -108,7 +108,7 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
           error: field.error || error,
           labelSuffix:
             field.labelSuffix ||
-            (props.help == undefined && (
+            (props.phoneNumberHelp == undefined && (
               <PhoneNumberTypesHelp types={props.types} />
             )),
         }}

From a8936a5d132b9ca3149545515a0083befe89dd04 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:13:33 +0530
Subject: [PATCH 28/54] fixed the bug related to filter when applying advanced
 filter

---
 src/common/hooks/useFilters.tsx               |  6 +---
 .../Common/SearchByMultipleFields.tsx         |  4 +--
 .../Form/FormFields/PhoneNumberFormField.tsx  |  5 ++--
 src/components/Form/FormFields/Utils.ts       |  1 -
 src/components/Patient/ManagePatients.tsx     | 30 ++++++++++++-------
 5 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/common/hooks/useFilters.tsx b/src/common/hooks/useFilters.tsx
index a470c7f8401..f073a2d37a5 100644
--- a/src/common/hooks/useFilters.tsx
+++ b/src/common/hooks/useFilters.tsx
@@ -61,10 +61,6 @@ export default function useFilters({
     filter = hasPagination ? { page: 1, limit, ...filter } : filter;
     setQueryParams(Object.assign({}, qParams, filter), { replace: true });
   };
-  const updateSerchByField = (filter: FilterState) => {
-    filter = hasPagination ? { page: 1, limit, ...filter } : filter;
-    setQueryParams(Object.assign({}, filter), { replace: true });
-  };
   const updatePage = (page: number) => {
     if (!hasPagination) return;
     setQueryParams(Object.assign({}, qParams, { page }), { replace: true });
@@ -260,7 +256,7 @@ export default function useFilters({
      * To prevent reset to page 1, pass the `page` property along with the obj.
      */
     updateQuery,
-    updateSerchByField,
+
     /** Temp. alias of `updateQuery` until the new Filters slideover. Do not use. */
     applyFilter: updateQuery,
     /** Updates the query params with the specified page. */
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index fcc75595967..1f605112310 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -43,7 +43,7 @@ interface SearchByMultipleFieldsProps {
   buttonClassName?: string;
 }
 
-export type EventType = {
+type EventType = {
   value: string;
   target?: { value: string };
 };
@@ -166,7 +166,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             types={["mobile", "landline"]}
             {...commonProps}
             errorClassName="hidden"
-            phoneNumberHelp={false}
+            showHelp={false}
             onError={(error: FieldError) => setError(error)}
           />
         );
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 7968417b486..af5b12ef98c 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -24,7 +24,7 @@ const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
   onError?: (error: FieldError) => void;
-  phoneNumberHelp?: boolean;
+  showHelp?: boolean;
   types: PhoneNumberType[];
   placeholder?: string;
   autoComplete?: string;
@@ -104,11 +104,10 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
       <FormField
         field={{
           ...field,
-
           error: field.error || error,
           labelSuffix:
             field.labelSuffix ||
-            (props.phoneNumberHelp == undefined && (
+            (props.showHelp == false ? null : (
               <PhoneNumberTypesHelp types={props.types} />
             )),
         }}
diff --git a/src/components/Form/FormFields/Utils.ts b/src/components/Form/FormFields/Utils.ts
index ed7624d5600..d7d2848a51e 100644
--- a/src/components/Form/FormFields/Utils.ts
+++ b/src/components/Form/FormFields/Utils.ts
@@ -32,7 +32,6 @@ export type FormFieldBaseProps<T> = {
   error?: FieldError;
   onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-  help?: boolean;
 };
 
 /**
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 6c538d9d36f..829978970c8 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -81,8 +81,6 @@ export const PatientManager = () => {
   const {
     qParams,
     updateQuery,
-    updateSerchByField,
-    removeFilters,
     advancedFilter,
     Pagination,
     FilterBadges,
@@ -781,16 +779,26 @@ export const PatientManager = () => {
 
   const handleSearch = useCallback(
     (key: string, value: string) => {
-      if (key === "phone_number" || key === "emergency_phone_number") {
-        value.length < 13 ? removeFilters() : null;
-        if (value.length >= 13 || value === "") {
-          updateSerchByField({ [key]: value });
-        }
-      } else {
-        updateSerchByField({ [key]: value });
-      }
+      const updatedQuery = {
+        phone_number:
+          key === "phone_number"
+            ? value.length >= 13 || value === ""
+              ? value
+              : undefined
+            : undefined,
+        name: key === "name" ? value : undefined,
+        patient_no: key === "patient_no" ? value : undefined,
+        emergency_phone_number:
+          key === "emergency_phone_number"
+            ? value.length >= 13 || value === ""
+              ? value
+              : undefined
+            : undefined,
+      };
+
+      updateQuery(updatedQuery);
     },
-    [updateSerchByField],
+    [updateQuery],
   );
 
   return (

From c8ce4cc7bf3c16829b633a7c24b8051a47ce617c Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Mon, 4 Nov 2024 19:16:45 +0530
Subject: [PATCH 29/54] fixed the bug related to filter when applying advanced
 filter

---
 src/common/hooks/useFilters.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common/hooks/useFilters.tsx b/src/common/hooks/useFilters.tsx
index f073a2d37a5..49e1d9fe0e2 100644
--- a/src/common/hooks/useFilters.tsx
+++ b/src/common/hooks/useFilters.tsx
@@ -256,7 +256,6 @@ export default function useFilters({
      * To prevent reset to page 1, pass the `page` property along with the obj.
      */
     updateQuery,
-
     /** Temp. alias of `updateQuery` until the new Filters slideover. Do not use. */
     applyFilter: updateQuery,
     /** Updates the query params with the specified page. */

From 04bd5b1b58437a0df560caf4a911049d1e776c88 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Mon, 4 Nov 2024 20:09:57 +0530
Subject: [PATCH 30/54] hide help added

---
 src/components/Common/SearchByMultipleFields.tsx        | 2 +-
 src/components/Form/FormFields/PhoneNumberFormField.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 1f605112310..eab94733c5b 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -166,7 +166,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             types={["mobile", "landline"]}
             {...commonProps}
             errorClassName="hidden"
-            showHelp={false}
+            hideHelp={false}
             onError={(error: FieldError) => setError(error)}
           />
         );
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index af5b12ef98c..9197a28aeb0 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -24,7 +24,7 @@ const phoneCodes: Record<string, CountryData> = phoneCodesJson;
 
 interface Props extends FormFieldBaseProps<string> {
   onError?: (error: FieldError) => void;
-  showHelp?: boolean;
+  hideHelp?: boolean;
   types: PhoneNumberType[];
   placeholder?: string;
   autoComplete?: string;
@@ -107,7 +107,7 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
           error: field.error || error,
           labelSuffix:
             field.labelSuffix ||
-            (props.showHelp == false ? null : (
+            (props.hideHelp == false ? null : (
               <PhoneNumberTypesHelp types={props.types} />
             )),
         }}

From 9287679d2992cf1c489b39e80fefedc70ee1e0ed Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Mon, 4 Nov 2024 21:15:17 +0530
Subject: [PATCH 31/54] hide help added

---
 src/components/Common/SearchByMultipleFields.tsx        | 2 +-
 src/components/Form/FormFields/PhoneNumberFormField.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index eab94733c5b..6647833d29d 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -166,7 +166,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             types={["mobile", "landline"]}
             {...commonProps}
             errorClassName="hidden"
-            hideHelp={false}
+            hideHelp={true}
             onError={(error: FieldError) => setError(error)}
           />
         );
diff --git a/src/components/Form/FormFields/PhoneNumberFormField.tsx b/src/components/Form/FormFields/PhoneNumberFormField.tsx
index 9197a28aeb0..a2a7f9d6583 100644
--- a/src/components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/components/Form/FormFields/PhoneNumberFormField.tsx
@@ -107,7 +107,7 @@ const PhoneNumberFormField = React.forwardRef<HTMLInputElement, Props>(
           error: field.error || error,
           labelSuffix:
             field.labelSuffix ||
-            (props.hideHelp == false ? null : (
+            (props.hideHelp ? null : (
               <PhoneNumberTypesHelp types={props.types} />
             )),
         }}

From 0067cde3b3216d4c696feeba258b16032391f621 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Sun, 17 Nov 2024 21:47:02 +0530
Subject: [PATCH 32/54] fixed: clear input value after clearing filter

---
 .../Common/SearchByMultipleFields.tsx         | 28 +++++++++++++++----
 src/components/Patient/ManagePatients.tsx     |  2 ++
 src/hooks/useFilters.tsx                      |  9 +++++-
 src/hooks/useFullscreen.ts                    |  1 -
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 6647833d29d..af5b15699ef 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -1,29 +1,33 @@
 import React, {
-  useState,
   useCallback,
-  useRef,
   useEffect,
   useMemo,
+  useRef,
+  useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+
 import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
-import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
-import { FieldError } from "@/components/Form/FieldValidators";
+
+import { Button } from "@/components/ui/button";
 import {
   Command,
   CommandGroup,
   CommandItem,
   CommandList,
 } from "@/components/ui/command";
+import { Input } from "@/components/ui/input";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
 
+import { FieldError } from "@/components/Form/FieldValidators";
+import PhoneNumberFormField from "@/components/Form/FormFields/PhoneNumberFormField";
+
 interface SearchOption {
   key: string;
   label: string;
@@ -41,6 +45,7 @@ interface SearchByMultipleFieldsProps {
   className?: string;
   inputClassName?: string;
   buttonClassName?: string;
+  clearSearch?: { value: boolean; params?: string[] };
 }
 
 type EventType = {
@@ -55,6 +60,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   className,
   inputClassName,
   buttonClassName,
+  clearSearch,
 }) => {
   const { t } = useTranslation();
   const [selectedOption, setSelectedOption] = useState<SearchOption>(
@@ -65,6 +71,16 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const [focusedIndex, setFocusedIndex] = useState(0);
   const [error, setError] = useState<string | undefined | boolean>();
+
+  useEffect(() => {
+    if (clearSearch?.value) {
+      const clearinput = options
+        .map((op) => op.key)
+        .some((element) => clearSearch.params?.includes(element));
+      clearinput ? setSearchValue("") : null;
+    }
+  }, [clearSearch]);
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "/" && document.activeElement !== inputRef.current) {
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 7e6a9a99155..a896b954026 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -90,6 +90,7 @@ export const PatientManager = () => {
     Pagination,
     FilterBadges,
     resultsPerPage,
+    clearSearch,
   } = useFilters({
     limit: 12,
     cacheBlacklist: [
@@ -1005,6 +1006,7 @@ export const PatientManager = () => {
             <SearchByMultipleFields
               options={searchOptions}
               onSearch={handleSearch}
+              clearSearch={clearSearch}
             />
           </div>
         </div>
diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx
index b67474045ef..e53426f9950 100644
--- a/src/hooks/useFilters.tsx
+++ b/src/hooks/useFilters.tsx
@@ -34,6 +34,10 @@ export default function useFilters({
   const hasPagination = limit > 0;
   const [showFilters, setShowFilters] = useState(false);
   const [qParams, _setQueryParams] = useQueryParams();
+  const [clearSearch, setClearSearch] = useState<{
+    value: boolean;
+    params?: string[];
+  }>({ value: false });
 
   const updateCache = (query: QueryParam) => {
     const blacklist = FILTERS_CACHE_BLACKLIST.concat(cacheBlacklist);
@@ -63,6 +67,7 @@ export default function useFilters({
   const updateQuery = (filter: FilterState) => {
     filter = hasPagination ? { page: 1, limit, ...filter } : filter;
     setQueryParams(Object.assign({}, qParams, filter), { replace: true });
+    setClearSearch({ value: false });
   };
   const updatePage = (page: number) => {
     if (!hasPagination) return;
@@ -71,6 +76,7 @@ export default function useFilters({
   const removeFilters = (params?: string[]) => {
     params ??= Object.keys(qParams);
     setQueryParams(removeFromQuery(qParams, params));
+    setClearSearch({ value: true, params: params });
   };
   const removeFilter = (param: string) => removeFilters([param]);
 
@@ -203,7 +209,7 @@ export default function useFilters({
 
     return (
       <div
-        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 ${show ? "" : "hidden"}`}
+        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 md:mt-10  ${show ? "" : "hidden"}`}
       >
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />
@@ -268,6 +274,7 @@ export default function useFilters({
      * @param param is the key of the filter to be removed.
      */
     removeFilter,
+    clearSearch,
 
     /**
      * Removes multiple filters from query param
diff --git a/src/hooks/useFullscreen.ts b/src/hooks/useFullscreen.ts
index a826ff5f0ad..e805e79d278 100644
--- a/src/hooks/useFullscreen.ts
+++ b/src/hooks/useFullscreen.ts
@@ -35,7 +35,6 @@ export default function useFullscreen() {
       elem.webkitExitFullscreen(); // Safari
     else document.exitFullscreen();
   }
-
   const setFullscreen = (
     value: boolean,
     element?: HTMLElement,

From 189896e6afbe474d0dc1e8f8f8e6527cf3deb602 Mon Sep 17 00:00:00 2001
From: Aakash Singh <mail@singhaakash.dev>
Date: Mon, 18 Nov 2024 19:56:50 +0530
Subject: [PATCH 33/54] Discard changes to .env

---
 .env | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env b/.env
index ebc0ebd5be3..77e4641b8b2 100644
--- a/.env
+++ b/.env
@@ -14,4 +14,4 @@ ESLINT_NO_DEV_ERRORS=true
 CARE_CDN_URL="https://egov-s3-facility-10bedicu.s3.amazonaws.com https://egov-s3-patient-data-10bedicu.s3.amazonaws.com http://localhost:4566"
 REACT_ALLOWED_LOCALES="en,hi,ta,ml,mr,kn"
 
-REACT_ENABLED_APPS="ohcnetwork/care_livekit_fe@main"
+REACT_ENABLED_APPS=""
\ No newline at end of file

From e03902709d52e8abd00a76d390af0aaf329ed50e Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Mon, 18 Nov 2024 23:10:44 +0530
Subject: [PATCH 34/54] fixed

---
 package-lock.json                 | 112 +-----------------------------
 package.json                      |   3 +-
 src/components/ui/command.tsx     |   3 +-
 src/components/ui/dialog.tsx      |   2 +-
 src/components/ui/label.tsx       |   4 +-
 src/components/ui/popover.tsx     |   2 +-
 src/components/ui/scroll-area.tsx |   2 +-
 src/hooks/useFullscreen.ts        |   1 +
 8 files changed, 13 insertions(+), 116 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c225eff86ec..5313ccf39a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -120,6 +120,7 @@
     "apps/care_livekit_fe": {
       "name": "care-livekit",
       "version": "0.0.1",
+      "extraneous": true,
       "license": "ISC",
       "dependencies": {
         "@livekit/components-react": "^2.6.2",
@@ -2840,59 +2841,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@livekit/components-core": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/@livekit/components-core/-/components-core-0.11.10.tgz",
-      "integrity": "sha512-PvFlKq1W64b9GfFjG7L4/o7ulAl5yFFpDTvG+JHQiXkaPaecMPt/qPbs6zdvUlC7om1TGMuW/pIN7o585Xz9Fg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@floating-ui/dom": "1.6.11",
-        "loglevel": "1.9.1",
-        "rxjs": "7.8.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "livekit-client": "^2.5.7",
-        "tslib": "^2.6.2"
-      }
-    },
-    "node_modules/@livekit/components-react": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.6.7.tgz",
-      "integrity": "sha512-z8dgrBrRXIe7oagwFyjehdwL/4zpySJyPdAjeMDXZVbTXYNAugb3a88Ws9yQz4PZFECLkIPXJCN3C3YR+bgh5Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@livekit/components-core": "0.11.10",
-        "clsx": "2.1.1",
-        "usehooks-ts": "3.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@livekit/krisp-noise-filter": "^0.2.12",
-        "livekit-client": "^2.5.7",
-        "react": ">=18",
-        "react-dom": ">=18",
-        "tslib": "^2.6.2"
-      },
-      "peerDependenciesMeta": {
-        "@livekit/krisp-noise-filter": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@livekit/components-styles": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@livekit/components-styles/-/components-styles-1.1.4.tgz",
-      "integrity": "sha512-QCupn7tQ/dy/WZclrfsgtDe8peiGYS6Ied1IGkKOysaXo04l90t62SIUTKyxgd0dNDhUDC0p34qCggGZs/44lQ==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -6929,10 +6877,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/care-livekit": {
-      "resolved": "apps/care_livekit_fe",
-      "link": true
-    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -12393,29 +12337,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/livekit-client": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/livekit-client/-/livekit-client-2.6.0.tgz",
-      "integrity": "sha512-hpxNBtyWIFCefoHjHoSjqPCw3m7AfSJVcVZw6rMsqds4u+dSpWLfYkglWP8JuPGUIssyOsZm/+bV3gBWfuOGGQ==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@livekit/mutex": "1.0.0",
-        "@livekit/protocol": "1.24.0",
-        "events": "^3.3.0",
-        "loglevel": "^1.8.0",
-        "sdp-transform": "^2.14.1",
-        "ts-debounce": "^4.0.0",
-        "tslib": "2.7.0",
-        "typed-emitter": "^2.1.0",
-        "webrtc-adapter": "^9.0.0"
-      }
-    },
-    "node_modules/livekit-client/node_modules/tslib": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
-      "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
-      "license": "0BSD"
-    },
     "node_modules/load-plugin": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/load-plugin/-/load-plugin-6.0.3.tgz",
@@ -12526,7 +12447,8 @@
     "node_modules/lodash.debounce": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
@@ -12620,19 +12542,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/loglevel": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.1.tgz",
-      "integrity": "sha512-hP3I3kCrDIMuRwAwHltphhDM1r8i55H33GgqjXbrisuJhF4kRhW1dNuxsRklp4bXl8DSdLaNLuiL4A/LWRfxvg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6.0"
-      },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/loglevel"
-      }
-    },
     "node_modules/long": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz",
@@ -18979,21 +18888,6 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
-      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
-      "license": "MIT",
-      "dependencies": {
-        "lodash.debounce": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=16.15.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17 || ^18"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 491524052d7..ae8325507fc 100644
--- a/package.json
+++ b/package.json
@@ -177,5 +177,6 @@
   "engines": {
     "node": ">=22.11.0"
   },
-  "packageManager": "npm@10.5.0"
+
+  "packageManager": "npm@10.9.0"
 }
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 3d56f725cdd..29703e26108 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -1,9 +1,10 @@
-import * as React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
+
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 
 const Command = React.forwardRef<
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index e39e6cb23fd..94698f9b5e7 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Cross2Icon } from "@radix-ui/react-icons";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
index 44912aff543..a115d28af1e 100644
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@@ -1,6 +1,6 @@
-import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps, cva } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 1c338bfaa9d..466e7226e36 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
index cb6d5726563..d0c4d3ac63b 100644
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@@ -1,5 +1,5 @@
-import * as React from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
diff --git a/src/hooks/useFullscreen.ts b/src/hooks/useFullscreen.ts
index e805e79d278..a826ff5f0ad 100644
--- a/src/hooks/useFullscreen.ts
+++ b/src/hooks/useFullscreen.ts
@@ -35,6 +35,7 @@ export default function useFullscreen() {
       elem.webkitExitFullscreen(); // Safari
     else document.exitFullscreen();
   }
+
   const setFullscreen = (
     value: boolean,
     element?: HTMLElement,

From 7a4ecac37e609ddd4363693f4da816342f47dea6 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 20 Nov 2024 00:21:11 +0530
Subject: [PATCH 35/54] debouncing added for search field

---
 package-lock.json                             | 334 ++++++++++++++++++
 package.json                                  |   2 +-
 .../Common/SearchByMultipleFields.tsx         |   1 +
 src/components/Patient/ManagePatients.tsx     |   5 +-
 4 files changed, 340 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index efd1c5e0184..0e0770c773e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
         "react-webcam": "^7.2.0",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
+        "use-debounce": "^10.0.4",
         "use-keyboard-shortcut": "^1.1.6",
         "xlsx": "^0.18.5"
       },
@@ -3310,6 +3311,327 @@
         "@pnotify/core": "^5.2.0"
       }
     },
+    "node_modules/@poppinss/cliui": {
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@poppinss/cliui/-/cliui-6.4.1.tgz",
+      "integrity": "sha512-tdV3QpAfrPFRLPOh98F8QxWBvwYF3ziWGGtpVqfZtFNTFkC7nQnVQlUW55UtQ7rkeMmFohxfDI+2JNWScGJ1jQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@poppinss/colors": "^4.1.3",
+        "cli-boxes": "^3.0.0",
+        "cli-table3": "^0.6.4",
+        "cli-truncate": "^4.0.0",
+        "log-update": "^6.0.0",
+        "pretty-hrtime": "^1.0.3",
+        "string-width": "^7.1.0",
+        "supports-color": "^9.4.0",
+        "terminal-size": "^4.0.0",
+        "wordwrap": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18.16.0"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/ansi-escapes": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.0.0.tgz",
+      "integrity": "sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "environment": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/cli-cursor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
+      "integrity": "sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "restore-cursor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/emoji-regex": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz",
+      "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@poppinss/cliui/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/log-update": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
+      "integrity": "sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-escapes": "^7.0.0",
+        "cli-cursor": "^5.0.0",
+        "slice-ansi": "^7.1.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/onetime": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",
+      "integrity": "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mimic-function": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/restore-cursor": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz",
+      "integrity": "sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "onetime": "^7.0.0",
+        "signal-exit": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/supports-color": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-9.4.0.tgz",
+      "integrity": "sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/cliui/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/@poppinss/colors": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@poppinss/colors/-/colors-4.1.3.tgz",
+      "integrity": "sha512-A0FjJ6x14donWDN3bHAFFjJaPWTwM2PgWT834+bPKVK6Xukf25CscoRqCPYI939a8yuJFX9PYWWnVbUVI0E2Cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kleur": "^4.1.5"
+      },
+      "engines": {
+        "node": ">=18.16.0"
+      }
+    },
+    "node_modules/@poppinss/validator-lite": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@poppinss/validator-lite/-/validator-lite-1.0.3.tgz",
+      "integrity": "sha512-u4dmT7PDHwNtxY3q1jHVp/u+hMEEcBlkzd37QwwM4tVt/0mLlEDttSfPQ+TT7sqPG4VEtWKwVSlMInwPUYyJpA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "validator": "^13.9.0"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
@@ -18935,6 +19257,18 @@
         }
       }
     },
+    "node_modules/use-debounce": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
+      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/use-keyboard-shortcut": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/use-keyboard-shortcut/-/use-keyboard-shortcut-1.1.6.tgz",
diff --git a/package.json b/package.json
index 29732910efb..052b02b5b0d 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "react-webcam": "^7.2.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "use-debounce": "^10.0.4",
     "use-keyboard-shortcut": "^1.1.6",
     "xlsx": "^0.18.5"
   },
@@ -179,6 +180,5 @@
   "engines": {
     "node": ">=22.11.0"
   },
-
   "packageManager": "npm@10.9.0"
 }
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index af5b15699ef..b14aa5f96be 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -78,6 +78,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         .map((op) => op.key)
         .some((element) => clearSearch.params?.includes(element));
       clearinput ? setSearchValue("") : null;
+      inputRef.current?.focus();
     }
   }, [clearSearch]);
 
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 04400d1e318..b3887715ee7 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -2,6 +2,7 @@ import dayjs from "dayjs";
 import { Link, navigate } from "raviger";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useDebounce } from "use-debounce";
 
 import { Avatar } from "@/components/Common/Avatar";
 import ButtonV2 from "@/components/Common/ButtonV2";
@@ -291,8 +292,10 @@ export const PatientManager = () => {
     return cleanedData;
   };
 
+  const [debouncedParams] = useDebounce(params, 500); // Debounce time in milliseconds
+
   const { loading: isLoading, data } = useQuery(routes.patientList, {
-    query: params,
+    query: debouncedParams, // Pass the debounced params
   });
 
   const getTheCategoryFromId = () => {

From b7e3e00bca93d506950d36b6746f8d5f356cb555 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 20 Nov 2024 00:58:23 +0530
Subject: [PATCH 36/54] debouncing added for search field

---
 src/components/Patient/ManagePatients.tsx | 2 +-
 src/hooks/useFilters.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index b3887715ee7..7e40be31e4c 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -292,7 +292,7 @@ export const PatientManager = () => {
     return cleanedData;
   };
 
-  const [debouncedParams] = useDebounce(params, 500); // Debounce time in milliseconds
+  const [debouncedParams] = useDebounce(params, 1000); // Debounce time in milliseconds
 
   const { loading: isLoading, data } = useQuery(routes.patientList, {
     query: debouncedParams, // Pass the debounced params
diff --git a/src/hooks/useFilters.tsx b/src/hooks/useFilters.tsx
index e53426f9950..63ffa58822e 100644
--- a/src/hooks/useFilters.tsx
+++ b/src/hooks/useFilters.tsx
@@ -209,7 +209,7 @@ export default function useFilters({
 
     return (
       <div
-        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 md:mt-10  ${show ? "" : "hidden"}`}
+        className={`col-span-3 my-2 flex w-full flex-wrap items-center gap-2 mt-6  ${show ? "" : "hidden"}`}
       >
         {compiledBadges.map((props) => (
           <FilterBadge {...props} name={t(props.name)} key={props.name} />

From 12af40eb40ddfc67c81fee8ce9bbf03f780489d9 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Sun, 24 Nov 2024 13:36:15 +0530
Subject: [PATCH 37/54] fixed debouncing and prevent unnecessary api calls

---
 src/components/Patient/ManagePatients.tsx |  6 +--
 src/hooks/useDebounce.ts                  | 50 +++++++++++++++++++++++
 2 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/useDebounce.ts

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 7e40be31e4c..8ab0a9f08a5 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -2,7 +2,6 @@ import dayjs from "dayjs";
 import { Link, navigate } from "raviger";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useDebounce } from "use-debounce";
 
 import { Avatar } from "@/components/Common/Avatar";
 import ButtonV2 from "@/components/Common/ButtonV2";
@@ -14,6 +13,7 @@ import SortDropdownMenu from "@/components/Common/SortDropdown";
 import Tabs from "@/components/Common/Tabs";
 
 import useAuthUser from "@/hooks/useAuthUser";
+import useDebounce from "@/hooks/useDebounce";
 import useFilters from "@/hooks/useFilters";
 
 import {
@@ -292,10 +292,8 @@ export const PatientManager = () => {
     return cleanedData;
   };
 
-  const [debouncedParams] = useDebounce(params, 1000); // Debounce time in milliseconds
-
   const { loading: isLoading, data } = useQuery(routes.patientList, {
-    query: debouncedParams, // Pass the debounced params
+    query: JSON.parse(useDebounce(JSON.stringify(params), 1000)),
   });
 
   const getTheCategoryFromId = () => {
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 00000000000..e675d9e335b
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,50 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Custom hook to debounce a value.
+ *
+ * @param {any} value - The value to debounce.
+ * @param {number} delay - The debounce delay in milliseconds.
+ * @returns {any} - The debounced value.
+ */
+const useDebounce = (value: string, delay: number) => {
+  function compareObjects(obj1: string, obj2: string) {
+    obj1 = JSON.parse(obj1);
+    obj2 = JSON.parse(obj2);
+    const entries1 = Object.entries(obj1).map(([key, value]) => [
+      key,
+      String(value),
+    ]);
+    const entries2 = Object.entries(obj2).map(([key, value]) => [
+      key,
+      String(value),
+    ]);
+    entries1.sort(([key1], [key2]) => key1.localeCompare(key2));
+    entries2.sort(([key1], [key2]) => key1.localeCompare(key2));
+
+    return JSON.stringify(entries1) === JSON.stringify(entries2);
+  }
+
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const previousValueRef = useRef(value);
+  console.log(value);
+  useEffect(() => {
+    if (compareObjects(previousValueRef.current, value)) {
+      return;
+    }
+
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+      previousValueRef.current = value;
+    }, delay);
+
+    // Cleanup the timeout if the value changes or the component unmounts
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;

From 9102b2082358af25f051e2b2210bf6a156f1d2c4 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 26 Nov 2024 13:49:59 +0530
Subject: [PATCH 38/54] cleanup

---
 package-lock.json                             | 47 +++++++----
 package.json                                  |  1 -
 public/locale/en.json                         |  4 +-
 .../Common/SearchByMultipleFields.tsx         | 84 ++++++++-----------
 src/components/Form/FormFields/FormField.tsx  |  2 +-
 src/components/Patient/ManagePatients.tsx     |  9 +-
 src/hooks/useDebounce.ts                      | 50 -----------
 7 files changed, 80 insertions(+), 117 deletions(-)
 delete mode 100644 src/hooks/useDebounce.ts

diff --git a/package-lock.json b/package-lock.json
index a02ef6573e8..62be47f6bdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,7 +61,6 @@
         "react-webcam": "^7.2.0",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
-        "use-debounce": "^10.0.4",
         "use-keyboard-shortcut": "^1.1.6",
         "xlsx": "^0.18.5"
       },
@@ -120,6 +119,30 @@
         "node": ">=22.11.0"
       }
     },
+    "apps/care_abdm_fe": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependencies": {
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+      }
+    },
+    "apps/care_hcx_fe": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependencies": {
+        "react": "18.3.1",
+        "react-dom": "18.3.1"
+      }
+    },
     "apps/care_livekit_fe": {
       "name": "care-livekit",
       "version": "0.0.1",
@@ -7238,6 +7261,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/care_abdm_fe": {
+      "resolved": "apps/care_abdm_fe",
+      "link": true
+    },
+    "node_modules/care_hcx_fe": {
+      "resolved": "apps/care_hcx_fe",
+      "link": true
+    },
     "node_modules/caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -19257,18 +19288,6 @@
         }
       }
     },
-    "node_modules/use-debounce": {
-      "version": "10.0.4",
-      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.4.tgz",
-      "integrity": "sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 16.0.0"
-      },
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/use-keyboard-shortcut": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/use-keyboard-shortcut/-/use-keyboard-shortcut-1.1.6.tgz",
@@ -21367,4 +21386,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 052b02b5b0d..2b00fe56e6a 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,6 @@
     "react-webcam": "^7.2.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "use-debounce": "^10.0.4",
     "use-keyboard-shortcut": "^1.1.6",
     "xlsx": "^0.18.5"
   },
diff --git a/public/locale/en.json b/public/locale/en.json
index ed233b968fa..e830ecef706 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -627,7 +627,7 @@
   "email_discharge_summary_description": "Enter your valid email address to receive the discharge summary",
   "email_success": "We will be sending an email shortly. Please check your inbox.",
   "emergency": "Emergency",
-  "emergency_phone_number": "emergency contact phone number",
+  "emergency_phone_number": "Emergency Phone Number",
   "empty_date_time": "--:-- --; --/--/----",
   "encounter_date_field_label__A": "Date & Time of Admission to the Facility",
   "encounter_date_field_label__DC": "Date & Time of Domiciliary Care commencement",
@@ -992,7 +992,7 @@
   "patient_details_incomplete": "Patient Details Incomplete",
   "patient_face": "Patient Face",
   "patient_name": "Patient name",
-  "patient_no": "UHID",
+  "patient_no": "OP/IP Number",
   "patient_notes_thread__Doctors": "Doctor's Discussions",
   "patient_notes_thread__Nurses": "Nurse's Discussions",
   "patient_phone_number": "Patient Phone Number",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index b14aa5f96be..49ad901a6dd 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -82,9 +82,23 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     }
   }, [clearSearch]);
 
+  const handleOptionChange = useCallback(
+    (option: SearchOption) => {
+      setSelectedOption(option);
+      setSearchValue(option.value || "");
+      setFocusedIndex(options.findIndex((op) => op.key === option.key));
+      setOpen(false);
+      inputRef.current?.focus();
+      setError(false);
+      onSearch(option.key, option.value);
+    },
+    [onSearch],
+  );
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === "/" && document.activeElement !== inputRef.current) {
+        console.log(inputRef.current !== document.activeElement);
         e.preventDefault();
         setOpen(true);
       } else if (e.key === "ArrowDown") {
@@ -105,9 +119,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
       }
 
       options.forEach((option) => {
-        if (e.key === "/") {
-          setOpen(true);
-        } else if (
+        if (
           e.key.toLocaleLowerCase() ===
             option.shortcutKey.toLocaleLowerCase() &&
           open
@@ -120,24 +132,13 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [focusedIndex, open]);
+  }, [focusedIndex, open, handleOptionChange, options]);
+
   useEffect(() => {
     if (inputRef.current) {
       inputRef.current.focus();
     }
   }, [selectedOption]);
-  const handleOptionChange = useCallback(
-    (option: SearchOption) => {
-      setSelectedOption(option);
-      setSearchValue(option.value || "");
-      setFocusedIndex(options.findIndex((op) => op.key === option.key));
-      setOpen(false);
-      inputRef.current?.focus();
-      setError(false);
-      onSearch(option.key, option.value);
-    },
-    [onSearch],
-  );
 
   const handleSearchChange = useCallback(
     (value: string) => {
@@ -147,27 +148,12 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     [selectedOption, onSearch],
   );
 
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Escape") {
-        setSearchValue("");
-        onSearch(selectedOption.key, "");
-      }
-      if (e.key === "/") {
-        e.preventDefault();
-        setOpen(true);
-      }
-    },
-    [selectedOption, onSearch],
-  );
-
   const renderSearchInput = useMemo(() => {
     const commonProps = {
       ref: inputRef,
       value: searchValue,
       onChange: (e: EventType) =>
         handleSearchChange(e.target ? e.target.value : e.value),
-      onKeyDown: handleKeyDown,
       className: cn(
         "flex-grow border-none shadow-none focus-visible:ring-0 h-10",
         inputClassName,
@@ -196,30 +182,34 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           />
         );
     }
-  }, [
-    selectedOption,
-    searchValue,
-    handleSearchChange,
-    handleKeyDown,
-    t,
-    inputClassName,
-  ]);
+  }, [selectedOption, searchValue, handleSearchChange, t, inputClassName]);
 
   return (
-    <div className={className}>
-      <div className="flex items-center rounded-t-lg border-x border-t border-gray-200 bg-white">
+    <div
+      className={cn(
+        "border rounded-lg border-gray-200 bg-white shadow",
+        className,
+      )}
+    >
+      <div
+        role="searchbox"
+        aria-expanded={open}
+        aria-controls="search-options"
+        aria-haspopup="listbox"
+        className="flex items-center rounded-t-lg"
+      >
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
             <Button
               variant="ghost"
-              className="focus:ring-0"
+              className="focus:ring-0 px-2 ml-1"
               size="sm"
               onClick={() => setOpen(true)}
             >
-              <CareIcon icon="l-search" className="mr-2 h-4 w-4" />/
+              <CareIcon icon="l-search" className="mr-2 text-base" />/
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-[200px] p-0">
+          <PopoverContent className="w-[250px] p-0">
             <Command>
               <CommandList>
                 <CommandGroup>
@@ -247,11 +237,11 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         {renderSearchInput}
       </div>
       {error && (
-        <div className="error-text ml-3 bg-white text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">
+        <div className="error-text px-2 mb-1 text-xs font-medium tracking-wide text-danger-500 transition-opacity duration-300">
           {t("invalid_phone_number")}
         </div>
       )}
-      <div className="flex flex-wrap gap-2 rounded-b-lg border-x border-b border-gray-200 bg-gray-50 p-2 shadow">
+      <div className="flex flex-wrap gap-2 rounded-b-lg bg-gray-50 border-t border-t-gray-100 p-2">
         {options.map((option) => (
           <Button
             key={option.key}
@@ -260,7 +250,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             size="xs"
             className={cn(
               selectedOption.key === option.key
-                ? "bg-primary-100 text-primary-700"
+                ? "bg-primary-100 text-primary-700 hover:bg-primary-200 border-primary-400"
                 : "bg-gray-100 text-gray-700 hover:bg-gray-200",
               buttonClassName,
             )}
diff --git a/src/components/Form/FormFields/FormField.tsx b/src/components/Form/FormFields/FormField.tsx
index 90a9025fc15..7f9c2699d64 100644
--- a/src/components/Form/FormFields/FormField.tsx
+++ b/src/components/Form/FormFields/FormField.tsx
@@ -68,7 +68,7 @@ const FormField = ({
           </FieldLabel>
         )}
         {field?.labelSuffix && (
-          <span className="mb-2 text-xs">{field.labelSuffix}</span>
+          <span className="mb-2 text-xs">{field?.labelSuffix}</span>
         )}
       </div>
       <div className={field?.className}>{props.children}</div>
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 8ab0a9f08a5..564186302f2 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -13,7 +13,6 @@ import SortDropdownMenu from "@/components/Common/SortDropdown";
 import Tabs from "@/components/Common/Tabs";
 
 import useAuthUser from "@/hooks/useAuthUser";
-import useDebounce from "@/hooks/useDebounce";
 import useFilters from "@/hooks/useFilters";
 
 import {
@@ -188,6 +187,12 @@ export const PatientManager = () => {
     diagnoses_differential: qParams.diagnoses_differential || undefined,
     review_missed: qParams.review_missed || undefined,
   };
+  const [debouncedSearchParams, setDebouncedSearchParams] = useState(params);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setDebouncedSearchParams(params), 1000);
+    return () => clearTimeout(timeout);
+  }, [params]);
 
   useEffect(() => {
     const ids: string[] = [];
@@ -293,7 +298,7 @@ export const PatientManager = () => {
   };
 
   const { loading: isLoading, data } = useQuery(routes.patientList, {
-    query: JSON.parse(useDebounce(JSON.stringify(params), 1000)),
+    query: debouncedSearchParams,
   });
 
   const getTheCategoryFromId = () => {
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
deleted file mode 100644
index e675d9e335b..00000000000
--- a/src/hooks/useDebounce.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-/**
- * Custom hook to debounce a value.
- *
- * @param {any} value - The value to debounce.
- * @param {number} delay - The debounce delay in milliseconds.
- * @returns {any} - The debounced value.
- */
-const useDebounce = (value: string, delay: number) => {
-  function compareObjects(obj1: string, obj2: string) {
-    obj1 = JSON.parse(obj1);
-    obj2 = JSON.parse(obj2);
-    const entries1 = Object.entries(obj1).map(([key, value]) => [
-      key,
-      String(value),
-    ]);
-    const entries2 = Object.entries(obj2).map(([key, value]) => [
-      key,
-      String(value),
-    ]);
-    entries1.sort(([key1], [key2]) => key1.localeCompare(key2));
-    entries2.sort(([key1], [key2]) => key1.localeCompare(key2));
-
-    return JSON.stringify(entries1) === JSON.stringify(entries2);
-  }
-
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  const previousValueRef = useRef(value);
-  console.log(value);
-  useEffect(() => {
-    if (compareObjects(previousValueRef.current, value)) {
-      return;
-    }
-
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-      previousValueRef.current = value;
-    }, delay);
-
-    // Cleanup the timeout if the value changes or the component unmounts
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-};
-
-export default useDebounce;

From a9746cc5abbfc0a4959ca94e7c3850ef2164858b Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 26 Nov 2024 13:59:49 +0530
Subject: [PATCH 39/54] minor fixes

---
 public/locale/en.json                     |  4 ++--
 src/components/Common/Page.tsx            |  6 +++---
 src/components/Patient/ManagePatients.tsx | 11 ++++++-----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index e830ecef706..ccf0022882f 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -992,7 +992,7 @@
   "patient_details_incomplete": "Patient Details Incomplete",
   "patient_face": "Patient Face",
   "patient_name": "Patient name",
-  "patient_no": "OP/IP Number",
+  "patient_no": "OP/IP No",
   "patient_notes_thread__Doctors": "Doctor's Discussions",
   "patient_notes_thread__Nurses": "Nurse's Discussions",
   "patient_phone_number": "Patient Phone Number",
@@ -1143,8 +1143,8 @@
   "scan_asset_qr": "Scan Asset QR!",
   "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
   "search_by_patient_name": "Search by Patient Name",
+  "search_by_patient_no": "Search by Patient Number",
   "search_by_phone_number": "Search by Phone Number",
-  "search_by_uhid": "Search by UHID",
   "search_by_username": "Search by username",
   "search_for_facility": "Search for Facility",
   "search_icd11_placeholder": "Search for ICD-11 Diagnoses",
diff --git a/src/components/Common/Page.tsx b/src/components/Common/Page.tsx
index 5d542a4fcbc..b7617233e7f 100644
--- a/src/components/Common/Page.tsx
+++ b/src/components/Common/Page.tsx
@@ -1,10 +1,10 @@
 import { RefObject, useContext, useEffect } from "react";
 
+import { cn } from "@/lib/utils";
+
 import PageTitle, { PageTitleProps } from "@/components/Common/PageTitle";
 import { SidebarShrinkContext } from "@/components/Common/Sidebar/Sidebar";
 
-import { classNames } from "@/Utils/utils";
-
 interface PageProps extends PageTitleProps {
   children: React.ReactNode | React.ReactNode[];
   options?: React.ReactNode | React.ReactNode[];
@@ -38,7 +38,7 @@ export default function Page(props: PageProps) {
   }
 
   return (
-    <div className={classNames(padding, props.className)} ref={props.ref}>
+    <div className={cn(padding, props.className)} ref={props.ref}>
       <div className="flex flex-col justify-between gap-2 md:flex-row md:items-center md:gap-6">
         <PageTitle
           changePageMetadata={props.changePageMetadata}
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 564186302f2..82ce219d4ff 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -773,9 +773,9 @@ export const PatientManager = () => {
     },
     {
       key: "patient_no",
-      label: "UHID",
+      label: "IP/OP No",
       type: "text" as const,
-      placeholder: "search_by_uhid",
+      placeholder: "search_by_patient_no",
       value: qParams.patient_no || "",
       shortcutKey: "u",
     },
@@ -818,6 +818,7 @@ export const PatientManager = () => {
       title={t("patients")}
       hideBack={true}
       breadcrumbs={false}
+      className="px-4 md:px-6"
       options={
         <div className="flex w-full flex-col items-center justify-between lg:flex-row">
           <div className="mb-2 flex w-full flex-col items-center lg:mb-0 lg:w-fit lg:flex-row lg:gap-5">
@@ -996,7 +997,7 @@ export const PatientManager = () => {
         }}
       />
 
-      <div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 px-2 sm:grid-cols-4 md:px-0">
+      <div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 sm:grid-cols-4 md:px-0">
         <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
           <div className="flex-1" id="total-patientcount">
             <CountBlock
@@ -1004,12 +1005,12 @@ export const PatientManager = () => {
               count={data?.count || 0}
               loading={isLoading}
               icon="l-user-injured"
-              className="pb-12"
+              className="mb-4"
             />
           </div>
         </div>
         <div className="col-span-3 w-full">
-          <div className="mt-2">
+          <div className="mb-4">
             <SearchByMultipleFields
               options={searchOptions}
               onSearch={handleSearch}

From 53a6c35d236fb149ff178b07f6c640d2c4d5774e Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 26 Nov 2024 14:42:42 +0530
Subject: [PATCH 40/54] Fixed keyboard shortcutes

---
 .../Common/SearchByMultipleFields.tsx         | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 49ad901a6dd..5586603f3ae 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -97,37 +97,42 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "/" && document.activeElement !== inputRef.current) {
-        console.log(inputRef.current !== document.activeElement);
+      if (
+        e.key === "/" &&
+        !(document.activeElement instanceof HTMLInputElement)
+      ) {
         e.preventDefault();
         setOpen(true);
-      } else if (e.key === "ArrowDown") {
-        setFocusedIndex((prevIndex) =>
-          prevIndex === options.length - 1 ? 0 : prevIndex + 1,
-        );
-      } else if (e.key === "ArrowUp") {
-        setFocusedIndex((prevIndex) =>
-          prevIndex === 0 ? options.length - 1 : prevIndex - 1,
-        );
-      } else if (e.key === "Enter") {
-        handleOptionChange(options[focusedIndex]);
-      }
-
-      if (e.key === "Escape") {
-        inputRef.current?.focus();
-        setOpen(false);
       }
+      if (open) {
+        if (e.key === "ArrowDown") {
+          setFocusedIndex((prevIndex) =>
+            prevIndex === options.length - 1 ? 0 : prevIndex + 1,
+          );
+        } else if (e.key === "ArrowUp") {
+          setFocusedIndex((prevIndex) =>
+            prevIndex === 0 ? options.length - 1 : prevIndex - 1,
+          );
+        } else if (e.key === "Enter") {
+          handleOptionChange(options[focusedIndex]);
+        }
 
-      options.forEach((option) => {
-        if (
-          e.key.toLocaleLowerCase() ===
-            option.shortcutKey.toLocaleLowerCase() &&
-          open
-        ) {
-          e.preventDefault();
-          handleOptionChange(option);
+        if (e.key === "Escape") {
+          inputRef.current?.focus();
+          setOpen(false);
         }
-      });
+
+        options.forEach((option) => {
+          if (
+            e.key.toLocaleLowerCase() ===
+              option.shortcutKey.toLocaleLowerCase() &&
+            open
+          ) {
+            e.preventDefault();
+            handleOptionChange(option);
+          }
+        });
+      }
     };
 
     document.addEventListener("keydown", handleKeyDown);

From c8e2ec0c105846afb8d074ceec5b668bf3d49b8e Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 27 Nov 2024 22:21:48 +0530
Subject: [PATCH 41/54] fixing tests

---
 cypress/pageobject/Patient/PatientCreation.ts    | 8 ++++----
 src/components/Common/SearchByMultipleFields.tsx | 5 +++++
 src/components/Patient/ManagePatients.tsx        | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/cypress/pageobject/Patient/PatientCreation.ts b/cypress/pageobject/Patient/PatientCreation.ts
index 8e903ba91ee..febf31b33b5 100644
--- a/cypress/pageobject/Patient/PatientCreation.ts
+++ b/cypress/pageobject/Patient/PatientCreation.ts
@@ -11,8 +11,8 @@ export class PatientPage {
   }
 
   visitPatient(patientName: string) {
-    cy.get("button").contains("Name").click();
-    cy.get("#name").type(patientName); // Type the patient name
+    cy.get('[data-test-id="patient-search__name"]').click();
+    cy.get("#patient-search").click().type(patientName); // Type the patient name
     cy.intercept("GET", "**/api/v1/consultation/**").as("getPatient");
     cy.get("#patient-name-list").contains(patientName).click();
     cy.wait(2000);
@@ -67,8 +67,8 @@ export class PatientPage {
   }
 
   typePatientNameList(patientName: string) {
-    cy.get("button").contains("Name").click();
-    cy.get("#name").click().type(patientName);
+    cy.get('[data-test-id="patient-search__name"]').click();
+    cy.get("#patient-search").click().type(patientName);
   }
 
   typePatientAddress(address: string) {
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index 5586603f3ae..dae8d0d3109 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -39,6 +39,7 @@ interface SearchOption {
 }
 
 interface SearchByMultipleFieldsProps {
+  id: string;
   options: SearchOption[];
   onSearch: (key: string, value: string) => void;
   initialOption?: SearchOption;
@@ -54,6 +55,7 @@ type EventType = {
 };
 
 const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
+  id,
   options,
   onSearch,
   initialOption,
@@ -169,6 +171,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
       case "phone":
         return (
           <PhoneNumberFormField
+            id={id}
             name={selectedOption.key}
             placeholder={t(selectedOption.placeholder)}
             types={["mobile", "landline"]}
@@ -181,6 +184,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
       default:
         return (
           <Input
+            id={id}
             type="text"
             placeholder={t(selectedOption.placeholder)}
             {...commonProps}
@@ -253,6 +257,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             onClick={() => handleOptionChange(option)}
             variant="outline"
             size="xs"
+            data-test-id={id + "__" + option.key}
             className={cn(
               selectedOption.key === option.key
                 ? "bg-primary-100 text-primary-700 hover:bg-primary-200 border-primary-400"
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 72cfeb07925..4dafac4c140 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -1018,6 +1018,7 @@ export const PatientManager = () => {
         <div className="col-span-3 w-full">
           <div className="mb-4">
             <SearchByMultipleFields
+              id="patient-search"
               options={searchOptions}
               onSearch={handleSearch}
               clearSearch={clearSearch}

From 5a5ff272cd44a5063df5685fe1e774710f4c097d Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 27 Nov 2024 22:49:47 +0530
Subject: [PATCH 42/54] fix params

---
 src/components/Patient/ManagePatients.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 4dafac4c140..dc8ddef2449 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -193,12 +193,7 @@ export const PatientManager = () => {
     const timeout = setTimeout(() => setDebouncedSearchParams(params), 1000);
     console.log("this");
     return () => clearTimeout(timeout);
-  }, [
-    params.name,
-    params.phone_number,
-    params.patient_no,
-    params.emergency_phone_number,
-  ]);
+  }, [JSON.stringify(params)]);
 
   useEffect(() => {
     const ids: string[] = [];

From a98d66770951d451b9ea4bb8351478192ef4378f Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 27 Nov 2024 22:50:43 +0530
Subject: [PATCH 43/54] remove print

---
 src/components/Patient/ManagePatients.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index dc8ddef2449..3e5b836f2c9 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -191,7 +191,6 @@ export const PatientManager = () => {
 
   useEffect(() => {
     const timeout = setTimeout(() => setDebouncedSearchParams(params), 1000);
-    console.log("this");
     return () => clearTimeout(timeout);
   }, [JSON.stringify(params)]);
 

From 1f43e3adabc659785b85dd376cfc974b668219b4 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 27 Nov 2024 23:22:53 +0530
Subject: [PATCH 44/54] testing tests

---
 cypress/e2e/patient_spec/PatientHomepage.cy.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/patient_spec/PatientHomepage.cy.ts b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
index e2c32098f1c..ebacc98c345 100644
--- a/cypress/e2e/patient_spec/PatientHomepage.cy.ts
+++ b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
@@ -157,7 +157,7 @@ describe("Patient Homepage present functionalities", () => {
     patientHome.verifyPatientExportRequest();
   });
 
-  it("Verify the functionality of the patient tab pagination", () => {
+  it("Test Pagination", () => {
     let firstPatientPageOne: string;
     cy.get('[data-cy="patient"]')
       .first()
@@ -165,6 +165,7 @@ describe("Patient Homepage present functionalities", () => {
       .then((patientOne: string) => {
         firstPatientPageOne = patientOne.trim();
         pageNavigation.navigateToNextPage();
+        cy.wait(2000);
         pageNavigation.verifyCurrentPageNumber(2);
         cy.get('[data-cy="patient"]')
           .first()

From bf74945ea173b6b65ef55d713f36d80a42e233d4 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 27 Nov 2024 23:53:53 +0530
Subject: [PATCH 45/54] coderabbit suggestions

---
 cypress/e2e/patient_spec/PatientHomepage.cy.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/patient_spec/PatientHomepage.cy.ts b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
index ebacc98c345..8441cad4084 100644
--- a/cypress/e2e/patient_spec/PatientHomepage.cy.ts
+++ b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
@@ -157,7 +157,7 @@ describe("Patient Homepage present functionalities", () => {
     patientHome.verifyPatientExportRequest();
   });
 
-  it("Test Pagination", () => {
+  it("Test Pagination on Patient List Page", () => {
     let firstPatientPageOne: string;
     cy.get('[data-cy="patient"]')
       .first()
@@ -165,7 +165,8 @@ describe("Patient Homepage present functionalities", () => {
       .then((patientOne: string) => {
         firstPatientPageOne = patientOne.trim();
         pageNavigation.navigateToNextPage();
-        cy.wait(2000);
+        cy.intercept("GET", "**/api/patient/?page=2").as("getPage2");
+        cy.wait("@getPage2");
         pageNavigation.verifyCurrentPageNumber(2);
         cy.get('[data-cy="patient"]')
           .first()

From 7e9a5d936e4858c828bacb0e6fde2111f9c3471d Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Thu, 28 Nov 2024 00:11:49 +0530
Subject: [PATCH 46/54] : )

---
 cypress/e2e/patient_spec/PatientHomepage.cy.ts | 2 --
 cypress/pageobject/utils/paginationHelpers.ts  | 2 ++
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/patient_spec/PatientHomepage.cy.ts b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
index 8441cad4084..9613e798404 100644
--- a/cypress/e2e/patient_spec/PatientHomepage.cy.ts
+++ b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
@@ -165,8 +165,6 @@ describe("Patient Homepage present functionalities", () => {
       .then((patientOne: string) => {
         firstPatientPageOne = patientOne.trim();
         pageNavigation.navigateToNextPage();
-        cy.intercept("GET", "**/api/patient/?page=2").as("getPage2");
-        cy.wait("@getPage2");
         pageNavigation.verifyCurrentPageNumber(2);
         cy.get('[data-cy="patient"]')
           .first()
diff --git a/cypress/pageobject/utils/paginationHelpers.ts b/cypress/pageobject/utils/paginationHelpers.ts
index edbabec5523..9c80dfe053a 100644
--- a/cypress/pageobject/utils/paginationHelpers.ts
+++ b/cypress/pageobject/utils/paginationHelpers.ts
@@ -1,6 +1,8 @@
 export const pageNavigation = {
   navigateToNextPage() {
+    cy.intercept("GET", "**/api/patient/?page=2").as("getPage2");
     cy.get("button#next-pages").click();
+    cy.wait("@getPage2");
   },
 
   verifyCurrentPageNumber(pageNumber: number) {

From 1fb9d4de132ae14f6cb9803b27d8b2d1200706bb Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Thu, 28 Nov 2024 00:14:18 +0530
Subject: [PATCH 47/54] fix api

---
 cypress/pageobject/utils/paginationHelpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/pageobject/utils/paginationHelpers.ts b/cypress/pageobject/utils/paginationHelpers.ts
index 9c80dfe053a..e0ab555bc3d 100644
--- a/cypress/pageobject/utils/paginationHelpers.ts
+++ b/cypress/pageobject/utils/paginationHelpers.ts
@@ -1,7 +1,7 @@
 export const pageNavigation = {
   navigateToNextPage() {
-    cy.intercept("GET", "**/api/patient/?page=2").as("getPage2");
     cy.get("button#next-pages").click();
+    cy.intercept("GET", "**/v1/patient/?page=2").as("getPage2");
     cy.wait("@getPage2");
   },
 

From 690a6a3a9c9b6e7b3afb0ed99df33dc39c0db47c Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Thu, 28 Nov 2024 00:26:12 +0530
Subject: [PATCH 48/54] Reverting

---
 cypress/e2e/patient_spec/PatientHomepage.cy.ts | 1 +
 cypress/pageobject/utils/paginationHelpers.ts  | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/cypress/e2e/patient_spec/PatientHomepage.cy.ts b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
index 9613e798404..ac3e3f311ca 100644
--- a/cypress/e2e/patient_spec/PatientHomepage.cy.ts
+++ b/cypress/e2e/patient_spec/PatientHomepage.cy.ts
@@ -165,6 +165,7 @@ describe("Patient Homepage present functionalities", () => {
       .then((patientOne: string) => {
         firstPatientPageOne = patientOne.trim();
         pageNavigation.navigateToNextPage();
+        cy.wait(2000);
         pageNavigation.verifyCurrentPageNumber(2);
         cy.get('[data-cy="patient"]')
           .first()
diff --git a/cypress/pageobject/utils/paginationHelpers.ts b/cypress/pageobject/utils/paginationHelpers.ts
index e0ab555bc3d..edbabec5523 100644
--- a/cypress/pageobject/utils/paginationHelpers.ts
+++ b/cypress/pageobject/utils/paginationHelpers.ts
@@ -1,8 +1,6 @@
 export const pageNavigation = {
   navigateToNextPage() {
     cy.get("button#next-pages").click();
-    cy.intercept("GET", "**/v1/patient/?page=2").as("getPage2");
-    cy.wait("@getPage2");
   },
 
   verifyCurrentPageNumber(pageNumber: number) {

From 900327bc6cb38db30a798931741c1ab565d35eef Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Thu, 28 Nov 2024 11:47:41 +0530
Subject: [PATCH 49/54] revert scribe translations

---
 public/locale/en.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/locale/en.json b/public/locale/en.json
index d17a012a0b9..a48e2ad84e6 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1211,6 +1211,8 @@
   "save_and_continue": "Save and Continue",
   "save_investigation": "Save Investigation",
   "scan_asset_qr": "Scan Asset QR!",
+  "scribe__reviewing_field": "Reviewing field {{currentField}} / {{totalFields}}",
+  "scribe_error": "Could not autofill fields",
   "search_by_emergency_contact_phone_number": "Search by Emergency Contact Phone Number",
   "search_by_patient_name": "Search by Patient Name",
   "search_by_patient_no": "Search by Patient Number",

From 62d41fab926da30734c103cea1297989dd90310a Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 3 Dec 2024 14:28:30 +0530
Subject: [PATCH 50/54] added search bar in facility page and improved debounce

---
 public/locale/en.json                         |  1 +
 .../Common/SearchByMultipleFields.tsx         | 43 ++++++----
 src/components/Facility/FacilityList.tsx      | 84 +++++++++++--------
 src/components/Patient/ManagePatients.tsx     | 45 ++++------
 4 files changed, 93 insertions(+), 80 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index dfbf45e5156..4f912bf104e 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -700,6 +700,7 @@
   "facilities": "Facilities",
   "facility": "Facility",
   "facility_consent_requests_page_title": "Patient Consent List",
+  "facility_district_name": "Facility/District Name",
   "facility_name": "Facility Name",
   "facility_preference": "Facility preference",
   "facility_search_placeholder": "Search by Facility / District Name",
diff --git a/src/components/Common/SearchByMultipleFields.tsx b/src/components/Common/SearchByMultipleFields.tsx
index dae8d0d3109..12b2bbd61c9 100644
--- a/src/components/Common/SearchByMultipleFields.tsx
+++ b/src/components/Common/SearchByMultipleFields.tsx
@@ -42,7 +42,7 @@ interface SearchByMultipleFieldsProps {
   id: string;
   options: SearchOption[];
   onSearch: (key: string, value: string) => void;
-  initialOption?: SearchOption;
+  initialOptionIndex?: number;
   className?: string;
   inputClassName?: string;
   buttonClassName?: string;
@@ -58,17 +58,20 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   id,
   options,
   onSearch,
-  initialOption,
+  initialOptionIndex,
   className,
   inputClassName,
   buttonClassName,
   clearSearch,
 }) => {
   const { t } = useTranslation();
-  const [selectedOption, setSelectedOption] = useState<SearchOption>(
-    initialOption || options[0],
+  const [selectedOptionIndex, setSelectedOptionIndex] = useState(
+    initialOptionIndex || 0,
+  );
+  const selectedOption = options[selectedOptionIndex];
+  const [searchValue, setSearchValue] = useState(
+    options[selectedOptionIndex].value || "",
   );
-  const [searchValue, setSearchValue] = useState(selectedOption.value || "");
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const [focusedIndex, setFocusedIndex] = useState(0);
@@ -85,8 +88,9 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
   }, [clearSearch]);
 
   const handleOptionChange = useCallback(
-    (option: SearchOption) => {
-      setSelectedOption(option);
+    (index: number) => {
+      setSelectedOptionIndex(index);
+      const option = options[index];
       setSearchValue(option.value || "");
       setFocusedIndex(options.findIndex((op) => op.key === option.key));
       setOpen(false);
@@ -116,7 +120,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
             prevIndex === 0 ? options.length - 1 : prevIndex - 1,
           );
         } else if (e.key === "Enter") {
-          handleOptionChange(options[focusedIndex]);
+          handleOptionChange(focusedIndex);
         }
 
         if (e.key === "Escape") {
@@ -124,14 +128,14 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
           setOpen(false);
         }
 
-        options.forEach((option) => {
+        options.forEach((option, i) => {
           if (
             e.key.toLocaleLowerCase() ===
               option.shortcutKey.toLocaleLowerCase() &&
             open
           ) {
             e.preventDefault();
-            handleOptionChange(option);
+            handleOptionChange(i);
           }
         });
       }
@@ -145,12 +149,21 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
     if (inputRef.current) {
       inputRef.current.focus();
     }
-  }, [selectedOption]);
+  }, [selectedOptionIndex]);
+
+  useEffect(() => {
+    const timeout = setTimeout(
+      () =>
+        selectedOption.value !== searchValue &&
+        onSearch(selectedOption.key, searchValue),
+      1000,
+    );
+    return () => clearTimeout(timeout);
+  }, [searchValue]);
 
   const handleSearchChange = useCallback(
     (value: string) => {
       setSearchValue(value);
-      onSearch(selectedOption.key, value);
     },
     [selectedOption, onSearch],
   );
@@ -225,7 +238,7 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
                   {options.map((option, index) => (
                     <CommandItem
                       key={option.key}
-                      onSelect={() => handleOptionChange(option)}
+                      onSelect={() => handleOptionChange(index)}
                       className={cn({
                         "bg-gray-100": focusedIndex === index,
                         "hover:bg-secondary-100": true,
@@ -251,10 +264,10 @@ const SearchByMultipleFields: React.FC<SearchByMultipleFieldsProps> = ({
         </div>
       )}
       <div className="flex flex-wrap gap-2 rounded-b-lg bg-gray-50 border-t border-t-gray-100 p-2">
-        {options.map((option) => (
+        {options.map((option, i) => (
           <Button
             key={option.key}
-            onClick={() => handleOptionChange(option)}
+            onClick={() => handleOptionChange(i)}
             variant="outline"
             size="xs"
             data-test-id={id + "__" + option.key}
diff --git a/src/components/Facility/FacilityList.tsx b/src/components/Facility/FacilityList.tsx
index 6570bf7ea58..f3c9d8f1b6f 100644
--- a/src/components/Facility/FacilityList.tsx
+++ b/src/components/Facility/FacilityList.tsx
@@ -12,7 +12,6 @@ import Page from "@/components/Common/Page";
 import { FacilityCard } from "@/components/Facility/FacilityCard";
 import FacilityFilter from "@/components/Facility/FacilityFilter";
 import { FacilityModel } from "@/components/Facility/models";
-import SearchInput from "@/components/Form/SearchInput";
 
 import useAuthUser from "@/hooks/useAuthUser";
 import useFilters from "@/hooks/useFilters";
@@ -22,6 +21,8 @@ import { FACILITY_TYPES } from "@/common/constants";
 import routes from "@/Utils/request/api";
 import useQuery from "@/Utils/request/useQuery";
 
+import SearchByMultipleFields from "../Common/SearchByMultipleFields";
+
 export const FacilityList = () => {
   const {
     qParams,
@@ -30,6 +31,7 @@ export const FacilityList = () => {
     FilterBadges,
     advancedFilter,
     resultsPerPage,
+    clearSearch,
   } = useFilters({
     limit: 14,
     cacheBlacklist: ["search"],
@@ -153,49 +155,59 @@ export const FacilityList = () => {
       breadcrumbs={false}
       hideBack
       options={
-        <ExportMenu
-          exportItems={[
-            {
-              label: "Facilities",
-              route: routes.downloadFacility,
-              filePrefix: "facilities",
-            },
-            {
-              label: "Capacities",
-              route: routes.downloadFacilityCapacity,
-              filePrefix: "capacities",
-            },
-            {
-              label: "Doctors",
-              route: routes.downloadFacilityDoctors,
-              filePrefix: "doctors",
-            },
-            {
-              label: "Triages",
-              route: routes.downloadFacilityTriage,
-              filePrefix: "triages",
-            },
-          ]}
-        />
+        <div className="flex items-center gap-2 ">
+          <AdvancedFilterButton onClick={() => advancedFilter.setShow(true)} />
+          <ExportMenu
+            exportItems={[
+              {
+                label: "Facilities",
+                route: routes.downloadFacility,
+                filePrefix: "facilities",
+              },
+              {
+                label: "Capacities",
+                route: routes.downloadFacilityCapacity,
+                filePrefix: "capacities",
+              },
+              {
+                label: "Doctors",
+                route: routes.downloadFacilityDoctors,
+                filePrefix: "doctors",
+              },
+              {
+                label: "Triages",
+                route: routes.downloadFacilityTriage,
+                filePrefix: "triages",
+              },
+            ]}
+          />
+        </div>
       }
     >
-      <div className="mt-4 gap-2 lg:flex">
+      <div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
         <CountBlock
           text="Total Facilities"
           count={permittedData ? permittedData.count : 0}
           loading={isLoading}
           icon="l-hospital"
-          className="flex-1"
+          className=""
+        />
+        <SearchByMultipleFields
+          id="patient-search"
+          options={[
+            {
+              key: "facility_district_name",
+              label: "Facility or District Name",
+              type: "text" as const,
+              placeholder: "facility_search_placeholder",
+              value: qParams.search || "",
+              shortcutKey: "f",
+            },
+          ]}
+          className="w-full"
+          onSearch={(key, value) => updateQuery({ search: value })}
+          clearSearch={clearSearch}
         />
-        <div className="my-4 flex grow flex-col justify-between gap-2 sm:flex-row">
-          <SearchInput
-            name="search"
-            value={qParams.search}
-            onChange={(e) => updateQuery({ [e.name]: e.value })}
-            placeholder={t("facility_search_placeholder")}
-          />
-          <AdvancedFilterButton onClick={() => advancedFilter.setShow(true)} />
-        </div>
       </div>
 
       <FacilityFilter {...advancedFilter} key={window.location.search} />
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 3e5b836f2c9..05cade86f76 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -187,12 +187,6 @@ export const PatientManager = () => {
     diagnoses_differential: qParams.diagnoses_differential || undefined,
     review_missed: qParams.review_missed || undefined,
   };
-  const [debouncedSearchParams, setDebouncedSearchParams] = useState(params);
-
-  useEffect(() => {
-    const timeout = setTimeout(() => setDebouncedSearchParams(params), 1000);
-    return () => clearTimeout(timeout);
-  }, [JSON.stringify(params)]);
 
   useEffect(() => {
     const ids: string[] = [];
@@ -298,7 +292,7 @@ export const PatientManager = () => {
   };
 
   const { loading: isLoading, data } = useQuery(routes.patientList, {
-    query: debouncedSearchParams,
+    query: params,
   });
 
   const getTheCategoryFromId = () => {
@@ -997,28 +991,21 @@ export const PatientManager = () => {
         }}
       />
 
-      <div className="manualGrid my-4 mb-[-12px] mt-5 grid-cols-1 gap-3 sm:grid-cols-4 md:px-0">
-        <div className="mt-2 flex h-full flex-col gap-3 xl:flex-row">
-          <div className="flex-1" id="total-patientcount">
-            <CountBlock
-              text={t("total_patients")}
-              count={data?.count || 0}
-              loading={isLoading}
-              icon="l-user-injured"
-              className="mb-4"
-            />
-          </div>
-        </div>
-        <div className="col-span-3 w-full">
-          <div className="mb-4">
-            <SearchByMultipleFields
-              id="patient-search"
-              options={searchOptions}
-              onSearch={handleSearch}
-              clearSearch={clearSearch}
-            />
-          </div>
-        </div>
+      <div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
+        <CountBlock
+          text={t("total_patients")}
+          count={data?.count || 0}
+          loading={isLoading}
+          icon="l-user-injured"
+        />
+
+        <SearchByMultipleFields
+          id="patient-search"
+          options={searchOptions}
+          onSearch={handleSearch}
+          clearSearch={clearSearch}
+          className="w-full"
+        />
       </div>
       <div className="col-span-3 flex flex-wrap">
         <FilterBadges

From 429dc2743931ef995c16973a28707e2592abc845 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 3 Dec 2024 15:05:58 +0530
Subject: [PATCH 51/54] fix tests

---
 cypress/e2e/resource_spec/ResourcesHomepage.cy.ts | 2 +-
 cypress/pageobject/Facility/FacilityCreation.ts   | 3 +--
 cypress/pageobject/Facility/FacilityHome.ts       | 2 +-
 cypress/pageobject/Users/ManageUserPage.ts        | 3 +--
 src/components/Facility/FacilityList.tsx          | 2 +-
 5 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/resource_spec/ResourcesHomepage.cy.ts b/cypress/e2e/resource_spec/ResourcesHomepage.cy.ts
index 299d753d720..02818638b3a 100644
--- a/cypress/e2e/resource_spec/ResourcesHomepage.cy.ts
+++ b/cypress/e2e/resource_spec/ResourcesHomepage.cy.ts
@@ -40,7 +40,7 @@ describe("Resource Page", () => {
 
   it("Create a resource request", () => {
     cy.visit("/facility");
-    cy.get("#search").click().type("dummy facility 40");
+    cy.get("#facility-search").click().clear().type("dummy facility 40");
     cy.intercept("GET", "**/api/v1/facility/**").as("loadFacilities");
     cy.get("#facility-details").click();
     cy.wait("@loadFacilities").its("response.statusCode").should("eq", 200);
diff --git a/cypress/pageobject/Facility/FacilityCreation.ts b/cypress/pageobject/Facility/FacilityCreation.ts
index 0fddc3f9799..f3cf8268703 100644
--- a/cypress/pageobject/Facility/FacilityCreation.ts
+++ b/cypress/pageobject/Facility/FacilityCreation.ts
@@ -10,8 +10,7 @@ class FacilityPage {
   }
 
   typeFacilitySearch(facilityName: string) {
-    cy.get("#search").click().clear();
-    cy.get("#search").click().type(facilityName);
+    cy.get("#facility-search").click().clear().type(facilityName);
   }
 
   selectFacilityType(facility: string) {
diff --git a/cypress/pageobject/Facility/FacilityHome.ts b/cypress/pageobject/Facility/FacilityHome.ts
index 30f51052370..55dfd9aa87e 100644
--- a/cypress/pageobject/Facility/FacilityHome.ts
+++ b/cypress/pageobject/Facility/FacilityHome.ts
@@ -1,7 +1,7 @@
 class FacilityHome {
   // Selectors
   exportButton = "#export-button";
-  searchButton = "#search";
+  searchButton = "#facility-search";
   menuItem = "[role='menuitem']";
 
   // Operations
diff --git a/cypress/pageobject/Users/ManageUserPage.ts b/cypress/pageobject/Users/ManageUserPage.ts
index a3a6e72fbc3..ea54a0d4977 100644
--- a/cypress/pageobject/Users/ManageUserPage.ts
+++ b/cypress/pageobject/Users/ManageUserPage.ts
@@ -95,8 +95,7 @@ export class ManageUserPage {
   }
 
   typeFacilitySearch(facilityName: string) {
-    cy.get("#search").click().clear();
-    cy.get("#search").click().type(facilityName);
+    cy.get("#facility-search").click().clear().type(facilityName);
   }
 
   interceptFacilitySearchReq() {
diff --git a/src/components/Facility/FacilityList.tsx b/src/components/Facility/FacilityList.tsx
index f3c9d8f1b6f..a651efdcc15 100644
--- a/src/components/Facility/FacilityList.tsx
+++ b/src/components/Facility/FacilityList.tsx
@@ -193,7 +193,7 @@ export const FacilityList = () => {
           className=""
         />
         <SearchByMultipleFields
-          id="patient-search"
+          id="facility-search"
           options={[
             {
               key: "facility_district_name",

From 16d6df8169f219da19a7b867f23d7264c9b2cfd5 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 3 Dec 2024 15:20:03 +0530
Subject: [PATCH 52/54] ??

---
 cypress/e2e/users_spec/UsersCreation.cy.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/cypress/e2e/users_spec/UsersCreation.cy.ts b/cypress/e2e/users_spec/UsersCreation.cy.ts
index 96b953a3e17..5212165a915 100644
--- a/cypress/e2e/users_spec/UsersCreation.cy.ts
+++ b/cypress/e2e/users_spec/UsersCreation.cy.ts
@@ -1,7 +1,6 @@
 import ManageUserPage from "pageobject/Users/ManageUserPage";
 import UserProfilePage from "pageobject/Users/UserProfilePage";
 
-import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import { UserCreationPage } from "../../pageobject/Users/UserCreation";
@@ -18,7 +17,6 @@ describe("User Creation", () => {
   const manageUserPage = new ManageUserPage();
   const userCreationPage = new UserCreationPage();
   const facilityPage = new FacilityPage();
-  const assetSearchPage = new AssetSearchPage();
   const phoneNumber = generatePhoneNumber();
   const emergencyPhoneNumber = generateEmergencyPhoneNumber();
   const fillFacilityName = "Dummy Facility 40";
@@ -181,8 +179,7 @@ describe("User Creation", () => {
 
   it("view user redirection from facility page", () => {
     cy.visit("/facility");
-    assetSearchPage.typeSearchKeyword(fillFacilityName);
-    assetSearchPage.pressEnter();
+    cy.get("#facility-search").click().clear().type(fillFacilityName);
     facilityPage.verifyFacilityBadgeContent(fillFacilityName);
     facilityPage.visitAlreadyCreatedFacility();
     facilityPage.clickManageFacilityDropdown();

From 4b8c42e34bbb5118b4322b1fbb3683a3cc9a08a2 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 3 Dec 2024 15:37:59 +0530
Subject: [PATCH 53/54] tests

---
 cypress/e2e/assets_spec/AssetsManage.cy.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/cypress/e2e/assets_spec/AssetsManage.cy.ts b/cypress/e2e/assets_spec/AssetsManage.cy.ts
index 17ee99bdb62..9645cd22c30 100644
--- a/cypress/e2e/assets_spec/AssetsManage.cy.ts
+++ b/cypress/e2e/assets_spec/AssetsManage.cy.ts
@@ -95,8 +95,7 @@ describe("Asset", () => {
 
   it("Verify Facility Asset Page Redirection", () => {
     cy.visit("/facility");
-    assetSearchPage.typeSearchKeyword(fillFacilityName);
-    assetSearchPage.pressEnter();
+    cy.get("#facility-search").click().clear().type(fillFacilityName);
     facilityPage.verifyFacilityBadgeContent(fillFacilityName);
     facilityPage.visitAlreadyCreatedFacility();
     facilityPage.clickManageFacilityDropdown();

From e749d9af44c61dbea5e63b0383fdd8746e8daa1b Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 3 Dec 2024 15:53:57 +0530
Subject: [PATCH 54/54] fix ids

---
 src/components/Patient/ManagePatients.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index a76d61da881..b88844f9865 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -992,12 +992,14 @@ export const PatientManager = () => {
       />
 
       <div className="mt-4 gap-4 lg:gap-16 flex flex-col lg:flex-row lg:items-center">
-        <CountBlock
-          text={t("total_patients")}
-          count={data?.count || 0}
-          loading={isLoading}
-          icon="l-user-injured"
-        />
+        <div id="total-patientcount">
+          <CountBlock
+            text={t("total_patients")}
+            count={data?.count || 0}
+            loading={isLoading}
+            icon="l-user-injured"
+          />
+        </div>
 
         <SearchByMultipleFields
           id="patient-search"