feat: dashboard
This commit is contained in:
Julien Froidefond
181
components/admin/multi-select-filter.tsx
Normal file
181
components/admin/multi-select-filter.tsx
Normal file
@@ -0,0 +1,181 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import { Filter, X, ChevronDown } from "lucide-react";
|
||||
|
||||
interface FilterOption {
|
||||
id: string;
|
||||
label: string;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
interface MultiSelectFilterProps {
|
||||
title: string;
|
||||
options: FilterOption[];
|
||||
selectedValues: string[];
|
||||
onChange: (selectedValues: string[]) => void;
|
||||
placeholder?: string;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function MultiSelectFilter({
|
||||
title,
|
||||
options,
|
||||
selectedValues,
|
||||
onChange,
|
||||
placeholder = "Sélectionner...",
|
||||
icon = <Filter className="h-4 w-4" />,
|
||||
}: MultiSelectFilterProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleToggle = (value: string) => {
|
||||
const newSelected = selectedValues.includes(value)
|
||||
? selectedValues.filter((v) => v !== value)
|
||||
: [...selectedValues, value];
|
||||
onChange(newSelected);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedValues.length === options.length) {
|
||||
onChange([]);
|
||||
} else {
|
||||
onChange(options.map((opt) => opt.id));
|
||||
}
|
||||
};
|
||||
|
||||
const clearSelection = () => {
|
||||
onChange([]);
|
||||
};
|
||||
|
||||
const getDisplayText = () => {
|
||||
if (selectedValues.length === 0) return placeholder;
|
||||
if (selectedValues.length === 1) {
|
||||
const option = options.find((opt) => opt.id === selectedValues[0]);
|
||||
return option?.label || selectedValues[0];
|
||||
}
|
||||
return `${selectedValues.length} sélectionné(s)`;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between h-auto min-h-10 p-3 bg-white/5 border-white/20 text-white hover:bg-white/10 hover:border-white/30"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<span className="font-medium text-sm text-slate-300">
|
||||
{title}:
|
||||
</span>
|
||||
<span className="text-sm text-slate-400">{getDisplayText()}</span>
|
||||
</div>
|
||||
<ChevronDown className="h-4 w-4 text-slate-400" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent
|
||||
className="w-80 p-0 bg-slate-800 border-white/20"
|
||||
align="start"
|
||||
>
|
||||
<div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl">
|
||||
<div className="p-4 space-y-3">
|
||||
{/* Header avec actions */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium text-sm text-white">{title}</span>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleSelectAll}
|
||||
className="text-xs h-7 text-slate-400 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
{selectedValues.length === options.length
|
||||
? "Tout déselectionner"
|
||||
: "Tout sélectionner"}
|
||||
</Button>
|
||||
{selectedValues.length > 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={clearSelection}
|
||||
className="text-xs h-7 text-slate-400 hover:text-white hover:bg-white/10"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Options */}
|
||||
<div className="space-y-2 max-h-60 overflow-y-auto">
|
||||
{options.map((option) => (
|
||||
<div
|
||||
key={option.id}
|
||||
className="flex items-center space-x-2 p-2 rounded-lg hover:bg-white/10 cursor-pointer transition-colors"
|
||||
onClick={() => handleToggle(option.id)}
|
||||
>
|
||||
<Checkbox
|
||||
id={option.id}
|
||||
checked={selectedValues.includes(option.id)}
|
||||
onChange={() => {}} // Géré par le onClick du div parent
|
||||
/>
|
||||
<label
|
||||
htmlFor={option.id}
|
||||
className="text-sm flex-1 cursor-pointer flex items-center justify-between text-white"
|
||||
>
|
||||
<span>{option.label}</span>
|
||||
{option.count !== undefined && (
|
||||
<div className="px-2 py-1 bg-blue-500/20 border border-blue-500/30 rounded">
|
||||
<span className="text-xs text-blue-300 font-medium">
|
||||
{option.count}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Résumé de la sélection */}
|
||||
{selectedValues.length > 0 && (
|
||||
<div className="pt-3 border-t border-white/10">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{selectedValues.slice(0, 3).map((value) => {
|
||||
const option = options.find((opt) => opt.id === value);
|
||||
return (
|
||||
<div
|
||||
key={value}
|
||||
className="px-2 py-1 bg-green-500/20 border border-green-500/30 rounded"
|
||||
>
|
||||
<span className="text-xs text-green-300 font-medium">
|
||||
{option?.label || value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{selectedValues.length > 3 && (
|
||||
<div className="px-2 py-1 bg-slate-500/20 border border-slate-500/30 rounded">
|
||||
<span className="text-xs text-slate-300 font-medium">
|
||||
+{selectedValues.length - 3}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user