Reconcile table

"use client"

import * as React from "react"
import { ReconcileTable, type ReconcileAction, type ReconcileRow } from "@/components/candor/reconcile-table"

const fields = [
  { id: "supplier", label: "Supplier" },
  { id: "amount", label: "Amount" },
  { id: "due", label: "Due" },
]

const found: ReconcileRow[] = [
  { id: "inv-2041", label: "INV-2041", left: { supplier: "Northwind", amount: "1,200.00", due: "1 Dec 2026" }, right: { supplier: "Northwind", amount: "1,200.00", due: "1 Dec 2026" } },
  { id: "inv-2042", label: "INV-2042", left: { supplier: "Fabrikam", amount: "860.00", due: "3 Dec 2026" }, right: { supplier: "Fabrikam", amount: "680.00", due: "3 Dec 2026" } },
  { id: "inv-2043", label: "INV-2043", left: { supplier: "Tailspin", amount: "95.50", due: "5 Dec 2026" }, right: { supplier: "Tailspin Toys", amount: "95.50", due: null } },
  { id: "inv-2044", label: "INV-2044", left: { supplier: "Contoso", amount: "2,310.00", due: "8 Dec 2026" } },
  { id: "led-7781", label: "LED-7781", right: { supplier: "Litware", amount: "140.00", due: "30 Nov 2026" } },
]

const actions: ReconcileAction[] = [
  { id: "take-left", label: "Take invoice", for: ["conflict"] },
  { id: "take-right", label: "Take ledger", for: ["conflict"] },
  { id: "post", label: "Post to ledger", for: ["left-only"] },
  { id: "skip", label: "Skip" },
]

export default function Example() {
  const [rows, setRows] = React.useState(found)
  const set = (id: string, patch: Partial<ReconcileRow>) => setRows((all) => all.map((r) => (r.id === id ? ({ ...r, ...patch } as ReconcileRow) : r)))
  return (
    <ReconcileTable
      className="max-w-3xl"
      title="November invoices against the ledger"
      sources={{ left: "Invoice", right: "Ledger" }}
      fields={fields}
      rows={rows}
      actions={actions}
      onResolve={(row, action) => {
        // Your server records the choice; the row reads as resolved once it has. An Edit action would open your own form first.
        set(row.id, { cannotResolve: "Saving your choice…" })
        window.setTimeout(() => set(row.id, { cannotResolve: undefined, resolution: action }), 800)
      }}
    />
  )
}