Member profile

import * as React from "react"

import { REFERENCE_DATE } from "@/lib/sample-data"
import { AppShell } from "@/components/ui/app-shell"
import { Skeleton } from "@/components/ui/skeleton"

import { signOut } from "./actions"
import { ProfileView } from "./components/profile-view"
import {
  activity,
  completeness,
  connections,
  currentUser,
  profile,
  projects,
  shellNotifications,
  teams,
} from "./data"
import { NAV, ROUTE } from "./nav"

/**
 * The member's profile. The page is a server component: it reads the member,
 * their audit trail, their projects and their teammates through `db`, and
 * hands plain rows to one client island that owns the tab and the
 * connections. The island reads `?tab=` off the URL, so it sits inside a
 * Suspense boundary — a prerendered page that calls useSearchParams outside
 * one fails the build. The member's name is the page's h1, set by the cover.
 */
export default function ProfilePage() {
  return (
    <AppShell
      nav={NAV}
      activeHref={ROUTE}
      user={currentUser()}
      notifications={shellNotifications()}
      now={REFERENCE_DATE}
      onSignOut={signOut}
    >
      <React.Suspense fallback={<Skeleton className="h-[40rem] w-full rounded-xl" />}>
        <ProfileView
          profile={profile()}
          completeness={completeness()}
          activity={activity()}
          connections={connections()}
          teams={teams()}
          projects={projects()}
        />
      </React.Suspense>
    </AppShell>
  )
}

import { type NavConfig } from "@/lib/nav-config"

/** The route this page is installed at. AppShell matches the nav against it. */
export const ROUTE = "/profile"

/**
 * This product's navigation, as plain data. AppShell resolves the icon names
 * and works out which item is current from the route it is handed, so nothing
 * here is a component and nothing here says "I am the page you are on".
 *
 * Account is a disclosure with the two account pages as its leaves, so this
 * page's own route is a leaf: a parent with `items` renders as a button and
 * has no anchor for `aria-current="page"` to land on.
 */
export const NAV: NavConfig = {
  brand: { name: "Northwind", initial: "N", href: "/saas", caption: "Production" },
  groups: [
    {
      label: "Workspace",
      items: [
        { title: "Overview", href: "/saas", icon: "layout-dashboard" },
        { title: "Customers", href: "/ecommerce/customers", icon: "users" },
      ],
    },
    {
      label: "Team",
      items: [
        { title: "Members", href: "/people/directory", icon: "users" },
        { title: "Invitations", href: "/people/invitations", icon: "user-round" },
      ],
    },
  ],
  footer: [
    {
      title: "Account",
      href: "/profile",
      icon: "user-round",
      items: [
        { title: "Profile", href: "/profile" },
        { title: "Teammate profile", href: "/profile/v2" },
        { title: "Notifications", href: "/notifications" },
      ],
    },
    { title: "Settings", href: "/settings", icon: "settings" },
    { title: "Support", href: "/support", icon: "life-buoy" },
  ],
}

/**
 * What this page reads. The member is the first row of `db.members` — the
 * workspace's owner, who is signed in everywhere in the sample — and every
 * card is a read over rows they touch: their audit events, their tasks and the
 * projects those sit in, the teammates most recently active. What no entity
 * records — a city, a phone, how many connections a teammate has — is a rule
 * over the row, drawn from `seeded(<id>)` once, never a literal. "Now" is
 * `REFERENCE_DATE`.
 */
import { formatBytes, formatRelative, getInitials } from "@/lib/format"
import { chance, db, intBetween, REFERENCE_DATE, seeded, type Member } from "@/lib/sample-data"

/** The signed-in member — the first row of `db.members` — read per call, so a rename shows. */
const memberRow = (): Member => db.members.all()[0]
const DAY_MS = 86_400_000

const monthYear = new Intl.DateTimeFormat("en-US", { month: "short", year: "numeric", timeZone: "UTC" })
const shortDay = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", timeZone: "UTC" })

/** "2h ago" against `REFERENCE_DATE`, and the date itself past a week. */
export function since(at: Date): string {
  const days = (REFERENCE_DATE.getTime() - at.getTime()) / DAY_MS
  return days < 7 ? formatRelative(at, REFERENCE_DATE) : shortDay.format(at)
}

const ROLE_LABELS: Record<Member["role"], string> = {
  owner: "Workspace owner",
  admin: "Administrator",
  member: "Member",
  viewer: "Viewer",
}

// A role says which part of the company someone sits in; the entity records
// no department, so this is the rule that stands in for one.
const DEPARTMENTS: Record<Member["role"], string> = {
  owner: "Leadership",
  admin: "Operations",
  member: "Product",
  viewer: "Guest",
}

const CITIES = ["Lisbon, PT", "Berlin, DE", "Amsterdam, NL", "Toronto, CA", "Melbourne, AU", "Copenhagen, DK", "Dublin, IE", "Oslo, NO"]

