AI form fill

"use client"
import * as React from "react"import { z } from "zod"
import { AiFormFill, AiFormFillBar, AiFormFillSuggestion, type AiFormFillResult } from "@/components/ui/ai-form-fill"import { Form, FormField, FormSubmit, useAppForm } from "@/components/ui/form"import { Input } from "@/components/ui/input"import { NumberInput } from "@/components/ui/number-input"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"import { Textarea } from "@/components/ui/textarea"
const categories = [  { value: "travel", label: "Travel" },  { value: "meals", label: "Meals with clients" },  { value: "software", label: "Software" },  { value: "office", label: "Office" },]
const schema = z.object({  merchant: z.string().trim().min(1, "Who was paid?"),  amount: z.number({ error: "Enter the total." }).positive("Enter the total."),  date: z.string().min(1, "Enter the date on the receipt."),  category: z.string().min(1, "Pick a category."),  purpose: z.string().trim().min(10, "Say why the company paid for this."),})type Expense = z.infer<typeof schema>
// A stand-in for your model reading the receipt: fields arrive one by one, like a streamed object.const extracted: AiFormFillResult = {  merchant: { value: "Tavares Rico", source: { label: "receipt, line 1", quote: "TAVARES RICO, Rua da Misericórdia 37, Lisboa" }, confidence: 0.97 },  date: { value: "2026-10-14", display: "Oct 14, 2026", source: { label: "receipt, line 3", quote: "14/10/2026 21:42" }, confidence: 0.94 },  amount: { value: 486.4, display: "€486.40", source: { label: "receipt, total", quote: "TOTAL EUR 486,40" }, confidence: 0.92 },  category: { value: "meals", display: "Meals with clients", source: { label: "merchant type" }, confidence: 0.71 },  purpose: {    value: "Dinner with the Kestrel Health finance team after the renewal workshop in Lisbon.",    source: { label: "your calendar, Oct 14", quote: "Kestrel renewal workshop, dinner at 20:30" },    confidence: 0.58,  },}
async function* readReceipt(signal: AbortSignal) {  for (const [name, suggestion] of Object.entries(extracted)) {    await new Promise((r) => setTimeout(r, 350))    if (signal.aborted) return    yield { [name]: suggestion }  }}
export default function AiFormFillReceipt() {  const form = useAppForm(schema, { defaultValues: { merchant: "", amount: undefined, date: "", category: "", purpose: "" } as unknown as Expense })  const [saved, setSaved] = React.useState(false)
  return (    <Form      form={form}      className="w-full max-w-lg"      onSubmit={async () => {        await new Promise((r) => setTimeout(r, 500))        setSaved(true)      }}    >      <AiFormFill run={readReceipt} source="receipt-tavares-rico.jpg">        <AiFormFillBar label="Fill from receipt" />        <FormField<Expense, "merchant"> name="merchant" label="Merchant">          {(field) => (            <>              <Input {...field} />              <AiFormFillSuggestion name="merchant" label="merchant" />            </>          )}        </FormField>        <div className="grid gap-6 sm:grid-cols-2">          <FormField<Expense, "amount"> name="amount" label="Amount">            {(field) => (              <>                <NumberInput value={field.value ?? null} onValueChange={(v) => field.onChange(v ?? undefined)} prefix="€" format={{ minimumFractionDigits: 2 }} />                <AiFormFillSuggestion name="amount" label="amount" />              </>            )}          </FormField>          <FormField<Expense, "date"> name="date" label="Date">            {(field) => (              <>                <Input {...field} type="date" />                <AiFormFillSuggestion name="date" label="date" />              </>            )}          </FormField>        </div>        <FormField<Expense, "category"> name="category" label="Category">          {(field) => (            <>              <Select items={categories} value={field.value || null} onValueChange={(v) => field.onChange(v ?? "")}>                <SelectTrigger className="w-full" aria-invalid={field["aria-invalid"]}>                  <SelectValue placeholder="Choose a category" />                </SelectTrigger>                <SelectContent>                  {categories.map((c) => (                    <SelectItem key={c.value} value={c.value}>                      {c.label}                    </SelectItem>                  ))}                </SelectContent>              </Select>              <AiFormFillSuggestion name="category" label="category" />            </>          )}        </FormField>        <FormField<Expense, "purpose"> name="purpose" label="Business purpose">          {(field) => (            <>              <Textarea {...field} rows={3} />              <AiFormFillSuggestion name="purpose" label="business purpose" />            </>          )}        </FormField>      </AiFormFill>      <div className="flex items-center gap-3">        <FormSubmit>Submit expense</FormSubmit>        {saved && <span className="text-[13px] text-muted-foreground">Submitted for approval.</span>}      </div>    </Form>  )}