refactor(header): remove unused filters and update header content
parent
994d9580f5
commit
0d8cd82721
|
|
@ -14,9 +14,10 @@ import {
|
|||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} 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 { useState } from 'react';
|
||||
|
||||
import type { DateRange as RDateRange } from 'react-day-picker';
|
||||
|
||||
import {
|
||||
|
|
@ -26,35 +27,9 @@ import {
|
|||
SelectTrigger,
|
||||
SelectValue,
|
||||
} 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;
|
||||
|
||||
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() {
|
||||
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
|
||||
const [localDateRange, setLocalDateRange] = useState<DateRange | undefined>();
|
||||
|
|
@ -64,16 +39,6 @@ export function Header() {
|
|||
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) {
|
||||
setIsPopoverOpen(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">
|
||||
<div className="md:mb-2">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
@ -142,15 +107,13 @@ export function Header() {
|
|||
<Button onClick={() => window.print()}>Gerar Relatório</Button>
|
||||
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger className="w-[180px]" value="0">
|
||||
<SelectValue placeholder="Selecione um opção" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent className="rounded-md">
|
||||
<SelectItem value="0">Ultimo dia</SelectItem>
|
||||
<SelectItem value="7">Últimos 7 dias</SelectItem>
|
||||
<SelectItem value="30">Últimos 30 dias</SelectItem>
|
||||
<SelectItem value="90">Últimos 90 dias</SelectItem>
|
||||
<SelectItem value="0">Modo Eu</SelectItem>
|
||||
<SelectItem value="7">Todos os protocolos</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
|
|
@ -175,14 +138,12 @@ export function Header() {
|
|||
<Button
|
||||
variant="ghost"
|
||||
onClick={clearDateFilter}
|
||||
disabled={!dateValue?.from}
|
||||
>
|
||||
disabled={!dateValue?.from}>
|
||||
Limpar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={applyDateFilter}
|
||||
disabled={!localDateRange?.from}
|
||||
>
|
||||
disabled={!localDateRange?.from}>
|
||||
Aplicar
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -190,49 +151,6 @@ export function Header() {
|
|||
</PopoverContent>
|
||||
</Popover>
|
||||
</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>
|
||||
</header>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue