@visns-studio/visns-components 5.11.1 → 5.11.3

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

@@ -1,12 +1,17 @@
 import numeral from 'numeral';
 import moment from 'moment';
 import parse from 'html-react-parser';
-import { CloudDownload, Alarm } from 'akar-icons';
+import { Download, AlarmClock } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CellWithTooltip from '../cells/CellWithTooltip';
 
 // Boolean Column Renderer
-export const renderBooleanColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+export const renderBooleanColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         filterEditor: filterEditor,
@@ -16,10 +21,7 @@ export const renderBooleanColumn = ({ column, commonProps, filterEditor, filterE
         render: ({ data }) => {
             const value = data[column.id] ? 'Yes' : 'No';
             return (
-                <CellWithTooltip
-                    value={data[column.id]}
-                    columnType="boolean"
-                >
+                <CellWithTooltip value={data[column.id]} columnType="boolean">
                     <span>{value}</span>
                 </CellWithTooltip>
             );
@@ -34,7 +36,9 @@ export const renderCurrencyColumn = ({ column, commonProps }) => {
         name: column.id,
         render: ({ data }) => {
             if (data) {
-                const formattedValue = numeral(data[column.id]).format('$0,0.00');
+                const formattedValue = numeral(data[column.id]).format(
+                    '$0,0.00'
+                );
 
                 return (
                     <CellWithTooltip
@@ -52,7 +56,12 @@ export const renderCurrencyColumn = ({ column, commonProps }) => {
 };
 
 // Date Column Renderer
-export const renderDateColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+export const renderDateColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         name: column.id,
@@ -88,13 +97,8 @@ export const renderDateColumn = ({ column, commonProps, filterEditor, filterEdit
                 }
 
                 return (
-                    <CellWithTooltip
-                        value={data[column.id]}
-                        columnType="date"
-                    >
-                        <span style={columnStyle}>
-                            {value}
-                        </span>
+                    <CellWithTooltip value={data[column.id]} columnType="date">
+                        <span style={columnStyle}>{value}</span>
                     </CellWithTooltip>
                 );
             } else {
@@ -105,7 +109,12 @@ export const renderDateColumn = ({ column, commonProps, filterEditor, filterEdit
 };
 
 // DateTime Column Renderer
-export const renderDateTimeColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+export const renderDateTimeColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         name: column.id,
@@ -168,7 +177,8 @@ export const renderColourColumn = ({ column, commonProps }) => {
                         <div
                             style={{
                                 background:
-                                    data[column.id] + ' none repeat scroll 0% 0%',
+                                    data[column.id] +
+                                    ' none repeat scroll 0% 0%',
                                 height: '100%',
                                 width: '100%',
                                 cursor: 'pointer',
@@ -186,17 +196,15 @@ export const renderColourColumn = ({ column, commonProps }) => {
 };
 
 // Dropdown Column Renderer
-export const renderDropdownColumn = ({ 
-    column, 
-    commonProps, 
-    filterEditor, 
-    filterEditorProps, 
-    dropdownData, 
-    handleDropdownUpdate 
+export const renderDropdownColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    dropdownData,
+    handleDropdownUpdate,
 }) => {
-    const columnId = Array.isArray(column.id)
-        ? column.id.join('-')
-        : column.id;
+    const columnId = Array.isArray(column.id) ? column.id.join('-') : column.id;
 
     return {
         ...commonProps,
@@ -227,8 +235,7 @@ export const renderDropdownColumn = ({
                     }}
                 >
                     <option value="">
-                        Select{' '}
-                        {/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'}{' '}
+                        Select {/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'}{' '}
                         {column.label}
                     </option>
                     {dropdownData[column.id] &&
@@ -252,7 +259,8 @@ export const renderImageColumn = ({ column, commonProps }) => {
         name: column.id,
         render: ({ data }) => {
             if (data && data[column.id]) {
-                const fileUrl = data[column.id][0]?.file_url || data[column.id]?.file_url;
+                const fileUrl =
+                    data[column.id][0]?.file_url || data[column.id]?.file_url;
 
                 if (fileUrl) {
                     return (
@@ -269,7 +277,12 @@ export const renderImageColumn = ({ column, commonProps }) => {
 };
 
 // File Column Renderer
-export const renderFileColumn = ({ column, commonProps, handleDownload, styles }) => {
+export const renderFileColumn = ({
+    column,
+    commonProps,
+    handleDownload,
+    styles,
+}) => {
     return {
         ...commonProps,
         name: column.id,
@@ -292,7 +305,7 @@ export const renderFileColumn = ({ column, commonProps, handleDownload, styles }
                                 display: 'inline-block',
                             }}
                         >
-                            <CloudDownload
+                            <Download
                                 data-tooltip-id="system-tooltip"
                                 data-tooltip-content={`Download File ${file.file_name}`}
                                 strokeWidth={2}
@@ -315,9 +328,11 @@ export const renderFileColumn = ({ column, commonProps, handleDownload, styles }
                                 display: 'inline-block',
                             }}
                         >
-                            <CloudDownload
+                            <Download
                                 data-tooltip-id="system-tooltip"
-                                data-tooltip-content={`Download File ${data[column.id].file_name}`}
+                                data-tooltip-content={`Download File ${
+                                    data[column.id].file_name
+                                }`}
                                 strokeWidth={2}
                                 size={14}
                                 className={styles.tdaction}
@@ -370,49 +385,81 @@ export const renderJsonColumn = ({ column, commonProps }) => {
         ...commonProps,
         name: `${column.id}.${column.jsonData}`,
         render: ({ data }) => {
-            if (
-                data &&
-                data[column.id] &&
-                data[column.id][column.jsonData]
-            ) {
+            if (data && data[column.id] && data[column.id][column.jsonData]) {
                 const jsonValue = data[column.id][column.jsonData];
-                
+
                 if (!jsonValue) return null;
-                
+
                 let displayContent;
                 let tooltipValue = jsonValue;
-                
+
                 try {
-                    const jsonData = typeof jsonValue === 'string' ? JSON.parse(jsonValue) : jsonValue;
-                    
+                    const jsonData =
+                        typeof jsonValue === 'string'
+                            ? JSON.parse(jsonValue)
+                            : jsonValue;
+
                     // Check if this looks like a question/answer format
-                    const isQuestionAnswerFormat = Object.values(jsonData).every(item => 
-                        item && typeof item === 'object' && 
-                        (item.hasOwnProperty('question') || item.hasOwnProperty('answer'))
+                    const isQuestionAnswerFormat = Object.values(
+                        jsonData
+                    ).every(
+                        (item) =>
+                            item &&
+                            typeof item === 'object' &&
+                            (item.hasOwnProperty('question') ||
+                                item.hasOwnProperty('answer'))
                     );
-                    
+
                     if (isQuestionAnswerFormat) {
                         const entries = Object.entries(jsonData);
                         if (entries.length === 1) {
                             const [key, item] = entries[0];
-                            const question = item.question || key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
-                            const answer = item.answer !== undefined ? 
-                                (typeof item.answer === 'boolean' ? (item.answer ? 'Yes' : 'No') : String(item.answer)) : 
-                                'N/A';
-                            
+                            const question =
+                                item.question ||
+                                key
+                                    .replace(/_/g, ' ')
+                                    .replace(/\b\w/g, (l) => l.toUpperCase());
+                            const answer =
+                                item.answer !== undefined
+                                    ? typeof item.answer === 'boolean'
+                                        ? item.answer
+                                            ? 'Yes'
+                                            : 'No'
+                                        : String(item.answer)
+                                    : 'N/A';
+
                             displayContent = (
                                 <div style={{ fontSize: '0.8rem' }}>
-                                    <div style={{ fontWeight: '600', color: 'var(--primary-color)', marginBottom: '0.1rem', fontSize: '0.75rem' }}>
-                                        {question.length > 50 ? question.substring(0, 50) + '...' : question}
+                                    <div
+                                        style={{
+                                            fontWeight: '600',
+                                            color: 'var(--primary-color)',
+                                            marginBottom: '0.1rem',
+                                            fontSize: '0.75rem',
+                                        }}
+                                    >
+                                        {question.length > 50
+                                            ? question.substring(0, 50) + '...'
+                                            : question}
                                     </div>
-                                    <div style={{ color: 'var(--paragraph-color)', fontSize: '0.75rem' }}>
+                                    <div
+                                        style={{
+                                            color: 'var(--paragraph-color)',
+                                            fontSize: '0.75rem',
+                                        }}
+                                    >
                                         {answer}
                                     </div>
                                 </div>
                             );
                         } else {
                             displayContent = (
-                                <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)' }}>
+                                <div
+                                    style={{
+                                        fontSize: '0.75rem',
+                                        color: 'var(--paragraph-color)',
+                                    }}
+                                >
                                     Q&A ({entries.length} items)
                                 </div>
                             );
@@ -420,20 +467,54 @@ export const renderJsonColumn = ({ column, commonProps }) => {
                         tooltipValue = JSON.stringify(jsonData, null, 2);
                     }
                     // Check if this is a simple key-value object
-                    else if (Object.values(jsonData).every(val => typeof val !== 'object' || val === null)) {
+                    else if (
+                        Object.values(jsonData).every(
+                            (val) => typeof val !== 'object' || val === null
+                        )
+                    ) {
                         const entries = Object.entries(jsonData);
                         if (entries.length <= 2) {
                             displayContent = (
                                 <div style={{ fontSize: '0.8rem' }}>
                                     {entries.map(([key, val]) => (
-                                        <div key={key} style={{ marginBottom: '0.1rem', display: 'flex', gap: '0.3rem' }}>
-                                            <strong style={{ color: 'var(--primary-color)', fontSize: '0.7rem' }}>
-                                                {key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:
+                                        <div
+                                            key={key}
+                                            style={{
+                                                marginBottom: '0.1rem',
+                                                display: 'flex',
+                                                gap: '0.3rem',
+                                            }}
+                                        >
+                                            <strong
+                                                style={{
+                                                    color: 'var(--primary-color)',
+                                                    fontSize: '0.7rem',
+                                                }}
+                                            >
+                                                {key
+                                                    .replace(/_/g, ' ')
+                                                    .replace(/\b\w/g, (l) =>
+                                                        l.toUpperCase()
+                                                    )}
+                                                :
                                             </strong>
-                                            <span style={{ color: 'var(--paragraph-color)', fontSize: '0.7rem' }}>
-                                                {val !== null && val !== undefined ? 
-                                                (typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val).substring(0, 15)) : 
-                                                'N/A'}
+                                            <span
+                                                style={{
+                                                    color: 'var(--paragraph-color)',
+                                                    fontSize: '0.7rem',
+                                                }}
+                                            >
+                                                {val !== null &&
+                                                val !== undefined
+                                                    ? typeof val === 'boolean'
+                                                        ? val
+                                                            ? 'Yes'
+                                                            : 'No'
+                                                        : String(val).substring(
+                                                              0,
+                                                              15
+                                                          )
+                                                    : 'N/A'}
                                             </span>
                                         </div>
                                     ))}
@@ -441,7 +522,12 @@ export const renderJsonColumn = ({ column, commonProps }) => {
                             );
                         } else {
                             displayContent = (
-                                <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)' }}>
+                                <div
+                                    style={{
+                                        fontSize: '0.75rem',
+                                        color: 'var(--paragraph-color)',
+                                    }}
+                                >
                                     Data ({entries.length} properties)
                                 </div>
                             );
@@ -452,20 +538,33 @@ export const renderJsonColumn = ({ column, commonProps }) => {
                     else {
                         const keyCount = Object.keys(jsonData).length;
                         displayContent = (
-                            <div style={{ fontSize: '0.75rem', color: 'var(--paragraph-color)', fontStyle: 'italic' }}>
-                                JSON ({keyCount} {keyCount === 1 ? 'property' : 'properties'})
+                            <div
+                                style={{
+                                    fontSize: '0.75rem',
+                                    color: 'var(--paragraph-color)',
+                                    fontStyle: 'italic',
+                                }}
+                            >
+                                JSON ({keyCount}{' '}
+                                {keyCount === 1 ? 'property' : 'properties'})
                             </div>
                         );
                         tooltipValue = JSON.stringify(jsonData, null, 2);
                     }
-                    
                 } catch (error) {
                     // If parsing fails, show truncated raw value
-                    const displayValue = typeof jsonValue === 'string' && jsonValue.length > 30 
-                        ? jsonValue.substring(0, 30) + '...' 
-                        : jsonValue;
+                    const displayValue =
+                        typeof jsonValue === 'string' && jsonValue.length > 30
+                            ? jsonValue.substring(0, 30) + '...'
+                            : jsonValue;
                     displayContent = (
-                        <span style={{ fontSize: '0.75rem', fontFamily: 'monospace', color: 'var(--paragraph-color)' }}>
+                        <span
+                            style={{
+                                fontSize: '0.75rem',
+                                fontFamily: 'monospace',
+                                color: 'var(--paragraph-color)',
+                            }}
+                        >
                             {displayValue}
                         </span>
                     );
@@ -473,10 +572,7 @@ export const renderJsonColumn = ({ column, commonProps }) => {
                 }
 
                 return (
-                    <CellWithTooltip
-                        value={tooltipValue}
-                        columnType="json"
-                    >
+                    <CellWithTooltip value={tooltipValue} columnType="json">
                         {displayContent}
                     </CellWithTooltip>
                 );
@@ -497,7 +593,12 @@ export const renderNumberColumn = ({ column, commonProps }) => {
 };
 
 // Option Column Renderer
-export const renderOptionColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+export const renderOptionColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         name: column.id,
@@ -506,11 +607,7 @@ export const renderOptionColumn = ({ column, commonProps, filterEditor, filterEd
         render: ({ data }) => {
             let newData;
 
-            if (
-                data &&
-                column.options &&
-                column.options[data[column.id]]
-            ) {
+            if (data && column.options && column.options[data[column.id]]) {
                 if (
                     column.key &&
                     data[column.key] > 0 &&
@@ -525,10 +622,7 @@ export const renderOptionColumn = ({ column, commonProps, filterEditor, filterEd
                 }
 
                 return (
-                    <CellWithTooltip
-                        value={newData}
-                        columnType="option"
-                    >
+                    <CellWithTooltip value={newData} columnType="option">
                         <span>{newData}</span>
                     </CellWithTooltip>
                 );
@@ -613,7 +707,13 @@ export const renderCodingColumn = ({ column, commonProps, handleCoding }) => {
 };
 
 // Relation Column Renderer
-export const renderRelationColumn = ({ column, commonProps, filterEditor, filterEditorProps, relationName }) => {
+export const renderRelationColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    relationName,
+}) => {
     return {
         ...commonProps,
         name: relationName,
@@ -649,23 +749,13 @@ export const renderRelationColumn = ({ column, commonProps, filterEditor, filter
                         .map((nf) => value?.[nf] ?? '')
                         .join(' ');
                 } else {
-                    if (
-                        value &&
-                        value.hasOwnProperty(column.nameFrom)
-                    ) {
+                    if (value && value.hasOwnProperty(column.nameFrom)) {
                         value = value[column.nameFrom];
                     }
                 }
 
-                if (
-                    column.placeholder &&
-                    column.placeholder !== ''
-                ) {
-                    return (
-                        <span>
-                            {column.placeholder}
-                        </span>
-                    );
+                if (column.placeholder && column.placeholder !== '') {
+                    return <span>{column.placeholder}</span>;
                 } else {
                     if (column.hasOwnProperty('format')) {
                         if (column.format) {
@@ -697,7 +787,13 @@ export const renderRelationColumn = ({ column, commonProps, filterEditor, filter
 };
 
 // RelationArray Column Renderer
-export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, filterEditorProps, relationName }) => {
+export const renderRelationArrayColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    relationName,
+}) => {
     return {
         ...commonProps,
         name: relationName,
@@ -707,11 +803,7 @@ export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, f
         render: ({ data }) => {
             const relationValue = column.id.reduce(
                 (acc, id) =>
-                    acc === ''
-                        ? data[id]
-                        : acc && acc[id]
-                        ? acc[id]
-                        : '',
+                    acc === '' ? data[id] : acc && acc[id] ? acc[id] : '',
                 ''
             );
 
@@ -720,17 +812,13 @@ export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, f
                 Array.isArray(relationValue) &&
                 relationValue.length > 0
             ) {
-                const nameProperties =
-                    Array.isArray(column.nameFrom)
-                        ? column.nameFrom
-                        : [column.nameFrom];
+                const nameProperties = Array.isArray(column.nameFrom)
+                    ? column.nameFrom
+                    : [column.nameFrom];
 
                 const values = relationValue
                     .map((rv) => {
-                        if (
-                            column.childId &&
-                            Array.isArray(column.childId)
-                        ) {
+                        if (column.childId && Array.isArray(column.childId)) {
                             let childValue = rv;
 
                             column.childId.forEach((a) => {
@@ -740,25 +828,22 @@ export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, f
                             });
 
                             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])
+                                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(' ');
                         }
                     })
@@ -766,33 +851,22 @@ export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, f
 
                 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]
-                                    : '',
-                            ''
-                        );
+                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
-                    ) {
+                if (column.where && column.where.id && column.where.value) {
+                    if (data[column.where.id] === column.where.value) {
                         result += values.join('<br />');
                     }
                 } else {
@@ -800,43 +874,32 @@ export const renderRelationArrayColumn = ({ column, commonProps, filterEditor, f
                 }
 
                 return (
-                    <CellWithTooltip
-                        value={result}
-                        columnType="relationArray"
-                    >
+                    <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]
-                                    : '',
-                            ''
-                        );
+                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 && relationValue[column.relation.id]
                             ? relationValue[column.relation.id]
                             : '';
                 }
 
                 return (
-                    <CellWithTooltip
-                        value={result}
-                        columnType="relationArray"
-                    >
+                    <CellWithTooltip value={result} columnType="relationArray">
                         <span>{parse(result)}</span>
                     </CellWithTooltip>
                 );
@@ -859,9 +922,7 @@ export const renderRichTextColumn = ({ column, commonProps }) => {
                         value={data[column.id]}
                         columnType="richtext"
                     >
-                        <span>
-                            {parse(data[column.id])}
-                        </span>
+                        <span>{parse(data[column.id])}</span>
                     </CellWithTooltip>
                 );
             } else {
@@ -887,10 +948,7 @@ export const renderStageColumn = ({ column, commonProps }) => {
             });
 
             return (
-                <CellWithTooltip
-                    value={stage}
-                    columnType="stage"
-                >
+                <CellWithTooltip value={stage} columnType="stage">
                     <span>{stage}</span>
                 </CellWithTooltip>
             );
@@ -915,10 +973,7 @@ export const renderTimeColumn = ({ column, commonProps }) => {
                 );
 
                 return (
-                    <CellWithTooltip
-                        value={data[column.id]}
-                        columnType="time"
-                    >
+                    <CellWithTooltip value={data[column.id]} columnType="time">
                         <span>{formattedTime}</span>
                     </CellWithTooltip>
                 );
@@ -930,7 +985,14 @@ export const renderTimeColumn = ({ column, commonProps }) => {
 };
 
 // Timer Column Renderer
-export const renderTimerColumn = ({ column, commonProps, handleTimer, form, columns, styles }) => {
+export const renderTimerColumn = ({
+    column,
+    commonProps,
+    handleTimer,
+    form,
+    columns,
+    styles,
+}) => {
     return {
         ...commonProps,
         name: column.id,
@@ -946,10 +1008,7 @@ export const renderTimerColumn = ({ column, commonProps, handleTimer, form, colu
                 );
 
                 return (
-                    <CellWithTooltip
-                        value={data[column.id]}
-                        columnType="timer"
-                    >
+                    <CellWithTooltip value={data[column.id]} columnType="timer">
                         <span>{formattedData}</span>
                     </CellWithTooltip>
                 );
@@ -991,9 +1050,8 @@ export const renderTimerColumn = ({ column, commonProps, handleTimer, form, colu
                                     column.validate &&
                                     column.validate.length > 0
                                 ) {
-                                    const missingFields = column.validate.filter(
-                                        (v) => !data[v]
-                                    );
+                                    const missingFields =
+                                        column.validate.filter((v) => !data[v]);
 
                                     if (missingFields.length === 0) {
                                         handleTimer(
@@ -1003,21 +1061,27 @@ export const renderTimerColumn = ({ column, commonProps, handleTimer, form, colu
                                         );
                                     } else {
                                         // Format field names to be more readable
-                                        const formattedFields = missingFields.map(
-                                            (field) => {
+                                        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
-                                                );
+                                                const fieldColumn =
+                                                    columns.find(
+                                                        (col) =>
+                                                            col.id === field
+                                                    );
                                                 // Use the label if found, otherwise use the field ID
-                                                return fieldColumn?.label || field;
-                                            }
-                                        );
+                                                return (
+                                                    fieldColumn?.label || field
+                                                );
+                                            });
 
-                                        const fieldList = formattedFields.join(', ');
+                                        const fieldList =
+                                            formattedFields.join(', ');
                                         toast.error(
                                             `Please complete the following required field${
-                                                missingFields.length > 1 ? 's' : ''
+                                                missingFields.length > 1
+                                                    ? 's'
+                                                    : ''
                                             } before starting the timer: ${fieldList}`
                                         );
                                     }
@@ -1030,7 +1094,7 @@ export const renderTimerColumn = ({ column, commonProps, handleTimer, form, colu
                                 }
                             }}
                         >
-                            <Alarm
+                            <AlarmClock
                                 data-tooltip-id="system-tooltip"
                                 data-tooltip-content={`${column.label} Timer`}
                                 strokeWidth={2}
@@ -1071,15 +1135,9 @@ export const renderUrlColumn = ({ column, commonProps }) => {
         render: ({ data }) => {
             if (data && data[column.id]) {
                 return (
-                    <CellWithTooltip
-                        value={data[column.id]}
-                        columnType="url"
-                    >
+                    <CellWithTooltip value={data[column.id]} columnType="url">
                         <span>
-                            <a
-                                href={data[column.id]}
-                                target="_blank"
-                            >
+                            <a href={data[column.id]} target="_blank">
                                 Link
                             </a>
                         </span>
@@ -1093,12 +1151,12 @@ export const renderUrlColumn = ({ column, commonProps }) => {
 };
 
 // Input Text Column Renderer
-export const renderInputTextColumn = ({ 
-    column, 
-    commonProps, 
-    localInputValuesRef, 
-    setLocalInputValues, 
-    handleInputUpdate 
+export const renderInputTextColumn = ({
+    column,
+    commonProps,
+    localInputValuesRef,
+    setLocalInputValues,
+    handleInputUpdate,
 }) => {
     return {
         ...commonProps,
@@ -1165,7 +1223,12 @@ export const renderInputTextColumn = ({
 };
 
 // Address Column Renderer
-export const renderAddressColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+export const renderAddressColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         name: `${column.type}.${column.id}`,
@@ -1184,18 +1247,12 @@ export const renderAddressColumn = ({ column, commonProps, filterEditor, filterE
                 .map((field) => data[field])
                 .join(' ');
 
-            const stateValue =
-                data.state?.name ||
-                data.state ||
-                '';
+            const stateValue = data.state?.name || data.state || '';
 
             const value = `${addressValue} ${stateValue}`;
 
             return (
-                <CellWithTooltip
-                    value={value}
-                    columnType="address"
-                >
+                <CellWithTooltip value={value} columnType="address">
                     <span>{value}</span>
                 </CellWithTooltip>
             );
@@ -1226,7 +1283,12 @@ export const renderCreatedByColumn = ({ column, commonProps }) => {
 };
 
 // Date Range Column Renderer
-export const renderDateRangeColumn = ({ column, commonProps, filterEditor, filterEditorProps }) => {
+export const renderDateRangeColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+}) => {
     return {
         ...commonProps,
         name: `${column.id[0]}.${column.id[1]}.`,
@@ -1271,18 +1333,11 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
         name: column.id,
         sortable: false,
         render: ({ data }) => {
-            if (
-                data &&
-                column.stageConfig &&
-                column.stageConfig.key
-            ) {
+            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)
-                ) {
+                if (stageData && Array.isArray(stageData)) {
                     const stageCount = stageData.length;
 
                     // Create a clickable element if link is provided
@@ -1313,10 +1368,12 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                         if (
                             column.stageConfig.stageLabelKey &&
                             stageItem &&
-                            stageItem[column.stageConfig.stageLabelKey] !== undefined
+                            stageItem[column.stageConfig.stageLabelKey] !==
+                                undefined
                         ) {
                             // Get the value from the stage item
-                            const rawValue = stageItem[column.stageConfig.stageLabelKey];
+                            const rawValue =
+                                stageItem[column.stageConfig.stageLabelKey];
 
                             // If it's an object with a name property, use that
                             if (
@@ -1349,13 +1406,16 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                             stageItem &&
                             stageItem[column.stageConfig.stageLabelKey]
                         ) {
-                            const rawValue = stageItem[column.stageConfig.stageLabelKey];
+                            const rawValue =
+                                stageItem[column.stageConfig.stageLabelKey];
                             if (
                                 rawValue &&
                                 typeof rawValue === 'object' &&
                                 rawValue.name
                             ) {
-                                tooltipContent = `${rawValue.name} (Stage ${i + 1})`;
+                                tooltipContent = `${rawValue.name} (Stage ${
+                                    i + 1
+                                })`;
                             } else if (
                                 rawValue !== null &&
                                 rawValue !== undefined
@@ -1373,32 +1433,33 @@ export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
                             column.stageConfig.stageColour.options &&
                             stageItem
                         ) {
-                            const colourKey = column.stageConfig.stageColour.key;
-                            const colourOptions = column.stageConfig.stageColour.options;
+                            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
-                                    ) {
+                                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.id == option.id;
+                                        return keyValue == 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
-                                ) {
+                                if (matchingOption && matchingOption.colour) {
                                     backgroundColor = matchingOption.colour;
                                 }
                             }