fix: perbaiki layout filter Activity Logs agar tidak overflow

This commit is contained in:
2026-05-26 14:43:59 +08:00
parent 5002fd1519
commit 457f36be06

View File

@@ -1,6 +1,7 @@
import {
ActionIcon,
Badge,
Box,
Container,
Group,
Loader,
@@ -100,39 +101,43 @@ function GlobalLogsPage() {
</Group>
<Paper withBorder radius="xl" p="md" className="glass">
<Group gap="sm" wrap="wrap" align="flex-end">
<Select
label="User"
placeholder="All users"
value={operatorId}
onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
data={operatorOptions}
w={200}
clearable
size="sm"
/>
<DatePickerInput
type="range"
label="Date range"
placeholder="Pick a date range"
value={dateRange}
onChange={(v) => { setDateRange(v); setPage(1) }}
locale="id"
valueFormat="DD MMM YYYY"
clearable
w={280}
size="sm"
/>
<Stack gap="md">
<Group gap="sm" wrap="wrap" align="flex-end">
<Select
label="User"
placeholder="All users"
value={operatorId}
onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
data={operatorOptions}
style={{ flex: 1, minWidth: 160 }}
clearable
size="sm"
/>
<DatePickerInput
type="range"
label="Date range"
placeholder="Pick a date range"
value={dateRange}
onChange={(v) => { setDateRange(v); setPage(1) }}
locale="id"
valueFormat="DD MMM YYYY"
clearable
style={{ flex: 2, minWidth: 220 }}
size="sm"
/>
</Group>
<Stack gap={4}>
<Text size="xs" fw={500} c="dimmed">Action type</Text>
<SegmentedControl
value={type}
onChange={(v) => { setType(v); setPage(1) }}
size="sm"
data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
/>
<Box style={{ overflowX: 'auto' }}>
<SegmentedControl
value={type}
onChange={(v) => { setType(v); setPage(1) }}
size="sm"
data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
/>
</Box>
</Stack>
</Group>
</Stack>
</Paper>
{isLoading && !data ? (