@exxatdesignux/ui 0.0.6 → 0.0.8

package/template/components/table-properties/filter-card.tsx

@@ -0,0 +1,251 @@
+"use client"
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Tip } from "@/components/ui/tip"
+import { FilterDateCalendar } from "@/components/data-table/filter-date-calendar"
+import { FilterTextValueInput } from "@/components/data-table/filter-text-value-input"
+import {
+  type ActiveFilter,
+  type ConditionalRule,
+  type FilterFieldDef,
+  type FilterOperator,
+  OPERATOR_LABELS,
+  RULE_COLORS,
+} from "./types"
+
+type DrawerFilterCardBaseProps = {
+  fieldDef: FilterFieldDef
+  expanded: boolean
+  onToggleExpand: () => void
+  onRemove: (id: string) => void
+  renderOptionLabel?: (value: string) => React.ReactNode
+}
+
+export type DrawerFilterCardProps =
+  | (DrawerFilterCardBaseProps & {
+      variant?: "filter"
+      filter: ActiveFilter
+      onUpdate: (id: string, patch: Partial<ActiveFilter>) => void
+    })
+  | (DrawerFilterCardBaseProps & {
+      variant: "conditional"
+      filter: ConditionalRule
+      onUpdate: (id: string, patch: Partial<ConditionalRule>) => void
+    })
+
+/** Inline filter card used inside the Table Properties drawer (filter or conditional rule). */
+export function DrawerFilterCard(props: DrawerFilterCardProps) {
+  const {
+    fieldDef,
+    expanded,
+    onToggleExpand,
+    onRemove,
+    renderOptionLabel,
+  } = props
+
+  const isCond = props.variant === "conditional"
+  const filter = props.filter
+  const filterId = filter.id
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onUpdate = props.onUpdate as (id: string, patch: any) => void
+
+  const [optSearch, setOptSearch] = React.useState("")
+  const options = fieldDef.options ?? []
+  const showSearch = options.length > 8
+  const filteredOpts = optSearch
+    ? options.filter(o => o.label.toLowerCase().includes(optSearch.toLowerCase()))
+    : options
+
+  const values = filter.values
+
+  React.useEffect(() => {
+    if (fieldDef.type !== "select" && fieldDef.type !== "date") return
+    if (filter.operator !== "is" && filter.operator !== "is_not") {
+      onUpdate(filterId, { operator: "is" })
+    }
+  }, [filter.operator, filter.id, fieldDef.type, filterId, onUpdate])
+
+  function toggleValue(val: string) {
+    const next = values.includes(val) ? values.filter(v => v !== val) : [...values, val]
+    onUpdate(filterId, { values: next })
+  }
+
+  function cycleOperator() {
+    const ops = fieldDef.operators
+    const idx = ops.indexOf(filter.operator as FilterOperator)
+    const i = idx === -1 ? 0 : idx
+    onUpdate(filterId, { operator: ops[(i + 1) % ops.length] })
+  }
+
+  const removeLabel = isCond ? "rule" : "filter"
+  const rule = isCond ? (props.filter as ConditionalRule) : null
+
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      <div>
+      {/* Card header */}
+      <div
+        className="flex items-start justify-between px-3 pt-2.5 pb-2 gap-2 cursor-pointer"
+        role="button"
+        tabIndex={0}
+        aria-label={expanded ? `Collapse ${fieldDef.label}` : `Expand ${fieldDef.label}`}
+        onClick={onToggleExpand}
+        onKeyDown={e => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault()
+            onToggleExpand()
+          }
+        }}
+      >
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-semibold text-foreground">{fieldDef.label}</p>
+          <Button
+            type="button"
+            variant="ghost"
+            size="xs"
+            aria-label={`Operator: ${OPERATOR_LABELS[filter.operator as FilterOperator]} — click to cycle`}
+            onClick={e => {
+              e.stopPropagation()
+              cycleOperator()
+            }}
+            className="h-auto py-0 px-1 -ms-1 text-xs text-muted-foreground font-normal"
+          >
+            {OPERATOR_LABELS[filter.operator as FilterOperator]}
+            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
+          </Button>
+        </div>
+        <div className="flex items-center gap-0.5 shrink-0 self-start">
+          <Tip label={`Remove ${fieldDef.label} ${removeLabel}`} side="top">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label={`Remove ${fieldDef.label} ${removeLabel}`}
+              className="text-muted-foreground hover:text-destructive"
+              onClick={e => {
+                e.stopPropagation()
+                onRemove(filterId)
+              }}
+            >
+              <i className="fa-light fa-trash text-xs" aria-hidden="true" />
+            </Button>
+          </Tip>
+          <i
+            className={`fa-light ${expanded ? "fa-chevron-up" : "fa-chevron-down"} text-xs text-muted-foreground mt-2`}
+            aria-hidden="true"
+          />
+        </div>
+      </div>
+
+      {/* Expanded body */}
+      {expanded && (
+        <div className="border-t border-border">
+          {fieldDef.type === "select" ? (
+            <>
+              {showSearch && (
+                <div className="px-3 pt-2 pb-1">
+                  <Input placeholder="Search…" value={optSearch} onChange={e => setOptSearch(e.target.value)} className="h-7 text-xs" />
+                </div>
+              )}
+              <div role="listbox" aria-multiselectable="true" aria-label={`${fieldDef.label} options`} className="py-1 max-h-52 overflow-y-auto">
+                {filteredOpts.map(opt => {
+                  const checked = values.includes(opt.value)
+                  return (
+                    <div
+                      key={opt.value}
+                      role="option"
+                      aria-selected={checked}
+                      tabIndex={0}
+                      onClick={() => toggleValue(opt.value)}
+                      onKeyDown={e => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggleValue(opt.value) } }}
+                      className="flex items-center gap-2.5 px-3 py-2 text-sm hover:bg-interactive-hover cursor-pointer select-none focus-visible:outline-none focus-visible:bg-interactive-hover"
+                    >
+                      <span aria-hidden="true" data-slot="checkbox" data-state={checked ? "checked" : "unchecked"} className={cn(
+                        "inline-flex items-center justify-center size-3.5 shrink-0 rounded-[3px] border transition-colors",
+                        checked ? "bg-primary border-primary text-primary-foreground" : "border-input bg-background"
+                      )}>
+                        {checked && <i className="fa-solid fa-check text-current" style={{ fontSize: "7px" }} />}
+                      </span>
+                      {renderOptionLabel
+                        ? renderOptionLabel(opt.value)
+                        : <span className="text-foreground">{opt.label}</span>
+                      }
+                    </div>
+                  )
+                })}
+                {filteredOpts.length === 0 && (
+                  <p className="px-3 py-2 text-xs text-muted-foreground">No options found</p>
+                )}
+              </div>
+            </>
+          ) : fieldDef.type === "date" ? (
+            <div className="p-2">
+              <FilterDateCalendar
+                label={`${fieldDef.label} — choose date`}
+                valueYmd={filter.values[0]}
+                onChangeYmd={(ymd) =>
+                  onUpdate(filterId, { values: ymd ? [ymd] : [] })
+                }
+              />
+            </div>
+          ) : fieldDef.type === "text" ? (
+            <div className="p-3">
+              <FilterTextValueInput
+                mask={fieldDef.textMask}
+                aria-label={`${fieldDef.label} value`}
+                placeholder={`Enter ${fieldDef.label.toLowerCase()}…`}
+                value={values[0] ?? ""}
+                onValueChange={next => onUpdate(filterId, { values: [next] })}
+                className="text-sm"
+                autoFocus
+              />
+            </div>
+          ) : null}
+          {values.length > 0 ? (
+            <div className="sticky bottom-0 border-t border-border bg-card p-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => onUpdate(filterId, { values: [] })}
+                className="w-full justify-center gap-1.5 text-xs text-muted-foreground"
+              >
+                <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
+                Clear selection
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      )}
+
+      {/* Highlight color — conditional rules only */}
+      {isCond && rule && (
+        <div className="border-t border-border px-3 py-2.5">
+          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
+            Highlight color
+          </p>
+          <div className="flex flex-wrap gap-1.5">
+            {RULE_COLORS.map(c => (
+              <Button
+                key={c.name}
+                type="button"
+                size="icon-xs"
+                variant="outline"
+                aria-label={c.name}
+                className={cn(
+                  "rounded-md border-2 p-0 transition-all",
+                  rule.bgColor === c.bg ? "border-foreground scale-110" : "border-transparent hover:scale-105",
+                )}
+                style={{ background: c.bg }}
+                onClick={() => onUpdate(filterId, { bgColor: c.bg })}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+      </div>
+    </div>
+  )
+}

package/template/components/table-properties/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Table / data properties drawer — configure filters, sort, columns, display, and view type.
+ * Pass column metadata and filter field definitions for any row shape; placement defaults live in types.ts.
+ *
+ * List page ↔ Properties: `createListPageEditViewHandler` + `OpenTablePropertiesHandle`, or pass
+ * `tablePropertiesRef` on `ListPageTemplate` (see `lib/list-page-table-properties.ts`).
+ */
+
+export { TablePropertiesDrawer } from "./drawer"
+export type { TablePropertiesDrawerProps } from "./drawer"
+export { TablePropertiesDrawerButton } from "./drawer-button"
+export type {
+  TablePropertiesDrawerButtonProps,
+  TablePropertiesDrawerButtonState,
+} from "./drawer-button"
+export * from "./types"
+
+export {
+  createListPageEditViewHandler,
+  isDataListSurfaceViewType,
+  type OpenTablePropertiesHandle,
+} from "@/lib/list-page-table-properties"

package/template/components/table-properties/sort-card.tsx

@@ -0,0 +1,59 @@
+"use client"
+import * as React from "react"
+import { Tip } from "@/components/ui/tip"
+import { DragHandleGripIcon } from "@/components/ui/drag-handle-grip"
+import { type SortRule, COLUMNS } from "./types"
+
+/** Sort rule card inside the Sort drawer panel */
+export type DrawerSortCardProps = {
+  rule: SortRule
+  /** When the active table uses dynamic columns (e.g. placements), pass the resolved label. */
+  fieldLabel?: string
+  isPrimary: boolean
+  onRemove: () => void
+  onToggleDir: () => void
+}
+
+export function DrawerSortCard(props: DrawerSortCardProps) {
+  const { rule, fieldLabel, isPrimary, onRemove, onToggleDir } = props
+  const col = COLUMNS.find(c => c.key === rule.fieldKey)
+  const label = fieldLabel ?? col?.label ?? rule.fieldKey
+  if (!label) return null
+  return (
+    <div className="rounded-lg border border-border bg-background overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2.5">
+        <DragHandleGripIcon className="text-[13px] text-muted-foreground/40" />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-1.5">
+            {isPrimary && (
+              <span className="text-xs font-bold text-accent-foreground bg-accent rounded px-1 py-0.5 leading-none uppercase tracking-wide shrink-0">
+                Primary
+              </span>
+            )}
+            <p className="text-sm font-medium text-foreground truncate">{label}</p>
+          </div>
+          <button
+            type="button"
+            aria-label={`Direction: ${rule.direction === "asc" ? "Ascending" : "Descending"} — click to toggle`}
+            onClick={onToggleDir}
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-interactive-hover-foreground transition-colors mt-0.5"
+          >
+            <i className={`fa-light ${rule.direction === "asc" ? "fa-arrow-up-az" : "fa-arrow-down-az"} text-xs`} aria-hidden="true" />
+            {rule.direction === "asc" ? "Ascending" : "Descending"}
+            <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
+          </button>
+        </div>
+        <Tip label={`Remove ${label} sort`} side="top">
+          <button
+            type="button"
+            aria-label={`Remove ${label} sort`}
+            onClick={onRemove}
+            className="inline-flex items-center justify-center size-7 rounded text-muted-foreground hover:text-destructive hover:bg-interactive-hover transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
+          >
+            <i className="fa-light fa-trash text-xs" aria-hidden="true" />
+          </button>
+        </Tip>
+      </div>
+    </div>
+  )
+}

package/template/components/table-properties/types.ts

@@ -0,0 +1,124 @@
+"use client"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Shared types for table-properties components
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type FilterOperator = "is" | "is_not" | "contains" | "not_contains"
+
+/** Input mask for `type: "text"` filters — [Shadcn Studio input-mask](https://shadcnstudio.com/docs/components/input-mask). */
+export type FilterTextMask = "phone" | "zip" | "dateMDY"
+
+export interface FilterFieldDef {
+  key: string
+  label: string
+  icon: string
+  type: "select" | "text" | "date"
+  operators: FilterOperator[]
+  /** Select options, or for `date` fields used by conditional rules (exact row strings). */
+  options?: { value: string; label: string }[]
+  /** When `type` is `text`, optional `use-mask-input` pattern for the value field. */
+  textMask?: FilterTextMask
+}
+
+export interface ActiveFilter {
+  id: string
+  fieldKey: string
+  operator: FilterOperator
+  values: string[]
+}
+
+export interface SortRule {
+  id: string
+  fieldKey: string
+  direction: "asc" | "desc"
+}
+
+export const OPERATOR_LABELS: Record<FilterOperator, string> = {
+  is: "is", is_not: "is not", contains: "contains", not_contains: "does not contain",
+}
+
+/** Default filter field list (placement table uses column-derived defs via `filterFields` prop). */
+export const FILTER_FIELDS: FilterFieldDef[] = [
+  { key: "student",    label: "Student",    icon: "fa-user",      type: "text", operators: ["contains", "not_contains"] },
+  {
+    key: "specialization", label: "Specialization", icon: "fa-stethoscope", type: "select",
+    operators: ["is", "is_not"],
+    options: [
+      { value: "Adult Health",      label: "Adult Health"      },
+      { value: "Orthopedics",       label: "Orthopedics"       },
+      { value: "Hand Therapy",      label: "Hand Therapy"      },
+      { value: "Critical Care",     label: "Critical Care"     },
+      { value: "Behavioral Health", label: "Behavioral Health" },
+      { value: "Sports Rehab",      label: "Sports Rehab"      },
+      { value: "Pediatrics",        label: "Pediatrics"        },
+      { value: "Neuro",             label: "Neuro"             },
+      { value: "Family Practice",   label: "Family Practice"   },
+      { value: "Neuro Rehab",       label: "Neuro Rehab"       },
+      { value: "Youth Services",    label: "Youth Services"    },
+      { value: "Emergency",         label: "Emergency"         },
+      { value: "Acute Care",        label: "Acute Care"        },
+      { value: "Women's Health",    label: "Women's Health"    },
+    ],
+  },
+  { key: "site",       label: "Site",       icon: "fa-hospital",  type: "text", operators: ["contains", "not_contains"] },
+  {
+    key: "status", label: "Status", icon: "fa-circle-dot", type: "select",
+    operators: ["is", "is_not"],
+    options: [
+      { value: "confirmed",    label: "Confirmed"    },
+      { value: "pending",      label: "Pending"      },
+      { value: "under-review", label: "Under Review" },
+      { value: "rejected",     label: "Rejected"     },
+      { value: "completed",    label: "Completed"    },
+    ],
+  },
+  { key: "start",      label: "Start Date", icon: "fa-calendar",  type: "date", operators: ["is", "is_not"] },
+  { key: "supervisor", label: "Supervisor", icon: "fa-user-tie",  type: "text", operators: ["contains", "not_contains"] },
+]
+
+// Column definitions — shared with drawer
+export interface ColDef {
+  key: string
+  label: string
+  sortable: boolean
+  sortKey?: string
+  minWidth: number
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Conditional formatting rules
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface ConditionalRule {
+  id: string
+  /** Column key to evaluate */
+  fieldKey: string
+  operator: FilterOperator
+  /** Selected option values (select) or text (single entry) when operator needs values */
+  values: string[]
+  /** Resolved CSS background color string */
+  bgColor: string
+}
+
+/** Predefined palette for conditional rule backgrounds */
+export const RULE_COLORS: { name: string; bg: string }[] = [
+  { name: "Green",  bg: "var(--conditional-rule-green)" },
+  { name: "Yellow", bg: "var(--conditional-rule-yellow)" },
+  { name: "Blue",   bg: "var(--conditional-rule-blue)" },
+  { name: "Red",    bg: "var(--conditional-rule-red)" },
+  { name: "Purple", bg: "var(--conditional-rule-purple)" },
+  { name: "Orange", bg: "var(--conditional-rule-orange)" },
+]
+
+export const COLUMNS: ColDef[] = [
+  { key: "select",     label: "",            sortable: false, minWidth: 40  },
+  { key: "student",    label: "Student",     sortable: true,  minWidth: 180, sortKey: "student"  },
+  { key: "specialization", label: "Specialization", sortable: true,  minWidth: 100, sortKey: "specialization"  },
+  { key: "site",       label: "Site",        sortable: true,  minWidth: 100, sortKey: "site"     },
+  { key: "status",     label: "Status",      sortable: true,  minWidth: 110, sortKey: "status"   },
+  { key: "start",      label: "Start Date",  sortable: true,  minWidth: 110, sortKey: "start"    },
+  { key: "duration",   label: "Duration",    sortable: false, minWidth: 80                        },
+  { key: "supervisor", label: "Supervisor",  sortable: false, minWidth: 100                       },
+  { key: "actions",    label: "",            sortable: false, minWidth: 88  },
+]

package/template/components/task-list-panel.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import * as React from "react"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { TaskPriorityBadge } from "@/components/task-priority-badge"
+import { DashboardSectionTitle } from "@/components/dashboard-section-heading"
+import { cn } from "@/lib/utils"
+
+export interface TaskListItem {
+  id: number
+  label: string
+  due: string
+  priority: "high" | "medium" | "low"
+  done: boolean
+}
+
+export function TaskListPanel({
+  title = "Tasks",
+  headingId,
+  headingLevel = "h2",
+  plain = false,
+  defaultTasks,
+}: {
+  title?: string
+  headingId?: string
+  headingLevel?: "h1" | "h2"
+  plain?: boolean
+  defaultTasks: TaskListItem[]
+}) {
+  const [tasks, setTasks] = React.useState<TaskListItem[]>(defaultTasks)
+  const pending = tasks.filter((task) => !task.done).length
+
+  const header = (
+    <div className="flex items-center justify-between gap-2">
+      <DashboardSectionTitle as={headingLevel} id={headingId}>
+        {title}
+      </DashboardSectionTitle>
+      <Badge variant="outline" className="text-xs tabular-nums">
+        {pending} pending
+      </Badge>
+    </div>
+  )
+
+  const rows = tasks.map((task) => {
+    const taskDomId = `task-${task.id}`
+    return (
+      <div
+        key={task.id}
+        className={cn(
+          "flex items-start gap-2.5 rounded-lg px-2 py-2 transition-colors hover:bg-interactive-hover-medium",
+          task.done && "opacity-80",
+        )}
+      >
+        <Checkbox
+          id={taskDomId}
+          checked={task.done}
+          onCheckedChange={(checked) =>
+            setTasks((prev) =>
+              prev.map((current) =>
+                current.id === task.id ? { ...current, done: checked === true } : current,
+              ),
+            )
+          }
+          className="mt-0.5"
+          aria-label={`${task.done ? "Mark incomplete" : "Mark complete"}: ${task.label}`}
+        />
+        <Label htmlFor={taskDomId} className="min-w-0 flex-1 cursor-pointer flex-col items-stretch gap-0.5 font-normal">
+          <span className={cn("text-xs font-medium leading-snug text-foreground", task.done && "text-muted-foreground line-through")}>
+            {task.label}
+          </span>
+          <span className="text-xs text-muted-foreground">{task.due}</span>
+        </Label>
+        <div className="shrink-0 pt-0.5">
+          <TaskPriorityBadge priority={task.priority} />
+        </div>
+      </div>
+    )
+  })
+
+  if (plain) {
+    return (
+      <section aria-labelledby={headingId} className="flex flex-col gap-3">
+        {header}
+        <div className="flex flex-col gap-0.5">{rows}</div>
+      </section>
+    )
+  }
+
+  return (
+    <Card size="sm">
+      <CardHeader>{header}</CardHeader>
+      <CardContent className="flex flex-col gap-0.5">{rows}</CardContent>
+    </Card>
+  )
+}

package/template/components/task-priority-badge.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import {
+  normalizeTaskPriority,
+  TASK_PRIORITY_BADGE_CLASS,
+  TASK_PRIORITY_LABEL,
+} from "@/lib/list-status-badges"
+import { cn } from "@/lib/utils"
+
+export function TaskPriorityBadge({ priority }: { priority: string }) {
+  const level = normalizeTaskPriority(priority)
+  if (!level) {
+    return (
+      <Badge variant="outline" className="capitalize text-xs">
+        {priority}
+      </Badge>
+    )
+  }
+  return (
+    <Badge
+      variant="outline"
+      className={cn("text-xs", TASK_PRIORITY_BADGE_CLASS[level])}
+    >
+      {TASK_PRIORITY_LABEL[level]}
+    </Badge>
+  )
+}