[V0_FILE]typescriptreact:file="components/quick-analysis/verification/BulkAcceptDialog.tsx" isMerged="true" "use client" import { AlertTriangle } from "lucide-react" import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" interface BulkAcceptDialogProps { isOpen: boolean onClose: () => void onConfirm: () => void conflictCount: number } export default function BulkAcceptDialog({ isOpen, onClose, onConfirm, conflictCount }: BulkAcceptDialogProps) { return ( ) } [V0_FILE]typescript:file="hooks/use-media-query.ts" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export function useMediaQuery(query: string): boolean { const [matches, setMatches] = useState(false) useEffect(() => { const media = window.matchMedia(query) // Update the state initially setMatches(media.matches) // Define a callback function to handle changes const listener = (e: MediaQueryListEvent) => { setMatches(e.matches) } // Add the listener media.addEventListener("change", listener) // Clean up return () => { media.removeEventListener("change", listener) } }, [query]) return matches } [V0_FILE]typescriptreact:file="app/quick-analysis/verification/page.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useParams, useRouter } from "next/navigation" import { ChevronRight, ArrowLeft } from "lucide-react" import { useDealUploadStore } from "@/store/dealUploadStore" import VerificationPage from "@/components/quick-analysis/verification/VerificationPage" export default function VerificationPageContainer() { const router = useRouter() const params = useParams() const [dealId, setDealId] = useState(null) const { fetchMergeManifest, isLoading } = useDealUploadStore() useEffect(() => { // If we have a dealId in the URL params, use it if (params.dealId) { setDealId(params.dealId as string) } else { // For preview/demo purposes, use a default dealId setDealId("demo-deal") } }, [params]) useEffect(() => { if (dealId) { fetchMergeManifest(dealId) } }, [dealId, fetchMergeManifest]) const handleContinue = async () => { if (dealId) { router.push(`/quick-analysis/inputs/${dealId}`) } else { router.push(`/quick-analysis/inputs`) } } const handleBack = () => { if (dealId) { router.push(`/quick-analysis/review/${dealId}`) } else { router.push(`/quick-analysis/review`) } } return (

Upload

Review & Resolve

Quick Analysis Inputs

{isLoading ? (

) : ( )}

) } [V0_FILE]typescriptreact:file="components/ui/skeleton.tsx" isMerged="true" import type React from "react" import { cn } from "@/lib/utils" function Skeleton({ className, ...props }: React.HTMLAttributes) { return

} export { Skeleton } [V0_FILE]typescriptreact:file="components/quick-analysis/verification/VerificationPage.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { CheckCircle, AlertCircle, Search, ChevronDown, ChevronUp, ArrowRight } from "lucide-react" import { useDealUploadStore } from "@/store/dealUploadStore" import ConflictGrid from "./ConflictGrid" import ResolvedList from "./ResolvedList" import SourcePreviewDrawer from "./SourcePreviewDrawer" import BulkAcceptDialog from "./BulkAcceptDialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { motion } from "framer-motion" interface VerificationPageProps { onContinue: () => void } export default function VerificationPage({ onContinue }: VerificationPageProps) { const { conflicts, resolvedItems, acceptAllHighestConfidence, hasConflicts } = useDealUploadStore() const [searchQuery, setSearchQuery] = useState("") const [showResolved, setShowResolved] = useState(false) const [selectedItem, setSelectedItem] = useState(null) const [showBulkDialog, setShowBulkDialog] = useState(false) const handleSearch = (e: React.ChangeEvent) => { setSearchQuery(e.target.value) } const handleBulkAccept = () => { acceptAllHighestConfidence() setShowBulkDialog(false) } const handleItemSelect = (item: any) => { setSelectedItem(item) } const closeDrawer = () => { setSelectedItem(null) } const filteredConflicts = conflicts.filter((item) => item.fieldName.toLowerCase().includes(searchQuery.toLowerCase())) const filteredResolvedItems = resolvedItems.filter((item) => item.fieldName.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

Verify Extracted Values

Review and resolve conflicts between values extracted from your documents.

Conflicts ({conflicts.length})

{conflicts.length > 0 && ( )}

{filteredConflicts.length > 0 ? ( ) : conflicts.length > 0 ? (

No conflicts match your search.

) : (

All conflicts resolved

All extracted values have been verified. Click Continue to proceed to Quick Analysis.

)}

{showResolved && ( )}

setShowBulkDialog(false)} onConfirm={handleBulkAccept} conflictCount={conflicts.length} /> {/* Sticky Continue Button - Removed conflicts count */}

) } [V0_FILE]typescriptreact:file="store/dealUploadStore.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { create } from "zustand" interface Value { value: string source: string confidence: number pageReference?: { pageNumber: number coordinates?: { x: number y: number width: number height: number } } } interface Conflict { fieldName: string values: Value[] selectedValueIndex: number } interface ResolvedItem { fieldName: string value: string source: string confidence: number pageReference?: { pageNumber: number coordinates?: { x: number y: number width: number height: number } } allValues?: Value[] } interface DealUploadState { isLoading: boolean conflicts: Conflict[] resolvedItems: ResolvedItem[] hasConflicts: boolean // Actions fetchMergeManifest: (dealId: string) => Promise resolveConflict: (fieldName: string, valueIndex: number) => void acceptAllHighestConfidence: () => void getSelectedValues: () => Record } export const useDealUploadStore = create((set, get) => ({ isLoading: false, conflicts: [], resolvedItems: [], hasConflicts: false, fetchMergeManifest: async (dealId: string) => { set({ isLoading: true }) try { // In a real implementation, this would be a fetch call to your API // const response = await fetch(`/api/deals/${dealId}/merge-manifest`); // const data = await response.json(); // For demo purposes, we'll use mock data const mockData = getMockMergeManifest() // Process the data into conflicts and resolved items const conflicts: Conflict[] = [] const resolvedItems: ResolvedItem[] = [] Object.entries(mockData.fields).forEach(([fieldName, fieldData]: [string, any]) => { if (fieldData.values.length > 1) { // Check if all values are the same const firstValue = fieldData.values[0].value const allSameValue = fieldData.values.every((v: any) => v.value === firstValue) if (allSameValue) { // All sources agree on the value - this is an auto-filled field with multiple sources // Sort values by confidence (highest first) const sortedValues = [...fieldData.values].sort((a: any, b: any) => b.confidence - a.confidence) resolvedItems.push({ fieldName, value: firstValue, // Store all sources in an array, sorted by confidence source: sortedValues.map((v: any) => v.source).join(","), // Use the highest confidence score confidence: sortedValues[0].confidence, // Keep all page references for the drawer view pageReference: sortedValues[0].pageReference, // Add all values for the drawer view allValues: sortedValues, }) } else if (fieldData.confidence < 0.9) { // This is a conflict (different values) conflicts.push({ fieldName, values: fieldData.values.map((v: any) => ({ value: v.value, source: v.source, confidence: v.confidence, pageReference: v.pageReference, })), // Pre-select the highest confidence value selectedValueIndex: fieldData.values.reduce( (maxIndex: number, value: any, currentIndex: number, array: any[]) => value.confidence > array[maxIndex].confidence ? currentIndex : maxIndex, 0, ), }) } else { // High confidence single value resolvedItems.push({ fieldName, value: fieldData.values[0].value, source: fieldData.values[0].source, confidence: fieldData.values[0].confidence, pageReference: fieldData.values[0].pageReference, }) } } else { // Single source resolvedItems.push({ fieldName, value: fieldData.values[0].value, source: fieldData.values[0].source, confidence: fieldData.values[0].confidence, pageReference: fieldData.values[0].pageReference, }) } }) set({ conflicts, resolvedItems, isLoading: false, hasConflicts: conflicts.length > 0, }) } catch (error) { console.error("Error fetching merge manifest:", error) set({ isLoading: false }) } }, resolveConflict: (fieldName: string, valueIndex: number) => { set((state) => { // Find the conflict const conflictIndex = state.conflicts.findIndex((c) => c.fieldName === fieldName) if (conflictIndex === -1) return state const conflict = state.conflicts[conflictIndex] // Update the selected value index const updatedConflicts = [...state.conflicts] updatedConflicts[conflictIndex] = { ...conflict, selectedValueIndex: valueIndex, } return { conflicts: updatedConflicts } }) }, acceptAllHighestConfidence: () => { set((state) => { // Move all conflicts to resolved items const newResolvedItems = [...state.resolvedItems] state.conflicts.forEach((conflict) => { const selectedValue = conflict.values[conflict.selectedValueIndex] newResolvedItems.push({ fieldName: conflict.fieldName, value: selectedValue.value, source: selectedValue.source, confidence: selectedValue.confidence, pageReference: selectedValue.pageReference, }) }) return { conflicts: [], resolvedItems: newResolvedItems, hasConflicts: false, } }) }, getSelectedValues: () => { const state = get() const result: Record = {} // Add all resolved items state.resolvedItems.forEach((item) => { result[item.fieldName] = { value: item.value, source: item.source, confidence: item.confidence, } }) // Add selected values from conflicts state.conflicts.forEach((conflict) => { const selectedValue = conflict.values[conflict.selectedValueIndex] result[conflict.fieldName] = { value: selectedValue.value, source: selectedValue.source, confidence: selectedValue.confidence, } }) return result }, })) // Mock data for demonstration function getMockMergeManifest() { return { dealId: "deal-123", fields: { "Number of Units": { confidence: 0.7, values: [ { value: "312", source: "Offering Memorandum", confidence: 0.85, pageReference: { pageNumber: 3 } }, { value: "308", source: "Rent Roll", confidence: 0.75, pageReference: { pageNumber: 1 } }, ], }, "Year Built": { confidence: 0.6, values: [ { value: "1985", source: "Offering Memorandum", confidence: 0.65, pageReference: { pageNumber: 5 } }, { value: "1986", source: "Appraisal Report", confidence: 0.95, pageReference: { pageNumber: 12 } }, ], }, "Rentable Square Footage": { confidence: 0.5, values: [ { value: "285,450", source: "Offering Memorandum", confidence: 0.55, pageReference: { pageNumber: 8 } }, { value: "287,500", source: "List of Units", confidence: 0.85, pageReference: { pageNumber: 3 } }, { value: "284,750", source: "Appraisal Report", confidence: 0.65, pageReference: { pageNumber: 2 } }, ], }, "Cap Rate": { confidence: 0.95, values: [ { value: "5.25%", source: "Offering Memorandum", confidence: 0.95, pageReference: { pageNumber: 10 } }, ], }, "Occupancy Rate": { confidence: 0.92, values: [{ value: "94%", source: "Rent Roll", confidence: 0.92, pageReference: { pageNumber: 1 } }], }, "Gross Rental Potential Income": { confidence: 0.6, values: [ { value: "$5,425,000", source: "Offering Memorandum", confidence: 0.75, pageReference: { pageNumber: 15 } }, { value: "$5,380,000", source: "Rent Roll", confidence: 0.85, pageReference: { pageNumber: 2 } }, ], }, "Property Address": { confidence: 0.98, values: [ { value: "123 Main Street, Austin, TX 78701", source: "Offering Memorandum", confidence: 0.98, pageReference: { pageNumber: 1 }, }, { value: "123 Main Street, Austin, TX 78701", source: "Appraisal Report", confidence: 0.92, pageReference: { pageNumber: 1 }, }, ], }, "Property Type": { confidence: 0.99, values: [ { value: "Multifamily", source: "Offering Memorandum", confidence: 0.99, pageReference: { pageNumber: 1 } }, { value: "Multifamily", source: "Appraisal Report", confidence: 0.95, pageReference: { pageNumber: 1 } }, { value: "Multifamily", source: "Rent Roll", confidence: 0.9, pageReference: { pageNumber: 1 } }, ], }, "Lot Size": { confidence: 0.7, values: [ { value: "5.2 acres", source: "Offering Memorandum", confidence: 0.7, pageReference: { pageNumber: 4 } }, { value: "5.4 acres", source: "Appraisal Report", confidence: 0.8, pageReference: { pageNumber: 7 } }, ], }, "Parking Spaces": { confidence: 0.85, values: [{ value: "450", source: "Offering Memorandum", confidence: 0.85, pageReference: { pageNumber: 6 } }], }, }, } } [V0_FILE]typescriptreact:file="components/quick-analysis/verification/SourcePreviewDrawer.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { FileText, Download, ZoomIn, ZoomOut, RotateCw } from "lucide-react" import { Button } from "@/components/ui/button" import { Sheet, SheetContent } from "@/components/ui/sheet" import { useMediaQuery } from "@/hooks/use-media-query" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Skeleton } from "@/components/ui/skeleton" import { Badge } from "@/components/ui/badge" interface SourcePreviewDrawerProps { isOpen: boolean item: any onClose: () => void } export default function SourcePreviewDrawer({ isOpen, item, onClose }: SourcePreviewDrawerProps) { const drawerRef = useRef(null) const isMobile = useMediaQuery("(max-width: 768px)") const [activeTab, setActiveTab] = useState("image") const [zoomLevel, setZoomLevel] = useState(100) const [selectedValueIndex, setSelectedValueIndex] = useState(null) const [isLoading, setIsLoading] = useState(true) const [loadError, setLoadError] = useState(false) // Set the initially selected value when the drawer opens useEffect(() => { if (item) { if (item.values && item.selectedValueIndex !== undefined) { setSelectedValueIndex(item.selectedValueIndex) } else if (item.allValues) { // For auto-filled fields with multiple matching sources setSelectedValueIndex(0) } else { setSelectedValueIndex(null) } // Reset loading state when a new item is selected setIsLoading(true) setLoadError(false) // Simulate loading delay const timer = setTimeout(() => { setIsLoading(false) // Simulate random load errors (10% chance) setLoadError(Math.random() > 0.9) }, 1200) return () => clearTimeout(timer) } }, [item]) // Handle escape key press useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "Escape" && isOpen) { onClose() } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [isOpen, onClose]) // Trap focus within the drawer when open useEffect(() => { if (!isOpen || !drawerRef.current) return const focusableElements = drawerRef.current.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', ) const firstElement = focusableElements[0] as HTMLElement const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement const handleTabKey = (e: KeyboardEvent) => { if (e.key !== "Tab") return if (e.shiftKey) { if (document.activeElement === firstElement) { lastElement.focus() e.preventDefault() } } else { if (document.activeElement === lastElement) { firstElement.focus() e.preventDefault() } } } drawerRef.current.addEventListener("keydown", handleTabKey) return () => { drawerRef.current?.removeEventListener("keydown", handleTabKey) } }, [isOpen]) const handleZoomIn = () => { setZoomLevel((prev) => Math.min(prev + 25, 200)) } const handleZoomOut = () => { setZoomLevel((prev) => Math.max(prev - 25, 50)) } const handleRotate = () => { // This would rotate the document in a real implementation } const handleValueClick = (index: number) => { setSelectedValueIndex(index) } const getFileTypeBadge = (source: string) => { const sourceLower = source.toLowerCase() if (sourceLower.includes("memorandum") || sourceLower.includes("report")) { return ( PDF ) } else if (sourceLower.includes("roll") || sourceLower.includes("list")) { return ( XLSX ) } else if (sourceLower.includes("appraisal")) { return ( DOC ) } else { return ( FILE ) } } if (!item) return null // Get the currently selected value for display const currentValue = item.values ? selectedValueIndex !== null ? item.values[selectedValueIndex] : item.values[0] : item.allValues ? selectedValueIndex !== null ? item.allValues[selectedValueIndex] : item.allValues[0] : item return (

{currentValue.source || item.source || "Document Preview"} {getFileTypeBadge(currentValue.source || item.source || "")}

Field: {item.fieldName}

{item.values ? (

{item.values.map((value: any, index: number) => (

handleValueClick(index)} >

{value.value}

{value.source} • {Math.round(value.confidence * 100)}% confidence

))}

) : item.allValues ? ( // For auto-filled fields with multiple matching sources

{item.allValues.map((value: any, index: number) => (

handleValueClick(index)} >

{value.value}

{value.source} • {Math.round(value.confidence * 100)}% confidence

))}

) : (

{item.value}

{item.source} • {Math.round(item.confidence * 100)}% confidence

)}

