From 13272f9a6f68502778b72aa30b8a8eb72ce603e5 Mon Sep 17 00:00:00 2001
From: lorentz <lorentz@wulfconsulting.com>
Date: Sat, 11 Jul 2026 14:43:56 -0400
Subject: [PATCH] feat(14-05): manual company-search combobox fallback
 (D-05/D-09)

- Every review card gets a Command/Popover combobox fed by
  /api/data/companies-list, fetched once via ensureCompaniesLoaded()
  and shared across cards
- Selecting a company enables a "Link to selected company" button that
  calls the same resolve() handler as the candidate buttons
- Zero-candidate reviews (D-09) show only the manual picker; reviews
  with candidates show both candidate buttons and the manual picker
---
 app/pax8/page.tsx | 88 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 86 insertions(+), 2 deletions(-)

diff --git a/app/pax8/page.tsx b/app/pax8/page.tsx
index e4d202a..506f928 100644
--- a/app/pax8/page.tsx
+++ b/app/pax8/page.tsx
@@ -9,9 +9,19 @@ import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Skeleton } from '@/components/ui/skeleton';
-import { AlertTriangle, CheckCircle2, Loader2 } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { AlertTriangle, Check, CheckCircle2, ChevronsUpDown, Loader2 } from 'lucide-react';
 import DataTable, { type Column } from '@/components/admin/DataTable';
 import DetailModal from '@/components/admin/DetailModal';
+import { cn } from '@/lib/utils';
 
 interface Pax8CompanyListItem {
   id: string;
@@ -88,6 +98,7 @@ export default function Pax8Page() {
   const [selectedManualCompany, setSelectedManualCompany] = useState<
     Record<string, ManualCompanyOption>
   >({});
+  const [openPopoverId, setOpenPopoverId] = useState<string | null>(null);
 
   const fetchCompanies = async (
     currentPage: number,
@@ -398,7 +409,80 @@ export default function Pax8Page() {
                     </Alert>
                   )}
 
-                  {/* Manual company-search combobox implemented in Task 3 */}
+                  <div className="flex items-center gap-2 pt-1">
+                    <Popover
+                      open={openPopoverId === review.id}
+                      onOpenChange={(open) => {
+                        setOpenPopoverId(open ? review.id : null);
+                        if (open) void ensureCompaniesLoaded();
+                      }}
+                    >
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          className="flex-1 justify-between font-normal"
+                        >
+                          {selectedManualCompany[review.id]?.company_name ?? 'Search company…'}
+                          <ChevronsUpDown className="size-4 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-[320px] p-0" align="start">
+                        <Command>
+                          <CommandInput placeholder="Search company…" />
+                          <CommandList>
+                            <CommandEmpty>
+                              {companiesLoading ? 'Loading companies…' : 'No company found.'}
+                            </CommandEmpty>
+                            <CommandGroup>
+                              {(allCompanies ?? []).map((company) => (
+                                <CommandItem
+                                  key={company.id}
+                                  value={company.company_name}
+                                  onSelect={() => {
+                                    setSelectedManualCompany((prev) => ({
+                                      ...prev,
+                                      [review.id]: company,
+                                    }));
+                                    setOpenPopoverId(null);
+                                  }}
+                                >
+                                  <Check
+                                    className={cn(
+                                      'size-4',
+                                      selectedManualCompany[review.id]?.id === company.id
+                                        ? 'opacity-100'
+                                        : 'opacity-0'
+                                    )}
+                                  />
+                                  {company.company_name}
+                                </CommandItem>
+                              ))}
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                    <Button
+                      disabled={
+                        !selectedManualCompany[review.id] ||
+                        resolving === `${review.id}:${selectedManualCompany[review.id]?.id}`
+                      }
+                      onClick={() => {
+                        const selected = selectedManualCompany[review.id];
+                        if (selected) void resolve(review.id, selected.id, selected.company_name);
+                      }}
+                    >
+                      {resolving === `${review.id}:${selectedManualCompany[review.id]?.id}` ? (
+                        <>
+                          <Loader2 className="size-3 animate-spin mr-1" />
+                          Linking…
+                        </>
+                      ) : (
+                        'Link to selected company'
+                      )}
+                    </Button>
+                  </div>
                 </CardContent>
               </Card>
             ))}