refactor: simplify listing type selection by dynamically mapping agent types instead of hardcoded categories

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

@@ -379,7 +379,7 @@ function ProfilesPageContent() {
   const nameFromUrl = searchParams.get('name') || '';
   const locationFromUrl = searchParams.get('location') || '';
   const filtersFromUrl = searchParams.get('filters') || '';
-  const listingFromUrl = searchParams.get('listing') as 'agents' | 'lenders' | null;
+  const listingFromUrl = searchParams.get('listing');
 
   // State for API data
   const [agents, setAgents] = useState<PublicAgentProfile[]>([]);
@@ -395,7 +395,6 @@ function ProfilesPageContent() {
   // State for search and filters - initialize from URL params
   const [searchQuery, setSearchQuery] = useState(nameFromUrl);
   const [activeTypeId, setActiveTypeId] = useState<string | null>(typeFromUrl);
-  const [listingType, setListingType] = useState<'agents' | 'lenders'>(listingFromUrl || 'agents');
   const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
   const [filters, setFilters] = useState<FilterState>(() => {
     if (filtersFromUrl) {
@@ -428,10 +427,10 @@ function ProfilesPageContent() {
         const types = await agentsService.getAgentTypes();
         setAgentTypes(types);
 
-        // If listing param is set, auto-select the matching agent type
+        // If listing param is set, auto-select the matching agent type by name (case-insensitive)
         if (listingFromUrl && !typeFromUrl) {
-          const typeName = listingFromUrl === 'lenders' ? 'Lender' : 'Professional';
+          const target = listingFromUrl.toLowerCase().replace(/s$/, '');
-          const matchedType = types.find((t: AgentType) => t.name === typeName);
+          const matchedType = types.find((t: AgentType) => t.name.toLowerCase() === target);
           if (matchedType) {
             setActiveTypeId(matchedType.id);
           }
@@ -575,24 +574,6 @@ function ProfilesPageContent() {
   const handleTypeChange = (typeId: string | null) => {
     setActiveTypeId(typeId);
     setCurrentPage(1);
-    // Sync listing type sidebar with agent type tab selection
-    if (typeId) {
-      const matchedType = agentTypes.find(t => t.id === typeId);
-      if (matchedType?.name === 'Lender') {
-        setListingType('lenders');
-      } else {
-        setListingType('agents');
-      }
-    }
-  };
-
-  const handleListingTypeChange = (type: 'agents' | 'lenders') => {
-    setListingType(type);
-    // Map listing type to the corresponding agent type and filter
-    const typeName = type === 'agents' ? 'Professional' : 'Lender';
-    const matchedType = agentTypes.find(t => t.name === typeName);
-    setActiveTypeId(matchedType?.id || null);
-    setCurrentPage(1);
   };
 
   // Get filter field by slug for sidebar
@@ -603,6 +584,16 @@ function ProfilesPageContent() {
   // Define which fields to show in sidebar (main filter categories)
   const sidebarFilterSlugs = ['client_specialization', 'loan_type', 'property_type', 'price_point'];
 
+  // Pluralize agent type names for sidebar display (e.g. "Agent" → "Agents", "Property Manager" → "Property Managers")
+  const pluralize = (name: string): string => {
+    const trimmed = name.trim();
+    if (!trimmed) return trimmed;
+    const lower = trimmed.toLowerCase();
+    if (lower.endsWith('s')) return trimmed;
+    if (lower.endsWith('y')) return `${trimmed.slice(0, -1)}ies`;
+    return `${trimmed}s`;
+  };
+
   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">
@@ -615,19 +606,20 @@ function ProfilesPageContent() {
               <h2 className="font-fractul font-bold text-[14px] text-[#00293d] mb-3">Listing Type</h2>
               <div className="space-y-2">
                 <button
-                  onClick={() => handleListingTypeChange('agents')}
+                  onClick={() => handleTypeChange(null)}
-                  className={`block font-serif text-[14px] ${listingType === 'agents' ? 'text-[#00293d] font-medium' : 'text-[#00293d]/70'
+                  className={`block font-serif text-[14px] ${activeTypeId === null ? 'text-[#00293d] font-medium' : 'text-[#00293d]/70'}`}
-                    }`}
                 >
-                  Agents
+                  All Types
-                </button>
-                <button
-                  onClick={() => handleListingTypeChange('lenders')}
-                  className={`block font-serif text-[14px] ${listingType === 'lenders' ? 'text-[#00293d] font-medium' : 'text-[#00293d]/70'
-                    }`}
-                >
-                  Lenders
                 </button>
+                {agentTypes.map((type) => (
+                  <button
+                    key={type.id}
+                    onClick={() => handleTypeChange(type.id)}
+                    className={`block font-serif text-[14px] ${activeTypeId === type.id ? 'text-[#00293d] font-medium' : 'text-[#00293d]/70'}`}
+                  >
+                    {pluralize(type.name)}
+                  </button>
+                ))}
               </div>
             </div>