From ff35b3076b309503033b5cca0c5d0b978e810299 Mon Sep 17 00:00:00 2001
From: Satyam Rastogi <satyamrastogi302@gmail.com>
Date: Fri, 15 May 2026 15:06:16 +0530
Subject: [PATCH] apply commission setting model light mode

---
 .../owner/CommissionSettingsModal.jsx         | 94 +++++++++----------
 1 file changed, 47 insertions(+), 47 deletions(-)

diff --git a/src/components/owner/CommissionSettingsModal.jsx b/src/components/owner/CommissionSettingsModal.jsx
index 8239c7c..153177e 100644
--- a/src/components/owner/CommissionSettingsModal.jsx
+++ b/src/components/owner/CommissionSettingsModal.jsx
@@ -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>