upd: stack trace hide/show toggle and date format DD/MM/YYYY 24h

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/frontend/components/ErrorDataTable.tsx

@@ -1,23 +1,23 @@
-import { 
-  Table, 
-  Badge, 
-  Text, 
-  Paper, 
-  Group, 
-  Drawer, 
-  Stack, 
-  Divider, 
-  Code,
-  Button,
+import {
+  Badge,
   Box,
+  Button,
+  Code,
+  Divider,
+  Drawer,
+  Group,
+  Paper,
   ScrollArea,
+  Stack,
+  Table,
+  Text,
   Title
 } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks'
-import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { TbMessageReport, TbHistory, TbExternalLink, TbBug } from 'react-icons/tb'
+import { useState } from 'react'
+import { TbBug, TbExternalLink, TbHistory, TbMessageReport } from 'react-icons/tb'
 
 export interface ErrorDataTableProps {
   appId?: string
@@ -26,6 +26,7 @@ export interface ErrorDataTableProps {
 export function ErrorDataTable({ appId }: ErrorDataTableProps) {
   const [opened, { open, close }] = useDisclosure(false)
   const [selectedError, setSelectedError] = useState<any>(null)
+  const [showStackTrace, setShowStackTrace] = useState(false)
 
   const { data: bugsData, isLoading } = useQuery({
     queryKey: ['bugs', appId],
@@ -36,11 +37,12 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
 
   const handleRowClick = (error: any) => {
     setSelectedError(error)
+    setShowStackTrace(false)
     open()
   }
 
   const getSeverityColor = (sev: string) => {
-    switch(sev?.toUpperCase()) {
+    switch (sev?.toUpperCase()) {
       case 'OPEN': return 'red'
       case 'IN_PROGRESS': return 'orange'
       case 'ON_HOLD': return 'yellow'
@@ -90,10 +92,10 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
                   </Table.Td>
                 </Table.Tr>
               ) : bugs.map((error: any) => (
-                <Table.Tr 
-                    key={error.id} 
-                    onClick={() => handleRowClick(error)}
-                    style={{ cursor: 'pointer' }}
+                <Table.Tr
+                  key={error.id}
+                  onClick={() => handleRowClick(error)}
+                  style={{ cursor: 'pointer' }}
                 >
                   <Table.Td px="xl">
                     <Text size="sm" fw={600} lineClamp={1}>{error.description}</Text>
@@ -107,7 +109,7 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
                   <Table.Td>
                     <Group gap={6}>
                       <TbHistory size={12} color="gray" />
-                      <Text size="xs" c="dimmed">{new Date(error.createdAt).toLocaleString()}</Text>
+                      <Text size="xs" c="dimmed">{new Date(error.createdAt).toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })}</Text>
                     </Group>
                   </Table.Td>
                   <Table.Td pr="xl">
@@ -146,8 +148,8 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
 
             <SimpleGrid cols={2} spacing="lg">
               <Box>
-                <Text size="xs" fw={700} c="dimmed" mb={4}>REPORTER</Text>
-                <Text fw={600}>{selectedError.user?.name || selectedError.userId || 'System'}</Text>
+                <Text size="xs" fw={700} c="dimmed" mb={4}>SOURCE</Text>
+                <Text fw={600}>{selectedError.source}</Text>
               </Box>
               <Box>
                 <Text size="xs" fw={700} c="dimmed" mb={4}>APP VERSION</Text>
@@ -158,16 +160,23 @@ export function ErrorDataTable({ appId }: ErrorDataTableProps) {
             <Divider opacity={0.1} />
 
             <Box>
-              <Text size="xs" fw={700} c="dimmed" mb="sm">STACK TRACE</Text>
-              <Code block color="red" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, border: '1px solid var(--mantine-color-default-border)' }}>
-                {selectedError.stackTrace}
-              </Code>
+              <Group justify="space-between" mb="sm">
+                <Text size="xs" fw={700} c="dimmed">STACK TRACE</Text>
+                <Button
+                  variant="subtle"
+                  size="compact-xs"
+                  color="gray"
+                  onClick={() => setShowStackTrace((v) => !v)}
+                >
+                  {showStackTrace ? 'Hide' : 'Show'}
+                </Button>
+              </Group>
+              {showStackTrace && (
+                <Code block color="red" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6, border: '1px solid var(--mantine-color-default-border)' }}>
+                  {selectedError.stackTrace}
+                </Code>
+              )}
             </Box>
-
-            <Group justify="flex-end" mt="xl">
-              <Button variant="light" color="gray" onClick={close}>Dismiss</Button>
-              <Button variant="gradient" gradient={{ from: 'red', to: 'orange' }}>Assign Technician</Button>
-            </Group>
           </Stack>
         )}
       </Drawer>