@visns-studio/visns-components 4.10.47 → 5.0.0

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

@@ -1,325 +0,0 @@
-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/components/crm/sketch/SketchField.jsx

@@ -1,395 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import History from './history';
-import Select from './select';
-import Pencil from './pencil';
-import Line from './line';
-import Arrow from './arrow';
-import Rectangle from './rectangle';
-import Circle from './circle';
-import Pan from './pan';
-import Tool from './tools';
-import RectangleLabel from './rectangle-label';
-import DefaultTool from './default-tool';
-import * as fabric from 'fabric'; // v6
-import { toast } from 'react-toastify'; // Import toast
-
-// Debounce function
-function debounce(func, delay) {
-    let timeout;
-    return (...args) => {
-        clearTimeout(timeout);
-        timeout = setTimeout(() => func.apply(this, args), delay);
-    };
-}
-
-class SketchField extends PureComponent {
-    static propTypes = {
-        lineColor: PropTypes.string,
-        lineWidth: PropTypes.number,
-        lineRadius: PropTypes.number,
-        fillColor: PropTypes.string,
-        backgroundColor: PropTypes.string,
-        backgroundImage: PropTypes.string,
-        opacity: PropTypes.number,
-        undoSteps: PropTypes.number,
-        tool: PropTypes.string,
-        imageFormat: PropTypes.string,
-        value: PropTypes.object,
-        forceValue: PropTypes.bool,
-        widthCorrection: PropTypes.number,
-        heightCorrection: PropTypes.number,
-        onChange: PropTypes.func,
-        defaultValue: PropTypes.object,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        onObjectAdded: PropTypes.func,
-        onObjectModified: PropTypes.func,
-        onObjectRemoved: PropTypes.func,
-        className: PropTypes.string,
-        style: PropTypes.object,
-    };
-
-    static defaultProps = {
-        lineColor: 'black',
-        lineWidth: 10,
-        lineRadius: 10,
-        fillColor: 'transparent',
-        backgroundColor: 'transparent',
-        opacity: 1.0,
-        undoSteps: 25,
-        tool: null,
-        widthCorrection: 0,
-        heightCorrection: 0,
-        forceValue: false,
-        onObjectAdded: () => null,
-        onObjectModified: () => null,
-        onObjectRemoved: () => null,
-    };
-
-    _initTools = (fabricCanvas) => {
-        this._tools = {
-            [Tool.Select]: new Select(fabricCanvas),
-            [Tool.Pencil]: new Pencil(fabricCanvas),
-            [Tool.Line]: new Line(fabricCanvas),
-            [Tool.Arrow]: new Arrow(fabricCanvas),
-            [Tool.Rectangle]: new Rectangle(fabricCanvas),
-            [Tool.RectangleLabel]: new RectangleLabel(fabricCanvas),
-            [Tool.Circle]: new Circle(fabricCanvas),
-            [Tool.Pan]: new Pan(fabricCanvas),
-            [Tool.DefaultTool]: new DefaultTool(fabricCanvas),
-        };
-    };
-
-    setBackgroundImage = async (imageUrl) => {
-        try {
-            const img = await fabric.Image.fromURL(imageUrl, {
-                crossOrigin: 'anonymous', // Enable CORS
-            });
-
-            const imgWidth = img.width;
-            const imgHeight = img.height;
-
-            // Get the aspect ratio of the image
-            const aspectRatio = imgWidth / imgHeight;
-
-            // Calculate the new canvas dimensions based on aspect ratio
-            const { width, height } = this.props; // Default width and height
-
-            let newWidth, newHeight;
-            if (aspectRatio > 1) {
-                // Landscape orientation: Set width to max and adjust height
-                newWidth = width;
-                newHeight = width / aspectRatio;
-            } else {
-                // Portrait orientation: Set height to max and adjust width
-                newHeight = height;
-                newWidth = height * aspectRatio;
-            }
-
-            // Set the new canvas dimensions
-            this._fc.setWidth(newWidth);
-            this._fc.setHeight(newHeight);
-
-            // Scale the image to fit the canvas dimensions
-            img.scaleToWidth(newWidth);
-            img.scaleToHeight(newHeight);
-
-            // Center the image both horizontally and vertically
-            img.set({
-                left: (newWidth - img.getScaledWidth()) / 2,
-                top: (newHeight - img.getScaledHeight()) / 2,
-                selectable: false,
-                evented: false,
-            });
-
-            // Set the image as the background directly
-            this._fc.backgroundImage = img;
-
-            // Render the canvas to apply changes
-            this._fc.requestRenderAll();
-        } catch (error) {
-            console.error('Failed to load background image:', error);
-        }
-    };
-
-    saveCanvasState = () => {
-        // Return the current state of the canvas as JSON
-        const state = this._fc.toJSON();
-        const backgroundImage = this._fc.backgroundImage
-            ? {
-                  src: this._fc.backgroundImage._element.src,
-                  left: this._fc.backgroundImage.left,
-                  top: this._fc.backgroundImage.top,
-                  scaleX: this._fc.backgroundImage.scaleX,
-                  scaleY: this._fc.backgroundImage.scaleY,
-              }
-            : null;
-
-        return {
-            state,
-            backgroundImage,
-        };
-    };
-
-    exportCanvasImage = async (format = 'png') => {
-        // Ensure all images are loaded with CORS
-        const imageObjects = this._fc.getObjects('image');
-        for (const imgObj of imageObjects) {
-            if (imgObj.crossOrigin !== 'anonymous') {
-                // Set crossOrigin for images that are not set
-                imgObj.set({ crossOrigin: 'anonymous' });
-            }
-        }
-
-        // Get the Base64 representation of the canvas image
-        const dataURL = this._fc.toDataURL({
-            format: format,
-            quality: 0.8,
-        });
-
-        // Return the Base64 string
-        return dataURL; // This returns a promise
-    };
-
-    clearCanvas = () => {
-        // Clear all objects from the canvas while keeping the background image
-        const backgroundImage = this._fc.backgroundImage;
-        this._fc.clear();
-
-        // Restore the background image after clearing
-        if (backgroundImage) {
-            this._fc.backgroundImage = backgroundImage;
-        }
-        this._fc.renderAll(); // Re-render to show the background image
-    };
-
-    _resize = (e) => {
-        const { widthCorrection, heightCorrection } = this.props;
-        const canvas = this._fc;
-
-        const { offsetWidth, clientHeight } = this._container;
-        const wfactor = (offsetWidth - widthCorrection) / canvas.width;
-        const hfactor = (clientHeight - heightCorrection) / canvas.height;
-
-        canvas.setWidth(offsetWidth - widthCorrection);
-        canvas.setHeight(clientHeight - heightCorrection);
-
-        canvas.getObjects().forEach((obj) => {
-            obj.scaleX *= wfactor;
-            obj.scaleY *= hfactor;
-            obj.left *= wfactor;
-            obj.top *= hfactor;
-            obj.setCoords();
-        });
-
-        this.setState({ parentWidth: offsetWidth });
-        canvas.requestRenderAll();
-    };
-
-    _backgroundColor = (color) => {
-        if (this._fc && color) {
-            this._fc.backgroundColor = color;
-            this._fc.requestRenderAll();
-        }
-    };
-
-    undo = () => {
-        if (this._history && this._history.canUndo()) {
-            const previousState = this._history.undo();
-            if (previousState) {
-                // Restore the previous state
-                this.fromJSON(previousState.state);
-                // Reapply the background image after undoing
-                if (previousState.backgroundImage) {
-                    this.setBackgroundImage(previousState.backgroundImage.src);
-                }
-            } else {
-                this._fc.clear(); // If no previous state, clear the canvas
-
-                this.setBackgroundImage(this.props.backgroundImage);
-            }
-            this._fc.renderAll(); // Re-render canvas
-            this.props.onChange && this.props.onChange();
-        }
-    };
-
-    redo = () => {
-        if (this._history && this._history.canRedo()) {
-            const nextState = this._history.redo();
-            if (nextState) {
-                this.fromJSON(nextState.state);
-                // Reapply the background image after redoing
-                if (nextState.backgroundImage) {
-                    this.setBackgroundImage(nextState.backgroundImage.src);
-                }
-                this._fc.renderAll(); // Re-render canvas
-                this.props.onChange && this.props.onChange();
-            }
-        }
-    };
-
-    fromJSON = (json) => {
-        if (!json) return;
-        this._fc.loadFromJSON(json, () => {
-            this._fc.requestRenderAll();
-            this.props.onChange && this.props.onChange();
-        });
-    };
-
-    componentDidMount = () => {
-        const {
-            tool,
-            undoSteps,
-            backgroundColor,
-            width = 800,
-            height = 600,
-            backgroundImage,
-            defaultValue,
-        } = this.props;
-
-        this._fc = new fabric.Canvas(this._canvas);
-        this._fc.setWidth(width);
-        this._fc.setHeight(height);
-
-        this._initTools(this._fc);
-        this._backgroundColor(backgroundColor);
-
-        const selectedTool = this._tools[tool];
-        if (selectedTool) {
-            selectedTool.configureCanvas(this.props);
-            selectedTool.attachListeners();
-        }
-        this._selectedTool = selectedTool;
-
-        window.addEventListener('resize', this._resize, false);
-
-        this._history = new History(undoSteps);
-
-        this._fc.on('object:added', this._captureState);
-        this._fc.on('object:modified', this._captureState);
-        this._fc.on('object:removed', this._captureState);
-
-        this.setState({ canvasReady: true }, () => {
-            // Load the defaultValue to set the initial state of the canvas
-            if (defaultValue) {
-                // Show loading toast
-                setTimeout(() => {
-                    this.fromJSON(defaultValue);
-                }, 1000);
-            } else {
-                if (backgroundImage) {
-                    this.setBackgroundImage(backgroundImage);
-                }
-            }
-        });
-
-        // Load the defaultValue to set the initial state of the canvas
-        if (defaultValue) {
-            // Show loading toast
-            const toastId = toast.loading('Loading Canvas...');
-            setTimeout(() => {
-                this.fromJSON(defaultValue);
-                // Update toast after loading is done
-                toast.update(toastId, {
-                    render: 'Saved Canvas loaded!',
-                    type: 'success',
-                    isLoading: false,
-                    autoClose: 2000,
-                });
-            }, 1000);
-        } else {
-            if (backgroundImage) {
-                this.setBackgroundImage(backgroundImage);
-            }
-        }
-    };
-
-    _captureState = debounce(() => {
-        if (this._history && this._fc) {
-            const state = this._fc.toJSON();
-            const backgroundImage = this._fc.backgroundImage
-                ? {
-                      src: this._fc.backgroundImage._element.src,
-                      left: this._fc.backgroundImage.left,
-                      top: this._fc.backgroundImage.top,
-                      scaleX: this._fc.backgroundImage.scaleX,
-                      scaleY: this._fc.backgroundImage.scaleY,
-                  }
-                : null;
-
-            this._history.keep({
-                state,
-                backgroundImage,
-            });
-        }
-    }, 300);
-
-    componentWillUnmount = () => {
-        window.removeEventListener('resize', this._resize);
-    };
-
-    componentDidUpdate = (prevProps) => {
-        if (this.props.tool !== prevProps.tool) {
-            if (this._selectedTool) {
-                this._selectedTool.detachListeners();
-            }
-
-            this._selectedTool = this._tools[this.props.tool];
-            this._selectedTool.configureCanvas(this.props);
-            this._selectedTool.attachListeners();
-        }
-
-        if (this.props.backgroundColor !== prevProps.backgroundColor) {
-            this._backgroundColor(this.props.backgroundColor);
-        }
-
-        if (this.props.defaultValue !== prevProps.defaultValue) {
-            this.fromJSON(this.props.defaultValue);
-        } else {
-            if (this.props.backgroundImage !== prevProps.backgroundImage) {
-                this.setBackgroundImage(this.props.backgroundImage);
-            }
-        }
-    };
-
-    render() {
-        const { className, style, width = 800, height = 600 } = this.props;
-        const canvasDivStyle = { ...style, width, height };
-
-        return (
-            <div
-                className={className}
-                ref={(c) => (this._container = c)}
-                style={canvasDivStyle}
-            >
-                <canvas ref={(c) => (this._canvas = c)}>
-                    Sorry, Canvas HTML5 element is not supported by your
-                    browser.
-                </canvas>
-            </div>
-        );
-    }
-}
-
-export default SketchField;