@visns-studio/visns-components 4.10.33 → 4.10.35

package/package.json

@@ -77,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "4.10.33",
+    "version": "4.10.35",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -59,8 +59,7 @@ import 'react-confirm-alert/src/react-confirm-alert.css';
 import CustomFetch from './Fetch';
 import Download from './Download';
 import Form from './Form';
-import _ from 'lodash';
-import { distance2D } from 'framer-motion';
+import _, { set } from 'lodash';
 
 const loadData = async (
     { skip, limit, sortInfo, filterValue },
@@ -182,17 +181,32 @@ const DataGrid = forwardRef(
         const [formId, setFormId] = useState(0);
         const [modalShow, setModalShow] = useState(false);
 
+        const [formSettingData, setFormSettingData] = useState({});
+        const [formSettingType, setFormSettingType] = useState('');
+        const [formSettingId, setFormSettingId] = useState(0);
+        const [modalSettingShow, setModalSettingShow] = useState(false);
+
         /** Modal Functions */
-        const modalOpen = (formType, formId) => {
+        const modalOpen = (type, id) => {
             setModalShow(true);
-            setFormType(formType);
-            setFormId(formId);
+            setFormType(type);
+            setFormId(id);
         };
 
         const modalClose = () => {
             setModalShow(false);
         };
 
+        const modalSettingOpen = (type, id) => {
+            setModalSettingShow(true);
+            setFormSettingType(type);
+            setFormSettingId(id);
+        };
+
+        const modalSettingClose = () => {
+            setModalSettingShow(false);
+        };
+
         useEffect(() => {
             setFormData(form);
         }, [form]);
@@ -555,6 +569,22 @@ const DataGrid = forwardRef(
                         ],
                     });
                     break;
+                case 'form':
+                    if (s.key) {
+                        let fsd = formSettingData;
+
+                        if (fsd.fields && fsd.fields.length > 0) {
+                            fsd.fields.forEach((fItem, fKey) => {
+                                if (fItem.id === s.key) {
+                                    fsd.fields[fKey].value = d.id;
+                                }
+                            });
+
+                            setFormSettingData(fsd);
+                        }
+                    }
+                    modalSettingOpen('create', 0);
+                    break;
                 case 'envelope':
                     CustomFetch(s.url, 'POST', { id: d[s.key] }, (result) => {
                         toast.success(result.message);
@@ -731,7 +761,17 @@ const DataGrid = forwardRef(
                                 const linkUrl = column.link.url;
                                 const linkKey =
                                     rowProps.columns[columnIndex].link.key;
-                                const rowData = rowProps.data[linkKey];
+                                const rowData = linkKey.includes('.')
+                                    ? linkKey
+                                          .split('.')
+                                          .reduce(
+                                              (obj, key) =>
+                                                  obj && obj[key]
+                                                      ? obj[key]
+                                                      : null,
+                                              rowProps.data
+                                          )
+                                    : rowProps.data[linkKey];
 
                                 if (column.link.hasOwnProperty('folder')) {
                                     const linkFolder =
@@ -1157,6 +1197,10 @@ const DataGrid = forwardRef(
                 }
             }
 
+            if (s.form) {
+                setFormSettingData(s.form);
+            }
+
             if (allow) {
                 switch (s.id) {
                     case 'activate':
@@ -1179,6 +1223,7 @@ const DataGrid = forwardRef(
                         return getIconComponent(Network);
                     case 'gallery':
                         return getIconComponent(Image);
+                    case 'form':
                     case 'link':
                         return getIconComponent(LinkOut);
                     case 'primary':
@@ -2833,6 +2878,29 @@ const DataGrid = forwardRef(
                         userProfile={userProfile}
                     />
                 </Popup>
+                <Popup
+                    open={modalSettingShow}
+                    onClose={modalSettingClose}
+                    closeOnDocumentClick={false}
+                    nested
+                >
+                    <Form
+                        ajaxSetting={ajaxSetting}
+                        api={api}
+                        closeModal={modalSettingClose}
+                        columnId={formSettingId}
+                        fetchTable={handleReload}
+                        formSettings={formSettingData}
+                        formType={formSettingType}
+                        gridRef={gridRef}
+                        mapbox={mapbox}
+                        modalOpen={modalSettingOpen}
+                        paramValue={paramValue}
+                        style={style}
+                        updateForm={setFormSettingData}
+                        userProfile={userProfile}
+                    />
+                </Popup>
                 <Popup
                     open={modalGalleryShow}
                     onClose={modalGalleryClose}

package/src/components/crm/Field.jsx

@@ -2,7 +2,7 @@ import '../styles/global.css';
 
 import React, { useEffect, useRef, useState } from 'react';
 import DatePicker from 'react-datepicker';
-import _ from 'lodash';
+import _, { forEach } from 'lodash';
 import Toggle from 'react-toggle';
 import moment from 'moment';
 import parse from 'html-react-parser';
@@ -227,6 +227,12 @@ function Field({
                             filter.orderBy = a.orderBy;
                         }
 
+                        if (a.where) {
+                            forEach(a.where, (w) => {
+                                filter.where.push(w);
+                            });
+                        }
+
                         CustomFetch(a.url, 'POST', filter, function (result) {
                             childDropdownCallback({
                                 id: a.id,

package/src/components/crm/Form.jsx

@@ -574,6 +574,10 @@ function Form({
         }
     };
 
+    useEffect(() => {
+        console.info('Form Settings', formSettings);
+    }, [formSettings]);
+
     const handleSubmit = async (e) => {
         try {
             if (e) {

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

@@ -1,42 +1,352 @@
-import React, { useState, useEffect } from 'react';
-import { toast } from 'react-toastify';
-import CustomFetch from '../../crm/Fetch';
+import React, { useEffect, useState } from 'react';
+import { ResponsiveBar } from '@nivo/bar';
+import Select from 'react-select';
+import styles from './styles/GenericDashboard.module.scss';
 
-const GenericDashboard = ({ userProfile }) => {
+import CustomFetch from '../Fetch';
+
+function GenericDashboard({ setting, userProfile }) {
     const [data, setData] = useState([]);
+    const [dropdown, setDropdown] = useState({ filters: [] });
+    const [selectedFilters, setSelectedFilters] = useState({});
+    const [filterValues, setFilterValues] = useState({});
+    const [errorMessage, setErrorMessage] = useState('');
+
+    const customStyles = {
+        control: (base) => ({
+            ...base,
+            height: '51px',
+            minHeight: '51px',
+            padding: '0',
+            borderColor: '#ced4da',
+            borderRadius: '5px',
+            boxShadow: 'none',
+            '&:hover': {
+                borderColor: '#80bdff',
+            },
+        }),
+        valueContainer: (base) => ({
+            ...base,
+            height: '51px',
+            padding: '0 8px',
+            display: 'flex',
+            alignItems: 'center',
+        }),
+    };
+
+    const fetchDropdownData = async () => {
+        try {
+            const response = await CustomFetch(
+                setting.api.dropdownUrl,
+                'POST',
+                {}
+            );
+            setDropdown((prevState) => ({
+                ...prevState,
+                filters: response?.data?.data || [],
+            }));
+        } catch (error) {
+            console.error('Error fetching dropdown data:', error);
+        }
+    };
+
+    const fetchData = async () => {
+        try {
+            const filters = Object.keys(filterValues).reduce((acc, key) => {
+                if (filterValues[key]) {
+                    acc[key] = filterValues[key];
+                }
+                return acc;
+            }, {});
+
+            const response = await CustomFetch(
+                setting.api.fetchDataUrl,
+                'POST',
+                filters
+            );
+            setData(response?.data?.data || []);
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+
+    const handleFilterChange = (filterId, value) => {
+        setFilterValues((prevValues) => ({
+            ...prevValues,
+            [filterId]: value,
+        }));
+    };
+
+    useEffect(() => {
+        fetchDropdownData();
+    }, []);
+
+    useEffect(() => {
+        fetchData();
+    }, [filterValues]);
 
     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>
-                    </div>
+        <div className={styles.grid}>
+            <div className={styles.filterContainer}>
+                <div className={styles.filterHeader}>
+                    <h3>{setting.filters?.title || 'Filters'}</h3>
                 </div>
-                <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>
+                <div className={styles.filterFields}>
+                    {setting.filters?.filters?.map((filter, index) => {
+                        switch (filter.type) {
+                            case 'dateRange':
+                                return (
+                                    <div
+                                        key={index}
+                                        className={styles.filterField}
+                                    >
+                                        <label htmlFor={filter.startDateId}>
+                                            {filter.startDateLabel ||
+                                                'Start Date'}
+                                        </label>
+                                        <input
+                                            id={filter.startDateId}
+                                            type="date"
+                                            value={
+                                                filterValues[
+                                                    filter.startDateId
+                                                ] || ''
+                                            }
+                                            onChange={(e) =>
+                                                handleFilterChange(
+                                                    filter.startDateId,
+                                                    e.target.value
+                                                )
+                                            }
+                                        />
+                                        <label htmlFor={filter.endDateId}>
+                                            {filter.endDateLabel || 'End Date'}
+                                        </label>
+                                        <input
+                                            id={filter.endDateId}
+                                            type="date"
+                                            value={
+                                                filterValues[
+                                                    filter.endDateId
+                                                ] || ''
+                                            }
+                                            onChange={(e) =>
+                                                handleFilterChange(
+                                                    filter.endDateId,
+                                                    e.target.value
+                                                )
+                                            }
+                                        />
+                                    </div>
+                                );
+                            case 'dropdown':
+                                return (
+                                    <div
+                                        key={index}
+                                        className={styles.filterField}
+                                    >
+                                        <label htmlFor={filter.id}>
+                                            {filter.label || 'Select Option'}
+                                        </label>
+                                        <Select
+                                            id={filter.id}
+                                            isMulti={filter.isMulti}
+                                            options={dropdown.filters.map(
+                                                (option) => ({
+                                                    value: option.id,
+                                                    label: option.label,
+                                                })
+                                            )}
+                                            styles={customStyles}
+                                            value={selectedFilters[filter.id]}
+                                            onChange={(value) =>
+                                                handleFilterChange(
+                                                    filter.id,
+                                                    value
+                                                )
+                                            }
+                                        />
+                                    </div>
+                                );
+                            default:
+                                return null;
+                        }
+                    })}
+                    <div className={styles.filterActions}>
+                        <button onClick={fetchData} className="btn btn-primary">
+                            {setting.filters?.applyButtonLabel ||
+                                'Apply Filters'}
+                        </button>
+                        <button
+                            onClick={() => {
+                                setFilterValues({});
+                                setErrorMessage('');
+                            }}
+                            className="btn btn-secondary"
+                        >
+                            {setting.filters?.clearButtonLabel ||
+                                'Clear Filters'}
+                        </button>
                     </div>
                 </div>
+                {errorMessage && (
+                    <div className={styles.errorMessage}>
+                        <p>{errorMessage}</p>
+                    </div>
+                )}
             </div>
+
+            {setting.widgets?.map((widget, index) => {
+                switch (widget.type) {
+                    case 'chart':
+                        return (
+                            <div key={index} className={styles.grid__row}>
+                                <div className={styles.grid__dashfull}>
+                                    <div className={styles.widgetTitle}>
+                                        <h2>
+                                            {widget.title || 'Chart Widget'}
+                                        </h2>
+                                    </div>
+                                    <div style={{ height: 600 }}>
+                                        {data.length > 0 ? (
+                                            <ResponsiveBar
+                                                data={data}
+                                                keys={widget.keys || []}
+                                                indexBy={
+                                                    widget.indexBy ||
+                                                    'supervisor'
+                                                }
+                                                margin={
+                                                    widget.margin || {
+                                                        top: 20,
+                                                        right: 200,
+                                                        bottom: 110,
+                                                        left: 80,
+                                                    }
+                                                }
+                                                padding={0.2}
+                                                valueScale={{ type: 'linear' }}
+                                                indexScale={{
+                                                    type: 'band',
+                                                    round: true,
+                                                }}
+                                                colors={{
+                                                    scheme:
+                                                        widget.colorScheme ||
+                                                        'set3',
+                                                }}
+                                                borderColor={{
+                                                    from: 'color',
+                                                    modifiers: [
+                                                        ['darker', 1.6],
+                                                    ],
+                                                }}
+                                                axisBottom={
+                                                    widget.axisBottom || {
+                                                        tickSize: 5,
+                                                        tickPadding: 5,
+                                                        tickRotation: 45,
+                                                    }
+                                                }
+                                                axisLeft={
+                                                    widget.axisLeft || {
+                                                        tickSize: 5,
+                                                        tickPadding: 5,
+                                                    }
+                                                }
+                                                legends={widget.legends || []}
+                                            />
+                                        ) : (
+                                            <div>Loading chart...</div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    case 'table':
+                        return (
+                            <div key={index} className={styles.grid__row}>
+                                <div className={styles.grid__dashfull}>
+                                    <div className={styles.widgetTitle}>
+                                        <h2>
+                                            {widget.title || 'Table Widget'}
+                                        </h2>
+                                    </div>
+                                    <div className={styles.tableContainer}>
+                                        {data.length > 0 ? (
+                                            <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th>
+                                                            {widget.tableHeader ||
+                                                                'Data'}
+                                                        </th>
+                                                        {data.map(
+                                                            (row, index) => (
+                                                                <th key={index}>
+                                                                    {
+                                                                        row.supervisor
+                                                                    }
+                                                                </th>
+                                                            )
+                                                        )}
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {widget.keys?.map(
+                                                        (key, index) => {
+                                                            let total = 0;
+                                                            return (
+                                                                <tr key={index}>
+                                                                    <td>
+                                                                        {key}
+                                                                    </td>
+                                                                    {data.map(
+                                                                        (
+                                                                            row
+                                                                        ) => {
+                                                                            const count =
+                                                                                row[
+                                                                                    key
+                                                                                ] ||
+                                                                                0;
+                                                                            total +=
+                                                                                count;
+                                                                            return (
+                                                                                <td
+                                                                                    key={
+                                                                                        row.supervisor
+                                                                                    }
+                                                                                >
+                                                                                    {
+                                                                                        count
+                                                                                    }
+                                                                                </td>
+                                                                            );
+                                                                        }
+                                                                    )}
+                                                                    <td>
+                                                                        {total}
+                                                                    </td>
+                                                                </tr>
+                                                            );
+                                                        }
+                                                    )}
+                                                </tbody>
+                                            </table>
+                                        ) : (
+                                            <div>No data available</div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    default:
+                        return null;
+                }
+            })}
         </div>
     );
-};
+}
 
 export default GenericDashboard;

package/src/components/crm/generic/styles/GenericDashboard.module.scss

@@ -0,0 +1,325 @@
+body {
+    min-height: 100vh;
+    background: var(--bg);
+}
+
+.grid {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+}
+
+.filterContainer {
+    background: #ffffff; // White background for contrast
+    border: 1px solid #dadce0; // Subtle border for separation
+    border-radius: 8px; // Rounded corners
+    padding: 1.5rem;
+    margin-bottom: 1.5rem; // Spacing below the filter section
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); // Subtle shadow for depth
+}
+
+.filterHeader {
+    text-align: left;
+    margin-bottom: 1rem;
+
+    h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
+    }
+}
+
+.filterFields {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem; // Gap between fields
+    align-items: flex-end; // Align fields vertically
+}
+
+.filterField {
+    flex: 1; // Ensures equal spacing for each field
+    display: flex;
+    flex-direction: column;
+    min-width: 200px; // Sets a minimum width for smaller screens
+
+    label {
+        font-size: 0.875rem;
+        font-weight: 600;
+        margin-bottom: 0.5rem;
+        color: #555;
+    }
+
+    input,
+    select {
+        border: 1px solid #dadce0;
+        border-radius: 5px;
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+        color: #333;
+        outline: none;
+        background-color: #f9f9f9;
+        width: 100%; // Ensures full width within the container
+        height: 51px;
+
+        &:focus {
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); // Focus effect
+        }
+    }
+}
+
+.filterActions {
+    display: flex;
+    gap: 0.75rem; // Gap between buttons
+
+    .btn {
+        padding: 0.5rem 1rem;
+        border-radius: 5px;
+        font-size: 0.875rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        cursor: pointer;
+        transition: background-color 0.2s;
+        height: 51px;
+
+        &.btn-primary {
+            background-color: #007bff;
+            color: #fff;
+            border: none;
+
+            &:hover {
+                background-color: #0056b3;
+            }
+        }
+
+        &.btn-secondary {
+            background-color: #f8f9fa;
+            color: #333;
+            border: 1px solid #ccc;
+
+            &:hover {
+                background-color: #e2e6ea;
+            }
+        }
+    }
+}
+
+.widgetTitle {
+    width: 100%;
+    height: auto;
+    padding: 0 0 1em 0;
+    margin-bottom: 1em;
+    border-bottom: 1px dashed #dadce0;
+
+    h2 {
+        font-size: 1.375em;
+        font-weight: 700;
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+        text-transform: capitalize;
+        text-align: left;
+    }
+}
+
+.dashList {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+
+        &:first-child {
+            button {
+                border-top-left-radius: var(--br);
+                border-top-right-radius: var(--br);
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+
+            button {
+                border-bottom-left-radius: var(--br);
+                border-bottom-right-radius: var(--br);
+                border-bottom: 1px solid #dadce0;
+            }
+        }
+
+        a {
+            text-decoration: none;
+        }
+
+        button {
+            width: 100%;
+            display: block;
+            background: white;
+            border: 1px solid #dadce0;
+            border-bottom: none;
+            outline: none;
+            padding: 0.5rem 1rem;
+            color: var(--paragraph-color);
+            text-align: left;
+            transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+            letter-spacing: 0.018em;
+
+            &:hover {
+                background: rgba(var(--secondary-color), 0.05);
+                transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+            }
+
+            strong {
+                color: var(--paragraph-color);
+            }
+
+            span {
+                color: rgba(var(--secondary-color-rgb), 1.1);
+                float: right;
+            }
+        }
+    }
+}
+
+.grid__row {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+    height: auto;
+    gap: 1rem;
+}
+
+.grid__dashfull {
+    width: 100%;
+    background: var(--item-color);
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    box-sizing: border-box;
+    padding: 20px;
+    margin: 8px 0;
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+}
+
+.tableContainer {
+    margin-top: 20px;
+    border: 1px solid #dadce0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.tableContainer table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    background-color: #ffffff;
+}
+
+.tableContainer th {
+    background-color: #f6f8fa;
+    color: #333;
+    font-weight: bold;
+    padding: 12px 15px;
+    border-bottom: 1px solid #dadce0;
+    text-transform: capitalize;
+    font-size: 14px;
+}
+
+.tableContainer td {
+    padding: 10px 15px;
+    border-bottom: 1px solid #eaeaea;
+    font-size: 13px;
+    color: #555;
+    text-align: center;
+}
+
+.tableContainer tbody tr:hover {
+    background-color: #f9f9f9;
+}
+
+.tableContainer tbody tr:nth-child(even) {
+    background-color: #f7f7f7;
+}
+
+.tableContainer th:first-child,
+.tableContainer td:first-child {
+    text-align: left;
+    font-weight: bold;
+    padding-left: 20px;
+}
+
+.tableContainer td:last-child {
+    border-right: none;
+}
+
+.tableContainer th:last-child {
+    border-right: none;
+}
+
+.dashwidget {
+    background: var(--primary-color) !important;
+    border-top: 1px solid transparent !important;
+    border-left: 1px solid transparent !important;
+    border-right: 1px solid transparent !important;
+    border-bottom: 4px solid rgba(var(--primary-color-rgb), 0.9) !important;
+
+    h2 {
+        color: var(--highlight-color) !important;
+    }
+
+    .widgetTitle {
+        border-bottom: 1px dashed rgba(#dadce0, 0.15);
+    }
+}
+
+.grid__contentlist {
+    li {
+        position: relative;
+
+        &:hover {
+            .edititem {
+                opacity: 1;
+                transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+            }
+        }
+
+        .edititem {
+            position: absolute;
+            right: 0;
+            text-decoration: none;
+            opacity: 0;
+            transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
+        }
+    }
+}
+
+.react-datepicker__month-select,
+.react-datepicker__year-select {
+    padding: 0.5em 0.85em;
+}
+
+.react-confirm-alert-overlay {
+    z-index: 999 !important;
+}
+
+.polActions {
+    position: fixed;
+    bottom: 15px;
+    right: 20px;
+    width: auto;
+
+    button {
+        display: block;
+        float: left;
+        padding: 0.35em 1em;
+        margin: 0 0.15em;
+    }
+}

package/src/index.js

@@ -37,6 +37,7 @@ import CmsSort from './components/cms/generic/CmsSort';
 import AuditLog from './components/crm/generic/AuditLog';
 import AuditLogs from './components/crm/generic/AuditLogs';
 import GenericAuth from './components/crm/generic/GenericAuth';
+import GenericDashboard from './components/crm/generic/GenericDashboard';
 import GenericDetail from './components/crm/generic/GenericDetail';
 import GenericDynamic from './components/crm/generic/GenericDynamic';
 import GenericFormBuilder from './components/crm/generic/GenericFormBuilder';
@@ -67,6 +68,7 @@ export {
     Field,
     Form,
     GenericAuth,
+    GenericDashboard,
     GenericDetail,
     GenericDynamic,
     GenericFormBuilder,