feat: encapsulate profile filtering UI into a new FilterModal component.

src/app/(user)/user/profiles/page.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useSearchParams } from 'next/navigation';
 import Image from 'next/image';
 import Link from 'next/link';
+import { FilterModal, FilterState, clientSpecializations, loanTypes, propertyTypes, pricePoints } from '@/components/profiles/FilterModal';
 
 // Sample profile data
 const profilesData = [
@@ -74,25 +75,6 @@ const profilesData = [
   },
 ];
 
-// Filter options
-const clientSpecializations = [
-  'Buyers', 'Sellers', 'Divorce', 'First time buyers', 'First time sellers', 'Estate'
-];
-
-const loanTypes = [
-  'Conventional', 'FHA', 'VA', 'USDA', 'Downpayment Assistance Programs'
-];
-
-const propertyTypes = [
-  'SFR', 'Townhome', 'condo', 'Manufactured', 'Apartment / Multifamily',
-  'Rural', 'Luxury', 'Retirement', 'Investment/ Income Producing',
-  'Duplex / Tri-plex / 4-plex', 'Historical', 'Mountain Property'
-];
-
-const pricePoints = [
-  'Under $100K', '$100K - $300K', '$300K - $500K', '$500K - $1M', '$1M and above'
-];
-
 const categoryTabs = [
   { id: 'residential', label: 'Residential' },
   { id: 'analytics', label: 'Analytics' },
@@ -271,22 +253,41 @@ export default function ProfilesPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [activeTab, setActiveTab] = useState('residential');
   const [listingType, setListingType] = useState<'agents' | 'lenders'>('agents');
-  const [filters, setFilters] = useState({
-    clientSpecialization: [] as string[],
-    loanType: [] as string[],
-    propertyType: [] as string[],
-    pricePoint: [] as string[],
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
+  const [filters, setFilters] = useState<FilterState>({
+    clientSpecialization: [],
+    loanType: [],
+    propertyType: [],
+    pricePoint: [],
+    specialInterests: [],
+    popularFilters: [],
   });
 
-  const toggleFilter = (category: keyof typeof filters, option: string) => {
+  const toggleFilter = (category: string, option: string) => {
     setFilters(prev => ({
       ...prev,
-      [category]: prev[category].includes(option)
-        ? prev[category].filter(o => o !== option)
-        : [...prev[category], option]
+      [category]: (prev[category as keyof FilterState] || []).includes(option)
+        ? (prev[category as keyof FilterState] || []).filter((o: string) => o !== option)
+        : [...(prev[category as keyof FilterState] || []), option]
     }));
   };
 
+  const clearAllFilters = () => {
+    setFilters({
+      clientSpecialization: [],
+      loanType: [],
+      propertyType: [],
+      pricePoint: [],
+      specialInterests: [],
+      popularFilters: [],
+    });
+  };
+
+  const applyFilters = () => {
+    setIsFilterModalOpen(false);
+    // Apply filter logic here
+  };
+
   return (
     <div className="min-h-screen bg-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
@@ -320,7 +321,10 @@ export default function ProfilesPage() {
             <div>
               <div className="flex items-center justify-between mb-4">
                 <h2 className="font-fractul font-bold text-[14px] text-[#00293d]">Filters</h2>
-                <button className="text-[#00293d]">
+                <button
+                  onClick={() => setIsFilterModalOpen(true)}
+                  className="text-[#00293d] hover:opacity-70"
+                >
                   <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                     <path d="M3 6H21M7 12H17M11 18H13" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                   </svg>
@@ -404,6 +408,16 @@ export default function ProfilesPage() {
           </div>
         </div>
       </div>
+
+      {/* Filter Modal */}
+      <FilterModal
+        isOpen={isFilterModalOpen}
+        onClose={() => setIsFilterModalOpen(false)}
+        filters={filters}
+        onToggleFilter={toggleFilter}
+        onClearAll={clearAllFilters}
+        onApply={applyFilters}
+      />
     </div>
   );
 }