@startsimpli/ui 0.4.83 → 0.4.85

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

@@ -0,0 +1,221 @@
+'use client'
+
+/**
+ * MemberDetailPanel — "what has this person done" (startsim-768w.19.6).
+ *
+ * THE PAGE-LEVEL COMPOSER for one member, beside TeamSettingsPage /
+ * DomainsSettingsPage (rule #9): identity header, the facts row (last login /
+ * activated / invited by / role last changed), the invite state with a Resend
+ * affordance while it is pending or expired, and that person's own activity.
+ * An app supplies a member row, an actor-scoped activity client and its theme
+ * classNames — nothing else.
+ *
+ * THE DESIGN, in one line: a member's activity is NOT a new feed. It is THE one
+ * permission-filtered event stream narrowed by actor, so this panel embeds the
+ * shared `ActivityFeedPanel` with a client the host already scoped
+ * (`(p) => api.foundry.activity(slug, { ...p, actor: userId })`). There is no
+ * second timeline, no second client, and no level check anywhere below this
+ * line — visibility was decided by the endpoint, and a row that arrives is
+ * rendered. Registering a new event type needs zero changes here.
+ *
+ * CLIENT-INJECTED, like every other composer in this package, which is what
+ * keeps @startsimpli/api out of packages/ui.
+ */
+
+import * as React from 'react'
+import { ActivityFeedPanel } from '../../activity/ActivityFeedPanel'
+import type { ActivityClient } from '../../activity/types'
+import { userDisplayName, userInitials, type MemberRow, type TeamRole } from '../types'
+import {
+  MEMBER_DETAIL_PANEL_DEFAULTS,
+  type MemberDetailPanelClassNames,
+} from './member-detail-panel-default-class-names'
+
+export interface MemberDetailPanelProps {
+  /** The member's facts, as the roster/detail endpoint reported them. */
+  member: MemberRow
+  /**
+   * THE activity stream, already narrowed to this actor by the host. The panel
+   * neither adds nor removes rows — the endpoint decided what this viewer sees.
+   */
+  activityClient: ActivityClient
+  /** Cache namespace, e.g. `['foundry', slug, 'member', userId, 'activity']`. */
+  activityQueryKey?: readonly unknown[]
+  /** Expose management affordances (currently: resend invite). */
+  canManage?: boolean
+  /** Re-send the set-password link. Offered on pending/expired members only. */
+  onResendInvite?: (userId: string) => void | Promise<void>
+  /** Disable the resend button while a request is in flight. */
+  isResending?: boolean
+  /** Failure line under the invite row — e.g. "they already set a password". */
+  error?: React.ReactNode
+  /** Copy for the embedded feed, so a host can name the surface. */
+  activityTitle?: React.ReactNode
+  activityDescription?: React.ReactNode
+  activityEmptyTitle?: string
+  activityEmptyDescription?: string
+  /** Poll interval for the embedded feed. Off by default. */
+  activityRefetchInterval?: number | false
+  classNames?: MemberDetailPanelClassNames
+}
+
+const ROLE_LABEL: Record<TeamRole, string> = {
+  owner: 'Owner',
+  admin: 'Admin',
+  member: 'Member',
+  viewer: 'Viewer',
+}
+
+type RowStatus = 'active' | 'pending' | 'expired' | 'deactivated'
+
+const STATUS_LABEL: Record<RowStatus, string> = {
+  active: 'Active',
+  pending: 'Invite pending',
+  expired: 'Invite expired',
+  deactivated: 'Deactivated',
+}
+
+/** A deactivated membership outranks whatever the invite says — it is the
+ *  reason this person has no access right now. */
+function rowStatus(m: MemberRow): RowStatus {
+  if (m.isActive === false) return 'deactivated'
+  return m.inviteStatus ?? 'active'
+}
+
+/** Absolute date + time, not "3 days ago": an owner deciding whether to resend
+ *  an invite or chase a dormant account wants the actual moment. */
+function formatWhen(iso?: string | null): string | null {
+  if (!iso) return null
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return iso
+  return d.toLocaleString(undefined, {
+    month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit',
+  })
+}
+
+export function MemberDetailPanel({
+  member,
+  activityClient,
+  activityQueryKey = ['member-activity'],
+  canManage = false,
+  onResendInvite,
+  isResending = false,
+  error,
+  activityTitle = 'Activity',
+  activityDescription = 'What this person has done here, newest first.',
+  activityEmptyTitle = 'Nothing recorded yet',
+  activityEmptyDescription = 'Actions this person takes here will show up in this list.',
+  activityRefetchInterval = false,
+  classNames,
+}: MemberDetailPanelProps) {
+  const cls = { ...MEMBER_DETAIL_PANEL_DEFAULTS, ...(classNames ?? {}) }
+  const status = rowStatus(member)
+  const statusClass: Record<RowStatus, string> = {
+    active: cls.statusActive,
+    pending: cls.statusPending,
+    expired: cls.statusExpired,
+    deactivated: cls.statusDeactivated,
+  }
+  const displayName = userDisplayName(member.user) || member.userId
+  const secondary =
+    member.user?.email && member.user.email !== displayName ? member.user.email : null
+  const canResend =
+    canManage && !!onResendInvite && (status === 'pending' || status === 'expired')
+
+  /** One labelled fact. An absent value renders an explicit sentence rather
+   *  than a blank: "never signed in" is an ANSWER, and the whole complaint this
+   *  panel exists for was surfaces that said nothing at all. */
+  const fact = (testId: string, label: string, value: string | null, empty: string) => (
+    <div className={cls.fact} data-testid={testId}>
+      <p className={cls.factLabel}>{label}</p>
+      <p className={value ? cls.factValue : cls.factEmpty} title={value ?? empty}>
+        {value ?? empty}
+      </p>
+    </div>
+  )
+
+  return (
+    <div className={cls.root} data-testid="member-detail-panel">
+      <div className={cls.header}>
+        <div className={cls.identity}>
+          {member.user?.avatarUrl ? (
+            <img
+              src={member.user.avatarUrl}
+              alt=""
+              className={cls.avatar}
+              style={{ objectFit: 'cover' }}
+            />
+          ) : (
+            <span className={cls.avatar} aria-hidden="true">{userInitials(member.user)}</span>
+          )}
+          <div className="flex min-w-0 flex-col">
+            <h2 className={cls.name}>{displayName}</h2>
+            {secondary && <span className={cls.email}>{secondary}</span>}
+          </div>
+        </div>
+        <div className={cls.badges}>
+          <span className={cls.roleBadge}>{ROLE_LABEL[member.role]}</span>
+          <span
+            className={`${cls.statusBadge} ${statusClass[status]}`.trim()}
+            data-testid="member-invite-status"
+            data-invite-status={status}
+          >
+            {STATUS_LABEL[status]}
+          </span>
+        </div>
+      </div>
+
+      <div className={cls.facts} data-testid="member-facts">
+        {fact('fact-last-login', 'Last signed in',
+          formatWhen(member.lastLoginAt), 'Never signed in')}
+        {fact('fact-activated', 'Joined',
+          formatWhen(member.activatedAt ?? member.joinedAt), 'Not yet')}
+        {fact('fact-invited-by', 'Invited by', member.invitedByEmail ?? null, 'No record')}
+        {fact('fact-role-changed', 'Role last changed',
+          formatWhen(member.roleChangedAt), 'Never changed')}
+      </div>
+
+      {(status === 'pending' || status === 'expired') && (
+        <div className={cls.inviteRow}>
+          <span className={cls.inviteNote}>
+            {status === 'expired'
+              ? `This invite expired${
+                  formatWhen(member.inviteExpiresAt) ? ` on ${formatWhen(member.inviteExpiresAt)}` : ''
+                } — they can no longer use the link they were sent.`
+              : `Invite sent${
+                  formatWhen(member.inviteExpiresAt) ? `, expires ${formatWhen(member.inviteExpiresAt)}` : ''
+                } — they haven't set a password yet.`}
+          </span>
+          {canResend && (
+            <button
+              type="button"
+              className={cls.resendButton}
+              disabled={isResending}
+              onClick={() => onResendInvite!(member.userId)}
+            >
+              {isResending ? 'Sending…' : 'Resend invite'}
+            </button>
+          )}
+        </div>
+      )}
+
+      {error && <p className={cls.inviteNote}>{error}</p>}
+
+      <div className={cls.activity}>
+        <ActivityFeedPanel
+          client={activityClient}
+          queryKey={activityQueryKey}
+          refetchInterval={activityRefetchInterval}
+          title={activityTitle}
+          description={activityDescription}
+          // The feed is ALREADY narrowed to one actor by the injected client, so
+          // an actor picker here would only offer to contradict it.
+          showFilters={false}
+          emptyTitle={activityEmptyTitle}
+          emptyDescription={activityEmptyDescription}
+          classNames={classNames?.activityPanel}
+        />
+      </div>
+    </div>
+  )
+}

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

