@exxatdesignux/ui 0.3.0 → 0.4.0

package/template/components/question-bank-panel-activator.tsx

@@ -1,8 +0,0 @@
-"use client"
-
-import { SecondaryPanelHubActivator } from "@/components/templates/secondary-panel-hub-template"
-
-/** Opens the Question bank secondary panel while this route is mounted. */
-export function QuestionBankPanelActivator() {
-  return <SecondaryPanelHubActivator panelId="question-bank" />
-}

package/template/components/rotations-empty-state.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-/**
- * Rotations hub — main canvas when no rotation detail is selected.
- * Pairs with SecondaryPanel (nested sidebar); CTA reopens the panel if closed.
- */
-
-import { Button } from "@/components/ui/button"
-import { useSecondaryPanel } from "@/components/sidebar"
-
-export function RotationsEmptyState() {
-  const { openPanel } = useSecondaryPanel()
-
-  return (
-    <section
-      aria-labelledby="rotations-empty-title"
-      className="flex flex-1 flex-col items-center justify-center rounded-xl border border-dashed border-border/80 bg-muted/25 px-6 py-12 text-center min-h-[min(420px,calc(100svh-var(--header-height)-6rem))]"
-    >
-      <div className="mb-6 w-full max-w-[min(100%,280px)] shrink-0">
-        {/* Static SVG hero, above the fold — next/image can't optimize SVGs
-            without `dangerouslyAllowSVG`, and lazy-loading is wrong here. */}
-        {/* eslint-disable-next-line @next/next/no-img-element -- SVG; next/image can't optimize without dangerouslyAllowSVG */}
-        <img
-          src="/Illustration/Rotation.svg"
-          alt=""
-          width={622}
-          height={559}
-          decoding="async"
-          className="h-auto w-full select-none"
-        />
-      </div>
-      <h2
-        id="rotations-empty-title"
-        className="font-heading text-xl font-semibold tracking-tight text-foreground sm:text-2xl"
-      >
-        Select a rotation
-      </h2>
-      <p className="mt-2 max-w-md text-sm leading-relaxed text-muted-foreground">
-        Use the rotations panel next to the sidebar to browse cycles, open a rotation for
-        details, or review schedules and assigned students.
-      </p>
-      <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
-        <Button type="button" size="lg" onClick={() => openPanel("rotations")}>
-          <i className="fa-light fa-sidebar text-[15px]" aria-hidden="true" />
-          Open rotations panel
-        </Button>
-      </div>
-    </section>
-  )
-}

package/template/components/rotations-panel-activator.tsx

@@ -1,8 +0,0 @@
-"use client"
-
-import { useAutoPanel } from "@/components/sidebar"
-
-export function RotationsPanelActivator() {
-  useAutoPanel("rotations")
-  return null
-}

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

@@ -1,67 +0,0 @@
-"use client"
-
-/**
- * Sites hub — **grid of `ListPageBoardCard` tiles** (same card composition as Team board cards),
- * not the kanban `ListPageBoardTemplate` column shell. Insets match other list hubs.
- */
-
-import Link from "next/link"
-import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
-import { initialsFromDisplayName } from "@/lib/initials-from-name"
-import { BoardCardIconRow } from "@/components/data-views/board-card-primitives"
-import {
-  HubRecordCard,
-  ListPageBoardCardAvatar,
-  ListPageBoardCardBody,
-  ListPageBoardCardHeader,
-  ListPageBoardCardTitleRow,
-} from "@/components/data-views/list-page-board-card"
-
-/** Same card building blocks as `TeamBoardView` / board tabs — without the column template. */
-export function SiteBoardCard({ site }: { site: SiteDirectoryRow }) {
-  return (
-    <Link
-      href={site.url}
-      className="block h-full rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <HubRecordCard interactive className="h-full w-full">
-        <ListPageBoardCardHeader>
-          <ListPageBoardCardTitleRow
-            title={site.name}
-            titleClassName="truncate"
-            trailing={<ListPageBoardCardAvatar initials={initialsFromDisplayName(site.name)} />}
-          />
-          <ListPageBoardCardBody>
-            <BoardCardIconRow iconClass="fa-hashtag">
-              <span className="truncate">{site.id}</span>
-            </BoardCardIconRow>
-            <BoardCardIconRow iconClass="fa-link">
-              <span className="truncate" title={site.url}>
-                {site.url}
-              </span>
-            </BoardCardIconRow>
-          </ListPageBoardCardBody>
-        </ListPageBoardCardHeader>
-      </HubRecordCard>
-    </Link>
-  )
-}
-
-/** Responsive card grid + page insets (`px-4` / `lg:px-6`) aligned with `ListPageBoardTemplate` / Team toolbar. */
-export function SitesCardGrid({ rows }: { rows: SiteDirectoryRow[] }) {
-  if (rows.length === 0) {
-    return (
-      <div className="px-4 pb-6 pt-2 lg:px-6">
-        <p className="py-8 text-center text-sm text-muted-foreground">No sites match your search.</p>
-      </div>
-    )
-  }
-
-  return (
-    <div className="grid grid-cols-1 gap-3 px-4 pb-6 pt-2 sm:grid-cols-2 lg:grid-cols-3 lg:px-6 xl:grid-cols-4">
-      {rows.map(site => (
-        <SiteBoardCard key={site.id} site={site} />
-      ))}
-    </div>
-  )
-}

