From 54a850b0f3f7fa7e0decb749a7740cc8310bb265 Mon Sep 17 00:00:00 2001
From: Rohit <rohit.rajan031101@gmail.com>
Date: Mon, 7 Jul 2025 22:50:34 +0530
Subject: [PATCH] feat: revamp cap text output preview ui

---
 src/components/run/InterpretationLog.tsx | 72 ++++++++++++++----------
 1 file changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/components/run/InterpretationLog.tsx b/src/components/run/InterpretationLog.tsx
index 0f1f1185..faf965e9 100644
--- a/src/components/run/InterpretationLog.tsx
+++ b/src/components/run/InterpretationLog.tsx
@@ -379,49 +379,63 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
                 )}
                 
                 {(activeTab === availableTabs.findIndex(tab => tab.id === 'captureText') || singleContentType === 'captureText') && captureTextData.length > 0 && (
-                  <TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
-                    <Table>
-                      <TableHead>
-                        <TableRow>
-                          {getCaptureTextColumns.map((column) => (
+                  <Box sx={{ p: 2 }}>
+                    <TableContainer component={Paper} sx={{ boxShadow: 'none', borderRadius: 0 }}>
+                      <Table>
+                        <TableHead>
+                          <TableRow>
                             <TableCell 
-                              key={column}
                               sx={{ 
                                 borderBottom: '1px solid',
                                 borderColor: darkMode ? '#3a4453' : '#dee2e6',
-                                backgroundColor: darkMode ? '#2a3441' : '#f8f9fa'
+                                backgroundColor: darkMode ? '#2a3441' : '#f8f9fa',
                               }}
                             >
-                              {column}
+                              Label
                             </TableCell>
-                          ))}
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {captureTextData.map((row, idx) => (
-                          <TableRow 
-                            key={idx}
-                            sx={{ 
-                              borderBottom: '1px solid',
-                              borderColor: darkMode ? '#3a4453' : '#dee2e6'
-                            }}
-                          >
-                            {getCaptureTextColumns.map((column) => (
+                            <TableCell 
+                              sx={{ 
+                                borderBottom: '1px solid',
+                                borderColor: darkMode ? '#3a4453' : '#dee2e6',
+                                backgroundColor: darkMode ? '#2a3441' : '#f8f9fa',
+                              }}
+                            >
+                              Value
+                            </TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {getCaptureTextColumns.map((column, index) => (
+                            <TableRow 
+                              key={column}
+                              sx={{ 
+                                borderBottom: index < getCaptureTextColumns.length - 1 ? '1px solid' : 'none',
+                                borderColor: darkMode ? '#3a4453' : '#dee2e6'
+                              }}
+                            >
+                              <TableCell 
+                                sx={{ 
+                                  borderBottom: 'none',
+                                  py: 2,
+                                  fontWeight: 500
+                                }}
+                              >
+                                {column}
+                              </TableCell>
                               <TableCell 
-                                key={column}
                                 sx={{ 
                                   borderBottom: 'none',
                                   py: 2
                                 }}
                               >
-                                {row[column]}
+                                {captureTextData[0][column]}
                               </TableCell>
-                            ))}
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
-                  </TableContainer>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </TableContainer>
+                  </Box>
                 )}
               </Box>
             </>