From 5273ff589c43c5d28f5c41a729428be73dc8f546 Mon Sep 17 00:00:00 2001 From: suryacp23 Date: Tue, 14 Jul 2026 17:33:39 +0530 Subject: [PATCH] fix:image rendering fixed --- src/components/cards/CallCard.tsx | 39 +++++++++++++++---- src/components/dv/DetailView.tsx | 57 ++++++++++++++++++++++++++-- src/components/forms/DynamicForm.tsx | 4 +- 3 files changed, 87 insertions(+), 13 deletions(-) diff --git a/src/components/cards/CallCard.tsx b/src/components/cards/CallCard.tsx index 948f334..c066ada 100644 --- a/src/components/cards/CallCard.tsx +++ b/src/components/cards/CallCard.tsx @@ -1,10 +1,20 @@ import { formatValue } from '../../lib/format'; +import { BASE_URL } from '../../api/config'; export function CallCard({ row }: { row: Record }) { // Status const stateName = String(row.status || row.current_state_name || 'Pending'); const isProductive = stateName.toLowerCase().includes('productive') || stateName.toLowerCase().includes('completed') || stateName.toLowerCase().includes('success'); + // Image + let imageObj = null; + const imgData = row.upload_image || row.store_image || row.image; + if (Array.isArray(imgData) && imgData.length > 0) { + imageObj = imgData[0]; + } else if (imgData && typeof imgData === 'object' && imgData.blob_path) { + imageObj = imgData; + } + // Store Details const storeName = formatValue(row.store || row.store_name || row.customer_name || 'Unknown Store'); const storeCode = formatValue(row.store_code || '—'); @@ -68,13 +78,28 @@ export function CallCard({ row }: { row: Record }) { {/* Main Content */}
{/* Store Details */} -
- Store Details -

{storeName}

- {storeCode !== '—' && ( -

- Code: {storeCode} -

+
+
+ Store Details +

{storeName}

+ {storeCode !== '—' && ( +

+ Code: {storeCode} +

+ )} +
+ + {imageObj && imageObj.blob_path && ( +
+ Store { + (e.target as HTMLImageElement).style.display = 'none'; + }} + /> +
)}
diff --git a/src/components/dv/DetailView.tsx b/src/components/dv/DetailView.tsx index baf69a3..732b786 100644 --- a/src/components/dv/DetailView.tsx +++ b/src/components/dv/DetailView.tsx @@ -3,7 +3,7 @@ import { cn } from '../../lib/cn'; import { formatValue } from '../../lib/format'; import type { ZinoClient } from '../../api/client'; import type { AuditEntry } from '../../api/types'; -import { WORKFLOWS } from '../../api/config'; +import { WORKFLOWS, APP_ID } from '../../api/config'; import { Card } from '../reusable/Card'; import { Spinner } from '../reusable/Spinner'; import { EmptyState } from '../reusable/EmptyState'; @@ -44,7 +44,7 @@ function getActivityName(uid: string): string | undefined { * Generic Zino detail view. Fetches `GET /app/{id}/view/audit` and * renders the audit trail as a labeled definition grid. */ -export function DetailView({ client, instanceId, title, columns = 2 }: DetailViewProps) { +export function DetailView({ client, dvUid, instanceId, title, columns = 2 }: DetailViewProps) { const [entries, setEntries] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -55,8 +55,16 @@ export function DetailView({ client, instanceId, title, columns = 2 }: DetailVie setLoading(true); setError(null); try { - const r = await client.audit(instanceId); - if (live) setEntries(r); + if (!dvUid) throw new Error("dvUid is required to fetch detail view data."); + const r = await client.detailView(dvUid, instanceId); + if (live) { + setEntries([{ + id: Number(instanceId), + activity_id: '', + data: r.data || {}, + created_at: (r as any).created_at || new Date().toISOString() + } as AuditEntry]); + } } catch (e) { if (live) setError((e as { message?: string })?.message ?? 'Failed to load'); } finally { @@ -158,6 +166,47 @@ export function DetailView({ client, instanceId, title, columns = 2 }: DetailVie ); } + const isFileArray = + Array.isArray(value) && + value.length > 0 && + typeof value[0] === 'object' && + value[0] !== null && + ('original_name' in value[0] || 'uuid' in value[0]); + + if (isFileArray) { + return ( +
+
+ {key.replace(/_/g, ' ')} +
+
+ {(value as any[]).map((file, idx) => { + const previewUrl = `${client.baseUrl}/app/${APP_ID}/view/files/${file.uuid}/preview`; + return ( +
+ {file.original_name { + (e.target as HTMLImageElement).style.display = 'none'; + (e.target as HTMLImageElement).parentElement!.innerHTML = `${file.original_name || 'File'}`; + }} + /> + +
+ ); + })} +
+
+ ); + } + return (
diff --git a/src/components/forms/DynamicForm.tsx b/src/components/forms/DynamicForm.tsx index d2c2474..16f85c8 100644 --- a/src/components/forms/DynamicForm.tsx +++ b/src/components/forms/DynamicForm.tsx @@ -160,12 +160,12 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId: } else if ((f.data_type === 'image' || f.data_type === 'file') && Array.isArray(val) && val.length > 0 && val[0] instanceof File) { const uploadedFiles = []; for (const file of val) { - const fileMeta = await client.uploadFile(file, { activityId: currentActivityId, fieldId: f.id }); + const fileMeta = await client.uploadFile(file, { activityId: currentActivityId, fieldId: f.id, instanceId: currentInstanceId }); uploadedFiles.push(fileMeta); } payload[f.id] = uploadedFiles; } else if ((f.data_type === 'image' || f.data_type === 'file') && val instanceof File) { - const fileMeta = await client.uploadFile(val, { activityId: currentActivityId, fieldId: f.id }); + const fileMeta = await client.uploadFile(val, { activityId: currentActivityId, fieldId: f.id, instanceId: currentInstanceId }); payload[f.id] = [fileMeta]; } else { payload[f.id] = val;