Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

apply commission setting model light mode

Browse Source
This commit is contained in:
Satyam Rastogi
2026-05-15 15:06:16 +05:30
parent d2be9b1abf
commit ff35b3076b
1 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/owner/CommissionSettingsModal.jsx
+47 -47
View File
@@ -38,7 +38,7 @@ const SectionHeader = ({ level, isOpen, onToggle }) => {
<Icon size={18} style={{ color: cfg.color }} />
</div>
<div className="text-left">
<h3 className="text-sm font-bold text-white tracking-widest uppercase">{cfg.label}</h3>
<h3 className="text-sm font-bold tracking-widest uppercase" style={{ color: cfg.color }}>{cfg.label}</h3>
<p className="text-[10px] text-zinc-500 mt-0.5">
{level === 'org' && 'Default commission for all jobs'}
{level === 'role' && 'Per-role commission overrides'}
@@ -49,7 +49,7 @@ const SectionHeader = ({ level, isOpen, onToggle }) => {
</div>
<ChevronDown
size={16}
className="text-zinc-400 transition-transform duration-200"
className="text-zinc-500 dark:text-zinc-400 transition-transform duration-200"
style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
/>
</button>
@@ -63,7 +63,7 @@ const CommissionForm = ({ type, rate, onTypeChange, onRateChange, accentColor =
<select
value={type}
onChange={e => onTypeChange(e.target.value)}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white outline-none transition-all"
className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white outline-none transition-all"
style={{ '--tw-ring-color': accentColor }}
>
{COMMISSION_TYPES.map(ct => (
@@ -86,7 +86,7 @@ const CommissionForm = ({ type, rate, onTypeChange, onRateChange, accentColor =
value={rate}
onChange={e => onRateChange(e.target.value)}
placeholder={type === 'percent_gross' || type === 'percent_net' ? 'e.g. 10' : 'e.g. 5000'}
className="w-full bg-[#18181b] border border-white/10 rounded-xl pl-8 pr-4 py-2.5 text-sm text-white placeholder-zinc-600 outline-none transition-all"
className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl pl-8 pr-4 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 outline-none transition-all"
/>
</div>
</div>
@@ -181,26 +181,26 @@ const CommissionSettingsModal = ({
return createPortal(
<div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
<div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onClose} />
<motion.div
initial={{ opacity: 0, scale: 0.95, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.2 }}
className="relative w-full max-w-2xl max-h-[90vh] bg-[#121214] rounded-2xl shadow-[0_0_60px_rgba(0,0,0,0.9)] border border-white/10 overflow-hidden flex flex-col"
className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-[#121214] rounded-2xl shadow-2xl shadow-zinc-900/20 dark:shadow-[0_0_60px_rgba(0,0,0,0.9)] border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col"
>
{/* Header */}
<div className="px-6 py-5 border-b border-white/10 flex justify-between items-center bg-white/[0.03] shrink-0">
<div className="px-6 py-5 border-b border-zinc-200 dark:border-white/10 flex justify-between items-center bg-zinc-50 dark:bg-white/[0.03] shrink-0">
<div className="flex items-center gap-3">
<div className="p-2 rounded-xl bg-amber-500/10">
<DollarSign size={20} className="text-[#fda913]" />
</div>
<div>
<h2 className="text-lg font-bold text-white tracking-widest uppercase">Commission Settings</h2>
<h2 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Commission Settings</h2>
<p className="text-[10px] text-zinc-500 mt-0.5">Configure commission hierarchy: Job &rarr; User &rarr; Role &rarr; Org</p>
</div>
</div>
<button onClick={onClose} className="p-2 rounded-lg hover:bg-white/10 text-zinc-500 hover:text-white transition-colors">
<button onClick={onClose} className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 text-zinc-500 hover:text-zinc-900 dark:hover:text-white transition-colors">
<X size={18} />
</button>
</div>
@@ -214,7 +214,7 @@ const CommissionSettingsModal = ({
const isActive = activeSource === level;
return (
<React.Fragment key={level}>
{i > 0 && <ArrowRight size={12} className="text-zinc-600 mx-1" />}
{i > 0 && <ArrowRight size={12} className="text-zinc-400 dark:text-zinc-600 mx-1" />}
<div
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border transition-all ${
isActive
@@ -237,7 +237,7 @@ const CommissionSettingsModal = ({
);
})}
</div>
<p className="text-center text-[10px] text-zinc-600 mt-2">
<p className="text-center text-[10px] text-zinc-500 dark:text-zinc-600 mt-2">
Currently using: <span className="font-bold" style={{ color: LEVEL_CONFIG[activeSource]?.color || '#fda913' }}>
{LEVEL_CONFIG[activeSource]?.label || 'Org Default'}
</span>
@@ -269,16 +269,16 @@ const CommissionSettingsModal = ({
accentColor="#00f0ff"
/>
) : (
<div className="flex items-center gap-2 px-4 py-3 bg-white/[0.03] rounded-xl border border-white/5">
<div className="flex items-center gap-2 px-4 py-3 bg-zinc-50 dark:bg-white/[0.03] rounded-xl border border-zinc-200 dark:border-white/5">
<Shield size={14} className="text-zinc-500" />
<span className="text-xs text-zinc-400">
<span className="text-xs text-zinc-600 dark:text-zinc-400">
{COMMISSION_TYPES.find(c => c.value === orgDefaults.type)?.label} — {
orgDefaults.type === 'percent_gross' || orgDefaults.type === 'percent_net'
? `${orgDefaults.rate}%`
: formatCurrency(orgDefaults.rate)
}
</span>
<span className="text-[10px] text-zinc-600 ml-auto">(Admin only)</span>
<span className="text-[10px] text-zinc-400 dark:text-zinc-600 ml-auto">(Admin only)</span>
</div>
)}
</div>
@@ -301,7 +301,7 @@ const CommissionSettingsModal = ({
>
<div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(16,185,129,0.2)' }}>
{roleOverrides.length === 0 ? (
<p className="text-xs text-zinc-600 italic px-2">No role overrides configured.</p>
<p className="text-xs text-zinc-400 dark:text-zinc-600 italic px-2">No role overrides configured.</p>
) : (
roleOverrides.map(ov => {
const role = orgRoles.find(r => r.key === ov.roleKey);
@@ -314,24 +314,24 @@ const CommissionSettingsModal = ({
className={`flex items-center gap-3 px-4 py-3 rounded-xl border transition-all ${
isApplicable
? 'bg-emerald-500/10 border-emerald-500/30'
: 'bg-white/[0.03] border-white/5 opacity-60'
: 'bg-zinc-50 dark:bg-white/[0.03] border-zinc-200 dark:border-white/5 opacity-60'
}`}
>
<div className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: role?.color || '#10b981' }} />
<div className="flex-1 min-w-0">
<span className="text-sm font-bold text-white">{role?.name || ov.roleKey}</span>
<span className="text-sm font-bold text-zinc-900 dark:text-white">{role?.name || ov.roleKey}</span>
<span className="text-xs text-zinc-500 ml-2">
{typeLabel} — {rateDisplay}
</span>
</div>
<div className="flex items-center gap-2 shrink-0">
{ov.enabled ? (
<span className="text-[10px] font-bold text-emerald-400 uppercase">Active</span>
<span className="text-[10px] font-bold text-emerald-600 dark:text-emerald-400 uppercase">Active</span>
) : (
<span className="text-[10px] font-bold text-zinc-600 uppercase">Disabled</span>
<span className="text-[10px] font-bold text-zinc-400 dark:text-zinc-600 uppercase">Disabled</span>
)}
{isApplicable && (
<span className="text-[10px] font-bold text-emerald-400 bg-emerald-500/20 px-1.5 py-0.5 rounded-full">Applies</span>
<span className="text-[10px] font-bold text-emerald-700 dark:text-emerald-400 bg-emerald-500/20 px-1.5 py-0.5 rounded-full">Applies</span>
)}
</div>
</div>
@@ -339,8 +339,8 @@ const CommissionSettingsModal = ({
})
)}
<div className="flex items-start gap-2 px-2 pt-1">
<Info size={12} className="text-zinc-600 mt-0.5 shrink-0" />
<p className="text-[10px] text-zinc-600">Role overrides are managed in <span className="font-bold text-zinc-400">Org Settings → Commission Rules</span>.</p>
<Info size={12} className="text-zinc-400 dark:text-zinc-600 mt-0.5 shrink-0" />
<p className="text-[10px] text-zinc-500 dark:text-zinc-600">Role overrides are managed in <span className="font-bold text-zinc-700 dark:text-zinc-400">Org Settings → Commission Rules</span>.</p>
</div>
</div>
</motion.div>
@@ -362,23 +362,23 @@ const CommissionSettingsModal = ({
>
<div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(168,85,247,0.2)' }}>
{!isAdmin ? (
<div className="flex items-center gap-2 px-4 py-3 bg-white/[0.03] rounded-xl border border-white/5">
<div className="flex items-center gap-2 px-4 py-3 bg-zinc-50 dark:bg-white/[0.03] rounded-xl border border-zinc-200 dark:border-white/5">
<Shield size={14} className="text-zinc-500" />
<span className="text-xs text-zinc-400">{localUserOverrides.length} user override(s) configured</span>
<span className="text-[10px] text-zinc-600 ml-auto">(Admin only)</span>
<span className="text-xs text-zinc-600 dark:text-zinc-400">{localUserOverrides.length} user override(s) configured</span>
<span className="text-[10px] text-zinc-400 dark:text-zinc-600 ml-auto">(Admin only)</span>
</div>
) : (
<>
{localUserOverrides.length === 0 && !addingUser && (
<p className="text-xs text-zinc-600 italic px-2">No user overrides configured.</p>
<p className="text-xs text-zinc-400 dark:text-zinc-600 italic px-2">No user overrides configured.</p>
)}
{localUserOverrides.map((ov, idx) => (
<div key={ov.userId} className="bg-white/[0.03] border border-white/5 rounded-xl p-4 space-y-3">
<div key={ov.userId} className="bg-zinc-50 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/5 rounded-xl p-4 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<User size={14} className="text-purple-400" />
<span className="text-sm font-bold text-white">{ov.userName}</span>
<User size={14} className="text-purple-500 dark:text-purple-400" />
<span className="text-sm font-bold text-zinc-900 dark:text-white">{ov.userName}</span>
</div>
<div className="flex items-center gap-2">
<button
@@ -388,18 +388,18 @@ const CommissionSettingsModal = ({
prev.map((o, i) => i === idx ? { ...o, enabled: !o.enabled } : o)
);
}}
className="p-1 rounded-lg hover:bg-white/10 transition-colors"
className="p-1 rounded-lg hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
title={ov.enabled ? 'Disable override' : 'Enable override'}
>
{ov.enabled
? <ToggleRight size={20} className="text-purple-400" />
: <ToggleLeft size={20} className="text-zinc-600" />
? <ToggleRight size={20} className="text-purple-500 dark:text-purple-400" />
: <ToggleLeft size={20} className="text-zinc-400 dark:text-zinc-600" />
}
</button>
<button
type="button"
onClick={() => setLocalUserOverrides(prev => prev.filter((_, i) => i !== idx))}
className="p-1 rounded-lg hover:bg-red-500/10 text-zinc-600 hover:text-red-400 transition-colors"
className="p-1 rounded-lg hover:bg-red-500/10 text-zinc-400 dark:text-zinc-600 hover:text-red-500 dark:hover:text-red-400 transition-colors"
>
<Trash2 size={14} />
</button>
@@ -419,7 +419,7 @@ const CommissionSettingsModal = ({
/>
)}
{!ov.enabled && (
<p className="text-[10px] text-zinc-600 italic">Override disabled — org default applies</p>
<p className="text-[10px] text-zinc-400 dark:text-zinc-600 italic">Override disabled — org default applies</p>
)}
</div>
))}
@@ -432,7 +432,7 @@ const CommissionSettingsModal = ({
<select
value={newUserOverride.userId}
onChange={e => setNewUserOverride(prev => ({ ...prev, userId: e.target.value }))}
className="w-full bg-[#18181b] border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white outline-none"
className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white outline-none"
>
<option value="">— Select —</option>
{availablePersonnel.map(p => (
@@ -451,7 +451,7 @@ const CommissionSettingsModal = ({
<button
type="button"
onClick={() => setAddingUser(false)}
className="flex-1 px-4 py-2 rounded-xl border border-white/10 text-zinc-400 text-xs font-semibold hover:bg-white/5 transition-colors"
className="flex-1 px-4 py-2 rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 text-xs font-semibold hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
>
Cancel
</button>
@@ -459,7 +459,7 @@ const CommissionSettingsModal = ({
type="button"
onClick={handleAddUserOverride}
disabled={!newUserOverride.userId}
className="flex-1 px-4 py-2 rounded-xl bg-purple-500/20 text-purple-300 border border-purple-500/30 text-xs font-bold hover:bg-purple-500/30 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
className="flex-1 px-4 py-2 rounded-xl bg-purple-500/20 text-purple-700 dark:text-purple-300 border border-purple-500/30 text-xs font-bold hover:bg-purple-500/30 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
Add Override
</button>
@@ -469,7 +469,7 @@ const CommissionSettingsModal = ({
<button
type="button"
onClick={() => setAddingUser(true)}
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-dashed border-purple-500/30 text-purple-400 text-xs font-bold hover:bg-purple-500/5 transition-colors"
className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl border border-dashed border-purple-500/30 text-purple-600 dark:text-purple-400 text-xs font-bold hover:bg-purple-500/5 transition-colors"
>
<Plus size={14} /> Add User Override
</button>
@@ -496,15 +496,15 @@ const CommissionSettingsModal = ({
>
<div className="pt-3 pb-1 pl-4 border-l-2 ml-7 space-y-3" style={{ borderColor: 'rgba(253,169,19,0.2)' }}>
<div className="flex items-center justify-between">
<span className="text-xs text-zinc-400">Enable job-level override</span>
<span className="text-xs text-zinc-600 dark:text-zinc-400">Enable job-level override</span>
<button
type="button"
onClick={() => setLocalJobOverride(prev => ({ ...prev, enabled: !prev.enabled }))}
className="p-1 rounded-lg hover:bg-white/10 transition-colors"
className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors"
>
{localJobOverride.enabled
? <ToggleRight size={24} className="text-[#fda913]" />
: <ToggleLeft size={24} className="text-zinc-600" />
: <ToggleLeft size={24} className="text-zinc-400 dark:text-zinc-600" />
}
</button>
</div>
@@ -517,7 +517,7 @@ const CommissionSettingsModal = ({
accentColor="#fda913"
/>
) : (
<p className="text-[10px] text-zinc-600 italic px-2">
<p className="text-[10px] text-zinc-400 dark:text-zinc-600 italic px-2">
No job override — falls back to {activeSource === 'user' ? 'user override' : 'org default'}
</p>
)}
@@ -528,11 +528,11 @@ const CommissionSettingsModal = ({
</div>
{/* Hierarchy Info */}
<div className="mt-2 p-4 bg-white/[0.02] rounded-xl border border-white/5">
<div className="mt-2 p-4 bg-zinc-50 dark:bg-white/[0.02] rounded-xl border border-zinc-200 dark:border-white/5">
<div className="flex items-start gap-2">
<Info size={14} className="text-zinc-600 mt-0.5 shrink-0" />
<Info size={14} className="text-zinc-400 dark:text-zinc-600 mt-0.5 shrink-0" />
<div className="text-[11px] text-zinc-500 space-y-1">
<p><span className="font-bold text-zinc-400">Override Priority:</span> Job Override &rarr; User Override &rarr; Role Override &rarr; Org Default</p>
<p><span className="font-bold text-zinc-700 dark:text-zinc-400">Override Priority:</span> Job Override &rarr; User Override &rarr; Role Override &rarr; Org Default</p>
<p>The most specific level always takes precedence. If a job override is set it will be used regardless of user, role, or org settings.</p>
</div>
</div>
@@ -540,11 +540,11 @@ const CommissionSettingsModal = ({
</div>
{/* Footer */}
<div className="px-6 py-4 border-t border-white/10 flex items-center justify-between bg-white/[0.02] shrink-0">
<div className="px-6 py-4 border-t border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50 dark:bg-white/[0.02] shrink-0">
<button
type="button"
onClick={onClose}
className="px-5 py-2.5 rounded-xl border border-white/10 text-zinc-400 text-sm font-semibold hover:bg-white/5 transition-colors"
className="px-5 py-2.5 rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 text-sm font-semibold hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
>
Cancel
</button>