merge upstream develop

Signed-off-by: JahnabDutta <[email protected]>

package.json

@@ -109,7 +109,6 @@
     "@storybook/react": "^7.0.26",
     "@storybook/react-vite": "^7.0.26",
     "@storybook/testing-library": "^0.2.0",
-    "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/typography": "^0.5.9",
@@ -162,7 +161,7 @@
     "rescript": "^10.1.4",
     "snyk": "^1.1187.0",
     "storybook": "^7.0.26",
-    "tailwindcss": "^3.3.2",
+    "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6",
     "vite": "^4.4.0",
     "vite-plugin-pwa": "^0.16.4"

src/CAREUI/display/SubHeading.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+import CareIcon from "../icons/CareIcon";
+import RecordMeta from "./RecordMeta";
+
+interface Props {
+  title: ReactNode;
+  lastModified?: string;
+  className?: string;
+  options?: ReactNode;
+}
+
+export default function SubHeading(props: Props) {
+  return (
+    <div className="flex flex-wrap items-center justify-between py-2">
+      <div className="flex items-center">
+        <span className="text-lg font-semibold leading-relaxed text-gray-900">
+          {props.title}
+        </span>
+        {props.lastModified && (
+          <div className="ml-3 flex flex-row gap-2 text-xs font-medium text-gray-600">
+            <CareIcon className="care-l-history-alt text-sm" />
+            <RecordMeta time={props.lastModified} prefix="Last modified" />
+          </div>
+        )}
+      </div>
+      {props.options && (
+        <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:justify-end">
+          {props.options}
+        </div>
+      )}
+    </div>
+  );
+}

src/Common/hooks/useRangePagination.ts

@@ -0,0 +1,112 @@
+import { useEffect, useMemo, useState } from "react";
+
+interface DateRange {
+  start: Date;
+  end: Date;
+}
+
+interface Props {
+  bounds: DateRange;
+  perPage: number;
+  slots?: number;
+  defaultEnd?: boolean;
+}
+
+const useRangePagination = ({ bounds, perPage, ...props }: Props) => {
+  const [currentRange, setCurrentRange] = useState(
+    getInitialBounds(bounds, perPage, props.defaultEnd)
+  );
+
+  useEffect(() => {
+    setCurrentRange(getInitialBounds(bounds, perPage, props.defaultEnd));
+  }, [bounds, perPage, props.defaultEnd]);
+
+  const next = () => {
+    const { end } = currentRange;
+    const deltaBounds = bounds.end.valueOf() - bounds.start.valueOf();
+    const deltaCurrent = end.valueOf() - bounds.start.valueOf();
+
+    if (deltaCurrent + perPage > deltaBounds) {
+      setCurrentRange({
+        start: new Date(bounds.end.valueOf() - perPage),
+        end: bounds.end,
+      });
+    } else {
+      setCurrentRange({
+        start: new Date(end.valueOf()),
+        end: new Date(end.valueOf() + perPage),
+      });
+    }
+  };
+
+  const previous = () => {
+    const { start } = currentRange;
+    const deltaCurrent = start.valueOf() - bounds.start.valueOf();
+
+    if (deltaCurrent - perPage < 0) {
+      setCurrentRange({
+        start: bounds.start,
+        end: new Date(bounds.start.valueOf() + perPage),
+      });
+    } else {
+      setCurrentRange({
+        start: new Date(start.valueOf() - perPage),
+        end: new Date(start.valueOf()),
+      });
+    }
+  };
+
+  const slots = useMemo(() => {
+    if (!props.slots) {
+      return [];
+    }
+
+    const slots: DateRange[] = [];
+    const { start } = currentRange;
+    const delta = perPage / props.slots;
+
+    for (let i = 0; i < props.slots; i++) {
+      slots.push({
+        start: new Date(start.valueOf() + delta * i),
+        end: new Date(start.valueOf() + delta * (i + 1)),
+      });
+    }
+
+    return slots;
+  }, [currentRange, props.slots, perPage]);
+
+  return {
+    currentRange,
+    hasNext: currentRange.end < bounds.end,
+    hasPrevious: currentRange.start > bounds.start,
+    previous,
+    next,
+    slots,
+  };
+};
+
+export default useRangePagination;
+
+const getInitialBounds = (
+  bounds: DateRange,
+  perPage: number,
+  defaultEnd?: boolean
+) => {
+  const deltaBounds = bounds.end.valueOf() - bounds.start.valueOf();
+
+  if (deltaBounds < perPage) {
+    return bounds;
+  }
+
+  if (defaultEnd) {
+    return {
+      start: new Date(bounds.end.valueOf() - perPage),
+      end: bounds.end,
+    };
+  }
+
+  return {
+    start: bounds.start,
+    end: new Date(bounds.start.valueOf() + perPage),
+  };
+};

