fix: perbaiki layout tabel dan accordion di layar sempit
Co-authored-by: amaliadwiy <amaliadwiy@users.noreply.github.com>
This commit is contained in:
@@ -8,7 +8,6 @@ import {
|
||||
Group,
|
||||
Loader,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Table,
|
||||
@@ -74,7 +73,7 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
|
||||
|
||||
return (
|
||||
<>
|
||||
<Paper withBorder radius="2xl" className="glass" style={{ overflow: 'hidden' }}>
|
||||
<Paper withBorder radius="2xl" className="glass" style={{ overflowX: 'auto' }}>
|
||||
<Box p="lg" style={{ borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
|
||||
<Group justify="space-between">
|
||||
<Group gap="sm">
|
||||
@@ -101,15 +100,15 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
|
||||
</Group>
|
||||
</Box>
|
||||
|
||||
<ScrollArea>
|
||||
<Table.ScrollContainer minWidth={520}>
|
||||
<Table verticalSpacing="sm" highlightOnHover className="data-table">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th px="lg">Error Description</Table.Th>
|
||||
<Table.Th>Reporter</Table.Th>
|
||||
<Table.Th>Version</Table.Th>
|
||||
<Table.Th>Reported</Table.Th>
|
||||
<Table.Th pr="lg">Status</Table.Th>
|
||||
<Table.Th style={{ whiteSpace: 'nowrap' }}>Reporter</Table.Th>
|
||||
<Table.Th style={{ whiteSpace: 'nowrap' }}>Version</Table.Th>
|
||||
<Table.Th style={{ whiteSpace: 'nowrap' }}>Reported</Table.Th>
|
||||
<Table.Th pr="lg" style={{ whiteSpace: 'nowrap' }}>Status</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
@@ -149,8 +148,8 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
|
||||
v{error.affectedVersion || 'N/A'}
|
||||
</Badge>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Group gap={4}>
|
||||
<Table.Td style={{ whiteSpace: 'nowrap' }}>
|
||||
<Group gap={4} wrap="nowrap">
|
||||
<TbHistory size={12} color="gray" />
|
||||
<Text size="xs" c="dimmed">
|
||||
{dayjs(error.createdAt).format('D MMM YYYY, HH:mm')}
|
||||
@@ -170,7 +169,7 @@ export const ErrorDataTable = forwardRef<ErrorDataTableHandle, ErrorDataTablePro
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
</Table.ScrollContainer>
|
||||
</Paper>
|
||||
|
||||
<Drawer
|
||||
|
||||
@@ -463,27 +463,29 @@ function AppErrorsPage() {
|
||||
}}
|
||||
>
|
||||
<Accordion.Control>
|
||||
<Group wrap="nowrap">
|
||||
<Group wrap="nowrap" style={{ minWidth: 0 }}>
|
||||
<ThemeIcon
|
||||
color={STATUS_COLOR[bug.status] ?? 'gray'}
|
||||
variant="light"
|
||||
size="lg"
|
||||
radius="md"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
<TbAlertTriangle size={20} />
|
||||
</ThemeIcon>
|
||||
<Box style={{ flex: 1 }}>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" fw={600} lineClamp={1}>{bug.description}</Text>
|
||||
<Box style={{ flex: 1, minWidth: 0 }}>
|
||||
<Group wrap="nowrap" gap="xs">
|
||||
<Text size="sm" fw={600} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>{bug.description}</Text>
|
||||
<Badge
|
||||
color={STATUS_COLOR[bug.status] ?? 'gray'}
|
||||
variant="dot"
|
||||
size="sm"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
{STATUS_LABEL[bug.status] ?? bug.status}
|
||||
</Badge>
|
||||
</Group>
|
||||
<Text size="xs" c="dimmed">
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>
|
||||
{dayjs(bug.createdAt).format('D MMM YYYY, HH:mm')} · {bug.appId?.toUpperCase()} · v{bug.affectedVersion}
|
||||
</Text>
|
||||
</Box>
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Grid,
|
||||
Group,
|
||||
Loader,
|
||||
Modal,
|
||||
@@ -218,34 +219,36 @@ function RecentVillageLogs({ villageId }: { villageId: string }) {
|
||||
) : logs.length === 0 ? (
|
||||
<Text size="sm" c="dimmed" ta="center" py="md">No recent activity.</Text>
|
||||
) : (
|
||||
<Table verticalSpacing="xs" className="data-table">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th>Time</Table.Th>
|
||||
<Table.Th>User</Table.Th>
|
||||
<Table.Th>Action</Table.Th>
|
||||
<Table.Th>Description</Table.Th>
|
||||
</Table.Tr>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{logs.map((log: any, i: number) => (
|
||||
<Table.Tr key={i}>
|
||||
<Table.Td>
|
||||
<Text size="xs">{dayjs(log.timestamp).format('D MMM YYYY, HH:mm')}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={500}>{log.userName || 'Unknown'}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs">{log.action || '-'}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" c="dimmed" lineClamp={1}>{log.desc || '-'}</Text>
|
||||
</Table.Td>
|
||||
<Table.ScrollContainer minWidth={380}>
|
||||
<Table verticalSpacing="xs" className="data-table">
|
||||
<Table.Thead>
|
||||
<Table.Tr>
|
||||
<Table.Th style={{ whiteSpace: 'nowrap' }}>Time</Table.Th>
|
||||
<Table.Th>User</Table.Th>
|
||||
<Table.Th style={{ whiteSpace: 'nowrap' }}>Action</Table.Th>
|
||||
<Table.Th>Description</Table.Th>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.Thead>
|
||||
<Table.Tbody>
|
||||
{logs.map((log: any, i: number) => (
|
||||
<Table.Tr key={i}>
|
||||
<Table.Td style={{ whiteSpace: 'nowrap' }}>
|
||||
<Text size="xs">{dayjs(log.timestamp).format('D MMM YYYY, HH:mm')}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="sm" fw={500}>{log.userName || 'Unknown'}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td style={{ whiteSpace: 'nowrap' }}>
|
||||
<Text size="xs">{log.action || '-'}</Text>
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Text size="xs" c="dimmed">{log.desc || '-'}</Text>
|
||||
</Table.Td>
|
||||
</Table.Tr>
|
||||
))}
|
||||
</Table.Tbody>
|
||||
</Table>
|
||||
</Table.ScrollContainer>
|
||||
)}
|
||||
</Paper>
|
||||
)
|
||||
@@ -561,47 +564,42 @@ function VillageDetailPage() {
|
||||
<ActivityChart villageId={villageId} />
|
||||
|
||||
{/* ── Recent Logs + System Info ── */}
|
||||
<Box
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '2fr 1fr',
|
||||
gap: '1rem',
|
||||
alignItems: 'start',
|
||||
}}
|
||||
>
|
||||
<Box style={{ minWidth: 0 }}>
|
||||
<Grid gutter="md" align="flex-start">
|
||||
<Grid.Col span={{ base: 12, md: 8 }}>
|
||||
<RecentVillageLogs villageId={villageId} />
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
|
||||
<Paper withBorder radius="xl" p="lg">
|
||||
<Group gap="xs" mb="md">
|
||||
<ThemeIcon size={28} radius="md" variant="light" color="teal">
|
||||
<TbCalendar size={14} />
|
||||
</ThemeIcon>
|
||||
<Text fw={700} size="sm">System Information</Text>
|
||||
</Group>
|
||||
<Stack gap={0}>
|
||||
{[
|
||||
{ label: 'Date Created', value: village.createdAt },
|
||||
{ label: 'Created By', value: '-' },
|
||||
{ label: 'Last Updated', value: village.updatedAt },
|
||||
].map((item, idx, arr) => (
|
||||
<Group
|
||||
key={item.label}
|
||||
justify="space-between"
|
||||
py="xs"
|
||||
wrap="wrap"
|
||||
style={{
|
||||
borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
|
||||
}}
|
||||
>
|
||||
<Text size="xs" c="dimmed">{item.label}</Text>
|
||||
<Text size="xs" fw={600} ta="right">{item.value}</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Box>
|
||||
<Grid.Col span={{ base: 12, md: 4 }}>
|
||||
<Paper withBorder radius="xl" p="lg">
|
||||
<Group gap="xs" mb="md">
|
||||
<ThemeIcon size={28} radius="md" variant="light" color="teal">
|
||||
<TbCalendar size={14} />
|
||||
</ThemeIcon>
|
||||
<Text fw={700} size="sm">System Information</Text>
|
||||
</Group>
|
||||
<Stack gap={0}>
|
||||
{[
|
||||
{ label: 'Date Created', value: village.createdAt },
|
||||
{ label: 'Created By', value: '-' },
|
||||
{ label: 'Last Updated', value: village.updatedAt },
|
||||
].map((item, idx, arr) => (
|
||||
<Group
|
||||
key={item.label}
|
||||
justify="space-between"
|
||||
py="xs"
|
||||
wrap="wrap"
|
||||
style={{
|
||||
borderBottom: idx < arr.length - 1 ? '1px solid var(--mantine-color-default-border)' : 'none',
|
||||
}}
|
||||
>
|
||||
<Text size="xs" c="dimmed">{item.label}</Text>
|
||||
<Text size="xs" fw={600} ta="right">{item.value}</Text>
|
||||
</Group>
|
||||
))}
|
||||
</Stack>
|
||||
</Paper>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
{/* ── Confirmation Modal ── */}
|
||||
<Modal
|
||||
|
||||
Reference in New Issue
Block a user