export type Profile = {
  id: string
  name: string
  initials: string
  avatarUrl?: string
  email: string
  roleLabel: string
  department: string
  location: string
  /** "Joined Jun 2023", from the row's own date. */
  joined: string
  phone: string
  twoFactor: boolean
}

/** The signed-in member, with the facts the cover and the About card print. */
export function profile(): Profile {
  const me = memberRow()
  const rand = seeded(`profile:${me.id}`)
  return {
    id: me.id,
    name: me.name,
    initials: getInitials(me.name),
    avatarUrl: me.avatarUrl,
    email: me.email,
    roleLabel: ROLE_LABELS[me.role],
    department: DEPARTMENTS[me.role],
    location: CITIES[Math.floor(rand() * CITIES.length)],
    joined: `Joined ${monthYear.format(me.joinedAt)}`,
    // A 555-01xx number: the range set aside for exactly this use.
    phone: `+1 (628) 555-01${String(intBetween(rand, 0, 99)).padStart(2, "0")}`,
    twoFactor: me.twoFactor,
  }
}

export type Completeness = {
  percent: number
  done: number
  total: number
  items: { label: string; done: boolean }[]
  /** The first thing still missing, for the line under the bar. */
  next?: string
}

/** How complete the profile is: the share of the checklist the row already satisfies. */
export function completeness(): Completeness {
  const me = memberRow()
  const facts = profile()
  const items = [
    { label: "Name", done: facts.name.length > 0 },
    { label: "Email", done: facts.email.length > 0 },
    { label: "Role", done: true },
    { label: "Phone", done: facts.phone.length > 0 },
    { label: "Location", done: facts.location.length > 0 },
    { label: "Two-factor sign-in", done: facts.twoFactor },
    { label: "Profile photo", done: Boolean(me.avatarUrl) },
  ]
  const done = items.filter((item) => item.done).length
  return {
    percent: Math.round((done / items.length) * 100),
    done,
    total: items.length,
    items,
    next: items.find((item) => !item.done)?.label,
  }
}

export type ActivityTone = "default" | "neutral" | "success" | "warning" | "danger" | "info"

export type ActivityEntry = {
  id: string
  kind: "event" | "images"
  title: string
  /** The row the event was about, in mono. */
  target?: string
  description?: string
  at: Date
  when: string
  tone: ActivityTone
  /** File chips under an export. */
  files?: { name: string; size: string }[]
  /** Abstract tiles under a set of pictures: the studio's own rows. */
  tiles?: { id: string; prompt: string; palette: string[] }[]
}

const ACTION_TONES: Record<string, ActivityTone> = {
  created: "success",
  enabled: "success",
  invited: "info",
  exported: "neutral",
  deleted: "danger",
  revoked: "danger",
  disabled: "warning",
}

// Ten, not five: the trail is what the page is for, and a season of it is
// what shows every kind of action — an export with its files among them.
const EVENT_COUNT = 10
const TILE_COUNT = 3

/** The member's own audit trail, newest first, plus the pictures they made in the studio. */
export function activity(): ActivityEntry[] {
  const me = memberRow()
  const rand = seeded(`activity:${me.id}`)
  const events = db.auditEvents
    .all()
    .filter((event) => event.actor === me.id)
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, EVENT_COUNT)
    .map((event): ActivityEntry => {
      const resource = event.resource.replace(/_/g, " ")
      const verb = event.action.charAt(0).toUpperCase() + event.action.slice(1)
      return {
        id: event.id,
        kind: "event",
        title: `${verb} ${/^[aeiou]/.test(resource) ? "an" : "a"} ${resource}`,
        target: event.resourceId,
        description: event.diff?.[0] ? `${event.diff[0].field}: ${event.diff[0].from} → ${event.diff[0].to}` : undefined,
        at: event.at,
        when: since(event.at),
        tone: ACTION_TONES[event.action] ?? "default",
        // An export leaves files behind; every other action leaves a row.
        files:
          event.action === "exported"
            ? [
                { name: `${event.resource}-export.csv`, size: formatBytes(intBetween(rand, 4_000, 90_000), 0) },
                { name: `${event.resource}-export.xlsx`, size: formatBytes(intBetween(rand, 12_000, 240_000), 0) },
              ]
            : undefined,
      }
    })

  const pictures = db.generations
    .all()
    .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
    .slice(0, TILE_COUNT)
  const images: ActivityEntry[] = pictures.length
    ? [
        {
          id: `images-${pictures[0].id}`,
          kind: "images",
          title: `Added ${pictures.length} images in the studio`,
          at: pictures[0].createdAt,
          when: since(pictures[0].createdAt),
          tone: "default",
          tiles: pictures.map((row) => ({ id: row.id, prompt: row.prompt, palette: row.palette })),
        },
      ]
    : []

  return [...events, ...images].sort((a, b) => b.at.getTime() - a.at.getTime())
}

