Update Mock Auth with Roles

[respp]

🏷️ Context: Guest/Host Role System

We’re implementing a dual-role system where users can have two profiles:

• Guest (Tenant): Users who search and book properties
• Host: Users who list and manage properties
• Dual: Users who can be both at the same time

Role Flow:

1. All users start as Guest by default

2. To become a Host, they must complete the “Become a Host” flow

3. Dashboard access depends on role:

   • Guest Dashboard: Always accessible (bookings, profile, wallet)
   • Host Dashboard: Only if hostStatus === 'verified' and they have properties

Architecture:

• Reuse 90% of the existing codebase (components, hooks, services)
• Add role logic on top of the current infrastructure
• Do not change existing dashboard components (they already work)

References:

• Existing auth system: hooks/auth/use-auth.tsx
• Current dashboards: /tenant-dashboard (guest) and /dashboard/host-dashboard (host)
• Reusable components: components/dashboard/*

---

📌 Task: Update mock config with users of different roles

Goal: Add mock users for role testing.

Files to modify:

• apps/web/src/config/auth.config.ts
• apps/web/src/hooks/auth/use-auth.tsx

Implementation:

Note: The snippet below is a helper scaffold and should NOT be treated as the final implementation. Ensure mock data aligns with your domain model and does not leak into production builds.

// apps/web/src/config/auth.config.ts
export const authConfig = {
  MOCK_AUTH: true,

  // Default user (Guest)
  MOCK_USER: {
    id: 'mock-guest-123',
    email: 'guest@stellarent.com',
    name: 'Demo Guest',
    role: 'guest' as const,
    hostStatus: 'none' as const,
    hasProperties: false,
    propertyCount: 0,
    hasBookings: true,
    bookingCount: 3,
    publicKey: 'GBXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authType: 'email' as const,
  },

  // Additional users for testing
  MOCK_USERS: {
    guest: {
      id: 'mock-guest-123',
      name: 'Demo Guest',
      email: 'guest@stellarent.com',
      role: 'guest' as const,
      hostStatus: 'none' as const,
      hasProperties: false,
      propertyCount: 0,
      hasBookings: true,
      bookingCount: 3,
    },
    host: {
      id: 'mock-host-456',
      name: 'Demo Host',
      email: 'host@stellarent.com',
      role: 'host' as const,
      hostStatus: 'verified' as const,
      hasProperties: true,
      propertyCount: 3,
      hasBookings: false,
      bookingCount: 0,
      hostSince: '2024-01-15',
    },
    dual: {
      id: 'mock-dual-789',
      name: 'Demo Dual User',
      email: 'dual@stellarent.com',
      role: 'dual' as const,
      hostStatus: 'verified' as const,
      hasProperties: true,
      propertyCount: 2,
      hasBookings: true,
      bookingCount: 5,
      hostSince: '2024-03-20',
    },
  },
} as const;

// apps/web/src/hooks/auth/use-auth.tsx (snippet)
useEffect(() => {
  console.log('🔥 MOCK AUTH MODE ENABLED');
  console.log('📋 Available users:', Object.keys(authConfig.MOCK_USERS));
  console.log('👤 Current user role:', user?.role);
}, [user]);

Acceptance Criteria:

• MOCK_USER includes role fields
• MOCK_USERS object contains 3 users (guest, host, dual)
• Console logs list available users
• No TypeScript errors
• MockAuthBanner shows current role

[AABams-Dev]

I’d like to work on this issue by updating the mock auth config to include structured users for guest, host, and dual roles, ensuring type safety and alignment with the current domain model. I’ll extend auth.config.ts with mock users and adjust use-auth.tsx to add clear console logs that display available roles and the active user. With my experience in React, TypeScript, and role-based access systems, I can implement this cleanly while reusing existing hooks and services, avoiding code duplication, and ensuring no TypeScript errors. This will provide a smooth developer experience for testing role-specific dashboards without impacting production.

[respp]

@AABams-Dev the issue is yours