fix: perbaiki layout filter Activity Logs agar tidak overflow
This commit is contained in:
@@ -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 ? (
|
||||
|
||||
Reference in New Issue
Block a user