@visns-studio/visns-components 5.10.10 → 5.11.1

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

@@ -686,8 +686,73 @@ function GenericDetail({
 
         const renderExist = () => (truncatedValue ? 'Yes' : 'No');
 
-        const renderJson = () =>
-            value ? <pre>{JSON.stringify(value, null, 4)}</pre> : null;
+        const renderJson = () => {
+            if (!value) return null;
+            
+            try {
+                const jsonData = typeof value === 'string' ? JSON.parse(value) : value;
+                
+                // 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'))
+                );
+                
+                if (isQuestionAnswerFormat) {
+                    return (
+                        <div className={styles.jsonQuestionAnswer}>
+                            {Object.entries(jsonData).map(([key, item]) => {
+                                if (!item || typeof item !== 'object') return null;
+                                
+                                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';
+                                
+                                return (
+                                    <div key={key} className={styles.questionAnswerPair}>
+                                        <div className={styles.question}>
+                                            <strong>{question}</strong>
+                                        </div>
+                                        <div className={styles.answer}>
+                                            {answer}
+                                        </div>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    );
+                }
+                
+                // Check if this is a simple key-value object
+                const isSimpleKeyValue = Object.values(jsonData).every(val => 
+                    typeof val !== 'object' || val === null
+                );
+                
+                if (isSimpleKeyValue) {
+                    return (
+                        <div className={styles.jsonKeyValue}>
+                            {Object.entries(jsonData).map(([key, val]) => (
+                                <div key={key} className={styles.keyValuePair}>
+                                    <strong>{key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}:</strong> {
+                                        val !== null && val !== undefined ? 
+                                        (typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val)) : 
+                                        'N/A'
+                                    }
+                                </div>
+                            ))}
+                        </div>
+                    );
+                }
+                
+                // For complex nested objects, fall back to formatted JSON
+                return <pre className={styles.jsonRaw}>{JSON.stringify(jsonData, null, 2)}</pre>;
+                
+            } catch (error) {
+                // If parsing fails, show raw value
+                return <pre className={styles.jsonRaw}>{JSON.stringify(value, null, 2)}</pre>;
+            }
+        };
 
         const renderLatestNotes = () => formatNoteValue();