src/Components/ABDM/ConfigureHealthFacility.tsx

@@ -6,7 +6,6 @@ import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import { Cancel, Submit } from "../Common/components/ButtonV2";
 import TextFormField from "../Form/FormFields/TextFormField";
-import Page from "../Common/components/Page";
 const Loading = lazy(() => import("../Common/Loading"));
 
 const initForm = {
@@ -121,33 +120,25 @@ export const ConfigureHealthFacility = (props: any) => {
   }
 
   return (
-    <Page
-      title="Configure Health Facility"
-      crumbsReplacements={{
-        [facilityId]: { name: state.form.name },
-      }}
-      className="mx-auto max-w-3xl"
-    >
-      <div className="cui-card mt-4">
-        <form onSubmit={(e) => handleSubmit(e)}>
-          <div className="mt-2 grid grid-cols-1 gap-4">
-            <div>
-              <TextFormField
-                name="hf_id"
-                label="Health Facility Id"
-                required
-                value={state.form.hf_id}
-                onChange={(e) => handleChange(e)}
-                error={state.errors?.hf_id}
-              />
-            </div>
+    <div className="cui-card mt-4">
+      <form onSubmit={(e) => handleSubmit(e)}>
+        <div className="mt-2 grid grid-cols-1 gap-4">
+          <div>
+            <TextFormField
+              name="hf_id"
+              label="Health Facility Id"
+              required
+              value={state.form.hf_id}
+              onChange={(e) => handleChange(e)}
+              error={state.errors?.hf_id}
+            />
           </div>
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
-            <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
-            <Submit onClick={handleSubmit} label="Update" />
-          </div>
-        </form>
-      </div>
-    </Page>
+        </div>
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-between">
+          <Cancel onClick={() => navigate(`/facility/${facilityId}`)} />
+          <Submit onClick={handleSubmit} label="Update" />
+        </div>
+      </form>
+    </div>
   );
 };

src/Components/Assets/AssetImportModal.tsx

@@ -27,7 +27,8 @@ interface Props {
 const AssetImportModal = ({ open, onClose, facility }: Props) => {
   const [isImporting, setIsUploading] = useState(false);
   const [selectedFile, setSelectedFile] = useState<any>();
-  const [preview, setPreview] = useState<AssetData[]>();
+  const [preview, setPreview] =
+    useState<(AssetData & { notes?: string; last_serviced_on?: string })[]>();
   const [location, setLocation] = useState("");
   const [locations, setLocations] = useState<any>([]);
   const dispatchAction: any = useDispatch();
@@ -64,6 +65,7 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
                     msg: `Please check the row ${error.row} of column ${error.column}`,
                   });
                 });
+                setSelectedFile(undefined);
               } else {
                 setPreview(parsedData.rows as AssetData[]);
               }
@@ -89,6 +91,7 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
         Notification.Error({
           msg: "Invalid file",
         });
+        setSelectedFile(undefined);
       }
     };
     readFile();
@@ -127,8 +130,8 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
         manufacturer: asset.manufacturer,
         meta: { ...asset.meta },
         warranty_amc_end_of_validity: asset.warranty_amc_end_of_validity,
-        last_serviced_on: asset.last_service.serviced_on,
-        note: asset.last_service.note,
+        last_serviced_on: asset.last_serviced_on,
+        note: asset.notes,
         cancelToken: { promise: {} },
       });
 
@@ -166,8 +169,14 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
     e.preventDefault();
     dragProps.setDragOver(false);
     const dropedFile = e?.dataTransfer?.files[0];
-    if (dropedFile.type.split("/")[1] !== "json")
-      return dragProps.setFileDropError("Please drop a JSON file to upload!");
+    if (
+      !["xlsx", "csv", "json"].includes(
+        dropedFile?.name?.split(".")?.pop() || ""
+      )
+    )
+      return dragProps.setFileDropError(
+        "Please drop a JSON / Excel file to upload!"
+      );
     setSelectedFile(dropedFile);
   };
 