export type Connection = {
  id: string
  name: string
  initials: string
  avatarUrl?: string
  /** How many people they are connected to — a rule over the row, not a count of anything stored. */
  connections: number
  connected: boolean
  /** Active within the last day. */
  online: boolean
}

const CONNECTION_COUNT = 4

/** The four teammates most recently active, besides the member. */
export function connections(): Connection[] {
  const me = memberRow()
  return db.members
    .all()
    .filter((row) => row.id !== me.id && row.status === "active")
    .sort((a, b) => b.lastActiveAt.getTime() - a.lastActiveAt.getTime())
    .slice(0, CONNECTION_COUNT)
    .map((row) => {
      const rand = seeded(`connection:${row.id}`)
      return {
        id: row.id,
        name: row.name,
        initials: getInitials(row.name),
        avatarUrl: row.avatarUrl,
        connections: intBetween(rand, 3, 80),
        connected: chance(rand, 0.5),
        online: REFERENCE_DATE.getTime() - row.lastActiveAt.getTime() < DAY_MS,
      }
    })
}

/**
 * The teams a member can belong to. No entity records teams, so the names
 * are the page's own — kept here, beside the rule that gives each a
 * headcount, and read back as a type by the vocabulary that describes them.
 */
export const TEAM_NAMES = ["Platform", "Design systems", "Growth", "Support rota"] as const

export type TeamName = (typeof TEAM_NAMES)[number]

export type Team = { name: TeamName; members: number }

/** The four teams, each with a seeded headcount: the names are the page's own, the counts a rule. */
export function teams(): Team[] {
  const rand = seeded("profile-page:teams")
  return TEAM_NAMES.map((name) => ({ name, members: intBetween(rand, 3, 14) }))
}

export type ProjectRow = {
  id: string
  name: string
  code: string
  status: string
  /** Share done, 0..100, the project's own figure. */
  progress: number
  /** The member's own hours in it: their task points at two hours a point. */
  hours: number
  updated: string
  updatedAt: Date
}

const HOURS_PER_POINT = 2

/** The projects the member leads or has work in, most recently touched first. */
export function projects(): ProjectRow[] {
  const me = memberRow()
  const own = db.tasks.all().filter((task) => task.assignee === me.id)
  const involved = new Set(own.map((task) => task.projectId))
  return db.projects
    .all()
    .filter((project) => project.lead === me.id || involved.has(project.id))
    .map((project) => {
      const tasks = own.filter((task) => task.projectId === project.id)
      const updatedAt = tasks.reduce(
        (latest, task) => (task.updatedAt > latest ? task.updatedAt : latest),
        project.startAt
      )
      return {
        id: project.id,
        name: project.name,
        code: project.code,
        status: project.status,
        progress: project.progress,
        hours: tasks.reduce((total, task) => total + task.points, 0) * HOURS_PER_POINT,
        updated: since(updatedAt),
        updatedAt,
      }
    })
    .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())
}

/** The person looking at the page: the member the page is about. */
export function currentUser() {
  const me = memberRow()
  return { name: me.name, email: me.email, initials: getInitials(me.name), avatarUrl: me.avatarUrl }
}

export function shellNotifications() {
  return db.notifications
    .all()
    .sort((a, b) => b.at.getTime() - a.at.getTime())
    .slice(0, 6)
    .map(({ id, title, description, at, read, href }) => ({ id, title, description, at, read, href }))
}

"use server"

import { mockAuthAdapter } from "@/lib/auth-adapter"
import { db, type Result } from "@/lib/sample-data"

/**
 * What this page changes. Server actions so the page can stay a server
 * component, and `Result` so every caller reads one success-or-error shape:
 * a refusal is rendered as a callout beside the button that asked.
 */
export async function signOut(): Promise<Result<{ signedOut: true }>> {
  await mockAuthAdapter.signOut()
  return { ok: true, data: { signedOut: true } }
}

/**
 * Connects the signed-in member with a teammate, or takes the connection
 * back. No entity records connections, so nothing is written: the action
 * checks the teammate is real and still in the workspace, and hands the
 * state back for the card to render — the seam a real store slots into.
 */
export async function connect(
  memberId: string,
  connected: boolean
): Promise<Result<{ memberId: string; connected: boolean }>> {
  const [self] = db.members.all()
  if (memberId === self.id) {
    return { ok: false, error: { code: "invalid", message: "That is you — connections are made with teammates." } }
  }
  const member = await db.members.get(memberId)
  if (!member || member.status !== "active") {
    return { ok: false, error: { code: "not_found", message: "That person is no longer in the workspace." } }
  }
  return { ok: true, data: { memberId: member.id, connected } }
}

