Fix few issues

frontend/src/pages/app/settings/team/TeamPage.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Users, Plus, Search, Shield, Trash2, Crown, UserCheck } from 'lucide-react';
-import { Button, Card, Input, StatusCard, getStatusColor, StatsGrid } from '../../../../components/ui';
+import { Button, StatusCard, getStatusColor, StatsGrid, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
 import AddTeamMemberModal from '../../../../components/domain/team/AddTeamMemberModal';
 import { PageHeader } from '../../../../components/layout';
 import { useTeamMembers, useAddTeamMember, useRemoveTeamMember, useUpdateMemberRole, useTenantAccess } from '../../../../api/hooks/tenant';
@@ -345,38 +345,27 @@ const TeamPage: React.FC = () => {
         gap="md"
       />
 
-      {/* Filters and Search */}
-      <Card className="p-6">
-        <div className="flex flex-col sm:flex-row gap-4">
-          <div className="flex-1">
-            <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[var(--text-tertiary)] h-4 w-4" />
-              <Input
-                placeholder="Buscar miembros del equipo..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10"
-              />
-            </div>
-          </div>
-          
-          <div className="flex gap-2 flex-wrap">
-            {roles.map((role) => (
-              <button
-                key={role.value}
-                onClick={() => setSelectedRole(role.value)}
-                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
-                  selectedRole === role.value
-                    ? 'bg-blue-600 text-white'
-                    : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-quaternary)]'
-                }`}
-              >
-                {role.label} ({role.count})
-              </button>
-            ))}
-          </div>
-        </div>
-      </Card>
+      {/* Search and Filter Controls */}
+      <SearchAndFilter
+        searchValue={searchTerm}
+        onSearchChange={setSearchTerm}
+        searchPlaceholder="Buscar miembros del equipo..."
+        filters={[
+          {
+            key: 'role',
+            label: 'Rol',
+            type: 'buttons',
+            value: selectedRole,
+            onChange: (value) => setSelectedRole(value as string),
+            multiple: false,
+            options: roles.map(role => ({
+              value: role.value,
+              label: role.label,
+              count: role.count
+            }))
+          }
+        ] as FilterConfig[]}
+      />
 
       {/* Add Member Button */}
       {canManageTeam && filteredMembers.length > 0 && (