feat(inventory+history): align Monthly Cost/Savings columns across both tables

[cristim]

Summary

QA Inventory 1.1: Active Commitments and Purchase History showed different subsets of per-commitment numeric columns. Users had to switch tabs to see both Monthly Cost and Monthly Savings for the same commitment.

Fix (frontend-only)

Both fields were already present in the API responses (estimated_savings on InventoryCommitment, monthly_cost on HistoryPurchase). This was a pure rendering gap.

• Active Commitments: added Monthly savings header + estimated_savings cell.
• Purchase History: added Monthly Cost header + null-guarded monthly_cost cell (mirrors the existing Approval Queue pattern).

Files changed

• frontend/src/inventory.ts
• frontend/src/history.ts
• frontend/src/__tests__/inventory.test.ts
• frontend/src/__tests__/history.test.ts

Test plan

• Header presence asserted in both tables.
• Active Commitments: td:nth-child(10) cell value assertion on new column.
• Purchase History: monthly_cost cell value vs muted dash when absent.
• All 37 targeted tests pass.
• Manual: open Active Commitments + Purchase History, confirm both columns now visible side-by-side.

Closes #788.

Summary by CodeRabbit

• New Features

  • History table now displays a "Monthly Cost" column with proper currency formatting for each purchase
  • Active commitments table now includes a "Monthly Savings" column showing estimated savings values

• Tests

  • Enhanced test coverage for history and active commitments table columns and data formatting

[coderabbitai]

📝 Walkthrough

Walkthrough

History and Active Commitments tables are updated to show previously unavailable columns: Monthly Cost is added to purchase history, and Monthly Savings is added to active commitments. Implementation changes add cell rendering logic, update table headers and column counts, and include corresponding test coverage for column presence and cell formatting.

Changes

Table Column Enhancements for Commitment Display

Layer / File(s)	Summary
History table Monthly Cost column frontend/src/history.ts, frontend/src/__tests__/history.test.ts	Monthly Cost column inserted between Upfront Cost and Monthly Savings in the history table. Cell renders formatted currency when monthly_cost is present, or a muted dash when absent. Tests verify column presence in HTML and cell formatting behavior.
Active Commitments table Monthly Savings column frontend/src/inventory.ts, frontend/src/__tests__/inventory.test.ts	Monthly Savings column added to active commitments table; column count increased from 10 to 11 and header labels updated. Each rendered row includes formatted estimated_savings cell. Tests confirm updated table schema and that the savings column renders the expected formatted value.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• LeanerCloud/CUDly#734: Both PRs touch the same monthly_cost plumbing; this PR adds the History UI Monthly Cost column with formatted value vs muted "-" handling, while the retrieved PR fixes the backend Approval Queue handler to populate MonthlyCost so the UI no longer falls back to "-".

Poem

🐰 Two tables stand side by side,
Once showing halves with data divide—
Now Monthly Cost and Savings gleam,
Complete, aligned, a unified dream!
No more the switching dance around,
All columns now and glory found!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature: aligning Monthly Cost/Savings columns across both the inventory and history tables.
Linked Issues check	✅ Passed	The PR fully meets issue #788 requirements: Monthly Savings added to Active Commitments and Monthly Cost added to Purchase History, both with proper cell rendering and test coverage.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #788: modified two table render functions and updated corresponding tests; no unrelated modifications detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/788-inventory-history-columns

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cristim]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[cristim]

@coderabbitai full review

[coderabbitai]

Rate Limit Exceeded

@cristim have exceeded the limit for the number of chat messages per hour. Please wait 54 minutes and 18 seconds before sending another message.

[cristim]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

frontend/src/history.ts (2)

217-217: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update skeleton column count from 11 to 12.

The history list table now has 12 columns after adding "Monthly Cost" between "Upfront Cost" and "Monthly Savings" (line 661), but the skeleton comment still references 11.

📝 Proposed fix

-  // rows matches the typical first-page row count so the skeleton
-  // doesn't shrink dramatically when real data arrives. Column count
-  // (11) mirrors the rendered table headers in renderHistoryList:
+  // rows matches the typical first-page row count so the skeleton
+  // doesn't shrink dramatically when real data arrives. Column count
+  // (12) mirrors the rendered table headers in renderHistoryList:
   // Status / Date / Provider / Service / Type / Region / Count /
