reorganized styles in common folder

src/hooks/useSearchGroupedResults.ts

@@ -7,8 +7,6 @@ export function useSearchGroupedResults(
 ) {
   const searchResults = useMemo(() => {
     if (searchString && searchString.trim() !== "") {
-      const search = searchString.toLowerCase();
-
       // Normalize the search string to lowercase
       const lowerSearchString = searchString.toLowerCase();
       return data.filter((orderGroup) =>

src/radiology-tabs/common/groupedOrdersTable.component.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import styles from "./listOrderDetails.scss";
+import styles from "./groupedOrdersTable.scss";
 import { useTranslation } from "react-i18next";
 import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework";
 import { GroupedOrdersTableProps } from "./radiologyProps.resource";
@@ -15,19 +15,13 @@ import {
   TableExpandHeader,
   TableCell,
   DataTable,
-  DataTableSkeleton,
   Pagination,
-  OverflowMenu,
-  OverflowMenuItem,
   TableContainer,
   TableToolbar,
   TableToolbarContent,
   TableToolbarSearch,
-  Tile,
-  Button,
 } from "@carbon/react";
 import ListOrderDetails from "./listOrderDetails.component";
-import { usePaginationInfo } from "@openmrs/esm-patient-common-lib";
 
 //  render Grouped by patient Orders in radiology module
 const GroupedOrdersTable: React.FC<GroupedOrdersTableProps> = (props) => {
@@ -67,7 +61,6 @@ const GroupedOrdersTable: React.FC<GroupedOrdersTableProps> = (props) => {
   } = usePagination(searchResults, currentPageSize);
 
   const pageSizes = [10, 20, 30, 40, 50];
-  const [expandedRows] = useState<Set<string>>(new Set());
 
   const rowsdata = useMemo(() => {
     return paginatedResults.map((patient) => ({

src/radiology-tabs/common/groupedOrdersTable.scss

@@ -0,0 +1,22 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+  .noOrdersDiv{
+    background-color: #fff;
+    text-align: center;
+    font-weight:bold;
+    width: 100%;
+  }
+
+  .ordersTableToolbar{
+    position: static;
+    height: 3rem;
+    overflow: visible;
+    margin: 0;
+  }
+
+  .ordersToolbarSearchBar{
+    background-color:#f4f4f4 ;
+  }
+

src/radiology-tabs/common/listOrderDetails.component.tsx

@@ -127,98 +127,117 @@ const ListOrderDetails: React.FC<ListOrdersDetailsProps> = (props) => {
         <Tile className={styles.orderTile}>
           {props.showActions && (
             <div className={styles.actionBtns}>
-              {props.actions.map((action) => {
-                if (action.actionName === "add-radiology-to-worklist-dialog") {
-                  return (
-                    <Button
-                      kind="primary"
-                      onClick={() => {
-                        const dispose = showModal(
-                          "add-radiology-to-worklist-dialog",
-                          {
-                            closeModal: () => dispose(),
-                            order: orders.find((order) => order.uuid == row.id),
-                          }
-                        );
-                      }}
-                    >
-                      {t("picklabrequest", "Pick Lab Request")}
-                    </Button>
-                  );
-                }
-                if (action.actionName === "procedureReportForm") {
-                  return (
-                    <Button
-                      kind="primary"
-                      onClick={() => {
-                        launchOverlay(
-                          t("procedureReportForm", "Procedure report form"),
-                          <ProcedureReportForm
-                            patientUuid={row.patient.uuid}
-                            order={orders.find((order) => order.uuid == row.id)}
-                          />
-                        );
-                      }}
-                    >
-                      {t("procedurereportform", "Procedure Report Form")}
-                    </Button>
-                  );
-                }
-                if (action.actionName === "review-radilogy-report-dialog") {
-                  return (
-                    <Button
-                      kind="tertiary"
-                      onClick={() => {
-                        const dispose = showModal(
-                          "review-radilogy-report-dialog",
-                          {
-                            closeModal: () => dispose(),
-                            order: orders.find((order) => order.uuid == row.id),
-                          }
-                        );
-                      }}
-                    >
-                      {t("reviewradiologyreport", "Review Radiology Report")}
-                    </Button>
-                  );
-                }
-                if (action.actionName === "radiology-reject-reason-modal") {
-                  return (
-                    <Button
-                      kind="tertiary"
-                      onClick={() => {
-                        const dispose = showModal(
-                          "radiology-reject-reason-modal",
-                          {
-                            closeModal: () => dispose(),
-                            order: orders.find((order) => order.uuid == row.id),
-                          }
-                        );
-                      }}
-                    >
-                      {t("rejectreason", "Reject Reason")}
-                    </Button>
-                  );
-                }
-                if (action.actionName === "reject-radiology-order-dialog") {
-                  return (
-                    <Button
-                      kind="danger"
-                      onClick={() => {
-                        const dispose = showModal(
-                          "reject-radiology-order-dialog",
-                          {
-                            closeModal: () => dispose(),
-                            order: orders.find((order) => order.uuid == row.id),
-                          }
-                        );
-                      }}
-                    >
-                      {t("rejectorder", "Reject Order")}
-                    </Button>
-                  );
-                }
-              })}
+              {props.actions
+                .sort((a, b) => {
+                  // Replace 'property' with the actual property you want to sort by
+                  if (a.displayPosition < b.displayPosition) return -1;
+                  if (a.displayPosition > b.displayPosition) return 1;
+                  return 0;
+                })
+                .map((action) => {
+                  if (
+                    action.actionName === "add-radiology-to-worklist-dialog"
+                  ) {
+                    return (
+                      <Button
+                        kind="primary"
+                        onClick={() => {
+                          const dispose = showModal(
+                            "add-radiology-to-worklist-dialog",
+                            {
+                              closeModal: () => dispose(),
+                              order: orders.find(
+                                (order) => order.uuid == row.id
+                              ),
+                            }
+                          );
+                        }}
+                      >
+                        {t("picklabrequest", "Pick Lab Request")}
+                      </Button>
+                    );
+                  }
+                  if (action.actionName === "procedureReportForm") {
+                    return (
+                      <Button
+                        kind="primary"
+                        onClick={() => {
+                          launchOverlay(
+                            t("procedureReportForm", "Procedure report form"),
+                            <ProcedureReportForm
+                              patientUuid={row.patient.uuid}
+                              order={orders.find(
+                                (order) => order.uuid == row.id
+                              )}
+                            />
+                          );
+                        }}
+                      >
+                        {t("procedurereportform", "Procedure Report Form")}
+                      </Button>
+                    );
+                  }
+                  if (action.actionName === "review-radilogy-report-dialog") {
+                    return (
+                      <Button
+                        kind="tertiary"
+                        onClick={() => {
+                          const dispose = showModal(
+                            "review-radilogy-report-dialog",
+                            {
+                              closeModal: () => dispose(),
+                              order: orders.find(
+                                (order) => order.uuid == row.id
+                              ),
+                            }
+                          );
+                        }}
+                      >
+                        {t("reviewradiologyreport", "Review Radiology Report")}
+                      </Button>
+                    );
+                  }
+                  if (action.actionName === "radiology-reject-reason-modal") {
+                    return (
+                      <Button
+                        kind="tertiary"
+                        onClick={() => {
+                          const dispose = showModal(
+                            "radiology-reject-reason-modal",
+                            {
+                              closeModal: () => dispose(),
+                              order: orders.find(
+                                (order) => order.uuid == row.id
+                              ),
+                            }
+                          );
+                        }}
+                      >
+                        {t("rejectreason", "Reject Reason")}
+                      </Button>
+                    );
+                  }
+                  if (action.actionName === "reject-radiology-order-dialog") {
+                    return (
+                      <Button
+                        kind="danger"
+                        onClick={() => {
+                          const dispose = showModal(
+                            "reject-radiology-order-dialog",
+                            {
+                              closeModal: () => dispose(),
+                              order: orders.find(
+                                (order) => order.uuid == row.id
+                              ),
+                            }
+                          );
+                        }}
+                      >
+                        {t("rejectorder", "Reject Order")}
+                      </Button>
+                    );
+                  }
+                })}
             </div>
           )}
           <div>

src/radiology-tabs/common/listOrderDetails.scss

@@ -52,22 +52,4 @@
     float: right;
     margin-left: 1rem;
     margin-top: 2rem;
-  }
-  .noOrdersDiv{
-    background-color: #fff;
-    text-align: center;
-    font-weight:bold;
-    width: 100%;
-  }
-
-  .ordersTableToolbar{
-    position: static;
-    height: 3rem;
-    overflow: visible;
-    margin: 0;
-  }
-
-  .ordersToolbarSearchBar{
-    background-color:#f4f4f4 ;
-  }
-
+  }

src/radiology-tabs/common/orderDetail.component.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./listOrderDetails.scss";
+import styles from "./orderDetail.scss";
 
 export const OrderDetail: React.FC<{ label: string; value: string | any }> = ({
   label,

src/radiology-tabs/common/orderDetail.scss

@@ -0,0 +1,15 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+  .bodyLong01 {
+    font-size: 13px !important;
+  }
+
+  .displayValue {
+    color: #525252;
+    font-weight: bold;
+    width: layout.$spacing-05;
+    height: layout.$spacing-05;
+  }
+

src/radiology-tabs/common/radiologyProps.resource.ts

@@ -41,4 +41,5 @@ export interface ListOrdersDetailsProps {
 
 export interface OrderAction {
   actionName: string;
+  displayPosition: 0 | number;
 }

src/radiology-tabs/orders-not-done/orders-not-done.component.tsx

@@ -9,7 +9,6 @@ interface NotDoneProps {
 }
 export const OrdersNotDone: React.FC<NotDoneProps> = ({ fulfillerStatus }) => {
   const { workListEntries, isLoading } = useOrdersWorklist("", fulfillerStatus);
-  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
@@ -25,7 +24,12 @@ export const OrdersNotDone: React.FC<NotDoneProps> = ({ fulfillerStatus }) => {
             showStartButton={false}
             showActions={true}
             showOrderType={false}
-            actions={[{ actionName: "radiology-reject-reason-modal" }]}
+            actions={[
+              {
+                actionName: "radiology-reject-reason-modal",
+                displayPosition: 1,
+              },
+            ]}
           />
         </div>
         <Overlay />

src/radiology-tabs/referred-test/referred-ordered.component.tsx

@@ -1,15 +1,10 @@
-import React, { useMemo, useState } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import {
-  DataTableSkeleton,
-  OverflowMenu,
-  OverflowMenuItem,
-} from "@carbon/react";
+import { DataTableSkeleton } from "@carbon/react";
 import { useOrdersWorklist } from "../../hooks/useOrdersWorklist";
 import GroupedOrdersTable from "../common/groupedOrdersTable.component";
 
 export const ReferredTests: React.FC = () => {
-  const { t } = useTranslation();
   const { workListEntries, isLoading } = useOrdersWorklist("", "EXCEPTION");
 
   return isLoading ? (

src/radiology-tabs/review-ordered/review-ordered.component.tsx

@@ -16,7 +16,9 @@ export const Review: React.FC = () => {
         showStartButton={false}
         showActions={true}
         showOrderType={true}
-        actions={[{ actionName: "review-radilogy-report-dialog" }]}
+        actions={[
+          { actionName: "review-radilogy-report-dialog", displayPosition: 1 },
+        ]}
       />
     </div>
   );

src/radiology-tabs/test-ordered/radiology-instructions/radiology-instructions.component.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   Button,
   ModalBody,