@fayz-ai/saas 0.1.6

package/src/app/LoginPage.tsx

@@ -0,0 +1,264 @@
+import * as React from 'react'
+import { Button, Input } from '@fayz-ai/ui'
+import { useAuth } from '@fayz-ai/auth'
+import { useTranslation } from '@fayz-ai/core'
+import type { AuthProvider } from '@fayz-ai/core'
+
+export interface LoginPageProps {
+  appName?: string
+  logo?: React.ReactNode
+  loginLogo?: React.ReactNode
+  layout?: 'split' | 'centered'
+  tagline?: string
+  description?: string
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+}
+
+type View = 'login' | 'signup' | 'recovery'
+
+function providerLabel(provider: string): string {
+  return provider.charAt(0).toUpperCase() + provider.slice(1)
+}
+
+export function LoginPage({
+  appName = 'Fayz',
+  logo,
+  loginLogo,
+  layout = 'split',
+  tagline,
+  description,
+  showOAuth = false,
+  oauthProviders = ['google'],
+}: LoginPageProps) {
+  const t = useTranslation()
+  const tr = (key: string, fallback: string) => {
+    const v = t(key)
+    return !v || v === key || v.includes('{{') ? fallback : v
+  }
+  const { signIn, signUp, signInWithOAuth, resetPassword, isLoading, error } = useAuth()
+  const [view, setView] = React.useState<View>('login')
+  const [email, setEmail] = React.useState('')
+  const [password, setPassword] = React.useState('')
+  const [fullName, setFullName] = React.useState('')
+  const [notice, setNotice] = React.useState<string | null>(null)
+  const [submitting, setSubmitting] = React.useState(false)
+
+  const busy = submitting || isLoading
+  const brandLogo = loginLogo ?? logo
+  const heading = view === 'login'
+    ? tr('auth.login.title', 'Welcome back')
+    : view === 'signup'
+      ? tr('auth.signup.title', 'Create account')
+      : tr('auth.recovery.title', 'Reset password')
+  const subtitle = view === 'login'
+    ? tr('auth.login.enterCredentials', 'Enter your credentials to continue')
+    : view === 'signup'
+      ? tr('auth.signup.getStarted', 'Create your account to get started')
+      : tr('auth.recovery.resetSubtitle', 'Enter your email and we will send reset instructions')
+
+  async function submitLogin(e: React.FormEvent) {
+    e.preventDefault()
+    setNotice(null)
+    setSubmitting(true)
+    try {
+      await signIn(email, password)
+    } catch {
+      // error is surfaced by useAuth().error
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  async function submitSignup(e: React.FormEvent) {
+    e.preventDefault()
+    setNotice(null)
+    setSubmitting(true)
+    try {
+      await signUp(email, password, fullName)
+    } catch {
+      // error is surfaced by useAuth().error
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  async function submitRecovery(e: React.FormEvent) {
+    e.preventDefault()
+    setSubmitting(true)
+    try {
+      await resetPassword(email)
+      setNotice(tr('auth.recovery.sent', 'Password reset instructions sent.'))
+    } catch {
+      // error is surfaced by useAuth().error
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  async function submitOAuth(provider: AuthProvider) {
+    setSubmitting(true)
+    try {
+      await signInWithOAuth(provider)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const LoginForm = (
+    <form onSubmit={view === 'signup' ? submitSignup : view === 'recovery' ? submitRecovery : submitLogin} className="space-y-4">
+      {view === 'signup' && (
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-foreground" htmlFor="login-name">
+            {tr('auth.fullName', 'Full name')}
+          </label>
+          <Input id="login-name" value={fullName} onChange={(e) => setFullName(e.target.value)} required disabled={busy} />
+        </div>
+      )}
+      <div className="space-y-1.5">
+        <label className="text-sm font-medium text-foreground" htmlFor="login-email">
+          {tr('auth.email', 'Email')}
+        </label>
+        <Input
+          id="login-email"
+          type="email"
+          autoComplete="username"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+          disabled={busy}
+        />
+      </div>
+      {view !== 'recovery' && (
+        <div className="space-y-1.5">
+          <div className="flex items-center justify-between gap-3">
+            <label className="text-sm font-medium text-foreground" htmlFor="login-password">
+              {tr('auth.password', 'Password')}
+            </label>
+            {view === 'login' && (
+              <button type="button" className="text-xs font-medium text-primary hover:underline" onClick={() => setView('recovery')}>
+                {tr('auth.forgotPassword', 'Forgot password?')}
+              </button>
+            )}
+          </div>
+          <Input
+            id="login-password"
+            type="password"
+            autoComplete={view === 'signup' ? 'new-password' : 'current-password'}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            disabled={busy}
+          />
+        </div>
+      )}
+      {error && <p className="text-sm text-destructive">{String(error.message ?? error)}</p>}
+      {notice && <p className="text-sm text-success">{notice}</p>}
+      <Button type="submit" className="w-full" disabled={busy}>
+        {busy
+          ? tr('common.loading', 'Loading...')
+          : view === 'signup'
+            ? tr('auth.signUp', 'Sign up')
+            : view === 'recovery'
+              ? tr('auth.recovery.submit', 'Send reset link')
+              : tr('auth.signIn', 'Sign in')}
+      </Button>
+      {showOAuth && view === 'login' && oauthProviders.length > 0 && (
+        <div className="space-y-2">
+          {oauthProviders.map((provider) => (
+            <Button
+              key={provider}
+              type="button"
+              variant="outline"
+              className="w-full"
+              disabled={busy}
+              onClick={() => { void submitOAuth(provider) }}
+            >
+              {tr(`auth.oauth.${provider}`, `Continue with ${providerLabel(provider)}`)}
+            </Button>
+          ))}
+        </div>
+      )}
+    </form>
+  )
+
+  const viewSwitch = view === 'login' ? (
+    <p className="text-center text-sm text-muted-foreground">
+      {tr('auth.login.noAccount', 'Do not have an account?')}{' '}
+      <button type="button" onClick={() => setView('signup')} className="font-medium text-primary hover:underline">
+        {tr('auth.signUp', 'Sign up')}
+      </button>
+    </p>
+  ) : (
+    <p className="text-center text-sm text-muted-foreground">
+      {view === 'signup' ? tr('auth.signup.hasAccount', 'Already have an account?') : tr('auth.recovery.remembered', 'Remembered your password?')}{' '}
+      <button type="button" onClick={() => setView('login')} className="font-medium text-primary hover:underline">
+        {tr('auth.signIn', 'Sign in')}
+      </button>
+    </p>
+  )
+
+  if (layout === 'centered') {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-sidebar p-4">
+        <div className="relative w-full max-w-md rounded-2xl border border-border/50 bg-card p-8 shadow-2xl sm:p-10">
+          <div className="mb-8 text-center">
+            {brandLogo && <div className="mb-4 flex justify-center">{brandLogo}</div>}
+            <h1 className="text-2xl font-bold text-foreground">{heading}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+          </div>
+          <div className="space-y-6">
+            {LoginForm}
+            {viewSwitch}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex min-h-screen bg-sidebar">
+      <div className="relative hidden w-1/2 overflow-hidden lg:block">
+        <div className="absolute inset-0 bg-gradient-to-br from-sidebar-accent/50 via-transparent to-sidebar/80" />
+        <div className="absolute -left-20 -top-20 h-80 w-80 rounded-full bg-primary/10" />
+        <div className="absolute -bottom-10 -right-10 h-60 w-60 rounded-full bg-primary/5" />
+        <div className="absolute right-1/4 top-1/3 h-40 w-40 rounded-full bg-primary/5" />
+        <div className="relative flex h-full flex-col justify-end p-12">
+          <div className="space-y-4">
+            <p className="text-sm font-medium text-sidebar-muted">{appName}</p>
+            <h2 className="text-3xl font-bold text-sidebar-foreground">
+              {tagline ?? tr('auth.login.welcomeTo', `Welcome to ${appName}`)}
+            </h2>
+            {description && <p className="max-w-md text-sm leading-relaxed text-sidebar-muted">{description}</p>}
+            <div className="mt-8 flex items-center gap-3 rounded-xl bg-sidebar-accent/40 p-4">
+              <div className="flex -space-x-2">
+                {['bg-primary', 'bg-success', 'bg-warning'].map((bg, i) => (
+                  <div key={i} className={`${bg} h-8 w-8 rounded-full border-2 border-sidebar`} />
+                ))}
+              </div>
+              <p className="text-xs text-sidebar-foreground/80">
+                {tr('auth.login.socialProof', `${appName} keeps your operation moving.`)}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-1 flex-col lg:p-3 lg:pl-3">
+        <div className="flex flex-1 flex-col justify-center bg-background px-6 py-12 lg:rounded-[1.25rem] lg:px-16">
+          <div className="mx-auto w-full max-w-sm">
+            {brandLogo && <div className="mb-8">{brandLogo}</div>}
+            <div className="mb-8">
+              <h1 className="text-2xl font-bold text-foreground">{heading}</h1>
+              <p className="mt-1 text-sm text-muted-foreground">{subtitle}</p>
+            </div>
+            <div className="space-y-6">
+              {LoginForm}
+              {viewSwitch}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+LoginPage.displayName = 'AdminLoginPage'

package/src/app/config.ts

@@ -0,0 +1,146 @@
+import type { ComponentType, ReactNode } from 'react'
+import type {
+  AuthAdapter,
+  AuthProvider,
+  OrgAdapter,
+  PluginManifest,
+  ThemeMode,
+  LocaleConfig,
+  PermissionsConfig,
+} from '@fayz-ai/core'
+import type { SaasTheme } from '../shell/config/theme/tokens'
+import type { CreateThemeOptions } from '../shell/config/theme/utils'
+import type { PlanConfig } from '../shell/types/billing'
+
+// ---------------------------------------------------------------------------
+// Page registration
+// ---------------------------------------------------------------------------
+
+export type PageSection = 'main' | 'secondary' | 'settings'
+
+export interface CustomPage {
+  /** Route path, e.g. '/reports' */
+  path: string
+  /** Display label in navigation */
+  label?: string
+  /** Lucide icon name or any string identifier */
+  icon?: string
+  component?: ComponentType
+  section?: PageSection
+  position?: number
+  badge?: string | number
+  permission?: { feature: string; action: 'read' | 'create' | 'edit' | 'delete' }
+  children?: CustomPage[]
+}
+
+// ---------------------------------------------------------------------------
+// Sub-config types
+// ---------------------------------------------------------------------------
+
+export interface AuthConfig {
+  /** 'supabase' | 'mock' or bring your own AuthAdapter */
+  adapter?: 'supabase' | 'mock' | AuthAdapter
+  /** Redirect to login when no session is found (default: true) */
+  requireAuth?: boolean
+  loginLogo?: ReactNode
+  loginLayout?: 'split' | 'centered'
+  loginTagline?: string
+  loginDescription?: string
+  showOAuth?: boolean
+  oauthProviders?: Exclude<AuthProvider, 'email'>[]
+}
+
+export interface OrgConfig {
+  /** 'supabase' | 'mock' or bring your own OrgAdapter */
+  adapter?: 'supabase' | 'mock' | OrgAdapter
+  /** Support multiple orgs per user (default: true) */
+  multiOrg?: boolean
+  /** Auto-create an org when the user has none (default: true) */
+  autoCreate?: boolean
+}
+
+export interface ChatConfig {
+  enabled?: boolean
+  title?: string
+  systemPrompt?: string
+  apiEndpoint?: string
+}
+
+export interface FayzBillingConfig {
+  plans: PlanConfig[]
+  stripePublishableKey?: string
+  portalUrl?: string
+}
+
+// ---------------------------------------------------------------------------
+// Root config
+// ---------------------------------------------------------------------------
+
+export interface FayzAppConfig {
+  /** Application display name */
+  name: string
+  logo?: string | ReactNode
+
+  // -------------------------------------------------------------------------
+  // Data connection
+  // -------------------------------------------------------------------------
+  supabaseUrl?: string
+  supabaseAnonKey?: string
+
+  // -------------------------------------------------------------------------
+  // Auth
+  // -------------------------------------------------------------------------
+  auth?: AuthConfig
+
+  // -------------------------------------------------------------------------
+  // Organization / multi-tenancy
+  // -------------------------------------------------------------------------
+  org?: OrgConfig
+
+  // -------------------------------------------------------------------------
+  // Plugins
+  // -------------------------------------------------------------------------
+  plugins?: PluginManifest[]
+
+  // -------------------------------------------------------------------------
+  // Custom pages
+  // -------------------------------------------------------------------------
+  pages?: CustomPage[]
+
+  // -------------------------------------------------------------------------
+  // Theme
+  // -------------------------------------------------------------------------
+  theme?: CreateThemeOptions | SaasTheme
+  defaultThemeMode?: ThemeMode
+  /** Shell layout variant (default: 'sidebar') */
+  layout?: 'sidebar' | 'topbar' | 'minimal'
+  /** Wrap the main content in an inset "framed" card (default: true). The
+   *  sidebar itself is always flush/full-height. */
+  contentFrame?: boolean
+  /** How module-internal navigation renders. Defaults to 'tabs' for the
+   *  'sidebar' layout and 'rail' for 'topbar'. */
+  moduleNav?: 'rail' | 'tabs'
+  /** Page navigation animation applied to all nested navigations (route + module
+   *  view changes). Default: 'slide'. Set per repo/app for a different feel. */
+  navTransition?: 'slide' | 'fade' | 'none'
+
+  // -------------------------------------------------------------------------
+  // i18n
+  // -------------------------------------------------------------------------
+  locale?: LocaleConfig
+
+  // -------------------------------------------------------------------------
+  // Permissions
+  // -------------------------------------------------------------------------
+  permissions?: PermissionsConfig
+
+  // -------------------------------------------------------------------------
+  // Billing
+  // -------------------------------------------------------------------------
+  billing?: FayzBillingConfig
+
+  // -------------------------------------------------------------------------
+  // AI Chat
+  // -------------------------------------------------------------------------
+  chat?: ChatConfig
+}

package/src/app/createFayzApp.tsx

@@ -0,0 +1,254 @@
+import * as React from 'react'
+import type { AuthAdapter, OrgAdapter } from '@fayz-ai/core'
+import {
+  PluginRuntimeProvider,
+  resolvePluginRuntime,
+  I18nProvider,
+  coreTranslations,
+  mergeTranslations,
+  setCurrentLocale,
+} from '@fayz-ai/core'
+import { AuthProvider, createSupabaseAuthAdapter, createMockAuthAdapter } from '@fayz-ai/auth'
+import { NavTransitionProvider } from '@fayz-ai/ui'
+import { createFayzSupabaseClient, getFayzSupabaseClientOptional } from '../supabase/client'
+import { OrgProvider } from '../org/context'
+import { createSupabaseOrgAdapter } from '../org/adapters/supabase'
+import { createMockOrgAdapter } from '../org/adapters/mock'
+import { useOrganizationStore } from '../org/store'
+import { PermissionsProvider } from '../permissions/context'
+import { ToastProvider } from '../shell/components/notifications/ToastProvider'
+import { ChatFab, ChatPanel } from '../shell/components/chat'
+import { useBillingStore } from '../billing/store'
+import type { Plan } from '@fayz-ai/core'
+import type { PlanConfig } from '../shell/types/billing'
+import { useThemeStore } from '../shell/stores/theme.store'
+import { resolveTheme, type CreateThemeOptions } from '../shell/config/theme/utils'
+import type { SaasTheme } from '../shell/config/theme/tokens'
+import { AdminShell } from './AdminShell'
+import { useAdminPath } from './routing'
+import type { FayzAppConfig } from './config'
+
+// ---------------------------------------------------------------------------
+// Adapter resolution
+// ---------------------------------------------------------------------------
+
+function resolveAuthAdapter(config: FayzAppConfig): AuthAdapter {
+  const auth = config.auth
+  if (auth?.adapter && typeof auth.adapter === 'object') return auth.adapter as AuthAdapter
+
+  const strategy = auth?.adapter ?? (config.supabaseUrl ? 'supabase' : 'mock')
+  if (strategy === 'supabase') {
+    if (!config.supabaseUrl || !config.supabaseAnonKey) {
+      throw new Error(
+        "[@fayz-ai/saas] auth.adapter='supabase' requires supabaseUrl and supabaseAnonKey in FayzAppConfig.",
+      )
+    }
+    return createSupabaseAuthAdapter({
+      supabaseUrl: config.supabaseUrl,
+      supabaseAnonKey: config.supabaseAnonKey,
+      supabaseClient: getFayzSupabaseClientOptional() ?? undefined,
+    })
+  }
+  return createMockAuthAdapter()
+}
+
+function resolveOrgAdapter(config: FayzAppConfig): OrgAdapter {
+  const org = config.org
+  if (org?.adapter && typeof org.adapter === 'object') return org.adapter as OrgAdapter
+
+  const strategy = org?.adapter ?? (config.supabaseUrl ? 'supabase' : 'mock')
+  if (strategy === 'supabase') return createSupabaseOrgAdapter()
+  return createMockOrgAdapter(config.permissions?.defaultProfiles)
+}
+
+function buildI18nConfig(config: FayzAppConfig): {
+  defaultLocale: string
+  supported: string[]
+  translations: Record<string, Record<string, string>>
+} {
+  const defaultLocale = config.locale?.default ?? 'en'
+  const supported = config.locale?.supported ?? [defaultLocale, 'pt-BR']
+
+  const pluginTranslations: Array<Record<string, Record<string, string>>> = []
+  for (const plugin of config.plugins ?? []) {
+    if (plugin.locales) pluginTranslations.push(plugin.locales)
+  }
+
+  const translations = mergeTranslations(
+    coreTranslations,
+    ...pluginTranslations,
+    config.locale?.translations,
+  )
+
+  return { defaultLocale, supported, translations }
+}
+
+// ---------------------------------------------------------------------------
+// BillingInitializer — seeds the billing store from config on mount
+// ---------------------------------------------------------------------------
+
+function BillingInitializer({ config }: { config: FayzAppConfig }) {
+  const setPlans = useBillingStore((s) => s.setPlans)
+  React.useEffect(() => {
+    if (config.billing?.plans) setPlans(config.billing.plans.map(normalizeBillingPlan))
+  }, [config.billing, setPlans])
+  return null
+}
+
+function normalizeBillingPlan(plan: PlanConfig): Plan {
+  return {
+    id: plan.id,
+    name: plan.name,
+    description: plan.description,
+    price: plan.priceMonthly ?? plan.prices?.monthly ?? 0,
+    currency: plan.currency ?? 'USD',
+    interval: 'month',
+    features: plan.features,
+    highlighted: plan.popular,
+    stripePriceId: undefined,
+  }
+}
+
+function ThemeInitializer({ config }: { config: FayzAppConfig }) {
+  const initialize = useThemeStore((s) => s.initialize)
+  const setOverrides = useThemeStore((s) => s.setOverrides)
+  const setMode = useThemeStore((s) => s.setMode)
+
+  React.useEffect(() => {
+    if (config.theme) {
+      const isSaasTheme = 'brand' in config.theme && (
+        'radius' in config.theme || 'sidebar' in config.theme || 'font' in config.theme
+      )
+      const resolved = isSaasTheme
+        ? resolveTheme(config.theme as SaasTheme)
+        : config.theme as CreateThemeOptions
+      setOverrides(resolved)
+    }
+    if (config.defaultThemeMode && typeof window !== 'undefined' && !localStorage.getItem('saas-core:theme-mode')) {
+      setMode(config.defaultThemeMode)
+    }
+    initialize()
+  }, [config.defaultThemeMode, config.theme, initialize, setMode, setOverrides])
+
+  return null
+}
+
+// ---------------------------------------------------------------------------
+// AdminProviders — the provider stack shared by the createFayzApp/createSaasApp
+// sugar path AND the manifest-driven AdminScaffold. Resolves adapters + i18n
+// once (stable refs) and recomputes the plugin runtime reactively as the path
+// changes, so route-scoped widget visibility stays correct.
+//
+//   AuthProvider → OrgProvider → PluginRuntimeProvider
+//     → PermissionsProvider → I18nProvider → (BillingInitializer + children)
+// ---------------------------------------------------------------------------
+
+export function AdminProviders({ config, children }: { config: FayzAppConfig; children: React.ReactNode }) {
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+
+  // Resolve adapters / i18n once per config identity.
+  const resolved = React.useMemo(() => {
+    if (config.supabaseUrl && config.supabaseAnonKey) {
+      createFayzSupabaseClient(config.supabaseUrl, config.supabaseAnonKey)
+    }
+    const i18n = buildI18nConfig(config)
+    setCurrentLocale(i18n.defaultLocale)
+    return {
+      authAdapter: resolveAuthAdapter(config),
+      orgAdapter: resolveOrgAdapter(config),
+      i18n,
+      plugins: config.plugins ?? [],
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config])
+
+  // Recompute the plugin runtime when the hash path or tenant changes
+  // (route-scoped visibility + tenant-scoped plugin data providers).
+  const path = useAdminPath()
+  const runtime = React.useMemo(
+    () =>
+      resolvePluginRuntime({
+        plugins: resolved.plugins,
+        context: {
+          tenant: currentOrg
+            ? {
+                id: currentOrg.id,
+                slug: currentOrg.slug,
+                verticalId: currentOrg.verticalId,
+                plan: currentOrg.plan,
+              }
+            : null,
+          user: null,
+          currentPath: path,
+          matchedPath: path,
+          layout: config.layout ?? 'sidebar',
+        },
+      }),
+    [resolved.plugins, path, config.layout, currentOrg],
+  )
+
+  return (
+    <AuthProvider adapter={resolved.authAdapter}>
+      <OrgProvider adapter={resolved.orgAdapter} autoCreate={config.org?.autoCreate ?? true}>
+        <PluginRuntimeProvider value={runtime}>
+          <PermissionsProvider config={config.permissions}>
+            <I18nProvider value={resolved.i18n}>
+              <ThemeInitializer config={config} />
+              <BillingInitializer config={config} />
+              <ToastProvider />
+              <NavTransitionProvider value={config.navTransition ?? 'slide'}>
+                {children}
+              </NavTransitionProvider>
+              {config.chat?.enabled !== false && config.chat ? (
+                <>
+                  <ChatFab apiEndpoint={config.chat.apiEndpoint} systemPrompt={config.chat.systemPrompt} />
+                  <ChatPanel title={config.chat.title} apiEndpoint={config.chat.apiEndpoint} systemPrompt={config.chat.systemPrompt} />
+                </>
+              ) : null}
+            </I18nProvider>
+          </PermissionsProvider>
+        </PluginRuntimeProvider>
+      </OrgProvider>
+    </AuthProvider>
+  )
+}
+AdminProviders.displayName = 'AdminProviders'
+
+// ---------------------------------------------------------------------------
+// createFayzApp — declarative admin app factory (sugar over the manifest path;
+// equivalent to renderApp(defineSaas(config)), sharing AdminProviders +
+// AdminShell with the scaffold).
+//
+//   const App = createFayzApp({ name: 'Glow Studio', plugins: [...] })
+//   export default App
+// ---------------------------------------------------------------------------
+
+export function createFayzApp(config: FayzAppConfig): React.ComponentType {
+  function FayzApp({ children }: { children?: React.ReactNode }) {
+    return (
+      <AdminProviders config={config}>
+        {children ?? (
+          <AdminShell
+            appName={config.name}
+            logo={config.logo}
+            layout={config.layout}
+            contentFrame={config.contentFrame}
+            moduleNav={config.moduleNav}
+            pages={config.pages}
+            requireAuth={config.auth?.requireAuth}
+            loginTagline={config.auth?.loginTagline}
+            loginDescription={config.auth?.loginDescription}
+            loginLogo={config.auth?.loginLogo}
+            loginLayout={config.auth?.loginLayout}
+            showOAuth={config.auth?.showOAuth}
+            oauthProviders={config.auth?.oauthProviders}
+            showSettings
+            showOrgSettings={Boolean(config.org)}
+          />
+        )}
+      </AdminProviders>
+    )
+  }
+  FayzApp.displayName = `FayzApp(${config.name})`
+  return FayzApp
+}