@startsimpli/ui 0.4.15 → 0.4.17

package/src/components/team/pages/TeamSettingsPage.tsx

@@ -0,0 +1,423 @@
+'use client'
+
+/**
+ * TeamSettingsPage — shared composer for /settings/team across every app
+ * in the monorepo (startsim-o7s).
+ *
+ * Wires:
+ *   - useAuth (current user + logout)
+ *   - useMembershipFromApi (company + currentTeam + isAdmin)
+ *   - useInvitations (pending invitations)
+ *   - api.teams.members / updateRole / removeMember (members table)
+ *   - LeaveTeamDialog (calls api.teams.removeMember on the current user)
+ *
+ * Apps pass:
+ *   - api: the @startsimpli/api client (structurally typed below)
+ *   - centralAuthApp: app slug for buildCentralAuthUrl (e.g. 'vault')
+ *   - classNames: optional per-slot Tailwind overrides
+ *   - onLeftTeam: optional override; defaults to logout + central-auth bounce
+ */
+
+import * as React from 'react'
+import {
+  useAuth,
+  useInvitations,
+  useMembershipFromApi,
+  buildCentralAuthUrl,
+} from '@startsimpli/auth'
+import { MembersTable } from '../MembersTable'
+import { InviteMemberDialog } from '../InviteMemberDialog'
+import { LeaveTeamDialog } from '../LeaveTeamDialog'
+import type {
+  MemberRow,
+  TeamRole,
+  InvitationLite,
+} from '../types'
+import {
+  TEAM_SETTINGS_PAGE_DEFAULTS,
+  type TeamSettingsPageClassNames,
+} from './team-settings-page-default-class-names'
+import type {
+  TeamSettingsApi,
+  ApiInvitation,
+  ApiMember,
+} from './types'
+
+export interface TeamSettingsPageProps {
+  /** The @startsimpli/api client. */
+  api: TeamSettingsApi
+  /** Central-auth app slug (e.g. 'vault', 'market', 'raise'). */
+  centralAuthApp: string
+  /** Per-slot className overrides. */
+  classNames?: TeamSettingsPageClassNames
+  /**
+   * Optional override for the post-leave handler. Defaults to logout +
+   * redirect to central auth. Tested-only override path; most apps don't
+   * need to set it.
+   */
+  onLeftTeam?: () => void
+  /**
+   * Optional href used by the back link. Defaults to '/'. Apps can point at
+   * their dashboard route ('/environments', '/dashboard', etc.).
+   */
+  backHref?: string
+  /** Text shown for the back link. Defaults to '← Back'. */
+  backLabel?: string
+  /** Title shown in the header. Defaults to 'Team & members'. */
+  title?: string
+}
+
+/** Human-friendly relative-ish expiry. Keeps the wire untouched. */
+function formatExpiry(iso: string): string {
+  try {
+    const d = new Date(iso)
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+  } catch {
+    return iso
+  }
+}
+
+/** Render the backend's 400 "last owner" error in a friendly way. */
+function friendlyRoleError(err: unknown): string {
+  if (err instanceof Error && /owner/i.test(err.message)) {
+    return 'A team must always have at least one owner.'
+  }
+  return err instanceof Error ? err.message : 'Could not update role.'
+}
+
+function toInvitationLite(i: ApiInvitation): InvitationLite {
+  return {
+    id: i.id,
+    email: i.email,
+    teamId: i.teamId,
+    role: i.role,
+    token: i.token,
+    expiresAt: i.expiresAt,
+    acceptedAt: i.acceptedAt,
+    revokedAt: i.revokedAt,
+    isExpired: i.isExpired,
+    isAccepted: i.isAccepted,
+  }
+}
+
+export function TeamSettingsPage({
+  api,
+  centralAuthApp,
+  classNames,
+  onLeftTeam,
+  backHref = '/',
+  backLabel = '← Back',
+  title = 'Team & members',
+}: TeamSettingsPageProps) {
+  const cls = { ...TEAM_SETTINGS_PAGE_DEFAULTS, ...(classNames ?? {}) }
+  const { user, logout } = useAuth()
+  const membership = useMembershipFromApi(api)
+  const { company, currentTeam, isAdmin, isLoading, error, refresh } = membership
+
+  const teamId = currentTeam?.id
+  const teamSlug = currentTeam?.slug ?? teamId
+
+  const [members, setMembers] = React.useState<MemberRow[]>([])
+  const [membersLoading, setMembersLoading] = React.useState(false)
+  const [membersError, setMembersError] = React.useState<string>('')
+  const [mutationError, setMutationError] = React.useState<string>('')
+
+  const loadMembers = React.useCallback(async () => {
+    if (!teamSlug) return
+    setMembersLoading(true)
+    setMembersError('')
+    try {
+      const rows: ApiMember[] = await api.teams.members(teamSlug)
+      setMembers(
+        rows.map((m) => ({
+          id: m.id,
+          userId: m.userId,
+          teamId: m.teamId,
+          role: m.role,
+          joinedAt: m.joinedAt,
+          user: m.user,
+        })),
+      )
+    } catch (err) {
+      setMembersError(err instanceof Error ? err.message : 'Could not load members')
+    } finally {
+      setMembersLoading(false)
+    }
+  }, [api, teamSlug])
+
+  React.useEffect(() => {
+    void loadMembers()
+  }, [loadMembers])
+
+  const invitations = useInvitations({
+    fetchInvitations: async () => {
+      if (!teamSlug) return []
+      const res = await api.teamInvitations.list({ teamId: teamSlug })
+      return res.results.map((i) => ({
+        id: i.id,
+        email: i.email,
+        teamId: i.teamId,
+        role: i.role,
+        expiresAt: i.expiresAt,
+        acceptedAt: i.acceptedAt,
+        revokedAt: i.revokedAt,
+        isExpired: i.isExpired,
+        isAccepted: i.isAccepted,
+        createdAt: i.createdAt,
+      }))
+    },
+    revokeInvitation: async (id) => {
+      await api.teamInvitations.revoke(id)
+    },
+    bulkInviteToTeam: async (slug, invites) => {
+      const result = await api.teams.bulkInvite(slug, invites)
+      return {
+        invited: result.invited.map((i) => ({
+          id: i.id,
+          email: i.email,
+          teamId: i.teamId,
+          role: i.role,
+          expiresAt: i.expiresAt,
+          acceptedAt: i.acceptedAt,
+          revokedAt: i.revokedAt,
+          isExpired: i.isExpired,
+          isAccepted: i.isAccepted,
+          createdAt: i.createdAt,
+        })),
+        skipped: result.skipped,
+      }
+    },
+    autoFetch: false,
+  })
+
+  React.useEffect(() => {
+    if (teamSlug) void invitations.refresh()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [teamSlug])
+
+  async function handleChangeRole(userId: string, role: TeamRole) {
+    if (!teamSlug) return
+    setMutationError('')
+    const snapshot = members
+    setMembers((prev) => prev.map((m) => (m.userId === userId ? { ...m, role } : m)))
+    try {
+      await api.teams.updateRole(teamSlug, userId, role)
+    } catch (err) {
+      setMembers(snapshot)
+      setMutationError(friendlyRoleError(err))
+    }
+  }
+
+  async function handleRemove(userId: string) {
+    if (!teamSlug) return
+    setMutationError('')
+    const snapshot = members
+    setMembers((prev) => prev.filter((m) => m.userId !== userId))
+    try {
+      await api.teams.removeMember(teamSlug, userId)
+    } catch (err) {
+      setMembers(snapshot)
+      setMutationError(friendlyRoleError(err))
+    }
+  }
+
+  async function handleLeave() {
+    if (!teamSlug || !user) return
+    await api.teams.removeMember(teamSlug, user.id)
+  }
+
+  function defaultOnLeftTeam() {
+    void logout().finally(() => {
+      if (typeof window !== 'undefined') {
+        window.location.href = buildCentralAuthUrl('signin', {
+          app: centralAuthApp,
+          returnTo: `${window.location.origin}/`,
+        })
+      }
+    })
+  }
+
+  // ----- Render -----------------------------------------------------------
+
+  if (isLoading) {
+    return <p className={cls.loadingText}>Loading team…</p>
+  }
+
+  if (error) {
+    return (
+      <div className={cls.section}>
+        <p className={cls.errorText}>Could not load team membership.</p>
+        <button
+          type="button"
+          onClick={() => void refresh()}
+          className={cls.retryButton}
+        >
+          Retry
+        </button>
+      </div>
+    )
+  }
+
+  if (!currentTeam) {
+    return (
+      <div className={cls.section}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <h1 className={cls.title}>{title}</h1>
+        <p className={cls.sectionBody}>
+          You aren&apos;t a member of any team yet. Accept an invitation or ask
+          an admin to add you.
+        </p>
+      </div>
+    )
+  }
+
+  const handleInvited = () => {
+    void invitations.refresh()
+  }
+
+  return (
+    <div className={cls.root}>
+      <div className={cls.header}>
+        <a href={backHref} className={cls.backLink}>
+          {backLabel}
+        </a>
+        <h1 className={cls.title}>{title}</h1>
+        <p className={cls.subtitle}>
+          {company ? `${company.name} · ` : ''}
+          {currentTeam.name}
+        </p>
+      </div>
+
+      {/* Members --------------------------------------------------------- */}
+      <section className={cls.section}>
+        <div className={cls.sectionHeader}>
+          <h2 className={cls.sectionHeading}>Members</h2>
+          {isAdmin && teamId && (
+            <InviteMemberDialog
+              teamId={teamId}
+              triggerLabel="+ Invite"
+              classNames={cls.inviteDialog}
+              onSubmit={(input) =>
+                api.teamInvitations
+                  .create({
+                    email: input.email,
+                    teamId: input.teamId,
+                    role: input.role,
+                  })
+                  .then(toInvitationLite)
+              }
+              onInvited={handleInvited}
+            />
+          )}
+        </div>
+        {mutationError && (
+          <p className={cls.errorText} role="alert">
+            {mutationError}
+          </p>
+        )}
+        {membersError && (
+          <div className="space-y-2">
+            <p className={cls.errorText}>{membersError}</p>
+            <button
+              type="button"
+              onClick={() => void loadMembers()}
+              className={cls.retryButton}
+            >
+              Retry
+            </button>
+          </div>
+        )}
+        {membersLoading ? (
+          <p className={cls.loadingText}>Loading members…</p>
+        ) : (
+          <MembersTable
+            members={members}
+            canManage={isAdmin}
+            onChangeRole={handleChangeRole}
+            onRemove={handleRemove}
+            classNames={cls.membersTable}
+          />
+        )}
+      </section>
+
+      {/* Pending invitations --------------------------------------------- */}
+      <section className={cls.section}>
+        <h2 className={cls.sectionHeading}>Pending invitations</h2>
+        {invitations.isLoading ? (
+          <p className={cls.loadingText}>Loading invitations…</p>
+        ) : invitations.error ? (
+          <div className="space-y-2">
+            <p className={cls.errorText}>Could not load invitations.</p>
+            <button
+              type="button"
+              onClick={() => void invitations.refresh()}
+              className={cls.retryButton}
+            >
+              Retry
+            </button>
+          </div>
+        ) : invitations.pending.length === 0 ? (
+          <p className={cls.emptyText}>No pending invitations.</p>
+        ) : (
+          <div className={cls.invitationsTableWrapper}>
+            <table className={cls.invitationsTable}>
+              <thead className={cls.invitationsThead}>
+                <tr>
+                  <th className={cls.invitationsTh}>Email</th>
+                  <th className={cls.invitationsTh}>Role</th>
+                  <th className={cls.invitationsTh}>Expires</th>
+                  <th className={`${cls.invitationsTh} text-right`}>Actions</th>
+                </tr>
+              </thead>
+              <tbody className={cls.invitationsTbody}>
+                {invitations.pending.map((inv) => (
+                  <tr key={inv.id}>
+                    <td className={cls.invitationsEmailCell}>{inv.email}</td>
+                    <td className={cls.invitationsRoleCell}>
+                      <span className={cls.invitationsRoleBadge}>{inv.role}</span>
+                    </td>
+                    <td className={cls.invitationsExpiryCell}>
+                      {formatExpiry(inv.expiresAt)}
+                    </td>
+                    <td className={cls.invitationsActionsCell}>
+                      {isAdmin && (
+                        <button
+                          type="button"
+                          onClick={() => void invitations.revoke(inv.id)}
+                          className={cls.invitationsRevokeButton}
+                        >
+                          Revoke
+                        </button>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </section>
+
+      {/* Leave team ------------------------------------------------------- */}
+      <section className={cls.dangerDivider}>
+        <h2 className={cls.sectionHeading}>Danger zone</h2>
+        <p className={cls.sectionBody}>
+          Leave this team. You&apos;ll need a fresh invitation to rejoin.
+        </p>
+        <LeaveTeamDialog
+          team={{
+            id: currentTeam.id,
+            slug: currentTeam.slug,
+            name: currentTeam.name,
+            companyId: currentTeam.companyId,
+          }}
+          onSubmit={handleLeave}
+          onLeft={onLeftTeam ?? defaultOnLeftTeam}
+          classNames={cls.leaveDialog}
+        />
+      </section>
+    </div>
+  )
+}

package/src/components/team/pages/domains-settings-page-default-class-names.ts

@@ -0,0 +1,89 @@
+/**
+ * Default Tailwind classes for the DomainsSettingsPage composer (startsim-o7s).
+ *
+ * Mirrors the slot pattern from TeamSettingsPage — apps override individual
+ * surfaces (primary button, input field, etc.) to tint the page in their
+ * visual identity.
+ */
+
+import type { DomainClaimCardClassNames } from '../domain-claim-card-default-class-names'
+
+export interface DomainsSettingsPageClassNames {
+  /** Outer page wrapper. */
+  root?: string
+  /** Header block (back link + title row + action). */
+  header?: string
+  /** Back link / breadcrumb. */
+  backLink?: string
+  /** Row pairing title with the "Add domain" trigger. */
+  titleRow?: string
+  /** Page title. */
+  title?: string
+  /** Subtitle text. */
+  subtitle?: string
+
+  /** Primary CTA (the "+ Add domain" button, the form's submit). */
+  primaryButton?: string
+  /** Plain text input. */
+  input?: string
+  /** Label above the input. */
+  label?: string
+  /** Form wrapper (border + padding). */
+  formCard?: string
+  /** Row containing the form's submit + cancel buttons. */
+  formActions?: string
+  /** "Cancel" button next to the form submit. */
+  cancelButton?: string
+
+  /** Inline error text. */
+  errorText?: string
+  /** Loading text. */
+  loadingText?: string
+
+  /** Wrapper for the empty-state ("No domains claimed yet"). */
+  emptyState?: string
+  /** Body text inside the empty state. */
+  emptyText?: string
+
+  /** Retry button shown next to fetch errors. */
+  retryButton?: string
+
+  /** Wrapper for the list of domain cards. */
+  list?: string
+
+  /** Nested className map for the DomainClaimCard. */
+  claimCard?: DomainClaimCardClassNames
+}
+
+export const DOMAINS_SETTINGS_PAGE_DEFAULTS: Required<
+  Omit<DomainsSettingsPageClassNames, 'claimCard'>
+> = {
+  root: 'space-y-6',
+  header: '',
+  backLink: 'text-sm text-primary-600 hover:underline',
+  titleRow: 'mt-2 flex items-center justify-between gap-4',
+  title: 'text-xl font-semibold text-gray-900',
+  subtitle: 'mt-1 text-sm text-gray-500',
+
+  primaryButton:
+    'rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50',
+  input:
+    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+  label: 'block text-sm font-medium text-gray-700',
+  formCard: 'rounded-xl border border-gray-200 bg-white p-4 space-y-3',
+  formActions: 'flex gap-2',
+  cancelButton:
+    'rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50',
+
+  errorText: 'text-sm text-red-600',
+  loadingText: 'text-sm text-gray-500',
+
+  emptyState:
+    'rounded-xl border border-dashed border-gray-300 bg-white p-10 text-center',
+  emptyText: 'text-sm text-gray-600',
+
+  retryButton:
+    'rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50',
+
+  list: 'space-y-4',
+}

package/src/components/team/pages/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Shared /settings/team and /settings/domains page composers (startsim-o7s).
+ *
+ * Each app's page becomes a ~5 LOC wrapper that passes `api` + a tiny
+ * className-slot override map. See `vault-web/src/app/(dashboard)/settings/team/page.tsx`
+ * for the canonical wrapper.
+ */
+
+export { TeamSettingsPage } from './TeamSettingsPage'
+export type { TeamSettingsPageProps } from './TeamSettingsPage'
+export type {
+  TeamSettingsPageClassNames,
+} from './team-settings-page-default-class-names'
+export { TEAM_SETTINGS_PAGE_DEFAULTS } from './team-settings-page-default-class-names'
+
+export { DomainsSettingsPage } from './DomainsSettingsPage'
+export type { DomainsSettingsPageProps } from './DomainsSettingsPage'
+export type {
+  DomainsSettingsPageClassNames,
+} from './domains-settings-page-default-class-names'
+export { DOMAINS_SETTINGS_PAGE_DEFAULTS } from './domains-settings-page-default-class-names'
+
+export type {
+  TeamSettingsApi,
+  DomainsSettingsApi,
+  ApiInvitation,
+  ApiDomainClaim,
+  ApiMember,
+  ApiCompany,
+  ApiTeam,
+  ApiMyTeamMembership,
+  ApiPaginated,
+} from './types'

package/src/components/team/pages/team-settings-page-default-class-names.ts

@@ -0,0 +1,116 @@
+/**
+ * Default Tailwind classes for the TeamSettingsPage composer (startsim-o7s).
+ *
+ * Apps pass a partial override map to tint the page in their visual
+ * identity (indigo for vault, emerald for market, etc.). Each slot covers
+ * exactly one visual surface — section wrappers, headings, inline buttons,
+ * error rows.
+ */
+
+import type { MembersTableClassNames } from '../members-table-default-class-names'
+import type { InviteMemberDialogClassNames } from '../invite-member-dialog-default-class-names'
+import type { LeaveTeamDialogClassNames } from '../leave-team-dialog-default-class-names'
+
+export interface TeamSettingsPageClassNames {
+  /** Outer page wrapper (controls overall spacing). */
+  root?: string
+  /** Header block (back link + page title + meta line). */
+  header?: string
+  /** "Back to environments" or equivalent breadcrumb link. */
+  backLink?: string
+  /** Page title (`Team & members`). */
+  title?: string
+  /** Subtitle line under the title (company · team name). */
+  subtitle?: string
+
+  /** Wrapper for a single page section (members / invitations / danger). */
+  section?: string
+  /** Row that pairs a section heading with its primary action button. */
+  sectionHeader?: string
+  /** Section H2 label (small uppercase tracking). */
+  sectionHeading?: string
+  /** Body text inside a section. */
+  sectionBody?: string
+
+  /** Border divider above the danger zone. */
+  dangerDivider?: string
+
+  /** Inline error text (mutation failures, validation hits). */
+  errorText?: string
+  /** Loading text ("Loading team…", "Loading members…"). */
+  loadingText?: string
+  /** Empty-state text ("No pending invitations.", etc). */
+  emptyText?: string
+
+  /** "Retry" button rendered next to inline errors. */
+  retryButton?: string
+
+  /** Wrapper of the pending-invitations table. */
+  invitationsTableWrapper?: string
+  /** The invitations <table>. */
+  invitationsTable?: string
+  /** Thead of the invitations table. */
+  invitationsThead?: string
+  /** Th cells of the invitations table. */
+  invitationsTh?: string
+  /** Tbody (divide-y normally). */
+  invitationsTbody?: string
+  /** Cell containing the email column. */
+  invitationsEmailCell?: string
+  /** Cell containing the role badge. */
+  invitationsRoleCell?: string
+  /** Role badge style. */
+  invitationsRoleBadge?: string
+  /** Cell containing the expiry. */
+  invitationsExpiryCell?: string
+  /** Cell containing the revoke action. */
+  invitationsActionsCell?: string
+  /** Revoke button text. */
+  invitationsRevokeButton?: string
+
+  /** Nested className maps for the embedded shared components. */
+  membersTable?: MembersTableClassNames
+  inviteDialog?: InviteMemberDialogClassNames
+  leaveDialog?: LeaveTeamDialogClassNames
+}
+
+export const TEAM_SETTINGS_PAGE_DEFAULTS: Required<
+  Omit<
+    TeamSettingsPageClassNames,
+    'membersTable' | 'inviteDialog' | 'leaveDialog'
+  >
+> = {
+  root: 'space-y-8',
+  header: '',
+  backLink: 'text-sm text-primary-600 hover:underline',
+  title: 'mt-2 text-xl font-semibold text-gray-900',
+  subtitle: 'mt-1 text-sm text-gray-500',
+
+  section: 'space-y-3',
+  sectionHeader: 'flex items-center justify-between',
+  sectionHeading: 'text-sm font-semibold uppercase tracking-wide text-gray-500',
+  sectionBody: 'text-sm text-gray-500',
+
+  dangerDivider: 'space-y-3 border-t border-gray-200 pt-6',
+
+  errorText: 'text-sm text-red-600',
+  loadingText: 'text-sm text-gray-500',
+  emptyText: 'text-sm text-gray-500',
+
+  retryButton:
+    'rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50',
+
+  invitationsTableWrapper:
+    'overflow-hidden rounded-xl border border-gray-200 bg-white',
+  invitationsTable: 'w-full text-sm',
+  invitationsThead: 'bg-gray-50 text-left text-xs uppercase text-gray-500',
+  invitationsTh: 'px-4 py-3 font-medium',
+  invitationsTbody: 'divide-y divide-gray-100',
+  invitationsEmailCell: 'px-4 py-3 text-gray-700',
+  invitationsRoleCell: 'px-4 py-3',
+  invitationsRoleBadge:
+    'inline-flex items-center rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700',
+  invitationsExpiryCell: 'px-4 py-3 text-gray-500',
+  invitationsActionsCell: 'px-4 py-3 text-right',
+  invitationsRevokeButton: 'text-red-600 hover:underline text-sm',
+}