package/template/components/sites-client.tsx

@@ -1,154 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { ListPageTemplate, type ViewTab, dataListViewIcon, type DataListViewType } from "@/components/data-views"
-import { PageHeader } from "@/components/page-header"
-import { Button } from "@/components/ui/button"
-import { Tip } from "@/components/ui/tip"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { KeyMetrics } from "@/components/key-metrics"
-import { SitesTable, type SitesTableHandle } from "@/components/sites-table"
-import { useAskLeoPageContext } from "@/components/ask-leo-sidebar"
-import { SITES_DIRECTORY } from "@/lib/mock/sites-directory"
-import { SITES_KPI_INSIGHT, sitesKpiMetrics } from "@/lib/mock/sites-kpi"
-
-const DEFAULT_TABS: ViewTab[] = [
-  { id: "sites", label: "Sites", viewType: "board", icon: "fa-grid-2", filterId: "all" },
-]
-
-function SitesPageHeader({
-  count,
-  onAdd,
-  onExport,
-  showMetrics,
-  onToggleMetrics,
-}: {
-  count: number
-  onAdd: () => void
-  onExport: () => void
-  showMetrics: boolean
-  onToggleMetrics: () => void
-}) {
-  const [moreOpen, setMoreOpen] = React.useState(false)
-  return (
-    <PageHeader
-      title="Sites"
-      subtitle={`${count} ${count === 1 ? "site" : "sites"} · Last updated now`}
-      actions={
-        <div className="flex items-center gap-2" role="group" aria-label="Sites actions">
-          <Tip side="bottom" label="Add a new site">
-            <Button type="button" size="lg" onClick={onAdd}>
-              <i className="fa-light fa-plus" aria-hidden="true" />
-              Add site
-            </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">
-              <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>
-      }
-    />
-  )
-}
-
-export function SitesClient() {
-  const [exportOpen, setExportOpen] = React.useState(false)
-  const [showMetrics, setShowMetrics] = React.useState(true)
-  const tableRef = React.useRef<SitesTableHandle>(null)
-  const count = SITES_DIRECTORY.length
-  const metrics = React.useMemo(() => sitesKpiMetrics(count), [count])
-
-  useAskLeoPageContext(
-    React.useMemo(
-      () => ({
-        title: "Sites",
-        description: `${count} sites in this directory.`,
-        suggestions: [
-          "Which sites should we onboard next?",
-          "Summarize capacity across affiliated sites",
-        ],
-      }),
-      [count],
-    ),
-  )
-
-  return (
-    <ListPageTemplate
-      defaultTabs={DEFAULT_TABS}
-      getTabCount={() => count}
-      showMetrics={showMetrics}
-      tablePropertiesRef={tableRef}
-      metrics={
-        <KeyMetrics
-          variant="flat"
-          metrics={metrics}
-          insight={SITES_KPI_INSIGHT}
-          showHeader={false}
-          metricsSingleRow
-        />
-      }
-      exportOpen={exportOpen}
-      onExportOpenChange={setExportOpen}
-      exportTotalRows={count}
-      header={
-        <SitesPageHeader
-          count={count}
-          onAdd={() => {}}
-          onExport={() => setExportOpen(true)}
-          showMetrics={showMetrics}
-          onToggleMetrics={() => setShowMetrics(v => !v)}
-        />
-      }
-      renderContent={(tab, updateTab) => (
-        <SitesTable
-          key={tab.id}
-          ref={tableRef}
-          sites={SITES_DIRECTORY}
-          view={tab.viewType}
-          onViewChange={(v: DataListViewType) => updateTab({ viewType: v, icon: dataListViewIcon(v) })}
-        />
-      )}
-    />
-  )
-}

