org team management section in org Settings module

src/pages/owner/OrgSettings.jsx

@@ -5,12 +5,14 @@ import {
     Search, Check, X, Plus, Trash2, Edit3, Save, User, Crown,
     ToggleLeft, ToggleRight, Info, ArrowRight, Mail, Phone, MapPin, Clock,
     AlertTriangle, UserPlus, UserMinus, Eye, Pencil, Lock,
-    RotateCcw, Filter, CheckSquare, Square, BarChart3, History
+    RotateCcw, Filter, CheckSquare, Square, BarChart3, History, UsersRound
 } from 'lucide-react';
 import { useMockStore } from '../../data/mockStore';
 import { useAuth } from '../../context/AuthContext';
+import { usePermissions } from '../../hooks/usePermissions';
 import { toast } from 'sonner';
 import { computeRolePermissionStats } from '../../utils/permissions';
+import OrgTeamManagement from '../../components/owner/OrgTeamManagement';
 
 const COMMISSION_TYPES = [
     { value: 'flat', label: 'Flat Amount', hint: 'Fixed dollar amount' },
@@ -984,9 +986,11 @@ const UserOverridesSection = ({ members, roles, orgDefaults, roleOverrides, user
 const OrgSettings = () => {
     const { user } = useAuth();
     const store = useMockStore();
+    const { orgRoleKey } = usePermissions();
 
     const [openSections, setOpenSections] = useState({
         org: true,
+        team: false,
         roles: false,
         access: false,
         commission: false,
@@ -1009,6 +1013,29 @@ const OrgSettings = () => {
                 />
             ),
         },
+        {
+            id: 'team',
+            icon: UsersRound,
+            title: 'Organization Team Management',
+            subtitle: `${store.orgMembers.length} members — invite, manage roles, and administer your team`,
+            color: '#8b5cf6',
+            content: (
+                <OrgTeamManagement
+                    members={store.orgMembers}
+                    roles={store.orgRoles}
+                    users={store.users}
+                    permissions={store.orgPermissions}
+                    permissionModules={store.PERMISSION_MODULES}
+                    currentUserRoleKey={orgRoleKey}
+                    onAddMember={store.addOrgMember}
+                    onUpdateMember={store.updateOrgMember}
+                    onRemoveMember={store.removeOrgMember}
+                    onSuspendMember={store.suspendOrgMember}
+                    onReactivateMember={store.reactivateOrgMember}
+                    onResendInvite={store.resendOrgInvite}
+                />
+            ),
+        },
         {
             id: 'roles',
             icon: Crown,
@@ -1093,11 +1120,12 @@ const OrgSettings = () => {
                 </div>
 
                 {/* Quick Stats */}
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6">
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mt-6">
                     {[
                         { label: 'Roles', value: store.orgRoles.length, color: '#fda913' },
                         { label: 'Members', value: store.orgMembers.length, color: '#3b82f6' },
-                        { label: 'Modules', value: Object.keys(store.PERMISSION_MODULES).length, color: '#10b981' },
+                        { label: 'Active', value: store.orgMembers.filter(m => m.status === 'active').length, color: '#10b981' },
+                        { label: 'Modules', value: Object.keys(store.PERMISSION_MODULES).length, color: '#8b5cf6' },
                         { label: 'Commission Overrides', value: store.roleCommissionOverrides.length + store.userCommissionOverrides.length, color: '#a855f7' },
                     ].map(stat => (
                         <div key={stat.label} className="px-4 py-3 rounded-xl bg-white dark:bg-white/[0.03] border border-zinc-200 dark:border-white/5 shadow-sm dark:shadow-none">