diff --git a/src/components/generic/GroupMultiSelect.jsx b/src/components/generic/GroupMultiSelect.jsx index d35a970..850fd23 100644 --- a/src/components/generic/GroupMultiSelect.jsx +++ b/src/components/generic/GroupMultiSelect.jsx @@ -20,7 +20,9 @@ import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { cn } from '@/lib/utils'; -import { Check, ChevronsUpDown, X, Users } from 'lucide-react'; +import { Check, ChevronsUpDown, X, Users, ChevronLeft, ChevronRight } from 'lucide-react'; + +const PAGE_SIZE = 5; export default function GroupMultiSelect({ value = [], @@ -31,6 +33,7 @@ export default function GroupMultiSelect({ }) { const [open, setOpen] = useState(false); const [search, setSearch] = useState(''); + const [page, setPage] = useState(1); const [allGroups, setAllGroups] = useState(groupsProp ?? []); const [loadingGroups, setLoadingGroups] = useState(!groupsProp); const [dropdownStyle, setDropdownStyle] = useState({}); @@ -109,6 +112,17 @@ export default function GroupMultiSelect({ const filteredIds = filtered.map((g) => g.group_id); const allFilteredSelected = filteredIds.length > 0 && filteredIds.every((id) => value.includes(id)); + // ── Pagination ──────────────────────────────────────────────────────────── + const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)); + const safePage = Math.min(page, totalPages); + const paginated = filtered.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE); + + // Reset to page 1 whenever the search term changes + const handleSearchChange = (e) => { + setSearch(e.target.value); + setPage(1); + }; + const toggle = (groupId) => onChange(value.includes(groupId) ? value.filter((id) => id !== groupId) @@ -141,7 +155,7 @@ export default function GroupMultiSelect({ setSearch(e.target.value)} + onChange={handleSearchChange} placeholder="Search groups…" className="h-8 text-sm" /> @@ -173,7 +187,7 @@ export default function GroupMultiSelect({ )} {/* Options */} -