"use client"; import React, { useState, useMemo } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Filter, X, Check, Package, ShoppingBag, ArrowRight, DollarSign } from "lucide-react"; // --- Mock Data --- type Order = { id: string; customer: string; category: string; date: string; amount: number; status: "Completed" | "Processing" | "Cancelled"; }; const ordersData: Order[] = [ { id: "ORD-701", customer: "Emma Thompson", category: "Electronics", date: "2026-10-24", amount: 1299.00, status: "Completed" }, { id: "ORD-702", customer: "Liam Neeson", category: "Apparel", date: "2026-10-24", amount: 145.50, status: "Processing" }, { id: "ORD-704", customer: "Mason Mount", category: "Electronics", date: "2026-10-22", amount: 2499.00, status: "Processing" }, { id: "ORD-705", customer: "Isabella Rossi", category: "Beauty", date: "2026-10-21", amount: 340.00, status: "Cancelled" }, { id: "ORD-707", customer: "Mia Wong", category: "Electronics", date: "2026-10-19", amount: 850.00, status: "Completed" }, ]; const CATEGORIES = ["Electronics", "Apparel", "Home & Garden", "Beauty", "Sports"]; const STATUSES = ["All", "Completed", "Processing", "Cancelled"]; export default function MultiFilterFloatingPanel() { const [isPanelOpen, setIsPanelOpen] = useState(false); const [statusFilter, setStatusFilter] = useState("All"); const [priceRange, setPriceRange] = useState({ min: "", max: "" }); const [selectedCategories, setSelectedCategories] = useState([]); const activeFiltersCount = useMemo(() => { let count = 0; if (statusFilter !== "All") count++; if (priceRange.min !== "" || priceRange.max !== "") count++; if (selectedCategories.length > 0) count++; return count; }, [statusFilter, priceRange, selectedCategories]); const filteredOrders = useMemo(() => { return ordersData.filter(order => { if (statusFilter !== "All" && order.status !== statusFilter) return false; const min = priceRange.min === "" ? 0 : Number(priceRange.min); const max = priceRange.max === "" ? Infinity : Number(priceRange.max); if (order.amount < min || order.amount > max) return false; if (selectedCategories.length > 0 && !selectedCategories.includes(order.category)) return false; return true; }); }, [statusFilter, priceRange, selectedCategories]); const toggleCategory = (cat: string) => { setSelectedCategories(prev => prev.includes(cat) ? prev.filter(c => c !== cat) : [...prev, cat] ); }; const getStatusColor = (status: string) => { switch(status) { case "Completed": return "text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20"; case "Processing": return "text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-500/10 border-violet-200 dark:border-violet-500/20"; case "Cancelled": return "text-zinc-500 dark:text-zinc-400 bg-zinc-100 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"; default: return "text-zinc-600 dark:text-zinc-400 bg-zinc-50 dark:bg-zinc-800 border-zinc-200 dark:border-zinc-700"; } }; return ( /* Contenedor relativo y con overflow-hidden para encerrar el panel de filtros */

{/* Header */}

Orders Overview

Manage transactions and apply filters directly within this container.

{/* Table */}

{filteredOrders.map((order) => ( ))}

Order ID	Customer	Category	Amount	Status
{order.id}	{order.customer}	{order.category}	${order.amount.toFixed(2)}	{order.status}

{/* --- PANEL DE FILTROS (CONTAINED OVERLAY) --- */} {isPanelOpen && ( <> {/* Backdrop: Absolute to parent container, not fixed to screen */} setIsPanelOpen(false)} className="absolute inset-0 bg-zinc-950/40 backdrop-blur-sm z-40" /> {/* Sliding Panel: Absolute to parent container */}

Filters

{/* Status Selection */}

Status

{STATUSES.map(status => ( ))}

{/* Price Range */}

Price Range

setPriceRange(prev => ({ ...prev, min: e.target.value }))} className="w-full pl-8 pr-3 py-2 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-xs font-bold focus:outline-none focus:ring-1 focus:ring-violet-500" />

setPriceRange(prev => ({ ...prev, max: e.target.value }))} className="w-full pl-8 pr-3 py-2 bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 rounded-lg text-xs font-bold focus:outline-none focus:ring-1 focus:ring-violet-500" />

{/* Categories */}