ui-soxo-bootstrap-core 2.4.24

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

@@ -0,0 +1,171 @@
+.reporting-dashboard {
+  // margin: 14px;
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .table-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+    padding-top: 10px;
+
+    .table-left {
+      display: flex;
+      align-items: center;
+
+      .menu-caption {
+        min-width: 100px;
+        font-weight: 500;
+      }
+    }
+
+    .table-right{
+      display: flex;
+      gap: 4px;
+    }
+  }
+  
+
+  .form-card {
+    padding: 20px 0px;
+    // background: #f5f5f578;
+    border: 1px solid #f1f1f1;
+    border-radius: 4px;
+    margin: 10px 0px;
+  }
+
+  .ant-card-body {
+    padding: 0px;
+  }
+
+  // margin: 0px 10px;
+
+  .ant-skeleton {
+    // padding: 0px 15px;
+  }
+
+  .ant-tabs {
+    position: relative;
+
+    button.ant-switch {
+      position: absolute;
+      right: 0px;
+      top: 4px;
+    }
+  }
+
+  .page-header {
+    display: flex;
+    justify-content: space-between;
+    // align-items: center;
+
+    //   .right{
+    //     display: flex;
+    //     justify-content: space-between;
+    //     width: 100%;
+    // }
+
+    .right {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // width: 100%;
+      .ant-form-item {
+        margin-bottom: 0px;
+        margin-right: 15px;
+      }
+      .ant-picker-range {
+        margin-right: 15px;
+      }
+      .ant-btn-sm {
+        height: 33px;
+        margin-right: 15px;
+      }
+      .ant-form {
+        display: flex;
+      }
+      .ant-form-item-label {
+        margin-top: -29px;
+      }
+    }
+
+    @media only screen and (max-width: 768px) {
+      flex-direction: column;
+      align-items: flex-start;
+      padding: 15px;
+      .right {
+        display: block;
+        justify-content: space-between;
+        width: 100%;
+        .ant-form-item-label {
+          margin-top: 0px;
+        }
+        .date-and-fltr {
+          display: flex;
+          margin-top: 15px;
+        }
+      }
+    }
+  }
+
+  p.size-hint {
+    margin: 10px 0px;
+  }
+
+  @media only screen and (max-width: 768px) {
+    .size-hint {
+      padding-left: 15px;
+    }
+  }
+
+  .vehicle-card {
+    margin-bottom: 20px;
+    padding: 20px;
+    box-shadow:
+      1px 0 8px 0 rgba(0, 0, 0, 0.05),
+      8px 8px 18px 0 rgba(0, 0, 0, 0.05);
+    margin: 15px 0;
+    border: 1px solid #efefef;
+    color: #49535d;
+
+    h4,
+    h3 {
+      margin-bottom: 0px;
+    }
+
+    .detail-wrapper {
+      .detail-element {
+        margin: 20px 0px;
+        h3 {
+          margin: 10px 0px;
+        }
+      }
+    }
+    .document-status {
+      margin: 10px 0px;
+    }
+
+    .title {
+      // color: red;
+      margin-bottom: 0px;
+    }
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .physicialLanding {
+    .page-wrapper {
+      padding-left: 15px;
+    }
+    .phycnListpgntn {
+      margin-right: 15px;
+    }
+
+    .patient-list .vehicle-card {
+      margin: 15px 15px;
+    }
+  }
+}

package/core/pages/homepage-api/homepage-api.js