import * as React from "react"
import { FileSpreadsheetIcon, FileTextIcon, ImageIcon, PlusIcon, TrashIcon, PencilIcon, PowerIcon, UserRoundPlusIcon, KeyRoundIcon } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Timeline, TimelineItem } from "@/components/ui/timeline"

import { type ActivityEntry } from "../data"

/** The icon in the dot: what kind of thing happened, before the words say which. */
function iconFor(entry: ActivityEntry): React.ReactNode {
  if (entry.kind === "images") return <ImageIcon aria-hidden="true" />
  if (entry.files) return <FileSpreadsheetIcon aria-hidden="true" />
  const verb = entry.title.split(" ")[0].toLowerCase()
  if (verb === "created") return <PlusIcon aria-hidden="true" />
  if (verb === "deleted" || verb === "revoked") return <TrashIcon aria-hidden="true" />
  if (verb === "invited") return <UserRoundPlusIcon aria-hidden="true" />
  if (verb === "enabled" || verb === "disabled") return <PowerIcon aria-hidden="true" />
  if (verb === "updated") return <PencilIcon aria-hidden="true" />
  return <KeyRoundIcon aria-hidden="true" />
}

/**
 * A picture the member made in the studio, as a tinted tile: the row's own
 * four colours laid across a small frame. No photograph anywhere on the page.
 */
function ImageTile({ prompt, palette }: { prompt: string; palette: string[] }) {
  const id = React.useId().replace(/[^a-zA-Z0-9]/g, "")
  return (
    <svg
      role="img"
      aria-label={`${prompt} (generated image)`}
      viewBox="0 0 160 100"
      className="h-24 w-full rounded-md ring-1 ring-border"
    >
      <defs>
        <linearGradient id={`${id}-g`} x1="0" y1="0" x2="1" y2="1">
          {palette.map((color, index) => (
            <stop key={index} offset={`${(index / Math.max(palette.length - 1, 1)) * 100}%`} stopColor={color} />
          ))}
        </linearGradient>
      </defs>
      <rect width="160" height="100" fill={`url(#${id}-g)`} />
    </svg>
  )
}

export type ActivityStreamProps = {
  entries: ActivityEntry[]
}

/** What the member did, newest first: their audit trail, with what each action left behind. */
export function ActivityStream({ entries }: ActivityStreamProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Activity stream</CardTitle>
      </CardHeader>
      <CardContent>
        <section aria-label="Activity stream">
          <Timeline>
            {entries.map((entry) => (
              <TimelineItem
                key={entry.id}
                icon={iconFor(entry)}
                tone={entry.tone}
                time={entry.when}
                title={
                  <>
                    <span>{entry.title}</span>
                    {entry.target ? <span className="ml-1.5 font-mono text-xs text-muted-foreground">{entry.target}</span> : null}
                  </>
                }
                description={entry.description ? <span className="font-mono text-xs">{entry.description}</span> : undefined}
              >
                {entry.files ? (
                  <ul className="mt-2 flex flex-wrap gap-2">
                    {entry.files.map((file) => (
                      <li
                        key={file.name}
                        className="flex items-center gap-2 rounded-md bg-muted/60 px-2.5 py-1.5 text-xs ring-1 ring-border"
                      >
                        <FileTextIcon aria-hidden="true" className="size-3.5 text-muted-foreground" />
                        <span className="font-mono">{file.name}</span>
                        <span className="tabular-nums text-muted-foreground">{file.size}</span>
                      </li>
                    ))}
                  </ul>
                ) : null}
                {entry.tiles ? (
                  <div className="mt-2 grid max-w-md grid-cols-3 gap-2">
                    {entry.tiles.map((tile) => (
                      <ImageTile key={tile.id} prompt={tile.prompt} palette={tile.palette} />
                    ))}
                  </div>
                ) : null}
              </TimelineItem>
            ))}
          </Timeline>
        </section>
      </CardContent>
    </Card>
  )
}

"use client"

import * as React from "react"
import { UserRoundCheckIcon, UserRoundPlusIcon } from "lucide-react"

import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Callout } from "@/components/ui/callout"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

import { type Connection } from "../data"

export type ConnectionsCardProps = {
  /** Where the header's Connect button scrolls to. */
  ref?: React.Ref<HTMLDivElement>
  people: Connection[]
  /** The refusal from the last toggle, if any; rendered where the buttons are. */
  error?: string
  onToggle: (person: Connection) => void
  className?: string
}

/**
 * Four teammates and whether the member is connected with them. The button is
 * a pressed toggle rather than two buttons, so its name never changes and its
 * state is what a screen reader hears.
 */
