@visns-studio/visns-components 4.7.2 → 4.7.3

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

@@ -0,0 +1,1499 @@
+import '../../styles/global.css';
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import moment from 'moment';
+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 { toast } from 'react-toastify';
+import {
+    CircleCheck,
+    Copy,
+    EyeOpen,
+    EyeSlashed,
+    File,
+    TrashCan,
+} from 'akar-icons';
+
+import 'react-confirm-alert/src/react-confirm-alert.css';
+
+import Breadcrumb from '../Breadcrumb';
+import CustomFetch from '../Fetch';
+import Form from '../Form';
+import GenericDynamic from './GenericDynamic';
+import QrCode from '../QrCode';
+import Table from '../DataGrid';
+import TableFilter from '../TableFilter';
+
+import styles from './styles/GenericDetail.module.scss';
+
+function GenericDetail({
+    extraUrlParam,
+    layout = 'full',
+    setting,
+    urlParam,
+    userProfile,
+}) {
+    const gridRef = useRef(null);
+    const currentConfigRef = useRef(null);
+    const routeParams = useParams();
+
+    const { filters, page, stages, tabs } = setting;
+
+    /** Fileupload states */
+    const [files, setFiles] = useState([]);
+    const [loadingProgress, setLoadingProgress] = useState(0);
+
+    /** General States */
+    const [activeStage, setActiveStage] = useState('');
+    const [config, setConfig] = useState({});
+    const [data, setData] = useState({});
+    const [dataReload, setDataReload] = useState(0);
+    const [rowsSelected, setRowsSelected] = useState({});
+    const [subnav, setSubnav] = useState([]);
+    const [total, setTotal] = useState(0);
+    const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+
+    const [passwordVisible, setPasswordVisible] = useState(false);
+
+    const togglePasswordVisibility = () => {
+        setPasswordVisible(!passwordVisible);
+    };
+
+    /** General Functions */
+    const handleStageUpdate = async (stage, type) => {
+        try {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                if (type === 'view') {
+                    setActiveStage(stage.id);
+                } else {
+                    if (
+                        activeTabConfig.stages &&
+                        activeTabConfig.stages.url &&
+                        activeTabConfig.stages.url !== '' &&
+                        activeTabConfig.stages.key &&
+                        activeTabConfig.stages.key !== '' &&
+                        activeTabConfig.stages.urlParam &&
+                        activeTabConfig.stages.urlParam !== ''
+                    ) {
+                        const url = `${activeTabConfig.stages.url}/${routeParams[urlParam]}`;
+
+                        const res = await CustomFetch(url, 'POST', {
+                            [activeTabConfig.stages.key]: stage.id,
+                        });
+
+                        if (res.data.error === '') {
+                            handleReload();
+                        } else {
+                            toast.error(res.data.error);
+                        }
+                    }
+                }
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const handleCheckboxUpdate = async () => {
+        try {
+            if (currentConfigRef.current.functions.checkboxUpdate) {
+                const { data, method, message, url } =
+                    currentConfigRef.current.functions.checkboxUpdate;
+                if (!Object.keys(rowsSelected).length) {
+                    toast.warning(message.warning);
+                    return;
+                }
+                const res = await CustomFetch(url, method, {
+                    ...data,
+                    rows: rowsSelected,
+                });
+                if (res.data.error === '') {
+                    toast.success(message.success);
+                    gridRef.current.reload();
+                } else {
+                    toast.error(message.error);
+                }
+            }
+        } catch (error) {
+            console.error(error);
+        }
+    };
+
+    const handleReload = () => {
+        const min = 0;
+        const max = 999999999;
+        const randomNumber = Math.floor(Math.random() * (max - min + 1) + min);
+
+        setDataReload(randomNumber);
+    };
+
+    const getValueFromData = (data, path, id, type) => {
+        let value =
+            path.reduce((result, key) => (result ? result[key] : ''), data) ??
+            '';
+
+        if (value) {
+            if (Array.isArray(value)) {
+                return value
+                    .filter((item) => item[id]) // Filter out items without the specified id
+                    .map((item) => item[id]) // Extract the id from each item
+                    .join(', ');
+            } else {
+                if (Array.isArray(id)) {
+                    if (type === 'checkbox') {
+                        return value[id];
+                    } else {
+                        return id.map((key) => value[key]).join(' ');
+                    }
+                } else {
+                    return value[id];
+                }
+            }
+        } else {
+            if (path.length > 0) {
+                return '';
+            } else {
+                return data[id] || '';
+            }
+        }
+    };
+
+    const formatDate = (date) => {
+        return date && moment(date).format('DD-MM-YYYY') !== '01-01-1970'
+            ? moment(date).format('DD-MM-YYYY')
+            : '';
+    };
+
+    const formatDateTime = (date) => {
+        return date && moment(date).format('DD-MM-YYYY') !== '01-01-1970'
+            ? moment(date).format('DD-MM-YYYY HH:mm A')
+            : '';
+    };
+
+    const renderValue = (item, data) => {
+        const {
+            type,
+            id,
+            options,
+            relation,
+            relationKey,
+            size,
+            truncateLength,
+        } = item;
+        const value =
+            relation && relation.length > 0 && type !== 'total'
+                ? getValueFromData(data, [...relation], id, type)
+                : getValueFromData(data, [], id, type);
+
+        const stringValue = String(value ?? ''); // Convert value to a string
+
+        // Conditionally truncate the value if the 'truncate' key is present
+        const truncatedValue =
+            truncateLength && truncateLength > 0
+                ? truncate(stringValue, truncateLength)
+                : stringValue;
+
+        const formatDateValue = (date) => formatDate(date);
+        const formatDateTimeValue = (date) => formatDateTime(date);
+
+        const formatNoteValue = () => {
+            const noteData = data?.[id]?.[0];
+            const name = noteData?.user?.name ?? '';
+            const description = noteData?.description ?? '';
+            const created_at = noteData?.created_at ?? '';
+            const formattedDate = formatDateValue(created_at);
+
+            return name !== '' && description !== '' && formattedDate !== ''
+                ? parse(
+                      `<br /><p>${name} - ${formattedDate}</p><p>${description}</p>`
+                  )
+                : null;
+        };
+
+        const formatTotalValue = () => {
+            const total =
+                data[relation]?.reduce(
+                    (acc, r) => acc + (parseFloat(r[relationKey]) || 0),
+                    0
+                ) || 0;
+            return `${total} / ${value}`;
+        };
+
+        const renderCopyToClipboard = () => {
+            return (
+                <>
+                    {size === 'full' && truncatedValue
+                        ? parse(`<br /><p>${truncatedValue}</p>`)
+                        : truncatedValue}
+                    aaa
+                    <CopyToClipboard
+                        text={
+                            truncatedValue && truncatedValue !== 'null'
+                                ? truncatedValue
+                                : ''
+                        }
+                        onCopy={() => console.info('copied')}
+                    >
+                        <Copy
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content="Copy to Clipboard"
+                            strokeWidth={2}
+                            size={24}
+                        />
+                    </CopyToClipboard>
+                </>
+            );
+        };
+
+        const renderBoolean = () => (value ? 'Yes' : 'No');
+
+        const renderCheckbox = () => {
+            if (!value || typeof value !== 'object') {
+                return '';
+            }
+
+            const formatKey = (key) => {
+                return key
+                    .toLowerCase()
+                    .split('_')
+                    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+                    .join(' ');
+            };
+
+            const keys = Object.keys(value)
+                .filter((key) => value[key] && key !== 'notes')
+                .sort((a, b) => {
+                    if (a === 'other') return 1;
+                    if (b === 'other') return -1;
+                    return a.localeCompare(b);
+                });
+
+            const formattedKeys = keys.map((key) => {
+                let formattedKey = formatKey(key);
+                if (key === 'other') {
+                    const otherValue = getValueFromData(
+                        data,
+                        [...relation],
+                        `${id}_other`,
+                        type
+                    );
+
+                    if (otherValue) {
+                        formattedKey += `: ${otherValue}`;
+                    }
+                }
+                return formattedKey;
+            });
+
+            return formattedKeys.join(', ');
+        };
+
+        const renderDate = () => formatDateValue(value);
+
+        const renderDateTime = () => formatDateTimeValue(value);
+
+        const renderFile = () =>
+            value ? (
+                <a href={value} target="_blank">
+                    Download
+                </a>
+            ) : null;
+
+        const renderExist = () => (truncatedValue ? 'Yes' : 'No');
+
+        const renderJson = () =>
+            value ? <pre>{JSON.stringify(value, null, 4)}</pre> : null;
+
+        const renderLatestNotes = () => formatNoteValue();
+
+        const renderOptions = () => (options ? options[value] : '');
+
+        const renderRichText = () => {
+            if (!truncatedValue) {
+                return null;
+            }
+
+            // Split the string on both '\n' and '<br>' using a regular expression.
+            const lines = truncatedValue.split(/<br>|\\n/);
+
+            if (lines.length === 0) {
+                return null;
+            }
+
+            return (
+                <>
+                    {lines.map((line, index) => (
+                        <p key={index}>{line}</p>
+                    ))}
+                </>
+            );
+        };
+
+        const renderTotal = () => formatTotalValue();
+
+        const renderPassword = () => {
+            return (
+                <>
+                    {passwordVisible ? stringValue : '******'}
+                    <button
+                        type="button"
+                        onClick={togglePasswordVisibility}
+                        style={{
+                            marginLeft: '10px',
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                        }}
+                    >
+                        {passwordVisible ? (
+                            <EyeSlashed size={24} />
+                        ) : (
+                            <EyeOpen size={24} />
+                        )}
+                    </button>
+                </>
+            );
+        };
+
+        // Render based on the item's type
+        switch (type) {
+            case 'boolean':
+                return renderBoolean();
+            case 'checkbox':
+                return renderCheckbox();
+            case 'copyToClipboard':
+                return renderCopyToClipboard();
+            case 'date':
+                return renderDate();
+            case 'datetime':
+                return renderDateTime();
+            case 'exist':
+                return renderExist();
+            case 'file':
+                return renderFile();
+            case 'json':
+                return renderJson();
+            case 'latest_notes':
+                return renderLatestNotes();
+            case 'options':
+                return renderOptions();
+            case 'richtext':
+                return renderRichText();
+            case 'total':
+                return renderTotal();
+            case 'password':
+                return renderPassword();
+            default:
+                return size === 'full' && truncatedValue
+                    ? parse(`<br /><p>${truncatedValue}</p>`)
+                    : truncatedValue;
+        }
+    };
+
+    const renderContent = () => {
+        if (subnav && subnav.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+                currentConfigRef.current = activeTabConfig;
+
+                if (activeTabConfig && activeTabConfig.type) {
+                    switch (activeTabConfig.type) {
+                        case 'dropzone':
+                            const downloadFile = (id) => {
+                                window.open(
+                                    `/ajax/files/download/${id}/${activeTabConfig.folder}`
+                                );
+                            };
+
+                            const deleteFile = (e, id, name) => {
+                                if (e) {
+                                    e.stopPropagation();
+
+                                    confirmAlert({
+                                        title: 'Confirm to Delete File',
+                                        message:
+                                            'Are you sure you want to delete ' +
+                                            name,
+                                        buttons: [
+                                            {
+                                                label: 'Yes',
+                                                onClick: () => {
+                                                    CustomFetch(
+                                                        `${activeTabConfig.deleteUrl}`,
+                                                        'POST',
+                                                        {
+                                                            file_id: id,
+                                                        },
+                                                        function (result) {
+                                                            if (
+                                                                result.error ===
+                                                                ''
+                                                            ) {
+                                                                handleReload();
+                                                            } else {
+                                                                toast.error(
+                                                                    result.error
+                                                                );
+                                                            }
+                                                        }
+                                                    );
+                                                },
+                                            },
+                                            {
+                                                label: 'No',
+                                                onClick: () => close(),
+                                            },
+                                        ],
+                                    });
+                                }
+                            };
+
+                            return (
+                                <div className={styles.gridtxt}>
+                                    <div className={styles.gridtxt__header}>
+                                        {activeTabConfig.label
+                                            ? activeTabConfig.label
+                                            : 'Files'}
+                                    </div>
+                                    <div className={styles.progress}>
+                                        <motion.div
+                                            className={styles.progress__bar}
+                                            initial={{ width: '0%' }}
+                                            animate={{
+                                                width: loadingProgress + '%',
+                                            }}
+                                            transition={{
+                                                duration: 2,
+                                                ease: [0.165, 0.84, 0.44, 1.0],
+                                            }}
+                                        />
+                                    </div>
+                                    <Dropzone
+                                        onDrop={(acceptedFiles) => {
+                                            const uploadFile = (file) => {
+                                                Vapor.store(file, {
+                                                    progress: (progress) => {
+                                                        setLoadingProgress(
+                                                            progress * 100
+                                                        );
+                                                    },
+                                                }).then((response) => {
+                                                    setLoadingProgress(0);
+                                                    const requestBody = {
+                                                        uuid: response.uuid,
+                                                        key: response.key,
+                                                        bucket: response.bucket,
+                                                        filename: file.name,
+                                                        filesize: file.size,
+                                                        extension:
+                                                            response.extension,
+                                                        file_relationship:
+                                                            activeTabConfig.file_relationship,
+                                                    };
+
+                                                    CustomFetch(
+                                                        `${activeTabConfig.url}/${routeParams[urlParam]}`,
+                                                        'PUT',
+                                                        requestBody,
+                                                        (res) => {
+                                                            setFiles(
+                                                                res.data.files
+                                                            );
+                                                        }
+                                                    );
+                                                });
+                                            };
+
+                                            acceptedFiles.forEach((a) => {
+                                                uploadFile(a);
+                                            });
+                                        }}
+                                    >
+                                        {({
+                                            getRootProps,
+                                            getInputProps,
+                                            isDragActive,
+                                        }) => (
+                                            <section
+                                                className={
+                                                    styles.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>
+                                                {activeTabConfig.filetype ===
+                                                'image' ? (
+                                                    <div>
+                                                        <ul
+                                                            className={
+                                                                styles.sortlist
+                                                            }
+                                                        >
+                                                            {files.map(
+                                                                (a, b) =>
+                                                                    a.base64_encoded_image && (
+                                                                        <li
+                                                                            key={`tf-${b}`}
+                                                                        >
+                                                                            {
+                                                                                a.file_name
+                                                                            }
+                                                                            <div
+                                                                                className={
+                                                                                    styles.sortimg
+                                                                                }
+                                                                            >
+                                                                                <img
+                                                                                    src={
+                                                                                        a.base64_encoded_image
+                                                                                    }
+                                                                                    width="150"
+                                                                                />
+                                                                            </div>
+                                                                            <TrashCan
+                                                                                onClick={(
+                                                                                    event
+                                                                                ) => {
+                                                                                    deleteFile(
+                                                                                        event,
+                                                                                        a.id,
+                                                                                        a.file_name
+                                                                                    );
+                                                                                }}
+                                                                                strokeWidth={
+                                                                                    2
+                                                                                }
+                                                                                size={
+                                                                                    18
+                                                                                }
+                                                                                className="delete trash-delete"
+                                                                            />
+                                                                        </li>
+                                                                    )
+                                                            )}
+                                                        </ul>
+                                                    </div>
+                                                ) : (
+                                                    <ul
+                                                        className={
+                                                            styles.dropzone__files
+                                                        }
+                                                    >
+                                                        {files.map((a, b) => (
+                                                            <li
+                                                                onClick={() => {
+                                                                    downloadFile(
+                                                                        a.id
+                                                                    );
+                                                                }}
+                                                                key={'tf-' + b}
+                                                            >
+                                                                <File
+                                                                    strokeWidth={
+                                                                        2
+                                                                    }
+                                                                    size={18}
+                                                                />
+                                                                {a.file_name}
+                                                                <button
+                                                                    onClick={(
+                                                                        event
+                                                                    ) => {
+                                                                        deleteFile(
+                                                                            event,
+                                                                            a.id,
+                                                                            a.file_name
+                                                                        );
+                                                                    }}
+                                                                >
+                                                                    <TrashCan
+                                                                        strokeWidth={
+                                                                            2
+                                                                        }
+                                                                        size={
+                                                                            18
+                                                                        }
+                                                                    />
+                                                                </button>
+                                                            </li>
+                                                        ))}
+                                                    </ul>
+                                                )}
+                                            </section>
+                                        )}
+                                    </Dropzone>
+                                </div>
+                            );
+                        case 'dynamicform':
+                            return (
+                                <GenericDynamic
+                                    buttons={
+                                        activeTabConfig.setting?.buttons
+                                            ? activeTabConfig.setting.buttons
+                                            : []
+                                    }
+                                    data={data}
+                                    fetchData={handleReload}
+                                    label={
+                                        data.task_template
+                                            ? data.task_template.label
+                                            : ''
+                                    }
+                                    multiple={false}
+                                    originalData={data}
+                                    primaryKey={activeTabConfig.setting.key}
+                                    setData={setData}
+                                    setting={activeTabConfig.setting.url}
+                                    type={activeTabConfig.setting.type}
+                                />
+                            );
+                        case 'form':
+                            const updateValueFromParam = (item, value) => {
+                                if (item && item.urlParam) {
+                                    item.value = value;
+                                }
+                            };
+
+                            const updateFieldValues = (
+                                formConfig,
+                                routeParams
+                            ) => {
+                                if (formConfig.stages) {
+                                    formConfig.stages.data.forEach((stage) => {
+                                        const stageFormFields =
+                                            stage.form?.fields || [];
+                                        const stageAjaxWhereFields = [];
+
+                                        stageFormFields.forEach((field) => {
+                                            if (field.type === 'table') {
+                                                if (
+                                                    field.ajaxSetting &&
+                                                    field.ajaxSetting.where
+                                                ) {
+                                                    stageAjaxWhereFields.push(
+                                                        ...field.ajaxSetting
+                                                            .where
+                                                    );
+                                                }
+
+                                                const tableFormFields =
+                                                    field.form?.fields || [];
+                                                tableFormFields.forEach(
+                                                    (formField) => {
+                                                        updateValueFromParam(
+                                                            formField,
+                                                            routeParams[
+                                                                formField
+                                                                    .urlParam
+                                                            ]
+                                                        );
+                                                    }
+                                                );
+                                            }
+                                        });
+
+                                        stageAjaxWhereFields.forEach(
+                                            (where) => {
+                                                updateValueFromParam(
+                                                    where,
+                                                    routeParams[where.urlParam]
+                                                );
+                                            }
+                                        );
+                                    });
+                                }
+                            };
+
+                            const formConfig = activeTabConfig;
+                            updateFieldValues(formConfig, routeParams);
+
+                            return (
+                                <>
+                                    {formConfig.stages?.data?.length > 0 && (
+                                        <div className={styles.grid}>
+                                            <div className={styles.grid__row}>
+                                                <div
+                                                    className={
+                                                        styles.grid__full
+                                                    }
+                                                >
+                                                    {formConfig.stages.data.map(
+                                                        (stage) =>
+                                                            parseInt(
+                                                                activeStage
+                                                            ) === stage.id && (
+                                                                <React.Fragment
+                                                                    key={`stage-form-${stage.id}`}
+                                                                >
+                                                                    {stage.form && (
+                                                                        <div
+                                                                            className={
+                                                                                styles.gridtxt
+                                                                            }
+                                                                        >
+                                                                            {stage
+                                                                                .form
+                                                                                .update
+                                                                                .title && (
+                                                                                <div
+                                                                                    className={
+                                                                                        styles.gridtxt__header
+                                                                                    }
+                                                                                >
+                                                                                    <span>
+                                                                                        {
+                                                                                            stage
+                                                                                                .form
+                                                                                                .update
+                                                                                                .title
+                                                                                        }
+                                                                                    </span>
+                                                                                </div>
+                                                                            )}
+                                                                            <Form
+                                                                                columnId={
+                                                                                    routeParams[
+                                                                                        urlParam
+                                                                                    ]
+                                                                                }
+                                                                                formSettings={
+                                                                                    stage.form
+                                                                                }
+                                                                                formType="update"
+                                                                                paramValue={
+                                                                                    routeParams[
+                                                                                        urlParam
+                                                                                    ]
+                                                                                        ? routeParams[
+                                                                                              urlParam
+                                                                                          ]
+                                                                                        : null
+                                                                                }
+                                                                                style={
+                                                                                    userProfile
+                                                                                        ?.settings
+                                                                                        ?.style ||
+                                                                                    {}
+                                                                                }
+                                                                                type="inline"
+                                                                                updateForm={
+                                                                                    setFormData
+                                                                                }
+                                                                                userProfile={
+                                                                                    userProfile
+                                                                                }
+                                                                            />
+                                                                        </div>
+                                                                    )}
+                                                                </React.Fragment>
+                                                            )
+                                                    )}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+
+                                    {formConfig.form && (
+                                        <div className={styles.gridtxt}>
+                                            <div
+                                                className={
+                                                    styles.gridtxt__header
+                                                }
+                                            >
+                                                <span>{formConfig.title}</span>
+                                            </div>
+                                            <Form
+                                                columnId={routeParams[urlParam]}
+                                                formSettings={formConfig.form}
+                                                formType="update"
+                                                paramValue={
+                                                    routeParams[urlParam]
+                                                        ? routeParams[urlParam]
+                                                        : null
+                                                }
+                                                style={
+                                                    userProfile?.settings
+                                                        ?.style || {}
+                                                }
+                                                updateForm={setFormData}
+                                                type="inline"
+                                                userProfile={userProfile}
+                                            />
+                                        </div>
+                                    )}
+                                </>
+                            );
+                        case 'overview':
+                            return (
+                                <>
+                                    <div className={styles.gridtxt}>
+                                        {activeTabConfig.sections.map(
+                                            (section, sectionIndex) => (
+                                                <React.Fragment
+                                                    key={`section-${activeTabConfig.id}-${sectionIndex}`}
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.gridtxt__header
+                                                        }
+                                                    >
+                                                        <span>
+                                                            {section.title}
+                                                        </span>
+                                                    </div>
+                                                    {section.content &&
+                                                        section.content.length >
+                                                            0 && (
+                                                            <ul
+                                                                className={
+                                                                    styles.customer__overview
+                                                                }
+                                                            >
+                                                                {section.content.map(
+                                                                    (
+                                                                        item,
+                                                                        itemKey
+                                                                    ) => (
+                                                                        <li
+                                                                            key={`li-${item.id}-${itemKey}`}
+                                                                            className={
+                                                                                item.size ===
+                                                                                'full'
+                                                                                    ? `${styles['fw-grid-item']} ${styles.notecolor}`
+                                                                                    : null
+                                                                            }
+                                                                        >
+                                                                            <strong>
+                                                                                {item.label
+                                                                                    ? `${item.label}:`
+                                                                                    : null}
+                                                                            </strong>{' '}
+                                                                            {item
+                                                                                .href
+                                                                                ?.url &&
+                                                                            item
+                                                                                .href
+                                                                                ?.key ? (
+                                                                                <Link
+                                                                                    to={`${
+                                                                                        item
+                                                                                            .href
+                                                                                            .url
+                                                                                    }${
+                                                                                        data[
+                                                                                            item
+                                                                                                .href
+                                                                                                .key
+                                                                                        ]
+                                                                                    }`}
+                                                                                >
+                                                                                    {renderValue(
+                                                                                        item,
+                                                                                        data
+                                                                                    )}
+                                                                                </Link>
+                                                                            ) : (
+                                                                                <>
+                                                                                    {renderValue(
+                                                                                        item,
+                                                                                        data
+                                                                                    )}
+                                                                                </>
+                                                                            )}
+                                                                        </li>
+                                                                    )
+                                                                )}
+                                                            </ul>
+                                                        )}
+                                                </React.Fragment>
+                                            )
+                                        )}
+                                    </div>
+                                    {activeTabConfig.form && (
+                                        <div className={styles.polActions}>
+                                            <button
+                                                className={styles.btn}
+                                                onClick={() =>
+                                                    modalOpen(
+                                                        'update',
+                                                        routeParams[urlParam]
+                                                    )
+                                                }
+                                            >
+                                                Edit
+                                            </button>
+                                        </div>
+                                    )}
+                                </>
+                            );
+                        case 'qrCode':
+                            return (
+                                <QrCode
+                                    config={activeTabConfig}
+                                    dataId={routeParams[urlParam]}
+                                />
+                            );
+                        case 'table':
+                            if (
+                                config.ajaxSetting &&
+                                config.form &&
+                                config.columns &&
+                                config.settings
+                            ) {
+                                return (
+                                    <>
+                                        {activeTabConfig.dropzone &&
+                                            activeTabConfig.dropzone
+                                                .relationship &&
+                                            activeTabConfig.dropzone.url !==
+                                                '' && (
+                                                <div
+                                                    className={styles.grid__row}
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.grid__full
+                                                        }
+                                                    >
+                                                        <Dropzone
+                                                            onDrop={(
+                                                                acceptedFiles
+                                                            ) => {
+                                                                const uploadFile =
+                                                                    (file) => {
+                                                                        Vapor.store(
+                                                                            file,
+                                                                            {
+                                                                                progress:
+                                                                                    (
+                                                                                        progress
+                                                                                    ) => {
+                                                                                        setLoadingProgress(
+                                                                                            progress *
+                                                                                                100
+                                                                                        );
+                                                                                    },
+                                                                            }
+                                                                        ).then(
+                                                                            (
+                                                                                response
+                                                                            ) => {
+                                                                                setLoadingProgress(
+                                                                                    0
+                                                                                );
+                                                                                const requestBody =
+                                                                                    {
+                                                                                        uuid: response.uuid,
+                                                                                        key: response.key,
+                                                                                        bucket: response.bucket,
+                                                                                        name: file.name,
+                                                                                        size: file.size,
+                                                                                        extension:
+                                                                                            response.extension,
+                                                                                        file_relationship:
+                                                                                            activeTabConfig
+                                                                                                .dropzone
+                                                                                                .relationship,
+                                                                                    };
+
+                                                                                CustomFetch(
+                                                                                    `${activeTabConfig.dropzone.url}/${routeParams[urlParam]}`,
+                                                                                    'POST',
+                                                                                    requestBody,
+                                                                                    (
+                                                                                        res
+                                                                                    ) => {
+                                                                                        if (
+                                                                                            res.error ===
+                                                                                            ''
+                                                                                        ) {
+                                                                                            gridRef.current.reload();
+                                                                                        } else {
+                                                                                            toast.error(
+                                                                                                res.error
+                                                                                            );
+                                                                                        }
+                                                                                    }
+                                                                                );
+                                                                            }
+                                                                        );
+                                                                    };
+
+                                                                acceptedFiles.forEach(
+                                                                    (a) => {
+                                                                        uploadFile(
+                                                                            a
+                                                                        );
+                                                                    }
+                                                                );
+                                                            }}
+                                                        >
+                                                            {({
+                                                                getRootProps,
+                                                                getInputProps,
+                                                                isDragActive,
+                                                            }) => (
+                                                                <section
+                                                                    className={
+                                                                        styles.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>
+                                                                </section>
+                                                            )}
+                                                        </Dropzone>
+                                                        <div
+                                                            className={
+                                                                styles.progress
+                                                            }
+                                                        >
+                                                            <motion.div
+                                                                className={
+                                                                    styles.progress__bar
+                                                                }
+                                                                initial={{
+                                                                    width: '0%',
+                                                                }}
+                                                                animate={{
+                                                                    width:
+                                                                        loadingProgress +
+                                                                        '%',
+                                                                }}
+                                                                transition={{
+                                                                    duration: 2,
+                                                                    ease: [
+                                                                        0.165,
+                                                                        0.84,
+                                                                        0.44,
+                                                                        1.0,
+                                                                    ],
+                                                                }}
+                                                            />
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            )}
+                                        <div className={styles.grid__row}>
+                                            <div className={styles.grid__full}>
+                                                <Table
+                                                    {...config}
+                                                    ref={gridRef}
+                                                    gridHeight={
+                                                        windowHeight * 0.65
+                                                    }
+                                                    pageData={
+                                                        data ? data : null
+                                                    }
+                                                    pageSetting={
+                                                        page ? page : null
+                                                    }
+                                                    paramValue={
+                                                        routeParams[urlParam]
+                                                            ? routeParams[
+                                                                  urlParam
+                                                              ]
+                                                            : null
+                                                    }
+                                                    setConfig={setConfig}
+                                                    setTotal={setTotal}
+                                                    style={
+                                                        userProfile?.settings
+                                                            ?.style || {}
+                                                    }
+                                                />
+                                            </div>
+                                        </div>
+
+                                        {activeTabConfig.functions
+                                            ?.checkboxUpdate && (
+                                            <div className={styles.polActions}>
+                                                <button
+                                                    className={styles.btn}
+                                                    onClick={
+                                                        handleCheckboxUpdate
+                                                    }
+                                                >
+                                                    {activeTabConfig.functions
+                                                        .checkboxUpdate.label ||
+                                                        'Update'}
+                                                </button>
+                                            </div>
+                                        )}
+                                    </>
+                                );
+                            } else {
+                                return null;
+                            }
+                        default:
+                            return null;
+                    }
+                }
+            }
+        }
+    };
+
+    /** General Hooks */
+    useEffect(() => {
+        const handleResize = () => {
+            setWindowHeight(window.innerHeight);
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        // Clean up the event listener
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (tabs && tabs.length > 0) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                const applyUrlParamsToData = (data) => {
+                    return data.map((item) => {
+                        if (item.hasOwnProperty('value') && item.urlParam) {
+                            return {
+                                ...item,
+                                value:
+                                    item.hasOwnProperty('value') &&
+                                    item.urlParam &&
+                                    routeParams[item.urlParam]
+                                        ? routeParams[item.urlParam]
+                                        : item.value,
+                            };
+                        } else {
+                            return item;
+                        }
+                    });
+                };
+
+                if (activeTabConfig) {
+                    switch (activeTabConfig.type) {
+                        case 'table':
+                            if (
+                                activeTabConfig.ajaxSetting &&
+                                activeTabConfig.ajaxSetting.where
+                            ) {
+                                const updatedAjaxSetting = {
+                                    ...activeTabConfig.ajaxSetting,
+                                    where: applyUrlParamsToData(
+                                        activeTabConfig.ajaxSetting.where
+                                    ),
+                                };
+
+                                const updatedForm = {
+                                    ...activeTabConfig.form,
+                                    fields: activeTabConfig.form.fields.map(
+                                        (field) => {
+                                            if (
+                                                field.hasOwnProperty('value') &&
+                                                field.urlParam &&
+                                                routeParams[field.urlParam]
+                                            ) {
+                                                if (
+                                                    field.type &&
+                                                    field.relationName &&
+                                                    (field.type ===
+                                                        'multi-dropdown-ajax' ||
+                                                        field.type ===
+                                                            'multi-dropdown')
+                                                ) {
+                                                    field.value = {
+                                                        value: routeParams[
+                                                            field.urlParam
+                                                        ],
+                                                        label: data[
+                                                            field.relationName
+                                                        ],
+                                                    };
+                                                } else {
+                                                    field.value =
+                                                        routeParams[
+                                                            field.urlParam
+                                                        ];
+                                                }
+                                            }
+
+                                            if (field.where) {
+                                                return {
+                                                    ...field,
+                                                    where: applyUrlParamsToData(
+                                                        field.where
+                                                    ),
+                                                };
+                                            } else {
+                                                return field;
+                                            }
+                                        }
+                                    ),
+                                };
+
+                                setConfig({
+                                    ajaxSetting: updatedAjaxSetting,
+                                    form: updatedForm,
+                                    columns: activeTabConfig.columns,
+                                    settings: activeTabConfig.settings,
+                                    ...(activeTabConfig.tableSetting && {
+                                        tableSetting:
+                                            activeTabConfig.tableSetting,
+                                    }),
+                                    ...(activeTabConfig.functions && {
+                                        functions: activeTabConfig.functions,
+                                    }),
+                                    ...(setRowsSelected && {
+                                        setRowsSelected: setRowsSelected,
+                                    }),
+                                });
+                            }
+                            break;
+                        case 'overview':
+                            setConfig({});
+                            if (activeTabConfig.form) {
+                                setFormData(activeTabConfig.form);
+                            }
+                            break;
+                        default:
+                            setConfig({});
+                            break;
+                    }
+                }
+            }
+        }
+    }, [subnav, tabs, routeParams]);
+
+    useEffect(() => {
+        if (tabs && tabs.length > 0 && data && data.id) {
+            const activeTab = subnav.find((s) => s.show === true);
+
+            if (activeTab) {
+                const activeTabConfig = tabs.find((t) => t.id === activeTab.id);
+
+                if (activeTabConfig?.stages?.key) {
+                    setActiveStage(data[activeTabConfig.stages.key]);
+                }
+            }
+        }
+    }, [data, tabs]);
+
+    useEffect(() => {
+        if (routeParams[urlParam] && routeParams[urlParam] > 0) {
+            CustomFetch(
+                `${page.fetchUrl}/${routeParams[urlParam]}`,
+                'GET',
+                {},
+                (res) => {
+                    setData(res);
+
+                    tabs.forEach((tab) => {
+                        if (tab.type && tab.type === 'dropzone') {
+                            if (res.files) {
+                                setFiles(res.files);
+                            }
+                        }
+                    });
+                }
+            );
+        }
+    }, [routeParams['*'], dataReload]);
+
+    useEffect(() => {
+        setSubnav(() => {
+            return filters.map((f) => {
+                if (
+                    f.hasOwnProperty('url') &&
+                    f.baseUrl &&
+                    f.urlParam &&
+                    routeParams[f.urlParam]
+                ) {
+                    return {
+                        ...f,
+                        url: `${f.baseUrl}${routeParams[f.urlParam]}`,
+                    };
+                } else {
+                    return f;
+                }
+            });
+        });
+    }, [filters]);
+
+    /** Modal States */
+    const [formData, setFormData] = useState({});
+    const [formType, setFormType] = useState('');
+    const [formId, setFormId] = useState(0);
+    const [modalShow, setModalShow] = useState(false);
+
+    /** Modal Functions */
+    const modalOpen = (formType, formId) => {
+        setModalShow(true);
+        setFormType(formType);
+        setFormId(formId);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
+    return (
+        <>
+            <div className={styles.grid}>
+                <div className={styles.grid__row}>
+                    <div
+                        className={`${styles.grid__full} ${
+                            layout === 'full'
+                                ? styles.crmtitle
+                                : styles['crmtitle--alternate']
+                        }`}
+                    >
+                        <Breadcrumb data={data} page={page} />
+                        {total > 0 && (
+                            <div className={styles.titleInfo}>
+                                <span>
+                                    [<strong>{total}</strong> Total]
+                                </span>
+                            </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {stages?.data?.length > 0 && (
+                <div className={styles.grid}>
+                    <div className={styles.grid__row}>
+                        <div className={styles.grid__full}>
+                            <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;
+
+                                        return (
+                                            <li
+                                                key={`stage-${stage.id}`}
+                                                className={
+                                                    isStageComplete
+                                                        ? `${styles['opp-complete']}`
+                                                        : ''
+                                                }
+                                                onClick={(e) => {
+                                                    e.preventDefault();
+
+                                                    handleStageUpdate(
+                                                        stage,
+                                                        stages.type
+                                                    );
+                                                }}
+                                            >
+                                                <a>
+                                                    {stage.label}
+                                                    {isStageComplete && (
+                                                        <CircleCheck
+                                                            strokeWidth={2}
+                                                            size={16}
+                                                        />
+                                                    )}
+                                                </a>
+                                            </li>
+                                        );
+                                    })}
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className={styles.grid}>
+                <div className={styles.grid__subrow}>
+                    <div className={styles.grid__subnav}>
+                        <TableFilter filters={subnav} setFilters={setSubnav} />
+                    </div>
+                    <div className={styles.grid__subcontent}>
+                        {config ? renderContent() : null}
+                    </div>
+                </div>
+            </div>
+
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+            >
+                <Form
+                    closeModal={modalClose}
+                    columnId={formId}
+                    fetchTable={handleReload}
+                    formSettings={formData}
+                    formType={formType}
+                    style={userProfile?.settings?.style || {}}
+                    updateForm={setFormData}
+                />
+            </Popup>
+        </>
+    );
+}
+
+export default GenericDetail;