ui-soxo-bootstrap-core 2.6.0 → 2.6.1-dev.10

package/core/modules/reporting/components/reporting-dashboard/reporting-dashboard.js

@@ -1,11 +1,9 @@
 import React, { useState, useEffect, useContext, useRef } from 'react';
 
-import { Table, Skeleton, Input, Tag, Modal, message, Pagination, Tooltip } from 'antd';
+import { Table, Skeleton, Input, Modal, message, Pagination } from 'antd';
 
 import { QrcodeOutlined } from '@ant-design/icons';
 
-import * as Icons from '@ant-design/icons';
-
 import { Location, FormCreator, GlobalContext, ExportReactCSV, getExportData, Card, TableComponent, QrScanner } from './../../../../lib/';
 
 import { CoreScripts } from './../../../../models/';
@@ -14,15 +12,15 @@ import moment from 'moment-timezone';
 
 import Button from '../../../../lib/elements/basic/button/button';
 
-import { Link } from 'react-router-dom';
-
 import './reporting-dashboard.scss';
 
 // import MenuDashBoard from '../../../../pages/homepage-api/menu-dashboard';
 import MenuDashBoardComponent from '../../../../lib/elements/basic/menu-dashboard/menu-dashboard';
 import { useHistory } from 'react-router-dom';
-
 import * as ReportingDashboardComp from '../index';
+import buildDisplayColumns from './display-columns/build-display-columns';
+import { getRedirectLink } from './display-columns/display-cell-renderer';
+import AdvancedSearchSelect from './adavance-search/advance-search';
 
 // import { isPdfFile } from 'pdfjs-dist';
 
