Improve USB policy filters layout and sizing
- Use grid layout with 2 columns for better space usage - Increase filter height to h-9 for better readability - Move "Limpar" button to header row - Add proper padding and spacing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
873305fa7f
commit
d476761f22
1 changed files with 38 additions and 36 deletions
|
|
@ -385,44 +385,46 @@ export function UsbPolicyControl({
|
||||||
{showHistory && (
|
{showHistory && (
|
||||||
<div className="mt-3 space-y-3">
|
<div className="mt-3 space-y-3">
|
||||||
{/* Filtros */}
|
{/* Filtros */}
|
||||||
<div className="flex flex-wrap items-center gap-2 rounded-lg border bg-slate-50/80 p-2">
|
<div className="space-y-2 rounded-lg border bg-slate-50/80 p-3">
|
||||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
|
||||||
<Filter className="size-3.5" />
|
<Filter className="size-3.5" />
|
||||||
<span>Filtros:</span>
|
<span>Filtros</span>
|
||||||
|
{hasActiveFilters && (
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="ml-auto h-6 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
|
||||||
|
onClick={handleResetFilters}
|
||||||
|
>
|
||||||
|
<RotateCcw className="size-3" />
|
||||||
|
Limpar
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
||||||
|
<SelectTrigger className="h-9 text-sm">
|
||||||
|
<SelectValue placeholder="Status" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{STATUS_FILTER_OPTIONS.map((opt) => (
|
||||||
|
<SelectItem key={opt.value} value={opt.value}>
|
||||||
|
{opt.label}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<DateRangeButton
|
||||||
|
from={dateFrom}
|
||||||
|
to={dateTo}
|
||||||
|
onChange={({ from, to }) => {
|
||||||
|
setDateFrom(from)
|
||||||
|
setDateTo(to)
|
||||||
|
}}
|
||||||
|
className="h-9"
|
||||||
|
clearLabel="Limpar"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Select value={statusFilter} onValueChange={setStatusFilter}>
|
|
||||||
<SelectTrigger className="h-7 w-[130px] text-xs">
|
|
||||||
<SelectValue placeholder="Status" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
{STATUS_FILTER_OPTIONS.map((opt) => (
|
|
||||||
<SelectItem key={opt.value} value={opt.value} className="text-xs">
|
|
||||||
{opt.label}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
<DateRangeButton
|
|
||||||
from={dateFrom}
|
|
||||||
to={dateTo}
|
|
||||||
onChange={({ from, to }) => {
|
|
||||||
setDateFrom(from)
|
|
||||||
setDateTo(to)
|
|
||||||
}}
|
|
||||||
className="h-7 text-xs"
|
|
||||||
clearLabel="Limpar período"
|
|
||||||
/>
|
|
||||||
{hasActiveFilters && (
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 gap-1 px-2 text-xs text-muted-foreground hover:text-foreground"
|
|
||||||
onClick={handleResetFilters}
|
|
||||||
>
|
|
||||||
<RotateCcw className="size-3" />
|
|
||||||
Limpar
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Lista de eventos */}
|
{/* Lista de eventos */}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue