@squadbase/vantage 0.6.1 → 0.6.2-dev1.0017a4d

package/registry/ui/attention-list.tsx

@@ -0,0 +1,303 @@
+// Copied by `vantage add ui attention-list`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/components/attention-list.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+/**
+ * AttentionList — 期日超過・期限間近・リスク・滞留に当たる行を上に寄せ、理由と次の一手を添えて並べる要対応一覧。
+ * 判定は `judgeAttention`（純関数）が行い、部品は並べ替えと描画だけをする。区分の文言としきい値
+ * （`dueSoonDays` / `staleDays`）は props で渡す。業務の意味（請求・商談・契約など）は呼び元が決める。
+ *
+ * - 区分は 1 行に 1 つ。複数に当たるときは 期日超過 ＞ リスク ＞ 期限間近 ＞ 滞留 の順で強いほうを採る。
+ * - 並びは区分の強さ、同じ区分では日数の大きい（遅れている・止まっている）行が先。日数が同じなら元の順。
+ * - 区分の色は StatusBadge の意味色（negative / warning / info）。色だけでなく区分名と日数の文で伝える。
+ * - 判定に当たらない行は既定で出さない（`includeUnflagged` で末尾に出す）。当たる行がなければ Empty を出す。
+ * - 行の項目は関数（`getDueDate` など）か列名（`dueDateKey` など）で渡す。列名は JSON で書けるので、下書きはこちらを使う。
+ *   両方あれば関数が先。どちらも無ければ、期日・動き・リスクは「無い」として判定せず、行の ID は行の順番、見出しは空になる。
+ * - 行を押すと `onRowClick(row)` を呼ぶ。渡さなければ押せない行（button ではなく li）になる。
+ *
+ * @example
+ * import { AttentionList } from "@/components/attention-list"
+ * // Vantage: import { AttentionList } from "@squadbase/vantage/components"
+ *
+ * <AttentionList
+ *   rows={receivables}
+ *   asOf="2026-10-23"
+ *   dueSoonDays={7}
+ *   getRowId={(r) => r.id}
+ *   getTitle={(r) => r.customer}
+ *   getDueDate={(r) => r.dueDate}
+ *   getNextAction={(r) => r.nextAction}
+ *   onRowClick={(r) => openDetail(r.id)}
+ * />
+ */
+import { differenceInCalendarDays, parseISO } from "date-fns"
+import { useMemo, type HTMLAttributes, type ReactNode } from "react"
+
+import { formatDate } from "@squadbase/vantage/components"
+import { cn } from "@squadbase/vantage/ui"
+import { Empty } from "@squadbase/vantage/ui"
+import { StatusBadge } from "@squadbase/vantage/components"
+
+export type AttentionKind = "overdue" | "risk" | "dueSoon" | "stale"
+
+/** 強い順。並びと、複数に当たったときの採用に使う。 */
+const KIND_ORDER: readonly AttentionKind[] = ["overdue", "risk", "dueSoon", "stale"]
+
+const KIND_TONES: Record<AttentionKind, string> = {
+  overdue: "negative",
+  risk: "negative",
+  dueSoon: "warning",
+  stale: "info",
+}
+
+export const DEFAULT_ATTENTION_LABELS: Record<AttentionKind, string> = {
+  overdue: "期日超過",
+  risk: "リスク",
+  dueSoon: "期限間近",
+  stale: "滞留",
+}
+
+type DateInput = Date | string | null | undefined
+
+export interface AttentionJudgement {
+  kind: AttentionKind
+  /**
+   * overdue: 期日を過ぎた日数（1 以上）／ dueSoon: 期日までの日数（0 = 当日）／
+   * stale: 最終の動きからの日数／ risk: 0。
+   */
+  days: number
+}
+
+export interface JudgeAttentionInput {
+  /** 期日。無ければ期日の判定（超過・間近）はしない。 */
+  dueDate?: DateInput
+  /** 最後に動きがあった日。無ければ滞留の判定はしない。 */
+  lastActivityAt?: DateInput
+  /** 呼び元がリスクと判定した行。 */
+  risk?: boolean
+  /** 基準日。必ず渡す（部品の内で「今日」を決めない）。 */
+  asOf: Date | string
+  /** 期日の何日前から「期限間近」にするか。当日を含み、この日数ちょうども含む。既定 7。 */
+  dueSoonDays?: number
+  /** 何日動きがなければ「滞留」にするか。この日数ちょうどから滞留。未指定なら滞留は判定しない。 */
+  staleDays?: number
+}
+
+function toDate(value: DateInput): Date | null {
+  if (value === null || value === undefined || value === "") return null
+  const date = typeof value === "string" ? parseISO(value) : value
+  return Number.isFinite(date.getTime()) ? date : null
+}
+
+/**
+ * 1 行が要対応かを判定する。当たらなければ `null`。日数は暦日（時刻は無視）で数える。
+ * 期日の当日は「超過」ではなく「期限間近（0 日）」。
+ */
+export function judgeAttention(input: JudgeAttentionInput): AttentionJudgement | null {
+  const asOf = toDate(input.asOf)
+  if (!asOf) return null
+  const dueSoonDays = input.dueSoonDays ?? 7
+
+  const due = toDate(input.dueDate)
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf)
+    if (untilDue < 0) return { kind: "overdue", days: -untilDue }
+  }
+  if (input.risk) return { kind: "risk", days: 0 }
+  if (due) {
+    const untilDue = differenceInCalendarDays(due, asOf)
+    if (untilDue <= dueSoonDays) return { kind: "dueSoon", days: untilDue }
+  }
+  const last = toDate(input.lastActivityAt)
+  if (last && input.staleDays !== undefined) {
+    const idle = differenceInCalendarDays(asOf, last)
+    if (idle >= input.staleDays) return { kind: "stale", days: idle }
+  }
+  return null
+}
+
+/** 区分の強さ → 日数の大きい順（dueSoon は期日が近い順）。同順位は 0 を返し、元の順を保つ。 */
+export function compareAttention(a: AttentionJudgement | null, b: AttentionJudgement | null): number {
+  if (!a || !b) return a ? -1 : b ? 1 : 0
+  const byKind = KIND_ORDER.indexOf(a.kind) - KIND_ORDER.indexOf(b.kind)
+  if (byKind !== 0) return byKind
+  return a.kind === "dueSoon" ? a.days - b.days : b.days - a.days
+}
+
+function defaultReason(j: AttentionJudgement, labels: Record<AttentionKind, string>): string {
+  switch (j.kind) {
+    case "overdue":
+      return `期日を ${j.days} 日過ぎています`
+    case "dueSoon":
+      return j.days === 0 ? "期日は今日です" : `期日まであと ${j.days} 日です`
+    case "stale":
+      return `${j.days} 日間動きがありません`
+    case "risk":
+      return labels.risk
+  }
+}
+
+export interface AttentionListProps<T> {
+  rows: T[]
+  /** 基準日（`"2026-10-23"` か Date）。 */
+  asOf: Date | string
+  /** 期日の何日前から「期限間近」にするか。既定 7。 */
+  dueSoonDays?: number
+  /** この日数動きがなければ「滞留」。未指定なら滞留は判定しない。 */
+  staleDays?: number
+  /** 区分名の差し替え（例: `{ overdue: "入金遅れ" }`）。 */
+  labels?: Partial<Record<AttentionKind, string>>
+  /** 行の ID。省略時は `idKey` の列、それも無ければ行の順番。 */
+  getRowId?: (row: T) => string
+  /** 行の見出し（顧客名・案件名など）。省略時は `titleKey` の列、それも無ければ空。 */
+  getTitle?: (row: T) => ReactNode
+  getDueDate?: (row: T) => DateInput
+  getLastActivityAt?: (row: T) => DateInput
+  /** リスクと判定する行。期日・滞留より先に出す。 */
+  isRisk?: (row: T) => boolean
+  /** 行の ID の列名（JSON で書ける `getRowId`）。 */
+  idKey?: string
+  /** 見出しの列名（JSON で書ける `getTitle`）。 */
+  titleKey?: string
+  /** 期日の列名（JSON で書ける `getDueDate`）。値は `"2026-10-23"` 形式の日付か Date。 */
+  dueDateKey?: string
+  /** 最後に動きがあった日の列名（JSON で書ける `getLastActivityAt`）。 */
+  lastActivityAtKey?: string
+  /** リスクの列名（JSON で書ける `isRisk`）。値が真の行をリストにする。 */
+  riskKey?: string
+  /** 次の一手の列名（JSON で書ける `getNextAction`）。値が空の行には添えない。 */
+  nextActionKey?: string
+  /** 理由の文。省略すると区分と日数から作る。 */
+  getReason?: (row: T, judgement: AttentionJudgement) => ReactNode
+  /** 次の一手。判定に当たる行に添える。 */
+  getNextAction?: (row: T, judgement: AttentionJudgement) => ReactNode
+  /** 見出しの右に出す補足（金額・担当者など）。 */
+  getMeta?: (row: T) => ReactNode
+  /** 行を押したとき。渡すと行が button になる。 */
+  onRowClick?: (row: T) => void
+  /** 判定に当たらない行も末尾に出す。既定 false。 */
+  includeUnflagged?: boolean
+  /** 該当なしのときの見出し・説明。 */
+  emptyTitle?: string
+  emptyDescription?: string
+  className?: string
+}
+
+function cell(row: unknown, key: string | undefined): unknown {
+  if (!key || row === null || typeof row !== "object") return undefined
+  return (row as Record<string, unknown>)[key]
+}
+
+function asDateInput(value: unknown): DateInput {
+  return typeof value === "string" || value instanceof Date ? value : undefined
+}
+
+function asNode(value: unknown): ReactNode {
+  return typeof value === "string" || typeof value === "number" ? value : null
+}
+
+export function AttentionList<T>({
+  rows,
+  asOf,
+  dueSoonDays,
+  staleDays,
+  labels,
+  getRowId,
+  getTitle,
+  getDueDate,
+  getLastActivityAt,
+  isRisk,
+  idKey,
+  titleKey,
+  dueDateKey,
+  lastActivityAtKey,
+  riskKey,
+  nextActionKey,
+  getReason,
+  getNextAction,
+  getMeta,
+  onRowClick,
+  includeUnflagged = false,
+  emptyTitle = "対応が必要な項目はありません",
+  emptyDescription,
+  className,
+  ...rest
+}: AttentionListProps<T> & Omit<HTMLAttributes<HTMLUListElement>, keyof AttentionListProps<T>>) {
+  const mergedLabels = useMemo(() => ({ ...DEFAULT_ATTENTION_LABELS, ...labels }), [labels])
+  const colorMap = KIND_TONES
+  const dueOf = (row: T) => (getDueDate ? getDueDate(row) : asDateInput(cell(row, dueDateKey)))
+  const nextActionOf = (row: T, j: AttentionJudgement): ReactNode =>
+    getNextAction ? getNextAction(row, j) : asNode(cell(row, nextActionKey))
+
+  // アクセサは呼び元の判定そのものなので、rows が同じ参照でも毎回かけ直す（メモ化すると古い判定が残る）
+  const items = (rows ?? [])
+    .map((row, index) => ({
+      row,
+      index,
+      judgement: judgeAttention({
+        dueDate: dueOf(row),
+        lastActivityAt: getLastActivityAt ? getLastActivityAt(row) : asDateInput(cell(row, lastActivityAtKey)),
+        risk: isRisk ? isRisk(row) : Boolean(cell(row, riskKey)),
+        asOf,
+        dueSoonDays,
+        staleDays,
+      }),
+    }))
+    .filter((item) => includeUnflagged || item.judgement)
+    .sort((a, b) => compareAttention(a.judgement, b.judgement) || a.index - b.index)
+
+  if (items.length === 0) {
+    return <Empty title={emptyTitle} description={emptyDescription} className={className} />
+  }
+
+  return (
+    <ul data-slot="attention-list" className={cn("divide-y divide-border", className)} {...rest}>
+      {items.map(({ row, index, judgement }) => {
+        const due = dueOf(row)
+        const body = (
+          <>
+            <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+              {judgement && (
+                <StatusBadge status={judgement.kind} label={mergedLabels[judgement.kind]} colorMap={colorMap} />
+              )}
+              <span className="min-w-0 font-medium">{getTitle ? getTitle(row) : asNode(cell(row, titleKey))}</span>
+              {getMeta && <span className="text-sm tabular-nums text-muted-foreground">{getMeta(row)}</span>}
+              {due ? (
+                <span className="ml-auto text-sm tabular-nums text-muted-foreground">
+                  期日 {formatDate(due)}
+                </span>
+              ) : null}
+            </div>
+            {judgement && (
+              <p className="mt-1 text-sm text-muted-foreground">
+                {getReason ? getReason(row, judgement) : defaultReason(judgement, mergedLabels)}
+              </p>
+            )}
+            {judgement && (getNextAction || nextActionKey) && nextActionOf(row, judgement) ? (
+              <p className="mt-1 text-sm">
+                <span className="text-muted-foreground">次の一手: </span>
+                {nextActionOf(row, judgement)}
+              </p>
+            ) : null}
+          </>
+        )
+        return (
+          <li key={getRowId ? getRowId(row) : String(cell(row, idKey) ?? index)} data-slot="attention-list-row">
+            {onRowClick ? (
+              <button
+                type="button"
+                onClick={() => onRowClick(row)}
+                className="block w-full px-3 py-3 text-left transition-colors hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {body}
+              </button>
+            ) : (
+              <div className="px-3 py-3">{body}</div>
+            )}
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+AttentionList.displayName = "AttentionList"

package/registry/ui/avatar.tsx

@@ -0,0 +1,110 @@
+// Copied by `vantage add ui avatar`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/avatar.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "@squadbase/vantage/ui"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/registry/ui/badge.tsx

@@ -0,0 +1,56 @@
+// Copied by `vantage add ui badge`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/badge.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@squadbase/vantage/ui"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }