@exxatdesignux/ui 0.2.18 → 0.2.19

package/template/components/sites-table.tsx

@@ -1,382 +0,0 @@
-"use client"
-
-/**
- * Sites hub — same stack as Team / Compliance: DataTableToolbar (search, filters)
- * + TablePropertiesDrawer, shared `useTableState` across table | list | board | dashboard.
- */
-
-import * as React from "react"
-import Link from "next/link"
-import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
-import { DataTable, DataTableToolbar } from "@/components/data-table"
-import { useTableState } from "@/components/data-table/use-table-state"
-import type { ColumnDef } from "@/components/data-table/types"
-import type { DataListViewType } from "@/lib/data-list-view"
-import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
-import { TablePropertiesDrawerButton } from "@/components/table-properties"
-import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Tip } from "@/components/ui/tip"
-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 { SitesCardGrid } from "@/components/sites-board-view"
-import { SitesListView } from "@/components/sites-list-view"
-import { KeyMetrics } from "@/components/key-metrics"
-import { SITES_KPI_INSIGHT, sitesKpiMetrics } from "@/lib/mock/sites-kpi"
-import {
-  DEFAULT_DATA_LIST_DISPLAY_OPTIONS,
-  type DataListDisplayOptions,
-} from "@/lib/data-list-display-options"
-
-function columnToFilterFieldDef(c: ColumnDef<SiteDirectoryRow>): FilterFieldDef | null {
-  if (!c.filter) return null
-  const f = c.filter
-  const defaultOps: FilterOperator[] =
-    f.type === "select" || f.type === "date" ? ["is", "is_not"] : ["contains", "not_contains"]
-  return {
-    key: c.key,
-    label: c.label,
-    icon: f.icon ?? "fa-filter",
-    type: f.type,
-    operators: (f.operators ?? defaultOps) as FilterOperator[],
-    options: f.options,
-    ...(f.textMask ? { textMask: f.textMask } : {}),
-  }
-}
-
-function columnsToFilterFields(cols: ColumnDef<SiteDirectoryRow>[]) {
-  return cols.map(columnToFilterFieldDef).filter((x): x is FilterFieldDef => x !== null)
-}
-
-function buildSitesColumns(): ColumnDef<SiteDirectoryRow>[] {
-  const COLUMN_SELECT: ColumnDef<SiteDirectoryRow> = {
-    key: "select",
-    label: "",
-    width: 40,
-    minWidth: 40,
-    defaultPin: "left",
-    lockPin: true,
-  }
-
-  return [
-    COLUMN_SELECT,
-    {
-      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 = OpenTablePropertiesHandle
-
-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 filterFields = React.useMemo(() => columnsToFilterFields(columns), [columns])
-  const fieldDefinitionsForDrawer = React.useMemo(
-    () =>
-      columns
-        .filter(c => c.key !== "select" && c.key !== "actions")
-        .map(c => ({ key: c.key, label: c.label, sortable: !!(c.sortable && (c.sortKey ?? c.key)) })),
-    [columns],
-  )
-
-  const resolveColumnLabel = React.useCallback(
-    (key: string) => columns.find(c => c.key === key)?.label ?? key,
-    [columns],
-  )
-
-  const [displayOptions, setDisplayOptions] = React.useState<DataListDisplayOptions>(DEFAULT_DATA_LIST_DISPLAY_OPTIONS)
-  const patchDisplay = React.useCallback((patch: Partial<DataListDisplayOptions>) => {
-    setDisplayOptions(prev => ({ ...prev, ...patch }))
-  }, [])
-
-  const [conditionalRules, setConditionalRules] = React.useState<ConditionalRule[]>([])
-
-  const addConditionalRule = React.useCallback((rule: Omit<ConditionalRule, "id">) => {
-    setConditionalRules(prev => [...prev, { ...rule, id: `cr-${Date.now()}` }])
-  }, [])
-  const removeConditionalRule = React.useCallback((id: string) => {
-    setConditionalRules(prev => prev.filter(r => r.id !== id))
-  }, [])
-  const updateConditionalRule = React.useCallback((id: string, patch: Partial<ConditionalRule>) => {
-    setConditionalRules(prev => prev.map(r => (r.id === id ? { ...r, ...patch } : r)))
-  }, [])
-
-  const tableState = useTableState<SiteDirectoryRow>(sites, columns, { key: "name", dir: "asc" })
-
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      openPropertiesDrawer: () => {
-        tableState.setSheetOpen(true)
-      },
-    }),
-    // `tableState` is freshly returned each render by useTableState; depending
-    // on it would re-create the imperative handle on every render. Only the
-    // React setter is needed (and is referentially stable).
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [tableState.setSheetOpen],
-  )
-
-  const dashMetrics = React.useMemo(
-    () => sitesKpiMetrics(tableState.rows.length),
-    [tableState.rows.length],
-  )
-
-  // Generic panel view rendering for sites
-  const panelGroupsBuilder = (rows: SiteDirectoryRow[]): FinderGroup[] => [
-    {
-      id: "all",
-      label: `All sites (${rows.length})`,
-      count: rows.length,
-    },
-  ]
-
-  const panelRenderListRow = (row: SiteDirectoryRow, _isSelected: boolean) => (
-    <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>
-  )
-
-  const panelRenderDetail = (row: SiteDirectoryRow) => (
-    <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>
-  )
-
-  const drawerToolbarProps = {
-    state: tableState,
-    totalRows: sites.length,
-    filterFields,
-    fieldDefinitions: fieldDefinitionsForDrawer,
-    resolveColumnLabel,
-    displayOptions,
-    onDisplayOptionsChange: patchDisplay,
-    conditionalRules,
-    onAddConditionalRule: addConditionalRule,
-    onRemoveConditionalRule: removeConditionalRule,
-    onUpdateConditionalRule: updateConditionalRule,
-    currentView: view,
-    onViewChange,
-    lifecycleTabLabel: "Sites",
-  }
-
-  const tableProps = {
-    data: sites,
-    columns,
-    getRowId: (row: SiteDirectoryRow) => row.id,
-    getRowSelectionLabel: (row: SiteDirectoryRow) => row.name,
-    selectable: true,
-    searchable: displayOptions.showToolbarSearch,
-    showColumnHeaders: displayOptions.showColumnLabels,
-    groupable: true,
-    defaultSort: { key: "name", dir: "asc" as const },
-    emptyState: <p className="text-sm text-muted-foreground">No sites match your filters.</p>,
-    conditionalRules,
-    state: tableState,
-    toolbarSlot: (s: ReturnType<typeof useTableState<SiteDirectoryRow>>) => (
-      <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />
-    ),
-    bulkActionsSlot: (selected: Set<string | number>) => {
-      const n = selected.size
-      if (n === 0) return null
-      return (
-        <>
-          <span className="sr-only">{n} selected</span>
-          <Tip label="Export selection (demo)">
-            <Button size="sm" variant="outline" type="button">
-              <i className="fa-light fa-arrow-down-to-line" aria-hidden="true" />
-              Export
-            </Button>
-          </Tip>
-        </>
-      )
-    },
-  }
-
-  if (view === "table") {
-    return (
-      <div className="pb-6">
-        <DataTable<SiteDirectoryRow> {...tableProps} />
-      </div>
-    )
-  }
-
-  const sharedToolbar = (
-    <DataTableToolbar
-      state={tableState}
-      columns={columns}
-      searchable={displayOptions.showToolbarSearch}
-      searchAriaLabel="Search sites"
-      toolbarSlot={s => <TablePropertiesDrawerButton {...drawerToolbarProps} state={s} />}
-    />
-  )
-
-  if (view === "list") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <SitesListView rows={tableState.rows} />
-      </div>
-    )
-  }
-
-  if (view === "board") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <SitesCardGrid rows={tableState.rows} />
-      </div>
-    )
-  }
-
-  if (view === "panel") {
-    return (
-      <div className="flex min-h-0 flex-1 flex-col">
-        {sharedToolbar}
-        <ListPageSplitHubChrome aria-label="Sites directory panel view">
-          <FinderPanelView<SiteDirectoryRow>
-            embedded
-            groupsColumnTitle="Sites"
-            groups={panelGroupsBuilder(tableState.rows)}
-            rows={tableState.rows}
-            getRowId={(row) => row.id}
-            getRowGroupId={() => "all"}
-            autoSaveId="sites-panel-view"
-            renderListRow={panelRenderListRow}
-            renderDetail={panelRenderDetail}
-            emptyList={<p className="text-sm text-muted-foreground">No sites found.</p>}
-          />
-        </ListPageSplitHubChrome>
-      </div>
-    )
-  }
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col gap-4">
-      {sharedToolbar}
-      <div className="px-4 pb-2 lg:px-6">
-        <KeyMetrics
-          variant="flat"
-          metrics={dashMetrics}
-          insight={SITES_KPI_INSIGHT}
-          showHeader={false}
-          metricsSingleRow
-        />
-      </div>
-      <SitesCardGrid rows={tableState.rows} />
-    </div>
-  )
-})
-
-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} />}
-    />
-  )
-}

