From 7163bf8f15b816566f3cce9c5addc08b53191b32 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 6 Nov 2024 14:01:36 +0530
Subject: [PATCH 01/16] Show more monitors in CNS on very large displays

---
 package-lock.json                                 | 6 +++---
 src/components/Facility/CentralNursingStation.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a4276cb3d35..322d1daa986 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11704,9 +11704,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/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 860de7e897a..702bac156a3 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -212,7 +212,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="3xl:grid-cols-3 mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 min-[2080px]:grid-cols-3">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor

From 7974ef242c5a94c8424f6d5f0cfabf8de5bba6cb Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 6 Nov 2024 20:39:33 +0530
Subject: [PATCH 02/16] per page 9 monitors inserted for large display

---
 src/components/Facility/CentralNursingStation.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 6c5d1381064..8d27e6fc8c6 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -23,12 +23,11 @@ import { getVitalsMonitorSocketUrl } from "@/components/VitalsMonitor/utils";
 
 import useFilters from "@/hooks/useFilters";
 import useFullscreen from "@/hooks/useFullscreen";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 import routes from "@/Utils/request/api";
 import useQuery from "@/Utils/request/useQuery";
 
-const PER_PAGE_LIMIT = 6;
-
 const SORT_OPTIONS: SortOption[] = [
   { isAscending: true, value: "bed__name" },
   { isAscending: false, value: "-bed__name" },
@@ -41,11 +40,19 @@ interface Props {
 }
 
 export default function CentralNursingStation({ facilityId }: Props) {
+  let PER_PAGE_LIMIT;
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
+  const getDimension = useWindowDimensions();
+
+  if (getDimension.width > 2080) {
+    PER_PAGE_LIMIT = 9;
+  } else {
+    PER_PAGE_LIMIT = 6;
+  }
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {
@@ -216,7 +223,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="3xl:grid-cols-3 mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 min-[2080px]:grid-cols-3">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor

From 1801e16748114055a39d68bad6cf7d8f81c4cf0c Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 6 Nov 2024 20:58:39 +0530
Subject: [PATCH 03/16] added state per page 9 monitors inserted for large
 display

---
 .../Facility/CentralNursingStation.tsx           | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 8d27e6fc8c6..037389f381f 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -4,6 +4,7 @@ import {
   PopoverPanel,
   Transition,
 } from "@headlessui/react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -40,19 +41,22 @@ interface Props {
 }
 
 export default function CentralNursingStation({ facilityId }: Props) {
-  let PER_PAGE_LIMIT;
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
+  const [PER_PAGE_LIMIT, setPerPageLimit] = useState(6);
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
   const getDimension = useWindowDimensions();
 
-  if (getDimension.width > 2080) {
-    PER_PAGE_LIMIT = 9;
-  } else {
-    PER_PAGE_LIMIT = 6;
-  }
+  useEffect(() => {
+    if (getDimension.width > 2080) {
+      setPerPageLimit(9);
+    } else {
+      setPerPageLimit(6);
+    }
+  }, [getDimension]);
+
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {

From 65096723380a264a2bd8fc18cbe040d1e9a5610c Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Wed, 6 Nov 2024 23:48:56 +0530
Subject: [PATCH 04/16] added state per page 9 monitors inserted for large
 display

---
 src/components/Facility/CentralNursingStation.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 52f4c778ac3..037389f381f 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -4,6 +4,7 @@ import {
   PopoverPanel,
   Transition,
 } from "@headlessui/react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -23,12 +24,11 @@ import { getVitalsMonitorSocketUrl } from "@/components/VitalsMonitor/utils";
 
 import useFilters from "@/hooks/useFilters";
 import useFullscreen from "@/hooks/useFullscreen";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 import routes from "@/Utils/request/api";
 import useQuery from "@/Utils/request/useQuery";
 
-const PER_PAGE_LIMIT = 6;
-
 const SORT_OPTIONS: SortOption[] = [
   { isAscending: true, value: "bed__name" },
   { isAscending: false, value: "-bed__name" },
@@ -43,9 +43,20 @@ interface Props {
 export default function CentralNursingStation({ facilityId }: Props) {
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
+  const [PER_PAGE_LIMIT, setPerPageLimit] = useState(6);
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
+  const getDimension = useWindowDimensions();
+
+  useEffect(() => {
+    if (getDimension.width > 2080) {
+      setPerPageLimit(9);
+    } else {
+      setPerPageLimit(6);
+    }
+  }, [getDimension]);
+
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {

From 2eb15fffc92522924e5d84804d3bcfdf88e775c3 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:02:26 +0530
Subject: [PATCH 05/16] added usebreakpoint hook

---
 .../Facility/CentralNursingStation.tsx        | 21 +++++++------------
 tailwind.config.js                            |  4 ++++
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 037389f381f..be0cdaea540 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -4,7 +4,6 @@ import {
   PopoverPanel,
   Transition,
 } from "@headlessui/react";
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -22,9 +21,9 @@ import HL7PatientVitalsMonitor from "@/components/VitalsMonitor/HL7PatientVitals
 import useVitalsAspectRatioConfig from "@/components/VitalsMonitor/useVitalsAspectRatioConfig";
 import { getVitalsMonitorSocketUrl } from "@/components/VitalsMonitor/utils";
 
+import useBreakpoints from "@/hooks/useBreakpoints";
 import useFilters from "@/hooks/useFilters";
 import useFullscreen from "@/hooks/useFullscreen";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 import routes from "@/Utils/request/api";
 import useQuery from "@/Utils/request/useQuery";
@@ -41,21 +40,17 @@ interface Props {
 }
 
 export default function CentralNursingStation({ facilityId }: Props) {
+  const breakpointValues = {
+    default: 6, // Default value if no breakpoints match
+    "3xl": 9, // Value for screens wider than 1920px
+  };
+  const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
-  const [PER_PAGE_LIMIT, setPerPageLimit] = useState(6);
+
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
-  const getDimension = useWindowDimensions();
-
-  useEffect(() => {
-    if (getDimension.width > 2080) {
-      setPerPageLimit(9);
-    } else {
-      setPerPageLimit(6);
-    }
-  }, [getDimension]);
 
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
@@ -227,7 +222,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 min-[2080px]:grid-cols-3">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 fourK:grid-cols-3">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor
diff --git a/tailwind.config.js b/tailwind.config.js
index 32b25642022..2fd80f050ca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,11 +15,15 @@ const secondary = {
 };
 
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   important: true,
   darkMode: ["class"],
   theme: {
     extend: {
+      screens: {
+        fourK: "130rem",
+      },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],
       },

From 89d424c7b2279a41092155048be7bb442106e3ea Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:16:30 +0530
Subject: [PATCH 06/16] added usebreakpoint hook

---
 src/components/Facility/CentralNursingStation.tsx | 2 +-
 src/hooks/useBreakpoints.ts                       | 3 ++-
 tailwind.config.js                                | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index be0cdaea540..f3fac14076b 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -42,7 +42,7 @@ interface Props {
 export default function CentralNursingStation({ facilityId }: Props) {
   const breakpointValues = {
     default: 6, // Default value if no breakpoints match
-    "3xl": 9, // Value for screens wider than 1920px
+    fourK: 9, // Value for screens wider than 2080px defined in useBrekpoint hook
   };
   const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();
diff --git a/src/hooks/useBreakpoints.ts b/src/hooks/useBreakpoints.ts
index bba811ab88e..514a7af6cec 100644
--- a/src/hooks/useBreakpoints.ts
+++ b/src/hooks/useBreakpoints.ts
@@ -1,6 +1,6 @@
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
-type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "fourK";
 
 // Ensure that the breakpoint widths are sorted in ascending order.
 const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
@@ -10,6 +10,7 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
   xl: 1280,
   "2xl": 1536,
   "3xl": 1920,
+  fourK: 2080,
 };
 
 /**
diff --git a/tailwind.config.js b/tailwind.config.js
index 2fd80f050ca..afe0ec2bdaf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,7 +22,7 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        fourK: "130rem",
+        fourK: "130rem", // rem is used insted of pixel
       },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],

From 7b16aa16a0c94281f15bac8a45cdf6e5acb553be Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:23:54 +0530
Subject: [PATCH 07/16] added usebreakpoint hook

---
 src/components/Facility/CentralNursingStation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index f3fac14076b..20aa7a7645b 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -47,7 +47,6 @@ export default function CentralNursingStation({ facilityId }: Props) {
   const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
-
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });

From 1e62a293dc0677981bf063d56472643d7f8ba56b Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 01:30:39 +0530
Subject: [PATCH 08/16] nothing

---
 src/components/Facility/CentralNursingStation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 20aa7a7645b..7039c642a97 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -64,7 +64,6 @@ export default function CentralNursingStation({ facilityId }: Props) {
         qParams.monitors_without_patient === "true" ? undefined : "true",
     },
   });
-
   const totalCount = query.data?.count ?? 0;
   const data = query.data?.results.map((obj) => ({
     patientAssetBed: obj,

From a0baac98a35a09d4770858548ea99dca6b1825fa Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 02:47:57 +0530
Subject: [PATCH 09/16] added usebreakpoint hook

---
 src/components/Facility/CentralNursingStation.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 5ab733bd1e7..241dfe6c5d0 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -41,13 +41,12 @@ interface Props {
 
 export default function CentralNursingStation({ facilityId }: Props) {
   const breakpointValues = {
-    default: 6, // Default value if no breakpoints match
-    fourK: 9, // Value for screens wider than 2080px defined in useBrekpoint hook
+    default: 6,
+    fourK: 9,
   };
   const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
-
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });

From 2459be96f586a071fce627ad4e441a2565d92acd Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 03:03:32 +0530
Subject: [PATCH 10/16] added usebreakpoint hook

---
 src/components/Facility/CentralNursingStation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 241dfe6c5d0..70c3e03e6c2 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -50,7 +50,6 @@ export default function CentralNursingStation({ facilityId }: Props) {
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
     limit: PER_PAGE_LIMIT,
   });
-
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {

From d986b2ef2709e29ed278b8a14f1a17fabc08118c Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 03:11:26 +0530
Subject: [PATCH 11/16] added usebreakpoint hook

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

diff --git a/package.json b/package.json
index a84fdb9ac13..19edbc31e3a 100644
--- a/package.json
+++ b/package.json
@@ -173,4 +173,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "npm@10.5.0"
-}
+}
\ No newline at end of file

From a7932ae826ca9ea2816d76b50172c98c501b2e96 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 03:15:56 +0530
Subject: [PATCH 12/16] added usebreakpoint hook

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index e46a726b69c..5307742be88 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20419,4 +20419,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file

From a5cc3009e4040f599e88858540c5afe32271bfd5 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 03:21:04 +0530
Subject: [PATCH 13/16] added usebrekpoint  hook instead of usestate

---
 src/components/Facility/CentralNursingStation.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 70c3e03e6c2..48513902ca9 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -68,7 +68,6 @@ export default function CentralNursingStation({ facilityId }: Props) {
     patientAssetBed: obj,
     socketUrl: getVitalsMonitorSocketUrl(obj.asset),
   }));
-
   const { config, hash } = useVitalsAspectRatioConfig({
     default: 6 / 11,
     sm: 17 / 11,

From b17bfa5b36488e8afdd15708b505639ae9f85f3f Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:13:33 +0530
Subject: [PATCH 14/16] increased column in 4k display

---
 src/components/Facility/CentralNursingStation.tsx |  5 +++--
 src/hooks/useBreakpoints.ts                       | 11 ++++++++++-
 tailwind.config.js                                |  3 ++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 48513902ca9..3705a443730 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -42,7 +42,8 @@ interface Props {
 export default function CentralNursingStation({ facilityId }: Props) {
   const breakpointValues = {
     default: 6,
-    fourK: 9,
+    largedisplay: 9,
+    fourK: 10,
   };
   const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();
@@ -218,7 +219,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 fourK:grid-cols-3">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 largedisplay:grid-cols-3 fourk:grid-cols-4">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor
diff --git a/src/hooks/useBreakpoints.ts b/src/hooks/useBreakpoints.ts
index 514a7af6cec..8ff02eb309e 100644
--- a/src/hooks/useBreakpoints.ts
+++ b/src/hooks/useBreakpoints.ts
@@ -1,6 +1,14 @@
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
-type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "fourK";
+type Breakpoints =
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "fourK"
+  | "largedisplay";
 
 // Ensure that the breakpoint widths are sorted in ascending order.
 const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
@@ -11,6 +19,7 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
   "2xl": 1536,
   "3xl": 1920,
   fourK: 2080,
+  largedisplay: 2800,
 };
 
 /**
diff --git a/tailwind.config.js b/tailwind.config.js
index afe0ec2bdaf..0746249a19c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -22,7 +22,8 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        fourK: "130rem", // rem is used insted of pixel
+        largedisplay: "130rem",
+        fourk: "175rem", // rem is used insted of pixel
       },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],

From 596b0da8466ed7909a1150dc3384e908f1dbbc58 Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 19:18:18 +0530
Subject: [PATCH 15/16] increased column in 4k display

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

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 3705a443730..ab7db9d7815 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -43,7 +43,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
   const breakpointValues = {
     default: 6,
     largedisplay: 9,
-    fourK: 10,
+    fourK: 12,
   };
   const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();

From fc9e129fb5919a450b46fa3da7c74b28f3124f2b Mon Sep 17 00:00:00 2001
From: eat_code_sleep <141677292+i0am0arunava@users.noreply.github.com>
Date: Thu, 7 Nov 2024 20:27:04 +0530
Subject: [PATCH 16/16] increased column in 4k display

---
 src/components/Facility/CentralNursingStation.tsx | 2 +-
 src/hooks/useBreakpoints.ts                       | 4 ++--
 tailwind.config.js                                | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index ab7db9d7815..c3af3b4b20e 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -219,7 +219,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 largedisplay:grid-cols-3 fourk:grid-cols-4">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 largedisplay:grid-cols-3 fourk:grid-cols-6">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor
diff --git a/src/hooks/useBreakpoints.ts b/src/hooks/useBreakpoints.ts
index 8ff02eb309e..547a10e2dff 100644
--- a/src/hooks/useBreakpoints.ts
+++ b/src/hooks/useBreakpoints.ts
@@ -18,8 +18,8 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
   xl: 1280,
   "2xl": 1536,
   "3xl": 1920,
-  fourK: 2080,
-  largedisplay: 2800,
+  largedisplay: 2080,
+  fourK: 3000,
 };
 
 /**
diff --git a/tailwind.config.js b/tailwind.config.js
index 0746249a19c..39d3664b543 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,7 +23,7 @@ module.exports = {
     extend: {
       screens: {
         largedisplay: "130rem",
-        fourk: "175rem", // rem is used insted of pixel
+        fourk: "187rem", // rem is used insted of pixel
       },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],