From 6d17f578cf08b1c717a17e38c3e0a06703fb9255 Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Sun, 16 Oct 2022 10:20:39 +0530
Subject: [PATCH 1/6] Added  component to replace MUI's Accordion component

---
 .../Common/components/AccordionTW.tsx         | 79 +++++++++++++++++++
 .../components/ResponsiveMedicineTables.tsx   | 68 ++++++++--------
 .../Common/components/SelectMenu.tsx          |  9 ++-
 src/Components/Facility/HospitalList.tsx      | 74 ++++++++++++-----
 src/Components/Patient/PatientRegister.tsx    | 35 ++++----
 5 files changed, 193 insertions(+), 72 deletions(-)
 create mode 100644 src/Components/Common/components/AccordionTW.tsx

diff --git a/src/Components/Common/components/AccordionTW.tsx b/src/Components/Common/components/AccordionTW.tsx
new file mode 100644
index 00000000000..b42d865b622
--- /dev/null
+++ b/src/Components/Common/components/AccordionTW.tsx
@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+
+export default function AccordionTW(props: {
+  children: JSX.Element[];
+  expandIcon: JSX.Element;
+  className?: string;
+}) {
+  const [toggle, setToggle] = useState(false);
+  const contentEl = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={props.className}>
+      <div className="flex justify-between">
+        <button
+          type="button"
+          className="w-full grid justify-start"
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          {React.Children.map(props.children, (child) => {
+            if (child.type.displayName === "AccordionSummaryTW") {
+              return child;
+            }
+          })}
+        </button>
+        <button
+          type="button"
+          className={
+            toggle
+              ? "transition-all rotate-180 duration-300 ease-in-out"
+              : "transition"
+          }
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          {props.expandIcon}
+        </button>
+      </div>
+      <div
+        className="transition-all ease-in-out duration-300 overflow-hidden"
+        ref={contentEl}
+        style={
+          toggle
+            ? {
+                height: contentEl.current
+                  ? contentEl.current.scrollHeight
+                  : "0px",
+              }
+            : { height: "0px" }
+        }
+      >
+        {React.Children.map(props.children, (child) => {
+          if (child.type.displayName === "AccordionDetailsTW") {
+            return child;
+          }
+        })}
+      </div>
+    </div>
+  );
+}
+
+interface Props {
+  children: JSX.Element | JSX.Element[];
+}
+
+export class AccordionSummaryTW extends React.Component<Props> {
+  static displayName = "AccordionSummaryTW";
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
+export class AccordionDetailsTW extends React.Component<Props> {
+  static displayName = "AccordionDetailsTW";
+  render() {
+    return <>{this.props.children}</>;
+  }
+}
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Common/components/ResponsiveMedicineTables.tsx
index 7500b9f4efa..c25dd5fe630 100644
--- a/src/Components/Common/components/ResponsiveMedicineTables.tsx
+++ b/src/Components/Common/components/ResponsiveMedicineTables.tsx
@@ -1,9 +1,8 @@
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-} from "@material-ui/core";
 import { useEffect, useState } from "react";
