@visns-studio/visns-components 5.0.19 → 5.0.21

package/src/components/crm/generic/GenericDashboard.jsx

@@ -1,42 +1,508 @@
+import '../../styles/global.css';
+
 import React, { useState, useEffect } from 'react';
-import { toast } from 'react-toastify';
+import { Link } from 'react-router-dom';
+import { ResponsiveBar } from '@nivo/bar';
+import { ResponsiveLine } from '@nivo/line';
+import { ResponsivePie } from '@nivo/pie';
+import Popup from 'reactjs-popup';
+import { CircleX } from 'akar-icons';
+
 import CustomFetch from '../../crm/Fetch';
+import MultiSelect from '../../crm/MultiSelect';
 
-const GenericDashboard = ({ userProfile }) => {
-    const [data, setData] = useState([]);
+import styles from './styles/GenericDashboard.module.scss';
+import { drop } from 'lodash';
 
-    return (
-        <div className="grid">
-            <div className="grid__row">
-                <div className="grid__three dashtopwidge">
-                    <div className="dashtopwidge__left">
-                        <h2>
-                            Current
-                            <span>
-                                <strong>Enquiries</strong>
-                            </span>
-                        </h2>
-                    </div>
-                    <div className="dashtopwidge__right">
-                        <span>0</span>
+const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
+
+function GenericDashboard({ setting }) {
+    const [data, setData] = useState({});
+    const [dropdowns, setDropdowns] = useState({});
+    const [filters, setFilters] = useState({}); // Track filter values for each widget
+    const [modalShow, setModalShow] = useState(false);
+    const [modalContent, setModalContent] = useState(null);
+
+    const fetchData = async (appliedFilters = {}) => {
+        try {
+            const promises = setting.widgets.map(async (widget) => {
+                const widgetFilters = appliedFilters[widget.id] || {};
+
+                // Fetch dropdown data if required
+                if (widget.filters) {
+                    for (const filter of widget.filters) {
+                        if (filter.url) {
+                            const initialFilterData = await CustomFetch(
+                                filter.url,
+                                'POST',
+                                filter.defaultParams || {}
+                            );
+                            setDropdowns((prevFilters) => ({
+                                ...prevFilters,
+                                [widget.id]: {
+                                    ...prevFilters[widget.id],
+                                    [filter.id]:
+                                        initialFilterData?.data?.data || [],
+                                },
+                            }));
+                        }
+                    }
+                }
+
+                // Fetch widget data with filters
+                return CustomFetch(
+                    widget.api.url,
+                    widget.api.method,
+                    widgetFilters
+                );
+            });
+
+            const results = await Promise.all(promises);
+
+            const fetchedData = setting.widgets.reduce((acc, widget, index) => {
+                acc[widget.id] = results[index]?.data;
+                return acc;
+            }, {});
+
+            setData(fetchedData);
+        } catch (error) {
+            console.error('Error fetching dashboard data:', error);
+        }
+    };
+
+    useEffect(() => {
+        fetchData(); // Fetch initial data
+    }, [setting]);
+
+    const openModal = (widgetId) => {
+        setModalContent(widgetId);
+        setModalShow(true);
+    };
+
+    const closeModal = () => {
+        setModalShow(false);
+    };
+
+    const handleFilterChange = (widgetId, key, value) => {
+        setFilters((prevFilters) => ({
+            ...prevFilters,
+            [widgetId]: {
+                ...prevFilters[widgetId],
+                [key]: value,
+            },
+        }));
+    };
+
+    const handleFilterSelectChange = (value, action, id) => {
+        const widgetId = id.split('.')[0];
+        const filterId = id.split('.')[1];
+
+        if (action.action === 'select-option') {
+            setFilters((prevFilters) => ({
+                ...prevFilters,
+                [widgetId]: {
+                    ...prevFilters[widgetId],
+                    [filterId]: value,
+                },
+            }));
+        } else if (action.action === 'clear') {
+            setFilters((prevFilters) => ({
+                ...prevFilters,
+                [widgetId]: {
+                    ...prevFilters[widgetId],
+                    [filterId]: [],
+                },
+            }));
+        } else if (action.action === 'remove-value') {
+            setFilters((prevFilters) => ({
+                ...prevFilters,
+                [widgetId]: {
+                    ...prevFilters[widgetId],
+                    [filterId]: value,
+                },
+            }));
+        }
+    };
+
+    const renderFilters = (widget) => {
+        if (!widget.filters || widget.filters.length === 0) return null;
+
+        return (
+            <div className={styles['filter-container']}>
+                <div className={styles['filter-header']}>
+                    <h3>Filters</h3>
+                </div>
+                <div className={styles['filter-fields']}>
+                    {widget.filters.map((filter) => {
+                        switch (filter.type) {
+                            case 'date':
+                                return (
+                                    <div
+                                        className={styles['filter-field']}
+                                        key={filter.id}
+                                    >
+                                        <label htmlFor={filter.id}>
+                                            {filter.label}
+                                        </label>
+                                        <input
+                                            id={filter.id}
+                                            type="date"
+                                            value={
+                                                filters[widget.id]?.[
+                                                    filter.id
+                                                ] || ''
+                                            }
+                                            onChange={(e) =>
+                                                handleFilterChange(
+                                                    widget.id,
+                                                    filter.id,
+                                                    e.target.value
+                                                )
+                                            }
+                                        />
+                                    </div>
+                                );
+                            case 'multi-dropdown-ajax':
+                                return (
+                                    <div
+                                        className={styles['filter-field']}
+                                        key={filter.id}
+                                    >
+                                        <label htmlFor={filter.id}>
+                                            {filter.label}
+                                        </label>
+                                        <MultiSelect
+                                            settings={{
+                                                id: `${widget.id}.${filter.id}`,
+                                            }}
+                                            multi={true}
+                                            options={
+                                                dropdowns[widget.id]?.[
+                                                    filter.id
+                                                ] || []
+                                            }
+                                            inputValue={
+                                                filters[widget.id]?.[
+                                                    filter.id
+                                                ] || []
+                                            }
+                                            onChange={handleFilterSelectChange}
+                                            style={{
+                                                multi_select_height: '52px',
+                                            }}
+                                        />
+                                    </div>
+                                );
+                            default:
+                                return null;
+                        }
+                    })}
+                    <div className={styles['filter-actions']}>
+                        <button
+                            className={`${styles.btn} ${styles['btn-primary']}`}
+                            onClick={() => {
+                                fetchData(filters); // Trigger fetchData with the current filters
+                            }}
+                        >
+                            Apply Filters
+                        </button>
+                        <button
+                            className={`${styles.btn} ${styles['btn-secondary']}`}
+                            onClick={() => {
+                                setFilters((prevFilters) => ({
+                                    ...prevFilters,
+                                    [widget.id]: {},
+                                }));
+
+                                fetchData(); // Reset filters and fetch data
+                            }}
+                        >
+                            Clear Filters
+                        </button>
                     </div>
                 </div>
-                <div className="grid__three dashtopwidge">
-                    <div className="dashtopwidge__left">
-                        <h2>
-                            Current{' '}
-                            <span>
-                                <strong>Enquiries</strong>
-                            </span>
-                        </h2>
+            </div>
+        );
+    };
+
+    const renderWidget = (widget) => {
+        const widgetData = data[widget.id] || [];
+
+        if (widgetData.length > 0 || widgetData?.data?.length > 0) {
+            switch (widget.type) {
+                case 'pie':
+                    return (
+                        <ResponsivePie data={widgetData} {...widget.props} />
+                    );
+                case 'bar':
+                    if (widgetData.keys && widget.props.keys) {
+                        widget.props.keys = widgetData.keys;
+                    }
+
+                    const barData = widgetData.bar?.data || widgetData;
+
+                    return (
+                        <div style={{ height: '600px' }}>
+                            <ResponsiveBar data={barData} {...widget.props} />
+                        </div>
+                    );
+                case 'line':
+                    return (
+                        <ResponsiveLine data={widgetData} {...widget.props} />
+                    );
+                case 'list':
+                    return (
+                        <ul className={styles.dashList}>
+                            {widgetData.length > 0 ? (
+                                widgetData
+                                    .slice(0, widget.limit || 4)
+                                    .map((item) => (
+                                        <li key={`${widget.id}-${item.id}`}>
+                                            <Link
+                                                to={`${widget.link.base}/$${
+                                                    item[widget.link.key]
+                                                }`}
+                                            >
+                                                <button>
+                                                    <strong>
+                                                        {widget?.item?.label &&
+                                                        item[widget.item.label]
+                                                            ? item[
+                                                                  widget.item
+                                                                      .label
+                                                              ]
+                                                            : ''}
+                                                    </strong>
+                                                    {widget.showDate && (
+                                                        <span>{item.date}</span>
+                                                    )}
+                                                </button>
+                                            </Link>
+                                        </li>
+                                    ))
+                            ) : (
+                                <li>
+                                    <button>
+                                        <strong>{widget.emptyMessage}</strong>
+                                    </button>
+                                </li>
+                            )}
+                        </ul>
+                    );
+                case 'table':
+                    const tableData = widgetData.data || widgetData;
+                    const tableKeys = widgetData.keys || [];
+
+                    return (
+                        <div className={styles['table-container']}>
+                            {tableData.length > 0 ? (
+                                <div className={styles['table-scroll']}>
+                                    <table>
+                                        <thead>
+                                            <tr>
+                                                <th>Form</th>
+                                                {tableData.map((row, index) => (
+                                                    <th
+                                                        key={`${toSnakeCase(
+                                                            row.supervisor_name
+                                                        )}-${index}`}
+                                                    >
+                                                        {row.supervisor_name}
+                                                    </th>
+                                                ))}
+                                                <th>Total</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {tableKeys.map(
+                                                (type, typeIndex) => {
+                                                    let total = 0; // Track total for the current form type
+                                                    return (
+                                                        <tr
+                                                            key={`form-type-${toSnakeCase(
+                                                                type
+                                                            )}`}
+                                                        >
+                                                            <td>{type}</td>
+                                                            {tableData.map(
+                                                                (
+                                                                    row,
+                                                                    rowIndex
+                                                                ) => {
+                                                                    const form =
+                                                                        row.forms.find(
+                                                                            (
+                                                                                form
+                                                                            ) =>
+                                                                                form.form_template_label ===
+                                                                                type
+                                                                        );
+
+                                                                    const count =
+                                                                        form
+                                                                            ? form.form_count
+                                                                            : 0;
+
+                                                                    total +=
+                                                                        count;
+
+                                                                    return (
+                                                                        <td
+                                                                            key={`${toSnakeCase(
+                                                                                row.supervisor_name
+                                                                            )}-${typeIndex}-${rowIndex}`}
+                                                                        >
+                                                                            {
+                                                                                count
+                                                                            }
+                                                                        </td>
+                                                                    );
+                                                                }
+                                                            )}
+                                                            <td>
+                                                                <strong>
+                                                                    {total}
+                                                                </strong>
+                                                            </td>
+                                                        </tr>
+                                                    );
+                                                }
+                                            )}
+                                            {/* Add a total row for supervisors */}
+                                            <tr>
+                                                <td>
+                                                    <strong>Total</strong>
+                                                </td>
+                                                {tableData.map(
+                                                    (row, rowIndex) => {
+                                                        const supervisorTotal =
+                                                            tableKeys.reduce(
+                                                                (sum, type) => {
+                                                                    const form =
+                                                                        row.forms.find(
+                                                                            (
+                                                                                form
+                                                                            ) =>
+                                                                                form.form_template_label ===
+                                                                                type
+                                                                        );
+
+                                                                    return (
+                                                                        sum +
+                                                                        (form
+                                                                            ? form.form_count
+                                                                            : 0)
+                                                                    );
+                                                                },
+                                                                0
+                                                            );
+
+                                                        return (
+                                                            <td
+                                                                key={`${toSnakeCase(
+                                                                    row.supervisor_name
+                                                                )}-total-${rowIndex}`}
+                                                            >
+                                                                <strong>
+                                                                    {
+                                                                        supervisorTotal
+                                                                    }
+                                                                </strong>
+                                                            </td>
+                                                        );
+                                                    }
+                                                )}
+                                                <td />
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            ) : (
+                                <div>No data available</div>
+                            )}
+                        </div>
+                    );
+                default:
+                    return null;
+            }
+        } else {
+            return null;
+        }
+    };
+
+    const renderRows = () => {
+        const columns = setting.columns || 3; // Default to 3 columns if not specified
+        const widgetChunks = [];
+
+        for (let i = 0; i < setting.widgets.length; i += columns) {
+            widgetChunks.push(setting.widgets.slice(i, i + columns));
+        }
+
+        return widgetChunks.map((row, rowIndex) => (
+            <div className={styles.grid__row} key={`row-${rowIndex}`}>
+                {row.map((widget) => (
+                    <div
+                        key={widget.id}
+                        className={`${styles.grid__full} ${
+                            widget.type !== 'list'
+                                ? widget.highlight
+                                    ? styles['dashwidget--highlight']
+                                    : styles.dashwidget
+                                : null
+                        }`}
+                    >
+                        <div className={styles.widgetTitle}>
+                            <h2>{widget.title}</h2>
+                        </div>
+                        {renderFilters(widget)}
+                        <div>{renderWidget(widget)}</div>
+                        {widget.modal && (
+                            <div className={styles.widgetAction}>
+                                <button
+                                    className={`${styles.btn} ${styles.dmore}`}
+                                    onClick={() => openModal(widget.id)}
+                                >
+                                    View all{' '}
+                                    <span>
+                                        ({data[widget.id]?.length || 0})
+                                    </span>
+                                </button>
+                            </div>
+                        )}
                     </div>
-                    <div className="dashtopwidge__right">
-                        <span>0</span>
+                ))}
+            </div>
+        ));
+    };
+
+    return (
+        <div className={styles.grid}>
+            {renderRows()}
+            <Popup open={modalShow} onClose={closeModal}>
+                <div className="modalwrap top--modal modalWide">
+                    <div className="modal">
+                        <div className="modal__header">
+                            <h1>{setting.modalTitles?.[modalContent]}</h1>
+                            <button
+                                className="modal__close"
+                                onClick={closeModal}
+                            >
+                                <CircleX strokeWidth={1} size={24} />
+                            </button>
+                        </div>
+                        <div className="modal__content">
+                            {modalContent &&
+                                renderWidget(
+                                    setting.widgets.find(
+                                        (w) => w.id === modalContent
+                                    )
+                                )}
+                        </div>
                     </div>
                 </div>
-            </div>
+            </Popup>
         </div>
     );
-};
+}
 
 export default GenericDashboard;