feat(close): settle changed transactions in the Closing Book

src/app/(app)/ledger/close/__tests__/PeriodClosePanel.test.tsx

@@ -312,6 +312,39 @@ describe('PeriodClosePanel — blockers name what is holding the close', () => {
     expect(screen.queryByText('reconciling_items')).not.toBeInTheDocument()
   })
 
+  it('leads from the reconciling-item blocker to the changes themselves', async () => {
+    mockGetFiscalCalendar.mockResolvedValue({
+      ...CALENDAR,
+      closeableNow: false,
+      blockers: ['reconciling_items'],
+      reconcilingItemCount: 3,
+    })
+    const onReviewChanges = vi.fn()
+    render(<PeriodClosePanel graphId="kg1" onReviewChanges={onReviewChanges} />)
+
+    const link = await screen.findByRole('button', {
+      name: 'Review changed transactions',
+    })
+    expect(link.parentElement).toHaveTextContent('3 holding this close.')
+    fireEvent.click(link)
+    expect(onReviewChanges).toHaveBeenCalledTimes(1)
+  })
+
+  it('offers no review link where nothing can open it', async () => {
+    mockGetFiscalCalendar.mockResolvedValue({
+      ...CALENDAR,
+      closeableNow: false,
+      blockers: ['reconciling_items'],
+      reconcilingItemCount: 3,
+    })
+    render(<PeriodClosePanel graphId="kg1" />)
+
+    await screen.findByText(/edited in QuickBooks after they were synced/)
+    expect(
+      screen.queryByRole('button', { name: 'Review changed transactions' })
+    ).not.toBeInTheDocument()
+  })
+
   it('offers Reopen only on the latest closed period', async () => {
     mockGetFiscalCalendar.mockResolvedValue(CALENDAR_AFTER)
     render(<PeriodClosePanel graphId="kg1" />)

src/app/(app)/ledger/close/__tests__/StructureSidebar.test.tsx

@@ -234,6 +234,52 @@ describe('StructureSidebar', () => {
     })
   })
 
