feat: add max branches and cashiers limit, refine admin UI settings, implement tier-based qris fee

src/components/Sidebar.jsx

@@ -102,7 +102,7 @@ export default function Sidebar() {
               <span className="material-symbols-outlined" style={{ fontSize: '20px', fontVariationSettings: active ? "'FILL' 1" : "'FILL' 0", flexShrink: 0 }}>
                 {menu.icon}
               </span>
-              <span className="sidebar-label" style={{ flex: 1, textAlign: 'left', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{menu.label}</span>
+              <span className="sidebar-label">{menu.label}</span>
             </button>
           );
         })}

src/index.css

@@ -242,6 +242,7 @@ h1, h2, h3, .font-headline { font-family: var(--font-headline); }
   background-color: #ffedeb;
 }
 .sticky-col {
+  position: -webkit-sticky;
   position: sticky;
   left: 0;
   z-index: 5;
@@ -249,6 +250,7 @@ h1, h2, h3, .font-headline { font-family: var(--font-headline); }
   border-right: 1px solid rgba(78,33,32,0.06);
 }
 .sticky-header {
+  position: -webkit-sticky;
   position: sticky;
   left: 0;
   z-index: 10;

src/pages/AdminTenantSettings.jsx

@@ -39,6 +39,14 @@ export default function AdminTenantSettings() {
     });
   };
 
+  const handleUpdateValue = (companyId, settingKey, value) => {
+    setPendingChanges(prev => {
+      const companyChanges = prev[companyId] || {};
+      const newChanges = { ...companyChanges, [settingKey]: value };
+      return { ...prev, [companyId]: newChanges };
+    });
+  };
+
   const handleCancelChanges = () => {
     setPendingChanges({});
   };
