@fayz-ai/saas 0.5.0 → 0.6.6

package/src/app/AdminShell.tsx

@@ -2,6 +2,8 @@ import * as React from 'react'
 import {
   AppShell,
   type NavigationItem,
+  type BottomNavItem,
+  type MobileHeaderVariant,
   ModuleLayoutProvider,
   PageTransition,
   type ModuleNavVariant,
@@ -14,13 +16,15 @@ import {
   Avatar,
   AvatarImage,
   AvatarFallback,
+  useLayoutStore,
 } from '@fayz-ai/ui'
+import { CommandPalette, type CommandItem } from '../shell/components/layout/CommandPalette'
 import { useOrganizationStore } from '../org/store'
 import { useAuth } from '@fayz-ai/auth'
+import { AuthGate } from '@fayz-ai/plugin-auth'
 import { usePluginRuntime, resolvePluginComponent, useTranslation } from '@fayz-ai/core'
 import type { PermissionAction, PluginNavigationEntry, PluginRouteDefinition, PluginSettingsTab } from '@fayz-ai/core'
 import { useAdminPath, navigateTo, matchRoute, routeScore } from './routing'
-import { LoginPage } from './LoginPage'
 import type { CustomPage } from './config'
 import type { AuthProvider } from '@fayz-ai/core'
 import { setEntityRouteMap } from '../lib/entity-routes'
@@ -55,12 +59,25 @@ export interface AdminShellProps {
   oauthProviders?: Exclude<AuthProvider, 'email'>[]
   showSettings?: boolean
   showOrgSettings?: boolean
+  /** Show the workspace/org switcher at the sidebar top. Default: true.
+   *  Single-org apps (config.org.multiOrg === false) get false from the
+   *  scaffold so B2C users never see an organization concept. */
+  showOrgSwitcher?: boolean
+  /** Show the branding ("Identidade Visual") + company "Geral" settings tabs.
+   *  Default: true. B2C apps pass false to hide org-identity settings. */
+  showBranding?: boolean
   /** Wrap the main content in an inset "framed" card (default: true). The
    *  sidebar is always flush/full-height. */
   contentFrame?: boolean
   /** How module-internal navigation renders. Defaults to 'tabs' for the
    *  'sidebar' layout and 'rail' for 'topbar'. */
   moduleNav?: ModuleNavVariant
+  /** Mobile bottom tab bar, passed straight through to AppShell. */
+  bottomNav?: BottomNavItem[]
+  /** Fired when a bottom-nav `action` item (e.g. the center "+") is tapped. */
+  onBottomNavAction?: (id: string) => void
+  /** Mobile header treatment (<md), passed straight through to AppShell. */
+  mobileHeader?: MobileHeaderVariant
 }
 
 // ---------------------------------------------------------------------------
@@ -196,10 +213,25 @@ function sectionOrder(section: NavigationItem['section']): number {
   return section === 'main' ? 0 : section === 'secondary' ? 1 : 2
 }
 
-function compareNavigation(a: OrderedNavigationItem, b: OrderedNavigationItem): number {
+function compareNavigation(a: NavigationItem & { position?: number }, b: NavigationItem & { position?: number }): number {
   const sectionDelta = sectionOrder(a.section) - sectionOrder(b.section)
   if (sectionDelta !== 0) return sectionDelta
-  return a.position - b.position
+  return (a.position ?? 0) - (b.position ?? 0)
+}
+
+function findModuleParent(
+  item: OrderedNavigationItem,
+  items: OrderedNavigationItem[],
+): OrderedNavigationItem | null {
+  const candidates = items
+    .filter((candidate) =>
+      candidate.section === item.section &&
+      candidate.route !== item.route &&
+      item.route.startsWith(`${candidate.route}/`)
+    )
+    .sort((a, b) => b.route.length - a.route.length)
+
+  return candidates[0] ?? null
 }
 
 function pageToNavigationItem(page: CustomPage, fallbackPosition: number): OrderedNavigationItem | null {
@@ -214,7 +246,8 @@ function pageToNavigationItem(page: CustomPage, fallbackPosition: number): Order
     permission: page.permission,
     position: page.position ?? fallbackPosition,
     children: page.children
-      ?.map((child, index) => pageToNavigationItem(child, index))
+      ?.filter((child) => child.nav !== false)
+      .map((child, index) => pageToNavigationItem(child, index))
       .filter((item): item is OrderedNavigationItem => Boolean(item)),
   }
 }
@@ -275,7 +308,7 @@ function buildSettingsTabs(
   return settingsTabs
 }
 
-function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSettings = true, showOrgSettings = false, contentFrame = true, moduleNav }: AdminShellProps) {
+function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSettings = true, showOrgSettings = false, showBranding = true, showOrgSwitcher = true, contentFrame = true, moduleNav, bottomNav, onBottomNavAction, mobileHeader }: AdminShellProps) {
   const runtime = usePluginRuntime()
   const t = useTranslation()
   const can = usePermissionOptional()
@@ -293,12 +326,49 @@ function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSe
       position: entry.position,
     }))
     for (const [index, page] of pages.entries()) {
+      // `nav: false` routes the page but keeps it out of the sidebar/topbar nav
+      // (mobile-only pages reached via bottomNav/avatar). Routes are still built
+      // from `pages` in collectPageRoutes below, so the page remains navigable.
+      if (page.nav === false) continue
       const item = pageToNavigationItem(page, index + 1000)
-      if (item) items.push(item)
+      if (!item) continue
+
+      const parent = findModuleParent(item, items)
+      if (parent) {
+        const children = parent.children ?? [{
+          ...parent,
+          id: `${parent.id}:index`,
+          children: undefined,
+          position: -1,
+        }]
+        if (!children.some((child) => child.route === item.route)) {
+          parent.children = [...children, item].sort(compareNavigation)
+        }
+        continue
+      }
+
+      items.push(item)
     }
     return items.sort(compareNavigation)
   }, [runtime.navigation, pages])
 
