有効期限ExpiryBadgeExperimental
The date-vs-deadline currency indicator: classifies an expiry date against today into 有効 / 期限間近 / 失効 / 未登録 and shows a colour-safe state chip (icon + label, never colour alone), the date, and a 残N日 / N日超過 readout. The date-domain sibling of Meter (value vs a capacity) and ReferenceValue (value vs a numeric range) — this is value vs a DEADLINE. For licence / 資格 / 適性診断 / 健診 / 車検 / 保険 / 認証 / 点検 currency across crew, asset and compliance consoles. Pairs with the pure classifyExpiry() helper (value → {state, days}), mirroring how ReferenceValue pairs with flagValue(). RSC-safe; pass today in for SSR determinism (defaults to new Date()).
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | string | number | Date | null | - | 有効期限（ISO文字列/タイムスタンプ/Date）。null/省略 → 未登録。 |
| today | string | number | Date | new Date() | 判定の基準日。SSR決定性のため渡すことを推奨（Gantt の today と同様）。 |
| warnWithinDays | number | 30 | この日数以内を「期限間近」とする。 |
| showDate | boolean | true | 状態チップの横に日付を表示。 |
| hideRemaining | boolean | false | 残N日 / N日超過 の表示を隠す。 |
| formatDate | (d: Date) => string | - | 日付の整形。既定は YYYY/MM/DD。 |
| labels | Partial<Record<ExpiryState, ReactNode>> | - | 状態ラベルの上書き（有効/期限間近/失効/未登録）。 |
| classifyExpiry() | (value, { today?, warnWithinDays? }) => { state, days } | - | 純関数の分類器（flagValue の日付版）。state＝valid/expiring/expired/missing、days＝期限までの日数。 |
Usage
import { ExpiryBadge, classifyExpiry } from "@gunjo/ui"
// component — colour-safe state chip + date + 残N日/N日超過
<ExpiryBadge value="2026-07-20" today={today} warnWithinDays={60} />
// pure helper (mirrors ReferenceValue's flagValue) — drive your own UI / sort / counts
const { state, days } = classifyExpiry("2026-07-20", { today, warnWithinDays: 60 })
// → { state: "expiring", days: 22 } // "valid" | "expiring" | "expired" | "missing"