@@ -233,7 +242,7 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
                   />
                 </div>
               </div>
-              <div className="h-80 overflow-y-scroll rounded border border-gray-500 bg-white md:min-w-[500px]">
+              <div className="my-4 h-80 overflow-y-scroll rounded border border-gray-500 bg-white md:min-w-[500px]">
                 <div className="flex border-b p-2">
                   <div className="mr-2 p-2 font-bold">#</div>
                   <div className="mr-2 p-2 font-bold md:w-1/2">Name</div>
@@ -327,7 +336,10 @@ const AssetImportModal = ({ open, onClose, facility }: Props) => {
               }}
               disabled={isImporting}
             />
-            <Submit onClick={handleUpload} disabled={isImporting}>
+            <Submit
+              onClick={handleUpload}
+              disabled={isImporting || !selectedFile}
+            >
               {isImporting ? (
                 <i className="fa-solid fa-spinner animate-spin" />
               ) : (

src/Components/Assets/AssetServiceEditModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useDispatch } from "react-redux";
 import { updateAssetService } from "../../Redux/actions";
 import * as Notification from "../../Utils/Notifications.js";
-import ButtonV2 from "../Common/components/ButtonV2";
+import ButtonV2, { Cancel, Submit } from "../Common/components/ButtonV2";
 import DialogModal from "../Common/Dialog";
 import { AssetData, AssetService, AssetServiceEdit } from "./AssetTypes";
 import dayjs from "dayjs";
@@ -199,18 +199,13 @@ export const AssetServiceEditModal = (props: {
             </div>
           </div>
         </div>
-        <div className="flex justify-end">
-          <ButtonV2
-            variant="primary"
+        <div className="flex flex-col justify-end gap-2 md:flex-row">
+          <Submit
+            label={`${isLoading ? "Updating" : "Update"}`}
             onClick={handleSubmit}
-            className="mr-2"
             loading={isLoading}
-          >
-            {isLoading ? "Updating" : "Update"}
-          </ButtonV2>
-          <ButtonV2 variant="secondary" onClick={props.handleClose}>
-            Cancel
-          </ButtonV2>
+          />
+          <Cancel onClick={props.handleClose} />
         </div>
       </div>
     </DialogModal>

src/Components/Assets/AssetTypes.tsx

@@ -86,7 +86,6 @@ export interface AssetData {
   manufacturer: string;
   warranty_amc_end_of_validity: string;
   last_service: AssetService;
-  note: string;
   meta?: {
     [key: string]: any;
   };

src/Components/Common/SkillSelect.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { useDispatch } from "react-redux";
-import { getAllSkills } from "../../Redux/actions";
+import { getAllSkills, getUserListSkills } from "../../Redux/actions";
 import AutoCompleteAsync from "../Form/AutoCompleteAsync";
 import { SkillObjectModel } from "../Users/models";
 
@@ -15,6 +15,7 @@ interface SkillSelectProps {
   disabled?: boolean;
   selected: SkillObjectModel | SkillObjectModel[] | null;
   setSelected: (selected: SkillObjectModel) => void;
+  username?: string;
 }
 
 export const SkillSelect = (props: SkillSelectProps) => {
@@ -29,6 +30,7 @@ export const SkillSelect = (props: SkillSelectProps) => {
     disabled = false,
     className = "",
     errors = "",
+    username,
   } = props;
 
   const dispatchAction: any = useDispatch();
@@ -44,7 +46,18 @@ export const SkillSelect = (props: SkillSelectProps) => {
 
       const res = await dispatchAction(getAllSkills(params));
 
-      return res?.data?.results;
+      const linkedSkills = await dispatchAction(
+        getUserListSkills({ username: username })
+      );
+
+      const skillsList = linkedSkills?.data?.results;
+      const skillsID: string[] = [];
+      skillsList.map((skill: any) => skillsID.push(skill.skill_object.id));
+      const skills = res?.data?.results.filter(
+        (skill: any) => !skillsID.includes(skill.id)
+      );
+
+      return skills;
     },
     [dispatchAction, searchAll, showAll]
   );