• #tax-assistant
  • #クレカ明細
  • #確定ステータス
  • #右パネル再設計
  • #仕訳ルール
  • #Gemini API
開発tax-assistantメモ

クレカ明細の確定ステータス実装と右パネル再設計

tax-assistantのクレカ明細画面を大幅にリニューアルした。確定ステータスの追加からテーブル簡略化、右パネル再設計、UX改善、そしてNG明細からのルール自動提案計画まで、6つのフェーズに分けて一気に進めた記録。

Phase 1: receipt_confirmed ステータス追加

クレカ明細と読取帳票の突き合わせ結果を「確定」できる仕組みを追加した。

DBスキーマ更新

マイグレーション005を追加し、クレカ明細テーブルに receipt_confirmed ステータスを持てるようにした。既存の ok / ng に加えて、ユーザーが突き合わせ結果を承認した状態を表現できるようになった。

バックエンド実装

  • confirm_receipt_match 関数: 明細のステータスを receipt_confirmed に更新する
  • unconfirm_receipt_match 関数: 確定を取り消して元のステータスに戻す
  • 突き合わせ処理の修正: receipt_confirmed ステータスの明細は再突き合わせの対象から除外するようにした（確定済みの結果が上書きされるのを防ぐ）
  • APIエンドポイントを追加して、フロントエンドから確定/取消操作を呼べるようにした

フロントエンド実装

  • 型定義に receipt_confirmed を追加
  • ステータスラベルとCSSクラスの定義
  • 確定ボタンのUI実装

Chrome DevTools MCPを使って動作確認を行い、ステータス遷移が正しく動くことを確認した。

Phase 2: rule_matched ステータス統一

もともと ng ステータス + matched_rules が存在するという特殊ケースがあった。これは「突き合わせはNGだったが仕訳ルールには一致した」という状態で、表示ロジックが煩雑になっていた。

ステータス統一

この特殊ケースを rule_matched という独立したステータスに統一した。

  • バックエンドで ng + matched_rules の状態を rule_matched に変換する処理を追加
  • フロントエンドのフィルタリングロジックを全面修正。タブのフィルタ条件やカウント表示を rule_matched ベースに書き換えた
  • 表示ロジックの整理: ステータスごとに表示する情報（ルール詳細、帳票リンクなど）を明確に分離

ルール確定/取消UI

rule_matched ステータスの明細に対して、ルールの適用結果を確定/取消できるUIを追加した。receipt_confirmed と同様のフローで、確定すると rule_confirmed ステータスに遷移する。

Phase 3: テーブル簡略化 + 右パネル再設計

情報過多だったテーブルと、使いにくかった右パネルを根本から見直した。

テーブルの簡略化

以前のテーブルはカラムが多すぎて一覧性が悪かった。5カラムに絞った。

#日付内容金額結果
行番号利用日利用内容金額ステータスバッジ

詳細情報は右パネルに集約する方針に切り替えた。

右パネルの2分割設計

右パネルを上下2つのエリアに分割した。

上部: 帳票内容エリア

  • 仕訳設定（勘定科目、税区分、補助科目など）
  • リンク情報（突き合わせた帳票やルールへのリンク）
  • 操作ボタン（確定、取消、編集）

下部: 帳票画像エリア

  • 突き合わせた帳票の画像プレビュー

トーン&マナーの統一

読取一覧ページと見た目を揃えた。色味、フォントサイズ、バッジのスタイルなど、既存ページとの一貫性を意識して調整した。

仕訳設定UIの改善

仕訳設定の表示を、仕訳ルール編集画面と同じselect/input形式に変更した。テキスト表示だったものをインタラクティブなフォームに置き換え、その場で編集できるようにした。

結果バッジの具体化

ステータスバッジの表示を具体的にした。

  • ok → 「読取帳票一致」
  • rule_matched → 「仕訳ルール一致」
  • receipt_confirmed → 「読取帳票確定」
  • rule_confirmed → 「仕訳ルール確定」

単なる「OK」「NG」よりも、何と一致/確定したのかが一目でわかるようになった。

Phase 4: UX改善

細かいが使い勝手に直結する改善をまとめて実施した。

3状態UI（確定→未確定→編集）

