Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 | 24x 24x 24x 24x 24x 120x 120x 24x 24x 24x 7x 7x 2x 2x 4x 4x 1x 24x 3x 3x 2x | import type { TicketFilters, TicketStatus } from '../../types/tickets'
import { useState } from 'react'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Stack from '@mui/material/Stack'
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'
import Drawer from '@mui/material/Drawer'
import MenuIcon from '@mui/icons-material/Menu'
import CloseIcon from '@mui/icons-material/Close'
import { DatePicker } from '@mui/x-date-pickers/DatePicker'
import dayjs, { Dayjs } from 'dayjs'
import { FilterSelect } from '../FilterSelect'
import { useTranslation } from 'react-i18next';
import { useTheme } from '@mui/material/styles';
interface Props {
filters: TicketFilters
onChange: (f: Partial<TicketFilters>) => void
}
export function TicketsFilters({ filters, onChange }: Props) {
const { t } = useTranslation('tickets')
const theme = useTheme()
const [open, setOpen] = useState(false)
// Options de statut : adapter selon vos statuts exacts
const statusToLabel: Record<TicketStatus, string> = {
'': t('filters.status_all'),
issued: t('filters.status_issued'),
used: t('filters.status_used'),
refunded: t('filters.status_refunded'),
cancelled: t('filters.status_cancelled'),
}
const labelToStatus: Record<string, TicketStatus> = Object.entries(statusToLabel).reduce(
(acc, [code, label]) => {
acc[label] = code as TicketStatus
return acc
},
{} as Record<string, TicketStatus>
)
const statusOptionsLabels = Object.values(statusToLabel)
const currentStatusLabel = statusToLabel[filters.status]
const content = (
<Box sx={{ width: 260, py: 2, px: 1 }}>
<Typography variant="h6" gutterBottom>
{t('filters.title')}
</Typography>
<Stack spacing={2} sx={{ mx: 1 }}>
{/* Filtre par statut */}
<FilterSelect<string>
label={t('filters.status_label')}
value={currentStatusLabel}
options={statusOptionsLabels}
onChange={selectedLabel => {
const statusCode = labelToStatus[selectedLabel]
onChange({ status: statusCode, page: 1 })
}}
/>
{/* Date événement du */}
<DatePicker
label={t('filters.event_date_from')}
value={filters.event_date_from ? dayjs(filters.event_date_from) : null}
onChange={(d: Dayjs | null) =>
onChange({ event_date_from: d?.format('YYYY-MM-DD') || '', page: 1 })
}
slotProps={{ textField: { size: 'small', fullWidth: true } }}
/>
{/* Date événement au */}
<DatePicker
label={t('filters.event_date_to')}
value={filters.event_date_to ? dayjs(filters.event_date_to) : null}
onChange={(d: Dayjs | null) =>
onChange({ event_date_to: d?.format('YYYY-MM-DD') || '', page: 1 })
}
slotProps={{ textField: { size: 'small', fullWidth: true } }}
/>
{/* Par page */}
<FilterSelect<string>
label={t('filters.per_page')}
value={String(filters.per_page)}
options={['5','10','25','50','100']}
onChange={selected => {
const per = parseInt(selected, 10)
onChange({ per_page: per, page: 1 })
}}
/>
{/* Réinitialiser */}
<Button
variant="outlined"
fullWidth
onClick={() =>
onChange({
status: '',
event_date_from: '',
event_date_to: '',
per_page: 5,
page: 1,
})
}
>
{t('filters.reset')}
</Button>
</Stack>
</Box>
)
return (
<>
{/* Desktop */}
<Box
component="aside"
sx={{
display: { xs: 'none', md: 'block' },
position: 'sticky',
top: theme.mixins.toolbar.minHeight,
bgcolor: 'background.paper',
border: `1px solid ${theme.palette.divider}`,
borderRadius: 1,
width: 260,
}}
>
{content}
</Box>
{/* Mobile */}
<Box sx={{ display: { xs: 'block', md: 'none' }, mb: 2 }}>
<IconButton onClick={() => setOpen(true)} aria-label={t('filters.title')}>
<MenuIcon />
</IconButton>
<Drawer open={open} onClose={() => setOpen(false)} keepMounted>
<Box sx={{ position: 'relative' }}>
<IconButton
onClick={() => setOpen(false)}
size="small"
sx={{
position: 'absolute',
top: 8,
right: 8,
}}
aria-label={t('filters.close')}
>
<CloseIcon />
</IconButton>
{content}
</Box>
</Drawer>
</Box>
</>
)
} |