+  // Command palette (⌘K + the topbar Search button). The palette owns the ⌘K
+  // key listener, so it must be MOUNTED for the shortcut to work — the topbar
+  // Search button drives the same shared layout store.
+  const commandPaletteOpen = useLayoutStore((s) => s.commandPaletteOpen)
+  const setCommandPaletteOpen = useLayoutStore((s) => s.setCommandPaletteOpen)
+  const commandItems = React.useMemo<CommandItem[]>(() => {
+    const navGroup = tr('layout.commandPalette.navigation', 'Navigation')
+    const items: CommandItem[] = []
+    for (const nav of navigation) {
+      items.push({ id: nav.id, label: nav.label, icon: nav.icon, group: navGroup, action: () => navigateTo(nav.route) })
+      for (const child of nav.children ?? []) {
+        items.push({ id: child.id, label: `${nav.label} · ${child.label}`, icon: child.icon, group: navGroup, action: () => navigateTo(child.route) })
+      }
+    }
+    return items
+  }, [navigation])
+
   // Route table: plugin routes + custom pages, most-specific-first.
   const routes = React.useMemo<RouteEntry[]>(() => {
     const list: RouteEntry[] = []
@@ -362,7 +432,7 @@ function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSe
 
   const activeContent = ActiveComponent ? (
     match.route.path === '/settings' || match.route.path === '/settings/*'
-      ? <SettingsPage extraTabs={settingsTabs} />
+      ? <SettingsPage extraTabs={settingsTabs} showCompany={showBranding} showBranding={showBranding} />
       : <ActiveComponent {...activeParams} />
   ) : null
 
@@ -376,10 +446,14 @@ function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSe
       user={shellUser}
       pageTitle={activePageTitle}
       currentPath={path}
+      bottomNav={bottomNav}
+      onBottomNavAction={onBottomNavAction}
+      mobileHeader={mobileHeader}
       onNavigate={(route) => navigateTo(route)}
       onSignOut={() => { void signOut() }}
+      onProfile={() => navigateTo('/perfil')}
       onSettings={() => navigateTo('/settings')}
-      sidebarTopContent={<WorkspaceSwitcher />}
+      sidebarTopContent={showOrgSwitcher ? <WorkspaceSwitcher /> : undefined}
       userMenuSlot={
         <AdminUserMenu
           user={shellUser}
@@ -395,7 +469,7 @@ function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSe
         >
           {match?.route.fullBleed
             ? <div className="h-full min-h-0 overflow-hidden">{activeContent}</div>
-            : <div className="space-y-6 p-6">{activeContent}</div>}
+            : <div className="space-y-4 p-3 md:space-y-6 md:p-6">{activeContent}</div>}
         </PageTransition>
       ) : (
         <div className="flex h-full flex-col items-center justify-center p-12 text-center">
@@ -413,37 +487,31 @@ function AdminShellInner({ appName, layout = 'sidebar', logo, pages = [], showSe
         </div>
       )}
     </AppShell>
+    <CommandPalette
+      commands={commandItems}
+      open={commandPaletteOpen}
+      onOpenChange={setCommandPaletteOpen}
+    />
     </ModuleLayoutProvider>
   )
 }
 
 /** The shell + an auth gate in front of it. */
 export function AdminShell(props: AdminShellProps) {
-  const { isAuthenticated, isLoading } = useAuth()
-  const requireAuth = props.requireAuth ?? true
-
-  if (requireAuth && !isAuthenticated) {
-    if (isLoading) {
-      return (
-        <div className="flex min-h-screen items-center justify-center bg-background">
-          <span className="text-sm text-muted-foreground">Loading…</span>
-        </div>
-      )
-    }
-    return (
-      <LoginPage
-        appName={props.appName}
-        logo={props.logo}
-        loginLogo={props.loginLogo}
-        layout={props.loginLayout}
-        tagline={props.loginTagline}
-        description={props.loginDescription}
-        showOAuth={props.showOAuth}
-        oauthProviders={props.oauthProviders}
-      />
-    )
-  }
-
-  return <AdminShellInner {...props} />
+  return (
+    <AuthGate
+      requireAuth={props.requireAuth ?? true}
+      appName={props.appName}
+      logo={props.logo}
+      loginLogo={props.loginLogo}
+      layout={props.loginLayout}
+      tagline={props.loginTagline}
+      description={props.loginDescription}
+      showOAuth={props.showOAuth}
+      oauthProviders={props.oauthProviders}
+    >
+      <AdminShellInner {...props} />
+    </AuthGate>
+  )
 }
 AdminShell.displayName = 'AdminShell'

package/src/app/LoginPage.tsx

@@ -1,264 +1,2 @@
-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'
+export { LoginPage } from '@fayz-ai/plugin-auth'
+export type { LoginPageProps } from '@fayz-ai/plugin-auth'