@fayz-ai/saas 0.1.6

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

@@ -0,0 +1,171 @@
+import * as React from 'react'
+import { MapPin, Phone, Plus, Loader2 } from 'lucide-react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { Checkbox } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { Location } from '../../types/tenant'
+
+interface LocationsOverviewProps {
+  locations: Location[]
+  loading?: boolean
+  canManage?: boolean
+  onAdd?: (data: { name: string; address?: string; city?: string; state?: string; country?: string; phone?: string; isHeadquarters?: boolean }) => Promise<void>
+}
+
+function AddLocationForm({ onAdd, onCancel }: { onAdd: LocationsOverviewProps['onAdd']; onCancel: () => void }) {
+  const { t } = useTranslation()
+  const [name, setName] = React.useState('')
+  const [address, setAddress] = React.useState('')
+  const [city, setCity] = React.useState('')
+  const [state, setState] = React.useState('')
+  const [country, setCountry] = React.useState('BR')
+  const [phone, setPhone] = React.useState('')
+  const [isHQ, setIsHQ] = React.useState(false)
+  const [saving, setSaving] = React.useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim() || !onAdd) return
+    setSaving(true)
+    try {
+      await onAdd({
+        name: name.trim(),
+        address: address.trim() || undefined,
+        city: city.trim() || undefined,
+        state: state.trim() || undefined,
+        country: country.trim() || undefined,
+        phone: phone.trim() || undefined,
+        isHeadquarters: isHQ,
+      })
+      onCancel()
+    } catch {
+      // handled via toast in connected wrapper
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="border rounded-lg p-4 space-y-3">
+      <p className="text-sm font-medium">{t('settings.locations.newLocation')}</p>
+      <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('settings.locations.namePlaceholder')} required />
+      <Input value={address} onChange={(e) => setAddress(e.target.value)} placeholder={t('settings.locations.addressPlaceholder')} />
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Input value={city} onChange={(e) => setCity(e.target.value)} placeholder={t('settings.locations.cityPlaceholder')} />
+        <Input value={state} onChange={(e) => setState(e.target.value)} placeholder={t('settings.locations.statePlaceholder')} />
+        <Input value={country} onChange={(e) => setCountry(e.target.value)} placeholder={t('settings.locations.countryPlaceholder')} />
+      </div>
+      <Input value={phone} onChange={(e) => setPhone(e.target.value)} placeholder={t('settings.locations.phonePlaceholder')} />
+      <label className="flex items-center gap-2.5 cursor-pointer text-sm">
+        <Checkbox checked={isHQ} onChange={setIsHQ} />
+        {t('settings.locations.headquarters')}
+      </label>
+      <div className="flex justify-end gap-2 pt-1">
+        <Button type="button" variant="outline" size="sm" onClick={onCancel} disabled={saving}>{t('common.cancel')}</Button>
+        <Button type="submit" size="sm" disabled={saving || !name.trim()}>
+          {saving && <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />}
+          {saving ? t('settings.locations.adding') : t('settings.locations.addLocation')}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export function LocationsOverview({ locations, loading, canManage, onAdd }: LocationsOverviewProps) {
+  const { t } = useTranslation()
+  const [showForm, setShowForm] = React.useState(false)
+
+  if (loading) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t('settings.locations.title')}</CardTitle>
+          <CardDescription>{t('settings.locations.subtitle')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center py-8">
+            <div className="h-6 w-6 animate-spin rounded-full border-2 border-muted border-t-primary" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-lg">Locations</CardTitle>
+            <CardDescription>
+              {locations.length === 0
+                ? t('settings.locations.noLocations')
+                : t('settings.locations.countDescription', { count: String(locations.length), plural: locations.length === 1 ? '' : 's' })}
+            </CardDescription>
+          </div>
+          {canManage && !showForm && (
+            <Button size="sm" variant="outline" onClick={() => setShowForm(true)}>
+              <Plus className="h-4 w-4 mr-1" />
+              {t('settings.locations.addLocation')}
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {showForm && (
+          <AddLocationForm onAdd={onAdd} onCancel={() => setShowForm(false)} />
+        )}
+
+        {locations.length === 0 && !showForm ? (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <MapPin className="h-8 w-8 text-muted-foreground/50 mb-2" />
+            <p className="text-sm text-muted-foreground mb-3">
+              {t('settings.locations.empty')}
+            </p>
+            {canManage && (
+              <Button size="sm" onClick={() => setShowForm(true)}>
+                <Plus className="h-4 w-4 mr-1" />
+                {t('settings.locations.addFirst')}
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div className="divide-y">
+            {locations.map((loc) => (
+              <div key={loc.id} className="flex items-center justify-between py-3 first:pt-0 last:pb-0">
+                <div className="space-y-0.5">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium">{loc.name}</span>
+                    {loc.isHeadquarters && (
+                      <span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold text-primary">
+                        HQ
+                      </span>
+                    )}
+                    {!loc.isActive && (
+                      <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-semibold text-muted-foreground">
+                        {t('common.inactive')}
+                      </span>
+                    )}
+                  </div>
+                  {(loc.city || loc.state) && (
+                    <p className="text-xs text-muted-foreground">
+                      {[loc.city, loc.state].filter(Boolean).join(', ')}
+                    </p>
+                  )}
+                </div>
+                {loc.phone && (
+                  <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                    <Phone className="h-3 w-3" />
+                    {loc.phone}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -0,0 +1,208 @@
+import * as React from 'react'
+import { KeyRound, Loader2, Clock, ShieldCheck, UserPlus } from 'lucide-react'
+import { Button } from '@fayz-ai/ui'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { AuthUser } from '../../types'
+
+export interface TenantSecuritySettings {
+  sessionTimeoutMinutes?: number
+  require2FA?: boolean
+  inviteOnly?: boolean
+}
+
+interface SecuritySettingsProps {
+  user?: AuthUser | null
+  tenantSecurity?: TenantSecuritySettings
+  isAdmin?: boolean
+  onResetPassword?: () => Promise<void>
+  onTenantSecurityChange?: (settings: TenantSecuritySettings) => Promise<void>
+}
+
+const SESSION_TIMEOUT_OPTIONS = [
+  { label: '30 minutes', value: 30 },
+  { label: '1 hour', value: 60 },
+  { label: '4 hours', value: 240 },
+  { label: '8 hours', value: 480 },
+  { label: '24 hours', value: 1440 },
+  { label: 'No limit', value: 0 },
+]
+
+function ToggleRow({
+  icon,
+  label,
+  description,
+  checked,
+  onChange,
+  disabled,
+}: {
+  icon: React.ReactNode
+  label: string
+  description: string
+  checked: boolean
+  onChange: (val: boolean) => void
+  disabled?: boolean
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4 py-3">
+      <div className="flex gap-3">
+        <div className="mt-0.5 text-muted-foreground">{icon}</div>
+        <div>
+          <p className="text-sm font-medium">{label}</p>
+          <p className="text-xs text-muted-foreground">{description}</p>
+        </div>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+          checked ? 'bg-primary' : 'bg-muted-foreground/30'
+        }`}
+      >
+        <span
+          className={`pointer-events-none block h-4 w-4 rounded-full bg-white shadow-sm transition-transform ${
+            checked ? 'translate-x-[18px]' : 'translate-x-[2px]'
+          }`}
+        />
+      </button>
+    </div>
+  )
+}
+
+export function SecuritySettings({
+  user,
+  tenantSecurity,
+  isAdmin,
+  onResetPassword,
+  onTenantSecurityChange,
+}: SecuritySettingsProps) {
+  const { t } = useTranslation()
+  const [resetting, setResetting] = React.useState(false)
+  const [resetSent, setResetSent] = React.useState(false)
+  const [savingTenant, setSavingTenant] = React.useState(false)
+
+  const handleResetPassword = async () => {
+    if (!onResetPassword) return
+    setResetting(true)
+    try {
+      await onResetPassword()
+      setResetSent(true)
+    } catch {
+      // handled via toast in connected wrapper
+    } finally {
+      setResetting(false)
+    }
+  }
+
+  const updateTenantSecurity = async (partial: Partial<TenantSecuritySettings>) => {
+    if (!onTenantSecurityChange) return
+    setSavingTenant(true)
+    try {
+      await onTenantSecurityChange({ ...tenantSecurity, ...partial })
+    } catch {
+      // handled via toast
+    } finally {
+      setSavingTenant(false)
+    }
+  }
+
+  const baseClass =
+    'flex h-10 w-full rounded-input border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+
+  return (
+    <div className="space-y-6">
+      {/* Password reset */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t('settings.security.passwordTitle')}</CardTitle>
+          <CardDescription>
+            {t('settings.security.passwordSubtitle')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <p className="text-sm font-medium">{user?.email}</p>
+              <p className="text-xs text-muted-foreground">
+                {resetSent
+                  ? t('settings.security.resetLinkSent')
+                  : t('settings.security.resetLinkDescription')}
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              disabled={resetting || resetSent}
+              onClick={handleResetPassword}
+            >
+              {resetting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              <KeyRound className="mr-2 h-4 w-4" />
+              {resetSent ? t('settings.security.linkSent') : t('settings.security.resetPassword')}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tenant security — only visible to admins */}
+      {isAdmin && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">{t('settings.security.orgSecurityTitle')}</CardTitle>
+            <CardDescription>
+              {t('settings.security.orgSecuritySubtitle')}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-1 divide-y">
+            <ToggleRow
+              icon={<ShieldCheck className="h-4 w-4" />}
+              label={t('settings.security.require2FA')}
+              description={t('settings.security.require2FADescription')}
+              checked={tenantSecurity?.require2FA ?? false}
+              onChange={(val) => updateTenantSecurity({ require2FA: val })}
+              disabled={savingTenant}
+            />
+            <ToggleRow
+              icon={<UserPlus className="h-4 w-4" />}
+              label={t('settings.security.inviteOnly')}
+              description={t('settings.security.inviteOnlyDescription')}
+              checked={tenantSecurity?.inviteOnly ?? true}
+              onChange={(val) => updateTenantSecurity({ inviteOnly: val })}
+              disabled={savingTenant}
+            />
+
+            <div className="flex items-start justify-between gap-4 py-3">
+              <div className="flex gap-3">
+                <div className="mt-0.5 text-muted-foreground">
+                  <Clock className="h-4 w-4" />
+                </div>
+                <div>
+                  <p className="text-sm font-medium">{t('settings.security.sessionTimeout')}</p>
+                  <p className="text-xs text-muted-foreground">
+                    {t('settings.security.sessionTimeoutDescription')}
+                  </p>
+                </div>
+              </div>
+              <select
+                value={tenantSecurity?.sessionTimeoutMinutes ?? 0}
+                onChange={(e) =>
+                  updateTenantSecurity({ sessionTimeoutMinutes: Number(e.target.value) })
+                }
+                disabled={savingTenant}
+                className={`${baseClass} w-36`}
+              >
+                {SESSION_TIMEOUT_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,162 @@
+import * as React from 'react'
+import { Building2, User, Shield, Palette, ArrowLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useTranslation } from '../../hooks/useTranslation'
+import { ConnectedCompanySettings } from './ConnectedCompanySettings'
+import { ConnectedUserProfile } from './ConnectedUserProfile'
+import { ConnectedSecuritySettings } from './ConnectedSecuritySettings'
+import { ConnectedBrandingSettings } from './ConnectedBrandingSettings'
+
+interface SettingsTab {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  component: React.ReactNode
+}
+
+interface SettingsPageProps {
+  tabs?: SettingsTab[]
+  extraTabs?: SettingsTab[]
+  defaultTab?: string
+  className?: string
+  beforeContent?: React.ReactNode
+  afterContent?: React.ReactNode
+}
+
+export function SettingsPage({
+  tabs,
+  extraTabs,
+  defaultTab,
+  className,
+  beforeContent,
+  afterContent,
+}: SettingsPageProps) {
+  const { t } = useTranslation()
+
+  const defaultTabs: SettingsTab[] = React.useMemo(() => [
+    { 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 /> },
+    { id: 'branding', label: t('settings.branding'), icon: <Palette className="h-4 w-4" />, component: <ConnectedBrandingSettings /> },
+  ], [t])
+
+  const baseTabs = tabs ?? defaultTabs
+  const resolvedTabs = extraTabs ? [...baseTabs, ...extraTabs] : baseTabs
+
+  // Detect active tab from URL: /settings/financial/... → 'financial'
+  function getTabFromHash(): string | null {
+    const hash = typeof window !== 'undefined' ? window.location.hash.slice(1) || '/' : '/'
+    if (hash.startsWith('/settings/')) {
+      const tabId = hash.slice('/settings/'.length).split('/')[0]
+      if (resolvedTabs.find((t) => t.id === tabId)) return tabId
+    }
+    return null
+  }
+
+  const [activeTab, setActiveTab] = React.useState<string | null>(() => {
+    return getTabFromHash() ?? defaultTab ?? null
+  })
+
+  // Sync tab from hash changes
+  React.useEffect(() => {
+    const handler = () => {
+      const tab = getTabFromHash()
+      if (tab) setActiveTab(tab)
+    }
+    window.addEventListener('hashchange', handler)
+    return () => window.removeEventListener('hashchange', handler)
+  }, [resolvedTabs])
+
+  // 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
+  const activeContent = desktopTab ? resolvedTabs.find((t) => t.id === desktopTab)?.component : null
+  const activeLabel = activeTab ? resolvedTabs.find((t) => t.id === activeTab)?.label : null
+
+  // On mobile: show list OR content. On desktop: show both.
+  const showingContent = activeTab !== null
+
+  const handleSelectTab = (tabId: string) => {
+    setActiveTab(tabId)
+    window.location.hash = `/settings/${tabId}`
+  }
+
+  const handleBack = () => {
+    setActiveTab(null)
+    window.location.hash = '/settings'
+  }
+
+  const renderNav = (activeId: string | null) => (
+    <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) && (
+            <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>
+            </li>
+          )}
+          <li>
+            <button
+              onClick={() => handleSelectTab(tab.id)}
+              className={cn(
+                'flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                activeId === tab.id
+                  ? 'bg-muted text-foreground'
+                  : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
+              )}
+            >
+              {tab.icon && <span className="shrink-0">{tab.icon}</span>}
+              <span className="flex-1 text-left">{tab.label}</span>
+              {/* Mobile: show chevron */}
+              <ChevronRight className="h-4 w-4 text-muted-foreground/50 md:hidden" />
+            </button>
+          </li>
+        </React.Fragment>
+      ))}
+    </ul>
+  )
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Mobile: back button + tab title when viewing content */}
+      {showingContent && (
+        <button
+          onClick={handleBack}
+          className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors md:hidden"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          {t('settings.title')}
+        </button>
+      )}
+
+      {/* Header — hidden on mobile when viewing content */}
+      <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>
+      </div>
+
+      {beforeContent}
+
+      {/* Desktop: side-by-side layout */}
+      <div className="hidden md:flex md:gap-6">
+        <nav className="w-52 shrink-0">{renderNav(desktopTab)}</nav>
+        <div className="min-w-0 flex-1">{activeContent ?? resolvedTabs[0]?.component}</div>
+      </div>
+
+      {/* Mobile: list or content, not both */}
+      <div className="md:hidden">
+        {showingContent ? (
+          <div>{activeContent}</div>
+        ) : (
+          <nav>{renderNav(activeTab)}</nav>
+        )}
+      </div>
+
+      {afterContent}
+    </div>
+  )
+}

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

@@ -0,0 +1,151 @@
+import * as React from 'react'
+import { Camera, Save } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { Button } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { Avatar, AvatarFallback, AvatarImage } from '@fayz-ai/ui'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { AuthUser } from '../../types'
+
+interface UserProfileProps {
+  user?: AuthUser | null
+  onSave?: (data: { fullName: string }) => void
+  onAvatarChange?: (file: File) => void
+}
+
+function getInitials(name: string): string {
+  return name
+    .split(' ')
+    .map((part) => part[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+export function UserProfile({ user, onSave, onAvatarChange }: UserProfileProps) {
+  const { t } = useTranslation()
+  const [fullName, setFullName] = React.useState(user?.fullName ?? '')
+  const [saving, setSaving] = React.useState(false)
+  const fileInputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (user) {
+      setFullName(user.fullName)
+    }
+  }, [user])
+
+  const handleAvatarClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file && onAvatarChange) {
+      onAvatarChange(file)
+    }
+    if (e.target) {
+      e.target.value = ''
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!onSave) return
+
+    setSaving(true)
+    try {
+      await onSave({ fullName })
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-lg">{t('settings.profile.title')}</CardTitle>
+          <CardDescription>
+            {t('settings.profile.subtitle')}
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-6">
+          <div className="flex items-center gap-6">
+            <div className="relative">
+              <Avatar className="h-20 w-20">
+                <AvatarImage src={user?.avatarUrl} alt={user?.fullName} />
+                <AvatarFallback className="text-lg">
+                  {user?.fullName ? getInitials(user.fullName) : '?'}
+                </AvatarFallback>
+              </Avatar>
+              {onAvatarChange && (
+                <button
+                  type="button"
+                  onClick={handleAvatarClick}
+                  className={cn(
+                    'absolute -bottom-1 -right-1 flex h-8 w-8 items-center justify-center rounded-full',
+                    'border-2 border-background bg-primary text-primary-foreground',
+                    'transition-colors hover:bg-primary/90'
+                  )}
+                  aria-label="Change avatar"
+                >
+                  <Camera className="h-3.5 w-3.5" />
+                </button>
+              )}
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={handleFileChange}
+              />
+            </div>
+
+            <div className="space-y-1">
+              <p className="font-medium">{user?.fullName ?? 'User'}</p>
+              <p className="text-sm text-muted-foreground">{user?.email}</p>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="full-name" className="text-sm font-medium">
+              {t('settings.profile.fullName')}
+            </label>
+            <Input
+              id="full-name"
+              value={fullName}
+              onChange={(e) => setFullName(e.target.value)}
+              placeholder="John Doe"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label htmlFor="email" className="text-sm font-medium">
+              {t('settings.profile.email')}
+            </label>
+            <Input
+              id="email"
+              type="email"
+              value={user?.email ?? ''}
+              disabled
+              className="bg-muted"
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('settings.profile.emailHelp')}
+            </p>
+          </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.profile.saveProfile')}
+          </Button>
+        </CardFooter>
+      </Card>
+    </form>
+  )
+}