export function ConnectionsCard({ ref, people, error, onToggle, className }: ConnectionsCardProps) {
  return (
    <Card ref={ref} className={className}>
      <CardHeader>
        <CardTitle>Connections</CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <section aria-label="Connections">
          {error ? (
            <Callout variant="danger" role="alert" className="m-3">
              {error}
            </Callout>
          ) : null}
          <ul className="flex flex-col divide-y">
            {people.map((person) => (
              <li key={person.id} className="flex items-center gap-3 px-4 py-3">
                <Avatar>
                  {person.avatarUrl ? <AvatarImage src={person.avatarUrl} alt="" /> : null}
                  <AvatarFallback>{person.initials}</AvatarFallback>
                  {person.online ? <AvatarBadge className="bg-success" aria-label="Online" /> : null}
                </Avatar>
                <div className="flex min-w-0 flex-1 flex-col">
                  <span className="truncate text-sm font-medium">{person.name}</span>
                  <span className="text-xs tabular-nums text-muted-foreground">
                    {person.connections + (person.connected ? 1 : 0)} connections
                  </span>
                </div>
                <Button
                  type="button"
                  variant={person.connected ? "default" : "outline"}
                  size="icon-sm"
                  aria-label={`Connect with ${person.name}`}
                  aria-pressed={person.connected}
                  className="rounded-full"
                  onClick={() => onToggle(person)}
                >
                  {person.connected ? <UserRoundCheckIcon aria-hidden="true" /> : <UserRoundPlusIcon aria-hidden="true" />}
                </Button>
              </li>
            ))}
          </ul>
        </section>
      </CardContent>
    </Card>
  )
}

"use client"

