From a35c7824c94f6383a214ddcbe39995fbbcedf0fd Mon Sep 17 00:00:00 2001
From: Bhanu Prakash Sai Potteri <bhanu.potteri@getzino.com>
Date: Sat, 23 May 2026 11:21:56 +0530
Subject: [PATCH] Render charts in separate row below tiles

---
 src/components/RecordViewTable.tsx | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/RecordViewTable.tsx b/src/components/RecordViewTable.tsx
index bd1f196..9e2efcb 100644
--- a/src/components/RecordViewTable.tsx
+++ b/src/components/RecordViewTable.tsx
@@ -268,17 +268,27 @@ export default function RecordViewTable({ viewId, onRowClick, toolbarAction }: P
     onRowClick ? onRowClick(id) : navigate(`/detail/${id}`);
   };
 
+  const tileSpecs  = analyticsSpecs.filter(a => a.kind === "tile");
+  const chartSpecs = analyticsSpecs.filter(a => a.kind === "chart");
   const analyticsRow = analyticsSpecs.length > 0 ? (
-    <div className="flex flex-wrap items-stretch gap-3 mb-4">
-      {analyticsSpecs.map((a, i) => {
-        if (a.kind === "tile") {
-          const tv = tileValues.find(t => t.tile_uid === a.uid);
-          return <Tile key={i} title={a.title} value={tv?.value as number | undefined} loading={loading || dataLoading} />;
-        }
-        const cd = chartData.find(c => c.chart_uid === a.uid);
-        const Chart = a.chartType === "pie" ? PieChart : BarChart;
-        return <Chart key={i} title={a.title} rows={cd?.rows ?? []} loading={loading || dataLoading} />;
-      })}
+    <div className="space-y-3 mb-4">
+      {tileSpecs.length > 0 && (
+        <div className="flex flex-wrap items-stretch gap-3">
+          {tileSpecs.map((a, i) => {
+            const tv = tileValues.find(t => t.tile_uid === a.uid);
+            return <Tile key={`tile-${i}`} title={a.title} value={tv?.value as number | undefined} loading={loading || dataLoading} />;
+          })}
+        </div>
+      )}
+      {chartSpecs.length > 0 && (
+        <div className="flex flex-wrap items-stretch gap-3">
+          {chartSpecs.map((a, i) => {
+            const cd = chartData.find(c => c.chart_uid === a.uid);
+            const Chart = (a as { chartType?: string }).chartType === "pie" ? PieChart : BarChart;
+            return <Chart key={`chart-${i}`} title={a.title} rows={cd?.rows ?? []} loading={loading || dataLoading} />;
+          })}
+        </div>
+      )}
     </div>
   ) : null;