Issue Swasth-Digital-Health-Foundation#575 refactor : payload changes…

… for coverage ,preauth, claim.

opd-app/src/App.tsx

@@ -36,6 +36,8 @@ const App = () => {
       <Routes>
         <Route path="/" element={<Login />} />
         <Route element={<DefaultLayout />}>
+          <Route path="/" element={<Navigate to="/opd-login" />} />
+          <Route path="/opd-login" element={<Login />}></Route>
           <Route path="/home" element={<Home />} />
           <Route
             path="/add-patient"

opd-app/src/components/ActiveClaimCycleCard.tsx

@@ -24,6 +24,7 @@ const ActiveClaimCycleCard = (Props: any) => {
     workflowId: Props.workflowId,
     patientMobile: Props.patientMobileNumber,
     patientName: Props.patientName,
+    recipientCode: Props.recipient_code
   };
 
   const data: any = [

opd-app/src/components/Header.tsx

@@ -1,62 +1,73 @@
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import LogoIcon from '../images/swasth_logo.png';
 import DarkModeSwitcher from './DarkModeSwitcher';
+import { useEffect, useState } from 'react';
 
 const Header = (props: {
   sidebarOpen: string | boolean | undefined;
   setSidebarOpen: (arg0: boolean) => void;
 }) => {
+  let routesToShow = ["/opd-login"];
+  const location = useLocation();
+  const [showMenu, setShowMenu] = useState(true);
+  useEffect(() => {
+    if (routesToShow.includes(location.pathname)) {
+      setShowMenu(false)
+    }
+    else {
+      setShowMenu(true)
+    }
+  }, [location.pathname])
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
-      <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+      <div className="flex flex-grow items-center justify-between px-4 py-1 shadow-2 md:px-6 2xl:px-11">
         <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
-          {/* <!-- Hamburger Toggle BTN --> */}
-          <button
-            aria-controls="sidebar"
-            onClick={(e) => {
-              e.stopPropagation();
-              props.setSidebarOpen(!props.sidebarOpen);
-            }}
-            className="z-99999 block rounded-lg border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
-          >
-            <span className="relative block h-5.5 w-5.5 cursor-pointer">
-              <span className="du-block absolute right-0 h-full w-full">
-                <span
-                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-lg bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!w-full delay-300'
-                  }`}
-                ></span>
-                <span
-                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-lg bg-black delay-150 duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && 'delay-400 !w-full'
-                  }`}
-                ></span>
-                <span
-                  className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-lg bg-black delay-200 duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!w-full delay-500'
-                  }`}
-                ></span>
-              </span>
-              <span className="absolute right-0 h-full w-full rotate-45">
-                <span
-                  className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-lg bg-black delay-300 duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!h-0 !delay-[0]'
-                  }`}
-                ></span>
-                <span
-                  className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-lg bg-black duration-200 ease-in-out dark:bg-white ${
-                    !props.sidebarOpen && '!h-0 !delay-200'
-                  }`}
-                ></span>
-              </span>
-            </span>
-          </button>
-          {/* <!-- Hamburger Toggle BTN --> */}
+          {
+            showMenu ?
+              <button
+                aria-controls="sidebar"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  props.setSidebarOpen(!props.sidebarOpen);
+                }}
+                className="z-99999 block rounded-lg border border-stroke bg-white p-1.5 shadow-sm dark:border-strokedark dark:bg-boxdark lg:hidden"
+              >
+                <span className="relative block h-5.5 w-5.5 cursor-pointer">
+                  <span className="du-block absolute right-0 h-full w-full">
+                    <span
+                      className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-lg bg-black delay-[0] duration-200 ease-in-out dark:bg-white ${!props.sidebarOpen && '!w-full delay-300'
+                        }`}
+                    ></span>
+                    <span
+                      className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-lg bg-black delay-150 duration-200 ease-in-out dark:bg-white ${!props.sidebarOpen && 'delay-400 !w-full'
+                        }`}
+                    ></span>
+                    <span
+                      className={`relative left-0 top-0 my-1 block h-0.5 w-0 rounded-lg bg-black delay-200 duration-200 ease-in-out dark:bg-white ${!props.sidebarOpen && '!w-full delay-500'
+                        }`}
+                    ></span>
+                  </span>
+                  <span className="absolute right-0 h-full w-full rotate-45">
+                    <span
+                      className={`absolute left-2.5 top-0 block h-full w-0.5 rounded-lg bg-black delay-300 duration-200 ease-in-out dark:bg-white ${!props.sidebarOpen && '!h-0 !delay-[0]'
+                        }`}
+                    ></span>
+                    <span
+                      className={`delay-400 absolute left-0 top-2.5 block h-0.5 w-full rounded-lg bg-black duration-200 ease-in-out dark:bg-white ${!props.sidebarOpen && '!h-0 !delay-200'
+                        }`}
+                    ></span>
+                  </span>
+                </span>
+              </button>
+              : <></>
+          }
+          {
+            showMenu ? <Link className="block flex-shrink-0 lg:hidden" to="/home">
+              <img className="hidden w-30 dark:block" src={LogoIcon} alt="Logo" />
+              <img className="w-30 dark:hidden" src={LogoIcon} alt="Logo" />
+            </Link> : <></>
+          }
 
-          <Link className="block flex-shrink-0 lg:hidden" to="/home">
-            <img className="hidden w-48 dark:block" src={LogoIcon} alt="Logo" />
-            <img className="w-48 dark:hidden" src={LogoIcon} alt="Logo" />
-          </Link>
         </div>
 
         <div className="invisible hidden sm:block">
@@ -105,4 +116,4 @@ const Header = (props: {
   );
 };
 
-export default Header;
+export default Header;

opd-app/src/components/Sidebar.tsx

@@ -60,9 +60,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
   return (
     <aside
       ref={sidebar}
-      className={`absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${
-        sidebarOpen ? "translate-x-0" : "-translate-x-full"
-      }`}
+      className={`absolute left-0 top-0 z-9999 flex h-screen w-72.5 flex-col overflow-y-hidden bg-black duration-300 ease-linear dark:bg-boxdark lg:static lg:translate-x-0 ${sidebarOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
     >
       {/* <!-- SIDEBAR HEADER --> */}
       <div className="flex items-center justify-between gap-2 px-6 py-5.5 lg:py-6.5">
@@ -114,15 +113,11 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                   return (
                     <React.Fragment>
                       <div
-                        className={`group relative flex items-center gap-2.5 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
-                          (pathname === "/home" || pathname.includes("home")) &&
+                        className={`group relative flex items-center gap-2.5 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${(pathname === "/home" || pathname.includes("home")) &&
                           "bg-graydark dark:bg-meta-4"
-                        }`}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          sidebarExpanded
-                            ? navigate("/home")
-                            : setSidebarExpanded(true);
+                          }`}
+                        onClick={() => {
+                          setSidebarOpen(!sidebarOpen)
                         }}
                       >
                         <svg
@@ -152,17 +147,19 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                   return (
                     <React.Fragment>
                       <div
-                        className={`group relative flex items-center gap-2.5 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
-                          (pathname === "/" || pathname.includes("")) &&
+                        className={`group relative flex items-center gap-1 rounded-lg px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${(pathname === "/" || pathname.includes("")) &&
                           "bg-graydark dark:bg-meta-4"
-                        }`}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          sidebarExpanded
-                            ? navigate("/")
-                            : setSidebarExpanded(true);
+                          }`}
+                        onClick={() => {
+                          navigate("/opd-login")
+                          setSidebarOpen(!sidebarOpen)
                         }}
                       >
+                        <svg className="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke="white"
+                            strokeWidth={1}
+                            strokeMiterlimit={10} d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
+                        </svg>
                         Logout
                       </div>
                     </React.Fragment>

opd-app/src/hooks/useDebounce.tsx

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+function useDebounce<T>(value: T, delay?: number) {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export default useDebounce;

opd-app/src/main.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
 import './index.css';
 import './satoshi.css';
 import './simple-datatables.css';
 import "react-toastify/dist/ReactToastify.css";
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-    <Router>
-      <App />
-    </Router>
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
 );