261 lines
9.5 KiB
TypeScript
261 lines
9.5 KiB
TypeScript
import React from "react";
|
|
import { Calendar, Hash, Filter, X, Building2 } from "lucide-react";
|
|
|
|
export interface EventFilters {
|
|
date: string;
|
|
fotId: string;
|
|
type: string;
|
|
company: string;
|
|
institution: string;
|
|
fotStatus?: string; // New field
|
|
}
|
|
|
|
interface EventFiltersBarProps {
|
|
filters: EventFilters;
|
|
onFilterChange: (filters: EventFilters) => void;
|
|
availableTypes: string[];
|
|
availableCompanies: string[];
|
|
availableInstitutions: string[];
|
|
}
|
|
|
|
export const EventFiltersBar: React.FC<EventFiltersBarProps> = ({
|
|
filters,
|
|
onFilterChange,
|
|
availableTypes,
|
|
availableCompanies,
|
|
availableInstitutions,
|
|
}) => {
|
|
const handleReset = () => {
|
|
onFilterChange({
|
|
date: "",
|
|
fotId: "",
|
|
type: "",
|
|
company: "",
|
|
institution: "",
|
|
fotStatus: "",
|
|
});
|
|
};
|
|
|
|
const hasActiveFilters = Object.values(filters).some((value) => value !== "");
|
|
|
|
return (
|
|
<div className="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-2">
|
|
<Filter size={18} className="text-brand-gold" />
|
|
<h3 className="font-semibold text-gray-800">Filtros Avançados</h3>
|
|
</div>
|
|
{hasActiveFilters && (
|
|
<button
|
|
onClick={handleReset}
|
|
className="flex items-center gap-1 text-sm text-gray-600 hover:text-brand-gold transition-colors"
|
|
>
|
|
<X size={16} />
|
|
Limpar filtros
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3">
|
|
{/* Filtro por FOT */}
|
|
<div className="flex flex-col">
|
|
<label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
|
|
<Hash size={14} className="text-brand-gold" />
|
|
FOT
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={filters.fotId}
|
|
onChange={(e) => {
|
|
const value = e.target.value.replace(/\D/g, '').slice(0, 5);
|
|
onFilterChange({ ...filters, fotId: value });
|
|
}}
|
|
placeholder="Buscar FOT..."
|
|
maxLength={5}
|
|
className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filtro por Data */}
|
|
<div className="flex flex-col">
|
|
<label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
|
|
<Calendar size={14} className="text-brand-gold" />
|
|
Data
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={filters.date}
|
|
onChange={(e) =>
|
|
onFilterChange({ ...filters, date: e.target.value })
|
|
}
|
|
className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
{/* Filtro por Status da Turma */}
|
|
<div className="flex flex-col">
|
|
<label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
|
|
<Filter size={14} className="text-brand-gold" />
|
|
Status da Turma
|
|
</label>
|
|
<select
|
|
value={filters.fotStatus || ""}
|
|
onChange={(e) =>
|
|
onFilterChange({ ...filters, fotStatus: e.target.value })
|
|
}
|
|
className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
|
|
>
|
|
<option value="">Todos</option>
|
|
<option value="normal">Normal</option>
|
|
<option value="pre_venda">Pré-Venda</option>
|
|
<option value="finalizada">Finalizada</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Filtro por Tipo */}
|
|
<div className="flex flex-col">
|
|
<label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
|
|
<Filter size={14} className="text-brand-gold" />
|
|
Tipo de Evento
|
|
</label>
|
|
<select
|
|
value={filters.type}
|
|
onChange={(e) =>
|
|
onFilterChange({ ...filters, type: e.target.value })
|
|
}
|
|
className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
|
|
>
|
|
<option value="">Todos os tipos</option>
|
|
{availableTypes.map((type) => (
|
|
<option key={type} value={type}>
|
|
{type}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Filtro por Empresa */}
|
|
<div className="flex flex-col">
|
|
<label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
|
|
<Building2 size={14} className="text-brand-gold" />
|
|
Empresa
|
|
</label>
|
|
<select
|
|
value={filters.company}
|
|
onChange={(e) =>
|
|
onFilterChange({ ...filters, company: e.target.value })
|
|
}
|
|
className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
|
|
>
|
|
<option value="">Todas as empresas</option>
|
|
{availableCompanies.map((comp) => (
|
|
<option key={comp} value={comp}>
|
|
{comp}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Filtro por Instituição */}
|
|
<div className="flex flex-col">
|
|
<label className="text-xs font-medium text-gray-600 mb-1 flex items-center gap-1">
|
|
<Building2 size={14} className="text-brand-gold" />
|
|
Instituição
|
|
</label>
|
|
<select
|
|
value={filters.institution}
|
|
onChange={(e) =>
|
|
onFilterChange({ ...filters, institution: e.target.value })
|
|
}
|
|
className="px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:border-brand-gold transition-colors bg-white"
|
|
>
|
|
<option value="">Todas as instituições</option>
|
|
{availableInstitutions.map((inst) => (
|
|
<option key={inst} value={inst}>
|
|
{inst}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Active Filters Display */}
|
|
{hasActiveFilters && (
|
|
<div className="mt-3 pt-3 border-t border-gray-100">
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="text-xs text-gray-500">Filtros ativos:</span>
|
|
{filters.date && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
|
|
Data:{" "}
|
|
{new Date(filters.date + "T00:00:00").toLocaleDateString(
|
|
"pt-BR"
|
|
)}
|
|
<button
|
|
onClick={() => onFilterChange({ ...filters, date: "" })}
|
|
className="hover:text-brand-black"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{filters.fotId && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
|
|
FOT: {filters.fotId}
|
|
<button
|
|
onClick={() => onFilterChange({ ...filters, fotId: "" })}
|
|
className="hover:text-brand-black"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{filters.type && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
|
|
Tipo: {filters.type}
|
|
<button
|
|
onClick={() => onFilterChange({ ...filters, type: "" })}
|
|
className="hover:text-brand-black"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{filters.company && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
|
|
Empresa: {filters.company}
|
|
<button
|
|
onClick={() => onFilterChange({ ...filters, company: "" })}
|
|
className="hover:text-brand-black"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{filters.institution && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
|
|
Inst: {filters.institution}
|
|
<button
|
|
onClick={() => onFilterChange({ ...filters, institution: "" })}
|
|
className="hover:text-brand-black"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
)}
|
|
{filters.fotStatus && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-1 bg-brand-gold/10 text-brand-gold text-xs rounded">
|
|
Status: {filters.fotStatus === 'pre_venda' ? 'Pré-Venda' : filters.fotStatus === 'finalizada' ? 'Finalizada' : 'Normal'}
|
|
<button
|
|
onClick={() => onFilterChange({ ...filters, fotStatus: "" })}
|
|
className="hover:text-brand-black"
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|