feat: make company column sticky on horizontal scroll

src/index.css

@@ -163,6 +163,8 @@ h1, h2, h3, .font-headline { font-family: var(--font-headline); }
   /* Modals full-width on mobile */
   .modal-responsive { max-width: 100% !important; margin: 0 !important; border-radius: 20px 20px 0 0 !important; position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; }
 
+  /* Grids */
+
   /* Grids */
   .responsive-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
   .responsive-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
@@ -230,3 +232,26 @@ h1, h2, h3, .font-headline { font-family: var(--font-headline); }
     padding: 16px !important;
   }
 }
+
+/* Sticky Table Columns */
+.table-row-hover {
+  background-color: #ffffff;
+  transition: background-color 0.15s;
+}
+.table-row-hover:hover {
+  background-color: #ffedeb;
+}
+.sticky-col {
+  position: sticky;
+  left: 0;
+  z-index: 5;
+  background-color: inherit;
+  border-right: 1px solid rgba(78,33,32,0.06);
+}
+.sticky-header {
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background-color: #ffffff;
+  border-right: 1px solid rgba(78,33,32,0.06);
+}

src/pages/AdminTenantSettings.jsx

@@ -100,7 +100,7 @@ export default function AdminTenantSettings() {
           <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '14px', minWidth: '800px' }}>
             <thead>
               <tr style={{ borderBottom: '1px solid rgba(78,33,32,0.06)' }}>
-                <th style={{ textAlign: 'left', padding: '16px 24px', fontSize: '11px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(78,33,32,0.4)', whiteSpace: 'nowrap' }}>Perusahaan</th>
+                <th className="sticky-header" style={{ padding: '16px 24px', fontSize: '11px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(78,33,32,0.4)', whiteSpace: 'nowrap' }}>Perusahaan</th>
                 <th style={{ textAlign: 'left', padding: '16px 24px', fontSize: '11px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(78,33,32,0.4)', whiteSpace: 'nowrap' }}>Kontak</th>
                 <th style={{ textAlign: 'center', padding: '16px 12px', fontSize: '11px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(78,33,32,0.4)', whiteSpace: 'nowrap' }}>Potong Fee (Awal)</th>
                 <th style={{ textAlign: 'center', padding: '16px 12px', fontSize: '11px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(78,33,32,0.4)', whiteSpace: 'nowrap' }}>Enable Member</th>
@@ -120,11 +120,8 @@ export default function AdminTenantSettings() {
                   <p style={{ color: 'rgba(78,33,32,0.4)' }}>Belum ada klien / perusahaan</p>
                 </td></tr>
               ) : companies.map((c) => (
-                <tr key={c.id} style={{ borderBottom: '1px solid rgba(78,33,32,0.04)', transition: 'background 0.15s' }}
-                  onMouseEnter={(e) => e.currentTarget.style.background = '#ffedeb'}
-                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
-                >
-                  <td style={{ padding: '16px 24px' }}>
+                <tr key={c.id} className="table-row-hover" style={{ borderBottom: '1px solid rgba(78,33,32,0.04)' }}>
+                  <td className="sticky-col" style={{ padding: '16px 24px' }}>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                       <div style={{
                         width: '36px', height: '36px', borderRadius: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center',