@visns-studio/visns-components 5.1.17 → 5.1.19

package/package.json

@@ -77,7 +77,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.1.17",
+    "version": "5.1.19",
     "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

@@ -1,12 +1,13 @@
 import '../../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } 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 dayjs from 'dayjs';
+import parse from 'html-react-parser';
 import { CircleX } from 'akar-icons';
 
 import CustomFetch from '../../crm/Fetch';
@@ -17,6 +18,7 @@ import styles from './styles/GenericDashboard.module.scss';
 const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();
 
 function GenericDashboard({ setting }) {
+    const navigate = useNavigate();
     const [data, setData] = useState({});
     const [dropdowns, setDropdowns] = useState({});
     const [filters, setFilters] = useState({}); // Track filter values for each widget
@@ -25,44 +27,69 @@ function GenericDashboard({ setting }) {
 
     const fetchData = async (appliedFilters = {}) => {
         try {
-            const promises = setting.widgets.map(async (widget) => {
+            // Flatten the nested widgets array into a single array
+            const flattenedWidgets = setting.widgets.reduce(
+                (acc, row) => [...acc, ...row],
+                []
+            );
+
+            // Map through the flattened array of widgets
+            const promises = flattenedWidgets.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.params || {}
-                            );
-                            setDropdowns((prevFilters) => ({
-                                ...prevFilters,
-                                [widget.id]: {
-                                    ...prevFilters[widget.id],
-                                    [filter.id]:
-                                        initialFilterData?.data?.data || [],
-                                },
-                            }));
+                            try {
+                                const initialFilterData = await CustomFetch(
+                                    filter.url,
+                                    'POST',
+                                    filter.params || {}
+                                );
+                                setDropdowns((prevFilters) => ({
+                                    ...prevFilters,
+                                    [widget.id]: {
+                                        ...prevFilters[widget.id],
+                                        [filter.id]:
+                                            initialFilterData?.data?.data || [],
+                                    },
+                                }));
+                            } catch (error) {
+                                console.error(
+                                    `Error fetching dropdown for widget ${widget.id}:`,
+                                    error
+                                );
+                            }
                         }
                     }
                 }
 
-                // Fetch widget data with filters
-                return CustomFetch(
-                    widget.api.url,
-                    widget.api.method,
-                    widgetFilters
-                );
+                // Check if widget.api exists before making a request
+                if (widget.api?.url && widget.api?.method) {
+                    return CustomFetch(
+                        widget.api.url,
+                        widget.api.method,
+                        widgetFilters
+                    );
+                }
+
+                return null; // Return null if no API request is needed
             });
 
+            // Execute all API requests
             const results = await Promise.all(promises);
 
