@visns-studio/visns-components 5.0.0 → 5.0.1-8.1

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

@@ -1,7 +1,8 @@
 import '../../styles/global.css';
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
+import { Calendar, momentLocalizer } from 'react-big-calendar';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Popup from 'reactjs-popup';
@@ -10,6 +11,7 @@ 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 {
     CircleCheck,
@@ -17,22 +19,27 @@ import {
     EyeOpen,
     EyeSlashed,
     File,
+    Pencil,
     TrashCan,
 } from 'akar-icons';
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
+import 'react-big-calendar/lib/css/react-big-calendar.css';
 
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
 import Form from '../Form';
 import GenericDynamic from './GenericDynamic';
+import GenericEditableTable from './GenericEditableTable';
+import MultiSelect from '../MultiSelect';
 import QrCode from '../QrCode';
-import SortableList from '../sorting/List';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 
 import styles from './styles/GenericDetail.module.scss';
 
+const localizer = momentLocalizer(moment);
+
 function GenericDetail({
     extraUrlParam,
     layout = 'full',
@@ -53,21 +60,156 @@ function GenericDetail({
 
     /** General States */
     const [activeStage, setActiveStage] = useState('');
+    const [activeTabConfig, setActiveTabConfig] = useState(null);
     const [config, setConfig] = useState({});
     const [data, setData] = useState({});
     const [dataReload, setDataReload] = useState(0);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const [preloadedOptions, setPreloadedOptions] = useState({});
     const [rowsSelected, setRowsSelected] = useState({});
     const [subnav, setSubnav] = useState([]);
     const [total, setTotal] = useState(0);
     const [windowHeight, setWindowHeight] = useState(window.innerHeight);
 
-    const [passwordVisible, setPasswordVisible] = useState(false);
+    /** Ocr States */
+    const [ocrRowsSelected, setOcrRowsSelected] = useState('');
+
+    /** Ocr Template Functionalities */
+    const handleOcrFileChange = async (e) => {
+        try {
+            const id = e.target.getAttribute('data-id');
+
+            const formData = new FormData();
+            formData.append('file', e.target.files[0]);
+
+            // Show a loading toast when the file is being processed
+            const loadingToast = toast.loading(
+                'Processing file... Please wait!'
+            );
+
+            const csrfToken = document
+                .querySelector('meta[name="csrf-token"]')
+                .getAttribute('content');
+            const response = await fetch('/ajax/ocr/analyzeFile', {
+                method: 'POST',
+                headers: { 'X-CSRF-TOKEN': csrfToken },
+                body: formData,
+            });
+
+            if (response.ok) {
+                const result = await response.json();
+                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,
+                });
+            }
+        } catch (error) {
+            console.error(error);
+            toast.update(loadingToast, {
+                render: 'Something went wrong. Please try again.',
+                type: 'error',
+                isLoading: false,
+                autoClose: 3000,
+            });
+        }
+    };
+
+    const handleOcrKeyChange = (e) => {
+        const {
+            value,
+            dataset: { id },
+        } = e.target;
+
+        let selectedKey = data[id].selectedKey || [];
+
+        if (selectedKey.includes(value)) {
+            selectedKey = selectedKey.filter((key) => key !== value);
+        } else {
+            selectedKey.push(value);
+        }
+
+        setData((prevState) => ({
+            ...prevState,
+            [id]: {
+                ...prevState[id],
+                selectedKey,
+            },
+        }));
+    };
+
+    const handleSelectedOcrKey = (value, action, id) => {
+        setOcrRowsSelected(value.value);
+
+        if (value.value) {
+            setData((prevState) => ({
+                ...prevState,
+                [id]: {
+                    ...prevState[id],
+                    dynamicFilename: `${prevState[id].dynamicFilename}_{{ ${value.value} }}`,
+                },
+            }));
+        }
+    };
+
+    const handleOcrInputChange = (e) => {
+        const {
+            name,
+            value,
+            dataset: { id },
+        } = e.target;
+
+        switch (name) {
+            case 'dynamicFilename':
+                setData((prevState) => ({
+                    ...prevState,
+                    [id]: {
+                        ...prevState[id],
+                        dynamicFilename: value,
+                    },
+                }));
+                break;
+        }
+    };
+
+    const handleOcrTemplateSave = async (id) => {
+        try {
+            const res = await CustomFetch(
+                `${activeTabConfig.form.url}/${data.id}`,
+                'PUT',
+                {
+                    ...data,
+                }
+            );
+
+            if (res.data.error === '') {
+                toast.success('Data saved successfully');
+                handleReload();
+            } else {
+                toast.error(res.data.error);
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
 
+    /** General Functions */
     const togglePasswordVisibility = () => {
         setPasswordVisible(!passwordVisible);
     };
 
-    /** General Functions */
     const handleStageUpdate = async (stage, type) => {
         try {
             const activeTab = subnav.find((s) => s.show === true);
@@ -95,6 +237,32 @@ function GenericDetail({
 
                         if (res.data.error === '') {
                             handleReload();
+                            toast.success('Stage updated successfully');
+                        } else {
+                            toast.error(res.data.error);
+                        }
+                    } else if (
+                        stages &&
+                        stages.url &&
+                        stages.url !== '' &&
+                        stages.key &&
+                        stages.key !== '' &&
+                        stages.urlParam &&
+                        stages.urlParam !== ''
+                    ) {
+                        const url = `${stages.url}/${routeParams[urlParam]}`;
+
+                        const res = await CustomFetch(
+                            url,
+                            stages.method || 'POST',
+                            {
+                                [stages.key]: stage.id,
+                            }
+                        );
+
+                        if (res.data.error === '') {
+                            handleReload();
+                            toast.success('Stage updated successfully');
                         } else {
                             toast.error(res.data.error);
                         }
@@ -106,6 +274,14 @@ function GenericDetail({
         }
     };
 
+    const handleExport = (config) => {
+        if (config.url && config.key) {
+            window.open(`${config.url}/${data[config.key]}`);
+        } else {
+            toast.error('Export URL not found');
+        }
+    };
+
     const handleCheckboxUpdate = async () => {
         try {
             if (currentConfigRef.current.functions.checkboxUpdate) {
@@ -299,6 +475,19 @@ function GenericDetail({
             return formattedKeys.join(', ');
         };
 
+        const renderCurrency = () => {
+            // Check if the value is a valid number
+            const parsedValue = parseFloat(value);
+            if (isNaN(parsedValue)) return ''; // Return empty string if invalid
+
+            const formatter = new Intl.NumberFormat('en-AU', {
+                style: 'currency',
+                currency: 'AUD',
+            });
+
+            return formatter.format(parsedValue);
+        };
+
         const renderDate = () => formatDateValue(value);
 
         const renderDateTime = () => formatDateTimeValue(value);
@@ -386,6 +575,94 @@ function GenericDetail({
             }
         };
 
+        const renderOcrTemplate = (id) => {
+            const ocrTemplateBuilder = data[id];
+
+            return (
+                <>
+                    <input
+                        type="file"
+                        data-id={id}
+                        onChange={handleOcrFileChange}
+                    />
+
+                    {ocrTemplateBuilder &&
+                        ocrTemplateBuilder.DeducedData &&
+                        ocrTemplateBuilder.DeducedData.length > 0 && (
+                            <table className={styles.schedulingTable}>
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th>Key</th>
+                                        <th>Value</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {Object.entries(
+                                        ocrTemplateBuilder.DeducedData[0]
+                                    ).map(([key, value], index) => (
+                                        <tr key={`ocr-keys-${index}`}>
+                                            <td>
+                                                <input
+                                                    type="checkbox"
+                                                    name={key}
+                                                    value={key}
+                                                    data-id={id}
+                                                    checked={
+                                                        ocrTemplateBuilder?.selectedKey?.includes(
+                                                            key
+                                                        ) || false
+                                                    }
+                                                    onChange={
+                                                        handleOcrKeyChange
+                                                    }
+                                                />
+                                            </td>
+                                            <td>{key}</td>
+                                            <td>{value}</td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        )}
+
+                    {ocrTemplateBuilder &&
+                        ocrTemplateBuilder.selectedKey &&
+                        ocrTemplateBuilder.selectedKey.length > 0 && (
+                            <>
+                                <strong>Selected Keys</strong>
+                                <MultiSelect
+                                    className=""
+                                    inputValue={ocrRowsSelected}
+                                    multi={false}
+                                    onChange={handleSelectedOcrKey}
+                                    options={ocrTemplateBuilder.selectedKey.map(
+                                        (a) => ({
+                                            label: a,
+                                            value: a,
+                                        })
+                                    )}
+                                    placeholder="Select a Key to use"
+                                    settings={{ id: id }}
+                                    style={{}}
+                                    isCreatable={false}
+                                    creatableConfig={{}}
+                                />
+                                <br />
+                                <strong>File Name</strong>
+                                <input
+                                    type="text"
+                                    value={data[id]?.dynamicFilename || ''}
+                                    data-id={id}
+                                    onChange={handleOcrInputChange}
+                                    name="dynamicFilename"
+                                />
+                            </>
+                        )}
+                </>
+            );
+        };
+
         // Render based on the item's type
         switch (type) {
             case 'boolean':
@@ -394,6 +671,8 @@ function GenericDetail({
                 return renderCheckbox();
             case 'copyToClipboard':
                 return renderCopyToClipboard();
+            case 'currency':
+                return renderCurrency();
             case 'date':
                 return renderDate();
             case 'datetime':
@@ -408,6 +687,8 @@ function GenericDetail({
                 return renderLatestNotes();
             case 'link':
                 return renderLink();
+            case 'ocrTemplate':
+                return renderOcrTemplate(id);
             case 'options':
                 return renderOptions();
             case 'password':
@@ -435,11 +716,82 @@ function GenericDetail({
 
                 if (activeTabConfig && activeTabConfig.type) {
                     switch (activeTabConfig.type) {
+                        case 'calendar':
+                            const events =
+                                data?.[activeTabConfig?.dataKey]
+                                    ?.map((event) => {
+                                        // Safely access keys using optional chaining and defaults
+                                        const keys =
+                                            activeTabConfig?.config?.keys || {};
+                                        const eventStart = event?.[keys.start]
+                                            ? moment(event[keys.start])
+                                            : null;
+                                        const eventEnd = event?.[keys.end]
+                                            ? moment(event[keys.end])
+                                            : null;
+
+                                        // Only include valid events
+                                        if (eventStart && eventEnd) {
+                                            return {
+                                                title:
+                                                    event?.[keys.title] ||
+                                                    'Untitled Event', // Default title if not provided
+                                                start: eventStart,
+                                                end: eventEnd,
+                                            };
+                                        }
+
+                                        return null; // Filter out invalid events
+                                    })
+                                    ?.filter(Boolean) || [];
+
+                            return (
+                                <Calendar
+                                    localizer={localizer}
+                                    events={events}
+                                    startAccessor="start"
+                                    endAccessor="end"
+                                    style={{
+                                        height:
+                                            activeTabConfig.config.height ||
+                                            500,
+                                    }}
+                                    views={
+                                        activeTabConfig.config.views || [
+                                            'month',
+                                            'week',
+                                            'day',
+                                        ]
+                                    }
+                                />
+                            );
                         case 'dropzone':
-                            const downloadFile = (id) => {
-                                window.open(
-                                    `/ajax/files/download/${id}/${activeTabConfig.folder}`
-                                );
+                            const downloadFile = (file) => {
+                                const { id, file_url, file_name } = file;
+
+                                // If file_url exists, use it for the download, else use the id to download
+                                const urlToDownload =
+                                    file_url || `/ajax/files/download/${id}`;
+
+                                // Use fetch to retrieve the file as a blob
+                                fetch(urlToDownload, {
+                                    method: 'GET',
+                                    headers: {
+                                        'Content-Type':
+                                            'application/octet-stream', // Specify content type as binary
+                                    },
+                                })
+                                    .then((response) => response.blob()) // Convert response to Blob
+                                    .then((blob) => {
+                                        // Use FileSaver to download the file with the specified name
+                                        saveAs(blob, file_name);
+                                    })
+                                    .catch((error) => {
+                                        console.error(
+                                            'Error downloading the file:',
+                                            error
+                                        );
+                                    });
                             };
 
                             const deleteFile = (e, id, name) => {
@@ -521,9 +873,13 @@ function GenericDetail({
                                                         key: response.key,
                                                         bucket: response.bucket,
                                                         filename: file.name,
+                                                        file_name: file.name,
                                                         filesize: file.size,
+                                                        file_size: file.size,
                                                         extension:
                                                             response.extension,
+                                                        file_extension:
+                                                            response.extension,
                                                         file_relationship:
                                                             activeTabConfig.file_relationship,
                                                     };
@@ -533,9 +889,30 @@ function GenericDetail({
                                                         'PUT',
                                                         requestBody,
                                                         (res) => {
-                                                            setFiles(
-                                                                res.data.files
-                                                            );
+                                                            if (
+                                                                activeTabConfig.file_relationship &&
+                                                                res.data[
+                                                                    activeTabConfig
+                                                                        .file_relationship
+                                                                ]
+                                                            ) {
+                                                                setFiles(
+                                                                    res.data[
+                                                                        activeTabConfig
+                                                                            .file_relationship
+                                                                    ]
+                                                                );
+                                                            } else {
+                                                                if (
+                                                                    res?.data
+                                                                        ?.files
+                                                                ) {
+                                                                    setFiles(
+                                                                        res.data
+                                                                            .files
+                                                                    );
+                                                                }
+                                                            }
                                                         }
                                                     );
                                                 });
@@ -635,7 +1012,7 @@ function GenericDetail({
                                                             <li
                                                                 onClick={() => {
                                                                     downloadFile(
-                                                                        a.id
+                                                                        a
                                                                     );
                                                                 }}
                                                                 key={'tf-' + b}
@@ -964,6 +1341,7 @@ function GenericDetail({
 
                                     {activeTabConfig.form && (
                                         <div className={styles.polActions}>
+                                            {/* Always render the "Edit" button if activeTabConfig.form exists */}
                                             <button
                                                 className={styles.btn}
                                                 onClick={() =>
@@ -975,6 +1353,57 @@ function GenericDetail({
                                             >
                                                 Edit
                                             </button>
+
+                                            {/* Check if sections contain "ocrTemplate" type and render the "Save" button under the same polActions */}
+                                            {activeTabConfig.sections &&
+                                                activeTabConfig.sections
+                                                    .length > 0 &&
+                                                activeTabConfig.sections.map(
+                                                    (section, sectionIndex) =>
+                                                        section.content &&
+                                                        section.content.some(
+                                                            (item) =>
+                                                                item.type ===
+                                                                'ocrTemplate'
+                                                        ) && (
+                                                            <button
+                                                                key={`save-button-${sectionIndex}`}
+                                                                className={
+                                                                    styles.btn
+                                                                }
+                                                                onClick={() => {
+                                                                    // Handle the specific "ocrTemplate" item
+                                                                    const ocrItem =
+                                                                        section.content.find(
+                                                                            (
+                                                                                item
+                                                                            ) =>
+                                                                                item.type ===
+                                                                                'ocrTemplate'
+                                                                        );
+                                                                    handleOcrTemplateSave(
+                                                                        ocrItem.id
+                                                                    ); // Now you can safely use ocrItem.id
+                                                                }}
+                                                            >
+                                                                Save
+                                                            </button>
+                                                        )
+                                                )}
+
+                                            {/* Check if export exists and render the "Export" button under the same polActions */}
+                                            {activeTabConfig.export && (
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={() =>
+                                                        handleExport(
+                                                            activeTabConfig.export
+                                                        )
+                                                    }
+                                                >
+                                                    Export
+                                                </button>
+                                            )}
                                         </div>
                                     )}
                                 </>
@@ -1207,6 +1636,16 @@ function GenericDetail({
                             } else {
                                 return null;
                             }
+                        case 'scheduling':
+                            return (
+                                <GenericEditableTable
+                                    schedulingConfig={activeTabConfig}
+                                    data={data}
+                                    dataId={routeParams[urlParam]}
+                                    modalOpen={modalOpen}
+                                    preloadedOptions={preloadedOptions}
+                                />
+                            );
                         default:
                             return null;
                     }
@@ -1216,6 +1655,49 @@ function GenericDetail({
     };
 
     /** General Hooks */
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const newActiveTabConfig = tabs.find(
+                    (t) => t.id === activeTab.id
+                );
+                setActiveTabConfig(newActiveTabConfig); // Update state
+            }
+        }
+    }, [subnav, tabs]);
+
+    useEffect(() => {
+        const fetchDropdownOptions = async () => {
+            if (activeTabConfig?.columns) {
+                const ajaxColumns = activeTabConfig.columns.filter(
+                    (column) =>
+                        ['dropdown-ajax', 'multi-dropdown-ajax'].includes(
+                            column.type
+                        ) && column.url
+                );
+
+                const options = {};
+                for (const column of ajaxColumns) {
+                    try {
+                        const res = await CustomFetch(column.url, 'POST');
+                        options[column.id] = res.data.data || res.data || []; // Assume API returns options in the expected format
+                    } catch (error) {
+                        console.error(
+                            `Error fetching options for ${column.id}:`,
+                            error
+                        );
+                    }
+                }
+
+                setPreloadedOptions(options);
+            }
+        };
+
+        fetchDropdownOptions();
+    }, [activeTabConfig]); // Depend on activeTabConfig
+
     useEffect(() => {
         const handleResize = () => {
             setWindowHeight(window.innerHeight);
@@ -1337,6 +1819,7 @@ function GenericDetail({
                                 });
                             }
                             break;
+                        case 'scheduling':
                         case 'overview':
                             setConfig({});
                             if (activeTabConfig.form) {
@@ -1377,8 +1860,17 @@ function GenericDetail({
 
                     tabs.forEach((tab) => {
                         if (tab.type && tab.type === 'dropzone') {
-                            if (res.files) {
-                                setFiles(res.files);
+                            if (
+                                tab.file_relationship &&
+                                tab.file_relationship !== ''
+                            ) {
+                                if (res[tab.file_relationship]) {
+                                    setFiles(res[tab.file_relationship]);
+                                }
+                            } else {
+                                if (res.files) {
+                                    setFiles(res.files);
+                                }
                             }
                         }
                     });
@@ -1454,10 +1946,6 @@ function GenericDetail({
                             <div className={styles.oppstatus}>
                                 <ul className={styles.opppath}>
                                     {stages.data.map((stage) => {
-                                        if (!stage.id) {
-                                            return null; // Skip rendering this stage
-                                        }
-
                                         const isStageComplete =
                                             data[stages.key] >= stage.id;
 
@@ -1522,6 +2010,9 @@ function GenericDetail({
                     style={userProfile?.settings?.style || {}}
                     updateForm={setFormData}
                     userProfile={userProfile}
+                    paramValue={
+                        routeParams[urlParam] ? routeParams[urlParam] : 0
+                    }
                 />
             </Popup>
         </>