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({
+  const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-    clientSpecialization: [] as string[],
+  const [filters, setFilters] = useState<FilterState>({
-    loanType: [] as string[],
+    clientSpecialization: [],
-    propertyType: [] as string[],
+    loanType: [],
-    pricePoint: [] as string[],
+    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)
+      [category]: (prev[category as keyof FilterState] || []).includes(option)
-        ? prev[category].filter(o => o !== option)
+        ? (prev[category as keyof FilterState] || []).filter((o: string) => o !== option)
-        : [...prev[category], 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>
   );
 }

src/components/profiles/FilterModal.tsx

@@ -0,0 +1,318 @@
+'use client';
+
+import { useState } from 'react';
+
+// Filter options data
+export const clientSpecializations = [
+  'Buyers', 'Sellers', 'Divorce', 'First time buyers', 'First time sellers', 'Estate'
+];
+
+export const loanTypes = [
+  'Conventional', 'FHA', 'VA', 'USDA', 'Downpayment Assistance Programs'
+];
+
+export const propertyTypes = [
+  'SFR', 'Townhome', 'condo', 'Manufactured', 'Apartment / Multifamily',
+  'Rural', 'Luxury', 'Retirement', 'Investment/ Income Producing',
+  'Duplex / Tri-plex / 4-plex', 'Historical', 'Mountain Property'
+];
+
+export const pricePoints = [
+  'Under $100K', '$100K - $300K', '$300K - $500K', '$500K - $1M', '$1M and above'
+];
+
+export const specialInterests = [
+  'Workshop / Trade / Craftspace', 'Gardening/Landscape', 'Boating',
+  'Automotive', 'Hobby farm', 'Home theater'
+];
+
+export const popularFilters = [
+  'Sellers Agent', 'First-Time Buyer', 'Buyers Agent', 'Buyers Agent',
+  'Buyers Agent', 'First-Time Seller', 'Buyers Agent'
+];
+
+export interface FilterState {
+  clientSpecialization: string[];
+  loanType: string[];
+  propertyType: string[];
+  pricePoint: string[];
+  specialInterests: string[];
+  popularFilters: string[];
+}
+
+interface FilterModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  filters: FilterState;
+  onToggleFilter: (category: string, option: string) => void;
+  onClearAll: () => void;
+  onApply: () => void;
+}
+
+export function FilterModal({ isOpen, onClose, filters, onToggleFilter, onClearAll, onApply }: FilterModalProps) {
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({
+    popularFilters: true,
+    clientSpecialization: true,
+    loanType: true,
+    propertyType: true,
+    specialInterests: true,
+    pricePoint: true,
+  });
+
+  const toggleSection = (section: string) => {
+    setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/30" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-[20px] w-[600px] max-h-[90vh] overflow-hidden shadow-xl">
+        {/* Header */}
+        <div className="sticky top-0 bg-white px-8 py-5 border-b border-[#d9d9d9] flex items-center justify-between z-10">
+          <h2 className="font-fractul font-bold text-[25px] text-[#00293d]">Filters</h2>
+          <button onClick={onClose} className="text-[#00293d] hover:opacity-70">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+              <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          </button>
+        </div>
+
+        {/* Scrollable Content */}
+        <div className="overflow-y-auto max-h-[calc(90vh-180px)] px-8 py-5">
+          {/* Popular Filters */}
+          <div className="mb-6">
+            <button
+              onClick={() => toggleSection('popularFilters')}
+              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+            >
+              Popular Filters
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.popularFilters ? 'rotate-180' : ''}`}>
+                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            {expandedSections.popularFilters && (
+              <div className="flex flex-wrap gap-2">
+                {popularFilters.map((filter, index) => (
+                  <button
+                    key={index}
+                    onClick={() => onToggleFilter('popularFilters', filter)}
+                    className={`px-4 py-2.5 rounded-[15px] border border-[#00293d] font-serif text-[14px] transition-colors ${
+                      filters.popularFilters?.includes(filter)
+                        ? 'bg-[#00293d] text-white'
+                        : 'bg-white text-[#00293d] hover:bg-[#00293d]/5'
+                    }`}
+                  >
+                    {filter}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="border-t border-[#d9d9d9] my-4" />
+
+          {/* Client Specialization */}
+          <div className="mb-6">
+            <button
+              onClick={() => toggleSection('clientSpecialization')}
+              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+            >
+              Client Specialization
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.clientSpecialization ? 'rotate-180' : ''}`}>
+                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            {expandedSections.clientSpecialization && (
+              <>
+                <div className="grid grid-cols-4 gap-x-4 gap-y-3">
+                  {clientSpecializations.slice(0, 5).map((option) => (
+                    <label key={option} className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={filters.clientSpecialization.includes(option)}
+                        onChange={() => onToggleFilter('clientSpecialization', option)}
+                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
+                      />
+                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
+                    </label>
+                  ))}
+                </div>
+                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
+                  Show More
+                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className="border-t border-[#d9d9d9] my-4" />
+
+          {/* Loan Type */}
+          <div className="mb-6">
+            <button
+              onClick={() => toggleSection('loanType')}
+              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+            >
+              Loan Type
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.loanType ? 'rotate-180' : ''}`}>
+                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            {expandedSections.loanType && (
+              <>
+                <div className="grid grid-cols-4 gap-x-4 gap-y-3">
+                  {loanTypes.map((option) => (
+                    <label key={option} className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={filters.loanType.includes(option)}
+                        onChange={() => onToggleFilter('loanType', option)}
+                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
+                      />
+                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
+                    </label>
+                  ))}
+                </div>
+                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
+                  Show More
+                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className="border-t border-[#d9d9d9] my-4" />
+
+          {/* Property Type */}
+          <div className="mb-6">
+            <button
+              onClick={() => toggleSection('propertyType')}
+              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+            >
+              Property Type
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.propertyType ? 'rotate-180' : ''}`}>
+                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            {expandedSections.propertyType && (
+              <>
+                <div className="grid grid-cols-3 gap-x-4 gap-y-3">
+                  {propertyTypes.map((option) => (
+                    <label key={option} className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={filters.propertyType.includes(option)}
+                        onChange={() => onToggleFilter('propertyType', option)}
+                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
+                      />
+                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
+                    </label>
+                  ))}
+                </div>
+                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
+                  Show More
+                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className="border-t border-[#d9d9d9] my-4" />
+
+          {/* Special Interests and Hobbies */}
+          <div className="mb-6">
+            <button
+              onClick={() => toggleSection('specialInterests')}
+              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+            >
+              Special Interests and Hobbies
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.specialInterests ? 'rotate-180' : ''}`}>
+                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            {expandedSections.specialInterests && (
+              <>
+                <div className="grid grid-cols-3 gap-x-4 gap-y-3">
+                  {specialInterests.map((option) => (
+                    <label key={option} className="flex items-center gap-2 cursor-pointer">
+                      <input
+                        type="checkbox"
+                        checked={filters.specialInterests?.includes(option) || false}
+                        onChange={() => onToggleFilter('specialInterests', option)}
+                        className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
+                      />
+                      <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
+                    </label>
+                  ))}
+                </div>
+                <button className="mt-3 font-serif text-[15px] text-[#00293d] font-light flex items-center gap-1">
+                  Show More
+                  <svg width="10" height="10" viewBox="0 0 12 12" fill="none">
+                    <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </button>
+              </>
+            )}
+          </div>
+
+          <div className="border-t border-[#d9d9d9] my-4" />
+
+          {/* Price Point */}
+          <div className="mb-6">
+            <button
+              onClick={() => toggleSection('pricePoint')}
+              className="flex items-center gap-2 font-fractul text-[20px] text-[#00293d] mb-4"
+            >
+              Price Point
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform ${expandedSections.pricePoint ? 'rotate-180' : ''}`}>
+                <path d="M2 4L6 8L10 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+              </svg>
+            </button>
+            {expandedSections.pricePoint && (
+              <div className="grid grid-cols-3 gap-x-4 gap-y-3">
+                {pricePoints.map((option) => (
+                  <label key={option} className="flex items-center gap-2 cursor-pointer">
+                    <input
+                      type="checkbox"
+                      checked={filters.pricePoint.includes(option)}
+                      onChange={() => onToggleFilter('pricePoint', option)}
+                      className="w-[17px] h-[17px] rounded-[5px] border-[#00293d]/20 text-[#e58625] focus:ring-[#e58625]"
+                    />
+                    <span className="font-serif text-[15px] text-[#00293d]">{option}</span>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="sticky bottom-0 bg-white px-8 py-5 border-t border-[#d9d9d9] flex items-center justify-between">
+          <button
+            onClick={onClearAll}
+            className="px-6 py-3 rounded-[15px] border border-[#00293d] font-fractul font-bold text-[14px] text-[#00293d] hover:bg-[#00293d]/5 transition-colors"
+          >
+            Clear all Filters
+          </button>
+          <button
+            onClick={onApply}
+            className="px-8 py-3 rounded-[15px] bg-[#e58625] hover:bg-[#d47720] font-fractul font-bold text-[14px] text-[#00293d] transition-colors"
+          >
+            Apply Filters
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}