@visns-studio/visns-components 5.8.0 → 5.8.2

package/package.json

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

package/src/components/cms/DropZone.jsx

@@ -9,7 +9,8 @@ import imageCompression from 'browser-image-compression';
 
 import { confirmDialog } from '../utils/ConfirmDialog';
 import CustomFetch from '../crm/Fetch';
-import SortableList from './sorting/List';
+import Gallery from './Gallery';
+import styles from './styles/DropZone.module.css';
 
 function VisnsDropZone({ fetchData, files, settings }) {
     const [data, setData] = useState(files);
@@ -210,10 +211,92 @@ function VisnsDropZone({ fetchData, files, settings }) {
 
     return (
         <>
-            {settings.type === 'gallery' ? (
-                <div className="image-container">
-                    {data && data.length > 0 ? (
-                        <SortableList
+            <div className={styles.dropzoneWrapper}>
+                <div className={styles.progress}>
+                    <motion.div
+                        className={styles.progressBar}
+                        initial={{ width: '0%' }}
+                        animate={{
+                            width: loadingProgress + '%',
+                        }}
+                        transition={{
+                            duration: 1,
+                            ease: [0.165, 0.84, 0.44, 1.0],
+                        }}
+                    />
+                </div>
+                <section className={styles.dropzoneContainer}>
+                    <div {...getRootProps()}>
+                        <input {...getInputProps()} />
+                        {isDragActive ? (
+                            <p>Drop the files here ...</p>
+                        ) : (
+                            <p>
+                                Drag 'n' drop some files here, or click to
+                                select files
+                            </p>
+                        )}
+                    </div>
+                    {settings.type !== 'gallery' ? (
+                        <ul className={styles.dropzoneFiles}>
+                            {data && data.length > 0
+                                ? data.map((a, b) => (
+                                      <li
+                                          onClick={() => {
+                                              handleDownload(a.id);
+                                          }}
+                                          key={'tf-' + b}
+                                          className={styles.dropzoneFileItem}
+                                      >
+                                          <div
+                                              className={
+                                                  styles.dropzoneFileContent
+                                              }
+                                          >
+                                              <File
+                                                  strokeWidth={2}
+                                                  size={20}
+                                                  className={
+                                                      styles.dropzoneFileIcon
+                                                  }
+                                              />
+                                              <span
+                                                  className={
+                                                      styles.dropzoneFileName
+                                                  }
+                                              >
+                                                  {a.file_name}
+                                              </span>
+                                          </div>
+                                          <button
+                                              onClick={(e) => {
+                                                  e.preventDefault();
+                                                  e.stopPropagation();
+                                                  handleDelete(
+                                                      a.id,
+                                                      a.file_name
+                                                  );
+                                              }}
+                                              className={
+                                                  styles.dropzoneDeleteBtn
+                                              }
+                                              aria-label="Delete file"
+                                              title="Delete file"
+                                          >
+                                              <TrashCan
+                                                  strokeWidth={2}
+                                                  size={18}
+                                              />
+                                          </button>
+                                      </li>
+                                  ))
+                                : null}
+                        </ul>
+                    ) : null}
+                </section>
+                {settings.type === 'gallery' ? (
+                    <div className={styles.imageContainer}>
+                        <Gallery
                             items={data}
                             onSortEnd={onSortEnd}
                             axis="xy"
@@ -222,115 +305,68 @@ function VisnsDropZone({ fetchData, files, settings }) {
                             handleDelete={handleDelete}
                             handleEdit={handleEdit}
                             useDragHandle
-                            showImage={true}
+                            distance={1}
                         />
-                    ) : null}
-                </div>
-            ) : null}
-            <div className="progress">
-                <motion.div
-                    className="progress__bar"
-                    initial={{ width: '0%' }}
-                    animate={{
-                        width: loadingProgress + '%',
-                    }}
-                    transition={{
-                        duration: 1,
-                        ease: [0.165, 0.84, 0.44, 1.0],
-                    }}
-                />
-            </div>
-            <section className="dropzone__container">
-                <div {...getRootProps()}>
-                    <input {...getInputProps()} />
-                    {isDragActive ? (
-                        <p>Drop the files here ...</p>
-                    ) : (
-                        <p>
-                            Drag 'n' drop some files here, or click to select
-                            files
-                        </p>
-                    )}
-                </div>
-                {settings.type !== 'gallery' ? (
-                    <ul className="dropzone__files">
-                        {data && data.length > 0
-                            ? data.map((a, b) => (
-                                  <li
-                                      onClick={() => {
-                                          handleDownload(a.id);
-                                      }}
-                                      key={'tf-' + b}
-                                  >
-                                      <File strokeWidth={2} size={18} />
-                                      {a.file_name}
-                                      <button
-                                          onClick={(e) => {
-                                              e.preventDefault();
-                                              e.stopPropagation();
-
-                                              handleDelete(a.id, a.file_name);
-                                          }}
-                                      >
-                                          <TrashCan strokeWidth={2} size={18} />
-                                      </button>
-                                  </li>
-                              ))
-                            : null}
-                    </ul>
+                    </div>
                 ) : null}
-            </section>
+            </div>
             <Popup
                 open={modalShow}
                 onClose={modalClose}
                 closeOnDocumentClick={false}
             >
-                <div className="modalwrap top--modal">
-                    <div className="modal">
-                        <div className="modal__header">
+                <div className={`${styles.modalwrap} top--modal`}>
+                    <div className={styles.modal}>
+                        <div className={styles.modalHeader}>
                             <h1>Update File Metadata</h1>
                             <button
-                                className="modal__close"
+                                className={styles.modalClose}
                                 onClick={modalClose}
                             >
                                 <CircleX strokeWidth={1} size={24} />
                             </button>
                         </div>
-                        <div className="modal__content">
+                        <div className={styles.modalContent}>
                             <div className="formcontainer">
                                 <form
                                     className="modalForm"
                                     onSubmit={handleSubmit}
                                 >
-                                    <div className="formItem fwItem">
-                                        <label className="fi__label">
+                                    <div
+                                        className={`${styles.formItem} fwItem`}
+                                    >
+                                        <label className={styles.fiLabel}>
                                             <input
                                                 type="text"
                                                 name="title"
                                                 onChange={handleChange}
                                                 value={modalData.title}
                                             />
-                                            <span className="fi__span">
+                                            <span className={styles.fiSpan}>
                                                 Title
                                             </span>
                                         </label>
                                     </div>
-                                    <div className="formItem fwItem">
-                                        <label className="fi__label">
+                                    <div
+                                        className={`${styles.formItem} fwItem`}
+                                    >
+                                        <label className={styles.fiLabel}>
                                             <textarea
                                                 name="description"
                                                 rows="5"
                                                 onChange={handleChange}
                                                 value={modalData.description}
                                             ></textarea>
-                                            <span className="fi__span">
+                                            <span className={styles.fiSpan}>
                                                 Description
                                             </span>
                                         </label>
                                     </div>
-                                    <div className="formItem fwItem lastItem">
+                                    <div
+                                        className={`${styles.formItem} fwItem lastItem`}
+                                    >
                                         <button
-                                            className="btn modalsave"
+                                            className={`btn ${styles.btnModalsave}`}
                                             type="submit"
                                         >
                                             Save

package/src/components/cms/Gallery.jsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+    SortableContainer,
+    SortableElement,
+    sortableHandle,
+} from 'react-sortable-hoc';
+import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import styles from './styles/Gallery.module.css';
+
+// Drag handle component
+const DragHandle = sortableHandle(() => (
+    <div className={styles.galleryDragHandle}>
+        <ChevronVertical strokeWidth={1.5} size={16} />
+    </div>
+));
+
+// Utility function to truncate text
+const truncateText = (text, maxLength) => {
+    if (text && text.length > maxLength) {
+        return `${text.substring(0, maxLength)}...`;
+    }
+    return text;
+};
+
+// Sortable gallery item
+const SortableGalleryItem = SortableElement(
+    ({ value, handleEdit, handleDelete }) => {
+        const imageUrl = value.image_url || value.file_url;
+        const title =
+            value.file_title || value.label || value.file_name || 'Untitled';
+        const description = value.file_description || '';
+
+        return (
+            <div className={styles.galleryItem}>
+                <DragHandle />
+
+                <div className={styles.galleryImage}>
+                    {imageUrl ? (
+                        <img src={imageUrl} alt={title} />
+                    ) : (
+                        <img
+                            src="data:image/png;base64,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"
+                            alt="Placeholder"
+                        />
+                    )}
+                </div>
+
+                <div className={styles.galleryInfo}>
+                    <h3 className={styles.galleryTitle}>
+                        {truncateText(title, 30)}
+                    </h3>
+                    {description && (
+                        <p className={styles.galleryDescription}>
+                            {truncateText(description, 100)}
+                        </p>
+                    )}
+                </div>
+
+                <div className={styles.galleryControls}>
+                    {handleEdit && (
+                        <button
+                            className={`${styles.galleryControl} ${styles.edit}`}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleEdit(value);
+                            }}
+                            title="Edit"
+                        >
+                            <Pencil strokeWidth={1.5} size={16} />
+                        </button>
+                    )}
+
+                    {handleDelete && (
+                        <button
+                            className={`${styles.galleryControl} ${styles.delete}`}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                handleDelete(
+                                    value.id,
+                                    value.file_name || value.label
+                                );
+                            }}
+                            title="Delete"
+                        >
+                            <TrashCan strokeWidth={1.5} size={16} />
+                        </button>
+                    )}
+                </div>
+            </div>
+        );
+    }
+);
+
+// Sortable gallery container
+const Gallery = SortableContainer(({ items, handleEdit, handleDelete }) => {
+    if (!items || items.length === 0) {
+        return (
+            <div className={styles.galleryEmpty}>
+                <div className={styles.galleryEmptyIcon}>
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="48"
+                        height="48"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="1"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    >
+                        <rect
+                            x="3"
+                            y="3"
+                            width="18"
+                            height="18"
+                            rx="2"
+                            ry="2"
+                        ></rect>
+                        <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                        <polyline points="21 15 16 10 5 21"></polyline>
+                    </svg>
+                </div>
+                <p className={styles.galleryEmptyText}>
+                    No images to display. Drag and drop files to upload.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.galleryGrid}>
+            {items.map((value, index) => (
+                <SortableGalleryItem
+                    key={`item-${index}`}
+                    index={index}
+                    value={value}
+                    handleEdit={handleEdit}
+                    handleDelete={handleDelete}
+                />
+            ))}
+        </div>
+    );
+});
+
+export default Gallery;

package/src/components/cms/sorting/styles/Item.module.scss

@@ -11,9 +11,9 @@
 
 :global {
     .delete {
-        width: 22px;
-        height: 22px;
-        color: var(--primary-color);
+        width: 32px;
+        height: 32px;
+        color: #fff;
         transition: color 0.2s ease;
         cursor: pointer;
         display: block;
@@ -24,8 +24,8 @@
     }
 
     .pencil-edit {
-        width: 22px;
-        height: 22px;
+        width: 32px;
+        height: 32px;
         color: var(--primary-color);
         transition: color 0.2s ease;
         cursor: pointer;

package/src/components/cms/styles/DropZone.module.css

@@ -0,0 +1,347 @@
+/* DropZone Component Styles */
+
+/* Dropzone wrapper */
+.dropzoneWrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* Gallery container */
+.imageContainer {
+    width: 100%;
+    padding: 1rem;
+    box-sizing: border-box;
+}
+
+/* Override the sortlist styles for gallery view */
+:global(.sortlist) {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 16px;
+    width: 100%;
+}
+
+:global(.sortlist li) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    margin-bottom: 16px;
+}
+
+:global(.sortlist li:hover) {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+}
+
+:global(.sortlist .sortimg) {
+    width: 100%;
+    height: auto;
+    max-height: 500px;
+    margin: 0;
+    overflow: hidden;
+}
+
+:global(.sortlist .sortimg img) {
+    width: 100%;
+    height: auto;
+    max-height: 500px;
+    object-fit: contain;
+    display: block;
+    background-color: #f5f5f5;
+}
+
+:global(.sortlist .drag-handle) {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+:global(.sortlist .actionIcons) {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+:global(.sortlist .delete),
+:global(.sortlist .pencil-edit) {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+:global(.sortlist .delete:hover),
+:global(.sortlist .pencil-edit:hover) {
+    transform: scale(1.05);
+    background-color: rgba(0, 0, 0, 0.9);
+    color: rgba(255, 255, 255, 1);
+}
+
+/* Dropzone container */
+.dropzoneContainer {
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.dropzoneContainer > div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    border: 2px dashed rgba(var(--primary-rgb, 0, 0, 0), 0.2);
+    border-radius: 6px;
+    background-color: rgba(var(--tertiary-color-rgb, 240, 240, 240), 0.5);
+    color: var(--paragraph-color, #666);
+    outline: none;
+    transition: all 0.2s ease;
+}
+
+.dropzoneContainer > div:hover {
+    border-color: rgba(var(--primary-rgb, 0, 0, 0), 0.4);
+    background-color: rgba(var(--tertiary-color-rgb, 240, 240, 240), 0.7);
+}
+
+.dropzoneContainer p {
+    padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    text-align: center;
+}
+
+/* Progress bar */
+.progress {
+    width: 100%;
+    height: 4px;
+    background-color: rgba(var(--tertiary-color-rgb, 240, 240, 240), 1);
+    border-radius: 2px;
+    overflow: hidden;
+    margin: 0.5rem 0;
+}
+
+.progressBar {
+    height: 100%;
+    background-color: var(--primary-color, #333);
+    border-radius: 2px;
+}
+
+/* File list container */
+.dropzoneFiles {
+    list-style: none;
+    padding: 0;
+    margin: 1em 0;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 12px;
+}
+
+/* File item */
+.dropzoneFileItem {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(var(--tertiary-color-rgb, 240, 240, 240), 1);
+    color: var(--primary-color, #333);
+    border-radius: 6px;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    padding: 12px 16px;
+    box-sizing: border-box;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.dropzoneFileItem:hover {
+    background: rgba(var(--secondary-color-rgb, 220, 220, 220), 0.65);
+    transform: translateY(-2px);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* File content container */
+.dropzoneFileContent {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    overflow: hidden;
+    flex: 1;
+}
+
+/* File icon */
+.dropzoneFileIcon {
+    color: var(--primary-color, #333);
+    flex-shrink: 0;
+}
+
+/* File name */
+.dropzoneFileName {
+    font-size: 0.95rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Delete button */
+.dropzoneDeleteBtn {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: var(--primary-color, #fff);
+    padding: 6px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    margin-left: 8px;
+}
+
+.dropzoneDeleteBtn:hover {
+    color: var(--secondary-color, #f44336);
+    background-color: rgba(244, 67, 54, 0.1);
+}
+
+/* Modal styles */
+.modalwrap {
+    width: 100%;
+    max-width: 500px;
+}
+
+.modal {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+}
+
+.modalHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.modalHeader h1 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--heading-color, #333);
+}
+
+.modalClose {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--paragraph-color, #666);
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.modalClose:hover {
+    color: var(--secondary-color, #f44336);
+    background-color: rgba(244, 67, 54, 0.1);
+}
+
+.modalContent {
+    padding: 1.5rem;
+}
+
+.formItem {
+    margin-bottom: 1.25rem;
+}
+
+.fiLabel {
+    position: relative;
+    display: block;
+}
+
+.fiLabel input,
+.fiLabel textarea {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+}
+
+.fiLabel input:focus,
+.fiLabel textarea:focus {
+    border-color: var(--primary-color, #333);
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 0, 0), 0.1);
+}
+
+.fiSpan {
+    position: absolute;
+    top: -0.5rem;
+    left: 0.75rem;
+    padding: 0 0.25rem;
+    background-color: white;
+    font-size: 0.8rem;
+    color: var(--paragraph-color, #666);
+}
+
+.btnModalsave {
+    background-color: var(--primary-color, #333);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.btnModalsave:hover {
+    background-color: var(--secondary-color, #555);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .dropzoneFiles {
+        grid-template-columns: 1fr;
+    }
+
+    .modalwrap {
+        width: 90%;
+    }
+}

package/src/components/cms/styles/Gallery.module.css

@@ -0,0 +1,197 @@
+/* Gallery grid */
+.galleryGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.galleryItem {
+    position: relative;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.galleryItem:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.galleryImage {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    background-color: #f5f5f5;
+}
+
+.galleryImage img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+}
+
+.galleryItem:hover .galleryImage img {
+    transform: scale(1.05);
+}
+
+.galleryInfo {
+    padding: 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.galleryTitle {
+    margin: 0 0 8px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #333;
+}
+
+.galleryDescription {
+    margin: 0;
+    font-size: 14px;
+    color: #666;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Gallery controls */
+.galleryControls {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+.galleryControl {
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: none;
+    outline: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    padding: 0;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.galleryControl svg {
+    width: 16px;
+    height: 16px;
+}
+
+.galleryControl:hover {
+    transform: scale(1.05);
+    background-color: rgba(0, 0, 0, 0.9);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+    color: rgba(255, 255, 255, 1);
+}
+
+.edit {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.delete {
+    background-color: rgba(0, 0, 0, 0.7);
+}
+
+.galleryDragHandle {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 10;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    color: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.galleryDragHandle svg {
+    width: 16px;
+    height: 16px;
+}
+
+/* Empty state */
+.galleryEmpty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    border: 2px dashed #ddd;
+    margin-top: 20px;
+}
+
+.galleryEmptyIcon {
+    color: #ccc;
+    margin-bottom: 16px;
+}
+
+.galleryEmptyText {
+    color: #888;
+    text-align: center;
+    font-size: 16px;
+    margin: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1200px) {
+    .galleryGrid {
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    }
+}
+
+@media (max-width: 768px) {
+    .galleryGrid {
+        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    }
+    
+    .galleryImage {
+        height: 160px;
+    }
+    
+    .galleryInfo {
+        padding: 12px;
+    }
+    
+    .galleryTitle {
+        font-size: 14px;
+    }
+    
+    .galleryDescription {
+        font-size: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .galleryGrid {
+        grid-template-columns: 1fr;
+    }
+}

package/src/components/crm/auth/styles/Login.module.scss

@@ -226,91 +226,97 @@
     }
 }
 
-input:not(:placeholder-shown) + .fi__span,
-textarea:not(:placeholder-shown) + .fi__span,
-select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-135%) translateX(10px) scale(0.85);
-    opacity: 1;
-    padding: 0;
-    background: white;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    color: var(--primary-color, #4f46e5) !important;
-}
+/* Login component wrapper for all scoped styles */
+.login,
+.logincontainer,
+.lcontainer {
+    /* Input, textarea, and select styling */
+    input:not(:placeholder-shown) + .fi__span,
+    textarea:not(:placeholder-shown) + .fi__span,
+    select:not(:placeholder-shown) + .fi__span {
+        transform: translateY(-135%) translateX(10px) scale(0.85);
+        opacity: 1;
+        padding: 0;
+        background: white;
+        font-weight: 500;
+        transition: all 0.3s ease;
+        color: var(--primary-color, #4f46e5) !important;
+    }
 
-input:focus + .fi__span,
-textarea:focus + .fi__span,
-select:focus + .fi__span {
-    color: var(--primary-color, #4f46e5) !important;
-}
+    input:focus + .fi__span,
+    textarea:focus + .fi__span,
+    select:focus + .fi__span {
+        color: var(--primary-color, #4f46e5) !important;
+    }
 
-input:focus,
-textarea:focus,
-select:focus {
-    border-color: var(--primary-color, #4f46e5) !important;
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
-}
+    input:focus,
+    textarea:focus,
+    select:focus {
+        border-color: var(--primary-color, #4f46e5) !important;
+        outline: none;
+        box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+    }
 
-/* Add divider styling for the OR section */
-.divider {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    margin: 1rem 0;
-    color: #9ca3af;
-    font-size: 0.875rem;
-}
+    /* Divider styling for the OR section */
+    .divider {
+        display: flex;
+        align-items: center;
+        text-align: center;
+        margin: 1rem 0;
+        color: #9ca3af;
+        font-size: 0.875rem;
+    }
 
-.divider::before,
-.divider::after {
-    content: '';
-    flex: 1;
-    border-bottom: 1px solid #e5e7eb;
-}
+    .divider::before,
+    .divider::after {
+        content: '';
+        flex: 1;
+        border-bottom: 1px solid #e5e7eb;
+    }
 
-.divider::before {
-    margin-right: 1rem;
-}
+    .divider::before {
+        margin-right: 1rem;
+    }
 
-.divider::after {
-    margin-left: 1rem;
-}
+    .divider::after {
+        margin-left: 1rem;
+    }
 
-/* SSO button styling */
-.ssoButton {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background-color: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    color: #374151;
-    transition: all 0.2s ease;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    /* SSO button styling */
+    .ssoButton {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        padding: 0.75rem 1rem;
+        background-color: white;
+        border: 1px solid #e5e7eb;
+        border-radius: 0.5rem;
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: #374151;
+        transition: all 0.2s ease;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
-    &:hover {
-        background-color: var(--bg-color, #f5f3ef);
-        border-color: var(--border-color, #e1e1e1);
-    }
+        &:hover {
+            background-color: var(--bg-color, #f5f3ef);
+            border-color: var(--border-color, #e1e1e1);
+        }
 
-    img {
-        margin-right: 0.5rem;
+        img {
+            margin-right: 0.5rem;
+        }
     }
-}
 
-.forgotPasswordLink {
-    &:hover {
-        color: var(--secondary-color, #3cbf7d) !important;
-        text-decoration: underline !important;
-    }
+    .forgotPasswordLink {
+        &:hover {
+            color: var(--secondary-color, #3cbf7d) !important;
+            text-decoration: underline !important;
+        }
 
-    &:focus {
-        outline: 2px solid rgba(var(--primary-rgb), 0.25) !important;
-        outline-offset: 2px !important;
+        &:focus {
+            outline: 2px solid rgba(var(--primary-rgb), 0.25) !important;
+            outline-offset: 2px !important;
+        }
     }
 }

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

@@ -8,7 +8,7 @@ import Download from '../Download';
 import { saveAs } from 'file-saver';
 import Swal from 'sweetalert2';
 import styles from './styles/GenericReport.module.scss';
-import './styles/SweetAlertCustom.css';
+import './styles/SweetAlert.module.css';
 
 // Utility function to format names from camelCase or snake_case to Title Case with spaces
 const formatName = (name) => {

package/src/components/crm/generic/styles/{SweetAlertCustom.css → SweetAlert.module.css}

@@ -1,13 +1,13 @@
 /* Custom styles for SweetAlert2 popups */
 
-.swal2-popup {
+:global(.swal2-popup) {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
         Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     border-radius: 6px;
     padding: 18px;
 }
 
-.swal2-title {
+:global(.swal2-title) {
     font-size: 18px !important;
     font-weight: 600 !important;
     color: #1f2937 !important;
@@ -15,7 +15,7 @@
     padding: 0 !important;
 }
 
-.swal2-html-container {
+:global(.swal2-html-container) {
     text-align: left !important;
     font-size: 14px !important;
     color: #4b5563 !important;
@@ -25,15 +25,15 @@
 }
 
 /* Button styles for symmetrical appearance */
-.swal2-actions {
+:global(.swal2-actions) {
     display: flex !important;
     justify-content: center !important;
     gap: 10px !important;
     width: 100% !important;
 }
 
-.swal2-confirm,
-.swal2-cancel {
+:global(.swal2-confirm),
+:global(.swal2-cancel) {
     flex: 1 !important;
     max-width: 120px !important;
     min-width: 100px !important;
@@ -44,41 +44,41 @@
     margin: 0 !important;
 }
 
-.swal2-confirm {
+:global(.swal2-confirm) {
     background-color: #2563eb !important;
 }
 
-.swal2-cancel {
+:global(.swal2-cancel) {
     background-color: #6b7280 !important;
 }
 
-.swal2-confirm:focus {
+:global(.swal2-confirm:focus) {
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
 }
 
-.swal2-cancel:focus {
+:global(.swal2-cancel:focus) {
     box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.3) !important;
 }
 
 /* Make the modal more compact */
-.swal2-popup.swal2-modal {
+:global(.swal2-popup.swal2-modal) {
     max-width: 90%;
 }
 
 /* Reduce spacing between elements */
-.swal2-icon {
+:global(.swal2-icon) {
     margin: 0 auto 10px !important;
 }
 
 /* Adjust content spacing */
-.swal2-content {
+:global(.swal2-content) {
     padding: 0 !important;
 }
 
 /* Override browser default font-size clamp for lists */
-.swal2-html-container ul,
-.swal2-html-container ol,
-.swal2-html-container li {
+:global(.swal2-html-container ul),
+:global(.swal2-html-container ol),
+:global(.swal2-html-container li) {
     font-size: 14px !important;
     line-height: 1.4 !important;
     font-size: clamp(
@@ -89,21 +89,21 @@
 }
 
 /* Ensure consistent styling for all text elements */
-.swal2-html-container p,
-.swal2-html-container span,
-.swal2-html-container div,
-.swal2-html-container h4 {
+:global(.swal2-html-container p),
+:global(.swal2-html-container span),
+:global(.swal2-html-container div),
+:global(.swal2-html-container h4) {
     font-size: inherit !important;
     line-height: inherit !important;
 }
 
 /* Target the specific browser clamp issue */
-#swal2-html-container ul {
+:global(#swal2-html-container ul) {
     font-size: 14px !important;
     font-size: clamp(14px, 14px, 14px) !important;
 }
 
-#swal2-html-container li {
+:global(#swal2-html-container li) {
     font-size: 14px !important;
     font-size: clamp(14px, 14px, 14px) !important;
 }

package/src/components/utils/ConfirmDialog.js

@@ -1,5 +1,5 @@
 import Swal from 'sweetalert2';
-import '../crm/generic/styles/SweetAlertCustom.css';
+import '../crm/generic/styles/SweetAlert.module.css';
 
 /**
  * A utility function that replaces react-confirm-alert with SweetAlert2