@fayz-ai/saas 0.1.6

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

@@ -0,0 +1,206 @@
+import * as React from 'react'
+import { Card } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { Checkbox, type CheckboxColor } from '@fayz-ai/ui'
+import { ChevronDown, ChevronRight, Search } from 'lucide-react'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { FeatureDeclaration, PermissionAction, PermissionProfile, SystemPermission } from '../../types/permissions'
+
+const ACTIONS: PermissionAction[] = ['read', 'create', 'edit', 'delete']
+const ACTION_COLORS: Partial<Record<PermissionAction, CheckboxColor>> = {
+  read: 'primary',
+  create: 'success',
+  edit: 'warning',
+  delete: 'destructive',
+}
+const SYSTEM_PERMISSIONS: { id: SystemPermission; key: string }[] = [
+  { id: 'manage_team', key: 'organization.permissions.manageTeam' },
+  { id: 'manage_billing', key: 'organization.permissions.manageBilling' },
+  { id: 'manage_settings', key: 'organization.permissions.manageSettings' },
+  { id: 'manage_permissions', key: 'organization.permissions.managePermissions' },
+]
+
+interface PermissionMatrixEditorProps {
+  features: FeatureDeclaration[]
+  profile?: PermissionProfile
+  onSave: (data: { name: string; description?: string; systemPermissions: SystemPermission[]; grants: Record<string, PermissionAction[]> }) => void
+  onCancel: () => void
+  saving?: boolean
+}
+
+export function PermissionMatrixEditor({ features, profile, onSave, onCancel, saving }: PermissionMatrixEditorProps) {
+  const { t } = useTranslation()
+  const [name, setName] = React.useState(profile?.name ?? '')
+  const [description, setDescription] = React.useState(profile?.description ?? '')
+  const [systemPerms, setSystemPerms] = React.useState<SystemPermission[]>(profile?.systemPermissions ?? [])
+  const [grants, setGrants] = React.useState<Record<string, PermissionAction[]>>(profile?.grants ?? {})
+  const [collapsed, setCollapsed] = React.useState<Set<string>>(new Set())
+  const [search, setSearch] = React.useState('')
+
+  const toggleSystemPerm = (perm: SystemPermission) => {
+    setSystemPerms((prev) =>
+      prev.includes(perm) ? prev.filter((p) => p !== perm) : [...prev, perm]
+    )
+  }
+
+  const toggleGrant = (featureId: string, action: PermissionAction) => {
+    setGrants((prev) => {
+      const current = prev[featureId] ?? []
+      const next = current.includes(action)
+        ? current.filter((a) => a !== action)
+        : [...current, action]
+      return { ...prev, [featureId]: next }
+    })
+  }
+
+  const toggleGroup = (group: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      next.has(group) ? next.delete(group) : next.add(group)
+      return next
+    })
+  }
+
+  const handleSave = () => {
+    if (!name.trim()) return
+    onSave({ name: name.trim(), description: description.trim() || undefined, systemPermissions: systemPerms, grants })
+  }
+
+  // Group features, filtering by search
+  const groups = React.useMemo(() => {
+    const filtered = search
+      ? features.filter((f) => f.label.toLowerCase().includes(search.toLowerCase()))
+      : features
+    const map = new Map<string, FeatureDeclaration[]>()
+    for (const f of filtered) {
+      const group = f.group ?? 'General'
+      if (!map.has(group)) map.set(group, [])
+      map.get(group)!.push(f)
+    }
+    return map
+  }, [features, search])
+
+  return (
+    <div className="space-y-6">
+      <div className="grid gap-4 sm:grid-cols-2">
+        <div>
+          <label className="text-sm font-medium">{t('organization.permissions.profileName')}</label>
+          <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('organization.permissions.profileNamePlaceholder')} className="mt-1" />
+        </div>
+        <div>
+          <label className="text-sm font-medium">{t('organization.permissions.description')}</label>
+          <Input value={description} onChange={(e) => setDescription(e.target.value)} placeholder={t('organization.permissions.descriptionPlaceholder')} className="mt-1" />
+        </div>
+      </div>
+
+      {/* Unified Permission Matrix */}
+      <Card className="overflow-hidden">
+        {/* Search filter */}
+        {features.length > 8 && (
+          <div className="border-b border-border/40 px-3 py-2">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder={t('organization.permissions.searchFeatures')}
+                className="h-8 pl-8 text-xs"
+              />
+            </div>
+          </div>
+        )}
+
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b bg-muted/50">
+                <th className="text-left p-3 text-sm font-medium text-muted-foreground">{t('common.feature')}</th>
+                {ACTIONS.map((action) => (
+                  <th key={action} className="p-3 text-center text-sm font-medium text-muted-foreground capitalize w-20">
+                    {t(`organization.permissions.action.${action}`) === `organization.permissions.action.${action}` ? action : t(`organization.permissions.action.${action}`)}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {/* System permissions group */}
+              <tr>
+                <td colSpan={5} className="p-2 px-3">
+                  <button
+                    onClick={() => toggleGroup('__system')}
+                    className="flex items-center gap-1.5 text-xs"
+                  >
+                    {collapsed.has('__system')
+                      ? <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                      : <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                    }
+                    <Badge variant="secondary" className="text-xs">{t('organization.permissions.systemPermissions')}</Badge>
+                  </button>
+                </td>
+              </tr>
+              {!collapsed.has('__system') && SYSTEM_PERMISSIONS.map((sp) => (
+                <tr key={sp.id} className="hover:bg-muted/30">
+                  <td className="p-3 text-sm font-medium">{t(sp.key)}</td>
+                  <td colSpan={4} className="p-3">
+                    <div className="flex justify-center">
+                      <Checkbox
+                        checked={systemPerms.includes(sp.id)}
+                        onChange={() => toggleSystemPerm(sp.id)}
+                      />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+
+              {/* Feature permission groups */}
+              {Array.from(groups.entries()).map(([groupName, groupFeatures]) => (
+                <React.Fragment key={groupName}>
+                  <tr>
+                    <td colSpan={5} className="p-2 px-3">
+                      <button
+                        onClick={() => toggleGroup(groupName)}
+                        className="flex items-center gap-1.5 text-xs"
+                      >
+                        {collapsed.has(groupName)
+                          ? <ChevronRight className="h-3 w-3 text-muted-foreground" />
+                          : <ChevronDown className="h-3 w-3 text-muted-foreground" />
+                        }
+                        <Badge variant="secondary" className="text-xs">{groupName}</Badge>
+                        <span className="text-[10px] text-muted-foreground">{groupFeatures.length}</span>
+                      </button>
+                    </td>
+                  </tr>
+                  {!collapsed.has(groupName) && groupFeatures.map((feature) => (
+                    <tr key={feature.id} className="hover:bg-muted/30">
+                      <td className="p-3 text-sm font-medium">{feature.label}</td>
+                      {ACTIONS.map((action) => (
+                        <td key={action} className="p-3 text-center">
+                          <div className="flex justify-center">
+                            <Checkbox
+                              checked={grants[feature.id]?.includes(action) ?? false}
+                              onChange={() => toggleGrant(feature.id, action)}
+                              color={ACTION_COLORS[action]}
+                            />
+                          </div>
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </React.Fragment>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" onClick={onCancel}>{t('common.cancel')}</Button>
+        <Button onClick={handleSave} disabled={!name.trim() || saving}>
+          {saving ? t('common.saving') : profile ? t('organization.permissions.updateProfile') : t('organization.permissions.createProfile')}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,148 @@
+import * as React from 'react'
+import { Shield, Pencil, Trash2, Plus, Eye } from 'lucide-react'
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { PermissionMatrixEditor } from './PermissionMatrixEditor'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { useTranslation } from '../../hooks/useTranslation'
+import type { PermissionProfile, PermissionAction, SystemPermission } from '../../types/permissions'
+
+export function PermissionProfilesTab() {
+  const adapter = useOrgAdapterOptional()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const profiles = usePermissionsStore((s) => s.profiles)
+  const features = usePermissionsStore((s) => s.features)
+  const setProfiles = usePermissionsStore((s) => s.setProfiles)
+  const members = useOrganizationStore((s) => s.members)
+  const realProfile = usePermissionsStore((s) => s.realProfile)
+  const startImpersonation = usePermissionsStore((s) => s.startImpersonation)
+
+  const canPreview = (realProfile?.systemPermissions ?? []).includes('manage_permissions') ?? false
+
+  const { t } = useTranslation()
+  const [editingProfile, setEditingProfile] = React.useState<PermissionProfile | null>(null)
+  const [creating, setCreating] = React.useState(false)
+  const [saving, setSaving] = React.useState(false)
+
+  const memberCountByProfile = React.useMemo(() => {
+    const counts: Record<string, number> = {}
+    for (const m of members) {
+      counts[m.profileId] = (counts[m.profileId] ?? 0) + 1
+    }
+    return counts
+  }, [members])
+
+  const handleSave = async (data: { name: string; description?: string; systemPermissions: SystemPermission[]; grants: Record<string, PermissionAction[]> }) => {
+    if (!adapter || !currentOrg) return
+    setSaving(true)
+    try {
+      if (editingProfile) {
+        await adapter.updateProfile(currentOrg.id, editingProfile.id, data)
+      } else {
+        await adapter.createProfile(currentOrg.id, data)
+      }
+      const updated = await adapter.listProfiles(currentOrg.id)
+      setProfiles(updated)
+      setEditingProfile(null)
+      setCreating(false)
+    } catch {
+      // ignore
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (profile: PermissionProfile) => {
+    if (!adapter || !currentOrg || profile.isSystem) return
+    try {
+      await adapter.deleteProfile(currentOrg.id, profile.id)
+      const updated = await adapter.listProfiles(currentOrg.id)
+      setProfiles(updated)
+    } catch {
+      // ignore
+    }
+  }
+
+  if (creating || editingProfile) {
+    return (
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">
+          {editingProfile ? t('organization.permissions.editProfile', { name: editingProfile.name }) : t('organization.permissions.createCustom')}
+        </h3>
+        <PermissionMatrixEditor
+          features={features}
+          profile={editingProfile ?? undefined}
+          onSave={handleSave}
+          onCancel={() => { setEditingProfile(null); setCreating(false) }}
+          saving={saving}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-semibold">{t('organization.permissions.title')}</h3>
+          <p className="text-sm text-muted-foreground">{t('organization.permissions.subtitle')}</p>
+        </div>
+        <Button onClick={() => setCreating(true)} size="sm">
+          <Plus className="h-4 w-4 mr-1" />
+          {t('organization.permissions.createProfile')}
+        </Button>
+      </div>
+
+      <div className="grid gap-3">
+        {profiles.map((profile) => (
+          <Card key={profile.id}>
+            <CardContent className="flex items-center gap-4 p-4">
+              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+                <Shield className="h-5 w-5 text-primary" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <CardTitle className="text-sm">{profile.name}</CardTitle>
+                  {profile.isSystem && <Badge variant="secondary" className="text-xs">{t('organization.permissions.system')}</Badge>}
+                </div>
+                {profile.description && (
+                  <CardDescription className="text-xs mt-0.5">{profile.description}</CardDescription>
+                )}
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('organization.permissions.memberCount', { count: String(memberCountByProfile[profile.id] ?? 0), plural: (memberCountByProfile[profile.id] ?? 0) !== 1 ? 's' : '' })}
+                </p>
+              </div>
+              <div className="flex items-center gap-1">
+                {canPreview && profile.id !== realProfile?.id && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    title={t('organization.permissions.previewAs')}
+                    onClick={() => startImpersonation(profile)}
+                  >
+                    <Eye className="h-3.5 w-3.5" />
+                  </Button>
+                )}
+                <Button variant="ghost" size="sm" onClick={() => setEditingProfile(profile)}>
+                  <Pencil className="h-3.5 w-3.5" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-destructive hover:text-destructive"
+                  disabled={profile.isSystem}
+                  onClick={() => handleDelete(profile)}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,243 @@
+import * as React from 'react'
+import { UserPlus, MoreHorizontal, Mail, Clock } from 'lucide-react'
+import { Card } from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { Avatar, AvatarFallback, AvatarImage } from '@fayz-ai/ui'
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@fayz-ai/ui'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+} from '@fayz-ai/ui'
+import { InviteMemberDialog } from './InviteMemberDialog'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import { useInviteStore } from '../../stores/invite.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { useAuthStore } from '../../stores/auth.store'
+import { usePermission } from '../../hooks/usePermission'
+import { useTranslation } from '../../hooks/useTranslation'
+import { dedup } from '../../lib/dedup'
+
+export function TeamTab() {
+  const adapter = useOrgAdapterOptional()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const members = useOrganizationStore((s) => s.members)
+  const setMembers = useOrganizationStore((s) => s.setMembers)
+  const profiles = usePermissionsStore((s) => s.profiles)
+  const invites = useInviteStore((s) => s.invites)
+  const setInvites = useInviteStore((s) => s.setInvites)
+  const user = useAuthStore((s) => s.user)
+  const { hasSystemPermission } = usePermission()
+
+  const [inviteOpen, setInviteOpen] = React.useState(false)
+
+  // Load invites on mount (deduped to avoid strict mode double-fetch)
+  React.useEffect(() => {
+    if (adapter && currentOrg) {
+      dedup('team:invites:' + currentOrg.id, () => adapter.listInvites(currentOrg.id)).then(setInvites).catch(() => {})
+    }
+  }, [adapter, currentOrg?.id])
+
+  const handleChangeProfile = async (memberId: string, profileId: string) => {
+    if (!adapter || !currentOrg) return
+    try {
+      await adapter.updateMemberProfile(currentOrg.id, memberId, profileId)
+      const updated = await adapter.listMembers(currentOrg.id)
+      setMembers(updated)
+    } catch {
+      // ignore
+    }
+  }
+
+  const handleRemoveMember = async (memberId: string) => {
+    if (!adapter || !currentOrg) return
+    try {
+      await adapter.removeMember(currentOrg.id, memberId)
+      const updated = await adapter.listMembers(currentOrg.id)
+      setMembers(updated)
+    } catch {
+      // ignore
+    }
+  }
+
+  const handleRevokeInvite = async (inviteId: string) => {
+    if (!adapter || !currentOrg) return
+    try {
+      await adapter.revokeInvite(currentOrg.id, inviteId)
+      const updated = await adapter.listInvites(currentOrg.id)
+      setInvites(updated)
+    } catch {
+      // ignore
+    }
+  }
+
+  const handleResendInvite = async (inviteId: string) => {
+    if (!adapter || !currentOrg) return
+    try {
+      await adapter.resendInvite(currentOrg.id, inviteId)
+      const updated = await adapter.listInvites(currentOrg.id)
+      setInvites(updated)
+    } catch {
+      // ignore
+    }
+  }
+
+  const { t } = useTranslation()
+  const canManageTeam = hasSystemPermission('manage_team')
+  const pendingInvites = invites.filter((i) => i.status === 'pending')
+
+  return (
+    <div className="space-y-6">
+      {/* Members */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <div>
+            <h3 className="text-lg font-semibold">{t('organization.team.title')}</h3>
+            <p className="text-sm text-muted-foreground">{t('organization.team.memberCount', { count: String(members.length), plural: members.length !== 1 ? 's' : '' })}</p>
+          </div>
+          {canManageTeam && (
+            <Button size="sm" onClick={() => setInviteOpen(true)}>
+              <UserPlus className="h-4 w-4 mr-1" />
+              {t('organization.team.invite')}
+            </Button>
+          )}
+        </div>
+
+        <Card className="overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b bg-muted/50">
+                  <th className="text-left p-3 text-sm font-medium text-muted-foreground">{t('organization.team.member')}</th>
+                  <th className="text-left p-3 text-sm font-medium text-muted-foreground">{t('organization.team.role')}</th>
+                  <th className="text-left p-3 text-sm font-medium text-muted-foreground">{t('organization.team.joined')}</th>
+                  {canManageTeam && (
+                    <th className="text-right p-3 text-sm font-medium text-muted-foreground w-12" />
+                  )}
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {members.map((member) => {
+                  const initials = member.user.fullName
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join('')
+                    .toUpperCase()
+                    .slice(0, 2)
+                  const isCurrentUser = member.userId === user?.id
+
+                  return (
+                    <tr key={member.id} className="hover:bg-muted/30">
+                      <td className="p-3">
+                        <div className="flex items-center gap-3">
+                          <Avatar className="h-8 w-8">
+                            {member.user.avatarUrl && <AvatarImage src={member.user.avatarUrl} />}
+                            <AvatarFallback className="text-xs">{initials}</AvatarFallback>
+                          </Avatar>
+                          <div>
+                            <p className="text-sm font-medium">
+                              {member.user.fullName}
+                              {isCurrentUser && <span className="text-muted-foreground ml-1">{t('organization.team.you')}</span>}
+                            </p>
+                            <p className="text-xs text-muted-foreground">{member.user.email}</p>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="p-3">
+                        {canManageTeam && !isCurrentUser ? (
+                          <Select
+                            value={member.profileId}
+                            onValueChange={(val) => handleChangeProfile(member.id, val)}
+                          >
+                            <SelectTrigger className="h-8 w-36 text-xs">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {profiles.map((p) => (
+                                <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        ) : (
+                          <Badge variant="secondary" className="text-xs">{member.profileName}</Badge>
+                        )}
+                      </td>
+                      <td className="p-3 text-sm text-muted-foreground">
+                        {new Date(member.joinedAt).toLocaleDateString()}
+                      </td>
+                      {canManageTeam && (
+                        <td className="p-3 text-right">
+                          {!isCurrentUser && (
+                            <Dropdown>
+                              <DropdownTrigger asChild>
+                                <Button variant="ghost" size="sm">
+                                  <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                              </DropdownTrigger>
+                              <DropdownContent align="end">
+                                <DropdownItem
+                                  className="text-destructive"
+                                  onClick={() => handleRemoveMember(member.id)}
+                                >
+                                  {t('organization.team.removeMember')}
+                                </DropdownItem>
+                              </DropdownContent>
+                            </Dropdown>
+                          )}
+                        </td>
+                      )}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      </div>
+
+      {/* Pending Invites */}
+      {pendingInvites.length > 0 && (
+        <div>
+          <h3 className="text-lg font-semibold mb-3">{t('organization.team.pendingInvites')}</h3>
+          <div className="space-y-2">
+            {pendingInvites.map((invite) => (
+              <Card key={invite.id} className="p-3">
+                <div className="flex items-center gap-3">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
+                    <Mail className="h-4 w-4 text-muted-foreground" />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium">{invite.email}</p>
+                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                      <Badge variant="secondary" className="text-xs">{invite.profileName}</Badge>
+                      <span className="flex items-center gap-1">
+                        <Clock className="h-3 w-3" />
+                        Sent {new Date(invite.createdAt).toLocaleDateString()}
+                      </span>
+                    </div>
+                  </div>
+                  {canManageTeam && (
+                    <div className="flex items-center gap-1">
+                      <Button variant="ghost" size="sm" className="text-xs" onClick={() => handleResendInvite(invite.id)}>
+                        {t('organization.team.resend')}
+                      </Button>
+                      <Button variant="ghost" size="sm" className="text-xs text-destructive" onClick={() => handleRevokeInvite(invite.id)}>
+                        {t('organization.team.revoke')}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <InviteMemberDialog open={inviteOpen} onOpenChange={setInviteOpen} />
+    </div>
+  )
+}