diff --git a/src/pages/members/search-member/blocks/FilterCard.tsx b/src/pages/members/search-member/blocks/FilterCard.tsx index 782793b..f635ee1 100644 --- a/src/pages/members/search-member/blocks/FilterCard.tsx +++ b/src/pages/members/search-member/blocks/FilterCard.tsx @@ -1,5 +1,6 @@ import { Input } from '@/components/ui/input'; import { Button } from '@/components/ui/button'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { useState } from 'react'; const CustomerFilterForm = ({ @@ -9,55 +10,69 @@ const CustomerFilterForm = ({ onFilter: (filters: { username?: string; msisdn?: string }) => void; onReset?: () => void; }) => { - const [username, setUsername] = useState(''); - const [msisdn, setMsisdn] = useState(''); + const [searchType, setSearchType] = useState<'username' | 'msisdn'>('username'); + const [searchValue, setSearchValue] = useState(''); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (!username.trim() && !msisdn.trim()) { - alert('Please fill at least one search field'); + if (!searchValue.trim()) { + alert('Please fill the search field'); return; } - onFilter({ username, msisdn }); + const filters = searchType === 'username' + ? { username: searchValue, msisdn: '' } + : { username: '', msisdn: searchValue }; + + onFilter(filters); }; const handleReset = () => { - setUsername(''); - setMsisdn(''); + setSearchType('username'); + setSearchValue(''); if (onReset) { onReset(); } }; + const getPlaceholder = () => { + return searchType === 'username' ? 'Enter username' : 'Enter phone number'; + }; + + const getLabel = () => { + return searchType === 'username' ? 'Username' : 'Phone Number'; + }; + return (