@@ -20,6 +20,16 @@ export type {
 } from './domains-settings-page-default-class-names'
 export { DOMAINS_SETTINGS_PAGE_DEFAULTS } from './domains-settings-page-default-class-names'
 
+// "What has this person done" — one member's facts plus their slice of THE one
+// permission-filtered event stream (startsim-768w.19.6). The activity client is
+// injected already narrowed to that actor; this composer adds no feed of its own.
+export { MemberDetailPanel } from './MemberDetailPanel'
+export type { MemberDetailPanelProps } from './MemberDetailPanel'
+export type {
+  MemberDetailPanelClassNames,
+} from './member-detail-panel-default-class-names'
+export { MEMBER_DETAIL_PANEL_DEFAULTS } from './member-detail-panel-default-class-names'
+
 export type {
   TeamSettingsApi,
   DomainsSettingsApi,

package/src/components/team/pages/member-detail-panel-default-class-names.ts

@@ -0,0 +1,68 @@
+/** Default Tailwind classes for {@link MemberDetailPanel}. startsim-768w.19.6.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
+import type { ActivityFeedPanelClassNames } from '../../activity/activity-feed-panel-default-class-names'
+
+export interface MemberDetailPanelClassNames {
+  root?: string
+  /** Identity header: avatar + name + email + role/status pills. */
+  header?: string
+  identity?: string
+  avatar?: string
+  name?: string
+  email?: string
+  badges?: string
+  roleBadge?: string
+  statusBadge?: string
+  /** Per-state colour of the invite pill — an expired invite is an action item. */
+  statusActive?: string
+  statusPending?: string
+  statusExpired?: string
+  statusDeactivated?: string
+  /** The facts grid: last login / activated / invited by / role changed. */
+  facts?: string
+  fact?: string
+  factLabel?: string
+  factValue?: string
+  /** Muted rendering for a fact that has no value yet ("Never signed in"). */
+  factEmpty?: string
+  /** Row holding the invite callout + its Resend action. */
+  inviteRow?: string
+  inviteNote?: string
+  resendButton?: string
+  /** Wrapper around the embedded activity feed. */
+  activity?: string
+  /** Forwarded so an app still overrides one map. */
+  activityPanel?: ActivityFeedPanelClassNames
+}
+
+export const MEMBER_DETAIL_PANEL_DEFAULTS: Required<
+  Omit<MemberDetailPanelClassNames, 'activityPanel'>
+> = {
+  root: 'space-y-5',
+  header: 'flex flex-wrap items-start justify-between gap-4',
+  identity: 'flex min-w-0 items-center gap-3',
+  avatar:
+    'flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary',
+  name: 'truncate text-lg font-semibold text-foreground',
+  email: 'truncate text-sm text-muted-foreground',
+  badges: 'flex flex-wrap items-center gap-2',
+  roleBadge:
+    'inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground',
+  statusBadge:
+    'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium',
+  statusActive: 'border-border bg-muted text-muted-foreground',
+  statusPending: 'border-primary/30 bg-primary/10 text-primary',
+  statusExpired: 'border-destructive/40 bg-destructive/10 text-destructive',
+  statusDeactivated: 'border-border bg-muted/60 text-muted-foreground line-through',
+  facts: 'grid gap-4 rounded-lg border border-border bg-muted/30 p-4 sm:grid-cols-2',
+  fact: 'min-w-0 space-y-1',
+  factLabel: 'text-xs uppercase tracking-wide text-muted-foreground',
+  factValue: 'truncate text-sm text-foreground',
+  factEmpty: 'truncate text-sm text-muted-foreground/70',
+  inviteRow:
+    'flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-card px-4 py-3',
+  inviteNote: 'text-sm text-muted-foreground',
+  resendButton:
+    'rounded-md border border-border px-2.5 py-1.5 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary disabled:opacity-50',
+  activity: '',
+}

package/src/components/team/types.ts

@@ -62,6 +62,16 @@ export interface MemberRow {
   invitedByEmail?: string | null
   /** False for a membership that has been deactivated but not removed. */
   isActive?: boolean
+  /**
+   * When this person actually joined — read off the recorded activation event,
+   * not recomputed from "do they have a password yet" (startsim-768w.19.2).
+   * Null for anyone still holding an unused invite.
+   */
+  activatedAt?: string | null
+  /** When their role was last changed after they joined. Null if never. */
+  roleChangedAt?: string | null
+  /** When the membership was suspended; null while active. */
+  deactivatedAt?: string | null
 }
 
 export interface InvitationLite {