@visns-studio/visns-components 4.7.2 → 4.7.3

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

@@ -0,0 +1,247 @@
+.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/src/components/crm/generic/styles/GenericMain.module.scss

@@ -0,0 +1,91 @@
+.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/src/components/crm/generic/styles/GenericSort.module.scss

@@ -0,0 +1,123 @@
+.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/src/components/crm/generic/styles/NotificationList.module.scss

@@ -0,0 +1,67 @@
+.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/src/components/crm/sorting/Item.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { SortableElement, sortableHandle } from 'react-sortable-hoc';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+
+import styles from './styles/Item.module.scss';
+
+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/src/components/crm/sorting/List.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import VisnsSortableItem from './Item';
+import { SortableContainer } from 'react-sortable-hoc';
+
+import styles from './styles/List.module.scss';
+
+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);