From d133d6d656be7959286a3d68251ddff31957265a Mon Sep 17 00:00:00 2001
From: Matt Ciaccio <matt@mac.home>
Date: Fri, 24 Apr 2026 16:04:07 +0200
Subject: [PATCH] feat(ui): wire OwnerPicker into invoice billing-entity field

---
 .../[portSlug]/invoices/new/page.tsx          | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/app/(dashboard)/[portSlug]/invoices/new/page.tsx b/src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
index 3a9d9c0..a3c2cb3 100644
--- a/src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
+++ b/src/app/(dashboard)/[portSlug]/invoices/new/page.tsx
@@ -19,6 +19,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { OwnerPicker } from '@/components/shared/owner-picker';
 import { InvoiceLineItems } from '@/components/invoices/invoice-line-items';
 import { apiFetch } from '@/lib/api/client';
 import { createInvoiceSchema, type CreateInvoiceInput } from '@/lib/validators/invoices';
@@ -156,27 +157,18 @@ export default function NewInvoicePage() {
                 <CardTitle className="text-base">Client Information</CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
-                <div className="space-y-1">
-                  <Label htmlFor="billingEntityType">
-                    Billing Entity <span className="text-destructive">*</span>
+                <div className="space-y-2">
+                  <Label>
+                    Billing entity <span className="text-destructive">*</span>
                   </Label>
-                  <div className="grid grid-cols-2 gap-2">
-                    <Select
-                      defaultValue="client"
-                      onValueChange={(v) =>
-                        setValue('billingEntity.type', v as 'client' | 'company')
+                  <OwnerPicker
+                    value={watchedValues.billingEntity ?? null}
+                    onChange={(ref) => {
+                      if (ref) {
+                        setValue('billingEntity', ref, { shouldValidate: true });
                       }
-                    >
-                      <SelectTrigger id="billingEntityType">
-                        <SelectValue placeholder="Type" />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="client">Client</SelectItem>
-                        <SelectItem value="company">Company</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    <Input {...register('billingEntity.id')} placeholder="Entity ID" />
-                  </div>
+                    }}
+                  />
                   {errors.billingEntity && (
                     <p className="text-xs text-destructive">
                       {errors.billingEntity.message ??
@@ -185,7 +177,8 @@ export default function NewInvoicePage() {
                     </p>
                   )}
                   <p className="text-xs text-muted-foreground">
-                    Picker UI is coming in Task 10.2 — for now paste the client or company ID.
+                    Select the client or company to invoice. Their name will be snapshotted into the
+                    invoice.
                   </p>
                 </div>
 
@@ -299,7 +292,16 @@ export default function NewInvoicePage() {
                   <div>
                     <span className="text-muted-foreground">Billing Entity</span>
                     <p className="font-medium mt-0.5">
-                      {watchedValues.billingEntity?.type}: {watchedValues.billingEntity?.id}
+                      {watchedValues.billingEntity ? (
+                        <>
+                          <span className="capitalize">{watchedValues.billingEntity.type}</span>{' '}
+                          <span className="text-xs opacity-60">
+                            {watchedValues.billingEntity.id.slice(0, 12)}
+                          </span>
+                        </>
+                      ) : (
+                        <span className="text-muted-foreground italic">Not selected</span>
+                      )}
                     </p>
                   </div>
                   <div>