@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/components/team-board-view.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+/**
+ * Team board — kanban by member status or role. Column layout from `ListPageBoardTemplate`.
+ */
+
+import * as React from "react"
+import {
+  TEAM_MEMBER_STATUS_BADGE_CLASS,
+  TEAM_MEMBER_STATUS_ICON,
+  TEAM_MEMBER_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import type { TeamMember } from "@/lib/mock/team"
+import { BoardCardTwoLineBlock } from "@/components/data-views/board-card-primitives"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import {
+  ListPageBoardCard,
+  ListPageBoardCardAvatar,
+  ListPageBoardCardBadgeRow,
+  ListPageBoardCardBody,
+  ListPageBoardCardHeader,
+  ListPageBoardCardTitleRow,
+} from "@/components/data-views/list-page-board-card"
+import {
+  ListPageBoardTemplate,
+  type ListPageBoardColumnDef,
+} from "@/components/data-views/list-page-board-template"
+
+const NEUTRAL_COUNT_BADGE = "bg-muted/90 text-foreground"
+
+const STATUS_BOARD_COLUMNS: ListPageBoardColumnDef<TeamMember>[] = [
+  { id: "active", label: "Active", description: "On the team", filter: m => m.status === "active" },
+  { id: "away", label: "Away", description: "Temporarily away", filter: m => m.status === "away" },
+  { id: "invited", label: "Invited", description: "Pending acceptance", filter: m => m.status === "invited" },
+]
+
+function roleBoardColumns(members: TeamMember[]): {
+  columns: ListPageBoardColumnDef<TeamMember>[]
+  badgeMap: Record<string, string>
+} {
+  const roles = [...new Set(members.map(m => m.role))].sort((a, b) => a.localeCompare(b))
+  const columns: ListPageBoardColumnDef<TeamMember>[] = roles.map(role => ({
+    id: `role:${role}`,
+    label: role,
+    filter: (m: TeamMember) => m.role === role,
+  }))
+  const badgeMap = Object.fromEntries(roles.map(r => [`role:${r}`, NEUTRAL_COUNT_BADGE]))
+  return { columns, badgeMap }
+}
+
+function useTeamBoardModel(members: TeamMember[], groupByColumnKey: string) {
+  return React.useMemo(() => {
+    if (groupByColumnKey === "role") {
+      const { columns, badgeMap } = roleBoardColumns(members)
+      return { columns, badgeMap }
+    }
+    return {
+      columns: STATUS_BOARD_COLUMNS,
+      badgeMap: TEAM_MEMBER_STATUS_BADGE_CLASS as Record<string, string>,
+    }
+  }, [members, groupByColumnKey])
+}
+
+function TeamBoardCard({ member }: { member: TeamMember }) {
+  return (
+    <ListPageBoardCard className="w-full">
+      <ListPageBoardCardHeader>
+        <ListPageBoardCardTitleRow
+          title={member.name}
+          titleClassName="truncate"
+          trailing={<ListPageBoardCardAvatar initials={member.initials} />}
+        />
+        <ListPageBoardCardBadgeRow>
+          <ListHubStatusBadge
+            surface="board"
+            label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+            tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+            icon={TEAM_MEMBER_STATUS_ICON[member.status]}
+          />
+        </ListPageBoardCardBadgeRow>
+        <ListPageBoardCardBody>
+          <BoardCardTwoLineBlock iconClass="fa-briefcase" line1={member.role} line2={member.email} />
+        </ListPageBoardCardBody>
+      </ListPageBoardCardHeader>
+    </ListPageBoardCard>
+  )
+}
+
+export const TEAM_BOARD_GROUP_OPTIONS = [
+  { key: "status", label: "Status" },
+  { key: "role", label: "Role" },
+] as const
+
+export function TeamBoardView({
+  members,
+  groupByColumnKey,
+}: {
+  members: TeamMember[]
+  groupByColumnKey: string
+}) {
+  const key = groupByColumnKey === "role" ? "role" : "status"
+  const { columns, badgeMap } = useTeamBoardModel(members, key)
+
+  return (
+    <ListPageBoardTemplate
+      columns={columns}
+      rows={members}
+      getRowKey={m => m.id}
+      columnCountBadgeClassName={badgeMap}
+      emptyColumnLabel="No members"
+      renderCard={member => <TeamBoardCard member={member} />}
+    />
+  )
+}

package/template/components/team-client.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+/**
+ * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as DataListClient).
+ * Imports from `@/components/data-views` for shared list-page + view types.
+ */
+
+import * as React from "react"
+import {
+  ListPageTemplate,
+  type ViewTab,
+  dataListViewIcon,
+  type DataListViewType,
+} from "@/components/data-views"
+import { TeamPageHeader } from "@/components/team-page-header"
+import { TeamTable, type TeamTableHandle } from "@/components/team-table"
+import { KeyMetrics } from "@/components/key-metrics"
+import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
+import { TEAM_MEMBERS } from "@/lib/mock/team"
+import { teamKpiInsight, teamKpiMetrics } from "@/lib/mock/team-kpi"
+
+const DEFAULT_TEAM_TABS: ViewTab[] = [
+  {
+    id: "members",
+    label: "Members",
+    viewType: "table",
+    icon: "fa-table",
+    filterId: "all",
+  },
+]
+
+export function TeamClient() {
+  const [exportOpen, setExportOpen] = React.useState(false)
+  const [showMetrics, setShowMetrics] = React.useState(true)
+  const tableRef = React.useRef<TeamTableHandle>(null)
+  const memberCount = TEAM_MEMBERS.length
+
+  const metrics = React.useMemo(() => teamKpiMetrics(TEAM_MEMBERS), [])
+  const insight = React.useMemo(() => teamKpiInsight(TEAM_MEMBERS), [])
+
+  useAskLeoPageContext(
+    React.useMemo(
+      () => ({
+        title: "Team",
+        description: `${memberCount} members in this directory.`,
+        suggestions: [
+          "Who owns the most active placements?",
+          "Summarize workload by program",
+        ],
+      }),
+      [memberCount],
+    ),
+  )
+
+  return (
+    <ListPageTemplate
+      defaultTabs={DEFAULT_TEAM_TABS}
+      getTabCount={() => memberCount}
+      tablePropertiesRef={tableRef}
+      header={
+        <TeamPageHeader
+          memberCount={memberCount}
+          onInvite={() => {}}
+          onExport={() => setExportOpen(true)}
+          showMetrics={showMetrics}
+          onToggleMetrics={() => setShowMetrics(v => !v)}
+        />
+      }
+      metrics={
+        <KeyMetrics
+          variant="flat"
+          metrics={metrics}
+          insight={insight}
+          showHeader={false}
+          metricsSingleRow
+        />
+      }
+      showMetrics={showMetrics}
+      exportOpen={exportOpen}
+      onExportOpenChange={setExportOpen}
+      exportTotalRows={memberCount}
+      renderContent={(tab, updateTab) => (
+        <TeamTable
+          key={tab.id}
+          ref={tableRef}
+          members={TEAM_MEMBERS}
+          view={tab.viewType}
+          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
+        />
+      )}
+    />
+  )
+}

package/template/components/team-list-view.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+/**
+ * TeamListView — full-width rows for team roster (same data as DataTable / board).
+ */
+
+import * as React from "react"
+import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
+import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
+import {
+  TEAM_MEMBER_STATUS_BADGE_CLASS,
+  TEAM_MEMBER_STATUS_ICON,
+  TEAM_MEMBER_STATUS_LABEL,
+} from "@/lib/list-status-badges"
+import type { TeamMember } from "@/lib/mock/team"
+
+function TeamListRow({ member }: { member: TeamMember }) {
+  return (
+    <li>
+      <ListPageBoardCard
+        layout="row"
+        rowContainerClassName="flex flex-row items-center gap-3"
+        leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
+        rowEnd={
+          <div className="flex shrink-0 items-center gap-2">
+            <ListHubStatusBadge
+              surface="board"
+              label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+              tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+              icon={TEAM_MEMBER_STATUS_ICON[member.status]}
+            />
+            <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+          </div>
+        }
+      >
+        <div className="space-y-0.5">
+          <p className="truncate text-sm font-semibold text-foreground">{member.name}</p>
+          <p className="text-xs text-muted-foreground">{member.role}</p>
+          <p className="truncate text-xs text-muted-foreground">{member.email}</p>
+        </div>
+      </ListPageBoardCard>
+    </li>
+  )
+}
+
+export function TeamListView({ members }: { members: TeamMember[] }) {
+  if (members.length === 0) {
+    return (
+      <div className="px-4 py-16 text-center lg:px-6">
+        <p className="text-sm text-muted-foreground">No team members match your filters.</p>
+      </div>
+    )
+  }
+
+  return (
+    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
+      {members.map(m => (
+        <TeamListRow key={m.id} member={m} />
+      ))}
+    </ul>
+  )
+}

package/template/components/team-page-header.tsx

@@ -0,0 +1,92 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { PageHeader } from "@/components/page-header"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+
+export interface TeamPageHeaderProps {
+  memberCount: number
+  onInvite: () => void
+  onExport: () => void
+  showMetrics: boolean
+  onToggleMetrics: () => void
+  showTitleBlock?: boolean
+}
+
+/**
+ * Team list shell header — title, primary Invite, overflow (export + metrics toggle). Same pattern as PlacementsPageHeader.
+ */
+export function TeamPageHeader({
+  memberCount,
+  onInvite,
+  onExport,
+  showMetrics,
+  onToggleMetrics,
+  showTitleBlock = true,
+}: TeamPageHeaderProps) {
+  const [moreOpen, setMoreOpen] = React.useState(false)
+  const countLine = `${memberCount} ${memberCount === 1 ? "member" : "members"} · Last updated now`
+
+  return (
+    <PageHeader
+      title="Team"
+      subtitle={countLine}
+      showTitleBlock={showTitleBlock}
+      actions={(
+        <div className="flex items-center gap-2" role="group" aria-label="Team actions">
+          <Tip side="bottom" label="Send an invitation (demo)">
+            <Button type="button" size="lg" onClick={onInvite}>
+              <i className="fa-light fa-user-plus" aria-hidden="true" />
+              Invite member
+            </Button>
+          </Tip>
+          <DropdownMenu open={moreOpen} onOpenChange={setMoreOpen}>
+            <Tip side="bottom" label="More actions">
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  size="lg"
+                  variant="outline"
+                  className="aspect-square px-0"
+                  aria-label="More actions"
+                >
+                  <i className="fa-light fa-ellipsis text-base" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+            </Tip>
+            <DropdownMenuContent align="end" className="w-52">
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onExport(), 0)
+                }}
+              >
+                <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
+                Export
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onToggleMetrics(), 0)
+                }}
+              >
+                <i
+                  className={`fa-light ${showMetrics ? "fa-eye-slash" : "fa-eye"}`}
+                  aria-hidden="true"
+                />
+                {showMetrics ? "Hide metric section" : "Show metric section"}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+    />
+  )
+}