new changes

src/components/SettingsView.tsx

@@ -10,6 +10,7 @@ import {
   Truck,
   CreditCard,
   SlidersHorizontal,
+  Users,
   MapPin,
   Phone,
   Mail,
@@ -19,12 +20,13 @@ import {
 } from 'lucide-react';
 import { useFiestaAllTenants, useFiestaTenantLocations } from '../services/fiestaQueries';
 import { FIESTA_TENANT_ID, str as fstr, num as fnum, roleName } from '../services/fiestaApi';
+import UsersPanel from './UsersPanel';
 
 interface SettingsViewProps {
   tenantId?: number;
 }
 
-type TabKey = 'profile' | 'outlets' | 'delivery' | 'payment' | 'preferences';
+type TabKey = 'profile' | 'outlets' | 'users' | 'delivery' | 'payment' | 'preferences';
 
 /** Locally-persisted merchant preferences (survive reload via localStorage). */
 interface MerchantSettings {
@@ -175,6 +177,7 @@ export default function SettingsView({ tenantId = FIESTA_TENANT_ID }: SettingsVi
   const tabs: Array<{ key: TabKey; label: string; icon: typeof Building2 }> = [
     { key: 'profile', label: 'Business Profile', icon: Building2 },
     { key: 'outlets', label: 'Outlets', icon: Store },
+    { key: 'users', label: 'Users & Access', icon: Users },
     { key: 'delivery', label: 'Delivery', icon: Truck },
     { key: 'payment', label: 'Payment & Tax', icon: CreditCard },
     { key: 'preferences', label: 'Preferences', icon: SlidersHorizontal },
@@ -366,6 +369,10 @@ export default function SettingsView({ tenantId = FIESTA_TENANT_ID }: SettingsVi
             </div>
           )}
 
+          {activeTab === 'users' && (
+            <UsersPanel tenantId={tenantId} defaultNewUserRole={form.defaultNewUserRole} />
+          )}
+
           {activeTab === 'delivery' && (
             <div className="bg-white border border-[#e2e8f0] p-md rounded-xl shadow-sm space-y-md">
               <span className="text-[10px] font-bold text-zinc-400 uppercase tracking-widest block pb-xs border-b border-[#f1f5f9]">
@@ -474,8 +481,9 @@ export default function SettingsView({ tenantId = FIESTA_TENANT_ID }: SettingsVi
             </div>
           )}
 
-          {/* Save / Reset — lives with the settings card, not pinned to the screen */}
-          <div className="bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm flex flex-col sm:flex-row sm:items-center justify-between gap-sm">
+          {/* Save / Reset — lives with the settings card, not pinned to the screen.
+              Hidden on the Users tab, which manages accounts via the live API. */}
+          <div className={`bg-white border border-[#e2e8f0] rounded-xl p-md shadow-sm flex-col sm:flex-row sm:items-center justify-between gap-sm ${activeTab === 'users' ? 'hidden' : 'flex'}`}>
             <span className={`text-xs font-medium ${dirty ? 'text-amber-600' : 'text-zinc-400'}`}>
               {dirty ? '● You have unsaved changes' : 'All changes saved'}
             </span>