@visns-studio/visns-components 4.7.0 → 4.7.2

package/components/crm/generic/styles/GenericIndex.module.css

@@ -1,247 +0,0 @@
-.grid__row {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-    gap: 1rem;
-}
-
-.grid__three {
-    width: 33%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.grid__half {
-    width: 50%;
-    background: var(--item-color);
-    border-radius: 6px;
-    border: 1px solid #dadce0;
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color), 0.05);
-}
-
-.grid__full {
-    width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 2px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.grid__dashfull {
-    width: 100%;
-    background: var(--item-color);
-    border-radius: 6px;
-    border: 1px solid #dadce0;
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 20px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.grid__subrow {
-    width: 100%;
-    display: flex;
-    flex-wrap: wrap;
-    height: auto;
-    gap: 0.5rem;
-}
-
-.grid__subnav {
-    flex: 1;
-    background: rgba(var(--item-color-rgb), 1.01);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    padding: 5px;
-    margin: 8px 0;
-    height: auto;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.grid__subnav > ul {
-    width: 100%;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.grid__subnav > ul li {
-    width: 100%;
-    margin-bottom: 3px;
-}
-
-.grid__subnav > ul li a {
-    width: 100%;
-    padding: 8px 20px;
-    box-sizing: border-box;
-    display: block;
-    text-decoration: none;
-    background: rgba(var(--primary-color-rgb), 0.05);
-    color: var(--primary-color);
-    border-radius: 5px;
-    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
-    outline: none;
-    cursor: pointer;
-}
-
-.grid__subnav > ul li:hover a {
-    background: var(--primary-color);
-    color: var(--tertiary-color);
-}
-
-.grid__subnav > ul li .subactive {
-    font-weight: 700;
-    background: var(--primary-color);
-    color: var(--tertiary-color);
-}
-
-.grid__minheight {
-    min-height: 300px;
-}
-
-.noborder {
-    border: none !important;
-}
-
-.grid__subcontent {
-    flex: 0 1 80%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    padding: 2px;
-    margin: 8px 0;
-    height: auto;
-    position: relative;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.grid__subcontent h2 {
-    color: var(--primary-color);
-    font-size: 1.35em;
-    padding: 0;
-    margin: 0 0 30px 0;
-}
-
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 10px 20px;
-    margin: 0;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-}
-
-.crmtitle h1 {
-    font-weight: 700;
-    font-size: 1.45em;
-    margin: 0;
-    padding: 0.65rem 0;
-}
-
-.crmtitle h1 a {
-    text-decoration: none;
-    color: rgba(var(--secondary-color-rgb), 1.1);
-    font-weight: 300;
-}
-
-.crmtitle h1 svg {
-    color: rgba(var(--primary-color-rgb), 0.25);
-    position: relative;
-    top: 2px;
-    margin: 0 0.25rem;
-}
-
-.crmtitleSimple {
-    border: none;
-    min-height: auto;
-    padding: 0.65rem 1rem;
-    margin-bottom: 0.15rem;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    box-sizing: border-box;
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-    align-items: center;
-
-    h1 {
-        font-size: 1.25rem;
-        margin: 0;
-        padding: 0;
-    }
-}
-
-.titleInfo {
-    position: absolute;
-    right: 2em;
-    top: 24px;
-}
-
-.titleInfo span {
-    font-size: 0.875em;
-    color: rgba(var(--paragraph-color-rgb), 0.65);
-}
-
-.btn {
-    width: max-content;
-    display: inline-block;
-    position: relative;
-    padding: 0.65rem 1rem;
-    cursor: pointer;
-    font-size: 1rem;
-    color: var(--tertiary-color);
-    text-decoration: none;
-    overflow: hidden;
-    background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
-    outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
-}
-
-.btn:hover {
-    color: var(--primary-color);
-    background: var(--highlight-color);
-    border: 1px solid rgba(var(--highlight-color-rgb), 1.05);
-}
-
-.polActions {
-    position: fixed;
-    bottom: 15px;
-    right: 20px;
-    width: auto;
-}
-
-.polActions button {
-    display: block;
-    float: left;
-    padding: 0.35em 1em;
-    margin: 0 0.15em;
-}

package/components/crm/generic/styles/GenericMain.module.css

@@ -1,91 +0,0 @@
-.header {
-    background: var(--primary-color);
-    color: var(--primary-color);
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 995;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.headerAlternate {
-    background: white;
-    color: var(--paragraph-color);
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: 995;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    background: var(--bg);
-
-    .content-header {
-        background: rgba(var(--tertiary-color-rgb), 1.1);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.14);
-        box-sizing: border-box;
-        padding: 1em;
-        height: 52.5px;
-        box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.5);
-        display: flex;
-        flex-wrap: nowrap;
-        justify-content: space-between;
-    }
-
-    .content-title {
-        width: 40%;
-
-        h1 {
-            padding: 0;
-            margin: 0;
-            font-size: 1em;
-            line-height: 1.25;
-            text-transform: uppercase;
-            color: var(--primary-color);
-            letter-spacing: -0.025em;
-        }
-    }
-
-    .content-actions {
-        width: 40%;
-
-        ul {
-            display: flex;
-            padding: 0;
-            margin: 0;
-            list-style: none;
-            justify-content: flex-end;
-
-            li {
-                padding: 0 10px;
-                text-align: center;
-
-                i {
-                    font-size: 1.25em;
-                }
-
-                a {
-                    text-decoration: none;
-                    color: var(--paragraph-color);
-                }
-            }
-        }
-    }
-
-    .content-main {
-        background: var(--bg);
-        flex: 1;
-    }
-}
-
-.padding {
-    padding: 5em 1em 1em 1em;
-}
-
-.paddingSimple {
-    padding: 1rem;
-}

package/components/crm/generic/styles/GenericSort.module.css

@@ -1,123 +0,0 @@
-.grid {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-    gap: 1rem;
-}
-
-.grid__row {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-    gap: 1rem;
-}
-
-.grid__full {
-    width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 2px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 5px 20px;
-    margin: 0;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    h1 {
-        font-weight: 700;
-        font-size: 1.15em;
-        margin: 0;
-        padding: 0.65rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-
-        a {
-            text-decoration: none;
-            color: rgba(var(--secondary-color-rgb), 1.1);
-        }
-
-        svg {
-            color: rgba(var(--primary-color-rgb), 0.25);
-            position: relative;
-            top: 0;
-            margin: 0 0.5rem;
-            max-width: 15px;
-        }
-    }
-}
-
-.dragitem {
-    list-style: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    border-radius: 5px;
-    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
-    box-shadow: 0px 0px 20px rgba(var(--primary-color-rgb), 0.25);
-    padding: 1.25rem;
-    box-sizing: border-box;
-    cursor: grab;
-    list-style: none;
-    color: var(--paragraph-color);
-
-    svg {
-        width: 100%;
-        max-width: 18px;
-        position: absolute;
-        left: 5px;
-        top: 5px;
-    }
-
-    .pencil-edit {
-        width: 100%;
-        max-width: 18px;
-        position: absolute;
-        left: 5px;
-        top: 30px;
-    }
-
-    .trash-delete {
-        width: 100%;
-        max-width: 18px;
-        position: absolute;
-        left: 5px;
-        top: 60px;
-    }
-
-    .sortimg {
-        width: 50px;
-        position: relative;
-        height: 50px;
-        margin-left: auto;
-        border-radius: 5px;
-        overflow: hidden;
-
-        img {
-            display: block;
-            object-fit: cover;
-            height: 100%;
-            width: 100%;
-            overflow: hidden;
-        }
-    }
-}

package/components/crm/generic/styles/NotificationList.module.css

@@ -1,67 +0,0 @@
-.grid {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-    gap: 1rem;
-}
-
-.grid__row {
-    width: 100%;
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: nowrap;
-    height: auto;
-    gap: 1rem;
-}
-
-.grid__full {
-    width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    box-sizing: border-box;
-    overflow: visible;
-    position: relative;
-    padding: 2px;
-    margin: 8px 0;
-    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
-}
-
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 5px 20px;
-    margin: 0;
-    background: var(--primary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-    display: flex;
-    align-items: center;
-
-    h1 {
-        color: var(--background-color);
-        font-weight: 700;
-        font-size: 1.15em;
-        margin: 0;
-        padding: 0.65rem 0;
-        display: flex;
-        align-items: center;
-        gap: 0.25rem;
-
-        a {
-            text-decoration: none;
-            color: var(--secondary-color);
-        }
-
-        svg {
-            color: rgba(var(--tertiary-color-rgb), 0.5);
-            position: relative;
-            top: 0;
-            margin: 0 0.5rem;
-            max-width: 15px;
-        }
-    }
-}

package/components/crm/sorting/Item.jsx

@@ -1,117 +0,0 @@
-import React from 'react';
-import { SortableElement, sortableHandle } from 'react-sortable-hoc';
-import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
-
-import styles from './styles/Item.module.css';
-
-const DragHandle = sortableHandle(() => (
-    <ChevronVertical className="drag-handle" strokeWidth={1} size={26} />
-));
-
-// Utility function to truncate text
-const truncateText = (text, maxLength) => {
-    if (text && text.length > maxLength) {
-        return `${text.substring(0, maxLength)}...`;
-    }
-    return text;
-};
-
-const SortableItem = ({
-    containerIndex,
-    handleClick,
-    handleEdit,
-    handleDelete,
-    showImage,
-    value,
-}) => {
-    const renderImage = (d) => {
-        let htmlContainer = '';
-
-        if (showImage) {
-            const imageUrl = d.image_url || d.file_url;
-            htmlContainer = imageUrl ? (
-                <div className={styles.sortimg}>
-                    <img src={imageUrl} alt="" />
-                </div>
-            ) : (
-                <div className={styles.sortimg}>
-                    {/* Placeholder image */}
-                    <img
-                        src="data:image/png;base64,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"
-                        alt="Placeholder"
-                    />
-                </div>
-            );
-        }
-
-        return htmlContainer;
-    };
-
-    const renderEditButton = () => {
-        if (!handleEdit) return null;
-
-        if (showImage) {
-            if (
-                value.hasOwnProperty('file_title') &&
-                value.hasOwnProperty('file_description')
-            ) {
-                return <EditButton />;
-            }
-            return null;
-        }
-
-        return <EditButton />;
-    };
-
-    const EditButton = () => (
-        <Pencil
-            className={styles['pencil-edit']}
-            strokeWidth={1}
-            size={26}
-            onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleEdit(value);
-            }}
-        />
-    );
-
-    return (
-        <li
-            onClick={(e) => {
-                e.preventDefault();
-                if (handleClick) {
-                    handleClick(containerIndex);
-                }
-            }}
-        >
-            <DragHandle />
-            {truncateText(
-                value.label || value.file_title || value.file_name,
-                30
-            )}
-
-            {renderImage(value)}
-
-            {renderEditButton()}
-
-            {handleDelete && (
-                <TrashCan
-                    className={styles['trash-delete']}
-                    strokeWidth={1}
-                    size={26}
-                    onClick={(e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleDelete(
-                            value.id || containerIndex,
-                            value.label || value.file_name
-                        );
-                    }}
-                />
-            )}
-        </li>
-    );
-};
-
-export default SortableElement(SortableItem);

package/components/crm/sorting/List.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import VisnsSortableItem from './Item';
-import { SortableContainer } from 'react-sortable-hoc';
-
-import styles from './styles/List.module.css';
-
-const SortableList = ({
-    handleClick,
-    handleDelete,
-    handleEdit,
-    items,
-    showImage,
-}) => {
-    return (
-        <ul className={styles.sortlist}>
-            {items.map((value, index) => (
-                <VisnsSortableItem
-                    key={`item-${index}`}
-                    containerIndex={index}
-                    index={index}
-                    handleClick={handleClick}
-                    handleDelete={handleDelete}
-                    handleEdit={handleEdit}
-                    showImage={showImage}
-                    value={value}
-                />
-            ))}
-        </ul>
-    );
-};
-
-export default SortableContainer(SortableList);