import * as React from "react"
import Link from "next/link"
import { CalendarIcon, EllipsisIcon, LinkIcon, MapPinIcon, PencilIcon, UserRoundPlusIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { NavTabs, type NavTabItem } from "@/components/ui/nav-tabs"
import { PageHeader } from "@/components/ui/page-header"

import { type Profile } from "../data"
import { TABS, type ProfileTab } from "./profile-vocabulary"

export type ProfileCoverProps = {
  profile: Profile
  tab: ProfileTab
  /** The href a tab links to — a relative query, so a framed preview keeps its own settings. */
  hrefFor: (tab: ProfileTab) => string
  onTabChange: (tab: ProfileTab) => void
  projectCount: number
  /** The header's primary: takes the reader to the Connections card. */
  onConnect: () => void
  onCopyLink: () => void
}

/**
 * The top of the page: a tinted band with no picture in it, the member's
 * mark overlapping its lower edge, then the one PageHeader — the name is the
 * page's h1 — with the tabs hanging off its rule. The tabs are links whose
 * state is the URL: `?tab=` is what a reader can send.
 */
export function ProfileCover({ profile, tab, hrefFor, onTabChange, projectCount, onConnect, onCopyLink }: ProfileCoverProps) {
  const items: NavTabItem[] = TABS.map((entry) => ({
    label: entry.label,
    href: hrefFor(entry.value),
    ...(entry.value === "projects" ? { count: projectCount } : {}),
  }))
  const activeHref = hrefFor(tab)

  return (
    <section aria-label="Cover" className="overflow-hidden panel">
      {/* A flat band on the surface plane: the kit's only decorative gradient
          was here, and a cover is a plane, not a picture. */}
      <div aria-hidden="true" data-slot="profile-cover-band" className="h-28 bg-surface sm:h-36" />
      <div className="flex flex-col gap-3 px-4 pb-0 sm:px-6">
        <Avatar className="-mt-12 size-24 ring-4 ring-card">
          {profile.avatarUrl ? <AvatarImage src={profile.avatarUrl} alt="" /> : null}
          <AvatarFallback className="text-2xl">{profile.initials}</AvatarFallback>
        </Avatar>
        <PageHeader
          title={profile.name}
          description={
            <span className="flex flex-wrap items-center gap-x-3 gap-y-1">
              <span>{profile.roleLabel}</span>
              <span className="inline-flex items-center gap-1">
                <MapPinIcon aria-hidden="true" className="size-3.5" />
                {profile.location}
              </span>
              <span className="inline-flex items-center gap-1">
                <CalendarIcon aria-hidden="true" className="size-3.5" />
                {profile.joined}
              </span>
            </span>
          }
          actions={
            <>
              <Button type="button" onClick={onConnect}>
                <UserRoundPlusIcon data-icon="inline-start" aria-hidden="true" />
                Connect
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger render={<Button variant="outline" size="icon" aria-label="More actions" />}>
                  <EllipsisIcon aria-hidden="true" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem render={<Link href="/settings/profile" />}>
                    <PencilIcon aria-hidden="true" />
                    Edit profile
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={onCopyLink}>
                    <LinkIcon aria-hidden="true" />
                    Copy profile link
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          }
          tabs={
            <NavTabs
              aria-label="Profile sections"
              items={items}
              activeHref={activeHref}
              renderLink={(item, children, className) => {
                const value = TABS.find((entry) => hrefFor(entry.value) === item.href)?.value ?? "profile"
                const active = item.href === activeHref
                return (
                  <a
                    href={item.href}
                    data-slot="nav-tabs-item"
                    data-active={active || undefined}
                    aria-current={active ? "page" : undefined}
                    className={cn(className)}
                    onClick={(event) => {
                      // A plain click switches in place and rewrites the query;
                      // a modified one keeps the browser's own behaviour.
                      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return
                      event.preventDefault()
                      onTabChange(value)
                    }}
                  >
                    {children}
                  </a>
                )
              }}
            />
          }
        />
      </div>
    </section>
  )
}

import * as React from "react"
import { BriefcaseIcon, FolderKanbanIcon, MailIcon, PhoneIcon, ShieldCheckIcon, UsersIcon } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { DescriptionList } from "@/components/ui/description-list"
import { Progress, ProgressValue } from "@/components/ui/progress"

import { type Completeness, type Profile } from "../data"

export type ProfileSummaryProps = {
  profile: Profile
  completeness: Completeness
  teamCount: number
  projectCount: number
}

/** A quiet heading over a list of facts. */
function Facts({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section aria-label={title} className="flex flex-col gap-2">
      <h2 className="type-eyebrow">{title}</h2>
      {children}
    </section>
  )
}

function FactRow({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
  return (
    <li className="flex items-center gap-2 text-sm text-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-muted-foreground">
      {icon}
      <span className="min-w-0 truncate">{children}</span>
    </li>
  )
}

/** The left column of the Profile tab: how complete the profile is, then the facts. */
export function ProfileSummary({ profile, completeness, teamCount, projectCount }: ProfileSummaryProps) {
  return (
    <div className="flex flex-col gap-5">
      <Card size="sm">
        <CardHeader>
          <CardTitle>Complete your profile</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-2">
          <Progress value={completeness.percent} aria-label="Profile completeness" className="items-center">
            <ProgressValue className="ms-0 text-sm font-medium tabular-nums text-foreground" />
          </Progress>
          <p className="text-xs text-muted-foreground">
            {completeness.next
              ? `${completeness.done} of ${completeness.total} done — add ${completeness.next.toLowerCase()} to finish.`
              : "Everything is filled in."}
          </p>
        </CardContent>
      </Card>

      <Facts title="About">
        <DescriptionList
          size="sm"
          items={[
            { term: "Name", description: profile.name },
            { term: "Department", description: profile.department },
            { term: "Role", description: profile.roleLabel },
          ]}
        />
      </Facts>

      <Facts title="Contacts">
        <ul className="flex flex-col gap-2">
          <FactRow icon={<MailIcon aria-hidden="true" />}>{profile.email}</FactRow>
          <FactRow icon={<PhoneIcon aria-hidden="true" />}>
            <span className="tabular-nums">{profile.phone}</span>
          </FactRow>
          <FactRow icon={<ShieldCheckIcon aria-hidden="true" />}>
            {profile.twoFactor ? "Two-factor sign-in on" : "Two-factor sign-in off"}
          </FactRow>
        </ul>
      </Facts>

      <Facts title="Membership">
        <ul className="flex flex-col gap-2">
          <FactRow icon={<UsersIcon aria-hidden="true" />}>
            Member of <span className="tabular-nums">{teamCount}</span> teams
          </FactRow>
          <FactRow icon={<FolderKanbanIcon aria-hidden="true" />}>
            Working on <span className="tabular-nums">{projectCount}</span> projects
          </FactRow>
          <FactRow icon={<BriefcaseIcon aria-hidden="true" />}>{profile.joined}</FactRow>
        </ul>
      </Facts>
    </div>
  )
}

"use client"

import * as React from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import { connect } from "../actions"
import {
  type ActivityEntry,
  type Completeness,
  type Connection,
  type Profile,
  type ProjectRow,
  type Team,
} from "../data"
import { ActivityStream } from "./activity-stream"
import { ConnectionsCard } from "./connections-card"
import { ProfileCover } from "./profile-cover"
import { ProfileSummary } from "./profile-summary"
import { isTab, TAB_KEY, type ProfileTab } from "./profile-vocabulary"
import { ProjectsTable } from "./projects-table"
import { TeamsCard, TeamsGrid } from "./teams-card"

export type ProfileViewProps = {
  profile: Profile
  completeness: Completeness
  activity: ActivityEntry[]
  connections: Connection[]
  teams: Team[]
  projects: ProjectRow[]
}

/**
 * The profile. One island, because the open tab and the connections are the
 * page's only state. The tab lives in `?tab=`: seeded from the query on mount
 * and owned here afterwards, written back with `replace` so a tab is a link a
 * reader can send and a preview can deep-link — `replace` rather than `push`,
 * because a tab is not a place the Back button should have to walk out of.
 */
export function ProfileView({ profile, completeness, activity, connections, teams, projects }: ProfileViewProps) {
  const router = useRouter()
  const pathname = usePathname()
  const params = useSearchParams()

  const [tab, setTab] = React.useState<ProfileTab>(() => {
    const wanted = params.get(TAB_KEY)
    return isTab(wanted) ? wanted : "profile"
  })
  const [people, setPeople] = React.useState(connections)
  const [connectError, setConnectError] = React.useState<string | undefined>(undefined)
  const [notice, setNotice] = React.useState<string | undefined>(undefined)
  const connectionsRef = React.useRef<HTMLDivElement>(null)
  // Counts the header's Connect presses. The card only exists on the Profile
  // tab, so the scroll runs after the render that mounts it, not on the click.
  const [connectRequests, setConnectRequests] = React.useState(0)

  React.useEffect(() => {
    if (connectRequests === 0) return
    connectionsRef.current?.scrollIntoView?.({ block: "start" })
  }, [connectRequests, tab])

  /** The query with the tab written in — a copy, so a framed preview keeps its own settings. */
  function queryFor(next: ProfileTab): string {
    const query = new URLSearchParams(params)
    if (next === "profile") query.delete(TAB_KEY)
    else query.set(TAB_KEY, next)
    return query.toString()
  }

  // A relative href: it never starts with "/", so a preview frame's link
  // guard leaves it alone and the tab switches in place there too.
  const hrefFor = (next: ProfileTab) => `?${queryFor(next)}`

  function open(next: ProfileTab) {
    setTab(next)
    const query = queryFor(next)
    router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false })
  }

  async function toggle(person: Connection) {
    const result = await connect(person.id, !person.connected)
    if (!result.ok) {
      setConnectError(result.error.message)
      return
    }
    setConnectError(undefined)
    setPeople((current) =>
      current.map((entry) => (entry.id === result.data.memberId ? { ...entry, connected: result.data.connected } : entry))
    )
  }

  /** The card is under the fold on every width; a reader who pressed Connect is taken to where connections are made. */
  function jumpToConnections() {
    if (tab !== "profile") open("profile")
    setConnectRequests((count) => count + 1)
  }

  function copyLink() {
    const href = typeof window === "undefined" ? pathname : `${window.location.origin}${pathname}`
    // Only a clipboard that took the text earns the word "copied": an insecure
    // context has no clipboard at all, and a refused write is not a copy.
    const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard
    if (!clipboard) {
      setNotice(`The clipboard is not available here — the link is ${href}.`)
      return
    }
    clipboard.writeText(href).then(
      () => setNotice("Profile link copied."),
      () => setNotice(`The link could not be copied — it is ${href}.`)
    )
  }

  return (
    <div className="flex flex-col gap-4">
      <ProfileCover
        profile={profile}
        tab={tab}
        hrefFor={hrefFor}
        onTabChange={open}
        projectCount={projects.length}
        onConnect={jumpToConnections}
        onCopyLink={copyLink}
      />
      <p role="status" aria-live="polite" className="min-h-4 text-xs text-muted-foreground">
        {notice}
      </p>

      {tab === "profile" ? (
        <div className="grid items-start gap-4 lg:grid-cols-[18rem_minmax(0,1fr)]">
          <ProfileSummary
            profile={profile}
            completeness={completeness}
            teamCount={teams.length}
            projectCount={projects.length}
          />
          <div className="flex min-w-0 flex-col gap-4">
            <ActivityStream entries={activity} />
            <div className="grid items-start gap-4 md:grid-cols-2">
              <ConnectionsCard ref={connectionsRef} people={people} error={connectError} onToggle={(person) => void toggle(person)} />
              <TeamsCard teams={teams} />
            </div>
            <ProjectsTable rows={projects} />
          </div>
        </div>
      ) : tab === "teams" ? (
        <TeamsGrid teams={teams} />
      ) : (
        <ProjectsTable rows={projects} />
      )}
    </div>
  )
}