@@ -0,0 +1,106 @@
+import React, { useState, useEffect, useContext } from 'react';
+
+import { Typography, Skeleton, Row } from 'antd';
+
+import { GlobalContext, MenuDashBoardComponent } from './../../lib/';
+
+import { Dashboard } from './../../models/';
+
+import { DashboardCard } from './../../modules/';
+
+import { NoticeBoard, Card } from './../../lib/';
+
+// import { Spotlight } from '../../components/spotlight-search/spotlight-search.component';
+
+import './homepage-api.scss';
+import MenuDashboardCard from '../../modules/dashboard/components/dashboard-card/menu-dashboard-card';
+
+const { Title } = Typography;
+
+export default function HomePage({ config, steps }) {
+  const { user = {} } = useContext(GlobalContext);
+
+  const [loading, setLoading] = useState(false);
+
+  const [list, setList] = useState([]);
+  let dashboardIds;
+  useEffect(() => {
+    if (user) {
+      getDashboard(); //Patiant list get function
+    }
+  }, [user]);
+
+  //PatiantData fetching function
+  async function getDashboard() {
+    setLoading(true);
+    //Cheacking if there is a specific role assigned to the user,
+    //If no role assigned the user_group will contain a result variable which returns no user found , else it will contain only user_group data
+    if (!user.user_group.result) {
+      Dashboard.loadDashboards(user).then((response) => {
+        let apiResponse = {};
+
+        // @todo When the reporting tool is build , we have to consider all of these
+        if (response.result && response.result.length) {
+          apiResponse = response.result;
+        } else if (response && response.length) {
+          apiResponse = response;
+        }
+
+        dashboardIds = response.map((item) => item.id);
+        setList(dashboardIds);
+        setLoading(false);
+      });
+    }
+  }
+  return (
+    <>
+      {list.length > 0 && (
+        <Card className="homepage">
+          {/* <NoticeBoard /> */}
+
+          {/* <br /> */}
+
+          {/* <div><Spotlight user={user} /></div> */}
+
+          {/* <Divider plain></Divider> */}
+
+          {/* <Card className="homepage-dashboard"> */}
+          {/* <Title style={{ marginBottom: '0px' }} level={3}>
+                            Overview
+                        </Title> */}
+
+          {/* <BarGraph className="graph-element" data={[]} /> */}
+
+          <div className="dashboard-cards">
+            {list.length ? (
+              <>
+                {loading ? (
+                  <Skeleton active />
+                ) : (
+                  <>
+                    {/* <Row gutter={20}> */}
+                    {/* {list
+                        // Sort in ascending asc of id
+                        .sort((a, b) => a.slno - b.slno)
+                        .map((entry, key) => ( */}
+                    {/* // <DashboardCard key={key} record={entry} /> */}
+                    {/* ))} */}
+                    {/* </Row> */}
+                    <Row gutter={20}>
+                      <MenuDashBoardComponent homePage={true} dashBoardIds={list}/>
+                    </Row>
+                  </>
+                )}
+              </>
+            ) : (
+              <div className="nodata">
+                <p></p>
+              </div>
+            )}
+          </div>
+          {/* </Card> */}
+        </Card>
+      )}
+    </>
+  );
+}

package/core/pages/homepage-api/homepage-api.scss

