@fayz-ai/saas 0.1.6

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

@@ -0,0 +1,161 @@
+import * as React from 'react'
+import { Plus, X } from 'lucide-react'
+import { toast } from '../notifications/ToastProvider'
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalDescription,
+  ModalFooter,
+} from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@fayz-ai/ui'
+import { Badge } from '@fayz-ai/ui'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useInviteStore } from '../../stores/invite.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { useAuthStore } from '../../stores/auth.store'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface InviteMemberDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Pre-fill the first email (e.g. from person detail Access tab) */
+  defaultEmail?: string
+}
+
+export function InviteMemberDialog({ open, onOpenChange, defaultEmail }: InviteMemberDialogProps) {
+  const { t } = useTranslation()
+  const adapter = useOrgAdapterOptional()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const profiles = usePermissionsStore((s) => s.profiles)
+  const setInvites = useInviteStore((s) => s.setInvites)
+  const user = useAuthStore((s) => s.user)
+
+  const [emails, setEmails] = React.useState<string[]>([defaultEmail ?? ''])
+  const [profileId, setProfileId] = React.useState(profiles[1]?.id ?? profiles[0]?.id ?? '')
+  const [sending, setSending] = React.useState(false)
+  const [sent, setSent] = React.useState(false)
+
+  const addEmail = () => setEmails((prev) => [...prev, ''])
+
+  const updateEmail = (idx: number, value: string) => {
+    setEmails((prev) => {
+      const next = [...prev]
+      next[idx] = value
+      return next
+    })
+  }
+
+  const removeEmail = (idx: number) => {
+    setEmails((prev) => prev.filter((_, i) => i !== idx))
+  }
+
+  const handleSend = async () => {
+    if (!adapter || !currentOrg || !user) return
+    const validEmails = emails.filter((e) => e.trim() && e.includes('@'))
+    if (validEmails.length === 0) return
+
+    setSending(true)
+    try {
+      if (validEmails.length === 1) {
+        await adapter.createInvite(currentOrg.id, validEmails[0].trim(), profileId, user.id)
+      } else {
+        await adapter.bulkInvite(currentOrg.id, validEmails.map((e) => e.trim()), profileId, user.id)
+      }
+      const invites = await adapter.listInvites(currentOrg.id)
+      setInvites(invites)
+      setSent(true)
+    } catch (err: any) {
+      toast.error('Failed to send invites', { description: err?.message })
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleClose = () => {
+    onOpenChange(false)
+    // Reset after animation
+    setTimeout(() => {
+      setEmails([''])
+      setProfileId(profiles[1]?.id ?? profiles[0]?.id ?? '')
+      setSent(false)
+    }, 200)
+  }
+
+  return (
+    <Modal open={open} onOpenChange={handleClose}>
+      <ModalContent>
+        <ModalHeader>
+          <ModalTitle>{t('organization.invite.title')}</ModalTitle>
+          <ModalDescription>{t('organization.invite.description')}</ModalDescription>
+        </ModalHeader>
+
+        {sent ? (
+          <div className="py-8 text-center">
+            <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-success/10">
+              <svg className="h-6 w-6 text-success" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" /></svg>
+            </div>
+            <p className="text-sm font-medium">{t('organization.invite.sent')}</p>
+            <p className="text-xs text-muted-foreground mt-1">{t('organization.invite.sentDescription')}</p>
+          </div>
+        ) : (
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">{t('organization.invite.emailLabel')}</label>
+              {emails.map((email, idx) => (
+                <div key={idx} className="flex items-center gap-2">
+                  <Input
+                    type="email"
+                    placeholder="team@example.com"
+                    value={email}
+                    onChange={(e) => updateEmail(idx, e.target.value)}
+                  />
+                  {emails.length > 1 && (
+                    <Button variant="ghost" size="sm" onClick={() => removeEmail(idx)}>
+                      <X className="h-4 w-4" />
+                    </Button>
+                  )}
+                </div>
+              ))}
+              <Button variant="ghost" size="sm" onClick={addEmail} className="text-xs">
+                <Plus className="h-3.5 w-3.5 mr-1" />
+                {t('organization.invite.addAnother')}
+              </Button>
+            </div>
+
+            <div>
+              <label className="text-sm font-medium">{t('organization.invite.roleLabel')}</label>
+              <Select value={profileId} onValueChange={setProfileId}>
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder={t('organization.invite.rolePlaceholder')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {profiles.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        )}
+
+        <ModalFooter>
+          {sent ? (
+            <Button onClick={handleClose}>{t('common.done')}</Button>
+          ) : (
+            <>
+              <Button variant="outline" onClick={handleClose}>{t('common.cancel')}</Button>
+              <Button onClick={handleSend} disabled={sending || emails.every((e) => !e.trim())}>
+                {sending ? t('organization.invite.sending') : t('organization.invite.sendInvites')}
+              </Button>
+            </>
+          )}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

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

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from 'react'
+import { Loader2, WifiOff, RefreshCw } from 'lucide-react'
+import { useAuthStore } from '../../stores/auth.store'
+import { useOrganizationStore, getPersistedOrgId } from '../../stores/organization.store'
+import { useLocationStore } from '../../stores/location.store'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { TenantOnboarding } from './TenantOnboarding'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface OrgInitializerProps {
+  verticalId?: string
+}
+
+export function OrgInitializer({ verticalId }: OrgInitializerProps) {
+  const adapter = useOrgAdapterOptional()
+  const user = useAuthStore((s) => s.user)
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+  const setUserOrgs = useOrganizationStore((s) => s.setUserOrgs)
+  const setMembers = useOrganizationStore((s) => s.setMembers)
+  const setLoading = useOrganizationStore((s) => s.setLoading)
+  const setProfiles = usePermissionsStore((s) => s.setProfiles)
+  const setCurrentProfile = usePermissionsStore((s) => s.setCurrentProfile)
+  const [needsOnboarding, setNeedsOnboarding] = useState(false)
+  const [initialized, setInitialized] = useState(false)
+  const [connectionError, setConnectionError] = useState(false)
+
+  useEffect(() => {
+    if (!adapter || !user) return
+    let cancelled = false
+
+    async function init() {
+      setLoading(true)
+      setConnectionError(false)
+      try {
+        const orgs = await adapter!.listUserOrgs(user!.id)
+        if (cancelled) return
+        setUserOrgs(orgs)
+
+        if (orgs.length === 0) {
+          setNeedsOnboarding(true)
+          setInitialized(true)
+          return
+        }
+
+        setNeedsOnboarding(false)
+        const persistedId = getPersistedOrgId()
+        const targetOrg = orgs.find((o) => o.orgId === persistedId) ?? orgs[0]
+
+        const org = await adapter!.getOrg(targetOrg.orgId)
+        if (cancelled) return
+        setCurrentOrg(org)
+
+        const [members, profiles] = await Promise.all([
+          adapter!.listMembers(org.id),
+          adapter!.listProfiles(org.id),
+        ])
+        if (cancelled) return
+        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)
+        }
+
+        // Load locations for location picker
+        try {
+          const locations = await adapter!.listLocations(org.id)
+          if (!cancelled) useLocationStore.getState().setLocations(locations)
+        } catch {
+          // Locations are optional — don't block init
+        }
+      } catch (err) {
+        console.error('[saas-core] OrgInitializer error:', err)
+        if (!cancelled) setConnectionError(true)
+      } finally {
+        if (!cancelled) { setLoading(false); setInitialized(true) }
+      }
+    }
+
+    init()
+    return () => { cancelled = true }
+  }, [adapter, user?.id])
+
+  useEffect(() => {
+    if (currentOrg && needsOnboarding) setNeedsOnboarding(false)
+  }, [currentOrg])
+
+  const { t } = useTranslation()
+
+  const handleRetry = () => {
+    setConnectionError(false)
+    setInitialized(false)
+    // Re-trigger the init effect by forcing a state change
+    setLoading(true)
+    if (adapter && user) {
+      const retryInit = async () => {
+        setConnectionError(false)
+        try {
+          const orgs = await adapter.listUserOrgs(user.id)
+          setUserOrgs(orgs)
+          if (orgs.length === 0) {
+            setNeedsOnboarding(true)
+            setInitialized(true)
+            return
+          }
+          setNeedsOnboarding(false)
+          const persistedId = getPersistedOrgId()
+          const targetOrg = orgs.find((o) => o.orgId === persistedId) ?? orgs[0]
+          const org = await adapter.getOrg(targetOrg.orgId)
+          setCurrentOrg(org)
+          const [members, profiles] = await Promise.all([
+            adapter.listMembers(org.id),
+            adapter.listProfiles(org.id),
+          ])
+          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)
+          }
+          // Load locations for location picker
+          try {
+            const locations = await adapter.listLocations(org.id)
+            useLocationStore.getState().setLocations(locations)
+          } catch {
+            // Locations are optional
+          }
+        } catch (err) {
+          console.error('[saas-core] OrgInitializer retry error:', err)
+          setConnectionError(true)
+        } finally {
+          setLoading(false)
+          setInitialized(true)
+        }
+      }
+      retryInit()
+    }
+  }
+
+  if (!initialized || !user) return null
+
+  if (connectionError) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm">
+        <div className="saas-page-enter w-full max-w-sm px-6 text-center">
+          <div className="flex h-14 w-14 mx-auto items-center justify-center rounded-full bg-destructive/10 mb-4">
+            <WifiOff className="h-6 w-6 text-destructive" />
+          </div>
+          <h2 className="text-lg font-semibold">{t('org.connectionError.title')}</h2>
+          <p className="text-sm text-muted-foreground mt-2">{t('org.connectionError.description')}</p>
+          <button
+            onClick={handleRetry}
+            className="mt-6 inline-flex items-center gap-2 rounded-lg bg-primary border border-primary px-5 py-2.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 shadow-button-primary active:shadow-button-inset transition-colors"
+          >
+            <RefreshCw className="h-4 w-4" />
+            {t('org.connectionError.retry')}
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (needsOnboarding) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/95 backdrop-blur-sm">
+        <div className="saas-page-enter w-full max-w-md px-6">
+          <TenantOnboarding verticalId={verticalId} />
+        </div>
+      </div>
+    )
+  }
+
+  return null
+}

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