@@ -64,6 +62,10 @@ export default function ReportingDashboard({
 
   const [cardLoading, setCardLoading] = useState(true);
 
+  const [searchParameters, setSearchParameters] = useState([]);
+
+  const [searchValues, setSearchValues] = useState({});
+
   const [dashboardVisible, setDashBoardVisible] = useState(false);
 
   const [formContents, setformContents] = useState({});
@@ -107,16 +109,14 @@ export default function ReportingDashboard({
     const fetchId = idOverride || id;
     await CoreScripts.getRecord({ id: fetchId, dbPtr }).then(async ({ result }) => {
       // Check if display columns are provided from backend
-      if (result.display_columns) {
-        // Parse and set columns from stored JSON
+      let parsedColumns = [];
 
-        setColumns(JSON.parse(result.display_columns));
-      } else {
-        // Reset columns if no display columns exist
-
-        setColumns([]);
+      if (result.display_columns) {
+        parsedColumns = JSON.parse(result.display_columns);
       }
-      await prepareInputParameters(result);
+      setColumns(parsedColumns);
+
+      await prepareInputParameters(result, parsedColumns);
 
       if (result.summary_columns) {
         setSummaryColumns(JSON.parse(result.summary_columns));
@@ -161,7 +161,7 @@ export default function ReportingDashboard({
    */
 
   //Prepare input parameters by mapping default values and binding models if needed
-  async function prepareInputParameters(record) {
+  async function prepareInputParameters(record, parsedColumns) {
     setLoading(true);
     let urlParams = Location.search();
 
@@ -173,6 +173,8 @@ export default function ReportingDashboard({
     parameters = record.input_parameters ? JSON.parse(record.input_parameters) : null;
 
     let formContent = {};
+    const searchFields = parameters.filter((p) => p.type === 'search');
+    setSearchParameters([...searchFields]);
 
     parameters = await parameters?.map((record) => {
       // Only if the url params does have a matching value ,
@@ -216,7 +218,13 @@ export default function ReportingDashboard({
       if (record.type === 'date' && !formContent[record.field]) {
         formContent[record.field] = moment().tz(process.env.REACT_APP_TIMEZONE);
       }
-
+      // if (record.type === 'search') {
+      //   return {
+      //     ...record,
+      //     component: AdvancedSearchSelect,
+      //     required: record.required,
+      //   };
+      // }
       if (['reference-select', 'reference-search', 'select'].indexOf(record.type) !== -1) {
         // let model = "";
         let model = CustomModels[record.modelName];
@@ -237,7 +245,7 @@ export default function ReportingDashboard({
     setformContents(formContent);
 
     // Trigger form submission
-    onFinish(formContent, null, record.input_parameters);
+    onFinish(formContent, null, record.input_parameters, parsedColumns);
 
     setLoading(false);
 
@@ -248,7 +256,7 @@ export default function ReportingDashboard({
     } else {
       //// Filter the array "parameters" and keep only elements where "type" is present (truthy)
       //Keep only parameters that have a "type" → used for UI display
-      let filter = parameters.filter((ele) => ele.type);
+      let filter = parameters.filter((ele) => ele.type && ele.type !== 'search');
       // Update the "details" state with the filtered results
 
       setDetails([...filter]);
@@ -261,7 +269,7 @@ export default function ReportingDashboard({
     getPatientDetails();
   }
 
-  const fetchReportData = async (id, values, dbPtr, pagination) => {
+  const fetchReportData = async (id, values, dbPtr, pagination, parsedColumns) => {
     const { current, pageSize } = pagination || {};
     // If card script id is exist load that id otherwise load id
     const coreScriptId = scriptId.current ? scriptId.current : id;
@@ -290,17 +298,23 @@ export default function ReportingDashboard({
       if (scope) {
         formBody = { body: { ...scope, ...paginationData } };
       }
+
       // Fetch result
       const result = await CoreScripts.getReportingLisitng(coreScriptId, formBody, dbPtr);
+
+      const apiData = Array.isArray(result) ? result : Array.isArray(result?.result) ? result.result : [];
+
       // Handle both result formats
-      let resultDetails = result[0];
+      let resultDetails = apiData[0] || [];
       if (result?.result && result?.result[0]) {
         resultDetails = result.result[0];
       }
       // Update patients
       setPatients(resultDetails || []);
+      console.log(parsedColumns);
+
       // Check if columns are not yet defined
-      if (columns.length === 0 && resultDetails.length > 0) {
+      if (parsedColumns.length === 0 && resultDetails.length > 0) {
         // Create columns dynamically from resultDetails keys
         setColumns((prev) => {
           if (prev.length > 0) return prev;
@@ -324,46 +338,183 @@ export default function ReportingDashboard({
       }
     } catch (error) {
       console.error('Error fetching report data:', error);
-      message.warn('Please try again');
     } finally {
       // Always runs, success or error
       setLoading(false);
     }
   };
 
-  // Handle Submit
-  const handleSubmit = (values) => {
-    const { pageSize } = pagination;
-    const resetPage = 1;
+  /**
+   * 
+   * @param {*} searchValues 
+   * @param {*} searchParameters 
+   * @returns 
+   */
+  const buildSearchCondition = (searchValues, searchParameters) => {
+  let searchCondition = "";
+
+  Object.keys(searchValues).forEach((key) => {
+    const arr = searchValues[key];
+    if (!Array.isArray(arr) || arr.length === 0) return;
+
+    const param = searchParameters.find((p) => p.field === key);
+    if (!param) return;
+
+    const operator = (param.search_operator || "").trim().toUpperCase();
+    const column = param.db_column || key;
+
+    if (operator === "LIKE") {
+      const likeConditions = arr
+        .map((v) => `${column} LIKE '${v}'`)
+        .join(" OR ");
+      searchCondition += ` AND (${likeConditions})`;
+    }
+
+    else if (operator === "IN") {
+      const valueList = arr.map((v) => `'${v}'`).join(",");
+      searchCondition += ` AND ${column} IN (${valueList})`;
+    }
+
+    else if (operator === "=") {
+      const eqConditions = arr
+        .map((v) => `${column} = '${v}'`)
+        .join(" OR ");
+      searchCondition += ` AND (${eqConditions})`;
+    }
+
+    else if (operator === "!=") {
+      const neqConditions = arr
+        .map((v) => `${column} != '${v}'`)
+        .join(" AND ");
+      searchCondition += ` AND (${neqConditions})`;
+    }
+
+    else {
+      // fallback for other operators like > < >= <=
+      const conditions = arr
+        .map((v) => `${column} ${operator} '${v}'`)
+        .join(" OR ");
+      searchCondition += ` AND (${conditions})`;
+    }
+  });
+
+  return searchCondition;
+};
+const handleSubmit = (values) => {
+
+  const hasSearchValues = Object.values(searchValues).some(
+    (v) => Array.isArray(v) && v.length > 0
+  );
+
+  let finalValues = values;
+
+  if (hasSearchValues) {
+
+    const searchCondition = buildSearchCondition(
+      searchValues,
+      searchParameters
+    );
+
+    const resetValues = {};
+    Object.keys(values).forEach((key) => {
+      resetValues[key] = null;
+    });
+
+    finalValues = {
+      ...resetValues,
+      search_condition: searchCondition,
+    };
+  }
 
-    // Reset script id on Submit
-    scriptId.current = null;
+  const { pageSize } = pagination;
+  const resetPage = 1;
 
-    // Get current query params
+  scriptId.current = null;
+
+  if (!hasSearchValues) {
     const currentUrlParams = Location.search();
     const { script_id, selected_card, ...cleanParams } = currentUrlParams;
 
-    // Construct new query string
     const newParams = new URLSearchParams({
       ...cleanParams,
       current: resetPage,
       pageSize,
     });
 
-    // Replace URL
     const newUrl = `${window.location.pathname}?${newParams.toString()}`;
-    window.history.replaceState({}, '', newUrl);
+    window.history.replaceState({}, "", newUrl);
+  }
 
-    // Trigger submit handler
-    onFinish(values, resetPage);
-  };
+  onFinish(finalValues, resetPage);
+};
+  // const handleSubmit = (values) => {
+
+  //   // Check if any advanced search value exists
+  //   const hasSearchValues = Object.values(searchValues).some((v) => Array.isArray(v) && v.length > 0);
+
+  //   let finalValues = values;
+  //   let searchCondition = '';
+  //   if (hasSearchValues) {
+  //     Object.keys(searchValues).forEach((key) => {
+  //       const arr = searchValues[key];
+  //       if (!Array.isArray(arr) || arr.length === 0) return;
+
+  //       // Find input parameter configuration
+  //       const param = searchParameters.find((p) => p.field === key);
+  //       if (!param) return;
+
+  //       const operator = (param.search_operator || '').trim(); // LIKE / IN / =
+  //       const column = param.db_column || key; // DB column mapping if available
+
+  //       // Build value list
+  //       const valueList = arr.map((v) => `'${v}'`).join(',');
+
+  //       // Build SQL condition dynamically
+  //       searchCondition += ` AND ${column} ${operator} (${valueList})`;
+  //     });
+
+  //     // Reset normal form parameters
+  //     const resetValues = {};
+  //     Object.keys(values).forEach((key) => {
+  //       resetValues[key] = null;
+  //     });
+
+  //     // Final values sent to API
+  //     finalValues = {
+  //       ...resetValues,
+  //       search_condition: searchCondition,
+  //     };
+  //   }
+
+  //   const { pageSize } = pagination;
+  //   const resetPage = 1;
+
+  //   scriptId.current = null;
 
+  //   // Update URL only when NOT using advanced search
+  //   if (!hasSearchValues) {
+  //     const currentUrlParams = Location.search();
+  //     const { script_id, selected_card, ...cleanParams } = currentUrlParams;
+
+  //     const newParams = new URLSearchParams({
+  //       ...cleanParams,
+  //       current: resetPage,
+  //       pageSize,
+  //     });
+
+  //     const newUrl = `${window.location.pathname}?${newParams.toString()}`;
+  //     window.history.replaceState({}, '', newUrl);
+  //   }
+
+  //   // Call report API
+  //   onFinish(finalValues, resetPage);
+  // };
   /**
    *
    * @param {*} values
    */
 
-  const onFinish = async (values, resetPage, inputParamsString) => {
+  const onFinish = async (values, resetPage, inputParamsString, parsedColumns) => {
     setLoading(true);
     setCardLoading(true);
     // // Check if the dashboard is visible and both start and end values are provided
@@ -423,7 +574,7 @@ export default function ReportingDashboard({
 
     // Call API
     try {
-      await fetchReportData(id, values, dbPtr, paginationData);
+      await fetchReportData(id, values, dbPtr, paginationData, parsedColumns);
     } finally {
       setLoading(false);
       setCardLoading(false);
@@ -448,23 +599,6 @@ export default function ReportingDashboard({
     <Card className="reporting-dashboard card card-shadow">
       {/** If dashBoardIds exist and contain elements, render MenuDashBoard*/}
 
-      {/* Page Header */}
-      {/* <div className="page-header">
-                <div>
-                    <Title style={{ marginBottom: '0px' }} level={4}>
-                        {config.caption || 'Report'}
-                    </Title>
-                </div>
-
-                <div className="right">
-                    <div className="date-and-fltr">
-                        <Button onClick={refresh} type="secondary" size={'small'}>
-                            <ReloadOutlined />
-                        </Button>
-                    </div>
-                </div>
-            </div> */}
-      {/* Page Header Ends */}
       {dashBoardIds?.length > 0 ? (
         <MenuDashBoardComponent
           dashBoardIds={dashBoardIds} //Pass the available dashboard IDs to the componen
@@ -534,6 +668,24 @@ export default function ReportingDashboard({
               />
             ) : null}
             {/* </Card> */}
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 10 }}>
+              {searchParameters.length > 0
+                ? searchParameters.map((param) => (
+                    <AdvancedSearchSelect
+                      key={param.field}
+                      parameter={param}
+                      field={param}
+                      value={searchValues[param.field] || []}
+                      onChange={(value) => {
+                        setSearchValues((prev) => ({
+                          ...prev,
+                          [param.field]: value,
+                        }));
+                      }}
+                    />
+                  ))
+                : null}
+            </div>
           </div>
 
           {/** GuestList component start*/}
@@ -617,266 +769,14 @@ function GuestList({
   const { isMobile, dispatch } = useContext(GlobalContext);
   const [single, setSingle] = useState({});
 
-  const getRedirectLink = (entry, record) => {
-    let redirectLink = entry.redirect_link;
-    if (entry.replace_variables) {
-      entry.replace_variables.forEach((replacement) => {
-        const value = record[replacement.field] || '';
-        redirectLink = redirectLink.replace(new RegExp(`@${replacement.field};`, 'g'), value);
-      });
-    }
-    return redirectLink;
-  };
-
   // const [view, setView] = useState(isMobile ? true : false); //Need to check this condition
-  const cols = [
-    ...[
-      {
-        title: '#',
-        dataIndex: 'index',
-        render: (value, item, index) => index + 1,
-        key: 'ColumnIndex',
-        fixed: isFixedIndex ? 'left' : null,
-      },
-    ],
-    ...columns.map((entry) => {
-      // if (entry.sort) {
-      //     return {
-      //         render: (record) => {
-
-      //             if (entry.render) {
-
-      //                 return entry.render(record);
-      //             } else {
-      //                 return record[entry.dataIndex]
-      //             }
-      //         },
-      //         title: entry.title,
-      //         key: entry.field,
-      //         sorter: (a, b) => entry.sort(a, b),
-      //         sortDirections: ['ascend', 'descend', 'ascend'],
-      //     };
-      // } else {
-      return {
-        render: (record) => {
-          let textColor = 'inherit';
-
-          if (entry.color) {
-            textColor = entry.color;
-          }
-          /** We can have x types of components that is to be rendered here */
-
-          /**1. Column Data */
-
-          /**2. Action  */
-
-          /**3. Custom Component - In future .   */
-
-          if (entry.render) {
-            return entry.render(record);
-
-            // The type of component can be differentiated by type/ we can also reuse
-            // any field present in the columns to avoid any additional field
-          } else if (entry.type === 'link') {
-            //Cheacking type of action to be done ie,If it contains a type then it will match with the record
-            // for example initally we are implementing it for a type link
-            // ie, we will return a link in query with the field as link and type link in display_columns
-            //So here we match the field returned by query with the type in display_columns
-
-            if (record[entry.field]) {
-              return (
-                <a href={record[entry.field]} target="_blank" rel="noopener noreferrer">
-                  View
-                </a>
-              );
-            }
-          } else if (entry.field === 'action') {
-            let redirectLink = entry.redirect_link;
-
-            // The variables to be replaced can be maintained
-            // as a configuration in the entry or the column configuration
-
-            // We iterate through all the variables that are present in the configuration
-            // and replace the link to generate the final link
-
-            entry.replace_variables.forEach((replacement) => {
-              redirectLink = redirectLink.replace(new RegExp('@' + replacement.field + ';', 'g'), record[replacement.field]);
-            });
-
-            return <Link to={`${redirectLink}`}>{entry.display_name_link ? entry.display_name_link : 'View'}</Link>;
-          } else if (entry.field === 'custom') {
-            // Make all the components in modules available for use in custom column of core script
-            // var genericComponents = require('./../../../../../../../nura-api-new/nura-desk/src/modules');
-            var genericComponents = CustomComponents;
-
-            // Arrive the component name
-            let componentName = entry.component;
-
-            let LoadedComponent = null;
-            // If there is custom components mensioned in the display_columns,
-            // then matching the custom components with the generic components
-            if (componentName) {
-              if (componentName && genericComponents[componentName]) {
-                LoadedComponent = genericComponents[componentName];
-              }
-            }
-
-            let propValue = {};
-            // If there is props value
-            if (entry.props) {
-              // Looping the props from the props mensioned in display_columns,
-              // Matching the field of record props field with the and return the
-              entry.props.forEach((values) => {
-                // Matching the fields of record with the props field
-                let valueCreation = record[values.field];
-                // Returning the values of field matched by fields
-                propValue[values.value] = valueCreation;
-              });
-            }
-
-            return (
-              <LoadedComponent
-                // Configuration will define
-                {...entry.config}
-                callback={() => {
-                  refresh();
-                }}
-                // record={record}
-
-                {...record}
-                // assigning the props
-                {...propValue}
-              />
-            );
-          } else {
-            // Check if both `color_code` exists in the record and `enableColor` is true
-            if (record.color_code && entry.enableColor) {
-              // If the column type is 'tag', render the field inside an Ant Design <Tag> with color
-              if (entry.columnType === 'tag') {
-                return <Tag color={record.color_code}>{record[entry.field]}</Tag>;
-
-                // If the column type is 'span', render the field inside a <span> with inline color style
-              } else if (entry.columnType === 'span') {
-                return <span style={{ color: record.color_code, overflowWrap: 'break-word', WebkitLineClamp: 3 }}>{record[entry.field]}</span>;
-              }
-            } else {
-              /**
-               * This code dynamically displays icons based on  data and a configuration
-               * When a column's configuration includes a displayIcons JSON, the code will check the corresponding data field.
-               *  If the field's value (e.g., "Pending") matches a key in that JSON,
-               * the system will display the specified icon with its defined color and size.
-               */
-              if (entry.displayIcons) {
-                // Get the field value
-                const fieldValue = record[entry.field]?.toString();
-
-                // Get the configuration for the icon from the JSON.
-                const displayConfig = entry.displayIcons[fieldValue];
-                if (displayConfig) {
-                  // Look up the actual component from our iconMap using the name from the JSON.
-                  const DynamicIcon = Icons[displayConfig.icon];
-                  // If a component is found, render it with the specified color and size.
-                  if (DynamicIcon) {
-                    return (
-                      <DynamicIcon
-                        style={{
-                          color: displayConfig.color,
-                          fontSize: displayConfig.size,
-                        }}
-                      />
-                    );
-                  }
-                }
-              } else {
-                //If the value is neither 'Y' nor 'N', return the actual field value
-                return <span style={{ color: textColor, whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{record[entry.field]}</span>;
-              }
-            }
-          }
-        },
-        field: entry.field,
-        // title: entry.title,
-        // title: (
-        //   <Tooltip title={entry.title}>
-        //     {entry.title}
-        //   </Tooltip>
-        // ),
-        title: (
-          <Tooltip title={entry.tooltip || entry.title}>
-            <span>{entry.title}</span>
-          </Tooltip>
-        ),
-        key: entry.field,
-        width: entry.width ? parseInt(entry.width) : 160,
-        fixed: entry.isFixedColumn ? entry.isFixedColumn : null, // Conditionally setting the 'fixed' key to 'left' if 'isColumnStatic' is true; otherwise, setting it to null.
-        // Check if filtering is enabled and patients is an array
-        filters:
-          entry.isFilterEnabled && Array.isArray(patients)
-            ? [...new Set(patients.map((item) => item[entry.field]).filter(Boolean))].map((value) => ({ text: value, value }))
-            : null,
-        // Apply the filter only if it's enabled for the column
-        onFilter: entry.isFilterEnabled ? (value, record) => record[entry.field] === value : null,
-        //If sorting is enabled for this entry, provide a sorter function
-        sorter: entry.isSortingEnabled ? (a, b) => String(a[entry.field]).localeCompare(String(b[entry.field])) : null,
-
-        // Apply the filter search
-        filterSearch: entry.isFilterEnabled ? entry.isFilterEnabled : false,
-        exportDefinition: (record) => {
-          //Custom components should not be downloaded
-          // return entry.field === 'custom' ? null : record[entry.field];
-          if (entry.field === 'custom') {
-            // Find the field key in props that corresponds to 'description'
-            const description = entry.props?.find((p) => p.value === 'description')?.field;
-
-            // Return the value from record.props if it exists
-            return description && record[description] ? record[description] : null;
-          }
-          return record[entry.field];
-        },
-        // Add align property based on column type
-        align: entry.type === 'number' ? 'right' : 'left',
-      };
-      // }
-    }),
-    // ...[
-    //     {
-    //         title: '',
-    //         key: 'action',
-    //         render: (text, record) => {
-    //             let detail = model.slice(0, model.length - 1);
-
-    //             return (
-    //                 <Space size="middle">
-    //                     {!schema.hideView && !actions.length ? <Link to={`/${city}/${model}/${text.id}`}>View</Link> : null}
-
-    //                     {actions.map((action) => (
-    //                         <Link to={action.url(record)}>{action.caption}</Link>
-    //                     ))}
-    //                 </Space>
-    //             );
-    //         },
-    //     },
-    // ],
-
-    // ...[
-    //     {
-    //         title: '',
-    //         key: 'action',
-    //         render: (text, record) => {
-    //             let detail = model.slice(0, model.length - 1);
-
-    //             return (
-    //                 <Link to={`${menu.path.replace(':id',visitid)}?op_no=${OpNo}`}>
-    //                     <Button size={'small'}>
-    //                         <PlayCircleOutlined />
-    //                         Go to Menu
-    //                     </Button>
-    //                 </Link>
-    //             );
-    //         },
-    //     },
-    // ],
-  ];
+  const cols = buildDisplayColumns({
+    columns,
+    patients,
+    isFixedIndex,
+    CustomComponents,
+    refresh,
+  });
 
   /**
    *
@@ -903,13 +803,13 @@ function GuestList({
   useEffect(() => {
     //Cheaking if there is patient data exists
     if (patients) {
-      let data = patients?.map((entry) => {
-        entry.rowIndex = entry.opb_id;
+      // let data = patients?.map((entry) => {
+      //   entry.rowIndex = entry.opb_id;
 
-        entry.dispatch = dispatch;
+      //   entry.dispatch = dispatch;
 
-        return entry;
-      });
+      //   return entry;
+      // });
 
       // setData(data);
 
@@ -974,7 +874,7 @@ function GuestList({
       setRedirectPatient(matched);
       message.success(`Match found for ${code}, redirecting...`);
 
-      const actionColumn = columns.find((col) => col.field === 'action');
+      const actionColumn = columns.find((col) => col.field === 'action') || columns.find((col) => col.type === 'action');
       if (actionColumn) {
         const redirectLink = getRedirectLink(actionColumn, patient);
         // history.push(redirectLink);
@@ -1066,12 +966,6 @@ function GuestList({
       </div>
 
       <div>
-        {/* {view ? (
-                    <>
-                        <CardList dataSource={data} columns={columns} />
-                    </>
-                ) : (
-                    <> */}
         <Card>
           {loading ? (
             <>
@@ -1080,10 +974,12 @@ function GuestList({
           ) : (
             <TableComponent
               size="small"
-              scroll={{ x: 'max-content' }}
+              // scroll={{ x: 'max-content' }}
+              scroll={{ x: 'max-content', y: '60vh' }}
               rowKey={(record) => record.OpNo}
               dataSource={filtered ? filtered : patients} // In case if there is no filtered values we can use patient data
               columns={cols}
+              sticky
               pagination={false}
               // title={config.caption}
               summary={(pageData) => {
@@ -1152,53 +1048,3 @@ function GuestList({
     </>
   );
 }
-
-// //Mobile view card Section
-// function CardList({ dataSource, url }) {
-//     const { user = {}, dispatch } = useContext(GlobalContext);
-
-//     function onClick(item) {
-//         Location.navigate({
-//             url: `/lab-detail/${item.BillID}`,
-//         });
-
-//         dispatch({ type: 'index', payload: item.rowIndex });
-//     }
-
-//     return dataSource.map((item, index) => {
-//         // to={`/lab-detail/${item.BillID}`}
-//         return (
-//             <div
-//                 key={index}
-//                 className="report-item"
-//                 onClick={() => {
-//                     onClick(item);
-//                 }}
-//             >
-//                 <GuestCard record={item} />
-//             </div>
-//         );
-//     });
-// }
-
-// function GuestCard({ record }) {
-//     return (
-//         <Card className="card vehicle-card">
-//             <div className="card">
-//                 <h2 className="title">{record.PName}</h2>
-
-//                 <h4 className="values">{record.OpNo}</h4>
-
-//                 <h3 className="values">{record.Test}</h3>
-
-//                 <h3 className="values">Primary Result : {record.PrimaryResult || 'Pending'}</h3>
-
-//                 <Text type="secondary">{record.Mobile}</Text>
-
-//                 <h4 className="values">{record.Date}</h4>
-//             </div>
-//         </Card>
-//     );
-// }
-//     );
-// }