@@ -184,32 +192,78 @@ export default function AdminTenantSettings() {
                     </label>
                   </td>
                   <td style={{ padding: '16px 12px', textAlign: 'center' }}>
-                    <label style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }}>
-                      <input 
-                        type="checkbox" 
-                        style={{ opacity: 0, position: 'absolute', width: 0, height: 0 }} 
-                        checked={pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true)} 
-                        onChange={() => handleToggleSetting(c.id, 'enable_multi_branch', pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true))} 
-                        disabled={applying}
-                      />
-                      <div style={{ width: '48px', height: '26px', borderRadius: '13px', background: (pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true)) ? '#059669' : '#e5e7eb', position: 'relative', transition: '0.2s' }}>
-                        <div style={{ width: '22px', height: '22px', borderRadius: '50%', background: 'white', position: 'absolute', top: '2px', left: (pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true)) ? '24px' : '2px', transition: '0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
-                      </div>
-                    </label>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' }}>
+                      <label style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }}>
+                        <input 
+                          type="checkbox" 
+                          style={{ opacity: 0, position: 'absolute', width: 0, height: 0 }} 
+                          checked={pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true)} 
+                          onChange={() => handleToggleSetting(c.id, 'enable_multi_branch', pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true))} 
+                          disabled={applying}
+                        />
+                        <div style={{ width: '48px', height: '26px', borderRadius: '13px', background: (pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true)) ? '#059669' : '#e5e7eb', position: 'relative', transition: '0.2s' }}>
+                          <div style={{ width: '22px', height: '22px', borderRadius: '50%', background: 'white', position: 'absolute', top: '2px', left: (pendingChanges[c.id]?.enable_multi_branch ?? (c.enable_multi_branch ?? true)) ? '24px' : '2px', transition: '0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
+                        </div>
+                      </label>
+                      { (pendingChanges[c.id]?.enable_multi_branch ?? c.enable_multi_branch) && (
+                        <div className="animate-fade-in" style={{ display: 'flex', alignItems: 'center', gap: '6px', background: 'rgba(78,33,32,0.04)', padding: '4px 10px', borderRadius: '8px', marginTop: '4px' }}>
+                          <span style={{ fontSize: '9px', fontWeight: 800, color: 'rgba(78,33,32,0.5)', letterSpacing: '0.05em' }}>LIMIT</span>
+                          <input 
+                            type="text" 
+                            style={{ 
+                              width: '40px', padding: '2px', background: 'transparent', border: 'none', 
+                              borderBottom: '1px solid rgba(78,33,32,0.2)', fontSize: '13px', fontWeight: 800, 
+                              color: '#4e2120', textAlign: 'center', outline: 'none' 
+                            }}
+                            value={(pendingChanges[c.id]?.max_branches ?? (c.max_branches || 0)) === 0 ? '∞' : (pendingChanges[c.id]?.max_branches ?? (c.max_branches || 0))}
+                            onChange={e => {
+                               const val = e.target.value.replace(/[^0-9]/g, '');
+                               handleUpdateValue(c.id, 'max_branches', parseInt(val) || 0);
+                            }}
+                            onFocus={e => { if (e.target.value === '∞') e.target.value = ''; }}
+                            disabled={applying}
+                            title="Ketik angka, 0 = Tak Terbatas"
+                          />
+                        </div>
+                      )}
+                    </div>
                   </td>
                   <td style={{ padding: '16px 12px', textAlign: 'center' }}>
-                    <label style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }}>
-                      <input 
-                        type="checkbox" 
-                        style={{ opacity: 0, position: 'absolute', width: 0, height: 0 }} 
-                        checked={pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true)} 
-                        onChange={() => handleToggleSetting(c.id, 'enable_multi_kasir', pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true))} 
-                        disabled={applying}
-                      />
-                      <div style={{ width: '48px', height: '26px', borderRadius: '13px', background: (pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true)) ? '#059669' : '#e5e7eb', position: 'relative', transition: '0.2s' }}>
-                        <div style={{ width: '22px', height: '22px', borderRadius: '50%', background: 'white', position: 'absolute', top: '2px', left: (pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true)) ? '24px' : '2px', transition: '0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
-                      </div>
-                    </label>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' }}>
+                      <label style={{ display: 'inline-flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }}>
+                        <input 
+                          type="checkbox" 
+                          style={{ opacity: 0, position: 'absolute', width: 0, height: 0 }} 
+                          checked={pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true)} 
+                          onChange={() => handleToggleSetting(c.id, 'enable_multi_kasir', pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true))} 
+                          disabled={applying}
+                        />
+                        <div style={{ width: '48px', height: '26px', borderRadius: '13px', background: (pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true)) ? '#059669' : '#e5e7eb', position: 'relative', transition: '0.2s' }}>
+                          <div style={{ width: '22px', height: '22px', borderRadius: '50%', background: 'white', position: 'absolute', top: '2px', left: (pendingChanges[c.id]?.enable_multi_kasir ?? (c.enable_multi_kasir ?? true)) ? '24px' : '2px', transition: '0.2s', boxShadow: '0 1px 3px rgba(0,0,0,0.2)' }} />
+                        </div>
+                      </label>
+                      { (pendingChanges[c.id]?.enable_multi_kasir ?? c.enable_multi_kasir) && (
+                        <div className="animate-fade-in" style={{ display: 'flex', alignItems: 'center', gap: '6px', background: 'rgba(78,33,32,0.04)', padding: '4px 10px', borderRadius: '8px', marginTop: '4px' }}>
+                          <span style={{ fontSize: '9px', fontWeight: 800, color: 'rgba(78,33,32,0.5)', letterSpacing: '0.05em' }}>LIMIT</span>
+                          <input 
+                            type="text" 
+                            style={{ 
+                              width: '40px', padding: '2px', background: 'transparent', border: 'none', 
+                              borderBottom: '1px solid rgba(78,33,32,0.2)', fontSize: '13px', fontWeight: 800, 
+                              color: '#4e2120', textAlign: 'center', outline: 'none' 
+                            }}
+                            value={(pendingChanges[c.id]?.max_cashiers ?? (c.max_cashiers || 0)) === 0 ? '∞' : (pendingChanges[c.id]?.max_cashiers ?? (c.max_cashiers || 0))}
+                            onChange={e => {
+                               const val = e.target.value.replace(/[^0-9]/g, '');
+                               handleUpdateValue(c.id, 'max_cashiers', parseInt(val) || 0);
+                            }}
+                            onFocus={e => { if (e.target.value === '∞') e.target.value = ''; }}
+                            disabled={applying}
+                            title="Ketik angka, 0 = Tak Terbatas"
+                          />
+                        </div>
+                      )}
+                    </div>
                   </td>
                 </tr>
               ))}

