@fayz-ai/saas 0.1.6

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

@@ -0,0 +1,188 @@
+import * as React from 'react'
+import { Save, Check } 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 { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import { useLocaleStore } from '../../stores/locale.store'
+import { SUPPORTED_LOCALES } from '../../lib/locale-config'
+import type { Tenant } from '../../types'
+
+interface CompanySettingsProps {
+  tenant?: Tenant | null
+  onSave?: (settings: {
+    name: string
+    timezone: string
+    currency: string
+  }) => void
+}
+
+const TIMEZONES = [
+  { value: 'America/Sao_Paulo', label: 'Brasilia (BRT)' },
+  { value: 'America/New_York', label: 'Eastern (US)' },
+  { value: 'America/Chicago', label: 'Central (US)' },
+  { value: 'America/Denver', label: 'Mountain (US)' },
+  { value: 'America/Los_Angeles', label: 'Pacific (US)' },
+  { value: 'America/Mexico_City', label: 'Mexico City' },
+  { value: 'America/Buenos_Aires', label: 'Buenos Aires' },
+  { value: 'Europe/London', label: 'London' },
+  { value: 'Europe/Paris', label: 'Paris' },
+  { value: 'Europe/Berlin', label: 'Berlin' },
+  { value: 'Europe/Madrid', label: 'Madrid' },
+  { value: 'Europe/Lisbon', label: 'Lisbon' },
+  { value: 'Asia/Tokyo', label: 'Tokyo' },
+  { value: 'Asia/Shanghai', label: 'Shanghai' },
+  { value: 'Australia/Sydney', label: 'Sydney' },
+  { value: 'UTC', label: 'UTC' },
+]
+
+const CURRENCIES = [
+  { value: 'BRL', label: 'BRL - Real' },
+  { value: 'USD', label: 'USD - US Dollar' },
+  { value: 'EUR', label: 'EUR - Euro' },
+  { value: 'GBP', label: 'GBP - British Pound' },
+  { value: 'JPY', label: 'JPY - Japanese Yen' },
+  { value: 'CAD', label: 'CAD - Canadian Dollar' },
+  { value: 'AUD', label: 'AUD - Australian Dollar' },
+  { value: 'MXN', label: 'MXN - Mexican Peso' },
+  { value: 'ARS', label: 'ARS - Argentine Peso' },
+]
+
+export function CompanySettings({ tenant, onSave }: CompanySettingsProps) {
+  const { t } = useTranslation()
+  const { locale: uiLocale, setLocale: setUiLocale } = useLocaleStore()
+  const [name, setName] = React.useState(tenant?.name ?? '')
+  const [timezone, setTimezone] = React.useState(tenant?.settings?.timezone ?? 'UTC')
+  const [currency, setCurrency] = React.useState(tenant?.settings?.currency ?? 'USD')
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (tenant) {
+      setName(tenant.name)
+      setTimezone(tenant.settings?.timezone ?? 'UTC')
+      setCurrency(tenant.settings?.currency ?? 'USD')
+    }
+  }, [tenant])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!onSave) return
+
+    setSaving(true)
+    try {
+      await onSave({ name, timezone, currency })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+    <form onSubmit={handleSubmit}>
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t('settings.company.title')}</CardTitle>
+          <CardDescription>
+            {t('settings.company.subtitle')}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="company-name" className="text-sm font-medium">
+              {t('settings.company.name')}
+            </label>
+            <Input
+              id="company-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Acme Inc."
+            />
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-3">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('settings.company.timezone')}</label>
+              <Select value={timezone} onValueChange={setTimezone}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('settings.company.timezonePlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {TIMEZONES.map((tz) => (
+                    <SelectItem key={tz.value} value={tz.value}>
+                      {tz.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('settings.company.currency')}</label>
+              <Select value={currency} onValueChange={setCurrency}>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('settings.company.currencyPlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {CURRENCIES.map((c) => (
+                    <SelectItem key={c.value} value={c.value}>
+                      {c.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+          </div>
+        </CardContent>
+
+        <CardFooter className="justify-end">
+          <Button type="submit" disabled={saving}>
+            <Save className="mr-2 h-4 w-4" />
+            {saving ? t('common.saving') : t('settings.save')}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+
+      {/* UI Language */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">{t('settings.uiLanguage')}</CardTitle>
+          <CardDescription>{t('settings.uiLanguageDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-2 sm:grid-cols-2">
+            {SUPPORTED_LOCALES.map((loc) => (
+              <button
+                key={loc.code}
+                onClick={() => {
+                  setUiLocale(loc.code)
+                  window.location.reload()
+                }}
+                className={`flex items-center justify-between rounded-lg border-2 px-4 py-3 text-sm transition-all ${
+                  uiLocale === loc.code
+                    ? 'border-primary bg-primary/5'
+                    : 'border-transparent bg-muted/30 hover:bg-muted/50'
+                }`}
+              >
+                <span className="flex items-center gap-3">
+                  <span className="text-xl">{loc.flag}</span>
+                  <span className="font-medium">{loc.label}</span>
+                </span>
+                {uiLocale === loc.code && <Check className="h-4 w-4 text-primary" />}
+              </button>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

@@ -0,0 +1,82 @@
+import { BrandingSettings } from './BrandingSettings'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { toast } from '../notifications/ToastProvider'
+import { getSupabaseClient } from '../../lib/supabase'
+import type { TenantSettings } from '../../types'
+
+export function ConnectedBrandingSettings() {
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+
+  const handleSave = async (
+    branding: TenantSettings['branding'],
+    assets?: { logoFile?: File | null; faviconFile?: File | null },
+  ) => {
+    if (!currentOrg) return
+
+    try {
+      const supabase = getSupabaseClient()
+      let nextBranding = { ...branding }
+
+      if (assets?.logoFile) {
+        const ext = assets.logoFile.name.split('.').pop() ?? 'png'
+        const path = `branding/${currentOrg.id}/logo.${ext}`
+        const { error: uploadError } = await supabase.storage
+          .from('avatars')
+          .upload(path, assets.logoFile, { upsert: true })
+        if (uploadError) throw uploadError
+        const { data } = supabase.storage.from('avatars').getPublicUrl(path)
+        nextBranding.logoUrl = data.publicUrl
+      }
+
+      if (assets?.faviconFile) {
+        const ext = assets.faviconFile.name.split('.').pop() ?? 'png'
+        const path = `branding/${currentOrg.id}/favicon.${ext}`
+        const { error: uploadError } = await supabase.storage
+          .from('avatars')
+          .upload(path, assets.faviconFile, { upsert: true })
+        if (uploadError) throw uploadError
+        const { data } = supabase.storage.from('avatars').getPublicUrl(path)
+        nextBranding.faviconUrl = data.publicUrl
+      }
+
+      const currentSettings = (currentOrg.settings ?? {}) as Record<string, unknown>
+      const settings = {
+        ...currentSettings,
+        branding: nextBranding,
+      }
+
+      const { data: updatedTenant, error: updateError } = await supabase
+        .from('tenants')
+        .update({
+          settings,
+          logo_url: nextBranding.logoUrl ?? currentOrg.logoUrl ?? null,
+        })
+        .eq('id', currentOrg.id)
+        .select()
+        .single()
+
+      if (updateError) throw updateError
+
+      setCurrentOrg({
+        ...currentOrg,
+        logoUrl: updatedTenant.logo_url ?? undefined,
+        settings: updatedTenant.settings ?? settings,
+        updatedAt: updatedTenant.updated_at ?? currentOrg.updatedAt,
+      })
+
+      toast.success('Branding saved')
+    } catch (err: any) {
+      toast.error('Failed to save branding', { description: err?.message })
+    }
+  }
+
+  const currentSettings = (currentOrg?.settings ?? {}) as Partial<TenantSettings>
+
+  return (
+    <BrandingSettings
+      branding={currentSettings.branding}
+      onSave={handleSave}
+    />
+  )
+}

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

@@ -0,0 +1,63 @@
+import { CompanySettings } from './CompanySettings'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { toast } from '../notifications/ToastProvider'
+import type { Tenant, TenantSettings } from '../../types'
+
+function toTenantSettings(settings: unknown): TenantSettings {
+  const source = (settings && typeof settings === 'object' ? settings : {}) as Partial<TenantSettings>
+  const branding = (source.branding && typeof source.branding === 'object' ? source.branding : {}) as TenantSettings['branding']
+
+  return {
+    timezone: source.timezone ?? 'America/Sao_Paulo',
+    currency: source.currency ?? 'BRL',
+    locale: source.locale ?? 'pt-BR',
+    branding: {
+      primaryColor: branding.primaryColor,
+      accentColor: branding.accentColor,
+      logoUrl: branding.logoUrl,
+      faviconUrl: branding.faviconUrl,
+    },
+  }
+}
+
+export function ConnectedCompanySettings() {
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+  const adapter = useOrgAdapterOptional()
+  // Map Organization to Tenant shape for the component
+  const tenant: Tenant | null = currentOrg
+    ? {
+        id: currentOrg.id,
+        name: currentOrg.name,
+        slug: currentOrg.slug,
+        logoUrl: currentOrg.logoUrl,
+        plan: currentOrg.plan ?? 'free',
+        settings: toTenantSettings(currentOrg.settings),
+        createdAt: currentOrg.createdAt,
+        updatedAt: currentOrg.updatedAt,
+      }
+    : null
+
+  const handleSave = async (data: { name: string; timezone: string; currency: string }) => {
+    if (!adapter || !currentOrg) return
+
+    try {
+      const currentSettings = toTenantSettings(currentOrg.settings)
+      const updated = await adapter.updateOrg(currentOrg.id, {
+        name: data.name,
+        settings: {
+          ...currentSettings,
+          timezone: data.timezone,
+          currency: data.currency,
+        },
+      })
+      setCurrentOrg(updated)
+      toast.success('Settings saved')
+    } catch (err: any) {
+      toast.error('Failed to save', { description: err?.message })
+    }
+  }
+
+  return <CompanySettings tenant={tenant} onSave={handleSave} />
+}

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

@@ -0,0 +1,47 @@
+import { FieldRulesSettings } from './FieldRulesSettings'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { getRegisteredEntities } from '../../lib/entity-registry'
+import { toast } from '../notifications/ToastProvider'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { TenantFieldRules, TenantSettings } from '../../types'
+
+function extractFieldRules(settings: unknown): TenantFieldRules {
+  if (!settings || typeof settings !== 'object') return {}
+  return (settings as Record<string, unknown>).fieldRules as TenantFieldRules ?? {}
+}
+
+export function ConnectedFieldRulesSettings() {
+  const { t } = useTranslation()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+  const adapter = useOrgAdapterOptional()
+  const entities = getRegisteredEntities()
+  const rules = extractFieldRules(currentOrg?.settings)
+
+  const handleSave = async (newRules: TenantFieldRules) => {
+    if (!adapter || !currentOrg) return
+
+    try {
+      const currentSettings = (currentOrg.settings ?? {}) as Record<string, unknown>
+      const updated = await adapter.updateOrg(currentOrg.id, {
+        settings: {
+          ...currentSettings,
+          fieldRules: newRules,
+        },
+      })
+      setCurrentOrg(updated)
+      toast.success(t('settings.fieldRules.saved'))
+    } catch (err: any) {
+      toast.error(t('settings.fieldRules.saveFailed'), { description: err?.message })
+    }
+  }
+
+  return (
+    <FieldRulesSettings
+      entities={entities}
+      rules={rules}
+      onSave={handleSave}
+    />
+  )
+}

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

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import { HolidaysSettings, type Holiday } from './HolidaysSettings'
+import { usePermission } from '../../hooks/usePermission'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { toast } from '../notifications/ToastProvider'
+import { getSupabaseClientOptional } from '../../lib/supabase'
+
+const TABLE = 'holidays'
+const SCHEMA = 'saas_core'
+
+export function ConnectedHolidaysSettings() {
+  const { hasSystemPermission } = usePermission()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const [holidays, setHolidays] = React.useState<Holiday[]>([])
+  const [loading, setLoading] = React.useState(true)
+
+  const canManage = true // User is already in settings — allow managing
+  const supabase = getSupabaseClientOptional()
+
+  const fetchHolidays = React.useCallback(async () => {
+    if (!supabase || !currentOrg) return
+    try {
+      const { data, error } = await supabase
+        .schema(SCHEMA)
+        .from(TABLE)
+        .select('*')
+        .eq('tenant_id', currentOrg.id)
+        .eq('is_active', true)
+        .order('date', { ascending: true })
+      if (error) throw error
+      setHolidays(
+        (data ?? []).map((row: any) => ({
+          id: row.id,
+          name: row.name,
+          date: row.date,
+          recurring: row.recurring ?? false,
+          description: row.description,
+          isActive: row.is_active,
+        }))
+      )
+    } catch {
+      // If table doesn't exist yet, show empty state
+      setHolidays([])
+    }
+  }, [supabase, currentOrg?.id])
+
+  React.useEffect(() => {
+    fetchHolidays().finally(() => setLoading(false))
+  }, [fetchHolidays])
+
+  const handleAdd = async (data: Omit<Holiday, 'id' | 'isActive'> & { isActive?: boolean }) => {
+    if (!supabase || !currentOrg) return
+    try {
+      const { error } = await supabase
+        .schema(SCHEMA)
+        .from(TABLE)
+        .insert({
+          tenant_id: currentOrg.id,
+          name: data.name,
+          date: data.date,
+          recurring: data.recurring,
+          description: data.description ?? null,
+          is_active: true,
+        })
+      if (error) throw error
+      await fetchHolidays()
+      toast.success('Holiday added')
+    } catch (err: any) {
+      toast.error('Failed to add holiday', { description: err?.message })
+      throw err
+    }
+  }
+
+  const handleRemove = async (id: string) => {
+    if (!supabase) return
+    try {
+      const { error } = await supabase
+        .schema(SCHEMA)
+        .from(TABLE)
+        .update({ is_active: false })
+        .eq('id', id)
+      if (error) throw error
+      await fetchHolidays()
+      toast.success('Holiday removed')
+    } catch (err: any) {
+      toast.error('Failed to remove holiday', { description: err?.message })
+    }
+  }
+
+  return (
+    <HolidaysSettings
+      holidays={holidays}
+      loading={loading}
+      canManage={canManage}
+      onAdd={handleAdd}
+      onRemove={handleRemove}
+    />
+  )
+}

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

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { LocationsOverview } from './LocationsOverview'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { usePermission } from '../../hooks/usePermission'
+import { toast } from '../notifications/ToastProvider'
+import { dedup } from '../../lib/dedup'
+import type { Location } from '../../types/tenant'
+
+export function ConnectedLocationsOverview() {
+  const adapter = useOrgAdapterOptional()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const { hasSystemPermission } = usePermission()
+  const [locations, setLocations] = React.useState<Location[]>([])
+  const [loading, setLoading] = React.useState(true)
+
+  const canManage = hasSystemPermission('manage_settings')
+
+  const fetchLocations = React.useCallback(async () => {
+    if (!adapter || !currentOrg) return
+    try {
+      const data = await dedup('locations:' + currentOrg.id, () => adapter.listLocations(currentOrg.id))
+      setLocations(data)
+    } catch {
+      // ignore
+    }
+  }, [adapter, currentOrg?.id])
+
+  React.useEffect(() => {
+    if (!adapter || !currentOrg) {
+      setLoading(false)
+      return
+    }
+    fetchLocations().finally(() => setLoading(false))
+  }, [fetchLocations])
+
+  const handleAdd = async (data: { name: string; address?: string; city?: string; state?: string; country?: string; phone?: string; isHeadquarters?: boolean }) => {
+    if (!adapter || !currentOrg) return
+    try {
+      await adapter.createLocation(currentOrg.id, data)
+      await fetchLocations()
+      toast.success('Location added')
+    } catch (err: any) {
+      toast.error('Failed to add location', { description: err?.message })
+      throw err
+    }
+  }
+
+  return (
+    <LocationsOverview
+      locations={locations}
+      loading={loading}
+      canManage={canManage}
+      onAdd={handleAdd}
+    />
+  )
+}

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

@@ -0,0 +1,59 @@
+import { SecuritySettings } from './SecuritySettings'
+import type { TenantSecuritySettings } from './SecuritySettings'
+import { useAuthStore } from '../../stores/auth.store'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useAuthAdapterOptional } from '../../lib/auth-context'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { toast } from '../notifications/ToastProvider'
+
+export function ConnectedSecuritySettings() {
+  const user = useAuthStore((s) => s.user)
+  const authAdapter = useAuthAdapterOptional()
+  const orgAdapter = useOrgAdapterOptional()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+
+  const settings = (currentOrg?.settings ?? {}) as Record<string, unknown>
+  const tenantSecurity = (settings.security ?? {}) as TenantSecuritySettings
+
+  // Determine if current user is admin (owner/admin role)
+  const members = useOrganizationStore((s) => s.members)
+  const currentMember = members.find((m) => m.userId === user?.id)
+  const isAdmin = currentMember?.profileName?.toLowerCase() === 'owner' ||
+    currentMember?.profileName?.toLowerCase() === 'admin'
+
+  const handleResetPassword = async () => {
+    if (!authAdapter || !user?.email) return
+    try {
+      await authAdapter.resetPassword(user.email)
+      toast.success('Password reset link sent', { description: `Check ${user.email} for the reset link.` })
+    } catch (err: any) {
+      toast.error('Failed to send reset link', { description: err?.message })
+      throw err
+    }
+  }
+
+  const handleTenantSecurityChange = async (security: TenantSecuritySettings) => {
+    if (!orgAdapter || !currentOrg) return
+    try {
+      const updated = await orgAdapter.updateOrg(currentOrg.id, {
+        settings: { ...settings, security },
+      })
+      setCurrentOrg(updated)
+      toast.success('Security settings updated')
+    } catch (err: any) {
+      toast.error('Failed to update security settings', { description: err?.message })
+      throw err
+    }
+  }
+
+  return (
+    <SecuritySettings
+      user={user as any}
+      tenantSecurity={tenantSecurity}
+      isAdmin={isAdmin}
+      onResetPassword={handleResetPassword}
+      onTenantSecurityChange={orgAdapter ? handleTenantSecurityChange : undefined}
+    />
+  )
+}

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

@@ -0,0 +1,59 @@
+import { UserProfile } from './UserProfile'
+import { useAuthStore } from '../../stores/auth.store'
+import { getSupabaseClient } from '../../lib/supabase'
+import { toast } from '../notifications/ToastProvider'
+
+export function ConnectedUserProfile() {
+  const user = useAuthStore((s) => s.user)
+  const setUser = useAuthStore((s) => s.setUser)
+  const handleSave = async (data: { fullName: string }) => {
+    try {
+      const supabase = getSupabaseClient()
+
+      if (data.fullName !== user?.fullName) {
+        const { error: metaError } = await supabase.auth.updateUser({
+          data: { full_name: data.fullName },
+        })
+        if (metaError) throw metaError
+
+        const { error: profileError } = await supabase
+          .from('profiles')
+          .update({ full_name: data.fullName })
+          .eq('id', user!.id)
+        if (profileError) throw profileError
+
+        setUser(user ? { ...user, fullName: data.fullName } : null)
+      }
+
+      toast.success('Profile updated')
+    } catch (err: any) {
+      toast.error('Failed to update', { description: err?.message })
+    }
+  }
+
+  const handleAvatarChange = async (file: File) => {
+    try {
+      const supabase = getSupabaseClient()
+      const ext = file.name.split('.').pop()
+      const path = `avatars/${user!.id}.${ext}`
+
+      const { error: uploadError } = await supabase.storage
+        .from('avatars')
+        .upload(path, file, { upsert: true })
+      if (uploadError) throw uploadError
+
+      const { data: urlData } = supabase.storage.from('avatars').getPublicUrl(path)
+      const avatarUrl = urlData.publicUrl
+
+      await supabase.auth.updateUser({ data: { avatar_url: avatarUrl } })
+      await supabase.from('profiles').update({ avatar_url: avatarUrl }).eq('id', user!.id)
+
+      setUser(user ? { ...user, avatarUrl } : null)
+      toast.success('Avatar updated')
+    } catch (err: any) {
+      toast.error('Failed to upload avatar', { description: err?.message })
+    }
+  }
+
+  return <UserProfile user={user as any} onSave={handleSave} onAvatarChange={handleAvatarChange} />
+}