-            const fetchedData = setting.widgets.reduce((acc, widget, index) => {
-                acc[widget.id] = results[index]?.data;
-                return acc;
-            }, {});
+            // Build a data object keyed by widget id
+            const fetchedData = flattenedWidgets.reduce(
+                (acc, widget, index) => {
+                    if (results[index]) {
+                        acc[widget.id] = results[index]?.data;
+                    }
+                    return acc;
+                },
+                {}
+            );
 
             setData(fetchedData);
         } catch (error) {
@@ -136,20 +163,28 @@ function GenericDashboard({ setting }) {
         const initializeFilters = () => {
             const initialFilters = {};
 
-            setting.widgets.forEach((widget) => {
-                if (widget.filters) {
-                    initialFilters[widget.id] = widget.filters.reduce(
-                        (acc, filter) => {
-                            if (filter.type === 'date' && filter.default) {
-                                acc[filter.id] = getDefaultDate(filter.default);
-                            } else if (filter.type === 'multi-dropdown-ajax') {
-                                acc[filter.id] = [];
-                            }
-                            return acc;
-                        },
-                        {}
-                    );
-                }
+            setting.widgets.forEach((row) => {
+                row.forEach((widget) => {
+                    if (widget.filters) {
+                        initialFilters[widget.id] = widget.filters.reduce(
+                            (acc, filter) => {
+                                if (filter.type === 'date' && filter.default) {
+                                    acc[filter.id] = getDefaultDate(
+                                        filter.default
+                                    );
+                                } else if (
+                                    filter.type === 'multi-dropdown-ajax'
+                                ) {
+                                    acc[filter.id] = [];
+                                } else if (filter.type === 'years') {
+                                    acc[filter.id] = dayjs().year();
+                                }
+                                return acc;
+                            },
+                            {}
+                        );
+                    }
+                });
             });
 
             setFilters(initialFilters);
@@ -176,7 +211,13 @@ function GenericDashboard({ setting }) {
                             case 'date':
                                 return (
                                     <div
-                                        className={styles['filter-field']}
+                                        className={
+                                            widget.highlight
+                                                ? styles[
+                                                      'filter-field-highlight'
+                                                  ]
+                                                : styles['filter-field']
+                                        }
                                         key={filter.id}
                                     >
                                         <label htmlFor={filter.id}>
@@ -204,7 +245,13 @@ function GenericDashboard({ setting }) {
                             case 'multi-dropdown-ajax':
                                 return (
                                     <div
-                                        className={styles['filter-field']}
+                                        className={
+                                            widget.highlight
+                                                ? styles[
+                                                      'filter-field-highlight'
+                                                  ]
+                                                : styles['filter-field']
+                                        }
                                         key={filter.id}
                                     >
                                         <label htmlFor={filter.id}>
@@ -232,6 +279,60 @@ function GenericDashboard({ setting }) {
                                         />
                                     </div>
                                 );
+                            case 'years':
+                                return (
+                                    <div
+                                        className={
+                                            widget.highlight
+                                                ? styles[
+                                                      'filter-field-highlight'
+                                                  ]
+                                                : styles['filter-field']
+                                        }
+                                        key={filter.id}
+                                    >
+                                        <label htmlFor={filter.id}>
+                                            {filter.label}
+                                        </label>
+                                        <select
+                                            name="year"
+                                            style={{ height: '51px' }}
+                                            value={
+                                                filters[widget.id]?.[
+                                                    filter.id
+                                                ] || ''
+                                            }
+                                            onChange={(e) => {
+                                                handleFilterChange(
+                                                    widget.id,
+                                                    filter.id,
+                                                    e.target.value
+                                                );
+                                                e.target.blur(); // Closes the picker
+                                            }}
+                                        >
+                                            {Array.from(
+                                                {
+                                                    length:
+                                                        new Date().getFullYear() -
+                                                        2021 +
+                                                        3,
+                                                },
+                                                (_, i) => {
+                                                    const yearOption = 2022 + i;
+                                                    return (
+                                                        <option
+                                                            key={yearOption}
+                                                            value={yearOption}
+                                                        >
+                                                            {yearOption}
+                                                        </option>
+                                                    );
+                                                }
+                                            )}
+                                        </select>
+                                    </div>
+                                );
                             default:
                                 return null;
                         }
@@ -269,22 +370,32 @@ function GenericDashboard({ setting }) {
                     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>
+                                <span>
+                                    {(Array.isArray(widgetData) &&
+                                        widgetData.length === 0) ||
+                                    widgetData == null
+                                        ? parse(`&nbsp;`)
+                                        : widgetData}
+                                </span>
                             </div>
+                            {widget.button && (
+                                <div className={styles.widgetLink}>
+                                    <button
+                                        className={
+                                            widget.highlight
+                                                ? styles['btn-alt']
+                                                : styles.btn
+                                        }
+                                        onClick={() => {
+                                            if (widget.button.url) {
+                                                navigate(widget.button.url);
+                                            }
+                                        }}
+                                    >
+                                        {widget.button.title}
+                                    </button>
+                                </div>
+                            )}
                         </>
                     );
                 case 'pie':
@@ -299,15 +410,25 @@ function GenericDashboard({ setting }) {
                     const barData =
                         widgetData.bar?.data || widgetData.data || widgetData;
 
-                    return (
-                        <div style={{ height: widget.height || '600px' }}>
-                            <ResponsiveBar data={barData} {...widget.props} />
-                        </div>
-                    );
+                    if (barData?.length > 0) {
+                        return (
+                            <div style={{ height: widget.height || '600px' }}>
+                                <ResponsiveBar
+                                    data={barData}
+                                    {...widget.props}
+                                />
+                            </div>
+                        );
+                    }
                 case 'line':
-                    return (
-                        <ResponsiveLine data={widgetData} {...widget.props} />
-                    );
+                    if (widgetData.length > 0) {
+                        return (
+                            <ResponsiveLine
+                                data={widgetData}
+                                {...widget.props}
+                            />
+                        );
+                    }
                 case 'list':
                     return (
                         <ul className={styles.dashList}>
@@ -588,48 +709,54 @@ function GenericDashboard({ setting }) {
     };
 
     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>
+        return setting.widgets.map((row, rowIndex) => {
+            // Use the number of widgets in the row to determine the grid class
+            const columns = row.length;
+            const gridClass =
+                columns === 1
+                    ? styles.grid__full
+                    : columns === 2
+                    ? styles.grid__half
+                    : columns === 3
+                    ? styles.grid__three
+                    : styles.grid__three; // fallback if more than 3 columns
+
+            return (
+                <div className={styles.grid__row} key={`row-${rowIndex}`}>
+                    {row.map((widget) => (
+                        <div
+                            key={widget.id}
+                            className={`${gridClass} ${
+                                widget.type !== 'list'
+                                    ? widget.highlight
+                                        ? styles['dashwidget--highlight']
+                                        : styles.dashwidget
+                                    : ''
+                            }`}
+                        >
+                            <div className={styles.widgetTitle}>
+                                <h2>{widget.title}</h2>
                             </div>
-                        )}
-                    </div>
-                ))}
-            </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>
+            );
+        });
     };
 
     return (

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

@@ -182,7 +182,7 @@
 
     .widgetTitle {
         padding-bottom: 10px;
-        border-bottom: 2px solid rgba(var(--tertiary-rgb), 0.5);
+        border-bottom: 2px solid rgba(var(--tertiary-color-rgb), 0.5);
     }
 }
 
@@ -261,6 +261,7 @@
     gap: 1rem; // Gap between fields
     align-items: flex-end; // Align fields vertically
 }
+
 .filter-field {
     flex: 1; // Ensures equal spacing for each field
     display: flex;
@@ -292,6 +293,37 @@
     }
 }
 
+.filter-field-highlight {
+    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: var(--tertiary-color);
+    }
+
+    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
+
+        &:focus {
+            border-color: #007bff;
+            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); // Focus effect
+        }
+    }
+}
+
 .filter-actions {
     display: flex;
     gap: 0.75rem; // Gap between buttons

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;
+}