Merge branch 'fifth-issue' of https://github.com/hrit2773/care_fe int…

…o fifth-issue
ohcnetwork · Jul 13, 2024 · a7f6765 · a7f6765
2 parents ae5f4f3 + ae23c51
commit a7f6765
Show file tree

Hide file tree

Showing 29 changed files with 285 additions and 214 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "echarts-for-react": "^3.0.2",
     "eslint-mdx": "^3.1.5",
     "events": "^3.3.0",
-    "glob": "^10.3.15",
+    "glob": "^10.4.2",
     "hi-profiles": "^1.0.6",
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
@@ -83,7 +83,7 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dnd-scrolling": "^1.3.7",
+    "react-dnd-scrolling": "^1.3.8",
     "react-dom": "18.3.1",
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^13.0.1",

diff --git a/src/CAREUI/display/NetworkSignal.tsx b/src/CAREUI/display/NetworkSignal.tsx
@@ -26,7 +26,7 @@ export default function NetworkSignal({ strength, children }: Props) {
         strength === 3 && "text-primary-500",
       )}
     >
-      <div className="flex items-end gap-0.5 p-2">
+      <div className="flex items-end gap-0.5 p-1.5 md:p-2">
         {strength === undefined ? (
           <CareIcon
             icon="l-exclamation-triangle"
@@ -53,7 +53,7 @@ export default function NetworkSignal({ strength, children }: Props) {
         {!!strength && strength < 2 && (
           <CareIcon
             icon="l-exclamation-circle"
-            className="absolute left-0.5 top-0 animate-pulse text-sm text-danger-500"
+            className="absolute left-0.5 top-0.5 animate-pulse text-xs text-danger-500 md:top-0 md:text-sm"
           />
         )}
       </div>

diff --git a/src/Common/hooks/useFullscreen.ts b/src/Common/hooks/useFullscreen.ts
@@ -5,10 +5,7 @@ interface HTMLElementWithFullscreen extends HTMLElement {
   webkitExitFullscreen?: () => void;
 }
 
-export default function useFullscreen(): [
-  boolean,
-  (value: boolean, element?: HTMLElement) => void,
-] {
+export default function useFullscreen() {
   const [isFullscreen, _setIsFullscreen] = useState(
     !!document.fullscreenElement,
   );
@@ -39,12 +36,22 @@ export default function useFullscreen(): [
     else document.exitFullscreen();
   }
 
-  const setFullscreen = (value: boolean, element?: HTMLElement) => {
+  const setFullscreen = (
+    value: boolean,
+    element?: HTMLElement,
+    enterLandscape?: boolean,
+  ) => {
     const fullscreenElement = element ?? document.documentElement;
 
-    if (value) openFullscreen(fullscreenElement);
-    else exitFullscreen(fullscreenElement);
+    if (value) {
+      openFullscreen(fullscreenElement);
+      if (enterLandscape) {
+        (screen.orientation as any)?.lock?.("landscape");
+      }
+    } else {
+      exitFullscreen(fullscreenElement);
+    }
   };
 
-  return [isFullscreen, setFullscreen];
+  return [isFullscreen, setFullscreen] as const;
 }
diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -67,64 +67,17 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
       }
       show={show}
       onClose={onClose}
+      className="max-w-[500px]"
+      fixedWidth={false}
     >
       <div
         ref={printRef}
         id="section-to-print"
-        className="print flex items-center justify-around border-black p-4 print:w-full print:border"
+        className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
-        <>
-          <div className="flex flex-col items-center justify-evenly">
-            <div className="flex items-center justify-evenly gap-2 text-lg font-semibold">
-              {abha?.name ? (
-                <span> {abha?.name}</span>
-              ) : (
-                <>
-                  <span> {abha?.first_name}</span>
-                  <span> {abha?.middle_name} </span>
-                  <span> {abha?.last_name} </span>
-                </>
-              )}
-            </div>
-            <span className="font-bold">{abha?.abha_number}</span>
-            {abha?.health_id && (
-              <div className="flex items-center gap-1 font-bold">
-                <span>{abha.health_id.split("@")[0]}</span>
-                {/* <span className="text-gray-700 text-sm">@</span>
-                <span>{abha.health_id.split("@")[1] || "care"}</span> */}
-              </div>
-            )}
-            <div className="mt-2 flex flex-col">
-              {abha?.gender && (
-                <p className="text-sm text-gray-600">
-                  Gender:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.gender}
-                  </span>
-                </p>
-              )}
-              {abha?.date_of_birth && (
-                <p className="text-sm text-gray-600">
-                  DOB:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.date_of_birth}
-                  </span>
-                </p>
-              )}
-              {abha?.email && (
-                <p className="text-sm text-gray-600">
-                  Email:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.email}
-                  </span>
-                </p>
-              )}
-            </div>
-          </div>
-        </>
-        <>
+        <div className="flex-1 sm:aspect-square sm:h-40 sm:flex-auto">
           <QRCode
-            className="border border-black p-1"
+            className="h-full w-full border border-black p-1"
             value={JSON.stringify({
               hidn: abha?.abha_number,
               phr: abha?.health_id,
@@ -136,10 +89,32 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
               "dist name": abha?.district,
             })}
           />
-        </>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          {[
+            {
+              label: "Name",
+              value:
+                abha?.name ||
+                `${abha?.first_name} ${abha?.middle_name} ${abha?.last_name}`,
+            },
+            { label: "DOB", value: abha?.date_of_birth },
+            { label: "Gender", value: abha?.gender },
+            { label: "ABHA Number", value: abha?.abha_number },
+            { label: "ABHA ID", value: abha?.health_id?.split("@")[0] },
+            { label: "Email", value: abha?.email },
+          ].map((item, index) =>
+            item.value ? (
+              <div key={index}>
+                <div className="text-xs text-gray-700">{item.label}</div>
+                <div>{item.value}</div>
+              </div>
+            ) : null,
+          )}
+        </div>
       </div>
 
-      <div className="mt-4 flex flex-col text-sm text-gray-700">
+      <div className="mt-4 flex flex-col text-xs text-gray-700">
         {abha?.created_date && (
           <div className="flex items-center gap-1">
             <span className="">Created On: </span>

diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -67,10 +67,10 @@ export const CameraPresetDropdown = (
       <div className="relative flex-1">
         <Listbox.Button
           className={classNames(
-            "relative min-w-32 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-0.5 pr-8 text-left text-base transition-all duration-200 ease-in-out hover:bg-zinc-600 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700",
+            "relative min-w-32 max-w-40 overflow-hidden text-ellipsis whitespace-nowrap rounded-lg border-2 px-2 py-1 pr-8 text-left text-sm font-medium transition-all duration-200 ease-in-out hover:bg-zinc-600 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 md:py-0.5 md:text-base",
             selected
-              ? "border-white bg-zinc-100 font-bold text-black"
-              : "border-zinc-700 font-medium text-zinc-300",
+              ? "border-zinc-700 bg-zinc-700/50 text-white md:font-bold"
+              : "border-zinc-700  text-zinc-300",
           )}
         >
           <span className="block truncate">