+import AccordionTW, {
+  AccordionDetailsTW,
+  AccordionSummaryTW,
+} from "./AccordionTW";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
@@ -67,28 +66,31 @@ export default function ResponsiveMedicineTable(props: {
       ) : (
         <div className="rounded-md shadow-sm">
           {props.list.map((med: any, index: number) => (
-            <Accordion elevation={0} key={index}>
-              <AccordionSummary
-                className="overflow-hidden"
-                expandIcon={
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={2}
-                    stroke="currentColor"
-                    className="w-5 h-5"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                    />
-                  </svg>
-                }
-                aria-controls={`panel${index + 1}a-content`}
-                id={`panel${index + 1}a-header`}
-              >
+            <AccordionTW
+              className={
+                props.list.length - 1 === index
+                  ? "bg-white p-5 "
+                  : "bg-white p-5 border-b border-b-gray-400"
+              }
+              expandIcon={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2}
+                  stroke="currentColor"
+                  className="w-5 h-5"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+                  />
+                </svg>
+              }
+              key={index}
+            >
+              <AccordionSummaryTW>
                 <div className="grid">
                   <div className="flex flex-col">
                     <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full">
@@ -106,10 +108,10 @@ export default function ResponsiveMedicineTable(props: {
                     ))}
                   </div>
                 </div>
-              </AccordionSummary>
-              <AccordionDetails className="border-t border-t-gray-400">
-                <div className="flex flex-col w-full">
-                  <div className="grid grid-cols-2 gap-3 w-full">
+              </AccordionSummaryTW>
+              <AccordionDetailsTW>
+                <div className="flex flex-col w-full border-t border-t-gray-400 mt-3">
+                  <div className="grid grid-cols-2 gap-3 w-full mt-3">
                     {props.objectKeys.map((key, i) => {
                       if (i !== 0 && i !== props.objectKeys.length - 1)
                         return (
@@ -133,8 +135,8 @@ export default function ResponsiveMedicineTable(props: {
                     })}
                   </div>
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </AccordionDetailsTW>
+            </AccordionTW>
           ))}
         </div>
       )}
diff --git a/src/Components/Common/components/SelectMenu.tsx b/src/Components/Common/components/SelectMenu.tsx
index 3a2f1fa3fea..8869916cf99 100644
--- a/src/Components/Common/components/SelectMenu.tsx
+++ b/src/Components/Common/components/SelectMenu.tsx
@@ -12,6 +12,7 @@ type Props<T> = {
   selected?: T;
   label?: string;
   position?: string;
+  parentRelative?: boolean;
 };
 
 export default function SelectMenu<T>(props: Props<T>) {
@@ -34,7 +35,13 @@ export default function SelectMenu<T>(props: Props<T>) {
       {({ open }) => (
         <>
           <Listbox.Label className="sr-only">{props.label}</Listbox.Label>
-          <div className="relative">
+          <div
+            className={
+              props.parentRelative || props.parentRelative === undefined
+                ? "relative"
+                : ""
+            }
+          >
             <Listbox.Button className="w-full flex shadow-sm rounded bg-gray-50 hover:bg-gray-200 focus:ring-primary-500 border focus:ring-1 ring-gray-400 focus:border-primary-500 border-gray-400 transition-all duration-200 ease-in-out">
               <div className="relative z-0 flex w-full">
                 <div className="relative flex-1 flex items-center py-2 pl-3 pr-4 border border-transparent rounded-l focus:outline-none focus:z-10">
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index 2fb4e4ff71b..55e7eec8f2f 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -22,18 +22,24 @@ import {
   sendNotificationMessages,
 } from "../../Redux/actions";
 import loadable from "@loadable/component";
-import { InputLabel, TextField } from "@material-ui/core";
+
+import {
+  AccordionSummary,
+  AccordionDetails,
+  InputLabel,
+  TextField,
+} from "@material-ui/core";
 import Pagination from "../Common/Pagination";
 import { FacilityModel } from "./models";
 import { InputSearchBox } from "../Common/SearchBox";
 import { CSVLink } from "react-csv";
 import moment from "moment";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
-import Accordion from "@material-ui/core/Accordion";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import AccordionSummary from "@material-ui/core/AccordionSummary";
-import AccordionDetails from "@material-ui/core/AccordionDetails";
-import Typography from "@material-ui/core/Typography";
+import {
+  AccordionDetailsTW,
+  AccordionSummaryTW,
+} from "../Common/components/AccordionTW";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import { make as SlideOver } from "../Common/SlideOver.gen";
@@ -42,6 +48,7 @@ import { useTranslation } from "react-i18next";
 import * as Notification from "../../Utils/Notifications.js";
 import { Modal } from "@material-ui/core";
 import SelectMenu from "../Common/components/SelectMenu";
+import AccordionTW from "../Common/components/AccordionTW";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -558,19 +565,16 @@ export const HospitalList = (props: any) => {
 
         <div className="flex md:justify-end w-full md:mt-4">
           <div className="w-full md:w-auto">
-            <Accordion className="lg:mt-0 md:mt-0 sm:mt-0">
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls="panel1a-content"
-                id="panel1a-header"
-              >
-                <Typography className={classes.heading}>
-                  {t("downloads")}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <div>
-                  <InputLabel className="text-sm">
+            <AccordionTW
+              className="lg:mt-0 md:mt-0 sm:mt-0 bg-white shadow-md rounded-lg p-3 relative"
+              expandIcon={<ExpandMoreIcon />}
+            >
+              <AccordionSummaryTW>
+                <p className="font-medium text-lg">Downloads</p>
+              </AccordionSummaryTW>
+              <AccordionDetailsTW>
+                <div className="mt-3">
+                  <InputLabel className="text-sm mb-2">
                     {t("download_type")}
                   </InputLabel>
                   <div className="flex flex-row gap-6">
@@ -583,7 +587,8 @@ export const HospitalList = (props: any) => {
                       ]}
                       selected={downloadSelect}
                       onSelect={setdownloadSelect}
-                      position="right"
+                      position="left"
+                      parentRelative={false}
                     />
                     {downloadLoading ? (
                       <div className="px-2 ml-2 my-2 pt-1 rounded">
@@ -630,8 +635,8 @@ export const HospitalList = (props: any) => {
                     id="triageDownloader"
                   ></CSVLink>
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </AccordionDetailsTW>
+            </AccordionTW>
           </div>
         </div>
       </div>
@@ -704,6 +709,33 @@ export const HospitalList = (props: any) => {
           </div>
         </div>
       </div>
+
+      <AccordionTW
+        expandIcon={
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+            />
+          </svg>
+        }
+      >
+        <AccordionSummaryTW>
+          <h3>Hello Title</h3>
+        </AccordionSummaryTW>
+        <AccordionDetailsTW>
+          <p>Hello World</p>
+        </AccordionDetailsTW>
+      </AccordionTW>
+
       <div>
         <SlideOver show={showFilters} setShow={setShowFilters}>
           <div className="bg-white min-h-screen p-4">
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index cde439e9dd8..11141ac6ffc 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -1,7 +1,4 @@
 import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   Box,
   Card,
   CardContent,
@@ -59,11 +56,16 @@ import { validatePincode } from "../../Common/validation";
 import { InfoOutlined } from "@material-ui/icons";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { goBack } from "../../Utils/utils";
+import AccordionTW, {
+  AccordionDetailsTW,
+  AccordionSummaryTW,
+} from "../Common/components/AccordionTW";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
-const debounce = require("lodash.debounce");
+import { debounce } from "lodash";
+// const debounce = require("lodash.debounce");
 
 interface PatientRegisterProps extends PatientModel {
   facilityId: number;
@@ -1429,18 +1431,17 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                     </CardContent>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
-                    <Accordion className="mt-2 lg:mt-0 md:mt-0">
-                      <AccordionSummary
-                        expandIcon={<ExpandMoreIcon />}
-                        aria-controls="panel1a-content"
-                        id="panel1a-header"
-                      >
-                        <h1 className="font-bold text-purple-500 text-left text-xl mb-4">
-                          Health Details
+                    <AccordionTW
+                      className="mt-2 lg:mt-0 md:mt-0 bg-white shadow-sm rounded-lg p-3 relative"
+                      expandIcon={<ExpandMoreIcon />}
+                    >
+                      <AccordionSummaryTW>
+                        <h1 className="font-bold text-purple-500 text-left text-xl">
+                          Health Detailsss
                         </h1>
-                      </AccordionSummary>
-                      <AccordionDetails>
-                        <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full">
+                      </AccordionSummaryTW>
+                      <AccordionDetailsTW>
+                        <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full mt-5">
                           <div id="test_type-div">
                             <InputLabel
                               id="test_type-label"
@@ -1929,8 +1930,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             />
                           </div>
                         </div>
-                      </AccordionDetails>
-                    </Accordion>
+                      </AccordionDetailsTW>
+                    </AccordionTW>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
                     <CardContent>

From 30dd38c62492f0828748f520b3ea90b8a5248d48 Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Sun, 16 Oct 2022 10:25:53 +0530
Subject: [PATCH 2/6] minor ui fix

---
 src/Components/Facility/HospitalList.tsx | 26 ------------------------
 1 file changed, 26 deletions(-)

diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index 55e7eec8f2f..1bfec3a38d5 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -710,32 +710,6 @@ export const HospitalList = (props: any) => {
         </div>
       </div>
 
-      <AccordionTW
-        expandIcon={
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="w-6 h-6"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-            />
-          </svg>
-        }
-      >
-        <AccordionSummaryTW>
-          <h3>Hello Title</h3>
-        </AccordionSummaryTW>
-        <AccordionDetailsTW>
-          <p>Hello World</p>
-        </AccordionDetailsTW>
-      </AccordionTW>
-
       <div>
         <SlideOver show={showFilters} setShow={setShowFilters}>
           <div className="bg-white min-h-screen p-4">

From 97f8256bc22c4bf34af45b935e5ea7546ba2f8b5 Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Sun, 16 Oct 2022 13:35:41 +0530
Subject: [PATCH 3/6] Added AccordionV2 and CollapseV2

---
 .../Common/components/AccordionTW.tsx         |  79 ----------
 .../Common/components/AccordionV2.tsx         |  90 +++++++++++
 .../Common/components/CollapseV2.tsx          |  25 +++
 .../components/ResponsiveMedicineTables.tsx   |  93 +++++------
 src/Components/Facility/HospitalList.tsx      | 145 ++++++++----------
 src/Components/Patient/PatientRegister.tsx    |  56 +++----
 6 files changed, 238 insertions(+), 250 deletions(-)
 delete mode 100644 src/Components/Common/components/AccordionTW.tsx
 create mode 100644 src/Components/Common/components/AccordionV2.tsx
 create mode 100644 src/Components/Common/components/CollapseV2.tsx

diff --git a/src/Components/Common/components/AccordionTW.tsx b/src/Components/Common/components/AccordionTW.tsx
deleted file mode 100644
index b42d865b622..00000000000
--- a/src/Components/Common/components/AccordionTW.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useState } from "react";
-
-export default function AccordionTW(props: {
-  children: JSX.Element[];
-  expandIcon: JSX.Element;
-  className?: string;
-}) {
-  const [toggle, setToggle] = useState(false);
-  const contentEl = React.useRef<HTMLDivElement>(null);
-
-  return (
-    <div className={props.className}>
-      <div className="flex justify-between">
-        <button
-          type="button"
-          className="w-full grid justify-start"
-          onClick={() => {
-            setToggle((prev) => !prev);
-          }}
-        >
-          {React.Children.map(props.children, (child) => {
-            if (child.type.displayName === "AccordionSummaryTW") {
-              return child;
-            }
-          })}
-        </button>
-        <button
-          type="button"
-          className={
-            toggle
-              ? "transition-all rotate-180 duration-300 ease-in-out"
-              : "transition"
-          }
-          onClick={() => {
-            setToggle((prev) => !prev);
-          }}
-        >
-          {props.expandIcon}
-        </button>
-      </div>
-      <div
-        className="transition-all ease-in-out duration-300 overflow-hidden"
-        ref={contentEl}
-        style={
-          toggle
-            ? {
-                height: contentEl.current
-                  ? contentEl.current.scrollHeight
-                  : "0px",
-              }
-            : { height: "0px" }
-        }
-      >
-        {React.Children.map(props.children, (child) => {
-          if (child.type.displayName === "AccordionDetailsTW") {
-            return child;
-          }
-        })}
-      </div>
-    </div>
-  );
-}
-
-interface Props {
-  children: JSX.Element | JSX.Element[];
-}
-
-export class AccordionSummaryTW extends React.Component<Props> {
-  static displayName = "AccordionSummaryTW";
-  render() {
-    return <>{this.props.children}</>;
-  }
-}
-export class AccordionDetailsTW extends React.Component<Props> {
-  static displayName = "AccordionDetailsTW";
-  render() {
-    return <>{this.props.children}</>;
-  }
-}
diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
new file mode 100644
index 00000000000..f2c03f2d51f
--- /dev/null
+++ b/src/Components/Common/components/AccordionV2.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+
+export default function AccordionV2(props: {
+  children: JSX.Element | JSX.Element[];
+  expandIcon?: JSX.Element;
+  title: JSX.Element | JSX.Element[] | string;
+  className?: string;
+  expanded?: boolean;
+}) {
+  const [toggle, setToggle] = useState(props.expanded as boolean);
+  const contentEl = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={props.className}>
+      <div className="flex justify-between">
+        <button
+          type="button"
+          className="w-full grid justify-start"
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          <>{props.title}</>
+        </button>
+        <button
+          type="button"
+          className={
+            toggle
+              ? "transition-all rotate-180 duration-300 ease-in-out"
+              : "transition"
+          }
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          {props.expandIcon ? (
+            props.expandIcon
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+              stroke="currentColor"
+              className="w-5 h-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+      <div
+        className="transition-[height] ease-in-out duration-300 overflow-hidden"
+        ref={contentEl}
+        style={
+          toggle
+            ? {
+                height: contentEl.current
+                  ? contentEl.current.scrollHeight
+                  : "0px",
+              }
+            : { height: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+// interface Props {
+//   children: JSX.Element | JSX.Element[];
+// }
+
+// export class AccordionSummaryV2 extends React.Component<Props> {
+//   static displayName = "AccordionSummaryV2";
+//   render() {
+//     return <>{this.props.children}</>;
+//   }
+// }
+// export class AccordionDetailsV2 extends React.Component<Props> {
+//   static displayName = "AccordionDetailsV2";
+//   render() {
+//     return <>{this.props.children}</>;
+//   }
+// }
diff --git a/src/Components/Common/components/CollapseV2.tsx b/src/Components/Common/components/CollapseV2.tsx
new file mode 100644
index 00000000000..babf1e27f9c
--- /dev/null
+++ b/src/Components/Common/components/CollapseV2.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+
+export default function CollapseV2(props: {
+  children: JSX.Element | JSX.Element[];
+  opened: boolean;
+  className?: string;
+}) {
+  const content = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className={`transition-[height] ease-in-out duration-300 overflow-hidden ${props.className}`}
+      ref={content}
+      style={
+        props.opened
+          ? {
+              height: content.current ? content.current.scrollHeight : "0px",
+            }
+          : { height: "0px" }
+      }
+    >
+      {props.children}
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Common/components/ResponsiveMedicineTables.tsx
index c25dd5fe630..271563a4d2f 100644
--- a/src/Components/Common/components/ResponsiveMedicineTables.tsx
+++ b/src/Components/Common/components/ResponsiveMedicineTables.tsx
@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import AccordionTW, {
-  AccordionDetailsTW,
-  AccordionSummaryTW,
-} from "./AccordionTW";
+import AccordionV2 from "./AccordionV2";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
@@ -66,34 +63,11 @@ export default function ResponsiveMedicineTable(props: {
       ) : (
         <div className="rounded-md shadow-sm">
           {props.list.map((med: any, index: number) => (
-            <AccordionTW
-              className={
-                props.list.length - 1 === index
-                  ? "bg-white p-5 "
-                  : "bg-white p-5 border-b border-b-gray-400"
-              }
-              expandIcon={
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={2}
-                  stroke="currentColor"
-                  className="w-5 h-5"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                  />
-                </svg>
-              }
-              key={index}
-            >
-              <AccordionSummaryTW>
+            <AccordionV2
+              title={
                 <div className="grid">
                   <div className="flex flex-col">
-                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full">
+                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full text-left">
                       {med[props.objectKeys[0]]}
                     </h3>
                   </div>
@@ -108,35 +82,40 @@ export default function ResponsiveMedicineTable(props: {
                     ))}
                   </div>
                 </div>
-              </AccordionSummaryTW>
-              <AccordionDetailsTW>
-                <div className="flex flex-col w-full border-t border-t-gray-400 mt-3">
-                  <div className="grid grid-cols-2 gap-3 w-full mt-3">
-                    {props.objectKeys.map((key, i) => {
-                      if (i !== 0 && i !== props.objectKeys.length - 1)
-                        return (
-                          <div>
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
+              }
+              className={
+                props.list.length - 1 === index
+                  ? "bg-white p-5 "
+                  : "bg-white p-5 border-b border-b-gray-400"
+              }
+              key={index}
+            >
+              <div className="flex flex-col w-full border-t border-t-gray-400 mt-3">
+                <div className="grid grid-cols-2 gap-3 w-full mt-3">
+                  {props.objectKeys.map((key, i) => {
+                    if (i !== 0 && i !== props.objectKeys.length - 1)
+                      return (
+                        <div>
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
 
-                      if (i === props.objectKeys.length - 1)
-                        return (
-                          <div className="col-span-2">
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
-                    })}
-                  </div>
+                    if (i === props.objectKeys.length - 1)
+                      return (
+                        <div className="col-span-2">
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
+                  })}
                 </div>
-              </AccordionDetailsTW>
-            </AccordionTW>
+              </div>
+            </AccordionV2>
           ))}
         </div>
       )}
diff --git a/src/Components/Facility/HospitalList.tsx b/src/Components/Facility/HospitalList.tsx
index 1bfec3a38d5..fdf7b5fb129 100644
--- a/src/Components/Facility/HospitalList.tsx
+++ b/src/Components/Facility/HospitalList.tsx
@@ -23,12 +23,7 @@ import {
 } from "../../Redux/actions";
 import loadable from "@loadable/component";
 
-import {
-  AccordionSummary,
-  AccordionDetails,
-  InputLabel,
-  TextField,
-} from "@material-ui/core";
+import { InputLabel, TextField } from "@material-ui/core";
 import Pagination from "../Common/Pagination";
 import { FacilityModel } from "./models";
 import { InputSearchBox } from "../Common/SearchBox";
@@ -36,10 +31,6 @@ import { CSVLink } from "react-csv";
 import moment from "moment";
 import { Theme, createStyles, makeStyles } from "@material-ui/core/styles";
 import CircularProgress from "@material-ui/core/CircularProgress";
-import {
-  AccordionDetailsTW,
-  AccordionSummaryTW,
-} from "../Common/components/AccordionTW";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import GetAppIcon from "@material-ui/icons/GetApp";
 import { make as SlideOver } from "../Common/SlideOver.gen";
@@ -48,7 +39,7 @@ import { useTranslation } from "react-i18next";
 import * as Notification from "../../Utils/Notifications.js";
 import { Modal } from "@material-ui/core";
 import SelectMenu from "../Common/components/SelectMenu";
-import AccordionTW from "../Common/components/AccordionTW";
+import AccordionV2 from "../Common/components/AccordionV2";
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
 
@@ -565,78 +556,74 @@ export const HospitalList = (props: any) => {
 
         <div className="flex md:justify-end w-full md:mt-4">
           <div className="w-full md:w-auto">
-            <AccordionTW
+            <AccordionV2
+              title={<p className="font-medium text-lg">Downloads</p>}
               className="lg:mt-0 md:mt-0 sm:mt-0 bg-white shadow-md rounded-lg p-3 relative"
               expandIcon={<ExpandMoreIcon />}
             >
-              <AccordionSummaryTW>
-                <p className="font-medium text-lg">Downloads</p>
-              </AccordionSummaryTW>
-              <AccordionDetailsTW>
-                <div className="mt-3">
-                  <InputLabel className="text-sm mb-2">
-                    {t("download_type")}
-                  </InputLabel>
-                  <div className="flex flex-row gap-6">
-                    <SelectMenu
-                      options={[
-                        ...downloadTypes.map((download) => ({
-                          title: download,
-                          value: download,
-                        })),
-                      ]}
-                      selected={downloadSelect}
-                      onSelect={setdownloadSelect}
-                      position="left"
-                      parentRelative={false}
-                    />
-                    {downloadLoading ? (
-                      <div className="px-2 ml-2 my-2 pt-1 rounded">
-                        <CircularProgress className="text-primary-600 w-6 h-6" />
-                      </div>
-                    ) : (
-                      <button
-                        className="bg-primary-600 hover:shadow-md px-2 rounded-full"
-                        onClick={handleDownloader}
-                        disabled={downloadLoading}
-                      >
-                        <GetAppIcon style={{ color: "white" }} />
-                      </button>
-                    )}
-                  </div>
-                </div>
-                <div className="hidden">
-                  <CSVLink
-                    data={DownloadFile}
-                    filename={`facilities-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="facilityDownloader"
-                  ></CSVLink>
-                  <CSVLink
-                    data={capacityDownloadFile}
-                    filename={`facility-capacity-${now}.csv`}
-                    className="hidden"
-                    id="capacityDownloader"
-                    target="_blank"
-                  ></CSVLink>
-                  <CSVLink
-                    data={doctorsDownloadFile}
-                    filename={`facility-doctors-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="doctorsDownloader"
-                  ></CSVLink>
-                  <CSVLink
-                    data={triageDownloadFile}
-                    filename={`facility-triage-${now}.csv`}
-                    target="_blank"
-                    className="hidden"
-                    id="triageDownloader"
-                  ></CSVLink>
+              <div className="mt-3">
+                <InputLabel className="text-sm mb-2">
+                  {t("download_type")}
+                </InputLabel>
+                <div className="flex flex-row gap-6">
+                  <SelectMenu
+                    options={[
+                      ...downloadTypes.map((download) => ({
+                        title: download,
+                        value: download,
+                      })),
+                    ]}
+                    selected={downloadSelect}
+                    onSelect={setdownloadSelect}
+                    position="left"
+                    parentRelative={false}
+                  />
+                  {downloadLoading ? (
+                    <div className="px-2 ml-2 my-2 pt-1 rounded">
+                      <CircularProgress className="text-primary-600 w-6 h-6" />
+                    </div>
+                  ) : (
+                    <button
+                      className="bg-primary-600 hover:shadow-md px-2 rounded-full"
+                      onClick={handleDownloader}
+                      disabled={downloadLoading}
+                    >
+                      <GetAppIcon style={{ color: "white" }} />
+                    </button>
+                  )}
                 </div>
-              </AccordionDetailsTW>
-            </AccordionTW>
+              </div>
+              <div className="hidden">
+                <CSVLink
+                  data={DownloadFile}
+                  filename={`facilities-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="facilityDownloader"
+                ></CSVLink>
+                <CSVLink
+                  data={capacityDownloadFile}
+                  filename={`facility-capacity-${now}.csv`}
+                  className="hidden"
+                  id="capacityDownloader"
+                  target="_blank"
+                ></CSVLink>
+                <CSVLink
+                  data={doctorsDownloadFile}
+                  filename={`facility-doctors-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="doctorsDownloader"
+                ></CSVLink>
+                <CSVLink
+                  data={triageDownloadFile}
+                  filename={`facility-triage-${now}.csv`}
+                  target="_blank"
+                  className="hidden"
+                  id="triageDownloader"
+                ></CSVLink>
+              </div>
+            </AccordionV2>
           </div>
         </div>
       </div>
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 11141ac6ffc..88f93e6d985 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -3,7 +3,6 @@ import {
   Card,
   CardContent,
   CircularProgress,
-  Collapse,
   FormControlLabel,
   InputLabel,
   Radio,
@@ -56,14 +55,11 @@ import { validatePincode } from "../../Common/validation";
 import { InfoOutlined } from "@material-ui/icons";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { goBack } from "../../Utils/utils";
-import AccordionTW, {
-  AccordionDetailsTW,
-  AccordionSummaryTW,
-} from "../Common/components/AccordionTW";
 
 const Loading = loadable(() => import("../Common/Loading"));
 const PageTitle = loadable(() => import("../Common/PageTitle"));
-
+import AccordionV2 from "../Common/components/AccordionV2";
+import CollapseV2 from "../Common/components/CollapseV2";
 import { debounce } from "lodash";
 // const debounce = require("lodash.debounce");
 
@@ -1142,11 +1138,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                           />
                         </div>
 
-                        <Collapse
-                          in={String(state.form.gender) === "2"}
-                          timeout="auto"
-                          unmountOnExit
-                        >
+                        <CollapseV2 opened={String(state.form.gender) === "2"}>
                           {
                             <div id="is_antenatal-div" className="col-span-2">
                               <InputLabel
@@ -1178,7 +1170,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </RadioGroup>
                             </div>
                           }
-                        </Collapse>
+                        </CollapseV2>
                         <div data-testid="current-address" id="address-div">
                           <InputLabel
                             id="address-label"
@@ -1431,16 +1423,16 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                     </CardContent>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
-                    <AccordionTW
+                    <AccordionV2
                       className="mt-2 lg:mt-0 md:mt-0 bg-white shadow-sm rounded-lg p-3 relative"
                       expandIcon={<ExpandMoreIcon />}
-                    >
-                      <AccordionSummaryTW>
+                      title={
                         <h1 className="font-bold text-purple-500 text-left text-xl">
-                          Health Detailsss
+                          Health Details
                         </h1>
-                      </AccordionSummaryTW>
-                      <AccordionDetailsTW>
+                      }
+                    >
+                      <div>
                         <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2 w-full mt-5">
                           <div id="test_type-div">
                             <InputLabel
@@ -1505,13 +1497,11 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 />
                               </Box>
                             </RadioGroup>
-                            <Collapse
-                              in={
+                            <CollapseV2
+                              opened={
                                 String(state.form.is_declared_positive) ===
                                 "true"
                               }
-                              timeout="auto"
-                              unmountOnExit
                               className="mt-4"
                             >
                               <div id="date_declared_positive-div">
@@ -1533,7 +1523,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                   disableFuture={true}
                                 />
                               </div>
-                            </Collapse>
+                            </CollapseV2>
                           </div>
 
                           <div id="is_vaccinated-div">
@@ -1565,10 +1555,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </Box>
                             </RadioGroup>
                           </div>
-                          <Collapse
-                            in={String(state.form.is_vaccinated) === "true"}
-                            timeout="auto"
-                            unmountOnExit
+                          <CollapseV2
+                            opened={String(state.form.is_vaccinated) === "true"}
                           >
                             {
                               <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2">
@@ -1671,7 +1659,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 </div>
                               </div>
                             }
-                          </Collapse>
+                          </CollapseV2>
                           <div id="contact_with_confirmed_carrier-div">
                             <InputLabel htmlFor="contact_with_confirmed_carrier">
                               Contact with confirmed Covid patient?
@@ -1725,8 +1713,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                               </Box>
                             </RadioGroup>
                           </div>
-                          <Collapse
-                            in={
+                          <CollapseV2
+                            opened={
                               JSON.parse(
                                 state.form.contact_with_confirmed_carrier
                               ) ||
@@ -1734,8 +1722,6 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 state.form.contact_with_suspected_carrier
                               )
                             }
-                            timeout="auto"
-                            unmountOnExit
                           >
                             <div className="grid gap-4 xl:gap-x-20 xl:gap-y-6 grid-cols-1 md:grid-cols-2">
                               <div id="estimated_contact_date-div">
@@ -1784,7 +1770,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                 />
                               </div>
                             </div>
-                          </Collapse>
+                          </CollapseV2>
                           <div
                             data-testid="disease-status"
                             id="disease_status-div"
@@ -1930,8 +1916,8 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                             />
                           </div>
                         </div>
-                      </AccordionDetailsTW>
-                    </AccordionTW>
+                      </div>
+                    </AccordionV2>
                   </Card>
                   <Card elevation={0} className="mb-8 rounded">
                     <CardContent>

From dae15063febb1701097b7b679d8d34e7f1c5236c Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Sun, 16 Oct 2022 13:42:09 +0530
Subject: [PATCH 4/6] removed comments

---
 .../Common/components/AccordionV2.tsx           | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
index f2c03f2d51f..2ab6303dfe4 100644
--- a/src/Components/Common/components/AccordionV2.tsx
+++ b/src/Components/Common/components/AccordionV2.tsx
@@ -71,20 +71,3 @@ export default function AccordionV2(props: {
     </div>
   );
 }
-
-// interface Props {
-//   children: JSX.Element | JSX.Element[];
-// }
-
-// export class AccordionSummaryV2 extends React.Component<Props> {
-//   static displayName = "AccordionSummaryV2";
-//   render() {
-//     return <>{this.props.children}</>;
-//   }
-// }
-// export class AccordionDetailsV2 extends React.Component<Props> {
-//   static displayName = "AccordionDetailsV2";
-//   render() {
-//     return <>{this.props.children}</>;
-//   }
-// }

From d693bc12500fff88c255c456773e87fb1646ec2e Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Wed, 19 Oct 2022 17:43:02 +0530
Subject: [PATCH 5/6] patient registration fields alignment fix

---
 .../Common/components/CollapseV2.tsx          | 43 ++++++++++++++++---
 1 file changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/Components/Common/components/CollapseV2.tsx b/src/Components/Common/components/CollapseV2.tsx
index babf1e27f9c..6552868b6ac 100644
--- a/src/Components/Common/components/CollapseV2.tsx
+++ b/src/Components/Common/components/CollapseV2.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 export default function CollapseV2(props: {
   children: JSX.Element | JSX.Element[];
@@ -6,20 +6,49 @@ export default function CollapseV2(props: {
   className?: string;
 }) {
   const content = React.useRef<HTMLDivElement>(null);
+  const [innerDivState, setInnerDivState] = useState(false);
+  const [outerDivState, setOuterDivState] = useState(false);
+
+  useEffect(() => {
+    if (props.opened) {
+      setOuterDivState(props.opened);
+      setTimeout(() => {
+        setInnerDivState(props.opened);
+      }, 1);
+    } else {
+      setInnerDivState(props.opened);
+      setTimeout(() => {
+        setOuterDivState(props.opened);
+      }, 300);
+    }
+  }, [props.opened]);
 
   return (
     <div
-      className={`transition-[height] ease-in-out duration-300 overflow-hidden ${props.className}`}
-      ref={content}
+      className="transition-all ease-in-out duration-300"
       style={
-        props.opened
+        outerDivState
           ? {
-              height: content.current ? content.current.scrollHeight : "0px",
+              display: "block",
             }
-          : { height: "0px" }
+          : { display: "none" }
       }
     >
-      {props.children}
+      <div
+        className={`transition-all ease-in-out duration-300 overflow-hidden ${
+          props.className ? props.className : ""
+        }`}
+        ref={content}
+        style={
+          innerDivState
+            ? {
+                maxHeight: content.current?.scrollHeight,
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
     </div>
   );
 }

From f8bf2d78161ac5f7da6d1d2c6be632a508f5e980 Mon Sep 17 00:00:00 2001
From: Gokulram A <gokulram2010418@ssn.edu.in>
Date: Fri, 21 Oct 2022 18:33:22 +0530
Subject: [PATCH 6/6] fixed accordion max height issue

---
 src/Components/Common/components/AccordionV2.tsx | 8 ++++----
 src/Components/Patient/PatientRegister.tsx       | 5 ++---
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
index 2ab6303dfe4..e2b4ca54d93 100644
--- a/src/Components/Common/components/AccordionV2.tsx
+++ b/src/Components/Common/components/AccordionV2.tsx
@@ -54,16 +54,16 @@ export default function AccordionV2(props: {
         </button>
       </div>
       <div
-        className="transition-[height] ease-in-out duration-300 overflow-hidden"
+        className="transition-all ease-in-out duration-500 overflow-hidden"
         ref={contentEl}
         style={
           toggle
             ? {
-                height: contentEl.current
-                  ? contentEl.current.scrollHeight
+                maxHeight: contentEl.current
+                  ? contentEl.current.scrollHeight * 2
                   : "0px",
               }
-            : { height: "0px" }
+            : { maxHeight: "0px" }
         }
       >
         {props.children}
diff --git a/src/Components/Patient/PatientRegister.tsx b/src/Components/Patient/PatientRegister.tsx
index 027460253e1..fc47eef9fc5 100644
--- a/src/Components/Patient/PatientRegister.tsx
+++ b/src/Components/Patient/PatientRegister.tsx
@@ -64,7 +64,6 @@ import CollapseV2 from "../Common/components/CollapseV2";
 import { debounce } from "lodash";
 // const debounce = require("lodash.debounce");
 
-
 interface PatientRegisterProps extends PatientModel {
   facilityId: number;
 }
@@ -1595,7 +1594,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                     onChange={handleChange}
                                     style={{ padding: "0px 5px" }}
                                   >
-                                    <Box display="flex" flexDirection="row">
+                                    <div className="flex flex-wrap">
                                       <FormControlLabel
                                         value="1"
                                         control={<Radio />}
@@ -1611,7 +1610,7 @@ export const PatientRegister = (props: PatientRegisterProps) => {
                                         control={<Radio />}
                                         label="3 (Booster/Precautionary Dose)"
                                       />
-                                    </Box>
+                                    </div>
                                   </RadioGroup>
                                 </div>
                                 <div id="vaccine_name-div">