src/frontend/routes/apps.$appId.logs.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import useSWR from 'swr'
 import {
   ActionIcon,
+  Anchor,
   Avatar,
   Badge,
   Code,
@@ -20,7 +21,7 @@ import {
 } from '@mantine/core'
 import { useDebouncedValue, useMediaQuery } from '@mantine/hooks'
 import { DatePickerInput } from '@mantine/dates'
-import { createFileRoute, useParams } from '@tanstack/react-router'
+import { createFileRoute, useNavigate, useParams } from '@tanstack/react-router'
 import {
   TbAlertCircle,
   TbCalendar,
@@ -42,6 +43,7 @@ interface LogEntry {
   desc: string
   username: string
   village: string
+  idVillage: string
 }
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
@@ -81,6 +83,7 @@ function LogTimestamp({ value }: { value: string }) {
 
 function AppLogsPage() {
   const { appId } = useParams({ from: '/apps/$appId/logs' })
+  const navigate = useNavigate()
   const [page, setPage] = useState(1)
   const [search, setSearch] = useState('')
   const [searchQuery, setSearchQuery] = useState('')
@@ -272,7 +275,15 @@ function AppLogsPage() {
                         </Group>
                         <Group gap={6} wrap="nowrap">
                           <TbHome2 size={12} color="gray" />
-                          <Text size="xs" c="dimmed" truncate="end">{log.village}</Text>
+                          <Anchor
+                            size="xs"
+                            c="dimmed"
+                            truncate="end"
+                            onClick={() => navigate({ to: `/apps/${appId}/villages/${log.idVillage}` })}
+                            style={{ cursor: 'pointer' }}
+                          >
+                            {log.village}
+                          </Anchor>
                         </Group>
                       </Stack>
                     </Table.Td>