@fayz-ai/saas 0.8.0 → 0.8.2

package/src/shell/components/settings/SettingsPage.tsx

@@ -7,11 +7,31 @@ import { ConnectedUserProfile } from './ConnectedUserProfile'
 import { ConnectedSecuritySettings } from './ConnectedSecuritySettings'
 import { ConnectedBrandingSettings } from './ConnectedBrandingSettings'
 
-interface SettingsTab {
+export interface SettingsTab {
   id: string
   label: string
   icon?: React.ReactNode
+  /** Lucide icon name — used when these tabs are rendered in the app sidebar
+   *  (which resolves icons by name) instead of in the in-page nav. */
+  iconName?: string
   component: React.ReactNode
+  /** Plugin-contributed tab — draws the core/plugins divider. */
+  isPlugin?: boolean
+}
+
+/** The core (non-plugin, non-org) settings tabs. Exported so the shell can
+ *  build the same list for the contextual /settings sidebar. */
+export function useCoreSettingsTabs({
+  showCompany = true,
+  showBranding = true,
+}: { showCompany?: boolean; showBranding?: boolean } = {}): SettingsTab[] {
+  const { t } = useTranslation()
+  return React.useMemo(() => [
+    ...(showCompany ? [{ id: 'general', label: t('settings.general'), icon: <Building2 className="h-4 w-4" />, iconName: 'Building2', component: <ConnectedCompanySettings /> }] : []),
+    { id: 'profile', label: t('settings.profile'), icon: <User className="h-4 w-4" />, iconName: 'User', component: <ConnectedUserProfile /> },
+    { id: 'security', label: t('settings.security'), icon: <Shield className="h-4 w-4" />, iconName: 'Shield', component: <ConnectedSecuritySettings /> },
+    ...(showBranding ? [{ id: 'branding', label: t('settings.branding'), icon: <Palette className="h-4 w-4" />, iconName: 'Palette', component: <ConnectedBrandingSettings /> }] : []),
+  ], [t, showCompany, showBranding])
 }
 
 interface SettingsPageProps {
@@ -28,6 +48,16 @@ interface SettingsPageProps {
   /** Show the branding ("Identidade Visual") tab. Default: true. Ignored when
    *  `tabs` is supplied explicitly. */
   showBranding?: boolean
+  /** The shell already renders this nav (contextual /settings sidebar), so the
+   *  desktop in-page nav column is dropped and the content spans the page.
+   *  Mobile keeps its master/detail list — the sidebar is a drawer there. */
+  hideNav?: boolean
+  /** Controlled active tab. When provided (the shell owns the settings nav and
+   *  drives it from the URL), this — not the internal hashchange state — decides
+   *  which tab's content renders, so navigating between tabs from the shell
+   *  sidebar reliably swaps the content. Uncontrolled (undefined) keeps the
+   *  self-managed behaviour used by standalone <SettingsPage> mounts. */
+  activeTabId?: string
 }
 
 export function SettingsPage({
@@ -39,19 +69,21 @@ export function SettingsPage({
   afterContent,
   showCompany = true,
   showBranding = true,
+  hideNav = false,
+  activeTabId,
 }: SettingsPageProps) {
   const { t } = useTranslation()
 
-  const defaultTabs: SettingsTab[] = React.useMemo(() => [
-    ...(showCompany ? [{ id: 'general', label: t('settings.general'), icon: <Building2 className="h-4 w-4" />, component: <ConnectedCompanySettings /> }] : []),
-    { id: 'profile', label: t('settings.profile'), icon: <User className="h-4 w-4" />, component: <ConnectedUserProfile /> },
-    { id: 'security', label: t('settings.security'), icon: <Shield className="h-4 w-4" />, component: <ConnectedSecuritySettings /> },
-    ...(showBranding ? [{ id: 'branding', label: t('settings.branding'), icon: <Palette className="h-4 w-4" />, component: <ConnectedBrandingSettings /> }] : []),
-  ], [t, showCompany, showBranding])
+  const defaultTabs = useCoreSettingsTabs({ showCompany, showBranding })
 
   const baseTabs = tabs ?? defaultTabs
   const resolvedTabs = extraTabs ? [...baseTabs, ...extraTabs] : baseTabs
 
+  // Controlled mode: the shell owns the settings nav (contextual sidebar) and
+  // passes the active tab parsed from the URL. In that mode the URL — not the
+  // internal hashchange state below — is the single source of truth.
+  const controlled = activeTabId !== undefined
+
   // Detect active tab from URL: /settings/financial/... → 'financial'
   function getTabFromHash(): string | null {
     const hash = typeof window !== 'undefined' ? window.location.hash.slice(1) || '/' : '/'
@@ -79,12 +111,15 @@ export function SettingsPage({
   // Desktop always shows a selected tab; when none is chosen yet (landing on
   // /settings), default to the first tab — 'general'. Mobile keeps its
   // list-first master/detail behaviour (driven by the raw activeTab below).
-  const desktopTab = activeTab ?? resolvedTabs[0]?.id ?? null
+  // Controlled mode uses the shell-supplied tab instead of internal state.
+  const effectiveTab = controlled ? activeTabId ?? null : activeTab
+  const desktopTab = effectiveTab ?? resolvedTabs[0]?.id ?? null
   const activeContent = desktopTab ? resolvedTabs.find((t) => t.id === desktopTab)?.component : null
-  const activeLabel = activeTab ? resolvedTabs.find((t) => t.id === activeTab)?.label : null
+  const desktopLabel = desktopTab ? resolvedTabs.find((t) => t.id === desktopTab)?.label : null
 
-  // On mobile: show list OR content. On desktop: show both.
-  const showingContent = activeTab !== null
+  // On mobile: show list OR content. On desktop: show both. In controlled mode
+  // the shell drawer holds the nav list, so SettingsPage always shows content.
+  const showingContent = controlled ? true : activeTab !== null
 
   const handleSelectTab = (tabId: string) => {
     setActiveTab(tabId)
@@ -100,7 +135,7 @@ export function SettingsPage({
     <ul className="space-y-0.5">
       {resolvedTabs.map((tab, i) => (
         <React.Fragment key={tab.id}>
-          {(tab as any).isPlugin && (i === 0 || !(resolvedTabs[i - 1] as any)?.isPlugin) && (
+          {tab.isPlugin && (i === 0 || !resolvedTabs[i - 1]?.isPlugin) && (
             <li className="py-2">
               <div className="border-t" />
               <p className="px-3 pt-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{t('common.plugins')}</p>
@@ -129,8 +164,9 @@ export function SettingsPage({
 
   return (
     <div className={cn('space-y-6', className)}>
-      {/* Mobile: back button + tab title when viewing content */}
-      {showingContent && (
+      {/* Mobile: back button + tab title when viewing content. Skipped in
+          controlled mode — the shell drawer owns the settings list + back. */}
+      {!controlled && showingContent && (
         <button
           onClick={handleBack}
           className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors md:hidden"
@@ -140,19 +176,25 @@ export function SettingsPage({
         </button>
       )}
 
-      {/* Header — hidden on mobile when viewing content */}
+      {/* Header — hidden on mobile when viewing content. With the nav in the
+          shell sidebar the page title is the selected section, not "Settings"
+          (the shell top bar already says that). */}
       <div className={cn(showingContent && 'hidden md:block')}>
-        <h1 className="text-2xl font-bold tracking-tight">{t('settings.title')}</h1>
-        <p className="text-sm text-muted-foreground">
-          {t('settings.subtitle')}
-        </p>
+        <h1 className="text-2xl font-bold tracking-tight">
+          {hideNav ? desktopLabel ?? t('settings.title') : t('settings.title')}
+        </h1>
+        {!hideNav && (
+          <p className="text-sm text-muted-foreground">
+            {t('settings.subtitle')}
+          </p>
+        )}
       </div>
 
       {beforeContent}
 
-      {/* Desktop: side-by-side layout */}
+      {/* Desktop: side-by-side layout, or content-only when the shell owns the nav */}
       <div className="hidden md:flex md:gap-6">
-        <nav className="w-52 shrink-0">{renderNav(desktopTab)}</nav>
+        {!hideNav && <nav className="w-52 shrink-0">{renderNav(desktopTab)}</nav>}
         <div className="min-w-0 flex-1">{activeContent ?? resolvedTabs[0]?.component}</div>
       </div>
 

package/src/shell/hooks/index.ts

@@ -1,8 +1,7 @@
 export { useAuth } from './useAuth'
 export { useTenant } from './useTenant'
-export { usePermission } from './usePermission'
+export { useSystemPermission } from './useSystemPermission'
 export { useLayout } from './useLayout'
-export { useBilling } from './useBilling'
 export { useNotifications } from './useNotifications'
 export { useTranslation } from './useTranslation'
 export { useFormatters } from './useFormatters'
@@ -15,4 +14,6 @@ export { useModuleNavigation } from './useModuleNavigation'
 export type { NavDirection, DepthMap } from './useModuleNavigation'
 export { usePluginPrefs, getPluginPref, setPluginPref } from './usePluginPrefs'
 export type { PluginPrefs } from './usePluginPrefs'
+export { useTenantPluginSettings } from './useTenantPluginSettings'
+export type { TenantPluginSettings } from './useTenantPluginSettings'
 export { useFieldRules } from './useFieldRules'

package/src/shell/hooks/useAITools.ts

@@ -1,6 +1,8 @@
 import * as React from 'react'
 import { usePluginRuntimeOptional } from '../lib/plugins'
-import { coreAITools, generateRegistryTools, formatToolSignature } from '../lib/core-ai-tools'
+import { useAccessOptional } from '../../access/context'
+import { getAllEntities } from '@fayz-ai/core'
+import { coreAITools, buildDataPrimitiveTools, formatToolSignature } from '../lib/core-ai-tools'
 import type { PluginAITool, AIToolSuggestion } from '../types/plugins'
 
 export interface ResolvedSuggestion extends AIToolSuggestion {
@@ -49,40 +51,42 @@ function detectActivePluginId(runtime: ReturnType<typeof usePluginRuntimeOptiona
 
 export function useAITools(): {
   tools: PluginAITool[]
+  /** Plugin owning the current route, or null on non-plugin pages. */
+  activePluginId: string | null
   suggestions: ResolvedSuggestion[]
   /** Suggestions from the currently active plugin only (empty on non-plugin pages) */
   contextualSuggestions: ResolvedSuggestion[]
   toolGroups: ResolvedToolGroup[]
 } {
   const runtime = usePluginRuntimeOptional()
+  const access = useAccessOptional()
 
   return React.useMemo(() => {
     const hasPermission = runtime?.context.hasPermission
+    const can = access.can
     const verticalId = runtime?.context.tenant?.verticalId
     const activePluginId = detectActivePluginId(runtime)
 
-    // Collect all tools: core + plugin-declared + auto-generated from registries
-    const allTools: PluginAITool[] = [...coreAITools]
-
-    if (runtime) {
-      allTools.push(...runtime.aiTools)
-
-      // Auto-generate registry tools for active plugins
-      for (const [pluginId, registries] of runtime.registries) {
-        const autoTools = generateRegistryTools(pluginId, registries)
-        // Only add auto-tools that weren't explicitly declared
-        const declaredIds = new Set(runtime.aiTools.map((t) => t.id))
-        for (const tool of autoTools) {
-          if (!declaredIds.has(tool.id)) {
-            allTools.push(tool)
-          }
-        }
-      }
-    }
-
-    // Filter by permission
+    // Collect all tools: core + the TWO data primitives (searchRecords/
+    // queryData over every CRUD entity and plugin registry — the target is a
+    // parameter, its read permission checked per call) + plugin-declared.
+    const allTools: PluginAITool[] = [
+      ...coreAITools,
+      ...buildDataPrimitiveTools({
+        entities: getAllEntities(),
+        registries: runtime?.registries ?? new Map(),
+        queryEntities: runtime?.activePlugins.flatMap((p) => p.queryEntities ?? []) ?? [],
+      }),
+    ]
+    if (runtime) allTools.push(...runtime.aiTools)
+
+    // Filter by role × plan. UX only — the REAL authorization runs server-side
+    // (broker catalog filter) and in the guarded executor (checkAccess/
+    // guardLimit); hiding here just keeps the visible catalog honest. Falls
+    // back to the runtime's role-only check when no AccessProvider is mounted.
     const tools = allTools.filter((tool) => {
       if (!tool.permission) return true
+      if (can) return can(tool.permission.feature, tool.permission.action).allowed
       if (!hasPermission) return true
       return hasPermission(tool.permission)
     })
@@ -134,6 +138,6 @@ export function useAITools(): {
       toolGroups.push({ category, tools: groupTools })
     }
 
-    return { tools, suggestions, contextualSuggestions, toolGroups }
-  }, [runtime])
+    return { tools, activePluginId, suggestions, contextualSuggestions, toolGroups }
+  }, [runtime, access.can])
 }