-  // Term / Upfront Cost / Monthly Savings / Plan.
+  // Term / Upfront Cost / Monthly Cost / Monthly Savings / Plan.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/history.ts` at line 217, The skeleton rows are being rendered
with the wrong column count; update the invocation of showSkeletonRows to use 12
columns instead of 11 so the placeholder matches the updated table
structure—change the call where listEl is checked (if (listEl)
showSkeletonRows(listEl, 8, 11)) to pass 12 as the column count argument (i.e.,
showSkeletonRows(listEl, 8, 12)) so the skeleton aligns with the new "Monthly
Cost" column.

---

220-220: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update approval queue skeleton column count from 8 to 12.

The approval queue table renders 12 columns (Date / Account / Provider / Service / Count / Term / Payment / Monthly Cost / Upfront Cost / Monthly Savings / Created by / Actions per lines 948–959), but the skeleton comment claims 8 columns.

📝 Proposed fix

-  // Pending-approval queue card (issue `#340` sub-task): 3 rows x 8
-  // cols matches the queue table shape (Date / Provider / Service /
-  // Count / Upfront / Monthly Savings / Created by / Actions). The
+  // Pending-approval queue card (issue `#340` sub-task): 3 rows x 12
+  // cols matches the queue table shape (Date / Account / Provider / Service /
+  // Count / Term / Payment / Monthly Cost / Upfront Cost / Monthly Savings / Created by / Actions). The
   // queue is typically much shorter than the full history list, so

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/history.ts` at line 220, The skeleton comment that currently
says "8 columns" is out of sync with the actual approval queue table which
renders 12 columns (Date / Account / Provider / Service / Count / Term / Payment
/ Monthly Cost / Upfront Cost / Monthly Savings / Created by / Actions); update
the comment in frontend/src/history.ts (the approval queue skeleton comment) to
state "12 columns" so it matches the rendered columns referenced around lines
948–959.

frontend/src/inventory.ts (1)

86-89: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Update skeleton column count from 10 to 11.

The skeleton comment still references "10 cols" but ACTIVE_COMMITMENTS_COLS is now 11 (line 72) after adding the "Monthly savings" column.

📝 Proposed fix

-  // 5 rows × 10 cols matches the rendered table shape (see
+  // 5 rows × 11 cols matches the rendered table shape (see
   // renderActiveCommitmentsTable). The renderer wipes the container's

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/inventory.ts` around lines 86 - 89, Update the inline comment
that says "5 rows × 10 cols" to reflect the new column count (change "10 cols"
to "11 cols") so it matches the actual value of ACTIVE_COMMITMENTS_COLS; keep
the call to showSkeletonRows(container, 5, ACTIVE_COMMITMENTS_COLS) and the
surrounding note about renderActiveCommitmentsTable unchanged.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@frontend/src/history.ts`:
- Line 217: The skeleton rows are being rendered with the wrong column count;
update the invocation of showSkeletonRows to use 12 columns instead of 11 so the
placeholder matches the updated table structure—change the call where listEl is
checked (if (listEl) showSkeletonRows(listEl, 8, 11)) to pass 12 as the column
count argument (i.e., showSkeletonRows(listEl, 8, 12)) so the skeleton aligns
with the new "Monthly Cost" column.
- Line 220: The skeleton comment that currently says "8 columns" is out of sync
with the actual approval queue table which renders 12 columns (Date / Account /
Provider / Service / Count / Term / Payment / Monthly Cost / Upfront Cost /
Monthly Savings / Created by / Actions); update the comment in
frontend/src/history.ts (the approval queue skeleton comment) to state "12
columns" so it matches the rendered columns referenced around lines 948–959.

In `@frontend/src/inventory.ts`:
- Around line 86-89: Update the inline comment that says "5 rows × 10 cols" to
reflect the new column count (change "10 cols" to "11 cols") so it matches the
actual value of ACTIVE_COMMITMENTS_COLS; keep the call to
showSkeletonRows(container, 5, ACTIVE_COMMITMENTS_COLS) and the surrounding note
about renderActiveCommitmentsTable unchanged.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4ec06756-3ae2-48a6-9438-80333b1d1796

📥 Commits

Reviewing files that changed from the base of the PR and between 4956d66 and b0c4817.

📒 Files selected for processing (4)

• frontend/src/__tests__/history.test.ts
• frontend/src/__tests__/inventory.test.ts
• frontend/src/history.ts
• frontend/src/inventory.ts