ui-soxo-bootstrap-core 2.4.24

package/core/modules/Informations/change-info/change-info.scss

@@ -0,0 +1,135 @@
+.change-profile-head {
+
+    display: flex;
+    // gap: 23px;
+
+    gap: 28px;
+    flex-direction: column;
+   
+}
+.change-profile{
+    margin-bottom: 12px;
+}
+
+.patient-card {
+    border: 1px solid #ddd;
+    padding: 10px;
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+}
+
+.middle-class {
+    .content {
+        padding-bottom: 12px;
+    }
+
+}
+
+.change-info {
+    margin-bottom: 12px;
+    .change-info-details {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+
+    .change-info-patient-info {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .patient-radio {
+        margin-right: 10px;
+    }
+
+    .additional-info {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+        margin-top: 10px;
+
+        span {
+            margin-right: 20px;
+        }
+    }
+}
+
+.change-info-container {
+    border: 1px dashed #d0d0d0;
+    padding: 10px;
+    margin: 10px 0;
+
+
+    .change-infoheader {
+        font-weight: bold;
+        font-size: 16px;
+        margin-bottom: 10px;
+    }
+
+    .info-items {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 5px;
+    }
+
+
+    .info-field {
+        margin-right: 20px;
+        white-space: nowrap;
+    }
+
+    .info-field span:first-child {
+        font-weight: bold;
+        margin-right: 5px;
+    }
+
+    .value {
+        color: #000;
+    }
+
+    .selected {
+        font-style: italic;
+        color: #a0a0a0;
+        margin-left: 5px;
+    }
+}
+
+.patient-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+
+.additional-info {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 10px;
+}
+
+.selected-info-item {
+    width: 150px;
+    /* Set the fixed width for each item */
+    margin-bottom: 10px;
+    /* Spacing between items */
+    display: flex;
+    flex-direction: column;
+    /* Align the title and value vertically */
+
+    .selected-info-field {
+        font-weight: bold;
+        margin-bottom: 5px;
+        /* Space between the label and value */
+    }
+
+    .selected-value {
+        color: #000;
+        white-space: nowrap;
+        /* Prevent text from wrapping */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        /* Truncate overflow text with ellipsis */
+    }
+}

package/core/modules/dashboard/components/dashboard-card/animations.js

@@ -0,0 +1,65 @@
+export const boxVariants = {
+    background: { backgroundColor: "#C62E65" },
+    entering: { x: -50, opacity: 1},
+    entered: {
+        x: 0,
+        opacity: 1,
+        transition: {
+            x: {
+                duration: 1,
+                ease: "easeOut"
+            },
+            opacity: {
+                duration: 1
+            }
+        },
+        
+    },
+    opacity0: { scale: 1},
+    opacity1: { 
+        scale: 1.2,
+        transition: {
+            scale: {
+                duration: 1
+            }
+        }
+    },
+    top: { y: [null, -150, 0] },
+    left: {
+      x: [null, -150, 0],
+      transition: {
+        duration: 3,
+        times: [0, 0.3, 0.8],
+        ease: ["backIn", "backOut"]
+      }
+    },
+    right: { x: [null, 150, 0] },
+    zoom: { scale: [null, 2, 1], rotate: [0, 90, 0] }
+  }
+  
+  export const barsVariant = {
+    animate: { transition: { staggerChildren: 0.095 } }
+  }
+  
+  export const barVariant = {
+    initial: { scaleY: 0 },
+    animate: {
+      scaleY: [null, 1, 0],
+      transition: { ease: "easeOut" }
+    }
+  }
+  
+  export const buttonsVariant = {
+    appear: { transition: { staggerChildren: 0.08 } },
+    animate: { transition: { staggerChildren: 0.12 } }
+  }
+  
+  export const buttonVariant = {
+    hidden: { opacity: 0, x: -20 },
+    appear: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
+    animate: {
+      y: [null, 50, 0],
+      scale: [1, 0, 1],
+      rotate: [0, 360, 0]
+    }
+  }

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

@@ -0,0 +1,197 @@
+import React, { useState, useEffect } from "react";
+
+import {animationControls, motion, useAnimation} from "framer-motion";
+
+import {
+  boxVariants,
+  barsVariant,
+  barVariant,
+  buttonsVariant,
+  buttonVariant
+} from "./animations"
+
+import { Modal, Col, Skeleton, Alert, Typography } from 'antd';
+
+import { Dashboard } from './../../../../models/'
+
+import { PopQueryDashboard } from './../../../'
+
+import { StatisticCard, BasicTable, ErrorBoundary } from './../../../../lib';
+
+
+const { Title } = Typography;
+
+/**
+ * Dashboard Card
+ *
+ * @param {*} param0
+ */
+export default function DashboardCard({ record }) {
+
+    const [visible, setVisible] = useState(false);
+
+    const [loading, setLoading] = useState(true);
+
+    const [result, setResult] = useState({});
+
+    useEffect(() => {
+        executeQuery(record.id);
+    }, []);
+
+    function executeQuery(id) {
+        setLoading(true);
+        let dbPtr = localStorage.db_ptr
+        // Execute dashboard
+        Dashboard.execDashboard(id,null,dbPtr)
+            .then((response) => {
+                var data = {};
+
+                let reportData = {};
+
+                // @todo 
+                // We are in the transition of incorporating the api bootstrap core for nura and 
+                // other projects , so we are handling both here . 
+                // When the reporting module is build , we have to consider its changes . 
+
+                if (response.result) {
+
+                    reportData = response.result[0];
+
+                } else {
+
+                    if (response[0]) {
+
+                        reportData = response[0];
+                    }
+                }
+
+                setResult(reportData);
+
+                setLoading(false);
+            })
+            .catch(() => {
+                setResult({ error: 'Error' });
+            });
+    }
+
+    let styles = {};
+
+    if (record.other_details) {
+
+        styles = JSON.parse(record.other_details)
+
+    }
+
+    /**
+     *
+    */
+    function viewPopQueryModal(id) {
+        setVisible(true);
+    }
+
+    /**
+     *
+     */
+    function executePopQuery() { }
+
+    var props = {};
+
+    if (loading) {
+        props.loading = true;
+    }
+
+    /**
+     * Display Each card according to graph type
+     */
+    function displayDashboardTile(record) {
+        // console.log(result);
+
+        switch (record.tiletypeptr) {
+            case 'BASIC':
+                return <StatisticCard result={result[0]} {...props} />;
+
+            case 'TABLE':
+                return <BasicTable styles={styles} result={result} {...props} />;
+
+            case 'LINEGPH':
+                return null;
+            // return <BarGraph data={result} {...props} />;
+
+            default:
+                return '';
+        }
+    }
+
+    let span = 6;
+
+    switch (record.tiletypeptr) {
+        case 'BASIC':
+            break;
+
+        case 'TABLE':
+            span = 24;
+            break;
+
+        case 'LINEGPH':
+            span = 24;
+            break;
+
+        default:
+        // return '';
+    }
+
+    function onCancel() {
+        setVisible(false);
+    }
+
+    //Animations//
+    const MotionLink = motion(Col);
+    const boxControls = useAnimation();
+
+    async function animate(){
+        await boxControls.start("entered");
+
+        //await boxControls.start("show");
+    } 
+
+    useEffect(() => {
+        animate();
+    }, [])
+
+    return (
+
+        <MotionLink 
+        variants={boxVariants}
+        initial={{y: 50, opacity: 0}}
+        animate={{y: 0, opacity: 1}}
+        transition={{delay: 0.5, duration: 0.4, ease: [.62,.28,.23,.99]}}
+        className="dashboard-card card" span={span} lg={{ span: span }} xs={{ span: 24 }} key={record.id}>
+            <Title level={5}>{record.text}</Title>
+
+            {result.error ? (
+                <>
+                    <Alert message="Error loading values" type="error" showIcon />
+                </>
+            ) : (
+                <>{loading ? <Skeleton /> : displayDashboardTile(record)}</>
+            )}
+
+            <span className="link" onClick={viewPopQueryModal}>View</span>
+
+            <Modal
+                width="80%"
+                destroyOnClose={true}
+                visible={visible}
+                title={record.text}
+                footer={null}
+                okText="Create"
+                cancelText="Cancel"
+                onCancel={onCancel}
+                onOk={() => { }}
+            >
+                <PopQueryDashboard record={record} id={record.id} />
+            </Modal>
+        </MotionLink>
+
+    );
+}