@@ -0,0 +1,234 @@
+.homepage {
+    margin-top: 66px;
+    margin-left: 8px;
+    margin-right: 10px;
+   
+
+    @media only screen and (max-width: 768px) {
+        margin: 15px 15px;
+    }
+
+    .homepage-dashboard {
+        // padding: 20px;
+        padding: 8px;
+
+        @media only screen and (max-width: 768px) {
+            padding: 5px 15px 15px 15px
+        }
+    }
+
+    .top-bar {
+        display: flex;
+
+        justify-content: space-between;
+
+        .upcoming-appointments {
+            margin: 10px ​20px;
+            margin: 10px;
+            /* margin-top: -10px; */
+            flex-grow: 1;
+            height: 210px;
+            overflow: scroll;
+            overflow: -moz-scrollbars-vertical;
+            overflow-y: scroll;
+
+            &::-webkit-scrollbar {
+                -webkit-appearance: none;
+                width: 7px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 4px;
+                background-color: whitesmoke;
+                -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+            }
+
+            .ant-timeline-item {
+                padding-bottom: 4px;
+            }
+
+            padding: 0px ​4px;
+
+            .small-card {
+                .ant-card-body {
+                    padding: 4px ​12px !important;
+                }
+
+                h4 {
+                    margin-bottom: 0px;
+                }
+
+                p {
+                    color: #52302a;
+                    font-size: 10px;
+                }
+
+                .card {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    cursor: pointer;
+                    margin: 0px 2px;
+                    padding: 1px 16px;
+                    border: 1px solid #f3f3f3;
+                    border-radius: 2px;
+                    box-shadow: 0px 0px 4px 4px #f8f8f8;
+
+                    &:hover {
+                        border-color: #dfdfdf;
+                        box-shadow: 0px 1px 3px 0px #e5e5e5;
+                        border-radius: 4px;
+
+                        .ant-btn {
+                            opacity: 1;
+                        }
+                    }
+
+                    .ant-btn {
+                        opacity: 0;
+                    }
+                }
+            }
+
+            .ant-timeline {
+                padding: 10px 0px;
+            }
+        }
+    }
+
+    .welcome-section {
+        width: 60%;
+        display: flex;
+        // border: 1px solid #e1e1e1;
+        margin: 10px 0px;
+
+        @media only screen and (max-width: 768px) {
+            padding: 20px;
+        }
+
+        justify-content: space-between;
+        position: relative;
+
+        height: 210px;
+
+        @media only screen and (max-width: 768px) {
+            width: 100%;
+
+            height: 180px;
+        }
+    }
+
+    .dashboard-cards {
+        // margin: 20px 0px;
+        padding: 8px;
+
+        @media only screen and (max-width: 768px) {
+            padding: 0px 16px;
+            .ant-row{max-width: 100%;
+                overflow: scroll;}
+        }
+           .ant-row{
+                display: flex;
+                gap: 8px;
+
+                flex-flow: row wrap;
+                min-width: 0;
+             }
+
+        .dashboard-card {
+        //     width: 100%;
+        // padding: 16px 8px; /* 8px left and right padding */
+        //  box-sizing: border-box;
+        // // background: #fff;
+        // // margin: 4px;
+        //  border-radius: 8px;
+
+
+      
+        //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        
+            .link {
+                cursor: pointer;
+                float: right;
+                font-weight: bold;
+                padding: 8px 8px;
+            }
+
+            @media only screen and (max-width: 768px) {
+                margin: unset;
+                margin: 10px ​0px;
+                margin-top: 10px;
+                margin-right: 0px;
+                padding: 15px;
+            }
+        }
+    }
+
+    .nodata .card h1{
+
+        margin-bottom: 0.5em;
+        color: rgba(0, 0, 0, 0.85);
+        font-weight: 600;
+        font-size: 16px;
+        line-height: 1.5;
+    }
+
+    .greeting {
+        @media only screen and (max-width: 768px) {
+            flex-basis: 48%;
+        }
+
+        .split {
+            display: flex;
+            align-items: baseline;
+
+            @media only screen and (max-width: 768px) {
+                flex-direction: column;
+            }
+        }
+
+        p {
+            margin-top: 30px;
+
+            @media only screen and (max-width: 768px) {
+                margin-top: 10px;
+            }
+
+            strong {
+                text-transform: capitalize;
+                color: #349328;
+            }
+        }
+
+        h1.ant-typography {
+            margin-bottom: 0px;
+            font-size: 32px;
+            font-weight: 200;
+        }
+
+        h4.ant-typography {
+            margin: 0px 10px;
+
+            @media only screen and (max-width: 768px) {
+                margin: 0px;
+            }
+        }
+    }
+
+    .welcome-image {
+        width: 150px;
+        position: absolute;
+        right: 25px;
+        top: 0px;
+    }
+
+    // .graph-element {
+    //     width: 100px;
+
+    .graph-container {
+        // width: 300px;
+        height: 400px;
+    }
+
+    // }
+}

package/core/pages/homepage-api/menu-dashboard.js

