期限超過バッジ

用途

期限を過ぎたタスクを赤バッジで強調表示。経過日数も表示。

特徴

• 経過日数自動計算
• 色強調
• ツールチップ

実コード（SCALE Base より自動抽出）

components/tasks/OverdueBadge.tsx の中身そのもの。コピペ即可。

"use client";

import { daysDiff } from "@/lib/tasks-api";

export default function OverdueBadge({ dueDate, status }: { dueDate: string; status?: string }) {
  if (!dueDate || status === "完了") return null;

  // daysDiff returns positive when overdue (today > dueDate), 0 = today, negative = future
  const diff = daysDiff(dueDate);

  if (diff > 0) {
    return (
      <span className="text-[10px] px-1.5 py-0.5 rounded bg-red-500/20 text-red-400 border border-red-500/25 font-medium whitespace-nowrap">
        {diff}日超過
      </span>
    );
  }

  if (diff === 0) {
    return (
      <span className="text-[10px] px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400 border border-orange-500/25 font-medium whitespace-nowrap">
        本日
      </span>
    );
  }

  const remaining = Math.abs(diff);

  if (remaining <= 2) {
    return (
      <span className="text-[10px] px-1.5 py-0.5 rounded bg-yellow-500/15 text-yellow-400 border border-yellow-500/25 font-medium whitespace-nowrap">
        あと{remaining}日
      </span>
    );
  }

  return (
    <span className="text-[10px] px-1.5 py-0.5 rounded bg-[#222]/60 text-[#888] font-medium whitespace-nowrap">
      あと{remaining}日
    </span>
  );
}

ソースファイルのパス

/Users/oogushiyuuki/Library/CloudStorage/GoogleDrive-y-ogushi@scale-group.co.jp/マイドライブ/AI/scale-base/components/tasks/OverdueBadge.tsx

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加