@@ -0,0 +1,177 @@
+import * as React from 'react'
+import { Building2, Check, ChevronDown, Plus } from 'lucide-react'
+import { cn } from '../../lib/cn'
+import { useOrganizationStore } from '../../stores/organization.store'
+import { useOrgAdapterOptional } from '../../lib/org-context'
+import { useAuthStore } from '../../stores/auth.store'
+import { usePermissionsStore } from '../../stores/permissions.store'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+} from '@fayz-ai/ui'
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalTitle,
+  ModalDescription,
+  ModalFooter,
+} from '@fayz-ai/ui'
+import { Button } from '@fayz-ai/ui'
+import { Input } from '@fayz-ai/ui'
+import { useTranslation } from '../../hooks/useTranslation'
+
+interface OrgSwitcherProps {
+  collapsed?: boolean
+}
+
+export function OrgSwitcher({ collapsed }: OrgSwitcherProps) {
+  const adapter = useOrgAdapterOptional()
+  const currentOrg = useOrganizationStore((s) => s.currentOrg)
+  const userOrgs = useOrganizationStore((s) => s.userOrgs)
+  const setCurrentOrg = useOrganizationStore((s) => s.setCurrentOrg)
+  const setUserOrgs = useOrganizationStore((s) => s.setUserOrgs)
+  const setMembers = useOrganizationStore((s) => s.setMembers)
+  const setCurrentProfile = usePermissionsStore((s) => s.setCurrentProfile)
+  const setProfiles = usePermissionsStore((s) => s.setProfiles)
+  const user = useAuthStore((s) => s.user)
+
+  const [createOpen, setCreateOpen] = React.useState(false)
+  const [newOrgName, setNewOrgName] = React.useState('')
+  const [creating, setCreating] = React.useState(false)
+
+  const { t } = useTranslation()
+
+  if (!adapter || !currentOrg) return null
+
+  const initial = currentOrg.name.charAt(0).toUpperCase()
+
+  const handleSwitch = async (orgId: string) => {
+    if (orgId === currentOrg.id || !adapter || !user) return
+    try {
+      const org = await adapter.getOrg(orgId)
+      setCurrentOrg(org)
+      const members = await adapter.listMembers(orgId)
+      setMembers(members)
+      const profiles = await adapter.listProfiles(orgId)
+      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 {
+      // ignore
+    }
+  }
+
+  const handleCreate = async () => {
+    if (!newOrgName.trim() || !adapter || !user) return
+    setCreating(true)
+    try {
+      const org = await adapter.createOrg(newOrgName.trim(), user.id)
+      const orgs = await adapter.listUserOrgs(user.id)
+      setUserOrgs(orgs)
+      setCurrentOrg(org)
+      const members = await adapter.listMembers(org.id)
+      setMembers(members)
+      const profiles = await adapter.listProfiles(org.id)
+      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)
+      }
+      setCreateOpen(false)
+      setNewOrgName('')
+    } catch {
+      // ignore
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  return (
+    <>
+      <div className={cn(collapsed ? 'px-1 py-2' : 'px-3 py-2')}>
+        <Dropdown>
+          <DropdownTrigger asChild>
+            <button
+              className={cn(
+                'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar-accent',
+                collapsed && 'justify-center px-0'
+              )}
+            >
+              <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-sidebar-accent text-sidebar-accent-foreground text-xs font-bold">
+                {currentOrg.logoUrl ? (
+                  <img src={currentOrg.logoUrl} alt="" className="h-full w-full rounded-md object-cover" />
+                ) : (
+                  initial
+                )}
+              </div>
+              {!collapsed && (
+                <>
+                  <span className="flex-1 truncate text-left">{currentOrg.name}</span>
+                  <ChevronDown className="h-3.5 w-3.5 shrink-0 text-sidebar-muted" />
+                </>
+              )}
+            </button>
+          </DropdownTrigger>
+          <DropdownContent align="start" className="w-56 bg-sidebar text-sidebar-foreground border-sidebar-border">
+            {userOrgs.map((org) => (
+              <DropdownItem
+                key={org.orgId}
+                onClick={() => handleSwitch(org.orgId)}
+                className="flex items-center gap-2 focus:bg-sidebar-accent focus:text-sidebar-accent-foreground"
+              >
+                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-sidebar-accent text-sidebar-accent-foreground text-xs font-bold">
+                  {org.orgLogoUrl ? (
+                    <img src={org.orgLogoUrl} alt="" className="h-full w-full rounded object-cover" />
+                  ) : (
+                    org.orgName.charAt(0).toUpperCase()
+                  )}
+                </div>
+                <span className="flex-1 truncate">{org.orgName}</span>
+                {org.orgId === currentOrg.id && (
+                  <Check className="h-4 w-4 text-primary" />
+                )}
+              </DropdownItem>
+            ))}
+            <DropdownSeparator className="bg-sidebar-border" />
+            <DropdownItem onClick={() => setCreateOpen(true)} className="flex items-center gap-2 focus:bg-sidebar-accent focus:text-sidebar-accent-foreground">
+              <Plus className="h-4 w-4" />
+              <span>{t('organization.createOrg')}</span>
+            </DropdownItem>
+          </DropdownContent>
+        </Dropdown>
+      </div>
+
+      <Modal open={createOpen} onOpenChange={setCreateOpen}>
+        <ModalContent>
+          <ModalHeader>
+            <ModalTitle>{t('organization.createOrgTitle')}</ModalTitle>
+            <ModalDescription>{t('organization.createOrgDescription')}</ModalDescription>
+          </ModalHeader>
+          <div className="py-4">
+            <Input
+              placeholder={t('organization.orgNamePlaceholder')}
+              value={newOrgName}
+              onChange={(e) => setNewOrgName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleCreate() }}
+              autoFocus
+            />
+          </div>
+          <ModalFooter>
+            <Button variant="outline" onClick={() => setCreateOpen(false)}>{t('common.cancel')}</Button>
+            <Button onClick={handleCreate} disabled={!newOrgName.trim() || creating}>
+              {creating ? t('organization.creating') : t('common.create')}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

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

@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { usePermission } from '../../hooks/usePermission'
+import type { PermissionAction } from '../../types/permissions'
+
+interface PermissionGateProps {
+  feature: string
+  action: PermissionAction
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}
+
+export function PermissionGate({ feature, action, children, fallback }: PermissionGateProps) {
+  const { can } = usePermission()
+  if (!can(feature, action)) return <>{fallback ?? null}</>
+  return <>{children}</>
+}