確定操作まわりのUIを3つの状態で明確に分離した。

  1. 未確定状態: 仕訳設定が編集可能。確定ボタンが表示される
  2. 確定済み状態: 確定バッジが表示され、フォームは編集不可。取消ボタンで未確定に戻せる
  3. 編集モード: 確定済みの明細でも「編集」ボタンを押すとローカルで編集できる（再確定が必要）

キーボードショートカット

Ctrl+Enter で確定操作と次の帳票への移動を同時に実行できるようにした。大量の明細を処理するときに、マウス操作を減らせる。

カラム順の変更

右パネルの仕訳設定エリアのカラム順を見直した。

変更前: 適当な順序 変更後: 金額 → 勘定科目 → 結果 → リンク → 操作

よく確認する情報を上に、操作系を下に配置した。

月またぎナビゲーション

クレカ明細は月単位で表示しているが、前月/翌月への移動ボタンを追加した。これまではURLを手動で書き換える必要があった。

タブ間遷移時のselectedIndex復元

ステータス別のタブ（全件/OK/NG/確定済みなど）を切り替えたとき、選択中の行インデックスがリセットされる問題があった。localStorageにタブごとの選択状態を保存し、タブを戻したときに復元するようにした。

帳票画像表示の修正

帳票画像の表示サイズに問題があった。max-widthとmax-heightを適切に設定し、flexコンテナ内での伝搬問題を修正した。画像が右パネルからはみ出したり、小さすぎたりする問題が解消された。

Phase 5: バグ修正・細かい改善

実装を進める中で見つかったバグや不具合を修正した。

SearchableSelect: フォーカス時の候補表示

SearchableSelectコンポーネントにフォーカスしたとき、全候補が表示されない問題があった。入力が空の場合は全候補を表示するように修正した。

onUnmounted変数名更新漏れ

変数名のリネームを行った際、onUnmountedフック内の参照を更新し忘れていた。このせいでタブを遷移したときにデータが再読み込みされないバグが発生していた。クリーンアップ関数が古い変数を参照していたため、watcherが正しく解除されていなかった。

ルール編集リンクのdocType特定問題

仕訳ルール編集ページへのリンクを生成する際、docType（書類タイプ）の特定ロジックに問題があった。ルールに紐づくdocument_type_idから正しいdocTypeを引けるように修正した。

仕訳ルール追加時のdocument_type_id NULLバグ

新しい仕訳ルールを追加するとき、document_type_idがNULLのまま登録されるバグがあった。ルール追加のAPIリクエスト時に、現在表示中のドキュメントタイプのIDを明示的に渡すように修正した。

借方/貸方の表示順統一

借方と貸方で勘定科目・税区分・補助科目の表示順がバラバラだった。両方とも「勘定科目 → 税区分 → 補助科目」の順に統一した。

Phase 6: NG明細ルール自動提案計画

NG（未一致）の明細に対して、Gemini APIを使ったルール自動提案の仕組みを計画した。

全体フロー

  1. NG明細のサマリーを取得する（ng-summary API）
  2. 利用内容のパターンをGemini APIに送り、仕訳ルールの候補を生成してもらう
  3. ユーザーに提案を表示し、承認/修正/却下を選択してもらう
  4. 承認されたルールをDBに登録する

/suggest-rules コマンド

この一連の処理を /suggest-rules コマンドとして実装する計画を立てた。コマンド実行時にNG明細を分析し、ルール候補を対話的に提示する形式。

バックエンド不足機能の洗い出し

計画の実現に向けて、不足しているバックエンド機能を整理した。

  • ng-summary API: NG明細の利用内容を集約・グルーピングして返すエンドポイント
  • ルール一括登録API: 複数ルールをまとめてDBに登録するエンドポイント
  • Gemini APIとの連携部分の設計

まとめ

今回の作業で、クレカ明細画面が以下のように変わった。

  • ステータス管理: ok/ng の2値から、receipt_confirmed/rule_matched/rule_confirmed を含む多段階のステータス管理に
  • テーブル: 情報過多だった一覧を5カラムに簡略化
  • 右パネル: 帳票内容と帳票画像の2分割で、確認から確定までの動線を整理
  • 操作性: キーボードショートカット、月またぎナビ、タブ状態復元などでスループットを向上
  • 次のステップ: NG明細のルール自動提案で、手動でのルール作成作業を減らす方向へ