/**
 * The words this page brings of its own: what each team is for, and the
 * three tabs. UI vocabulary, so it lives beside the island rather than in
 * data.ts, which reads the store and must never reach the browser; the team
 * names themselves are data.ts's (`TEAM_NAMES`), read back here as a type.
 */
import { type TeamName } from "../data"

/** A line under each team, so a card says what the team is for. */
export const TEAM_BLURBS: Record<TeamName, string> = {
  Platform: "The services, the deploys and the pager.",
  "Design systems": "The kit every page is built from.",
  Growth: "Signups, activation and the pricing page.",
  "Support rota": "Who answers the inbox this week.",
}

export type ProfileTab = "profile" | "teams" | "projects"

export const TABS: { value: ProfileTab; label: string }[] = [
  { value: "profile", label: "Profile" },
  { value: "teams", label: "Teams" },
  { value: "projects", label: "Projects" },
]

/** The query key the open tab is kept under. */
export const TAB_KEY = "tab"

export const isTab = (value: string | null): value is ProfileTab =>
  value === "profile" || value === "teams" || value === "projects"

"use client"

import * as React from "react"

import { DataTable, DataTableColumnHeader, type DataTableColumnDef } from "@/components/ui/data-table"
import { Progress, ProgressValue } from "@/components/ui/progress"
import { StatusBadge } from "@/components/ui/status-badge"
import { Widget } from "@/components/ui/widget"

