Name: Layro Pro
Price: 149 USD

vertically-erpsrcpagesinvoices.tsx

4 changes from the agent in this file. Nothing is written until you accept.

1import { useInvoices } from "../lib/data";
Import the date helpers for the new column · Claude Sonnet 4.5
2−import { formatMoney } from "../lib/format";
+Added: import { formatDate, formatMoney, isOverdue } from "../lib/format";
3import { StatusPill } from "../components/status-pill";
4 
5export function Invoices() {
6  const { invoices, loading } = useInvoices();
7  if (loading) return <p className="p-6 text-sm">Loading invoices…</p>;
8 
9  return (
10    <table className="w-full text-sm">
11      <thead>
12        <tr>
13          <th>Invoice</th>
14          <th>Client</th>
15          <th className="text-right">Amount</th>
Add a Due column header · Claude Sonnet 4.5
+Added:           <th>Due</th>
16          <th>Status</th>
17        </tr>
18      </thead>
19      <tbody>
20        {invoices.map((inv) => (
Tint open invoices that are past their due date · Claude Sonnet 4.5
21−          <tr key={inv.id}>
+Added:           <tr key={inv.id} className={isOverdue(inv) ? "bg-red-50" : undefined}>
22            <td>{inv.number}</td>
23            <td>{inv.client}</td>
24            <td className="text-right">{formatMoney(inv.amount)}</td>
Show the due date · Claude Sonnet 4.5
+Added:             <td>{formatDate(inv.dueDate)}</td>
25            <td><StatusPill status={inv.status} /></td>
26          </tr>
27        ))}
28      </tbody>
29    </table>
30  );
31}

AgentDue date column

Add a due date column to the invoices table, and make overdue invoices stand out.
I added a Due column and tinted open invoices that are past their due date. Review the 4 changes in invoices.tsx; nothing is written until you accept them.

invoices.tsxOpen file

Back to docs

vertically-erpsrcpagesinvoices.tsx

4 changes from the agent in this file. Nothing is written until you accept.

1import { useInvoices } from "../lib/data";
Import the date helpers for the new column · Claude Sonnet 4.5
2−import { formatMoney } from "../lib/format";
+Added: import { formatDate, formatMoney, isOverdue } from "../lib/format";
3import { StatusPill } from "../components/status-pill";
4 
5export function Invoices() {
6  const { invoices, loading } = useInvoices();
7  if (loading) return <p className="p-6 text-sm">Loading invoices…</p>;
8 
9  return (
10    <table className="w-full text-sm">
11      <thead>
12        <tr>
13          <th>Invoice</th>
14          <th>Client</th>
15          <th className="text-right">Amount</th>
Add a Due column header · Claude Sonnet 4.5
+Added:           <th>Due</th>
16          <th>Status</th>
17        </tr>
18      </thead>
19      <tbody>
20        {invoices.map((inv) => (
Tint open invoices that are past their due date · Claude Sonnet 4.5
21−          <tr key={inv.id}>
+Added:           <tr key={inv.id} className={isOverdue(inv) ? "bg-red-50" : undefined}>
22            <td>{inv.number}</td>
23            <td>{inv.client}</td>
24            <td className="text-right">{formatMoney(inv.amount)}</td>
Show the due date · Claude Sonnet 4.5
+Added:             <td>{formatDate(inv.dueDate)}</td>
25            <td><StatusPill status={inv.status} /></td>
26          </tr>
27        ))}
28      </tbody>
29    </table>
30  );
31}