@handled-ai/design-system 0.17.2 → 0.18.1

package/src/components/performance-metrics-table.tsx

@@ -52,6 +52,7 @@ interface PerformanceMetricsTableProps {
   title?: string
   entityColumnLabel?: string
   primaryMetricColumnLabel?: string
+  primaryMetricDisplayMode?: "progress" | "value"
   rateColumnLabel?: string
   metricOneColumnLabel?: string
   metricTwoColumnLabel?: string
@@ -179,9 +180,48 @@ function getProgressStatus(value: number, target: number) {
   }
 }
 
+function PrimaryMetricCell({
+  row,
+  displayMode,
+}: {
+  row: PerformanceMetricsTableRow
+  displayMode: "progress" | "value"
+}) {
+  if (displayMode === "value") {
+    return (
+      <div className="text-sm font-bold text-foreground">
+        {row.primaryValue}
+      </div>
+    )
+  }
+
+  const percentage = (row.primaryValue / row.primaryTarget) * 100
+  const progress = getProgressStatus(row.primaryValue, row.primaryTarget)
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="shrink-0">{progress.icon}</span>
+      <div className="w-full max-w-[180px]">
+        <div className="mb-1 text-sm font-bold text-foreground">
+          {row.primaryValue}/{row.primaryTarget}
+        </div>
+        <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
+          <div
+            className={cn("h-full rounded-full", progress.color)}
+            style={{ width: `${Math.min(100, percentage)}%` }}
+          />
+        </div>
+        <div className={cn("mt-1 text-xs font-medium", progress.textColor)}>
+          {Math.round(percentage)}%
+        </div>
+      </div>
+    </div>
+  )
+}
+
 function sortRows(
   rows: PerformanceMetricsTableRow[],
-  sortId: PerformanceMetricsTableSortOption["id"]
+  sortId: PerformanceMetricsTableSortOption["id"],
 ) {
   const copy = [...rows]
   switch (sortId) {
@@ -201,23 +241,28 @@ export function PerformanceMetricsTable({
   title = "Performance Table",
   entityColumnLabel = "Entity",
   primaryMetricColumnLabel = "Primary Goal",
+  primaryMetricDisplayMode = "progress",
   rateColumnLabel = "Rate",
   metricOneColumnLabel = "Metric One",
   metricTwoColumnLabel = "Metric Two",
   metricThreeColumnLabel = "Metric Three",
   metricFourColumnLabel = "Metric Four",
   viewOptions = ["By Entity"],
-  roleOptions = ["All", "Senior Coordinator", "Coordinator", "Junior Coordinator"],
+  roleOptions = [
+    "All",
+    "Senior Coordinator",
+    "Coordinator",
+    "Junior Coordinator",
+  ],
   sortOptions = DEFAULT_SORT_OPTIONS,
   rows = DEFAULT_ROWS,
   pageSize = 6,
   searchPlaceholder = "Search rows...",
 }: PerformanceMetricsTableProps) {
   const [view, setView] = React.useState(viewOptions[0] ?? "By Entity")
-  const [sortId, setSortId] =
-    React.useState<PerformanceMetricsTableSortOption["id"]>(
-      sortOptions[0]?.id ?? "primary-desc"
-    )
+  const [sortId, setSortId] = React.useState<
+    PerformanceMetricsTableSortOption["id"]
+  >(sortOptions[0]?.id ?? "primary-desc")
   const [roleFilter, setRoleFilter] = React.useState(roleOptions[0] ?? "All")
   const [search, setSearch] = React.useState("")
   const [page, setPage] = React.useState(1)
@@ -237,7 +282,7 @@ export function PerformanceMetricsTable({
 
   const sortedRows = React.useMemo(
     () => sortRows(filteredRows, sortId),
-    [filteredRows, sortId]
+    [filteredRows, sortId],
   )
 
   const pageCount = Math.max(1, Math.ceil(sortedRows.length / pageSize))
@@ -285,7 +330,10 @@ export function PerformanceMetricsTable({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-56">
               {sortOptions.map((option) => (
-                <DropdownMenuItem key={option.id} onClick={() => setSortId(option.id)}>
+                <DropdownMenuItem
+                  key={option.id}
+                  onClick={() => setSortId(option.id)}
+                >
                   {option.label}
                 </DropdownMenuItem>
               ))}
@@ -301,7 +349,10 @@ export function PerformanceMetricsTable({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               {roleOptions.map((option) => (
-                <DropdownMenuItem key={option} onClick={() => setRoleFilter(option)}>
+                <DropdownMenuItem
+                  key={option}
+                  onClick={() => setRoleFilter(option)}
+                >
                   {option}
                 </DropdownMenuItem>
               ))}
@@ -346,61 +397,45 @@ export function PerformanceMetricsTable({
               </TableRow>
             </TableHeader>
             <TableBody>
-              {paginatedRows.map((row) => {
-                const percentage = (row.primaryValue / row.primaryTarget) * 100
-                const progress = getProgressStatus(row.primaryValue, row.primaryTarget)
+              {paginatedRows.map((row) => (
+                <TableRow key={row.id} className="hover:bg-muted/30">
+                  <TableCell className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <Avatar className="h-8 w-8 border border-border">
+                        <AvatarFallback className="bg-emerald-100 text-[11px] font-medium text-emerald-700">
+                          {row.avatarFallback}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="text-sm font-medium text-foreground">
+                        {row.label}
+                      </span>
+                    </div>
+                  </TableCell>
 
-                return (
-                  <TableRow key={row.id} className="hover:bg-muted/30">
-                    <TableCell className="px-4 py-3">
-                      <div className="flex items-center gap-3">
-                        <Avatar className="h-8 w-8 border border-border">
-                          <AvatarFallback className="bg-emerald-100 text-[11px] font-medium text-emerald-700">
-                            {row.avatarFallback}
-                          </AvatarFallback>
-                        </Avatar>
-                        <span className="text-sm font-medium text-foreground">{row.label}</span>
-                      </div>
-                    </TableCell>
+                  <TableCell className="px-4 py-3">
+                    <PrimaryMetricCell
+                      row={row}
+                      displayMode={primaryMetricDisplayMode}
+                    />
+                  </TableCell>
 
-                    <TableCell className="px-4 py-3">
-                      <div className="flex items-center gap-2">
-                        <span className="shrink-0">{progress.icon}</span>
-                        <div className="w-full max-w-[180px]">
-                          <div className="mb-1 text-sm font-bold text-foreground">
-                            {row.primaryValue}/{row.primaryTarget}
-                          </div>
-                          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
-                            <div
-                              className={cn("h-full rounded-full", progress.color)}
-                              style={{ width: `${Math.min(100, percentage)}%` }}
-                            />
-                          </div>
-                          <div className={cn("mt-1 text-xs font-medium", progress.textColor)}>
-                            {Math.round(percentage)}%
-                          </div>
-                        </div>
-                      </div>
-                    </TableCell>
-
-                    <TableCell className="px-4 py-3 text-right text-sm font-semibold text-emerald-600">
-                      {row.ratePercent}%
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
-                      {row.metricOne}
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm text-muted-foreground">
-                      {row.metricTwo}
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
-                      {row.metricThree}
-                    </TableCell>
-                    <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
-                      {row.metricFour}
-                    </TableCell>
-                  </TableRow>
-                )
-              })}
+                  <TableCell className="px-4 py-3 text-right text-sm font-semibold text-emerald-600">
+                    {row.ratePercent}%
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
+                    {row.metricOne}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm text-muted-foreground">
+                    {row.metricTwo}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
+                    {row.metricThree}
+                  </TableCell>
+                  <TableCell className="px-4 py-3 text-right text-sm font-medium text-foreground">
+                    {row.metricFour}
+                  </TableCell>
+                </TableRow>
+              ))}
             </TableBody>
           </Table>
         </div>
@@ -410,7 +445,8 @@ export function PerformanceMetricsTable({
       <div className="flex items-center justify-between border-t border-border bg-muted/20 px-4 py-3">
         <span className="text-xs text-muted-foreground">
           Showing {sortedRows.length === 0 ? 0 : start + 1} to{" "}
-          {Math.min(start + pageSize, sortedRows.length)} of {sortedRows.length} rows
+          {Math.min(start + pageSize, sortedRows.length)} of {sortedRows.length}{" "}
+          rows
         </span>
         <div className="flex items-center gap-2">
           <Button

package/src/components/pill.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+/**
+ * Insights-friendly pill convenience wrappers.
+ *
+ * Pill and StatusPill are small, rounded wrappers for dense Insights surfaces
+ * such as tables, KPI strips, and filter summaries. They intentionally wrap the
+ * existing Badge/StatusBadge visual language and are not a replacement for all
+ * Badge usage across the design system.
+ */
+export type PillStatus = "success" | "warning" | "error" | "neutral" | "info"
+
+const pillVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white dark:bg-destructive/60",
+        outline: "border-border bg-background text-foreground",
+        ghost: "border-transparent bg-transparent text-muted-foreground",
+        success: "border-transparent bg-green-100 text-green-950 dark:bg-green-950 dark:text-green-100",
+        warning: "border-transparent bg-yellow-100 text-yellow-950 dark:bg-yellow-950 dark:text-yellow-100",
+        error: "border-transparent bg-red-100 text-red-950 dark:bg-red-950 dark:text-red-100",
+        neutral: "border-transparent bg-muted text-foreground",
+        info: "border-transparent bg-blue-100 text-blue-950 dark:bg-blue-950 dark:text-blue-100",
+      },
+    },
+    defaultVariants: {
+      variant: "neutral",
+    },
+  }
+)
+
+export interface PillProps
+  extends React.ComponentProps<"span">,
+    VariantProps<typeof pillVariants> {}
+
+export function Pill({ className, variant = "neutral", ...props }: PillProps) {
+  return (
+    <span
+      data-slot="pill"
+      data-variant={variant}
+      className={cn(pillVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export interface StatusPillProps extends Omit<PillProps, "variant"> {
+  status: React.ReactNode
+  intent?: PillStatus
+}
+
+export function StatusPill({ status, intent = "neutral", children, ...props }: StatusPillProps) {
+  return (
+    <Pill data-slot="status-pill" variant={intent} {...props}>
+      {children ?? status}
+    </Pill>
+  )
+}
+
+export { pillVariants }

package/src/components/quick-segment.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "../lib/utils"
+
+export interface QuickSegmentProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "value"> {
+  label: React.ReactNode
+  value: string
+  selected?: boolean
+  count?: number | string
+  description?: React.ReactNode
+  onSelect?: (value: string) => void
+}
+
+export function QuickSegment({
+  label,
+  value,
+  selected = false,
+  count,
+  description,
+  onSelect,
+  className,
+  type = "button",
+  ...props
+}: QuickSegmentProps) {
+  return (
+    <button
+      data-slot="quick-segment"
+      data-selected={selected ? "true" : "false"}
+      type={type}
+      aria-pressed={selected}
+      className={cn(
+        "inline-flex min-h-8 items-center gap-2 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors",
+        selected
+          ? "border-primary bg-primary text-primary-foreground shadow-sm"
+          : "border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
+        className
+      )}
+      onClick={(event) => {
+        props.onClick?.(event)
+        if (!event.defaultPrevented) onSelect?.(value)
+      }}
+      {...props}
+    >
+      <span data-slot="quick-segment-label">{label}</span>
+      {count !== undefined ? (
+        <span
+          data-slot="quick-segment-count"
+          className={cn(
+            "rounded-full px-1.5 py-0.5 text-[11px] leading-none",
+            selected
+              ? "bg-primary-foreground/20 text-primary-foreground"
+              : "bg-muted text-muted-foreground"
+          )}
+        >
+          {count}
+        </span>
+      ) : null}
+      {description ? (
+        <span data-slot="quick-segment-description" className="sr-only">
+          {description}
+        </span>
+      ) : null}
+    </button>
+  )
+}

package/src/index.ts

@@ -33,6 +33,7 @@ export * from "./components/data-table-filter"
 export * from "./components/data-table-quick-views"
 export * from "./components/data-table-toolbar"
 export * from "./components/detail-view"
+export * from "./components/detail-drawer"
 export * from "./components/dialog"
 export * from "./components/dropdown-menu"
 export * from "./components/empty-state"
@@ -47,6 +48,8 @@ export * from "./components/inbox-toolbar"
 export * from "./components/inline-banner"
 export * from "./components/input"
 export * from "./components/insights-filter-bar"
+export * from "./components/days-open-cell"
+export * from "./components/linked-entity-cell"
 export * from "./components/item-list"
 export * from "./components/item-list-display"
 export * from "./components/item-list-filter"
@@ -56,9 +59,11 @@ export * from "./components/label"
 export * from "./components/message"
 export * from "./components/metric-card"
 export * from "./components/performance-metrics-table"
+export * from "./components/pill"
 export * from "./components/preview-list"
 export * from "./components/progress"
 export * from "./components/quick-action-chat-area"
+export * from "./components/quick-segment"
 export {
   QuickActionModal,
   type QuickActionPriority,

package/src/lib/__tests__/user-display.test.ts

@@ -3,41 +3,83 @@ import { describe, expect, it } from "vitest"
 import { displayName, getInitials, shortName } from "../user-display"
 
 describe("displayName", () => {
-  it("prefers first and last name", () => {
+  it("returns first_name + last_name when both are present", () => {
     expect(
-      displayName({ first_name: "Sarah", last_name: "Mitchell", name: "S Mitchell", email: "sarah@example.com" }),
+      displayName({ first_name: "Sarah", last_name: "Mitchell", name: "S Mitchell", email: "sarah@example.com" })
     ).toBe("Sarah Mitchell")
   })
 
-  it("falls back through first name, name, email local part, then unknown", () => {
-    expect(displayName({ first_name: "Sarah", last_name: null, name: null, email: "sarah@example.com" })).toBe("Sarah")
-    expect(displayName({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe("Sarah Mitchell")
+  it("returns first_name alone when last_name is missing", () => {
+    expect(displayName({ first_name: "Sarah", last_name: null, name: null, email: "sarah@example.com" })).toBe(
+      "Sarah"
+    )
+  })
+
+  it("falls back to name when first_name is missing", () => {
+    expect(displayName({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe(
+      "Sarah Mitchell"
+    )
+  })
+
+  it("falls back to email local-part when name fields are missing or empty", () => {
     expect(displayName({ first_name: "", last_name: "", name: "", email: "sarah@example.com" })).toBe("sarah")
+  })
+
+  it("falls back to Unknown user when profile fields are absent", () => {
     expect(displayName({})).toBe("Unknown user")
     expect(displayName()).toBe("Unknown user")
   })
+
+  it("ignores last_name if first_name is missing", () => {
+    expect(displayName({ first_name: null, last_name: "Mitchell", name: "Old Name", email: "sarah@example.com" })).toBe(
+      "Old Name"
+    )
+  })
 })
 
 describe("getInitials", () => {
-  it("uses first and last initials", () => {
+  it("returns uppercased initials from first_name and last_name", () => {
     expect(getInitials({ first_name: "joe", last_name: "kim", email: "joe@example.com" })).toBe("JK")
   })
 
-  it("falls back through name, email local part, then question mark", () => {
-    expect(getInitials({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe("SM")
+  it("splits name into two parts for initials when first/last are not set", () => {
+    expect(getInitials({ first_name: null, last_name: null, name: "Sarah Mitchell", email: "sarah@example.com" })).toBe(
+      "SM"
+    )
+  })
+
+  it("uses first two characters of a single-word name", () => {
     expect(getInitials({ first_name: null, last_name: null, name: "Sarah", email: "sarah@example.com" })).toBe("SA")
+  })
+
+  it("falls back to first two email local characters when no name fields are set", () => {
     expect(getInitials({ first_name: null, last_name: null, name: null, email: "zz@example.com" })).toBe("ZZ")
+  })
+
+  it("returns question mark when no initials can be derived", () => {
     expect(getInitials({})).toBe("?")
     expect(getInitials()).toBe("?")
   })
+
+  it("handles multi-word name taking the first two initials", () => {
+    expect(getInitials({ name: "Mary Jane Watson", email: "mj@example.com" })).toBe("MJ")
+  })
 })
 
 describe("shortName", () => {
-  it("returns compact first name and last initial", () => {
+  it("returns 'First L.' when first and last are present", () => {
     expect(shortName({ first_name: "Sarah", last_name: "Mitchell", email: "sarah@example.com" })).toBe("Sarah M.")
   })
 
-  it("falls back to displayName when last name is unavailable", () => {
-    expect(shortName({ name: "Sarah Mitchell", email: "sarah@example.com" })).toBe("Sarah Mitchell")
+  it("falls back to displayName when last_name is unavailable", () => {
+    expect(shortName({ first_name: "Sarah", last_name: null, name: null, email: "sarah@example.com" })).toBe("Sarah")
+  })
+
+  it("falls back to email local-part when all names are missing", () => {
+    expect(shortName({ first_name: null, last_name: null, name: null, email: "sarah@example.com" })).toBe("sarah")
+  })
+
+  it("falls back to Unknown user when no profile fields are present", () => {
+    expect(shortName({})).toBe("Unknown user")
   })
 })