Image Document

{zoomLevel}%

{isLoading ? (

) : loadError ? (

No preview available

The document preview could not be loaded.

) : activeTab === "image" ? (

Screenshot showing {currentValue.value || item.value} in {currentValue.source || item.source}

) : (

Document preview for {currentValue.value || item.value} from {currentValue.source || item.source}

)}

) } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, sideOffset = 4, ...props }, ref) => ( )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="components/quick-analysis/verification/ResolvedList.tsx" isEdit="true" "use client" import { flexRender, getCoreRowModel, useReactTable, getSortedRowModel, type SortingState } from "@tanstack/react-table" import { useState } from "react" import { CheckCircle, ArrowUpDown, Info } from "lucide-react" interface ResolvedListProps { resolvedItems: any[] onItemSelect: (item: any) => void selectedItemId?: string } export default function ResolvedList({ resolvedItems, onItemSelect, selectedItemId }: ResolvedListProps) { const [sorting, setSorting] = useState([]) const [activeTooltip, setActiveTooltip] = useState(null) const columns = [ { accessorKey: "fieldName", header: ({ column }: any) => ( ), cell: ({ row }: any) =>

{row.original.fieldName}

, }, { accessorKey: "value", header: "Value", cell: ({ row }: any) => (

{row.original.value}

), }, { accessorKey: "source", header: "Source", cell: ({ row }: any) => { const source = row.original.source const fieldName = row.original.fieldName // Check if there are multiple sources if (source.includes(",")) { const sources = source.split(",") if (sources.length === 2) { // Just two sources, show both return

{sources.join(", ")}

} else { // More than two sources, show first one + count with custom tooltip const tooltipId = `tooltip-${fieldName.replace(/\s+/g, "-").toLowerCase()}` return (

{sources[0]} {activeTooltip === tooltipId && (

All matching sources:

{src}

{/* Arrow pointing down */}

)}

) } } else { // Single source return

{source}

} }, }, { accessorKey: "confidence", header: "Confidence", cell: ({ row }: any) => (

{Math.round(row.original.confidence * 100)}%

), }, { id: "actions", cell: () => (

), }, ] const table = useReactTable({ data: resolvedItems, columns, state: { sorting, }, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), }) return (

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( ))} ))} {table.getRowModel().rows.map((row) => ( onItemSelect(row.original)} > {row.getVisibleCells().map((cell) => ( ))} ))}