package/template/components/sites-table.tsx

@@ -1,249 +0,0 @@
-"use client"
-
-/**
- * Sites hub — thin wrapper around the centralized `<HubTable>`. Owns only the column defs,
- * the renderers for non-table views, and the mock-data wiring. All `useTableState` /
- * Properties drawer / `ListPageConnectedViewBody` plumbing lives in `HubTable`.
- */
-
-import * as React from "react"
-import Link from "next/link"
-import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
-import type { ColumnDef } from "@/components/data-table/types"
-import type { DataListViewType } from "@/lib/data-list-view"
-import { HubTable, type HubTableHandle, type HubTableRenderers } from "@/components/data-views"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Avatar, AvatarFallback } from "@/components/ui/avatar"
-import { FinderPanelView, type FinderGroup } from "@/components/data-views/finder-panel-view"
-import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
-import { SitesCardGrid } from "@/components/sites-board-view"
-import { KeyMetrics } from "@/components/key-metrics"
-import { SITES_KPI_INSIGHT, sitesKpiMetrics } from "@/lib/mock/sites-kpi"
-import { SITES_SUPPORTED_VIEWS } from "@/lib/sites-supported-views"
-
-function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
-  return [
-    {
-      key: "select",
-      label: "",
-      width: 40,
-      minWidth: 40,
-      defaultPin: "left",
-      lockPin: true,
-    },
-    {
-      key: "name",
-      label: "Site",
-      width: 260,
-      minWidth: 160,
-      sortable: true,
-      sortKey: "name",
-      filter: {
-        type: "text",
-        icon: "fa-hospital",
-        operators: ["contains", "not_contains"],
-      },
-      cell: row => (
-        <div className="flex min-w-0 items-center gap-2">
-          <Avatar size="sm" className="size-8 shrink-0">
-            <AvatarFallback className="bg-brand/10 p-0 text-brand">
-              <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
-            </AvatarFallback>
-          </Avatar>
-          <span className="truncate text-sm font-medium text-foreground">{row.name}</span>
-        </div>
-      ),
-    },
-    {
-      key: "id",
-      label: "Key",
-      width: 160,
-      minWidth: 120,
-      sortable: true,
-      sortKey: "id",
-      filter: { type: "text", icon: "fa-hashtag", operators: ["contains", "not_contains"] },
-      cell: row => <span className="text-sm text-foreground/90">{row.id}</span>,
-    },
-    {
-      key: "url",
-      label: "Path",
-      width: 220,
-      minWidth: 140,
-      sortable: true,
-      sortKey: "url",
-      filter: { type: "text", icon: "fa-link", operators: ["contains", "not_contains"] },
-      cell: row => (
-        <span className="truncate text-sm text-muted-foreground" title={row.url}>
-          {row.url}
-        </span>
-      ),
-    },
-    {
-      key: "actions",
-      label: "",
-      width: 48,
-      minWidth: 48,
-      defaultPin: "right",
-      lockPin: true,
-      cell: row => (
-        <div className="flex items-center justify-center">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size="icon-sm" variant="ghost" aria-label={`Actions for ${row.name}`}>
-                <i className="fa-light fa-ellipsis text-sm" aria-hidden="true" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem asChild>
-                <Link href={row.url} className="flex cursor-pointer items-center gap-2">
-                  <i className="fa-light fa-arrow-up-right-from-square" aria-hidden="true" />
-                  Open site
-                </Link>
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      ),
-    },
-  ]
-}
-
-export type SitesTableHandle = HubTableHandle
-
-export const SitesTable = React.forwardRef<
-  SitesTableHandle,
-  { sites: SiteDirectoryRow[]; view?: DataListViewType; onViewChange?: (v: DataListViewType) => void }
->(function SitesTable({ sites, view = "board", onViewChange }, ref) {
-  const columns = React.useMemo(() => buildSitesColumns(), [])
-
-  const panelGroups = React.useCallback(
-    (rows: SiteDirectoryRow[]): FinderGroup[] => [
-      { id: "all", label: `All sites (${rows.length})`, count: rows.length },
-    ],
-    [],
-  )
-
-  const renderers: HubTableRenderers<SiteDirectoryRow> = {
-    "board-with-toolbar": ({ state, toolbarShell }) =>
-      toolbarShell(<SitesCardGrid rows={state.rows} />),
-    "panel-with-toolbar": ({ state, toolbarShell }) =>
-      toolbarShell(
-        <ListPageSplitHubChrome aria-label="Sites directory panel view">
-          <FinderPanelView<SiteDirectoryRow>
-            embedded
-            groupsColumnTitle="Sites"
-            groups={panelGroups(state.rows)}
-            rows={state.rows}
-            getRowId={row => row.id}
-            getRowGroupId={() => "all"}
-            autoSaveId="sites-panel-view"
-            renderListRow={(row) => (
-              <div className="flex-1 min-w-0 flex items-center gap-2">
-                <Avatar size="sm" className="size-6 shrink-0">
-                  <AvatarFallback className="bg-brand/10 p-0 text-brand text-xs">
-                    <i className="fa-light fa-hospital text-xs" aria-hidden="true" />
-                  </AvatarFallback>
-                </Avatar>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-foreground truncate">{row.name}</p>
-                  <p className="text-xs text-muted-foreground truncate">{row.url}</p>
-                </div>
-              </div>
-            )}
-            renderDetail={(row) => (
-              <div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-4">
-                <div>
-                  <h3 className="text-sm font-semibold text-foreground mb-2">Site</h3>
-                  <p className="text-sm text-foreground">{row.name}</p>
-                </div>
-                <div className="flex flex-col gap-2">
-                  <div>
-                    <span className="text-xs font-medium text-muted-foreground">Key</span>
-                    <p className="text-sm text-foreground font-mono">{row.id}</p>
-                  </div>
-                  <div>
-                    <span className="text-xs font-medium text-muted-foreground">Path</span>
-                    <p className="text-sm text-foreground break-all">{row.url}</p>
-                  </div>
-                </div>
-              </div>
-            )}
-            emptyList={<p className="text-sm text-muted-foreground">No sites found.</p>}
-          />
-        </ListPageSplitHubChrome>,
-      ),
-    "dashboard-with-toolbar": ({ state, toolbar }) => {
-      const metrics = sitesKpiMetrics(state.rows.length)
-      return (
-        <div className="flex min-h-0 flex-1 flex-col gap-4">
-          {toolbar}
-          <div className="px-4 pb-2 lg:px-6">
-            <KeyMetrics
-              variant="flat"
-              metrics={metrics}
-              insight={SITES_KPI_INSIGHT}
-              showHeader={false}
-              metricsSingleRow
-            />
-          </div>
-          <SitesCardGrid rows={state.rows} />
-        </div>
-      )
-    },
-  }
-
-  return (
-    <HubTable<SiteDirectoryRow>
-      rows={sites}
-      columns={columns}
-      view={view}
-      onViewChange={onViewChange}
-      supportedViewTypes={SITES_SUPPORTED_VIEWS}
-      hubLabel="Sites"
-      lifecycleTabLabel="Sites"
-      searchAriaLabel="Search sites"
-      getRowId={row => row.id}
-      getRowSelectionLabel={row => row.name}
-      defaultSort={{ key: "name", dir: "asc" }}
-      emptyState={<p className="text-sm text-muted-foreground">No sites match your filters.</p>}
-      listAriaLabel="Sites"
-      listEmptyState="No sites match your search."
-      renderListRow={site => (
-        <Link
-          href={site.url}
-          className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <ListPageBoardCard
-            layout="row"
-            interactive
-            rowContainerClassName="flex flex-row items-center gap-3"
-            leading={
-              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
-                <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
-              </span>
-            }
-            rowEnd={
-              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-            }
-          >
-            <div className="space-y-0.5">
-              <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
-              <p className="truncate text-xs text-muted-foreground">{site.id}</p>
-            </div>
-          </ListPageBoardCard>
-        </Link>
-      )}
-      renderers={renderers}
-      handleRef={ref}
-    />
-  )
-})
-
-SitesTable.displayName = "SitesTable"

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

@@ -1,122 +0,0 @@
-"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,
-  onRowActivate,
-}: {
-  member: TeamMember
-  onRowActivate?: (member: TeamMember) => void
-}) {
-  return (
-    <ListPageBoardCard className="w-full" onClick={onRowActivate ? () => onRowActivate(member) : undefined}>
-      <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,
-  onRowActivate,
-}: {
-  members: TeamMember[]
-  groupByColumnKey: string
-  onRowActivate?: (member: TeamMember) => void
-}) {
-  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} onRowActivate={onRowActivate} />}
-    />
-  )
-}