"use client"; import React, { useState, useRef, useEffect } from "react"; import type { WarehouseRecord } from "@/lib/api"; /** * WarehouseMultiSelect Component * * A multi-select dropdown for choosing warehouses in the Stock Movement Sheet modal. * Features checkbox-based selection with visual indicators, "Select All" and "Clear All" functionality. * * Design matches the premium patterns from WarehouseEntryModal. */ // Brand colors matching WarehouseEntryModal const BRAND = "#4c6fff"; const BRAND_GRADIENT = "linear-gradient(135deg, #4c6fff 0%, #5b7cff 100%)"; interface WarehouseMultiSelectProps { warehouses: WarehouseRecord[]; selected: string[]; // Warehouse IDs onChange: (selected: string[]) => void; } export default function WarehouseMultiSelect({ warehouses, selected, onChange, }: WarehouseMultiSelectProps) { const [isOpen, setIsOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 }); const dropdownRef = useRef(null); const buttonRef = useRef(null); // Close dropdown when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setIsOpen(false); } } if (isOpen) { document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); } }, [isOpen]); // Update dropdown position when it opens useEffect(() => { if (isOpen && buttonRef.current) { const rect = buttonRef.current.getBoundingClientRect(); setDropdownPosition({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX, width: rect.width, }); } }, [isOpen]); function toggleWarehouse(warehouseId: string) { if (selected.includes(warehouseId)) { onChange(selected.filter(id => id !== warehouseId)); } else { onChange([...selected, warehouseId]); } } function selectAll() { // Select all filtered warehouses const filteredIds = filteredWarehouses.map(w => w._id); const newSelected = [...new Set([...selected, ...filteredIds])]; onChange(newSelected); } function clearAll() { // Clear all filtered warehouses const filteredIds = new Set(filteredWarehouses.map(w => w._id)); const newSelected = selected.filter(id => !filteredIds.has(id)); onChange(newSelected); } // Filter warehouses based on search query const filteredWarehouses = warehouses.filter(w => w.name.toLowerCase().includes(searchQuery.toLowerCase()) ); // Sort: selected warehouses first (even if filtered out), then filtered unselected const selectedWarehouses = warehouses.filter(w => selected.includes(w._id)); const unselectedFilteredWarehouses = filteredWarehouses.filter(w => !selected.includes(w._id)); const displayWarehouses = [...selectedWarehouses, ...unselectedFilteredWarehouses]; const selectedCount = selected.length; const allFilteredSelected = filteredWarehouses.length > 0 && filteredWarehouses.every(w => selected.includes(w._id)); return (
{/* Dropdown Button */} {/* Dropdown Panel */} {isOpen && (
{/* Header with Select All / Clear All */}
{/* Search Input */}
{/* Search Icon */} setSearchQuery(e.target.value)} placeholder="Search warehouses..." style={{ width: "100%", padding: "9px 36px 9px 38px", borderRadius: 7, border: "1.5px solid rgba(0,0,0,0.12)", fontSize: "0.85rem", outline: "none", transition: "border-color 0.15s ease", boxSizing: "border-box", }} onFocus={(e) => { e.currentTarget.style.borderColor = BRAND; }} onBlur={(e) => { e.currentTarget.style.borderColor = "rgba(0,0,0,0.12)"; }} /> {/* Clear Search Button */} {searchQuery && ( )}
{/* Warehouse List */}
{displayWarehouses.length === 0 ? (
No warehouses found
) : ( displayWarehouses.map((warehouse) => { const isSelected = selected.includes(warehouse._id); const isFilteredOut = searchQuery && !warehouse.name.toLowerCase().includes(searchQuery.toLowerCase()); return ( ); }) )}
)}
); }