guilherme
/
agprotocolopainelweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(header): remove unused filters and update header content

main
guilherme 2025-11-25 12:23:27 -03:00
parent 994d9580f5
commit 0d8cd82721
1 changed files with 9 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
src/views/components/header.tsx
View File

@ -14,9 +14,10 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@/views/components/ui/popover'; } from '@/views/components/ui/popover';
import { Funnel, GearSix } from '@phosphor-icons/react'; import { GearSix } from '@phosphor-icons/react';
import { ptBR } from 'date-fns/locale'; import { ptBR } from 'date-fns/locale';
import { useState } from 'react'; import { useState } from 'react';
import type { DateRange as RDateRange } from 'react-day-picker'; import type { DateRange as RDateRange } from 'react-day-picker';
import { import {
@ -26,35 +27,9 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from '@/views/components/ui/select'; } from '@/views/components/ui/select';
import {
Sheet,
SheetContent,
SheetHeader,
SheetTitle,
SheetTrigger,
} from '@/views/components/ui/sheet';
import { SelectPopover } from './ui/select-popover';
type DateRange = RDateRange; type DateRange = RDateRange;
const projects = [
{ id: 1, descricao: 'Projeto Alfa' },
{ id: 2, descricao: 'Projeto Beta' },
{ id: 3, descricao: 'Projeto Gama' },
];
const sectors = [
{ id: 1, descricao: 'Manutenção' },
{ id: 2, descricao: 'Operações' },
{ id: 3, descricao: 'Logística' },
];
const clients = [
{ id: 1, descricao: 'Cliente A' },
{ id: 2, descricao: 'Cliente B' },
{ id: 3, descricao: 'Cliente C' },
];
export function Header() { export function Header() {
const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const [localDateRange, setLocalDateRange] = useState<DateRange | undefined>(); const [localDateRange, setLocalDateRange] = useState<DateRange | undefined>();
@ -64,16 +39,6 @@ export function Header() {
to: new Date(), to: new Date(),
})); }));
const [projectValue, setProjectValue] = useState<string>(
projects[0]?.descricao ?? ''
);
const [sectorValue, setSectorValue] = useState<string>(
sectors[0]?.descricao ?? ''
);
const [clientValue, setClientValue] = useState<string>(
clients[0]?.descricao ?? ''
);
function handlePopoverOpenChange(open: boolean) { function handlePopoverOpenChange(open: boolean) {
setIsPopoverOpen(open); setIsPopoverOpen(open);
if (open) { if (open) {
@ -104,10 +69,10 @@ export function Header() {
<header className="animate-slidein300 opacity-0 flex mb-6 md:block lg:flex items-center justify-between z-50"> <header className="animate-slidein300 opacity-0 flex mb-6 md:block lg:flex items-center justify-between z-50">
<div className="md:mb-2"> <div className="md:mb-2">
<h1 className="mt-2 text-2xl font-medium tracking-tight text-slate-900 dark:text-slate-100"> <h1 className="mt-2 text-2xl font-medium tracking-tight text-slate-900 dark:text-slate-100">
Gestão de Frota Tramitação de Protocolo
</h1> </h1>
<p className="text-gray-500 dark:text-gray-400"> <p className="text-gray-500 dark:text-gray-400">
Dashboard de visualização e controle da frota de veículos Monitoramento e gestão eficiente de protocolos
</p> </p>
</div> </div>
@ -142,15 +107,13 @@ export function Header() {
<Button onClick={() => window.print()}>Gerar Relatório</Button> <Button onClick={() => window.print()}>Gerar Relatório</Button>
<Select> <Select>
<SelectTrigger> <SelectTrigger className="w-[180px]" value="0">
<SelectValue placeholder="Selecione um opção" /> <SelectValue placeholder="Selecione um opção" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="rounded-md"> <SelectContent className="rounded-md">
<SelectItem value="0">Ultimo dia</SelectItem> <SelectItem value="0">Modo Eu</SelectItem>
<SelectItem value="7">Últimos 7 dias</SelectItem> <SelectItem value="7">Todos os protocolos</SelectItem>
<SelectItem value="30">Últimos 30 dias</SelectItem>
<SelectItem value="90">Últimos 90 dias</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
@ -175,14 +138,12 @@ export function Header() {
<Button <Button
variant="ghost" variant="ghost"
onClick={clearDateFilter} onClick={clearDateFilter}
disabled={!dateValue?.from} disabled={!dateValue?.from}>
>
Limpar Limpar
</Button> </Button>
<Button <Button
onClick={applyDateFilter} onClick={applyDateFilter}
disabled={!localDateRange?.from} disabled={!localDateRange?.from}>
>
Aplicar Aplicar
</Button> </Button>
</div> </div>
@ -190,49 +151,6 @@ export function Header() {
</PopoverContent> </PopoverContent>
</Popover> </Popover>
</div> </div>
<Sheet>
<SheetTrigger asChild>
<Button
title="Clique para visualizar os filtros"
variant="outline"
size="icon"
>
<Funnel size={18} />
</Button>
</SheetTrigger>
<SheetContent className="w-fit space-y-4">
<SheetHeader>
<SheetTitle className="mt-1.5">Filtros</SheetTitle>
</SheetHeader>
<div className="flex flex-col gap-3 w-[204px]">
<SelectPopover
label="Projeto"
items={projects || []}
value={projectValue}
setValue={setProjectValue}
placeholder="Selecione um projeto..."
/>
<SelectPopover
label="Setor"
items={sectors || []}
value={sectorValue}
setValue={setSectorValue}
placeholder="Selecione um setor..."
/>
<SelectPopover
label="Cliente"
items={clients || []}
value={clientValue}
setValue={setClientValue}
placeholder="Selecione um cliente..."
/>
</div>
</SheetContent>
</Sheet>
</div> </div>
</header> </header>
); );