@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/global.scss

@@ -0,0 +1,221 @@
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer base {
+  body {
+    
+    margin: 0;
+    font-family:
+      'Mulish',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      'Roboto',
+      'Oxygen',
+      'Ubuntu',
+      'Cantarell',
+      'Fira Sans',
+      'Droid Sans',
+      'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  }
+
+  .ck-editor__editable {
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+  }
+
+  ::-webkit-scrollbar {
+    width: 2px;
+    height: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #929292;
+    border-radius: 20px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #7a7a7a;
+  }
+
+  .loader-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  .loader-spinner {
+    border: 8px solid #f3f3f3;
+    border-top: 8px solid #3498db;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loader {
+    animation: rotate 1.8s linear infinite;
+    width: 70px;
+    height: 70px;
+    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.4));
+  }
+}
+
+.error-helper-text {
+  color: #5c0606;
+  position: absolute;
+  padding-left: 5%;
+  padding-right: 5%;
+  border-radius: 20px;
+  right: 3%;
+  top: 0%;
+  transform: translateY(-25%);
+  white-space: nowrap;
+  background-color: rgb(236, 188, 188);
+  font-size: 0.6rem;
+}
+
+.success-helper-text {
+  color: #0b8600;
+  position: absolute;
+  padding-left: 5%;
+  padding-right: 5%;
+  border-radius: 20px;
+  right: 3%;
+  top: 0%;
+  transform: translateY(-25%);
+  white-space: nowrap;
+  background-color: rgb(204, 243, 237);
+  font-size: 0.6rem;
+}
+
+:root {
+  font-size: var(--base-font-size, 16px) !important;
+}
+
+// html {
+//   font-size: var(--base-font-size) !important;
+// }
+
+// * {
+//   font-size: inherit !important;
+// }
+
+.font-wrapper-div {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin-left: 15px;
+  margin-bottom: 5px;
+}
+
+.text-blue {
+  color: #0056b9;
+}
+
+.pdf-hidden {
+  display: none !important;
+}
+
+.cst-day {
+  font-size: 15px;
+  width: 38px;
+  height: 38px;
+  padding-top: 5px;
+  margin-right: 0.5rem;
+  border-radius: 50%;
+  text-align: center;
+  background: #11B666;
+  color: white;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.prescription-container * {
+  all: revert; /* reset app styles */
+}
+
+
+
+
+/* Custom robust tab indicator styling to resolve coordinate-based alignment failures */
+.MuiTabs-indicator {
+  display: none !important;
+}
+
+.MuiTab-root {
+  position: relative !important;
+  transition: color 0.25s ease-in-out;
+}
+
+.MuiTab-root.Mui-selected {
+  font-weight: bold !important;
+}
+
+.MuiTab-root::after {
+  content: '' !important;
+  position: absolute !important;
+  bottom: 0 !important;
+  left: 8px !important;
+  right: 8px !important;
+  height: 3px !important;
+  border-radius: 3px 3px 0 0 !important;
+  background-color: var(--color-primary) !important;
+  transform: scaleX(0);
+  transform-origin: center;
+  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.MuiTab-root.Mui-selected::after {
+  transform: scaleX(1) !important;
+}

package/src/hooks/useAESEncryption.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { api } from '@/common/interceptors/AxiosInterceptor';
+
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+
+const useAESEncryption = () => {
+  const [passwordEncryptionKey, setPasswordEncryptionKey] = useState(null);
+  const [vector, setVector] = useState(null);
+  useEffect(() => {
+    api
+      .get('/login/get-key-and-iv', {
+        withCredentials: true, // Important!
+      })
+      .then((response) => {
+        setPasswordEncryptionKey(response.data.key);
+        setVector(response.data.initVector);
+      })
+      .catch((error) => {
+        console.error('Server error', error);
+      });
+  }, []);
+
+  const encrypt = async (data) => {
+    if (!passwordEncryptionKey || !vector) {
+      console.error('Key and vector must be set before encryption');
+      return null;
+    }
+    try {
+      let encryptionKey = passwordEncryptionKey;
+      let initVector = vector;
+      return await GeneralUtil.getEncodedData(encryptionKey, initVector, data);
+    } catch (ex) {
+      console.error('Encryption error:', ex);
+      return null;
+    }
+  };
+
+  const decrypt = async (encryptedData) => {
+    if (!passwordEncryptionKey || !vector) {
+      console.error('Key and vector must be set before decryption');
+      return null;
+    }
+    try {
+      let encryptionKey = passwordEncryptionKey;
+      let initVector = vector;
+      return await GeneralUtil.getDecryptedData(encryptionKey, initVector, encryptedData);
+    } catch (ex) {
+      console.error('Decryption error:', ex);
+      return null;
+    }
+  };
+
+  return { encrypt, decrypt };
+};
+
+export default useAESEncryption;

package/src/hooks/useCaching.js

@@ -0,0 +1,43 @@
+import { useQueryClient } from '@tanstack/react-query';
+
+const useCaching = () => {
+  const queryClient = useQueryClient();
+
+  const fetchData = async ({ cacheKey, fetchFn, staleTime, cacheTime }) => {
+    try {
+      const data = await queryClient.fetchQuery({
+        queryKey: cacheKey,
+        queryFn: fetchFn,
+        staleTime: staleTime,
+        gcTime: cacheTime,
+      });
+      return data;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getCachedData = async ({ cacheKey, fetchFn, staleTime, cacheTime }) => {
+    const data = queryClient.getQueryData(cacheKey);
+    if (!data) {
+      return await fetchData({ cacheKey, fetchFn, staleTime, cacheTime });
+    }
+    return data;
+  };
+
+  const clearCache = (cacheKey) => {
+    queryClient.removeQueries({ queryKey: cacheKey });
+  };
+
+  const peekCache = (cacheKey) => {
+    return queryClient.getQueryData(cacheKey);
+  };
+
+  const updateCache = (cacheKey, data) => {
+    queryClient.setQueryData(cacheKey, data);
+  };
+
+  return { getCachedData, peekCache, clearCache, updateCache };
+};
+
+export default useCaching;

package/src/hooks/useDebounce.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook to debounce a value.
+ *
+ * @param {any} value - The value to debounce.
+ * @param {number} delay - The delay (in milliseconds) after which the debounced value is updated.
+ * @returns {any} - The debounced value, which will only update after the specified delay.
+ *
+ * @example
+ * const debouncedSearchTerm = useDebounce(searchTerm, 500);
+ *
+ * // In the example above, the `debouncedSearchTerm` will only update
+ * // after 500ms have passed without any changes to `searchTerm`.
+ * This is useful for cases like searching where you don't want to trigger
+ * an action on every keystroke, but rather after the user has stopped typing.
+ */
+export function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    // Set a timeout to update the debounced value after the delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Cleanup the timeout if the component re-renders before the delay is complete
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/useDebounceFn.js

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Custom hook to debounce a function.
+ *
+ * @param {Function} callback - The function to debounce. Can be asynchronous.
+ * @param {number} delay - The delay (in milliseconds) after which the function will be executed.
+ * @returns {Function} - A debounced version of the input function.
+ *
+ * @example
+ * const debouncedFetchData = useDebouncedFunction(fetchData, 500);
+ *
+ * // In the example above, the `debouncedFetchData` function will only execute
+ * // after 500ms have passed without being called again.
+ */
+export function useDebounceFn(callback, delay) {
+  const callbackRef = useRef(callback);
+  const timeoutRef = useRef(null);
+
+  // Update the callback reference if it changes
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const debouncedFunction = useCallback(
+    (...args) => {
+      // Clear the existing timeout if any
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      // Set a new timeout to call the callback after the delay
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(...args);
+      }, delay);
+    },
+    [delay] // Recreate the function if the delay changes
+  );
+
+  // Cleanup timeout on component unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return debouncedFunction;
+}