@fayz-ai/saas 0.1.6

package/src/shell/components/organization/TenantOnboarding.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react'
+import { Building2, ArrowRight, Check, Loader2 } from 'lucide-react'
+import { Button } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@fayz-ai/ui'
+import { cn } from '../../lib/cn'
+import { useTranslation } from '../../hooks/useTranslation'
+import { useOrgAdapter } from '../../lib/org-context'
+import { useAuthStore } from '../../stores/auth.store'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import type { CreateOrgOptions } from '../../types/org-adapter'
+
+const TIMEZONES = [
+  { value: 'America/Sao_Paulo', label: 'Brasilia (BRT)' },
+  { value: 'America/New_York', label: 'Eastern (US)' },
+  { value: 'America/Chicago', label: 'Central (US)' },
+  { value: 'America/Los_Angeles', label: 'Pacific (US)' },
+  { value: 'Europe/London', label: 'London (GMT)' },
+  { value: 'Europe/Paris', label: 'Paris (CET)' },
+  { value: 'UTC', label: 'UTC' },
+]
+
+const CURRENCIES = [
+  { value: 'BRL', label: 'BRL - Real' },
+  { value: 'USD', label: 'USD - Dollar' },
+  { value: 'EUR', label: 'EUR - Euro' },
+  { value: 'GBP', label: 'GBP - Pound' },
+]
+
+interface TenantOnboardingProps {
+  verticalId?: string
+  appName?: string
+  logo?: React.ReactNode
+}
+
+export function TenantOnboarding({ verticalId, appName, logo }: TenantOnboardingProps) {
+  const { t } = useTranslation()
+  const adapter = useOrgAdapter()
+  const user = useAuthStore((s) => s.user)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+  const setUserOrgs = useOrganizationStore((s) => s.setUserOrgs)
+  const setMembers = useOrganizationStore((s) => s.setMembers)
+  const setProfiles = usePermissionsStore((s) => s.setProfiles)
+  const setCurrentProfile = usePermissionsStore((s) => s.setCurrentProfile)
+
+  const [step, setStep] = React.useState(0) // 0 = company, 1 = preferences, 2 = creating
+  const [error, setError] = React.useState('')
+  const [companyName, setCompanyName] = React.useState('')
+  const [timezone, setTimezone] = React.useState('America/Sao_Paulo')
+  const [currency, setCurrency] = React.useState('BRL')
+
+  const handleCreate = async () => {
+    if (!user || !companyName.trim()) return
+
+    setStep(2) // Show "Creating..." state
+    setError('')
+
+    try {
+      const options: CreateOrgOptions = {
+        verticalId: verticalId ?? undefined,
+        timezone,
+        currency,
+      }
+
+      const org = await adapter.createOrg(companyName.trim(), user.id, options)
+      setCurrentOrg(org)
+
+      const [orgs, members, profiles] = await Promise.all([
+        adapter.listUserOrgs(user.id),
+        adapter.listMembers(org.id),
+        adapter.listProfiles(org.id),
+      ])
+
+      setUserOrgs(orgs)
+      setMembers(members)
+      setProfiles(profiles)
+
+      const myMembership = members.find((m) => m.userId === user.id)
+      if (myMembership) {
+        const profile = profiles.find((p) => p.id === myMembership.profileId)
+        setCurrentProfile(profile ?? null)
+      }
+    } catch (err: any) {
+      setError(err?.message ?? 'Failed to create workspace')
+      setStep(1) // Go back to last form step
+    }
+  }
+
+  // Creating state — animated loading inside the same frame
+  if (step === 2) {
+    return (
+      <div className="saas-page-enter space-y-6 text-center">
+        <Loader2 className="mx-auto h-8 w-8 animate-spin text-primary" />
+        <div>
+          <h2 className="text-lg font-semibold">{t('organization.onboarding.settingUp')}</h2>
+          <p className="text-sm text-muted-foreground mt-1">{t('organization.onboarding.oneMoment')}</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="saas-page-enter space-y-6">
+      {/* Header */}
+      <div className="text-center">
+        <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10">
+          <Building2 className="h-5 w-5 text-primary" />
+        </div>
+        <h2 className="text-xl font-bold">{t('organization.onboarding.setupWorkspace')}</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          {step === 0 ? t('organization.onboarding.whatName') : t('organization.onboarding.preferences')}
+        </p>
+      </div>
+
+      {/* Step 0: Company name */}
+      {step === 0 && (
+        <div className="saas-nav-forward space-y-4">
+          <div>
+            <label className="text-sm font-medium">{t('organization.onboarding.workspaceName')}</label>
+            <Input
+              value={companyName}
+              onChange={(e) => { setCompanyName(e.target.value); setError('') }}
+              placeholder="My Company"
+              autoFocus
+              onKeyDown={(e) => { if (e.key === 'Enter' && companyName.trim()) setStep(1) }}
+            />
+          </div>
+          <Button className="w-full" onClick={() => setStep(1)} disabled={!companyName.trim()}>
+            {t('common.continue')} <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* Step 1: Regional preferences */}
+      {step === 1 && (
+        <div className="saas-nav-forward space-y-4">
+          <div>
+            <label className="text-sm font-medium">{t('organization.onboarding.timezone')}</label>
+            <Select value={timezone} onValueChange={setTimezone}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {TIMEZONES.map((tz) => (
+                  <SelectItem key={tz.value} value={tz.value}>{tz.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div>
+            <label className="text-sm font-medium">{t('organization.onboarding.currency')}</label>
+            <Select value={currency} onValueChange={setCurrency}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {CURRENCIES.map((c) => (
+                  <SelectItem key={c.value} value={c.value}>{c.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+
+          <div className="flex gap-3">
+            <Button variant="outline" className="flex-1" onClick={() => setStep(0)}>{t('common.back')}</Button>
+            <Button className="flex-1" onClick={handleCreate}>
+              {t('organization.onboarding.createWorkspace')} <Check className="ml-2 h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/shell/components/organization/index.ts

@@ -0,0 +1,7 @@
+export { OrgSwitcher } from './OrgSwitcher'
+export { OrgInitializer } from './OrgInitializer'
+export { PermissionGate } from './PermissionGate'
+export { PermissionMatrixEditor } from './PermissionMatrixEditor'
+export { PermissionProfilesTab } from './PermissionProfilesTab'
+export { TeamTab } from './TeamTab'
+export { InviteMemberDialog } from './InviteMemberDialog'

package/src/shell/components/plugins/PluginSettingsPanel.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useMemo } from 'react'
+import { ChevronLeft, Settings } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useTranslation } from '../../hooks/useTranslation'
+import { ICON_MAP } from '@fayz-ai/ui'
+import type { PluginRegistryDef } from '../../types/plugins'
+import type { EntityDef } from '../../types/crud'
+import { createCrudStore } from '../../../stores/createCrudStore'
+import { resolveDataProvider } from '@fayz-ai/core'
+import { CrudPage } from '../../../crud/CrudPage'
+
+// ---------------------------------------------------------------------------
+// Settings tab definition — General, custom tabs, and registry tabs all unified
+// ---------------------------------------------------------------------------
+
+export interface SettingsPanelTab {
+  id: string
+  label: string
+  icon?: string
+  content: React.ReactNode
+}
+
+// ---------------------------------------------------------------------------
+// Internal: CRUD view for a registry
+// ---------------------------------------------------------------------------
+
+function RegistryCrudView({ registry, basePath }: { registry: PluginRegistryDef; basePath: string }) {
+  const useStore = useMemo(() => {
+    const mockData = (registry.mockData ?? registry.seedData ?? []) as any[]
+    const provider = resolveDataProvider(registry.entity as EntityDef<any>, mockData)
+    return createCrudStore(provider)
+  }, [registry.id])
+
+  return (
+    <CrudPage
+      entityDef={registry.entity as EntityDef<any>}
+      useStore={useStore as any}
+      basePath={basePath}
+      display={registry.display === 'cards' ? 'cards' : 'table'}
+      readOnly={registry.readOnly}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Plugin settings panel
+// ---------------------------------------------------------------------------
+
+export function PluginSettingsPanel({ title, subtitle, generalSettings, registries, customTabs, routeBase, onClose }: {
+  title: string
+  subtitle?: string
+  /** General preferences component */
+  generalSettings?: React.ReactNode
+  /** CRUD registries — each becomes its own tab */
+  registries?: PluginRegistryDef[]
+  /** Additional custom tabs (e.g., Pipeline config for CRM) */
+  customTabs?: SettingsPanelTab[]
+  /** Hash route base for CRUD sub-routing */
+  routeBase: string
+  /** Called when back button is clicked. If not provided, back button is hidden. */
+  onClose?: () => void
+}) {
+  const { t } = useTranslation()
+
+  // Translate registry entity name: try t('registry.{id}'), fallback to raw name
+  const regLabel = (id: string, fallback: string) => {
+    const key = `registry.${id}`
+    const translated = t(key)
+    return translated === key ? fallback : translated
+  }
+
+  // Build unified tab list: General → custom tabs → registry tabs
+  const tabs = useMemo(() => {
+    const list: { id: string; label: string; icon?: string; type: 'general' | 'custom' | 'registry'; registryDef?: PluginRegistryDef }[] = []
+
+    if (generalSettings) {
+      list.push({ id: '_general', label: t('settings.general'), icon: 'Settings', type: 'general' })
+    }
+
+    if (customTabs) {
+      for (const tab of customTabs) {
+        list.push({ id: `_custom_${tab.id}`, label: tab.label, icon: tab.icon, type: 'custom' })
+      }
+    }
+
+    if (registries) {
+      for (const reg of registries) {
+        list.push({ id: reg.id, label: regLabel(reg.id, reg.entity.name), icon: reg.icon, type: 'registry', registryDef: reg })
+      }
+    }
+
+    return list
+  }, [generalSettings, customTabs, registries, t])
+
+  // Always use hash routing — the app router now prefix-matches /settings/*
+  const useHashRouting = true
+
+  function getActiveFromHash(): string {
+    if (!useHashRouting) return tabs[0]?.id ?? ''
+    const hash = window.location.hash.slice(1) || '/'
+    if (hash.startsWith(routeBase + '/')) {
+      const rest = hash.slice(routeBase.length + 1).split('/')[0]
+      const match = tabs.find((t) => t.id === rest)
+      if (match) return match.id
+    }
+    return tabs[0]?.id ?? ''
+  }
+
+  const [activeTab, setActiveTab] = useState(getActiveFromHash)
+
+  React.useEffect(() => {
+    if (!useHashRouting) return
+    const handler = () => setActiveTab(getActiveFromHash())
+    window.addEventListener('hashchange', handler)
+    return () => window.removeEventListener('hashchange', handler)
+  }, [routeBase, tabs, useHashRouting])
+
+  function switchTab(tabId: string) {
+    setActiveTab(tabId)
+    if (useHashRouting) {
+      window.location.hash = `${routeBase}/${tabId}`
+    }
+  }
+
+  const activeTabDef = tabs.find((t) => t.id === activeTab) ?? tabs[0]
+  const customTabContent = customTabs?.find((t) => `_custom_${t.id}` === activeTab)
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        {onClose && (
+          <button onClick={onClose} className="flex h-8 w-8 items-center justify-center rounded-lg border hover:bg-muted bg-card shadow-button active:shadow-button-inset transition-colors">
+            <ChevronLeft className="h-4 w-4" />
+          </button>
+        )}
+        <div>
+          <h2 className="text-lg font-bold">{title}</h2>
+          {subtitle && <p className="text-xs text-muted-foreground">{subtitle}</p>}
+        </div>
+      </div>
+
+      {/* Unified tabs — underline style */}
+      <div className="flex gap-0.5 overflow-x-auto border-b scrollbar-none" style={{ scrollbarWidth: 'none' }}>
+        {tabs.map((tab) => {
+          const Icon = tab.icon ? (ICON_MAP[tab.icon] ?? null) : null
+          const active = tab.id === activeTab
+          return (
+            <button
+              key={tab.id}
+              onClick={() => switchTab(tab.id)}
+              className={cn(
+                'flex items-center gap-1.5 whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors shrink-0 border-b-2 -mb-px',
+                active
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted',
+              )}
+            >
+              {Icon && <Icon className="h-3.5 w-3.5" />}
+              {tab.label}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Description for registry tabs */}
+      {activeTabDef?.type === 'registry' && activeTabDef.registryDef?.description && (
+        <p className="text-xs text-muted-foreground">{regLabel(activeTabDef.id + '.description', activeTabDef.registryDef.description)}</p>
+      )}
+
+      {/* Content */}
+      {activeTabDef?.type === 'general' && generalSettings && (
+        <div>{generalSettings}</div>
+      )}
+
+      {activeTabDef?.type === 'custom' && customTabContent && (
+        <div>{customTabContent.content}</div>
+      )}
+
+      {activeTabDef?.type === 'registry' && activeTabDef.registryDef && (
+        <RegistryCrudView
+          key={activeTabDef.id}
+          registry={activeTabDef.registryDef}
+          basePath={`${routeBase}/${activeTabDef.id}`}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,255 @@
+import * as React from 'react'
+import { Upload, Save, X } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Button } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { TenantSettings } from '../../types'
+
+interface BrandingSettingsProps {
+  branding?: TenantSettings['branding'] | null
+  onSave?: (branding: TenantSettings['branding'], assets?: {
+    logoFile?: File | null
+    faviconFile?: File | null
+  }) => void
+}
+
+interface FileUploadProps {
+  label: string
+  accept: string
+  currentUrl?: string
+  onFileSelect: (file: File) => void
+  onClear?: () => void
+  hint?: string
+}
+
+function FileUploadField({
+  label,
+  accept,
+  currentUrl,
+  onFileSelect,
+  onClear,
+  hint,
+}: FileUploadProps) {
+  const { t } = useTranslation()
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const [preview, setPreview] = React.useState<string | null>(null)
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      onFileSelect(file)
+      const url = URL.createObjectURL(file)
+      setPreview(url)
+    }
+    if (e.target) {
+      e.target.value = ''
+    }
+  }
+
+  const displayUrl = preview ?? currentUrl
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">{label}</label>
+      <div className="flex items-center gap-4">
+        {displayUrl ? (
+          <div className="relative">
+            <img
+              src={displayUrl}
+              alt={label}
+              className="h-16 w-16 rounded-md border object-contain p-1"
+            />
+            {onClear && (
+              <button
+                type="button"
+                onClick={() => {
+                  onClear()
+                  setPreview(null)
+                }}
+                className="absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-destructive-foreground"
+                aria-label={`Remove ${label.toLowerCase()}`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="flex h-16 w-16 items-center justify-center rounded-md border border-dashed">
+            <Upload className="h-5 w-5 text-muted-foreground/50" />
+          </div>
+        )}
+
+        <div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => inputRef.current?.click()}
+          >
+            {t('settings.branding.chooseFile')}
+          </Button>
+          {hint && (
+            <p className="mt-1 text-xs text-muted-foreground">{hint}</p>
+          )}
+        </div>
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className="hidden"
+        onChange={handleChange}
+      />
+    </div>
+  )
+}
+
+export function BrandingSettings({ branding, onSave }: BrandingSettingsProps) {
+  const { t } = useTranslation()
+  const [primaryColor, setPrimaryColor] = React.useState(branding?.primaryColor ?? '#000000')
+  const [accentColor, setAccentColor] = React.useState(branding?.accentColor ?? '#6366f1')
+  const [logoFile, setLogoFile] = React.useState<File | null>(null)
+  const [faviconFile, setFaviconFile] = React.useState<File | null>(null)
+  const [logoUrl, setLogoUrl] = React.useState(branding?.logoUrl ?? '')
+  const [faviconUrl, setFaviconUrl] = React.useState(branding?.faviconUrl ?? '')
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (branding) {
+      setPrimaryColor(branding.primaryColor ?? '#000000')
+      setAccentColor(branding.accentColor ?? '#6366f1')
+      setLogoUrl(branding.logoUrl ?? '')
+      setFaviconUrl(branding.faviconUrl ?? '')
+    }
+  }, [branding])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!onSave) return
+
+    setSaving(true)
+    try {
+      await onSave({
+        primaryColor,
+        accentColor,
+        logoUrl,
+        faviconUrl,
+      }, {
+        logoFile,
+        faviconFile,
+      })
+      setLogoFile(null)
+      setFaviconFile(null)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t('settings.branding.title')}</CardTitle>
+          <CardDescription>
+            {t('settings.branding.subtitle')}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="grid gap-6 sm:grid-cols-2">
+            <div className="space-y-2">
+              <label htmlFor="primary-color" className="text-sm font-medium">
+                {t('settings.branding.primaryColor')}
+              </label>
+              <div className="flex items-center gap-3">
+                <input
+                  type="color"
+                  id="primary-color"
+                  value={primaryColor}
+                  onChange={(e) => setPrimaryColor(e.target.value)}
+                  className="h-10 w-10 cursor-pointer rounded-md border bg-transparent p-0.5"
+                />
+                <Input
+                  value={primaryColor}
+                  onChange={(e) => setPrimaryColor(e.target.value)}
+                  placeholder="#000000"
+                  className="flex-1"
+                  maxLength={7}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label htmlFor="accent-color" className="text-sm font-medium">
+                {t('settings.branding.accentColor')}
+              </label>
+              <div className="flex items-center gap-3">
+                <input
+                  type="color"
+                  id="accent-color"
+                  value={accentColor}
+                  onChange={(e) => setAccentColor(e.target.value)}
+                  className="h-10 w-10 cursor-pointer rounded-md border bg-transparent p-0.5"
+                />
+                <Input
+                  value={accentColor}
+                  onChange={(e) => setAccentColor(e.target.value)}
+                  placeholder="#6366f1"
+                  className="flex-1"
+                  maxLength={7}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-md border p-4">
+            <p className="mb-3 text-sm font-medium">{t('settings.branding.preview')}</p>
+            <div className="flex items-center gap-3">
+              <div
+                className="h-10 w-24 rounded-md"
+                style={{ backgroundColor: primaryColor }}
+              />
+              <div
+                className="h-10 w-24 rounded-md"
+                style={{ backgroundColor: accentColor }}
+              />
+            </div>
+          </div>
+
+          <FileUploadField
+            label="Logo"
+            accept="image/png,image/jpeg,image/svg+xml,image/webp"
+            currentUrl={logoUrl || undefined}
+            onFileSelect={setLogoFile}
+            onClear={() => {
+              setLogoUrl('')
+              setLogoFile(null)
+            }}
+            hint="Recommended: 200x50px, PNG or SVG"
+          />
+
+          <FileUploadField
+            label="Favicon"
+            accept="image/png,image/x-icon,image/svg+xml"
+            currentUrl={faviconUrl || undefined}
+            onFileSelect={setFaviconFile}
+            onClear={() => {
+              setFaviconUrl('')
+              setFaviconFile(null)
+            }}
+            hint="Recommended: 32x32px, PNG or ICO"
+          />
+        </CardContent>
+
+        <CardFooter className="justify-end">
+          <Button type="submit" disabled={saving}>
+            <Save className="mr-2 h-4 w-4" />
+            {saving ? t('common.saving') : t('settings.branding.saveBranding')}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  )
+}