diff --git a/src/components/owner/TeamManagementPanel.jsx b/src/components/owner/TeamManagementPanel.jsx
index 0702fe4..48fa5ac 100644
--- a/src/components/owner/TeamManagementPanel.jsx
+++ b/src/components/owner/TeamManagementPanel.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useMemo, useEffect, useRef } from 'react';
+import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import {
UserPlus, UserMinus, Shield, ChevronDown, Search, Mail,
X as XIcon, Users, Briefcase, DollarSign, MoreVertical,
- Check, Clock, Crown, ChevronUp
+ Check, Clock, Crown, ChevronUp, ToggleLeft, ToggleRight
} from 'lucide-react';
const JOB_ROLES = [
@@ -100,6 +100,45 @@ const TeamManagementPanel = ({
const menuRef = useRef(null);
+ // ── Commission toggle default ─────────────────────────────────────────
+ // Reads commissionEnabled directly from the member data in mockStore.
+ // Falls back to true if a jobCommission override is explicitly set.
+ const getMemberCommissionDefault = useCallback((member) => {
+ if (typeof member.commissionEnabled === 'boolean') return member.commissionEnabled;
+ return !!member.jobCommission; // fallback for legacy data without the field
+ }, []);
+
+ // Per-member commission toggle: { [memberId]: boolean }
+ const [commissionToggle, setCommissionToggle] = useState(() => {
+ const init = {};
+ teamMembers.forEach(m => { init[m.id] = getMemberCommissionDefault(m); });
+ return init;
+ });
+
+ // Keep new members initialized when teamMembers changes
+ useEffect(() => {
+ setCommissionToggle(prev => {
+ const next = { ...prev };
+ let changed = false;
+ teamMembers.forEach(m => {
+ if (!(m.id in next)) {
+ next[m.id] = getMemberCommissionDefault(m);
+ changed = true;
+ }
+ });
+ return changed ? next : prev;
+ });
+ }, [teamMembers, getMemberCommissionDefault]);
+
+ // Toggle and persist back to store so the change survives re-renders
+ const toggleMemberCommission = useCallback((memberId) => {
+ setCommissionToggle(prev => {
+ const next = { ...prev, [memberId]: !prev[memberId] };
+ onUpdateMember(project.id, memberId, { commissionEnabled: next[memberId] });
+ return next;
+ });
+ }, [project.id, onUpdateMember]);
+
const canManageTeam = ['OWNER', 'ADMIN'].includes(userRole);
const canManageCommissions = ['OWNER', 'ADMIN'].includes(userRole);
const canViewCommissions = ['OWNER', 'ADMIN', 'CONTRACTOR'].includes(userRole);
@@ -258,25 +297,67 @@ const TeamManagementPanel = ({
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: -4 }}
transition={{ duration: 0.15 }}
- className="absolute right-0 top-8 z-30 w-44 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl shadow-2xl overflow-hidden"
+ className="absolute right-0 top-8 z-30 w-52 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 rounded-xl shadow-2xl overflow-hidden"
>
+ {/* Change Job Role */}
+
+ {/* Commission Toggle */}
{canManageCommissions && (
-
+
+
+
+ Commission
+
+
+