有利子負債表示改善の実装計画

現状

現在の流動負債の表示順序

1. 買掛金
2. 短期借入債務（短期借入金 + 短期リースを集約）
3. 前受収益(流動)
4. その他流動負債

現在の固定負債の表示順序

1. 長期借入債務（長期借入金 + 長期リースを集約）
2. 長期前受収益
3. その他固定負債

要望

1. 並び順の変更: 流動負債内で短期借入債務を一番下に移動
2. 有利子負債としての統合表示: 短期借入債務と長期借入債務を視覚的に「有利子負債」として連続表示
3. マウスオーバー時の内訳表示: 純資産の項目と同様に、ホバー時に短期/長期の内訳を表示

実装方針

アプローチ: セクション境界での連続表示

現在のBS構造（流動負債セクション → 固定負債セクション → 純資産セクション）を維持しつつ、 以下の方法で「有利子負債」としてまとまって見えるようにする。

1. 並び順の変更

流動負債 (transformCurrentLiabilities):

1. 買掛金
2. 前受収益(流動)
3. その他流動負債
4. 短期借入債務（★一番下に移動）

固定負債 (transformFixedLiabilities):

1. 長期借入債務（★一番上のまま）
2. 長期前受収益
3. その他固定負債

これにより、流動負債の最下部と固定負債の最上部が隣接し、 視覚的に「有利子負債」がまとまって見える。

2. 視覚的な統合表示（CSS）

• 短期借入債務と長期借入債務に同系色の背景色を適用
• セクション間の境界線を調整して連続性を強調
• ラベルに「有利子負債」の括り表示を追加（オプション）

3. ツールチップの強化

既存の breakdown 機能を活用:

• 短期借入債務: 内訳（短期借入金、短期リース）を表示
• 長期借入債務: 内訳（長期借入金、長期リース）を表示
• 両方のホバー時に「有利子負債合計」も表示

修正対象ファイル

具体的な変更内容

1. transformCurrentLiabilities 関数の修正

// 表示順序: 買掛金 → 前受収益(流動) → その他流動負債 → 短期借入債務
const transformCurrentLiabilities = (items: BalanceSheetItem[]): BalanceSheetItem[] => {
  // ... 既存のパース処理 ...

  // 決められた順序で結果を構築
  const result: BalanceSheetItem[] = []

  // 1. 買掛金
  if (accountsPayable) result.push(accountsPayable)

  // 2. 前受収益(流動) ← 順序変更
  if (unearnedRevenue) result.push(unearnedRevenue)

  // 3. その他の未分類項目
  for (const item of otherItems) result.push(item)

  // 4. その他流動負債
  if (otherLiabilities) result.push(otherLiabilities)

  // 5. 短期借入債務（最後 = 固定負債セクションとの境界に隣接）
  if (debtItems.length > 0) {
    result.push({
      label: '短期借入債務',
      value: debtTotal,
      breakdown: debtItems,
      color: '#ffcc80'  // 有利子負債の共通色
    })
  }

  return result
}

2. transformFixedLiabilities 関数の修正（色指定追加）

// 長期借入債務に有利子負債の共通色を適用
if (debtItems.length > 0) {
  result.push({
    label: '長期借入債務',
    value: debtTotal,
    breakdown: debtItems,
    color: '#ffb74d'  // 有利子負債の共通色（少し濃い）
  })
}

3. 「有利子負債」ラベル表示の追加（オプション）

右側のラベル列に「有利子負債」括りを追加する場合、テンプレートの修正が必要。 ※ 複雑になるため、まずは並び順と色の統一のみで対応し、効果を確認後に検討。

テスト確認項目

1. 流動負債内で短期借入債務が最下部に表示されること
2. 固定負債内で長期借入債務が最上部に表示されること
3. 短期借入債務と長期借入債務が視覚的に連続して見えること
4. マウスオーバーで内訳（短期借入金、短期リース等）が表示されること
5. 既存の貸借一致検証が引き続き機能すること

実装ステップ

1. transformCurrentLiabilities の順序変更
2. 短期借入債務・長期借入債務に共通色を適用
3. 開発サーバーで動作確認
4. 複数企業（NVDA, AAPL, MSFT等）で表示確認

備考

• 「有利子負債」としての括り表示（右側ラベル列）は、現在のflexbox構造では 流動負債・固定負債をまたいでの表示が難しいため、将来的な拡張として検討
• まずは並び順と色の統一で視覚的な統合を実現し、ユーザーフィードバックを得る