+
System roles define base-level access for your organization members
+ {roles.map(role => {
+ const roleMemberCount = members.filter(m => m.roleKey === role.key).length;
+ const roleMembers = members.filter(m => m.roleKey === role.key);
+ const isExpanded = expandedRole === role.id;
+
+ return (
+
+
+
+ {isExpanded && (
+
+
+ {roleMembers.length === 0 ? (
+
No members assigned to this role
+ ) : (
+
+ {roleMembers.map(member => (
+
+
+
+ {member.name.charAt(0)}
+
+
+ {member.name}
+ {member.email}
+
+
+
+
+ {member.status}
+
+
+
+ ))}
+
+ )}
+
+
+ );
+ })}
+
+
+ Click cells to toggle permissions per role
+
+
+ {/* Desktop Matrix */}
+
+
+
+
+ | Module |
+ Action |
+ {roles.map(role => (
+
+ {role.name.split(' ')[0]}
+ |
+ ))}
+
+
+
+ {moduleEntries.map(([moduleKey, module]) =>
+ module.actions.map((action, actionIdx) => (
+
+ {actionIdx === 0 && (
+ |
+
+
+ {module.label}
+
+ |
+ )}
+ {action} |
+ {roles.map(role => {
+ const hasPermission = (permissions[moduleKey]?.[role.key] || []).includes(action);
+ const isOwner = role.key === 'OWNER';
+ return (
+
+ {isOwner ? (
+
+ ) : (
+
+ )}
+ |
+ );
+ })}
+
+ ))
+ )}
+
+
+
+
+ {/* Mobile Cards */}
+
+ {roles.filter(r => r.key !== 'OWNER').map(role => (
+
+
+ {moduleEntries.map(([moduleKey, module]) => (
+
+
{module.label}
+
+ {module.actions.map(action => {
+ const hasPermission = (permissions[moduleKey]?.[role.key] || []).includes(action);
+ return (
+
+ );
+ })}
+
+
+ ))}
+
+ ))}
+
+
+ {/* Hierarchy Visualization */}
+
+ {[
+ { label: 'Org Default', color: '#00f0ff', icon: Building2 },
+ { label: 'Role Override', color: '#10b981', icon: Shield },
+ { label: 'Individual', color: '#a855f7', icon: User },
+ { label: 'Job Override', color: '#fda913', icon: DollarSign },
+ ].map((level, i) => (
+
+ {i > 0 && }
+
+
+ {level.label}
+
+
+ ))}
+
+
Highest priority on the right. Job override supersedes all.
+
+ {/* Org Default */}
+
+
+
+
+ Org Default Commission
+
+ {!editingOrg ? (
+
+ ) : (
+
+
+
+
+ )}
+
+ {editingOrg ? (
+
+
+
+
+
+
+
+ setLocalOrgDefaults(prev => ({ ...prev, rate: e.target.value }))} className={inputClasses} />
+
+
+ ) : (
+
+
+ {getCommissionLabel(orgDefaults.type)}
+ {formatCommission(orgDefaults.type, orgDefaults.rate)}
+
+ )}
+
+
+ {/* Role Overrides */}
+
+
+
+ {roleOverrides.length === 0 && !addingRole && (
+
No role overrides — all roles use org default
+ )}
+
+ {roleOverrides.map(ov => {
+ const role = roles.find(r => r.key === ov.roleKey);
+ return (
+
+
+
+
{role?.name || ov.roleKey}
+
+
{getCommissionLabel(ov.type)} — {formatCommission(ov.type, ov.rate)}
+
+
+
+
+
+
+ );
+ })}
+
+ {addingRole ? (
+
+
+
+
+
+
+
+
+
+
+
+
+ setNewRoleOverride(prev => ({ ...prev, rate: e.target.value }))} className={inputClasses} />
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {/* Info */}
+
+
+
+
+
Commission Hierarchy: Job Override → Individual Override → Role Override → Org Default
+
The most specific level takes precedence. Job-level overrides (set on each project) always win.
+
+
+
+
+ {/* Search */}
+
+
+ setSearchTerm(e.target.value)}
+ className="w-full bg-zinc-50 dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl pl-9 pr-4 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 outline-none focus:border-purple-400 dark:focus:border-purple-500/50 transition-colors"
+ />
+
+
+ {/* Member Cards */}
+
+ {filteredMembers.map(member => {
+ const effective = getEffectiveCommission(member);
+ const sc = sourceColors[effective.source];
+ const role = roles.find(r => r.key === member.roleKey);
+ const hasIndividualOverride = userCommissionOverrides.some(o => o.userId === member.userId && o.enabled) || member.individualCommission?.enabled;
+ const isEditing = editingMember === member.id;
+
+ return (
+
+
+
+
+ {member.name.charAt(0)}
+
+
+
+ {member.name}
+ {role?.name || member.roleKey}
+
+
{member.email}
+
+
+
+ {/* Commission Source Badge */}
+
+ {sc.label}
+ {formatCommission(effective.type, effective.rate)}
+
+ {member.roleKey !== 'OWNER' && (
+
+ )}
+
+
+
+ {/* Edit Form */}
+
+ {isEditing && (
+
+
+
+
+
+
+
+
+
+ setEditForm(prev => ({ ...prev, rate: e.target.value }))} className={inputClasses} />
+
+
+
+ {hasIndividualOverride && (
+
+ )}
+
+
+
+
+
+
+ );
+ })}
+
+ {filteredMembers.length === 0 && (
+
+ No members found matching "{searchTerm}"
+
+ )}
+
+