+  it('selects and highlights the changed transactions entry', () => {
+    const onSelect = vi.fn()
+    const categories: ClosingBookCategory[] = [
+      {
+        label: 'Reconciliations',
+        items: [
+          {
+            id: 'reconciliations',
+            name: 'Reconciliations',
+            itemType: 'reconciliations',
+            blockType: null,
+            reportId: null,
+            status: null,
+          },
+          {
+            id: 'changed_transactions',
+            name: 'Changed transactions',
+            itemType: 'changed_transactions',
+            blockType: null,
+            reportId: null,
+            status: null,
+          },
+        ],
+      },
+    ]
+    const selected: SelectedItem = { type: 'changed_transactions' }
+    render(
+      <StructureSidebar
+        categories={categories}
+        selectedItem={selected}
+        onSelect={onSelect}
+        isLoading={false}
+      />
+    )
+
+    const entry = screen.getByText('Changed transactions').closest('button')
+    expect(entry?.className).toContain('font-medium')
+    // The worklist beside it is a different selection.
+    expect(
+      screen.getByRole('button', { name: 'Reconciliations' }).className
+    ).not.toContain('font-medium')
+
+    fireEvent.click(entry!)
+    expect(onSelect).toHaveBeenCalledWith({ type: 'changed_transactions' })
+  })
+
   it('collapses and expands the sidebar', () => {
     render(
       <StructureSidebar

src/app/(app)/ledger/close/__tests__/content.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { describe, expect, it, vi } from 'vitest'
 
 const mockGetClosingBookStructures = vi.fn()
@@ -67,6 +67,9 @@ vi.mock('../components/StructureSidebar', () => ({
       {categories?.map((c: any) => (
         <div key={c.label} data-testid={`category-${c.label}`}>
           {c.label}: {c.items.length} items
+          {c.items.map((item: any) => (
+            <span key={item.id} data-testid={`item-${item.itemType}`} />
+          ))}
         </div>
       ))}
       {selectedItem && <div data-testid="selected">{selectedItem.type}</div>}
@@ -121,7 +124,17 @@ vi.mock('../components/AccountRollupsPanel', () => ({
 }))
 
 vi.mock('../components/PeriodClosePanel', () => ({
-  default: () => <div data-testid="period-close-panel" />,
+  default: ({ onReviewChanges }: any) => (
+    <div data-testid="period-close-panel">
+      <button onClick={onReviewChanges}>review changes</button>
+    </div>
+  ),
+}))
+
+vi.mock('../components/ChangedTransactionsPanel', () => ({
+  default: ({ graphId }: any) => (
+    <div data-testid="changed-transactions-panel">{graphId}</div>
+  ),
 }))
 
 vi.mock('../components/TrialBalancePanel', () => ({
@@ -340,6 +353,94 @@ describe('CloseContent', () => {
     expect(screen.queryByTestId('view-mode-toggle')).not.toBeInTheDocument()
   })
 
+  it('lists the changed transactions beside the reconciliations worklist', async () => {
+    const graph = makeGraph('kg_test')
+    mockUseGraphContext.mockReturnValue(makeGraphState([graph], 'kg_test'))
+    mockGetClosingBookStructures.mockResolvedValue({
+      categories: [
+        {
+          label: 'Period Close',
+          items: [
+            { id: 'pc', name: 'Current Period', itemType: 'period_close' },
+          ],
+        },
+        {
+          label: 'Reconciliations',
+          items: [
+            {
+              id: 'reconciliations',
+              name: 'Reconciliations',
+              itemType: 'reconciliations',
+            },
+          ],
+        },
+      ],
+      has_data: true,
+    })
+    mockGetEntity.mockResolvedValue(null)
+
+    render(<CloseContent />)
+
+    expect(
+      await screen.findByText('Reconciliations: 2 items')
+    ).toBeInTheDocument()
+    expect(screen.getByTestId('item-changed_transactions')).toBeInTheDocument()
+    // Only that category gains the entry.
+    expect(screen.getByText('Period Close: 1 items')).toBeInTheDocument()
+  })
+
+  it('adds no changed transactions entry before anything is posted', async () => {
+    const graph = makeGraph('kg_test')
+    mockUseGraphContext.mockReturnValue(makeGraphState([graph], 'kg_test'))
+    mockGetClosingBookStructures.mockResolvedValue({
+      categories: [
+        {
+          label: 'Period Close',
+          items: [
+            { id: 'pc', name: 'Current Period', itemType: 'period_close' },
+          ],
+        },
+      ],
+      has_data: false,
+    })
+    mockGetEntity.mockResolvedValue(null)
+
+    render(<CloseContent />)
+
+    await screen.findByTestId('period-close-panel')
+    expect(
+      screen.queryByTestId('item-changed_transactions')
+    ).not.toBeInTheDocument()
+  })
+
+  it('opens the changed transactions from the close hub', async () => {
+    const graph = makeGraph('kg_test')
+    mockUseGraphContext.mockReturnValue(makeGraphState([graph], 'kg_test'))
+    mockGetClosingBookStructures.mockResolvedValue({
+      categories: [
+        {
+          label: 'Period Close',
+          items: [
+            { id: 'pc', name: 'Current Period', itemType: 'period_close' },
+          ],
+        },
+      ],
+      has_data: true,
+    })
+    mockGetEntity.mockResolvedValue(null)
+
+    render(<CloseContent />)
+    fireEvent.click(await screen.findByText('review changes'))
+
+    expect(screen.getByTestId('changed-transactions-panel')).toHaveTextContent(
+      'kg_test'
+    )
+    expect(screen.getByTestId('selected')).toHaveTextContent(
+      'changed_transactions'
+    )
+    expect(screen.queryByTestId('period-close-panel')).not.toBeInTheDocument()
+  })
+
   it('calls API with correct graph ID', async () => {
     const graph = makeGraph('kg_mygraph123')
     mockUseGraphContext.mockReturnValue(