@@ -0,0 +1,169 @@
+// /**
+//  * MenuDashBoard Component
+//  *
+//  * This component is responsible for rendering the menu dashboard.
+//  * It fetches dashboard data based on user roles and displays them using `MenuDashboardCard` components.
+//  */
+
+// import { useState, useEffect, useContext } from 'react';
+
+// import { Skeleton, Row } from 'antd';
+
+// import { GlobalContext, Card } from './../../lib/';
+
+// import { Dashboard } from './../../models/';
+
+// import MenuDashboardCard from '../../modules/dashboard/components/dashboard-card/menu-dashboard-card';
+
+// import './menu-dashboard.scss';
+
+// /**
+//  * MenuDashBoard Component
+//  *
+//  * Renders the dashboard menu based on the provided `dashBoardIds`.
+//  * Fetches dashboard data and updates the UI accordingly.
+//  *
+//  * @param {Object} props - The component props
+//  * @param {Array} props.dashBoardIds - List of dashboard IDs to fetch data for
+//  * @param {Function} props.callback - Callback function for handling dashboard interactions
+//  * @returns {JSX.Element} The rendered MenuDashBoard component
+//  */
+// export default function MenuDashBoard({ dashBoardIds, callback }) {
+//   const { user = {} } = useContext(GlobalContext);
+
+//   const [loading, setLoading] = useState(false);
+
+//   const [list, setList] = useState([]);
+
+//   const [selectedCardId, setSelectedCardId] = useState(false);
+
+//   /**
+//    * useEffect Hook
+//    *
+//    * Triggers the `getDashboard` function whenever the `user` object changes.
+//    * Ensures dashboard data is fetched whenever a user logs in or changes.
+//    */
+//   useEffect(() => {
+//     if (dashBoardIds) {
+//       getDashboard(); //Patiant list get function
+//     }
+//   }, [user]);
+
+//   /**
+//    * getDashboard Function
+//    *
+//    * Fetches the dashboard menu items based on `dashBoardIds`.
+//    * Updates the `list` state with the fetched data.
+//    */
+//   async function getDashboard() {
+//     setLoading(true);
+
+//     // Check if there are dashboard IDs to fetch data for
+//     if (dashBoardIds.length > 0) {
+//       await Dashboard.loadMenuDashboards(dashBoardIds).then((response) => {
+//         let apiResponse = {};
+
+//         // @todo When the reporting tool is build , we have to consider all of these
+//         if (response.result && response.result.length) {
+//           apiResponse = response.result;
+//         } else if (response && response.length) {
+//           apiResponse = response;
+//         }
+//         // Group by groupPtr inside other_details
+//         const groupedData = {};
+
+//         apiResponse.forEach((item) => {
+//           try {
+//             const otherDetails = item.other_details ? JSON.parse(item.other_details) : {};
+
+//             const groupPtr = otherDetails.groupPtr;
+
+//             const groupCaption = otherDetails.groupcaption || ''; // default empty string if not available
+
+//             if (groupPtr) {
+//               if (!groupedData[groupPtr]) {
+//                 groupedData[groupPtr] = {
+//                   groupPtr,
+//                   groupCaption,
+//                   // colorCode,
+//                   dashboards: [],
+//                 };
+//               }
+
+//               // Optional: update groupCaption if it exists newly (in case not present earlier)
+//               if (groupCaption) {
+//                 groupedData[groupPtr].groupCaption = groupCaption;
+//               }
+
+//               // Create a new dashboard item that includes style and colorCode
+//               const dashboardItem = {
+//                 ...item, // Spread other properties of the item
+//                 // style: groupStyle, // Add the group style
+//                 // colorCode, // Add the color code
+//               };
+
+//               // Push the new dashboard item into the dashboards array
+//               groupedData[groupPtr].dashboards.push(dashboardItem);
+//             }
+//           } catch (error) {
+//             console.error('Error parsing other_details:', error);
+//           }
+//         });
+
+//         // Convert groupedData to array format
+//         const groupedArray = Object.values(groupedData);
+
+//         setList(groupedArray);
+
+//         setLoading(false);
+//       });
+//     }
+
+//     setLoading(false);
+//   }
+
+//   return (
+//     <>
+//       {loading ? (
+//         <Skeleton />
+//       ) : (
+//         <span className="menu-dashoard-section">
+//           <div className="menu-dashboard">
+//             <div className="dashboard-section" style={{ marginBottom: '10px' }}>
+//               {/* <Row gutter={20}>
+//                     {list
+//                       // Sort in ascending asc of id
+//                       .sort((a, b) => a.slno - b.slno)
+//                       .map((entry, key) => (
+//                         <MenuDashboardCard key={key} record={entry} callback={callback} />
+//                       ))}
+//                   </Row> */}
+//               {list.map((group) => (
+//                 <Card key={group.groupPtr}>
+//                   {/* <h3>Group: {group.groupPtr}</h3> */}
+//                   <h3 style={{ marginBottom: '10px' }}>{group.groupCaption}</h3>
+
+//                   <Row gutter={20}>
+//                     {group.dashboards
+//                       .sort((a, b) => a.slno - b.slno)
+//                       .map((entry, key) => (
+//                         <MenuDashboardCard
+//                           key={key}
+//                           record={entry}
+//                           callback={callback}
+//                           selectedCardId={selectedCardId}
+//                           onSelect={() => setSelectedCardId(entry.id)}
+//                           // setSelectedCardId={setSelectedCardId}
+//                         />
+//                       ))}
+//                   </Row>
+//                 </Card>
+//               ))}
+//               {/* </> */}
+//             </div>
+//           </div>
+//         </span>
+//       )}
+//     </>
+//   );
+// }

package/core/pages/homepage-api/menu-dashboard.scss

@@ -0,0 +1,12 @@
+// .menu-dashboard{
+//     .dashboard-section{
+//         margin-bottom: 10px;
+//         display: flex;
+//         flex-direction: row;
+//         gap: 10px;
+//     }
+//     .ant-card-body{
+//         margin-left: 10px;
+//         margin-right: 10px;
+//     }
+// }