feat: UTC-402: Organization Members v2 (#9037)

Author: nass600

web/libs/ui/src/assets/icons/index.ts

@@ -195,6 +195,7 @@ export { ReactComponent as IconPause } from "./pause.svg";
 export { ReactComponent as IconPencil } from "./pencil.svg";
 export { ReactComponent as IconPeople } from "./people.svg";
 export { ReactComponent as IconPersonInCircle } from "./person-circle.svg";
+export { ReactComponent as IconPhone } from "./phone.svg";
 export { ReactComponent as IconPin } from "./pin.svg";
 export { ReactComponent as IconUprightPin } from "./upright-pin.svg";
 export { ReactComponent as IconPlay } from "./play.svg";
@@ -232,6 +233,7 @@ export { ReactComponent as IconSend } from "./send.svg";
 export { ReactComponent as IconSettings } from "./settings.svg";
 export { ReactComponent as IconSlack } from "./slack.svg";
 export { ReactComponent as IconSlow } from "./slow.svg";
+export { ReactComponent as IconSmartphone } from "./smartphone.svg";
 export { ReactComponent as IconSortDown } from "./sort-down.svg";
 export { ReactComponent as IconSortUp } from "./sort-up.svg";
 export { ReactComponent as IconSoundBars } from "./sound-bars.svg";

web/libs/ui/src/assets/icons/phone.svg

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { DataTable } from "./data-table";
 import type { ColumnDef, SortingState } from "@tanstack/react-table";
+import type { ExtendedDataTableColumnDef } from "./data-table";
 import { Badge } from "../badge/badge";
 import { Button } from "../button/button";
 import { IconEdit, IconTrash } from "@humansignal/icons";
@@ -146,6 +147,45 @@ export const WithSorting: Story = {
   },
 };
 
+/**
+ * Table with Help Tooltips
+ *
+ * Demonstrates the `help` property on columns, which displays an info icon with a tooltip
+ * in the column header. Hover over the info icon next to "Last Active" to see the tooltip.
+ */
+export const WithHelpTooltips: Story = {
+  render: () => {
+    const [sorting, setSorting] = useState<SortingState>([]);
+
+    const columnsWithHelp: ExtendedDataTableColumnDef<User>[] = [
+      ...baseColumns.slice(0, -1), // All columns except lastActive
+      {
+        accessorKey: "lastActive",
+        header: "Last Active",
+        enableSorting: true,
+        help: "The date when the user was last active in the system. This includes any activity such as logging in, viewing content, or making changes.",
+      },
+    ];
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="p-4 bg-neutral-surface rounded-md">
+          <p className="text-sm text-neutral-content-subtle">
+            💡 Hover over the info icon next to "Last Active" header to see the help tooltip
+          </p>
+        </div>
+        <DataTable
+          data={sampleData}
+          columns={columnsWithHelp}
+          enableSorting
+          sorting={sorting}
+          onSortingChange={setSorting}
+        />
+      </div>
+    );
+  },
+};
+
 export const WithSelection: Story = {
   render: () => {
     const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});

web/libs/ui/src/assets/icons/smartphone.svg

@@ -12,29 +12,36 @@ import {
   type SortingState,
 } from "@tanstack/react-table";
 
-// Extend ColumnMeta to include noDivider and sortParam
+// Extend ColumnMeta to include noDivider
 declare module "@tanstack/react-table" {
   interface ColumnMeta<TData, TValue> {
     noDivider?: boolean;
-    sortParam?: string; // API field name for sorting (e.g., "user__first_name")
   }
 }
 import { memo, useState, useMemo, useCallback } from "react";
 import { cn } from "../../utils/utils";
 import { useColumnSizing, useDataColumns } from "../../hooks/data-table";
 import { Checkbox } from "../checkbox/checkbox";
 import { Typography } from "../typography/typography";
-import { IconSortUp, IconSortDown, IconSearch } from "@humansignal/icons";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { IconSortUp, IconSortDown, IconSearch, IconInfoOutline } from "@humansignal/icons";
 import { EmptyState } from "../empty-state/empty-state";
 import { Skeleton } from "../skeleton/skeleton";
 import styles from "./data-table.module.scss";
 
 export type DataShape = Record<string, any>[];
 
