@visns-studio/visns-components 5.6.14 → 5.7.1

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

@@ -28,12 +28,12 @@ import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
 import { motion } from 'framer-motion';
 import Dropzone from 'react-dropzone';
-import { confirmAlert } from 'react-confirm-alert';
 import truncate from 'truncate';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
 import imageCompression from 'browser-image-compression';
+import fetchUtil from '../../../utils/fetchUtil';
 import {
     CircleCheck,
     Copy,
@@ -43,8 +43,8 @@ import {
     Pencil,
     TrashCan,
 } from 'akar-icons';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import 'react-big-calendar/lib/css/react-big-calendar.css';
 import 'react-big-calendar/lib/addons/dragAndDrop/styles.css';
 
@@ -154,36 +154,24 @@ function GenericDetail({
                 'Processing file... Please wait!'
             );
 
-            const csrfToken = document
-                .querySelector('meta[name="csrf-token"]')
-                .getAttribute('content');
-            const response = await fetch('/ajax/ocr/analyzeFile', {
+            const response = await fetchUtil({
+                url: '/ajax/ocr/analyzeFile',
                 method: 'POST',
-                headers: { 'X-CSRF-TOKEN': csrfToken },
-                body: formData,
+                data: formData,
             });
 
-            if (response.ok) {
-                const result = await response.json();
+            const result = response.data;
 
-                setData((prevState) => ({
-                    ...prevState,
-                    [id]: result,
-                }));
-                toast.update(loadingToast, {
-                    render: 'File processed successfully!',
-                    type: 'success',
-                    isLoading: false,
-                    autoClose: 3000,
-                });
-            } else {
-                toast.update(loadingToast, {
-                    render: 'Error processing file.',
-                    type: 'error',
-                    isLoading: false,
-                    autoClose: 3000,
-                });
-            }
+            setData((prevState) => ({
+                ...prevState,
+                [id]: result,
+            }));
+            toast.update(loadingToast, {
+                render: 'File processed successfully!',
+                type: 'success',
+                isLoading: false,
+                autoClose: 3000,
+            });
         } catch (error) {
             console.error(error);
             toast.update(loadingToast, {
@@ -1142,100 +1130,20 @@ function GenericDetail({
                                     file_url ||
                                     `/ajax/files/downloadContent/${id}`;
 
-                                // Use fetch to retrieve the file as a blob
-                                fetch(urlToDownload, {
+                                // Use fetchUtil to retrieve the file as a blob
+                                fetchUtil({
+                                    url: urlToDownload,
                                     method: 'GET',
                                     headers: {
                                         'Content-Type':
                                             'application/octet-stream', // Specify content type as binary
                                     },
+                                    responseType: 'blob',
                                 })
-                                    .then(async (response) => {
-                                        if (!response.ok) {
-                                            // Try to extract error message from response if possible
-                                            // Clone the response to read it as JSON first
-                                            const clonedResponse =
-                                                response.clone();
-
-                                            try {
-                                                // First try to parse as JSON
-                                                const errorData =
-                                                    await clonedResponse.json();
-
-                                                if (
-                                                    errorData &&
-                                                    errorData.error
-                                                ) {
-                                                    throw new Error(
-                                                        errorData.error
-                                                    );
-                                                } else if (
-                                                    errorData &&
-                                                    errorData.message
-                                                ) {
-                                                    throw new Error(
-                                                        errorData.message
-                                                    );
-                                                } else if (
-                                                    errorData &&
-                                                    errorData.value
-                                                ) {
-                                                    throw new Error(
-                                                        errorData.value
-                                                    );
-                                                } else {
-                                                    // JSON parsed but no known error fields
-                                                    throw new Error(
-                                                        `HTTP error! Status: ${response.status}`
-                                                    );
-                                                }
-                                            } catch (jsonError) {
-                                                // If we can't parse as JSON, try to get text
-                                                try {
-                                                    const textResponse =
-                                                        response.clone();
-                                                    const errorText =
-                                                        await textResponse.text();
-
-                                                    // Check if the text looks like JSON but wasn't parsed correctly
-                                                    if (
-                                                        errorText.includes(
-                                                            '"error":'
-                                                        )
-                                                    ) {
-                                                        // Try to extract the error message with regex
-                                                        const errorMatch =
-                                                            errorText.match(
-                                                                /"error":"([^"]+)"/i
-                                                            );
-                                                        if (
-                                                            errorMatch &&
-                                                            errorMatch[1]
-                                                        ) {
-                                                            throw new Error(
-                                                                errorMatch[1]
-                                                            );
-                                                        }
-                                                    }
-
-                                                    // If we got text but couldn't extract a specific error
-                                                    if (
-                                                        errorText &&
-                                                        errorText.length < 100
-                                                    ) {
-                                                        throw new Error(
-                                                            errorText
-                                                        );
-                                                    }
-                                                } catch (textError) {
-                                                    // If all else fails, fall back to status
-                                                    throw new Error(
-                                                        `HTTP error! Status: ${response.status}`
-                                                    );
-                                                }
-                                            }
-                                        }
-                                        return response.blob(); // Convert response to Blob
+                                    .then((response) => {
+                                        // fetchUtil already handles response.ok check and throws errors
+                                        // Just return the blob data directly
+                                        return response.data;
                                     })
                                     .then((blob) => {
                                         // Validate that we have a valid blob with content
@@ -1277,11 +1185,12 @@ function GenericDetail({
                                 if (e) {
                                     e.stopPropagation();
 
-                                    confirmAlert({
+                                    confirmDialog({
                                         title: 'Confirm to Delete File',
                                         message:
                                             'Are you sure you want to delete ' +
                                             name,
+                                        data: { name: name }, // Add context data
                                         buttons: [
                                             {
                                                 label: 'Yes',
@@ -2815,20 +2724,27 @@ function GenericDetail({
                 open={modalShow}
                 onClose={modalClose}
                 closeOnDocumentClick={false}
+                contentStyle={{ width: '80vw', maxWidth: '1200px' }}
             >
-                <Form
-                    closeModal={modalClose}
-                    columnId={formId}
-                    fetchTable={handleReload}
-                    formSettings={formData}
-                    formType={formType}
-                    style={userProfile?.settings?.style || {}}
-                    updateForm={setFormData}
-                    userProfile={userProfile}
-                    paramValue={
-                        routeParams[urlParam] ? routeParams[urlParam] : 0
-                    }
-                />
+                <div className="modalwrap top--modal modalWide">
+                    <div className="modal">
+                        <Form
+                            closeModal={modalClose}
+                            columnId={formId}
+                            fetchTable={handleReload}
+                            formSettings={formData}
+                            formType={formType}
+                            style={userProfile?.settings?.style || {}}
+                            updateForm={setFormData}
+                            userProfile={userProfile}
+                            paramValue={
+                                routeParams[urlParam]
+                                    ? routeParams[urlParam]
+                                    : 0
+                            }
+                        />
+                    </div>
+                </div>
             </Popup>
         </>
     );

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

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import moment from 'moment';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import { toast } from 'react-toastify';
-import { confirmAlert } from 'react-confirm-alert';
 import { saveAs } from 'file-saver';
 import parse from 'html-react-parser';
 import { Backspace, CloudDownload } from 'akar-icons';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import Download from '../Download';
@@ -687,9 +686,10 @@ const GenericDynamic = ({
             }
         };
 
-        confirmAlert({
+        confirmDialog({
             title: 'Delete File',
             message: 'Are you sure?',
+            data: { name: 'this file' }, // Add some context
             buttons: [
                 {
                     label: 'Yes',

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

@@ -2,14 +2,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import debounce from 'lodash.debounce';
 import { toast } from 'react-toastify';
-import { confirmAlert } from 'react-confirm-alert';
 import { TrashCan, ArrowUp, ArrowDown, Copy, Water } from 'akar-icons';
 import { CompactPicker } from 'react-color';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
-
-import 'react-confirm-alert/src/react-confirm-alert.css';
 import styles from './styles/GenericEditableTable.module.scss';
 
 // Updated ColourPicker with an expanded pastel palette
@@ -593,9 +591,10 @@ const GenericEditableTable = ({
 
     // 8) Deletion
     const handleDeleteRow = (entry) => {
-        confirmAlert({
+        confirmDialog({
             title: 'Confirm to Delete',
             message: 'Are you sure you want to delete this entry?',
+            data: entry, // Pass the row data
             buttons: [
                 {
                     label: 'Yes',

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

@@ -4,17 +4,16 @@ import React, { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import Popup from 'reactjs-popup';
 import { arrayMoveImmutable } from 'array-move';
-import { confirmAlert } from 'react-confirm-alert';
 import parse from 'html-react-parser';
 import Toggle from 'react-toggle';
 import { toast } from 'react-toastify';
 import { v4 as uuidv4 } from 'uuid';
 import { Editor } from '@tinymce/tinymce-react';
 import { CirclePlus, CircleX, TrashCan } from 'akar-icons';
+import { confirmDialog } from '../../utils/ConfirmDialog';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
-import 'react-confirm-alert/src/react-confirm-alert.css';
 
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
@@ -278,9 +277,10 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
     };
 
     const handleDeleteField = (id, label) => {
-        confirmAlert({
+        confirmDialog({
             title: `Delete "${label}" Field`,
             message: 'Are you sure you want to delete this field?',
+            data: { name: label, id: id }, // Add context data
             buttons: [
                 {
                     label: 'Yes',

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

@@ -1,8 +1,37 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Table from '../DataGrid';
+import { Bell, Check, ArrowLeft } from 'akar-icons';
+import { toast } from 'react-toastify';
+import CustomFetch from '../Fetch';
 import styles from './styles/NotificationList.module.scss';
 
 const NotificationList = () => {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+
+    const markAllAsRead = useCallback(() => {
+        setLoading(true);
+
+        CustomFetch(
+            '/ajax/user/notification/markallasread',
+            'POST',
+            {},
+            function () {
+                toast.success('All notifications marked as read');
+                setLoading(false);
+                // Refresh the table
+                window.location.reload();
+            },
+            function (error) {
+                setLoading(false);
+                toast.error(
+                    String(error) || 'Failed to mark all notifications as read'
+                );
+            }
+        );
+    }, []);
+
     const setting = {
         ajaxSetting: {
             url: '/ajax/user/notifications/table',
@@ -23,25 +52,49 @@ const NotificationList = () => {
             {
                 id: 'data',
                 jsonData: 'label',
-                label: 'Label',
+                label: 'Message',
                 type: 'json',
+                flex: 1,
+            },
+            {
+                id: 'created_at',
+                label: 'Created At',
+                type: 'datetime',
+                minWidth: 180,
+                maxWidth: 180,
             },
             {
                 id: 'read_at',
                 label: 'Read At',
                 type: 'datetime',
-                minWidth: 200,
-                maxWidth: 200,
+                minWidth: 180,
+                maxWidth: 180,
             },
         ],
         settings: [],
     };
+
     return (
-        <div>
+        <div className={styles.notificationListContainer}>
             <div className={styles.grid}>
                 <div className={styles.grid__row}>
-                    <div className={`${styles.grid__full} ${styles.crmtitle}`}>
-                        <h1>Notifications</h1>
+                    <div
+                        className={`${styles.grid__full} ${styles.headerContainer}`}
+                    >
+                        <div className={styles.headerContent}>
+                            <div className={styles.titleSection}>
+                                <Bell size={24} className={styles.titleIcon} />
+                                <h1>Notifications</h1>
+                            </div>
+                            <button
+                                className={styles.markAllReadButton}
+                                onClick={markAllAsRead}
+                                disabled={loading}
+                            >
+                                <Check size={16} />
+                                <span>Mark all as read</span>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -53,10 +106,26 @@ const NotificationList = () => {
                             form={setting.form}
                             columns={setting.columns}
                             settings={setting.settings}
+                            gridHeight={600}
                         />
                     </div>
                 </div>
             </div>
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div className={styles.grid__full}>
+                        <div className={styles.backButtonContainer}>
+                            <button
+                                className={styles.backButton}
+                                onClick={() => navigate('/')}
+                            >
+                                <ArrowLeft size={16} />
+                                <span>Back to Dashboard</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };

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

@@ -1,3 +1,9 @@
+.notificationListContainer {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
 .grid {
     width: 100%;
     display: flex;
@@ -24,7 +30,89 @@
     box-sizing: border-box;
     overflow: visible;
     position: relative;
-    padding: 2px;
+    padding: 16px;
     margin: 8px 0;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.headerContainer {
+    padding: 16px 24px;
+}
+
+.headerContent {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.titleSection {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.titleIcon {
+    color: var(--primary-color);
+}
+
+.titleSection h1 {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: var(--heading-color, #333);
+}
+
+.markAllReadButton {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 10px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.markAllReadButton:hover {
+    background-color: var(--primary-color-darker, #0056b3);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.markAllReadButton:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.backButtonContainer {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0;
+}
+
+.backButton {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 12px 24px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    min-width: 200px;
+}
+
+.backButton:hover {
+    background-color: var(--primary-color-darker, #0056b3);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }

package/src/components/crm/generic/styles/SweetAlertCustom.css

@@ -24,18 +24,42 @@
     line-height: 1.4 !important;
 }
 
-.swal2-confirm {
-    background-color: #2563eb !important;
+/* Button styles for symmetrical appearance */
+.swal2-actions {
+    display: flex !important;
+    justify-content: center !important;
+    gap: 10px !important;
+    width: 100% !important;
+}
+
+.swal2-confirm,
+.swal2-cancel {
+    flex: 1 !important;
+    max-width: 120px !important;
+    min-width: 100px !important;
     border-radius: 4px !important;
     font-weight: 500 !important;
-    padding: 6px 14px !important;
+    padding: 8px 16px !important;
     font-size: 13px !important;
+    margin: 0 !important;
+}
+
+.swal2-confirm {
+    background-color: #2563eb !important;
+}
+
+.swal2-cancel {
+    background-color: #6b7280 !important;
 }
 
 .swal2-confirm:focus {
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
 }
 
+.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 {
     max-width: 90%;

package/src/components/crm/styles/DataGrid.module.scss

@@ -253,6 +253,11 @@
     z-index: 1000;
 }
 
+.modalWide {
+    width: 80vw;
+    max-width: 1200px;
+}
+
 .modal {
     width: 100%;
     position: relative;