package/template/components/team-client.tsx

@@ -1,100 +0,0 @@
-"use client"
-
-/**
- * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as PlacementsClient).
- * 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",
-  },
-  {
-    id: "panel",
-    label: "Panel",
-    viewType: "panel",
-    icon: "fa-sidebar",
-    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

@@ -1,59 +0,0 @@
-"use client"
-
-/**
- * TeamListView — full-width rows for team roster (same data as DataTable / board).
- * Shell from generic `DataRowList`; row body stays team-specific (avatar,
- * name, role, email, status badge).
- */
-
-import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
-import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
-import { DataRowList } from "@/components/data-views/data-row-list"
-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"
-
-export function TeamListView({
-  members,
-  onRowActivate,
-}: {
-  members: TeamMember[]
-  onRowActivate?: (member: TeamMember) => void
-}) {
-  return (
-    <DataRowList<TeamMember>
-      rows={members}
-      getRowId={m => m.id}
-      emptyState="No team members match your filters."
-      ariaLabel="Team members"
-      renderRow={member => (
-        <ListPageBoardCard
-          layout="row"
-          rowContainerClassName="flex flex-row items-center gap-3"
-          onClick={onRowActivate ? () => onRowActivate(member) : undefined}
-          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>
-      )}
-    />
-  )
-}