import { type ProjectRow } from "../data"

// "planning" and "at_risk" are not in StatusBadge's own vocabulary.
const STATUS_MAP = { planning: "neutral", active: "success", at_risk: "warning", shipped: "info" } as const

const COLUMNS: DataTableColumnDef<ProjectRow>[] = [
  {
    accessorKey: "name",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Project" />,
    cell: ({ row }) => (
      <div className="flex min-w-0 items-center gap-3">
        <span
          aria-hidden="true"
          className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted font-mono text-2xs text-muted-foreground"
        >
          {row.original.code}
        </span>
        <div className="flex min-w-0 flex-col">
          <span className="truncate font-medium">{row.original.name}</span>
          <span className="text-xs text-muted-foreground">Updated {row.original.updated}</span>
        </div>
      </div>
    ),
    meta: { label: "Project" },
  },
  {
    accessorKey: "status",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Status" />,
    cell: ({ row }) => <StatusBadge status={row.original.status} map={STATUS_MAP} size="sm" />,
    meta: { label: "Status" },
  },
  {
    accessorKey: "progress",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Progress" />,
    cell: ({ row }) => (
      <Progress
        value={row.original.progress}
        aria-label={`${row.original.name} progress`}
        className="w-40 flex-nowrap items-center gap-2"
      >
        <ProgressValue className="order-last ms-0 w-10 text-xs" />
      </Progress>
    ),
    meta: { label: "Progress" },
  },
  {
    accessorKey: "hours",
    header: ({ column }) => <DataTableColumnHeader column={column} title="Hours spent" />,
    cell: ({ row }) => <span className="tabular-nums">{row.original.hours}h</span>,
    meta: { align: "right", label: "Hours spent" },
  },
]

/** The projects the member leads or has work in, with how far along each is and the hours they put in. */
export function ProjectsTable({ rows }: { rows: ProjectRow[] }) {
  // The title names the table too, so a screen reader announces it by name.
  const titleId = React.useId()
  return (
    <Widget titleId={titleId} title="Projects" description="What you lead, and what you have work in">
      <DataTable
        aria-labelledby={titleId}
        size="sm"
        columns={COLUMNS}
        data={rows}
        pageSize={8}
        enableRowSelection={false}
        keyboard={false}
        getRowId={(row) => row.id}
        emptyMessage="No projects yet."
      />
    </Widget>
  )
}

import * as React from "react"
import { UsersIcon } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

import { type Team } from "../data"
import { TEAM_BLURBS } from "./profile-vocabulary"

/** The team's mark: its initial in a tinted tile, since a team has no logo. */
function TeamMark({ name }: { name: string }) {
  return (
    <span
      aria-hidden="true"
      className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-sm font-semibold text-foreground"
    >
      {name.charAt(0)}
    </span>
  )
}

const membersOf = (team: Team) => `${team.members} members`

/** The four teams as rows: the small card on the Profile tab. */
export function TeamsCard({ teams, className }: { teams: Team[]; className?: string }) {
  return (
    <Card className={className}>
      <CardHeader>
        <CardTitle>Teams</CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        <section aria-label="Teams">
          <ul className="flex flex-col divide-y">
            {teams.map((team) => (
              <li key={team.name} className="flex items-center gap-3 px-4 py-3">
                <TeamMark name={team.name} />
                <div className="flex min-w-0 flex-1 flex-col">
                  <span className="truncate text-sm font-medium">{team.name}</span>
                  <span className="text-xs tabular-nums text-muted-foreground">{membersOf(team)}</span>
                </div>
                <UsersIcon aria-hidden="true" className="size-4 text-muted-foreground" />
              </li>
            ))}
          </ul>
        </section>
      </CardContent>
    </Card>
  )
}

/** The same four teams as cards: the Teams tab. */
export function TeamsGrid({ teams }: { teams: Team[] }) {
  return (
    <section aria-label="Teams" className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
      {teams.map((team) => (
        <Card key={team.name}>
          <CardHeader>
            <div className="flex items-center gap-3">
              <TeamMark name={team.name} />
              <div className="flex min-w-0 flex-col">
                <CardTitle>
                  <h3>{team.name}</h3>
                </CardTitle>
                <span className="text-xs tabular-nums text-muted-foreground">{membersOf(team)}</span>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-muted-foreground">{TEAM_BLURBS[team.name]}</p>
          </CardContent>
        </Card>
      ))}
    </section>
  )
}