redesigned createAsset modal and fixed css overflow issue

src/CAREUI/interactive/CreateItems.tsx

@@ -0,0 +1,95 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { classNames } from "../../Utils/utils";
+import { Fragment } from "react";
+import { Submit } from "../../Components/Common/components/ButtonV2";
+import { useTranslation } from "react-i18next";
+
+type DialogProps = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  show: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+  titleAction?: React.ReactNode;
+  fixedWidth?: boolean;
+  handleOk: () => void;
+  label: string;
+  disabled: boolean;
+};
+
+const CreateItems = (props: DialogProps) => {
+  const { t } = useTranslation();
+  const {
+    title,
+    description,
+    show,
+    onClose,
+    children,
+    className,
+    fixedWidth = true,
+    handleOk,
+    label,
+    disabled,
+  } = props;
+  return (
+    <div className="h-max">
+      <Transition appear show={show} as={Fragment}>
+        <Dialog as="div" className="relative z-30" onClose={onClose}>
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-all" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className={"flex min-h-fit justify-center p-4 text-center"}>
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel
+                  className={classNames(
+                    className,
+                    fixedWidth && "w-full max-w-md",
+                    "mb-12 mt-12 transform rounded-2xl bg-white p-3 text-left align-middle shadow-xl transition-all"
+                  )}
+                >
+                  <Dialog.Title
+                    as="h4"
+                    className="flex w-full flex-col text-lg font-medium leading-6 text-gray-900"
+                  >
+                    <div className="flex w-full items-center justify-between">
+                      <h4>{title}</h4>
+                      <Submit
+                        onClick={handleOk}
+                        label={t(label)}
+                        disabled={disabled}
+                      />
+                    </div>
+                    <p className="m-2 text-sm text-gray-600">{description}</p>
+                    {props.titleAction}
+                  </Dialog.Title>
+                  <div>{children}</div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default CreateItems;

src/Common/hooks/useBreakpoints.ts

@@ -1,6 +1,6 @@
 import useWindowDimensions from "./useWindowDimensions";
 
-type Breakpoints = "vs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type Breakpoints = "vs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4k";
 
 // Ensure that the breakpoint widths are sorted in ascending order.
 const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
@@ -11,6 +11,7 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
   xl: 1280,
   "2xl": 1536,
   "3xl": 1920,
+  "4k": 2560,
 };
 
 /**

src/Components/Facility/CentralNursingStation.tsx

@@ -19,8 +19,7 @@ import useVitalsAspectRatioConfig from "../VitalsMonitor/useVitalsAspectRatioCon
 import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import { getVitalsMonitorSocketUrl } from "../VitalsMonitor/utils";
-
-const PER_PAGE_LIMIT = 6;
+import useBreakpoints from "../../Common/hooks/useBreakpoints";
 
 const SORT_OPTIONS: SortOption[] = [
   { isAscending: true, value: "bed__name" },
@@ -34,18 +33,19 @@ interface Props {
 }
 
 export default function CentralNursingStation({ facilityId }: Props) {
+  const perPageLimit = useBreakpoints({ "4k": 9, default: 6 });
   const { t } = useTranslation();
   const [isFullscreen, setFullscreen] = useFullscreen();
   const { qParams, updateQuery, removeFilter, updatePage } = useFilters({
-    limit: PER_PAGE_LIMIT,
+    limit: perPageLimit,
   });
   const query = useQuery(routes.listPatientAssetBeds, {
     pathParams: { facility_external_id: facilityId },
     query: {
       ...qParams,
       page: qParams.page || 1,
-      limit: PER_PAGE_LIMIT,
-      offset: (qParams.page ? qParams.page - 1 : 0) * PER_PAGE_LIMIT,
+      limit: perPageLimit,
+      offset: (qParams.page ? qParams.page - 1 : 0) * perPageLimit,
       asset_class: "HL7MONITOR",
       ordering: qParams.ordering || "bed__name",
       bed_is_occupied:
@@ -54,10 +54,12 @@ export default function CentralNursingStation({ facilityId }: Props) {
   });
 
   const totalCount = query.data?.count ?? 0;
+
   const data = query.data?.results.map((obj) => ({
     patientAssetBed: obj,
     socketUrl: getVitalsMonitorSocketUrl(obj.asset),
   }));
+  console.log("data is : ", data);
 
   const { config, hash } = useVitalsAspectRatioConfig({
     default: 6 / 11,