@visns-studio/visns-components 5.10.2 → 5.10.4

package/src/components/crm/columns/ColumnRenderers.jsx

@@ -0,0 +1,1358 @@
+import numeral from 'numeral';
+import moment from 'moment';
+import parse from 'html-react-parser';
+import { CloudDownload, Alarm } from 'akar-icons';
+import { toast } from 'react-toastify';
+import CellWithTooltip from '../cells/CellWithTooltip';
+
+// Boolean Column Renderer
+export const renderBooleanColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+    return {
+        ...commonProps,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        name: `${column.type}.${column.id}`,
+        sortable: false,
+        render: ({ data }) => {
+            const value = data[column.id] ? 'Yes' : 'No';
+            return (
+                <CellWithTooltip
+                    value={data[column.id]}
+                    columnType="boolean"
+                >
+                    <span>{value}</span>
+                </CellWithTooltip>
+            );
+        },
+    };
+};
+
+// Currency Column Renderer
+export const renderCurrencyColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            if (data) {
+                const formattedValue = numeral(data[column.id]).format('$0,0.00');
+
+                return (
+                    <CellWithTooltip
+                        value={data[column.id]}
+                        columnType="currency"
+                    >
+                        <span>{formattedValue}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Date Column Renderer
+export const renderDateColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        defaultWidth: 120, // Set default width for date columns
+        minWidth: 120, // Set minimum width for date columns
+        render: ({ data }) => {
+            if (
+                data &&
+                data[column.id] &&
+                moment(data[column.id]).isValid() &&
+                moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                const value = moment(data[column.id]).format(
+                    column.format || 'DD-MM-YYYY'
+                );
+                let columnStyle = {};
+
+                if (
+                    column.active &&
+                    column.active.id &&
+                    column.active.value === 'expired'
+                ) {
+                    if (
+                        data[column.active.id] &&
+                        moment(data[column.active.id]).isBefore(moment())
+                    ) {
+                        columnStyle = {
+                            color: column.active.colour,
+                        };
+                    }
+                }
+
+                return (
+                    <CellWithTooltip
+                        value={data[column.id]}
+                        columnType="date"
+                    >
+                        <span style={columnStyle}>
+                            {value}
+                        </span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// DateTime Column Renderer
+export const renderDateTimeColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        defaultWidth: 160, // Set default width for datetime columns
+        minWidth: 160, // Set minimum width for datetime columns
+        render: ({ data }) => {
+            if (
+                data &&
+                data[column.id] &&
+                moment(data[column.id]).isValid() &&
+                moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                const formattedValue = moment(data[column.id]).format(
+                    column.format ? column.format : 'DD-MM-YYYY hh:mm A'
+                );
+
+                return <span>{formattedValue}</span>;
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Array Count Column Renderer
+export const renderArrayCountColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: `${column.type}.${column.id}`,
+        sortable: false,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                return data[column.id].length;
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Colour Column Renderer
+export const renderColourColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: `${column.type}.${column.id}`,
+        sortable: false,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                return (
+                    <div
+                        style={{
+                            width: '25px',
+                            height: '25px',
+                            borderRadius: '10px',
+                            overflow: 'hidden',
+                        }}
+                    >
+                        <div
+                            style={{
+                                background:
+                                    data[column.id] + ' none repeat scroll 0% 0%',
+                                height: '100%',
+                                width: '100%',
+                                cursor: 'pointer',
+                                position: 'relative',
+                                outline: 'currentcolor none medium',
+                            }}
+                        ></div>
+                    </div>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Dropdown Column Renderer
+export const renderDropdownColumn = ({ 
+    column, 
+    commonProps, 
+    filterEditor, 
+    filterEditorProps, 
+    dropdownData, 
+    handleDropdownUpdate 
+}) => {
+    const columnId = Array.isArray(column.id)
+        ? column.id.join('-')
+        : column.id;
+
+    return {
+        ...commonProps,
+        name: columnId,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            return (
+                <select
+                    name={column.id}
+                    value={data[column.id]?.id || ''}
+                    style={{ padding: '7px' }}
+                    onChange={(e) => {
+                        e.preventDefault();
+
+                        if (
+                            column.update?.key &&
+                            column.update?.url &&
+                            column.update?.method
+                        ) {
+                            handleDropdownUpdate(
+                                column.update.key,
+                                `${column.update.url}/${data.id}`,
+                                column.update.method,
+                                e.target.value
+                            );
+                        }
+                    }}
+                >
+                    <option value="">
+                        Select{' '}
+                        {/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'}{' '}
+                        {column.label}
+                    </option>
+                    {dropdownData[column.id] &&
+                    dropdownData[column.id].length > 0
+                        ? dropdownData[column.id].map((option, index) => (
+                              <option value={option.id} key={index}>
+                                  {option.label}
+                              </option>
+                          ))
+                        : null}
+                </select>
+            );
+        },
+    };
+};
+
+// Image Column Renderer
+export const renderImageColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                const fileUrl = data[column.id][0]?.file_url || data[column.id]?.file_url;
+
+                if (fileUrl) {
+                    return (
+                        <span>
+                            {parse(`<img width="150" src="${fileUrl}" />`)}
+                        </span>
+                    );
+                }
+            }
+
+            return null;
+        },
+    };
+};
+
+// File Column Renderer
+export const renderFileColumn = ({ column, commonProps, handleDownload, styles }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                // Check if the data is an array of files
+                if (Array.isArray(data[column.id])) {
+                    // Return a span for each file in the array with added margin
+                    return data[column.id].map((file, index) => (
+                        <span
+                            key={index}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                handleDownload(file);
+                            }}
+                            style={{
+                                marginRight: '10px',
+                                display: 'inline-block',
+                            }}
+                        >
+                            <CloudDownload
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={`Download File ${file.file_name}`}
+                                strokeWidth={2}
+                                size={14}
+                                className={styles.tdaction}
+                            />
+                        </span>
+                    ));
+                } else {
+                    // Return a single span for a single file with added margin
+                    return (
+                        <span
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                handleDownload(data[column.id]);
+                            }}
+                            style={{
+                                marginRight: '10px',
+                                display: 'inline-block',
+                            }}
+                        >
+                            <CloudDownload
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={`Download File ${data[column.id].file_name}`}
+                                strokeWidth={2}
+                                size={14}
+                                className={styles.tdaction}
+                            />
+                        </span>
+                    );
+                }
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Icons Column Renderer
+export const renderIconsColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ data }) => {
+            const icons = [];
+
+            if (column.icons && column.icons.length > 0) {
+                column.icons.forEach((icon, index) => {
+                    icons.push(
+                        <img
+                            key={index}
+                            src={icon.url}
+                            alt={icon.name}
+                            data-tooltip-id="system-tooltip"
+                            data-tooltip-content={icon.name}
+                        />
+                    );
+                });
+            }
+
+            if (data) {
+                return <span>{icons}</span>;
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// JSON Column Renderer
+export const renderJsonColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: `${column.id}.${column.jsonData}`,
+        render: ({ data }) => {
+            if (
+                data &&
+                data[column.id] &&
+                data[column.id][column.jsonData]
+            ) {
+                const jsonValue = data[column.id][column.jsonData];
+
+                return (
+                    <CellWithTooltip
+                        value={jsonValue}
+                        columnType="json"
+                    >
+                        <span>{jsonValue}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Number Column Renderer
+export const renderNumberColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        type: 'number',
+    };
+};
+
+// Option Column Renderer
+export const renderOptionColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            let newData;
+
+            if (
+                data &&
+                column.options &&
+                column.options[data[column.id]]
+            ) {
+                if (
+                    column.key &&
+                    data[column.key] > 0 &&
+                    column.options[data[column.id]].includes('#')
+                ) {
+                    newData = column.options[data[column.id]].replace(
+                        /#/g,
+                        data[column.key]
+                    );
+                } else {
+                    newData = column.options[data[column.id]];
+                }
+
+                return (
+                    <CellWithTooltip
+                        value={newData}
+                        columnType="option"
+                    >
+                        <span>{newData}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Placeholder Column Renderer
+export const renderPlaceholderColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ data }) => {
+            if (data) {
+                return (
+                    <CellWithTooltip
+                        value={column.placeholder}
+                        columnType="placeholder"
+                    >
+                        <span>{column.placeholder}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Age Column Renderer
+export const renderAgeColumn = ({ column, commonProps, filterEditor }) => {
+    return {
+        ...commonProps,
+        type: 'number',
+        filterEditor: filterEditor,
+        name: `${column.type}.${column.id}`,
+        render: ({ data }) => {
+            const value = column.id.reduce((acc, id) => {
+                if (acc === '') {
+                    return data[id];
+                } else {
+                    return acc ? acc[id] : '';
+                }
+            }, '');
+
+            if (value !== '' && value !== null) {
+                const date = moment(value);
+
+                return (
+                    <span>
+                        {moment().diff(
+                            date,
+                            column.duration ? column.duration : 'years'
+                        )}
+                    </span>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Coding Column Renderer
+export const renderCodingColumn = ({ column, commonProps, handleCoding }) => {
+    return {
+        ...commonProps,
+        name: `${column.type}.${column.id}`,
+        sortable: false,
+        render: ({ data }) => {
+            if (data) {
+                return handleCoding(column, data);
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Relation Column Renderer
+export const renderRelationColumn = ({ column, commonProps, filterEditor, filterEditorProps, relationName }) => {
+    return {
+        ...commonProps,
+        name: relationName,
+        sortable: false,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            let value = column.id.reduce((acc, id) => {
+                if (acc === '') {
+                    if (data[id]) {
+                        return data[id];
+                    } else {
+                        return '';
+                    }
+                } else {
+                    if (acc && acc[id]) {
+                        return acc[id];
+                    } else {
+                        return '';
+                    }
+                }
+            }, '');
+
+            if (value) {
+                if (Array.isArray(value)) {
+                    if (value[0]) {
+                        value = value[0];
+                    }
+                }
+
+                if (Array.isArray(column.nameFrom)) {
+                    value = column.nameFrom
+                        .map((nf) => value?.[nf] ?? '')
+                        .join(' ');
+                } else {
+                    if (
+                        value &&
+                        value.hasOwnProperty(column.nameFrom)
+                    ) {
+                        value = value[column.nameFrom];
+                    }
+                }
+
+                if (
+                    column.placeholder &&
+                    column.placeholder !== ''
+                ) {
+                    return (
+                        <span>
+                            {column.placeholder}
+                        </span>
+                    );
+                } else {
+                    if (column.hasOwnProperty('format')) {
+                        if (column.format) {
+                            value = moment(value).format('DD-MM-YYYY');
+                        }
+                    }
+
+                    if (
+                        typeof value === 'string' ||
+                        typeof value === 'number'
+                    ) {
+                        return (
+                            <CellWithTooltip
+                                value={value}
+                                columnType="relation"
+                            >
+                                <span>{value}</span>
+                            </CellWithTooltip>
+                        );
+                    } else {
+                        return null;
+                    }
+                }
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// RelationArray Column Renderer
+export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, filterEditorProps, relationName }) => {
+    return {
+        ...commonProps,
+        name: relationName,
+        sortable: false,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            const relationValue = column.id.reduce(
+                (acc, id) =>
+                    acc === ''
+                        ? data[id]
+                        : acc && acc[id]
+                        ? acc[id]
+                        : '',
+                ''
+            );
+
+            if (
+                relationValue &&
+                Array.isArray(relationValue) &&
+                relationValue.length > 0
+            ) {
+                const nameProperties =
+                    Array.isArray(column.nameFrom)
+                        ? column.nameFrom
+                        : [column.nameFrom];
+
+                const values = relationValue
+                    .map((rv) => {
+                        if (
+                            column.childId &&
+                            Array.isArray(column.childId)
+                        ) {
+                            let childValue = rv;
+
+                            column.childId.forEach((a) => {
+                                if (childValue[a]) {
+                                    childValue = childValue[a];
+                                }
+                            });
+
+                            if (childValue) {
+                                const propertyValues =
+                                    nameProperties
+                                        .map((prop) => childValue[prop])
+                                        .filter(
+                                            (value) =>
+                                                value !== undefined &&
+                                                value !== null
+                                        );
+                                return propertyValues.join(' ');
+                            }
+                        } else {
+                            const propertyValues =
+                                nameProperties
+                                    .map((prop) => rv[prop])
+                                    .filter(
+                                        (value) =>
+                                            value !== undefined &&
+                                            value !== null
+                                    );
+                            return propertyValues.join(' ');
+                        }
+                    })
+                    .filter((value) => value !== '');
+
+                let result = '';
+
+                if (
+                    column.relation?.id &&
+                    column.relation?.key
+                ) {
+                    const relationValue =
+                        column.relation.key.reduce(
+                            (acc, id) =>
+                                acc === ''
+                                    ? data[id]
+                                    : acc && acc[id]
+                                    ? acc[id]
+                                    : '',
+                            ''
+                        );
+
+                    result = `${relationValue[column.relation.id]}<br />`;
+                }
+
+                if (
+                    column.where &&
+                    column.where.id &&
+                    column.where.value
+                ) {
+                    if (
+                        data[column.where.id] ===
+                        column.where.value
+                    ) {
+                        result += values.join('<br />');
+                    }
+                } else {
+                    result += values.join('<br />');
+                }
+
+                return (
+                    <CellWithTooltip
+                        value={result}
+                        columnType="relationArray"
+                    >
+                        <span>{parse(result)}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                let result = '';
+
+                if (
+                    column.relation?.id &&
+                    column.relation?.key
+                ) {
+                    const relationValue =
+                        column.relation.key.reduce(
+                            (acc, id) =>
+                                acc === ''
+                                    ? data[id]
+                                    : acc && acc[id]
+                                    ? acc[id]
+                                    : '',
+                            ''
+                        );
+
+                    result =
+                        relationValue &&
+                        relationValue[column.relation.id]
+                            ? relationValue[column.relation.id]
+                            : '';
+                }
+
+                return (
+                    <CellWithTooltip
+                        value={result}
+                        columnType="relationArray"
+                    >
+                        <span>{parse(result)}</span>
+                    </CellWithTooltip>
+                );
+            }
+
+            return null;
+        },
+    };
+};
+
+// RichText Column Renderer
+export const renderRichTextColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                return (
+                    <CellWithTooltip
+                        value={data[column.id]}
+                        columnType="richtext"
+                    >
+                        <span>
+                            {parse(data[column.id])}
+                        </span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Stage Column Renderer
+export const renderStageColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ data }) => {
+            let stage = '';
+
+            column.keyIds.forEach((a, b) => {
+                if (data[a] === 1) {
+                    stage = column.valueIds[b];
+                }
+            });
+
+            return (
+                <CellWithTooltip
+                    value={stage}
+                    columnType="stage"
+                >
+                    <span>{stage}</span>
+                </CellWithTooltip>
+            );
+        },
+    };
+};
+
+// Time Column Renderer
+export const renderTimeColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            if (
+                data &&
+                data[column.id] &&
+                moment(data[column.id]).isValid() &&
+                moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                const formattedTime = moment(data[column.id]).format(
+                    column.format ? column.format : 'hh:mm A'
+                );
+
+                return (
+                    <CellWithTooltip
+                        value={data[column.id]}
+                        columnType="time"
+                    >
+                        <span>{formattedTime}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Timer Column Renderer
+export const renderTimerColumn = ({ column, commonProps, handleTimer, form, columns, styles }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            if (
+                data &&
+                data[column.id] &&
+                moment(data[column.id]).isValid() &&
+                moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                const formattedData = moment(data[column.id]).format(
+                    column.format ? column.format : 'DD-MM-YYYY hh:mm A'
+                );
+
+                return (
+                    <CellWithTooltip
+                        value={data[column.id]}
+                        columnType="timer"
+                    >
+                        <span>{formattedData}</span>
+                    </CellWithTooltip>
+                );
+            } else {
+                let shouldRenderButton = false;
+
+                if (
+                    !column.hasOwnProperty('require') ||
+                    column.require.length === 0
+                ) {
+                    shouldRenderButton = true;
+                } else {
+                    for (const req of column.require) {
+                        if (req.hasOwnProperty('id')) {
+                            const hasValue = req.hasOwnProperty('value');
+                            if (
+                                (hasValue && data[req.id] === req.value) ||
+                                (!hasValue && data[req.id])
+                            ) {
+                                shouldRenderButton = true;
+                            } else {
+                                shouldRenderButton = false;
+                                break;
+                            }
+                        }
+                    }
+                }
+
+                if (shouldRenderButton) {
+                    return (
+                        <button
+                            className={styles.clockButton}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+
+                                // Check if every required field in column.validate exists and is truthy in data
+                                if (
+                                    column.validate &&
+                                    column.validate.length > 0
+                                ) {
+                                    const missingFields = column.validate.filter(
+                                        (v) => !data[v]
+                                    );
+
+                                    if (missingFields.length === 0) {
+                                        handleTimer(
+                                            data[form.primaryKey],
+                                            column.id,
+                                            data
+                                        );
+                                    } else {
+                                        // Format field names to be more readable
+                                        const formattedFields = missingFields.map(
+                                            (field) => {
+                                                // Try to find the column with this field ID to get its label
+                                                const fieldColumn = columns.find(
+                                                    (col) => col.id === field
+                                                );
+                                                // Use the label if found, otherwise use the field ID
+                                                return fieldColumn?.label || field;
+                                            }
+                                        );
+
+                                        const fieldList = formattedFields.join(', ');
+                                        toast.error(
+                                            `Please complete the following required field${
+                                                missingFields.length > 1 ? 's' : ''
+                                            } before starting the timer: ${fieldList}`
+                                        );
+                                    }
+                                } else {
+                                    handleTimer(
+                                        data[form.primaryKey],
+                                        column.id,
+                                        data
+                                    );
+                                }
+                            }}
+                        >
+                            <Alarm
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={`${column.label} Timer`}
+                                strokeWidth={2}
+                                size={14}
+                                style={{
+                                    color: 'white',
+                                }}
+                            />
+                        </button>
+                    );
+                }
+
+                // Return a placeholder div to maintain consistent row height
+                return (
+                    <div
+                        style={{
+                            width: '28px',
+                            height: '28px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            margin: '0 auto',
+                        }}
+                    >
+                        {/* Empty placeholder to maintain layout */}
+                    </div>
+                );
+            }
+        },
+    };
+};
+
+// URL Column Renderer
+export const renderUrlColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            if (data && data[column.id]) {
+                return (
+                    <CellWithTooltip
+                        value={data[column.id]}
+                        columnType="url"
+                    >
+                        <span>
+                            <a
+                                href={data[column.id]}
+                                target="_blank"
+                            >
+                                Link
+                            </a>
+                        </span>
+                    </CellWithTooltip>
+                );
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Input Text Column Renderer
+export const renderInputTextColumn = ({ 
+    column, 
+    commonProps, 
+    localInputValuesRef, 
+    setLocalInputValues, 
+    handleInputUpdate 
+}) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        render: ({ data }) => {
+            const inputKey = `${data.id}-${column.id}`;
+
+            // Use the ref value first, then fall back to data value
+            const currentValue =
+                localInputValuesRef.current[inputKey] !== undefined
+                    ? localInputValuesRef.current[inputKey]
+                    : data[column.id] || '';
+
+            return (
+                <input
+                    type="text"
+                    name={column.id}
+                    value={currentValue}
+                    style={{
+                        padding: '7px',
+                        width: '100%',
+                    }}
+                    onChange={(e) => {
+                        const newValue = e.target.value;
+
+                        // Update both state and ref
+                        localInputValuesRef.current = {
+                            ...localInputValuesRef.current,
+                            [inputKey]: newValue,
+                        };
+
+                        setLocalInputValues((prev) => ({
+                            ...prev,
+                            [inputKey]: newValue,
+                        }));
+
+                        if (
+                            column.update?.key &&
+                            column.update?.url &&
+                            column.update?.method
+                        ) {
+                            handleInputUpdate(
+                                column.update.key,
+                                `${column.update.url}/${data.id}`,
+                                column.update.method,
+                                newValue,
+                                inputKey
+                            );
+                        }
+                    }}
+                    onBlur={() => {
+                        if (
+                            column.update?.key &&
+                            column.update?.url &&
+                            column.update?.method
+                        ) {
+                            handleInputUpdate.flush();
+                        }
+                    }}
+                />
+            );
+        },
+    };
+};
+
+// Address Column Renderer
+export const renderAddressColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+    return {
+        ...commonProps,
+        name: `${column.type}.${column.id}`,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            const addressFields = [
+                'address1',
+                'address2',
+                'suburb',
+                'postcode',
+            ];
+
+            const addressValue = addressFields
+                .filter((field) => data[field])
+                .map((field) => data[field])
+                .join(' ');
+
+            const stateValue =
+                data.state?.name ||
+                data.state ||
+                '';
+
+            const value = `${addressValue} ${stateValue}`;
+
+            return (
+                <CellWithTooltip
+                    value={value}
+                    columnType="address"
+                >
+                    <span>{value}</span>
+                </CellWithTooltip>
+            );
+        },
+    };
+};
+
+// Created By Column Renderer
+export const renderCreatedByColumn = ({ column, commonProps }) => {
+    return {
+        ...commonProps,
+        name: `${column.type}.${column.id}`,
+        sortable: false,
+        render: ({ data }) => {
+            if (
+                data.audits[0] &&
+                data.audits[0].user &&
+                data.audits[0].user.name
+            ) {
+                const value = data.audits[0].user.name;
+
+                return <span>{value}</span>;
+            } else {
+                return null;
+            }
+        },
+    };
+};
+
+// Date Range Column Renderer
+export const renderDateRangeColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+    return {
+        ...commonProps,
+        name: `${column.id[0]}.${column.id[1]}.`,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        defaultWidth: 200, // Set default width for daterange columns
+        minWidth: 200, // Set minimum width for daterange columns
+        render: ({ data }) => {
+            let value = '';
+
+            if (
+                data &&
+                data[column.id[0]] &&
+                moment(data[column.id[0]]).isValid() &&
+                moment(data[column.id[0]]).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                value = moment(data[column.id[0]]).format(
+                    column.format || 'DD-MM-YYYY'
+                );
+            }
+
+            if (
+                data &&
+                data[column.id[1]] &&
+                moment(data[column.id[1]]).isValid() &&
+                moment(data[column.id[1]]).format('YYYY-MM-DD') !== '1970-01-01'
+            ) {
+                value += ` - ${moment(data[column.id[1]]).format(
+                    column.format || 'DD-MM-YYYY'
+                )}`;
+            }
+
+            return <span>{value}</span>;
+        },
+    };
+};
+
+// Stage Counter Column Renderer
+export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ data }) => {
+            if (
+                data &&
+                column.stageConfig &&
+                column.stageConfig.key
+            ) {
+                // Check if the data has the specified key and it's an array
+                const stageData = data[column.stageConfig.key];
+
+                if (
+                    stageData &&
+                    Array.isArray(stageData)
+                ) {
+                    const stageCount = stageData.length;
+
+                    // Create a clickable element if link is provided
+                    const handleClick = (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+
+                        if (
+                            column.link &&
+                            column.link.url &&
+                            column.link.key &&
+                            navigate
+                        ) {
+                            navigate(
+                                `${column.link.url}${data[column.link.key]}`
+                            );
+                        }
+                    };
+
+                    // Create an array of squares based on the stage data
+                    const squares = [];
+                    for (let i = 0; i < stageCount; i++) {
+                        // Get the stage item
+                        const stageItem = stageData[i];
+
+                        // Get the label value from the stage item using stageLabelKey if provided
+                        let labelValue = '';
+                        if (
+                            column.stageConfig.stageLabelKey &&
+                            stageItem &&
+                            stageItem[column.stageConfig.stageLabelKey] !== undefined
+                        ) {
+                            // Get the value from the stage item
+                            const rawValue = stageItem[column.stageConfig.stageLabelKey];
+
+                            // If it's an object with a name property, use that
+                            if (
+                                rawValue &&
+                                typeof rawValue === 'object' &&
+                                rawValue.name
+                            ) {
+                                labelValue = rawValue.name.charAt(0);
+                            }
+                            // If it's a string, use the first character
+                            else if (
+                                typeof rawValue === 'string' &&
+                                rawValue.length > 0
+                            ) {
+                                labelValue = rawValue.charAt(0);
+                            }
+                            // Otherwise use the raw value if it can be converted to string
+                            else if (
+                                rawValue !== null &&
+                                rawValue !== undefined
+                            ) {
+                                labelValue = String(rawValue).charAt(0);
+                            }
+                        }
+
+                        // Create tooltip content from the full value if available
+                        let tooltipContent = `Stage ${i + 1}`;
+                        if (
+                            column.stageConfig.stageLabelKey &&
+                            stageItem &&
+                            stageItem[column.stageConfig.stageLabelKey]
+                        ) {
+                            const rawValue = stageItem[column.stageConfig.stageLabelKey];
+                            if (
+                                rawValue &&
+                                typeof rawValue === 'object' &&
+                                rawValue.name
+                            ) {
+                                tooltipContent = `${rawValue.name} (Stage ${i + 1})`;
+                            } else if (
+                                rawValue !== null &&
+                                rawValue !== undefined
+                            ) {
+                                tooltipContent = `Stage ${i + 1})`;
+                            }
+                        }
+
+                        // Determine the background color based on stageColour configuration
+                        let backgroundColor = 'var(--primary-color, #4a90e2)';
+
+                        if (
+                            column.stageConfig.stageColour &&
+                            column.stageConfig.stageColour.key &&
+                            column.stageConfig.stageColour.options &&
+                            stageItem
+                        ) {
+                            const colourKey = column.stageConfig.stageColour.key;
+                            const colourOptions = column.stageConfig.stageColour.options;
+
+                            // Get the value for the color key
+                            if (stageItem[colourKey] !== undefined) {
+                                const keyValue = stageItem[colourKey];
+
+                                // Find matching option
+                                const matchingOption = colourOptions.find((option) => {
+                                    // Handle both direct value and object with id
+                                    if (
+                                        typeof keyValue === 'object' &&
+                                        keyValue !== null
+                                    ) {
+                                        // Use loose equality (==) to handle type coercion between string and number
+                                        return keyValue.id == option.id;
+                                    }
+                                    // Use loose equality (==) to handle type coercion between string and number
+                                    return keyValue == option.id;
+                                });
+
+                                // Use the color from the matching option if found
+                                if (
+                                    matchingOption &&
+                                    matchingOption.colour
+                                ) {
+                                    backgroundColor = matchingOption.colour;
+                                }
+                            }
+                        }
+
+                        squares.push(
+                            <div
+                                key={i}
+                                style={{
+                                    width: '20px',
+                                    height: '20px',
+                                    backgroundColor: backgroundColor,
+                                    borderRadius: '3px',
+                                    margin: '0 2px',
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center',
+                                    color: 'white',
+                                    fontSize: '11px',
+                                    fontWeight: 'bold',
+                                }}
+                                data-tooltip-id="system-tooltip"
+                                data-tooltip-content={tooltipContent}
+                            >
+                                {labelValue}
+                            </div>
+                        );
+                    }
+
+                    return (
+                        <div
+                            onClick={handleClick}
+                            style={{
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                cursor: column.link ? 'pointer' : 'default',
+                                gap: '4px',
+                                padding: '2px 0',
+                                maxWidth: '100%',
+                            }}
+                        >
+                            {squares}
+                        </div>
+                    );
+                }
+            }
+            return null;
+        },
+    };
+};