+/**
+ * Extended ColumnDef type that includes custom properties for generic DataTable
+ */
+export type ExtendedDataTableColumnDef<T> = ColumnDef<T> & {
+  help?: string; // Optional help text to display in a tooltip with info icon
+};
+
 export type DataTableProps<T extends DataShape> = {
   data: T;
   meta?: TableMeta<any>;
-  columns?: ColumnDef<T[number]>[];
+  columns?: ExtendedDataTableColumnDef<T[number]>[];
   extraColumns?: ColumnDef<any>[];
   includeColumns?: (keyof T[number])[];
   excludeColumns?: (keyof T[number])[];
@@ -111,6 +118,33 @@ export const DataTable = <T extends DataShape>(props: DataTableProps<T>) => {
   const [internalSorting, setInternalSorting] = useState<SortingState>([]);
   const [internalActiveRowId, setInternalActiveRowId] = useState<string | undefined>(undefined);
 
+  // Restore column sizes from localStorage if storageKey is provided
+  const restoredColumnSizing = useMemo(() => {
+    if (!props.cellSizesStorageKey) return {};
+
+    try {
+      const stored = localStorage.getItem(props.cellSizesStorageKey);
+      if (!stored) return {};
+
+      const cellSizes = JSON.parse(stored) as Record<string, { size: number }>;
+      const columnSizing: Record<string, number> = {};
+
+      // Convert stored format { [columnId]: { size: number } } to TanStack format { [columnId]: number }
+      for (const [columnId, sizeData] of Object.entries(cellSizes)) {
+        if (sizeData?.size && typeof sizeData.size === "number") {
+          columnSizing[columnId] = sizeData.size;
+        }
+      }
+
+      return columnSizing;
+    } catch (error) {
+      console.warn("Failed to restore column sizes from localStorage:", error);
+      return {};
+    }
+  }, [props.cellSizesStorageKey]);
+
+  const [internalColumnSizing, setInternalColumnSizing] = useState<Record<string, number>>(restoredColumnSizing);
+
   // Use controlled activeRowId if onRowClick is provided (parent controls state via clicks)
   // OR if activeRowId is explicitly provided (not undefined)
   // When onRowClick is provided, activeRowId is read-only for display purposes
@@ -131,7 +165,10 @@ export const DataTable = <T extends DataShape>(props: DataTableProps<T>) => {
   const columnsWithHeaders = useMemo(() => {
     return baseColumns.map((col) => {
       // TanStack Table uses accessorKey as id if id is not explicitly set
-      const columnId = col.id || (col as any).accessorKey;
+      const extendedCol = col as ExtendedDataTableColumnDef<T[number]>;
+      const columnId =
+        extendedCol.id ||
+        ("accessorKey" in extendedCol && extendedCol.accessorKey ? String(extendedCol.accessorKey) : undefined);
 
       // Get current sort state for this column
       const currentSort = sorting.length > 0 ? sorting[0] : null;
@@ -155,6 +192,7 @@ export const DataTable = <T extends DataShape>(props: DataTableProps<T>) => {
             isDesc={isDesc}
             enableSorting={columnSortingEnabled}
             originalHeader={originalHeader}
+            help={extendedCol.help}
           />
         ),
       };
@@ -277,6 +315,13 @@ export const DataTable = <T extends DataShape>(props: DataTableProps<T>) => {
       columnVisibility: props.columnVisibility,
       rowSelection,
       sorting,
+      columnSizing: internalColumnSizing,
+    },
+    onColumnSizingChange: (updater) => {
+      setInternalColumnSizing((old) => {
+        const newState = typeof updater === "function" ? updater(old) : updater;
+        return newState;
+      });
     },
     onSortingChange: (updater) => {
       if (isSortingControlled && controlledOnSortingChange) {
@@ -308,7 +353,9 @@ export const DataTable = <T extends DataShape>(props: DataTableProps<T>) => {
       : undefined,
     getRowId: (row, index) => {
       // Use id if available, otherwise fall back to index
-      return (row as any)?.id?.toString() ?? index.toString();
+      // Note: 'row' parameter is the row data object itself, not a Row object
+      const rowId = (row as any)?.id;
+      return rowId !== undefined ? String(rowId) : String(index);
     },
     columnResizeMode: "onChange",
     enableSorting: enableSorting,
@@ -655,6 +702,7 @@ export type HeaderProps<T> = {
   isDesc?: boolean;
   enableSorting?: boolean;
   originalHeader?: string | React.ReactNode;
+  help?: string; // Optional help text to display in a tooltip with info icon
 };
 
 export const Header = <T,>({
@@ -663,6 +711,7 @@ export const Header = <T,>({
   isDesc = false,
   enableSorting = false,
   originalHeader,
+  help,
 }: HeaderProps<T>) => {
   // Get header label - use originalHeader if provided, otherwise try to extract from columnDef
   let headerLabel: string | React.ReactNode = undefined;
@@ -680,24 +729,29 @@ export const Header = <T,>({
     return null;
   }
 
+  const headerContent = (
+    <div className={cn(styles.headerContent, help && "gap-tighter")}>
+      <div className="flex items-center gap-2">
+        <Typography variant="label" size="small" className={cn(isSorted && styles.headerTextSorted)}>
+          {headerLabel}
+        </Typography>
+        {help && (
+          <Tooltip title={help} alignment="top-center">
+            <IconInfoOutline width={18} height={18} className="text-neutral-content-subtler cursor-help shrink-0" />
+          </Tooltip>
+        )}
+      </div>
+      {enableSorting && (
+        <div className={cn(styles.headerIcon, isSorted === true && styles.headerIconVisible)}>
+          {isSorted ? isDesc ? <IconSortUp /> : <IconSortDown /> : <IconSortDown />}
+        </div>
+      )}
+    </div>
+  );
+
   if (!enableSorting) {
-    return (
-      <Typography variant="label" size="small">
-        {headerLabel}
-      </Typography>
-    );
+    return headerContent;
   }
 
-  // Determine icon: when sorted, show current direction; when hovering unsorted, show next direction (asc)
-  const sortIcon = isSorted ? isDesc ? <IconSortUp /> : <IconSortDown /> : <IconSortDown />;
-
-  return (
-    <div className={styles.headerContent}>
-      <Typography variant="label" size="small" className={cn(isSorted && styles.headerTextSorted)}>
-        {headerLabel}
-      </Typography>
-      {/* Always render icon container for sortable columns - CSS handles visibility */}
-      <div className={cn(styles.headerIcon, isSorted === true && styles.headerIconVisible)}>{sortIcon}</div>
-    </div>
-  );
+  return headerContent;
 };

web/libs/ui/src/lib/data-table/data-table.stories.tsx

@@ -1,10 +1,8 @@
 export { DataTable } from "./data-table";
+export type { ExtendedDataTableColumnDef } from "./data-table";
 export type {
   DataTableProps,
   DataShape,
-  DataTableHeaders,
-  DataTableCells,
-  DataTableSizes,
   HeaderProps,
 } from "./data-table";
 export { Header } from "./data-table";

web/libs/ui/src/lib/data-table/data-table.tsx

@@ -0,0 +1,115 @@
+.monthCalendar {
+  text-align: center;
+}
+
+.daysWeek {
+  display: table-row;
+  cursor: default;
+}
+
+.monthWrapper {
+  display: grid;
+  gap: var(--spacing-tighter);
+}
+
+.labels {
+  height: 40px;
+  width: 40px;
+  display: table-cell;
+  font-size: 11px;
+  color: var(--color-neutral-content-subtler);
+  vertical-align: middle;
+}
+
+.week {
+  display: table-row;
+}
+
+.day {
+  display: table-cell;
+  height: 40px;
+  width: 40px;
+  font-size: 14px;
+  vertical-align: middle;
+  text-align: center;
+  transition: all 150ms ease-out;
+
+  &.inRange {
+    background: var(--color-primary-emphasis);
+  }
+
+  &.rangeStart {
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+    background: var(--color-primary-emphasis);
+  }
+
+  &.rangeEnd {
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    background: var(--color-primary-emphasis);
+  }
+
+  &.disabled {
+    cursor: default;
+    color: var(--color-neutral-content-subtlest);
+    pointer-events: none;
+    background: unset;
+  }
+}
+
+.highlight {
+  display: table-cell;
+  position: relative;
+  left: 4px;
+  height: 32px;
+  width: 32px;
+  font-size: 14px;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 150ms ease-out;
+  border: 2px solid transparent;
+
+  &:hover {
+    border: 2px solid var(--color-primary-border);
+    color: var(--color-neutral-content);
+    border-radius: 50%;
+  }
+
+  &.inRange {
+    &:hover {
+      border: 2px solid var(--color-primary-border);
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+    color: var(--color-neutral-content-subtlest);
+    pointer-events: none;
+  }
+
+  &.today {
+    &::before {
+      content: '';
+      position: absolute;
+      left: calc(50% - 2px);
+      bottom: 0;
+      height: 4px;
+      width: 4px;
+      background: var(--color-primary-surface);
+      border-radius: 4px;
+    }
+  }
+
+  &.selected {
+    border-radius: 50%;
+    background: var(--color-primary-surface);
+    color: var(--color-primary-surface-content);
+
+    &:hover {
+      color: var(--color-neutral-on-dark-content);
+    }
+  }
+}
+