@visns-studio/visns-components 5.1.16 → 5.1.18

package/package.json

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

package/src/components/crm/Field.jsx

@@ -11,7 +11,19 @@ import { BlockPicker } from 'react-color';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { NumericFormat, PatternFormat } from 'react-number-format';
 import { Editor } from '@tinymce/tinymce-react';
-import { CirclePlus, CloudDownload, Copy, TrashCan } from 'akar-icons';
+import {
+    Edit,
+    ChevronRight,
+    Circle,
+    CircleFill,
+    CirclePlus,
+    CloudDownload,
+    Copy,
+    Minus,
+    ArrowBack,
+    TrashCan,
+    CircleX,
+} from 'akar-icons';
 import { toast } from 'react-toastify';
 import styles from './styles/Field.module.scss';
 
@@ -19,6 +31,9 @@ import CustomFetch from './Fetch';
 import Form from './Form';
 import MultiSelect from './MultiSelect';
 import Select from './Select';
+import SketchConfig from './sketch/json/config.json';
+import SketchField from './sketch/SketchField';
+import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from '../cms/DropZone';
@@ -63,6 +78,30 @@ function Field({
     const [formItemClass, setFormItemClass] = useState('');
     const [options, setOptions] = useState([]);
 
+    /** Canvas States */
+    const [canvasPopupOpen, setCanvasPopupOpen] = useState(false);
+    const [canvasUrl, setCanvasUrl] = useState('');
+    const [sketchTool, setSketchTool] = useState(Tools.Pencil);
+    const [toolClass, setToolClass] = useState('pencil');
+    const [lineWidth, setLineWidth] = useState(2);
+    const [lineColor, setLineColor] = useState('rgba(0, 0, 0, 1)');
+    const sketchRef = useRef(null);
+
+    /** Canvas Functions */
+    const handleCanvasSave = async () => {
+        // Save the current canvas state
+        const canvasState = sketchRef.current.saveCanvasState();
+
+        // Export the canvas image data as a Base64 string
+        const imageData = await sketchRef.current.exportCanvasImage(); // Use await here
+
+        // Call the onChangeCanvas function with both values
+        onChangeCanvas(settings, canvasState, imageData);
+
+        // Close the canvas popup
+        setCanvasPopupOpen(false);
+    };
+
     const cover = {
         position: 'fixed',
         top: '0px',
@@ -203,6 +242,7 @@ function Field({
                         }
                     });
                 } else {
+                    console.info(s);
                     filter = {
                         where: [
                             {
@@ -212,20 +252,22 @@ function Field({
                         ],
                     };
 
-                    if (s.fields) {
-                        filter.fields = s.fields;
+                    if (s?.child?.fields) {
+                        filter.fields = s.child.fields;
                     }
 
-                    if (s.orderBy) {
-                        filter.orderBy = s.orderBy;
+                    if (s?.child?.orderBy) {
+                        filter.orderBy = s.child.orderBy;
                     }
 
-                    if (s.where) {
-                        forEach(s.where, (w) => {
+                    if (s?.child?.where) {
+                        forEach(s.child.where, (w) => {
                             filter.where.push(w);
                         });
                     }
 
+                    console.info(filter, s.fields);
+
                     CustomFetch(s.child.url, 'POST', filter, function (result) {
                         childDropdownCallback({
                             id: s.child.id,
@@ -280,8 +322,6 @@ function Field({
                     'checkbox',
                     'colour',
                     'copytoclipboard',
-                    'date',
-                    'datetime',
                     'dropdown',
                     'dropdown-ajax',
                     'dynamicdata',
@@ -307,6 +347,14 @@ function Field({
                         {settings.label} {settings.required ? '*' : ''}
                     </span>
                 );
+            } else if (['date', 'datetime', 'time'].includes(settings.type)) {
+                return (
+                    <span
+                        className={`${styles.fi__span} ${styles.prefocusdate}`}
+                    >
+                        {settings.label} {settings.required ? '*' : ''}
+                    </span>
+                );
             } else if (['plaintext'].includes(settings.type)) {
                 if (settings.description) {
                     return (
@@ -687,7 +735,7 @@ function Field({
                     settings.multiple === true
                 ) {
                     return (
-                        <>
+                        <div className={styles['file-upload-container']}>
                             <input
                                 type="file"
                                 multiple
@@ -695,51 +743,53 @@ function Field({
                                 className={inputClass[settings.id]}
                                 onChange={onChange}
                             />
+
                             {inputValue && inputValue.length > 0 && (
-                                <ul className="file-list">
+                                <ul className={styles['file-list']}>
                                     {inputValue.map((file, index) => (
                                         <li
                                             key={`file-${settings.id}-${index}`}
                                         >
-                                            {file.name
-                                                ? file.name
-                                                : file.file_name
-                                                ? file.file_name
-                                                : ''}
+                                            <span
+                                                className={styles['file-name']}
+                                            >
+                                                {file.name ||
+                                                    file.file_name ||
+                                                    ''}
+                                            </span>
                                             <button
-                                                className="trash-button"
+                                                className={
+                                                    styles['trash-button']
+                                                }
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
-
-                                                    const updatedFiles =
-                                                        inputValue.filter(
-                                                            (_, fileIndex) =>
-                                                                fileIndex !==
-                                                                index
-                                                        );
-
                                                     setFormData(
                                                         (prevFormData) => ({
                                                             ...prevFormData,
                                                             [settings.id]:
-                                                                updatedFiles,
+                                                                inputValue.filter(
+                                                                    (
+                                                                        _,
+                                                                        fileIndex
+                                                                    ) =>
+                                                                        fileIndex !==
+                                                                        index
+                                                                ),
                                                         })
                                                     );
                                                 }}
                                             >
                                                 <TrashCan
-                                                    data-tooltip-id="system-tooltip"
-                                                    data-tooltip-content="Remove File"
                                                     strokeWidth={2}
-                                                    size={24}
+                                                    size={20}
                                                 />
                                             </button>
                                         </li>
                                     ))}
                                 </ul>
                             )}
-                        </>
+                        </div>
                     );
                 } else {
                     return (
@@ -1922,6 +1972,126 @@ function Field({
                     updateForm={setChildForm}
                 />
             </Popup>
+            <Popup
+                open={canvasPopupOpen}
+                onClose={() => setCanvasPopupOpen(false)}
+                closeOnDocumentClick={false}
+            >
+                <div className={`${styles.modalwrap} ${styles['top--modal']}`}>
+                    <div className={styles.modal}>
+                        <div className={styles.modal__header}>
+                            <h1>Edit Canvas</h1>
+                            <button
+                                className={styles.modal__close}
+                                onClick={() => setCanvasPopupOpen(false)}
+                            >
+                                <CircleX size={24} color="#FFF" />
+                            </button>
+                        </div>
+                        <div
+                            className={`${styles.modal__content} ${styles.drawDiv}`}
+                        >
+                            {/* Sketch Tools */}
+                            <ul className={styles.drawactions}>
+                                <li>
+                                    <button
+                                        onClick={() => {
+                                            handleCanvasSave();
+                                        }}
+                                        className={styles['drawactions--save']}
+                                    >
+                                        <CloudDownload size={16} /> Save
+                                    </button>
+                                </li>
+                                <li>
+                                    <button
+                                        onClick={() => {
+                                            setSketchTool(Tools.Pencil);
+                                            setToolClass('pencil');
+                                        }}
+                                        className={`${
+                                            styles['drawaction-pencil']
+                                        } ${
+                                            toolClass === 'pencil'
+                                                ? styles['drawactive']
+                                                : ''
+                                        }`}
+                                    >
+                                        <Edit size={16} /> Pencil
+                                    </button>
+                                </li>
+                                <li>
+                                    <button
+                                        onClick={() => {
+                                            setSketchTool(Tools.Line);
+
+                                            setToolClass('line');
+                                        }}
+                                        className={`${
+                                            styles['drawaction-line']
+                                        } ${
+                                            toolClass === 'line'
+                                                ? styles['drawactive']
+                                                : ''
+                                        }`}
+                                    >
+                                        <Minus size={16} /> Line
+                                    </button>
+                                </li>
+                                <li>
+                                    <button
+                                        onClick={() => {
+                                            setSketchTool(Tools.Circle);
+
+                                            setToolClass('circle');
+                                        }}
+                                        className={`${
+                                            styles['drawaction-circle']
+                                        } ${
+                                            toolClass === 'circle'
+                                                ? styles['drawactive']
+                                                : ''
+                                        }`}
+                                    >
+                                        <Circle size={16} /> Circle
+                                    </button>
+                                </li>
+                                <li>
+                                    <button
+                                        onClick={() => sketchRef.current.undo()}
+                                        className={styles['drawaction-undo']}
+                                    >
+                                        <ArrowBack size={16} /> Undo
+                                    </button>
+                                </li>
+                                <li>
+                                    <button
+                                        onClick={() =>
+                                            sketchRef.current.clearCanvas()
+                                        }
+                                        className={styles['drawactions--clear']}
+                                    >
+                                        <TrashCan size={16} /> Clear
+                                    </button>
+                                </li>
+                            </ul>
+                            {(canvasUrl || inputValue?.state) && (
+                                <SketchField
+                                    ref={sketchRef}
+                                    width={740}
+                                    height={800}
+                                    tool={sketchTool}
+                                    lineColor={lineColor}
+                                    lineWidth={lineWidth}
+                                    className={styles.drawcontainer}
+                                    backgroundImage={canvasUrl}
+                                    defaultValue={inputValue?.state || null}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </Popup>
         </div>
     );
 }

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

@@ -70,10 +70,6 @@ function GenericDashboard({ setting }) {
         }
     };
 
-    // useEffect(() => {
-    //     fetchData(filters); // Fetch initial data
-    // }, [setting]);
-
     const openModal = (widgetId) => {
         setModalContent(widgetId);
         setModalShow(true);
@@ -163,10 +159,7 @@ function GenericDashboard({ setting }) {
     }, [setting]);
 
     useEffect(() => {
-        // Fetch data whenever filters are updated
-        if (Object.keys(filters).length > 0) {
-            fetchData(filters);
-        }
+        fetchData(filters);
     }, [filters]);
 
     const renderFilters = (widget) => {
@@ -266,8 +259,34 @@ function GenericDashboard({ setting }) {
     const renderWidget = (widget) => {
         const widgetData = data[widget.id] || [];
 
-        if (widgetData.length > 0 || widgetData?.data?.length > 0) {
+        if (
+            widgetData.length > 0 ||
+            widgetData?.data?.length > 0 ||
+            widgetData
+        ) {
             switch (widget.type) {
+                case 'counter':
+                    return (
+                        <>
+                            <div className={styles.widgetNo}>
+                                <span>0</span>
+                            </div>
+                            <div className={styles.widgetLink}>
+                                <button
+                                    className={
+                                        widget.highlight
+                                            ? styles['btn-alt']
+                                            : styles.btn
+                                    }
+                                    onClick={() => {
+                                        navigate('/leads/follow-ups');
+                                    }}
+                                >
+                                    View All
+                                </button>
+                            </div>
+                        </>
+                    );
                 case 'pie':
                     return (
                         <ResponsivePie data={widgetData} {...widget.props} />
@@ -332,8 +351,6 @@ function GenericDashboard({ setting }) {
                     const tableData = widgetData.data || widgetData;
                     const tableKeys = widgetData.keys || [];
 
-                    console.info(tableKeys);
-
                     return (
                         <div className={styles['table-container']}>
                             {tableData.length > 0 ? (

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

@@ -170,8 +170,20 @@
 }
 
 .dashwidget--highlight {
-    background: var(--secondary-color) !important;
-    border-bottom: 2px solid rgba(var(--secondary-rgb), 0.85) !important;
+    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: 2px solid rgba(var(--primary-rgb), 0.9) !important;
+
+    h2 {
+        color: var(--tertiary-color) !important;
+    }
+
+    .widgetTitle {
+        padding-bottom: 10px;
+        border-bottom: 2px solid rgba(var(--tertiary-rgb), 0.5);
+    }
 }
 
 .widgetNo {
@@ -200,12 +212,31 @@
         display: block;
         padding: 0.25em 3em;
         background: none;
+        border-color: rgba(var(--tertiary-color-rgb), 0.05);
 
         &:hover {
             background: none;
             color: var(--tertiary-color);
         }
     }
+
+    .btn-alt {
+        width: max-content;
+        margin: 0 auto;
+        display: block;
+        padding: 0.25em 3em;
+        background: #00294a;
+        border-color: rgba(var(--tertiary-color-rgb), 0.05);
+        color: #fff;
+        border-radius: 5px;
+
+        &:hover {
+            background: #00294a;
+            color: var(--tertiary-color);
+            border-color: rgba(var(--tertiary-color-rgb), 0.5);
+            color: #fff;
+        }
+    }
 }
 
 .filter-container {

package/src/components/crm/styles/Field.module.scss

@@ -152,6 +152,17 @@ select:not(:placeholder-shown) + .fi__span {
     color: rgba(var(--paragraph-rgb), 0.65) !important;
 }
 
+.prefocusdate {
+    transform: translateX(10px) scale(0.9) !important;
+    opacity: 1 !important;
+    padding: 0 0.25rem !important;
+    background: var(--tertiary-color) !important;
+    font-weight: 400 !important;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1) !important;
+    z-index: 1 !important;
+    color: rgba(var(--paragraph-rgb), 0.65) !important;
+}
+
 .qtrItem {
     flex-basis: 25%;
 }
@@ -417,3 +428,228 @@ input[type='file']:hover {
         color: var(--secondary-color);
     }
 }
+
+.modalwrap {
+    background: var(--tertiary-color);
+    border-radius: 3px;
+    overflow: visible;
+    border-top-left-radius: var(--br);
+    border-top-right-radius: var(--br);
+
+    .modal {
+        width: 100%;
+        position: relative;
+
+        &__header {
+            width: 100%;
+            background: var(--primary-color);
+            border: 2px solid rgba(var(--primary-color), 1.05);
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+            box-sizing: border-box;
+
+            h1 {
+                color: var(--secondary-color);
+                margin: 0;
+                padding: 0.75em 0.75em;
+                font-size: 1.15em;
+            }
+
+            .modal__close {
+                width: max-content;
+                position: absolute;
+                right: 5px;
+                top: 5px;
+                box-sizing: border-box;
+                background: rgba(var(--primary-color), 1.08);
+                cursor: pointer;
+                padding: 8px 8px;
+                margin: 0;
+                outline: none;
+                border: none;
+                border-radius: var(--br);
+                display: block;
+                line-height: 1;
+
+                svg {
+                    color: var(--secondary-color);
+                    display: block;
+                }
+            }
+        }
+
+        &__content {
+            width: 100%;
+            position: relative;
+            padding: 0.25rem;
+            box-sizing: border-box;
+            border-top-left-radius: var(--br);
+            border-top-right-radius: var(--br);
+
+            .btn {
+                background: var(--primary-color);
+                border: 1px solid rgba(var(--primary-color), 1.05);
+
+                &:hover {
+                    background: var(--secondary-color);
+                    color: var(--tertiary-color);
+                }
+            }
+        }
+    }
+}
+
+.top--modal {
+    width: 100%;
+    max-width: 1000px !important;
+    height: auto;
+    // display: none;
+    padding: 0 !important;
+}
+
+// Canvas
+
+.drawDiv {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+
+    img {
+        width: 100%;
+        max-width: 470px;
+        display: block;
+        margin: 0 auto;
+    }
+}
+
+.drawactions {
+    width: 100%;
+    height: auto;
+    list-style: none;
+    padding: 0 1em 0 0;
+    margin: 0;
+    flex: 1;
+    box-sizing: border-box;
+
+    li {
+        width: 100%;
+        margin: 0 0 2px 0;
+
+        button {
+            width: 100%;
+            color: var(--paragraph-color);
+            border: 1px solid transparent;
+            padding: 0.5em 1em;
+            border-radius: 6px;
+            text-align: left;
+            font-size: 0.875em;
+
+            .octicon {
+                margin-right: 8px;
+                transform: scale(0.8) translateY(-1px);
+            }
+        }
+
+        .drawactions--save {
+            background: #4ff1ba;
+            color: var(--paragraph-color);
+        }
+
+        .drawactions--clear {
+            background: #ff6a6a;
+            color: var(--paragraph-color);
+        }
+
+        .drawactive {
+            border: 1px solid rgba(var(--paragraph-color-rgb), 1.4);
+            background: rgba(var(--paragraph-color-rgb), 0.2);
+            color: rgba(var(--paragraph-color-rgb), 1.05);
+        }
+    }
+}
+
+.drawcontainer {
+    display: block;
+    flex: 0 1 80%;
+    margin: 0;
+    border: 1px dashed rgba(var(--primary-color-rgb), 1.2);
+    padding: 5px;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+.canvasWrap {
+    display: block;
+    margin: 0 auto;
+}
+
+.canvas-container {
+    display: block;
+    margin: 0 auto;
+}
+
+/* File List Styling */
+.file-upload-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    width: 100%;
+}
+
+.file-upload-container input[type='file'] {
+    padding: 8px;
+    border: 1px solid var(--border-color);
+    border-radius: var(--br);
+    width: auto;
+    background: var(--tertiary-color);
+}
+
+.file-list {
+    width: 100%;
+    border: 1px solid var(--border-color);
+    border-radius: var(--br);
+    background: var(--tertiary-color);
+    max-height: 200px;
+    overflow-y: auto;
+    padding: 0.5em;
+}
+
+.file-list li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75em 1em;
+    border-bottom: 1px solid var(--border-color);
+    font-size: 0.9rem;
+    background: white;
+    border-radius: 5px;
+    transition: background 0.3s;
+    margin-bottom: 5px;
+}
+
+.file-list li:last-child {
+    border-bottom: none;
+}
+
+.file-list li:hover {
+    background: rgba(var(--paragraph-color-rgb), 0.1);
+}
+
+.trash-button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    transition: color 0.3s;
+}
+
+.trash-button:hover {
+    color: var(--secondary-color);
+}
+
+.trash-button svg {
+    width: 1.2em;
+    height: 1.2em;
+}