{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
{flexRender(cell.column.columnDef.cell, cell.getContext())}

) } [V0_FILE]typescriptreact:file="components/quick-analysis/verification/ConflictGrid.tsx" isEdit="true" "use client" import { useState } from "react" import { flexRender, getCoreRowModel, useReactTable, getSortedRowModel, type SortingState } from "@tanstack/react-table" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Label } from "@/components/ui/label" import { ArrowUpDown } from "lucide-react" import { useDealUploadStore } from "@/store/dealUploadStore" import { cn } from "@/lib/utils" interface ConflictGridProps { conflicts: any[] onItemSelect: (item: any) => void selectedItemId?: string } export default function ConflictGrid({ conflicts, onItemSelect, selectedItemId }: ConflictGridProps) { const { resolveConflict } = useDealUploadStore() const [sorting, setSorting] = useState([]) const columns = [ { accessorKey: "fieldName", header: ({ column }: any) => ( ), cell: ({ row }: any) =>

{row.original.fieldName}

, }, { accessorKey: "values", header: "Conflicting Values", cell: ({ row }: any) => (

{ resolveConflict(row.original.fieldName, Number.parseInt(value)) }} className="flex flex-col space-y-2" > {row.original.values.map((value: any, index: number) => (

e.stopPropagation()} />

e.stopPropagation()} > {value.value}

= 0.9 ? "bg-green-100 text-green-800" : value.confidence >= 0.7 ? "bg-amber-100 text-amber-800" : "bg-red-100 text-red-800", )} > {Math.round(value.confidence * 100)}% confidence

{value.source}

))}

), }, { id: "actions", cell: () => (

), }, ] const table = useReactTable({ data: conflicts, columns, state: { sorting, }, onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), }) return (

{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
{flexRender(cell.column.columnDef.cell, cell.getContext())}

) }