src/pages/Companies.jsx

@@ -33,6 +33,7 @@ export default function Companies() {
   const [feeTarget, setFeeTarget] = useState(null);
   const [feeForm, setFeeForm] = useState({
     cash_fee_rules: [],
+    qris_fee_rules: [],
     qris_fee_percentage: 1.7,
     qris_fee_fixed: 500,
     qris_fee_min: 850,
@@ -136,8 +137,15 @@ export default function Companies() {
         { min_amount: 150001, max_amount: 999999999, fee: 3000 }
       ];
     }
+    let qrisRules = [];
+    try {
+      if (c.qris_fee_rules) qrisRules = JSON.parse(c.qris_fee_rules);
+    } catch (e) {
+      console.error(e);
+    }
     setFeeForm({
       cash_fee_rules: cashRules,
+      qris_fee_rules: qrisRules,
       qris_fee_percentage: c.qris_fee_percentage ?? 1.7,
       qris_fee_fixed: c.qris_fee_fixed ?? 500,
       qris_fee_min: c.qris_fee_min ?? 850,
@@ -183,6 +191,13 @@ export default function Companies() {
           max_amount: parseInt(r.max_amount),
           fee: parseInt(r.fee)
         })),
+        qris_fee_rules: feeForm.qris_fee_rules.map(r => ({
+          min_amount: parseInt(r.min_amount),
+          max_amount: parseInt(r.max_amount),
+          fee_percentage: parseFloat(r.fee_percentage),
+          fee_fixed: parseInt(r.fee_fixed),
+          fee_min: parseInt(r.fee_min)
+        })),
         qris_fee_percentage: parseFloat(feeForm.qris_fee_percentage),
         qris_fee_fixed: parseInt(feeForm.qris_fee_fixed),
         qris_fee_min: parseInt(feeForm.qris_fee_min),
@@ -493,28 +508,42 @@ export default function Companies() {
                 </h3>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                   {feeForm.cash_fee_rules.map((rule, idx) => (
-                    <div key={idx} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr auto', gap: '8px', alignItems: 'center' }}>
-                      <input type="number" placeholder="Min" value={rule.min_amount} onChange={e => {
-                        const newRules = [...feeForm.cash_fee_rules];
-                        newRules[idx].min_amount = e.target.value;
-                        setFeeForm({ ...feeForm, cash_fee_rules: newRules });
-                      }} style={INPUT} />
-                      <input type="number" placeholder="Max" value={rule.max_amount} onChange={e => {
-                        const newRules = [...feeForm.cash_fee_rules];
-                        newRules[idx].max_amount = e.target.value;
-                        setFeeForm({ ...feeForm, cash_fee_rules: newRules });
-                      }} style={INPUT} />
-                      <input type="number" placeholder="Fee" value={rule.fee} onChange={e => {
-                        const newRules = [...feeForm.cash_fee_rules];
-                        newRules[idx].fee = e.target.value;
-                        setFeeForm({ ...feeForm, cash_fee_rules: newRules });
-                      }} style={INPUT} />
-                      <button onClick={() => {
-                        const newRules = feeForm.cash_fee_rules.filter((_, i) => i !== idx);
-                        setFeeForm({ ...feeForm, cash_fee_rules: newRules });
-                      }} style={{ background: 'none', border: 'none', color: '#dc2626', cursor: 'pointer', padding: '4px' }}>
-                        <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>delete</span>
-                      </button>
+                    <div key={idx} style={{ background: '#f9fafb', padding: '16px', borderRadius: '12px', position: 'relative', border: '1px solid #e5e7eb', marginBottom: '8px' }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                        <span style={{ fontSize: '12px', fontWeight: 700, color: '#4e2120' }}>TIER {idx + 1}</span>
+                        <button onClick={() => {
+                          const newRules = feeForm.cash_fee_rules.filter((_, i) => i !== idx);
+                          setFeeForm({ ...feeForm, cash_fee_rules: newRules });
+                        }} style={{ background: 'none', border: 'none', color: '#dc2626', cursor: 'pointer', padding: '4px', display: 'flex' }}>
+                          <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>delete</span>
+                        </button>
+                      </div>
+                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '8px' }}>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Min (Rp)</label>
+                          <input type="number" placeholder="0" value={rule.min_amount} onChange={e => {
+                            const newRules = [...feeForm.cash_fee_rules];
+                            newRules[idx].min_amount = e.target.value;
+                            setFeeForm({ ...feeForm, cash_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Max (Rp)</label>
+                          <input type="number" placeholder="9999999" value={rule.max_amount} onChange={e => {
+                            const newRules = [...feeForm.cash_fee_rules];
+                            newRules[idx].max_amount = e.target.value;
+                            setFeeForm({ ...feeForm, cash_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Fee Tetap (Rp)</label>
+                          <input type="number" placeholder="0" value={rule.fee} onChange={e => {
+                            const newRules = [...feeForm.cash_fee_rules];
+                            newRules[idx].fee = e.target.value;
+                            setFeeForm({ ...feeForm, cash_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                      </div>
                     </div>
                   ))}
                   <button onClick={() => {
@@ -533,22 +562,90 @@ export default function Companies() {
                   <span className="material-symbols-outlined" style={{ fontSize: '18px', color: '#ab2e00' }}>qr_code_scanner</span>
                   Aturan Fee QRIS
                 </h3>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
-                  <div>
-                    <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Persentase (%)</label>
-                    <input type="number" step="0.1" value={feeForm.qris_fee_percentage} onChange={e => setFeeForm({ ...feeForm, qris_fee_percentage: e.target.value })} style={INPUT} />
-                  </div>
-                  <div>
-                    <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Fee Tetap (+Rp)</label>
-                    <input type="number" value={feeForm.qris_fee_fixed} onChange={e => setFeeForm({ ...feeForm, qris_fee_fixed: e.target.value })} style={INPUT} />
-                  </div>
-                  <div>
-                    <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Potongan Minimal (Rp)</label>
-                    <input type="number" value={feeForm.qris_fee_min} onChange={e => setFeeForm({ ...feeForm, qris_fee_min: e.target.value })} style={INPUT} />
-                  </div>
-                  <div>
-                    <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Minimal Transaksi (Rp)</label>
-                    <input type="number" value={feeForm.qris_min_transaction} onChange={e => setFeeForm({ ...feeForm, qris_min_transaction: e.target.value })} style={INPUT} />
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+                  {feeForm.qris_fee_rules.map((rule, idx) => (
+                    <div key={idx} style={{ background: '#f9fafb', padding: '16px', borderRadius: '12px', position: 'relative', border: '1px solid #e5e7eb', marginBottom: '8px' }}>
+                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                        <span style={{ fontSize: '12px', fontWeight: 700, color: '#4e2120' }}>TIER {idx + 1}</span>
+                        <button onClick={() => {
+                          const newRules = feeForm.qris_fee_rules.filter((_, i) => i !== idx);
+                          setFeeForm({ ...feeForm, qris_fee_rules: newRules });
+                        }} style={{ background: 'none', border: 'none', color: '#dc2626', cursor: 'pointer', padding: '4px', display: 'flex' }}>
+                          <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>delete</span>
+                        </button>
+                      </div>
+                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px', marginBottom: '12px' }}>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Min (Rp)</label>
+                          <input type="number" placeholder="0" value={rule.min_amount} onChange={e => {
+                            const newRules = [...feeForm.qris_fee_rules];
+                            newRules[idx].min_amount = e.target.value;
+                            setFeeForm({ ...feeForm, qris_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Max (Rp)</label>
+                          <input type="number" placeholder="9999999" value={rule.max_amount} onChange={e => {
+                            const newRules = [...feeForm.qris_fee_rules];
+                            newRules[idx].max_amount = e.target.value;
+                            setFeeForm({ ...feeForm, qris_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                      </div>
+                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '8px' }}>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Persen (%)</label>
+                          <input type="number" step="0.1" placeholder="0" value={rule.fee_percentage} onChange={e => {
+                            const newRules = [...feeForm.qris_fee_rules];
+                            newRules[idx].fee_percentage = e.target.value;
+                            setFeeForm({ ...feeForm, qris_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Tetap (+Rp)</label>
+                          <input type="number" placeholder="0" value={rule.fee_fixed} onChange={e => {
+                            const newRules = [...feeForm.qris_fee_rules];
+                            newRules[idx].fee_fixed = e.target.value;
+                            setFeeForm({ ...feeForm, qris_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                        <div>
+                          <label style={{ display: 'block', fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '4px', color: '#834c4a' }}>Min (Rp)</label>
+                          <input type="number" placeholder="0" value={rule.fee_min} onChange={e => {
+                            const newRules = [...feeForm.qris_fee_rules];
+                            newRules[idx].fee_min = e.target.value;
+                            setFeeForm({ ...feeForm, qris_fee_rules: newRules });
+                          }} style={INPUT} />
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                  <button onClick={() => {
+                    setFeeForm({ ...feeForm, qris_fee_rules: [...feeForm.qris_fee_rules, { min_amount: 0, max_amount: 0, fee_percentage: 0, fee_fixed: 0, fee_min: 0 }] });
+                  }} style={{ background: 'transparent', border: '1px dashed #ab2e00', color: '#ab2e00', padding: '8px', borderRadius: '8px', cursor: 'pointer', fontSize: '12px', fontWeight: 600 }}>
+                    + Tambah Tier QRIS
+                  </button>
+                </div>
+
+                <div style={{ marginTop: '16px' }}>
+                  <h4 style={{ fontSize: '12px', fontWeight: 700, color: '#834c4a', marginBottom: '8px', textTransform: 'uppercase' }}>Aturan Default (Jika tidak ada tier cocok)</h4>
+                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Persentase (%)</label>
+                      <input type="number" step="0.1" value={feeForm.qris_fee_percentage} onChange={e => setFeeForm({ ...feeForm, qris_fee_percentage: e.target.value })} style={INPUT} />
+                    </div>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Fee Tetap (+Rp)</label>
+                      <input type="number" value={feeForm.qris_fee_fixed} onChange={e => setFeeForm({ ...feeForm, qris_fee_fixed: e.target.value })} style={INPUT} />
+                    </div>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Potongan Minimal (Rp)</label>
+                      <input type="number" value={feeForm.qris_fee_min} onChange={e => setFeeForm({ ...feeForm, qris_fee_min: e.target.value })} style={INPUT} />
+                    </div>
+                    <div>
+                      <label style={{ display: 'block', fontSize: '11px', fontWeight: 700, textTransform: 'uppercase', marginBottom: '6px', color: '#834c4a' }}>Minimal Transaksi (Rp)</label>
+                      <input type="number" value={feeForm.qris_min_transaction} onChange={e => setFeeForm({ ...feeForm, qris_min_transaction: e.target.value })} style={INPUT} />
+                    </div>
                   </div>
                 </div>