+
-
- {job.progress.current_phase}
- {job.progress.errored_orders > 0 && ` (${job.progress.errored_orders} errors)`}
+
+ {formatPhase(job.progress.current_phase, job.provider)}
+ {job.progress.errored_orders > 0 && (
+
+ {job.progress.errored_orders} error{job.progress.errored_orders > 1 ? 's' : ''}
+
+ )}
) : job.result ? (
-
- {job.result.orders_processed} / {job.result.orders_found}
- {job.result.orders_errored > 0 && ` (${job.result.orders_errored} errors)`}
-
+
+
+ {job.result.processed_count} of {job.progress.total_orders} orders
+
+ {job.result.error_count > 0 && (
+
+ {job.result.error_count} error{job.result.error_count > 1 ? 's' : ''}
+
+ )}
+
) : (
-
)}
diff --git a/web/src/app/(app)/transactions/[id]/page.tsx b/web/src/app/(app)/transactions/[id]/page.tsx
new file mode 100644
index 0000000..27c9fa2
--- /dev/null
+++ b/web/src/app/(app)/transactions/[id]/page.tsx
@@ -0,0 +1,321 @@
+import { Badge } from '@/components/badge'
+import { Button } from '@/components/button'
+import { DescriptionDetails, DescriptionList, DescriptionTerm } from '@/components/description-list'
+import { Divider } from '@/components/divider'
+import { Heading, Subheading } from '@/components/heading'
+import { getTransaction, getOrdersByTransactionId } from '@/lib/api'
+import type { TransactionDetail, TransactionSplit, Order } from '@/lib/api'
+import { ChevronLeftIcon, ShoppingCartIcon } from '@heroicons/react/16/solid'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { notFound } from 'next/navigation'
+
+export const metadata: Metadata = {
+ title: 'Transaction Details',
+}
+
+function formatDate(dateString: string): string {
+ const date = new Date(dateString)
+ return date.toLocaleDateString('en-US', {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ })
+}
+
+function formatDateTime(dateString: string): string {
+ const date = new Date(dateString)
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ hour: 'numeric',
+ minute: '2-digit',
+ })
+}
+
+function formatCurrency(amount: number): string {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(Math.abs(amount))
+}
+
+function AmountDisplay({ amount, large }: { amount: number; large?: boolean }) {
+ const isExpense = amount < 0
+ const className = large
+ ? `text-2xl font-bold ${isExpense ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}`
+ : `font-medium ${isExpense ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400'}`
+ return (
+
+ {isExpense ? '-' : '+'}{formatCurrency(amount)}
+
+ )
+}
+
+function SplitRow({ split }: { split: TransactionSplit }) {
+ return (
+
+
+
+ {split.merchant?.name || 'No merchant'}
+
+
+ {split.category?.icon} {split.category?.name || 'Uncategorized'}
+
+ {split.notes && (
+
{split.notes}
+ )}
+
+
+
+ )
+}
+
+interface PageProps {
+ params: Promise<{ id: string }>
+}
+
+export default async function TransactionDetailPage({ params }: PageProps) {
+ const { id } = await params
+
+ let transaction: TransactionDetail
+ let linkedOrders: Order[] = []
+ try {
+ transaction = await getTransaction(id)
+ // Fetch orders that are linked to this transaction
+ const ordersResult = await getOrdersByTransactionId(id)
+ // Filter to only orders that have this exact transaction_id
+ linkedOrders = ordersResult.orders.filter(order => order.transaction_id === id)
+ } catch (error) {
+ if (error instanceof Error && error.message.includes('not found')) {
+ notFound()
+ }
+ return (
+ <>
+
+
+
+ Back to Transactions
+
+
+
Transaction Details
+
+
+ Failed to load transaction details.
+
+
+
+ )
+ }
+
+ return (
+ <>
+
+
+
+ Back to Transactions
+
+
+
+
+
+
{transaction.merchant?.name || transaction.plaid_name || 'Transaction'}
+
{formatDate(transaction.date)}
+
+
+
+
+ {transaction.pending && Pending}
+ {transaction.needs_review && Needs Review}
+ {transaction.has_splits && Split Transaction}
+ {transaction.is_recurring && Recurring}
+
+
+
+
+
+
+
+
+ Transaction Details
+
+ Transaction ID
+ {transaction.id}
+
+ Date
+ {formatDate(transaction.date)}
+
+ Merchant
+ {transaction.merchant?.name || 'Unknown'}
+
+ {transaction.original_merchant && (
+ <>
+ Original Merchant
+ {transaction.original_merchant}
+
+ )}
+
+ Category
+
+ {transaction.category ? (
+
+ {transaction.category.icon} {transaction.category.name}
+ {transaction.category.group && (
+ ({transaction.category.group.name})
+ )}
+
+ ) : (
+ Uncategorized
+ )}
+
+
+ {transaction.original_category && (
+ <>
+ Original Category
+
+ {transaction.original_category.icon} {transaction.original_category.name}
+
+
+ )}
+
+ Account
+
+ {transaction.account?.display_name || 'Unknown'}
+ {transaction.account?.mask && (
+ (...{transaction.account.mask})
+ )}
+
+
+ {transaction.notes && (
+ <>
+ Notes
+ {transaction.notes}
+
+ )}
+
+
+
+
+ Status & Metadata
+
+ Status
+
+ {transaction.pending ? (
+ Pending
+ ) : (
+ Posted
+ )}
+
+
+ Needs Review
+
+ {transaction.needs_review ? (
+ Yes
+ ) : (
+ No
+ )}
+
+
+ {transaction.reviewed_at && (
+ <>
+ Reviewed At
+ {formatDateTime(transaction.reviewed_at)}
+
+ )}
+
+ Hide from Reports
+
+ {transaction.hide_from_reports ? 'Yes' : 'No'}
+
+
+ Recurring
+
+ {transaction.is_recurring ? Yes : 'No'}
+
+
+ Created
+ {formatDateTime(transaction.created_at)}
+
+ Last Updated
+ {formatDateTime(transaction.updated_at)}
+
+
+
+
+ {transaction.tags && transaction.tags.length > 0 && (
+ <>
+
+
Tags
+
+ {transaction.tags.map((tag) => (
+
+ {tag.name}
+
+ ))}
+
+
+ )}
+
+ {transaction.splits && transaction.splits.length > 0 && (
+ <>
+
+
Splits ({transaction.splits.length})
+
+ {transaction.splits.map((split) => (
+
+ ))}
+
+
+ )}
+
+ {linkedOrders.length > 0 && (
+ <>
+
+
+
+ Linked Orders ({linkedOrders.length})
+
+
+ {linkedOrders.map((order) => (
+
+
+
+
+ Order {order.order_id}
+
+
+ {order.provider.charAt(0).toUpperCase() + order.provider.slice(1)} • {new Date(order.order_date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
+
+
+
+
+ {formatCurrency(order.order_total)}
+
+
+ {order.status}
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+ )
+}
diff --git a/web/src/app/(app)/transactions/page.tsx b/web/src/app/(app)/transactions/page.tsx
new file mode 100644
index 0000000..a17b3d7
--- /dev/null
+++ b/web/src/app/(app)/transactions/page.tsx
@@ -0,0 +1,274 @@
+import { Button } from '@/components/button'
+import { Heading } from '@/components/heading'
+import { Input, InputGroup } from '@/components/input'
+import { Select } from '@/components/select'
+import { getTransactions } from '@/lib/api'
+import { ChevronLeftIcon, ChevronRightIcon, MagnifyingGlassIcon } from '@heroicons/react/16/solid'
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { TransactionsTable } from './transactions-table'
+
+export const metadata: Metadata = {
+ title: 'Transactions',
+}
+
+const PAGE_SIZE = 25
+
+// Supported retail providers for syncing
+const SYNCED_MERCHANTS = ['walmart', 'costco', 'amazon']
+
+// Check if a merchant name matches any supported provider
+function isSyncedMerchant(merchantName: string | undefined): boolean {
+ if (!merchantName) return false
+ const lowerName = merchantName.toLowerCase()
+ return SYNCED_MERCHANTS.some(provider => lowerName.includes(provider))
+}
+
+interface PageProps {
+ searchParams: Promise<{
+ page?: string
+ search?: string
+ days?: string
+ pending?: string
+ merchant?: string
+ notes?: string
+ splits?: string
+ }>
+}
+
+export default async function TransactionsPage({ searchParams }: PageProps) {
+ const params = await searchParams
+ const currentPage = Math.max(1, parseInt(params.page || '1', 10))
+ const search = params.search || ''
+ const days = params.days || '30'
+ const pendingOnly = params.pending === 'true'
+ // notes filter: 'with' = has notes, 'without' = no notes, '' = all
+ const notesFilter = params.notes || ''
+ // splits filter: 'with' = has splits, 'without' = no splits, '' = all
+ const splitsFilter = params.splits || ''
+ // Default to 'synced' to show only supported merchants
+ const merchantFilter = params.merchant || 'synced'
+ const daysBack = parseInt(days, 10)
+ const offset = (currentPage - 1) * PAGE_SIZE
+
+ let data
+ try {
+ data = await getTransactions({
+ limit: PAGE_SIZE,
+ offset,
+ search: search || undefined,
+ days_back: daysBack,
+ pending: pendingOnly || undefined,
+ })
+ } catch (error) {
+ return (
+ <>
+
Transactions
+
+
+ Failed to load transactions. Make sure the API server is running and Monarch Money is configured.
+
+
+
+ )
+ }
+
+ const totalPages = Math.ceil(data.total_count / PAGE_SIZE)
+ const hasNextPage = currentPage < totalPages
+ const hasPrevPage = currentPage > 1
+
+ function buildUrl(page: number) {
+ const params = new URLSearchParams()
+ params.set('page', page.toString())
+ if (search) params.set('search', search)
+ if (days) params.set('days', days)
+ if (pendingOnly) params.set('pending', 'true')
+ if (notesFilter) params.set('notes', notesFilter)
+ if (splitsFilter) params.set('splits', splitsFilter)
+ if (merchantFilter !== 'synced') params.set('merchant', merchantFilter)
+ return `/transactions?${params.toString()}`
+ }
+
+ // Filter transactions based on merchant filter
+ let filteredTransactions = data.transactions
+ let filteredCount = data.total_count
+
+ if (merchantFilter === 'synced') {
+ // Filter to only show transactions from supported merchants
+ filteredTransactions = data.transactions.filter(txn =>
+ isSyncedMerchant(txn.merchant?.name) || isSyncedMerchant(txn.plaid_name)
+ )
+ // Note: This is an approximation since we filter client-side
+ filteredCount = filteredTransactions.length
+ } else if (merchantFilter !== 'all') {
+ // Filter by specific merchant
+ filteredTransactions = data.transactions.filter(txn => {
+ const merchantName = txn.merchant?.name?.toLowerCase() || txn.plaid_name?.toLowerCase() || ''
+ return merchantName.includes(merchantFilter.toLowerCase())
+ })
+ filteredCount = filteredTransactions.length
+ }
+
+ // Filter by notes
+ if (notesFilter === 'with') {
+ filteredTransactions = filteredTransactions.filter(txn => txn.notes && txn.notes.trim().length > 0)
+ filteredCount = filteredTransactions.length
+ } else if (notesFilter === 'without') {
+ filteredTransactions = filteredTransactions.filter(txn => !txn.notes || txn.notes.trim().length === 0)
+ filteredCount = filteredTransactions.length
+ }
+
+ // Filter by splits
+ if (splitsFilter === 'with') {
+ filteredTransactions = filteredTransactions.filter(txn => txn.has_splits)
+ filteredCount = filteredTransactions.length
+ } else if (splitsFilter === 'without') {
+ filteredTransactions = filteredTransactions.filter(txn => !txn.has_splits)
+ filteredCount = filteredTransactions.length
+ }
+
+ return (
+ <>
+
+
+
+
+ {merchantFilter === 'synced' || merchantFilter !== 'all' ? (
+ <>Showing {filteredCount} {merchantFilter === 'synced' ? 'synced merchant' : merchantFilter} transactions
+ ) : (
+ <>Showing {offset + 1}–{Math.min(offset + PAGE_SIZE, data.total_count)} of {data.total_count} transactions
+ )}
+
+
+ {hasPrevPage ? (
+
+
+ Previous
+
+ ) : (
+
+
+ Previous
+
+ )}
+
+ Page {currentPage} of {totalPages || 1}
+
+ {hasNextPage ? (
+
+ Next
+
+
+ ) : (
+
+ Next
+
+
+ )}
+
+
+
+
+
+ {filteredTransactions.length === 0 && (
+
+
No transactions found.
+
+ {notesFilter === 'with' ? (
+ 'No transactions with notes found. Try changing the Notes filter.'
+ ) : notesFilter === 'without' ? (
+ 'All transactions have notes. Try changing the Notes filter.'
+ ) : splitsFilter === 'with' ? (
+ 'No split transactions found. Try changing the Splits filter.'
+ ) : splitsFilter === 'without' ? (
+ 'All transactions have splits. Try changing the Splits filter.'
+ ) : merchantFilter === 'synced' ? (
+ 'No transactions from synced merchants (Walmart, Costco, Amazon). Try selecting "All Merchants".'
+ ) : search || pendingOnly ? (
+ 'Try adjusting your filters or search query.'
+ ) : (
+ 'No transactions in the selected time period.'
+ )}
+
+
+ )}
+
+ {filteredTransactions.length > 10 && (
+
+ {hasPrevPage ? (
+
+
+ Previous
+
+ ) : null}
+
+ Page {currentPage} of {totalPages || 1}
+
+ {hasNextPage ? (
+
+ Next
+
+
+ ) : null}
+
+ )}
+
+ )
+}
diff --git a/web/src/app/(app)/transactions/transactions-table.tsx b/web/src/app/(app)/transactions/transactions-table.tsx
new file mode 100644
index 0000000..d6b60c1
--- /dev/null
+++ b/web/src/app/(app)/transactions/transactions-table.tsx
@@ -0,0 +1,139 @@
+'use client'
+
+import { Badge } from '@/components/badge'
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableRow,
+ SortableTableHeader,
+ useTableSort,
+ sortData,
+ type SortConfig,
+} from '@/components/table'
+import type { Transaction } from '@/lib/api'
+import { useMemo } from 'react'
+
+function formatDate(dateString: string): string {
+ const date = new Date(dateString)
+ return date.toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ })
+}
+
+function formatCurrency(amount: number): string {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ }).format(Math.abs(amount))
+}
+
+function PendingBadge({ pending }: { pending: boolean }) {
+ if (!pending) return null
+ return
Pending
+}
+
+function AmountDisplay({ amount }: { amount: number }) {
+ const isExpense = amount < 0
+ return (
+
+ {isExpense ? '-' : '+'}{formatCurrency(amount)}
+
+ )
+}
+
+function CategoryBadge({ category }: { category?: Transaction['category'] }) {
+ if (!category) return
Uncategorized
+ return (
+
+ {category.icon && {category.icon}}
+ {category.name}
+
+ )
+}
+
+type TransactionSortKey = 'date' | 'merchant' | 'category' | 'account' | 'amount'
+
+function getTransactionValue(txn: Transaction, key: string): unknown {
+ switch (key) {
+ case 'date':
+ return new Date(txn.date)
+ case 'merchant':
+ return txn.merchant?.name || txn.plaid_name || ''
+ case 'category':
+ return txn.category?.name || ''
+ case 'account':
+ return txn.account?.display_name || ''
+ case 'amount':
+ return txn.amount
+ default:
+ return null
+ }
+}
+
+interface TransactionsTableProps {
+ transactions: Transaction[]
+}
+
+export function TransactionsTable({ transactions }: TransactionsTableProps) {
+ const { sortConfig, handleSort } = useTableSort
('date', 'desc')
+
+ const sortedTransactions = useMemo(() => {
+ return sortData(transactions, sortConfig as SortConfig, getTransactionValue)
+ }, [transactions, sortConfig])
+
+ const onSort = handleSort as (key: string) => void
+
+ return (
+
+
+
+
+ Date
+
+
+ Merchant
+
+
+ Category
+
+
+ Account
+
+
+ Amount
+
+
+
+
+ {sortedTransactions.map((txn: Transaction) => (
+
+ {formatDate(txn.date)}
+
+ {txn.merchant?.name || txn.plaid_name || 'Unknown'}
+
+
+
+
+
+ {txn.account?.display_name || 'Unknown'}
+
+
+
+
+ {txn.needs_review &&
Review}
+ {txn.has_splits &&
Split}
+
+
+
+
+ )
+}
diff --git a/web/src/components/collapsible-section.tsx b/web/src/components/collapsible-section.tsx
new file mode 100644
index 0000000..010c925
--- /dev/null
+++ b/web/src/components/collapsible-section.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { ChevronDownIcon } from '@heroicons/react/16/solid'
+import clsx from 'clsx'
+import { useState } from 'react'
+
+interface CollapsibleSectionProps {
+ title: React.ReactNode
+ children: React.ReactNode
+ defaultOpen?: boolean
+ itemCount?: number
+ className?: string
+}
+
+export function CollapsibleSection({
+ title,
+ children,
+ defaultOpen = true,
+ itemCount,
+ className,
+}: CollapsibleSectionProps) {
+ const [isOpen, setIsOpen] = useState(defaultOpen)
+
+ return (
+
+
+
+ {children}
+
+
onSort(sortKey)}
+ className={clsx(
+ className,
+ 'border-b border-b-zinc-950/10 px-4 py-2 font-medium first:pl-(--gutter,--spacing(2)) last:pr-(--gutter,--spacing(2)) dark:border-b-white/10',
+ grid && 'border-l border-l-zinc-950/5 first:border-l-0 dark:border-l-white/5',
+ !bleed && 'sm:first:pl-1 sm:last:pr-1',
+ 'cursor-pointer select-none hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors'
+ )}
+ >
+
+ {children}
+
+ {direction === 'asc' ? (
+
+ ) : direction === 'desc' ? (
+
+ ) : (
+
+
+
+
+ )}
+
+
+ |
+ )
+}
diff --git a/web/src/lib/api/client.ts b/web/src/lib/api/client.ts
index 76c811f..2668ac2 100644
--- a/web/src/lib/api/client.ts
+++ b/web/src/lib/api/client.ts
@@ -10,6 +10,11 @@ import {
StartSyncResponse,
SyncJob,
SyncJobListResponse,
+ Ledger,
+ Transaction,
+ TransactionDetail,
+ TransactionListResponse,
+ TransactionFilters,
} from './types'
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'
@@ -136,3 +141,44 @@ export async function cancelSyncJob(jobId: string): Promise {
method: 'DELETE',
})
}
+
+// Ledger API functions
+export async function getOrderLedger(orderId: string): Promise {
+ try {
+ return await fetchJSON(`${API_BASE_URL}/api/orders/${encodeURIComponent(orderId)}/ledger`)
+ } catch (error) {
+ // Return null if ledger not found (404)
+ if (error instanceof Error && error.message.includes('not found')) {
+ return null
+ }
+ throw error
+ }
+}
+
+// Transaction API functions (Monarch Money)
+export async function getTransactions(filters?: TransactionFilters): Promise {
+ const params = new URLSearchParams()
+ if (filters?.search) params.append('search', filters.search)
+ if (filters?.days_back) params.append('days_back', filters.days_back.toString())
+ if (filters?.pending !== undefined) params.append('pending', filters.pending.toString())
+ if (filters?.limit) params.append('limit', filters.limit.toString())
+ if (filters?.offset) params.append('offset', filters.offset.toString())
+
+ const queryString = params.toString()
+ const url = `${API_BASE_URL}/api/transactions${queryString ? `?${queryString}` : ''}`
+
+ return fetchJSON(url)
+}
+
+export async function getTransaction(id: string): Promise {
+ return fetchJSON(`${API_BASE_URL}/api/transactions/${encodeURIComponent(id)}`)
+}
+
+// Get orders linked to a specific transaction ID
+export async function getOrdersByTransactionId(transactionId: string): Promise {
+ // Use search to find orders with this transaction ID
+ const params = new URLSearchParams()
+ params.append('search', transactionId)
+ params.append('limit', '10')
+ return fetchJSON(`${API_BASE_URL}/api/orders?${params.toString()}`)
+}
diff --git a/web/src/lib/api/types.ts b/web/src/lib/api/types.ts
index 4c26ff3..ddfb93a 100644
--- a/web/src/lib/api/types.ts
+++ b/web/src/lib/api/types.ts
@@ -119,11 +119,9 @@ export interface SyncJobProgress {
}
export interface SyncJobResult {
- orders_found: number
- orders_processed: number
- orders_skipped: number
- orders_errored: number
- dry_run: boolean
+ processed_count: number
+ skipped_count: number
+ error_count: number
}
export interface SyncJob {
@@ -143,3 +141,130 @@ export interface SyncJobListResponse {
jobs: SyncJob[]
count: number
}
+
+// Ledger Types
+export interface LedgerCharge {
+ id: number
+ order_ledger_id: number
+ order_id: string
+ sync_run_id?: number
+ charge_sequence: number
+ charge_amount: number
+ charge_type: string
+ payment_method: string
+ card_type?: string
+ card_last_four?: string
+ charged_at?: string
+ monarch_transaction_id?: string
+ is_matched: boolean
+ match_confidence?: number
+ matched_at?: string
+ split_count?: number
+}
+
+export interface Ledger {
+ id: number
+ order_id: string
+ sync_run_id?: number
+ provider: string
+ fetched_at: string
+ ledger_state: string
+ ledger_version: number
+ total_charged: number
+ charge_count: number
+ payment_method_types: string
+ has_refunds: boolean
+ is_valid: boolean
+ validation_notes?: string
+ charges?: LedgerCharge[]
+}
+
+export interface LedgerListResponse {
+ ledgers: Ledger[]
+ total_count: number
+ limit: number
+ offset: number
+}
+
+// Transaction Types (from Monarch Money)
+export interface TransactionMerchant {
+ id: string
+ name: string
+}
+
+export interface TransactionAccount {
+ id: string
+ display_name: string
+ mask?: string
+ logo_url?: string
+}
+
+export interface CategoryGroup {
+ id: string
+ name: string
+ type: string
+}
+
+export interface TransactionCategory {
+ id: string
+ name: string
+ icon?: string
+ is_system_category: boolean
+ group?: CategoryGroup
+}
+
+export interface TransactionTag {
+ id: string
+ name: string
+ color?: string
+}
+
+export interface Transaction {
+ id: string
+ date: string
+ amount: number
+ pending: boolean
+ hide_from_reports: boolean
+ plaid_name?: string
+ merchant?: TransactionMerchant
+ notes?: string
+ has_splits: boolean
+ is_recurring: boolean
+ needs_review: boolean
+ reviewed_at?: string
+ created_at: string
+ updated_at: string
+ account?: TransactionAccount
+ category?: TransactionCategory
+ tags?: TransactionTag[]
+}
+
+export interface TransactionSplit {
+ id: string
+ amount: number
+ merchant?: TransactionMerchant
+ notes?: string
+ category?: TransactionCategory
+}
+
+export interface TransactionDetail extends Transaction {
+ original_merchant?: string
+ original_category?: TransactionCategory
+ splits?: TransactionSplit[]
+}
+
+export interface TransactionListResponse {
+ transactions: Transaction[]
+ total_count: number
+ limit: number
+ offset: number
+ has_more: boolean
+}
+
+export interface TransactionFilters {
+ search?: string
+ days_back?: number
+ pending?: boolean
+ limit?: number
+ offset?: number
+}