Download Discharge Summary, Medicine Administration Records and upgraded Prescriptions

src/Components/Common/ConfirmDialogV2.tsx

@@ -1,12 +1,13 @@
 import DialogModal from "./Dialog";
-import ButtonV2, { ButtonVariant, Cancel } from "./components/ButtonV2";
+import { ButtonVariant, Cancel, Submit } from "./components/ButtonV2";
 
 type ConfirmDialogV2Props = {
+  className?: string;
   title: React.ReactNode;
   description?: React.ReactNode;
   disabled?: boolean;
   show: boolean;
-  action: string;
+  action: React.ReactNode;
   variant?: ButtonVariant;
   onClose: () => void;
   onConfirm: () => void;
@@ -15,34 +16,22 @@ type ConfirmDialogV2Props = {
 };
 
 const ConfirmDialogV2 = ({
-  title,
-  description,
-  show,
   disabled,
   variant,
   action,
-  onClose,
   onConfirm,
   cancelLabel,
   children,
+  ...props
 }: ConfirmDialogV2Props) => {
   return (
-    <DialogModal
-      onClose={onClose}
-      title={title}
-      description={
-        <span className={`font-medium text-${variant || "secondary"}-600`}>
-          {description}
-        </span>
-      }
-      show={show}
-    >
+    <DialogModal {...props}>
       {children}
       <div className="mt-6 flex justify-end gap-2 w-full flex-col md:flex-row">
-        <Cancel onClick={onClose} label={cancelLabel} />
-        <ButtonV2 onClick={onConfirm} variant={variant} disabled={disabled}>
+        <Cancel onClick={props.onClose} label={cancelLabel} />
+        <Submit onClick={onConfirm} variant={variant} disabled={disabled}>
           {action}
-        </ButtonV2>
+        </Submit>
       </div>
     </DialogModal>
   );

src/Components/Common/PrescriptionBuilder.res

@@ -1,5 +1,5 @@
 let select = (setPrescription, prescription) => setPrescription(_ => prescription)
 
-@react.component
-export make = (~prescriptions, ~setPrescriptions) =>
+@genType @react.component
+let make = (~prescriptions, ~setPrescriptions) =>
   <div> <Prescription__Builder prescriptions selectCB={select(setPrescriptions)} /> </div>

src/Components/Common/components/ResponsiveMedicineTables.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import AccordionV2 from "./AccordionV2";
+import { classNames } from "../../../Utils/utils";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
@@ -11,6 +12,10 @@ export default function ResponsiveMedicineTable(props: {
   list: Array<any>;
   objectKeys: Array<string>;
   fieldsToDisplay: Array<number>;
+  actions?: (item: any) => JSX.Element;
+  actionLabel?: string;
+  maxWidthColumn?: number;
+  onClick?: (item: any) => void;
 }) {
   const [windowSize, setWindowSize] = useState(getWindowSize());
   useEffect(() => {
@@ -32,30 +37,49 @@ export default function ResponsiveMedicineTable(props: {
             <tr>
               {props.theads.map((item) => {
                 return (
-                  <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-800 uppercase tracking-wider">
+                  <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-800 uppercase tracking-wider whitespace-nowrap">
                     {item}
                   </th>
                 );
               })}
+              {props.actions && (
+                <th className="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-800 uppercase tracking-wider">
+                  {props.actionLabel || ""}
+                </th>
+              )}
             </tr>
           </thead>
           <tbody>
             {props.list?.map?.((med: any, index: number) => (
-              <tr className="bg-white" key={index}>
+              <tr
+                className={classNames(
+                  "bg-white",
+                  props.onClick && "hover:bg-gray-200 cursor-pointer"
+                )}
+                key={index}
+                onClick={() => props.onClick && props.onClick(med)}
+              >
                 {props.objectKeys.map((key, idx) => {
-                  if (idx === 0)
+                  if (
+                    props.maxWidthColumn !== undefined &&
+                    idx === props.maxWidthColumn
+                  ) {
                     return (
-                      <td className="px-6 py-4 w-[450px] text-sm leading-5 font-medium text-gray-900">
-                        {med[key]}
-                      </td>
-                    );
-                  else
-                    return (
-                      <td className="px-6 py-4 whitespace-nowrap text-sm leading-5 text-gray-900">
+                      <td className="px-6 py-4 w-full text-sm leading-5 font-medium text-gray-900">
                         {med[key]}
                       </td>
                     );
+                  }
+
+                  return (
+                    <td className="px-6 py-4 text-sm leading-5 text-gray-900">
+                      {med[key]}
+                    </td>
+                  );
                 })}
+                {props.actions && (
+                  <td className="px-6">{props.actions(med)}</td>
+                )}
               </tr>
             ))}
           </tbody>