10a:"ExplicitChatIdProvider" 10b:I[903690,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"$10a"] 10c:I[838238,["$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$7b","$7c","$82","$83","$84","$85","$7e","$86","$87","$88","$89","$8a","$8b","$7f","$80","$8c","$8d"],"SWRDataProvider"] 10e:[] 10f:[["b_PaZvHfVABOm",null],["b_lnE3JGkYP3z",null],["b_k6dU0IWrbS9",null]] 110:[["b_PaZvHfVABOm",{"templateVersionId":null,"templateCanonId":null}],["b_lnE3JGkYP3z",{"templateVersionId":null,"templateCanonId":null}],["b_k6dU0IWrbS9",{"templateVersionId":null,"templateCanonId":null}]] 111:[["bbL52b76lV5","$D2025-10-16T20:30:40.913Z"],["b_tNxLwwRtoc0","$D2025-10-16T20:40:55.028Z"],["b_RfNfLlygAI0","$D2025-10-16T20:44:26.635Z"],["b_j0uH8CzAfHE","$D2025-10-16T20:48:37.468Z"],["b_2ccnSjzaYHH","$D2025-10-16T20:51:31.583Z"],["b_RgjUa3Dcg22","$D2025-10-16T20:56:48.582Z"],["b_bXbyFnbLRmH","$D2025-10-21T17:43:05.735Z"],["b_tWjMSbe6Lyf","$D2025-10-21T17:51:22.060Z"],["b_4lQhIXQqRif","$D2025-10-21T17:55:53.383Z"],["b_eYBlzA10YDX","$D2025-10-21T17:59:53.419Z"],["b_VUBccQvxkQB","$D2025-10-21T18:16:49.175Z"],["b_sXVxZQmpJ1n","$D2025-10-21T18:41:46.063Z"],["b_q8SCsMvbd5i","$D2025-10-21T18:44:54.617Z"],["b_Lv74Hg7ZfPP","$D2025-10-22T20:09:27.079Z"],["b_5DKtsLwS8gK","$D2025-10-26T20:49:30.002Z"],["b_pvetmGzHkf3","$D2025-10-26T20:54:52.791Z"],["b_psrCbSzg5aW","$D2025-10-26T20:57:30.979Z"],["b_de7jYS0D1l9","$D2025-10-26T20:59:09.556Z"],["b_RI3urDuXtas","$D2025-10-26T21:01:52.180Z"],["b_HreceLAg2r3","$D2025-10-26T21:02:30.732Z"],["b_ReFQkTlkY2x","$D2025-10-26T21:43:22.077Z"],["b_PaZvHfVABOm","$D2025-10-26T22:08:24.269Z"],["b_lnE3JGkYP3z","$D2025-10-26T23:12:18.389Z"],["b_k6dU0IWrbS9","$D2025-10-28T15:14:52.931Z"]] 112:[["b_PaZvHfVABOm",false],["b_lnE3JGkYP3z",false],["b_k6dU0IWrbS9",false]] 113:[["b_PaZvHfVABOm","$undefined"],["b_lnE3JGkYP3z","$undefined"],["b_k6dU0IWrbS9","$undefined"]] 114:[["b_PaZvHfVABOm",null],["b_lnE3JGkYP3z",null],["b_k6dU0IWrbS9",null]] 115:[["b_PaZvHfVABOm",true],["b_lnE3JGkYP3z",true],["b_k6dU0IWrbS9",true]] 116:[["b_PaZvHfVABOm",true],["b_lnE3JGkYP3z",true],["b_k6dU0IWrbS9",true]] 117:[] 118:T12d5ef,[V0_FILE]typescriptreact:file="chart-config.ts" isMerged="true" // Add the Chart.js type declarations to make TypeScript happy declare module "chart.js" [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "./globals.css" import type React from "react" import Header from "./components/header" import Footer from "./components/footer" import { openSans, sourceSerifPro } from "./fonts" import { ScrollToTop } from "./components/scroll-to-top" export default function RootLayout({ children }: { children: React.ReactNode }) { return (

{/* Page Content */} {children}

) } [V0_FILE]typescriptreact:file="app/deals/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Search, BarChart, MoreVertical, Plus, Filter, X, DollarSign, Clock, CheckCircle, AlertTriangle, Briefcase, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import PageHeader from "@/app/components/page-header" import { DataTable, type ColumnDef } from "@/app/components/data-table" import { initialDeals, dealStats } from "../data/deals" import { StatusBadge } from "@/app/components/status-badge" type Deal = (typeof initialDeals)[0] // Get unique values for filter options const getUniqueValues = (field: keyof Deal) => { const values = initialDeals.map((item) => item[field]) return [...new Set(values)] } export default function DealsPage() { const router = useRouter() const [deals, setDeals] = useState(initialDeals) const [filteredDeals, setFilteredDeals] = useState(initialDeals) const [searchTerm, setSearchTerm] = useState("") // Filter states const [filters, setFilters] = useState({ status: "", stage: "", type: "", owner: "", priority: "", }) // Get unique values for filter dropdowns const statusOptions = getUniqueValues("status") const stageOptions = getUniqueValues("stage") const typeOptions = getUniqueValues("type") const ownerOptions = getUniqueValues("owner") const priorityOptions = getUniqueValues("priority") // Count active filters const activeFilterCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0) const handleNewDeal = () => { // Navigate to new deal page router.push("/deals/new") } // Handle filter changes const handleFilterChange = (field: string, value: string) => { setFilters((prev) => ({ ...prev, [field]: value, })) } // Clear all filters const clearFilters = () => { setFilters({ status: "", stage: "", type: "", owner: "", priority: "", }) setSearchTerm("") } // Navigate to deal detail const handleDealClick = (deal: Deal) => { router.push(`/deals/${deal.id}`) } // Apply filters useEffect(() => { let result = [...initialDeals] // Apply search term filter if (searchTerm) { result = result.filter( (item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()) || item.relationship.toLowerCase().includes(searchTerm.toLowerCase()), ) } // Apply dropdown filters Object.entries(filters).forEach(([field, value]) => { if (value && value !== "all") { result = result.filter((item) => item[field as keyof typeof item] === value) } }) setFilteredDeals(result) }, [searchTerm, filters]) const columns: ColumnDef[] = [ { id: "name", header: "Deal Name", accessorKey: "name", className: "font-bold text-blue-900 hover:underline cursor-pointer", onClick: handleDealClick, cell: (item) => (

{item.name}

), }, { id: "amount", header: "Amount", accessorKey: "amount", className: "font-semibold", }, { id: "status", header: "Status", accessorKey: "status", cell: (item) => , }, { id: "stage", header: "Stage", accessorKey: "stage", }, { id: "type", header: "Type", accessorKey: "type", }, { id: "relationship", header: "Relationship", accessorKey: "relationship", className: "text-blue-900 hover:underline cursor-pointer", cell: (item) => ( { e.stopPropagation() router.push(`/relationships/${item.relationshipId}`) }} > {item.relationship} ), }, { id: "owner", header: "Owner", accessorKey: "owner", }, { id: "closingDate", header: "Closing Date", accessorKey: "closingDate", }, { id: "priority", header: "Priority", accessorKey: "priority", cell: (item) => , }, { id: "actions", header: "", accessorKey: "id", sortable: false, cell: () => ( ), }, ] const breadcrumbs = [{ label: "Deals", href: "/deals" }, { label: "All Deals" }] return (

{/* Page Header */} {/* Stats Cards */}

{dealStats.inProgress}

In Progress

{dealStats.pendingApproval}

Pending Approval

{dealStats.approved}

Approved

{dealStats.closed}

Closed

{/* Table Section */}

{/* Search and Filter Section */}

setSearchTerm(e.target.value)} />

Filter Deals

Status

Stage

Type

Owner

Priority

{activeFilterCount > 0 && ( )}

{/* Results count */}

Showing {filteredDeals.length} of {initialDeals.length} deals

{/* Active filter badges */} {activeFilterCount > 0 && (

{searchTerm && ( Search: {searchTerm} setSearchTerm("")} /> )} {Object.entries(filters).map(([key, value]) => { if (!value) return null return ( {key.replace(/([A-Z])/g, " $1").trim()}: {value} handleFilterChange(key, "")} /> ) })}

)} {/* Data Table */}

) } [V0_FILE]typescriptreact:file="app/reports/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import PageHeader from "@/app/components/page-header" import { PieChartIcon, MoreVertical, MoreHorizontal } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { ResponsiveContainer, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar, Area, Pie, Cell, BarChart, AreaChart, PieChart, } from "recharts" export default function ReportsPage() { const breadcrumbs = [{ label: "Reports", href: "/reports" }, { label: "Portfolio Advisor" }] const [period, setPeriod] = useState("2/28/25") // Sample data for charts const pdData = [ { name: "Consumer Auto", value: 0.72 }, { name: "Consumer Other", value: 0.58 }, { name: "Residential Mortgage", value: 3.65 }, { name: "Home Equity", value: 3.85 }, { name: "Small Business", value: 1.45 }, { name: "Business Other", value: 0.65 }, { name: "Commercial RE", value: 2.05 }, { name: "Commercial Other", value: 0.68 }, { name: "Construction", value: 9.75 }, { name: "Not Reported", value: 0.95 }, ] const interestRateData = [ { name: "A+ (>800)", value: 4.75 }, { name: "A (750-799)", value: 5.15 }, { name: "B+ (700-749)", value: 6.25 }, { name: "B (650-699)", value: 7.85 }, { name: "C+ (600-649)", value: 10.25 }, { name: "C (550-599)", value: 11.85 }, { name: "D+ (500-549)", value: 13.65 }, { name: "D (<500)", value: 8.95 }, { name: "Not Reported", value: 5.95 }, ] const regionData = [ { name: "CA", value: 28.15 }, { name: "FL", value: 17.75 }, { name: "TX", value: 22.25 }, { name: "NY", value: 15.95 }, { name: "Other", value: 15.9 }, ] const concentrationData = [ { name: "Residential Real Estate", value: 1642.5 }, { name: "Consumer Lending", value: 1701.8 }, { name: "Commercial Real Estate", value: 3236.9 }, { name: "Business Lending", value: 845.7 }, { name: "Not Reported", value: 342.8 }, ] const trendsData = [ { quarter: "Q2 2022", "Residential Real Estate": 1000, "Consumer Lending": 800, "Commercial Real Estate": 1200, "Business Lending": 500, "Not Reported": 200, Total: 3700, }, { quarter: "Q3 2022", "Residential Real Estate": 1050, "Consumer Lending": 850, "Commercial Real Estate": 1250, "Business Lending": 520, "Not Reported": 210, Total: 3880, }, { quarter: "Q4 2022", "Residential Real Estate": 1100, "Consumer Lending": 900, "Commercial Real Estate": 1300, "Business Lending": 540, "Not Reported": 220, Total: 4060, }, { quarter: "Q1 2023", "Residential Real Estate": 1150, "Consumer Lending": 950, "Commercial Real Estate": 1350, "Business Lending": 560, "Not Reported": 230, Total: 4240, }, { quarter: "Q2 2023", "Residential Real Estate": 1200, "Consumer Lending": 1000, "Commercial Real Estate": 1400, "Business Lending": 580, "Not Reported": 240, Total: 4420, }, { quarter: "Q3 2023", "Residential Real Estate": 1300, "Consumer Lending": 1100, "Commercial Real Estate": 1600, "Business Lending": 650, "Not Reported": 260, Total: 4910, }, ] // Colors for charts const colors = [ "#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8", "#82ca9d", "#ffc658", "#8dd1e1", "#a4de6c", "#d0ed57", ] const regionColors = ["#00C49F", "#FFBB28", "#0088FE", "#8884D8", "#FF8042"] return (

Period:

{/* Summary Cards */}

{/* KEY STATS */} Key Stat

Avg. LTV 81.68%

Avg. Credit Score 721

Avg. Rate 10.54%

{/* DELINQUENCY SUMMARY */} Delinquency Summary

Delinquency Ratio .67%

Delinquent Count 491

Delinquent Balance $15,059,379

{/* CHARGE-OFF SUMMARY */} Charge-off Summary

Net Charge-off Count - Lookback 1 Month 604

Net Charge-off Ratio - Lookback 1 Month .02%

Net Charge-off Balance - Lookback 1 Month $420,290

{/* Top Row */}

{/* PD by subcategory */}

Loans

PD by subcategory

`${value}%`} tick={{ fontSize: 10 }} /> [`${value}%`, "PD"]} contentStyle={{ fontSize: 12 }} /> {pdData.map((entry, index) => ( ))}

{/* Interest rate by credit score */}

Loans

Interest rate by credit score

`${value}%`} tick={{ fontSize: 10 }} /> [`${value}%`, "Interest Rate"]} contentStyle={{ fontSize: 12 }} /> {interestRateData.map((entry, index) => ( ))}

{/* Balance % by region */}

Loans

Balance % by region

`${name}: ${value}%`} > {regionData.map((entry, index) => ( ))} [`${value}%`, "Balance"]} />

{/* Concentrations */}

Loans

Concentrations

`$${value}M`} tick={{ fontSize: 10 }} /> [`$${value}M`, "Amount"]} contentStyle={{ fontSize: 12 }} /> {concentrationData.map((entry, index) => ( ))}

{/* Trends */}

Loans

Trends

`$${value}M`} tick={{ fontSize: 10 }} /> [`$${value}M`, ""]} contentStyle={{ fontSize: 12 }} />

{/* Bottom Row */}

{/* DQ ratios by sub-category */}

Loans

DQ ratios by sub-category

PA element content

{/* DQ ratios by original credit score */}

Loans

DQ ratios by original credit score

PA element content

) } [V0_FILE]typescriptreact:file="app/onboarding/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/components/breadcrumb.tsx" isMerged="true" import Link from "next/link" import { ChevronRight } from "lucide-react" export interface BreadcrumbItem { label: string href?: string } interface BreadcrumbProps { items: BreadcrumbItem[] } export default function Breadcrumb({ items }: BreadcrumbProps) { return ( ) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } // Generate a URL-friendly slug from a string export function slugify(text: string): string { return text .toString() .toLowerCase() .replace(/\s+/g, "-") // Replace spaces with - .replace(/[^\w-]+/g, "") // Remove all non-word chars .replace(/--+/g, "-") // Replace multiple - with single - .replace(/^-+/, "") // Trim - from start of text .replace(/-+$/, "") // Trim - from end of text } // Generate a unique ID from a name and additional string export function generateId(name: string, suffix = ""): string { const timestamp = Date.now().toString(36) const randomStr = Math.random().toString(36).substring(2, 8) const nameSlug = slugify(name).substring(0, 20) return `${nameSlug}-${timestamp}${suffix ? `-${suffix}` : ""}-${randomStr}` } [V0_FILE]typescriptreact:file="app/relationships/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/relationships/[id]/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="app/fonts.ts" isMerged="true" import localFont from "next/font/local" import { Open_Sans, Source_Serif_4 as Source_Serif_Pro } from "next/font/google" export const sfPro = localFont({ src: [ { path: "../public/fonts/SF-Pro-Display-Regular.otf", weight: "400", style: "normal", }, { path: "../public/fonts/SF-Pro-Display-Medium.otf", weight: "500", style: "normal", }, { path: "../public/fonts/SF-Pro-Display-Semibold.otf", weight: "600", style: "normal", }, { path: "../public/fonts/SF-Pro-Display-Bold.otf", weight: "700", style: "normal", }, ], variable: "--font-sf-pro", display: "swap", }) export const openSans = Open_Sans({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-open-sans", display: "swap", }) export const sourceSerifPro = Source_Serif_Pro({ subsets: ["latin"], weight: ["400", "600", "700"], variable: "--font-source-serif-pro", display: "swap", }) export const avenir = localFont({ src: [ { path: "../public/fonts/Avenir-Roman.woff2", weight: "400", style: "normal", }, { path: "../public/fonts/Avenir-Medium.woff2", weight: "500", style: "normal", }, { path: "../public/fonts/Avenir-Heavy.woff2", weight: "600", style: "normal", }, { path: "../public/fonts/Avenir-Black.woff2", weight: "700", style: "normal", }, ], variable: "--font-avenir", display: "swap", }) [V0_FILE]typescriptreact:file="public/fonts/README.md" isMerged="true" # SF Pro Fonts Place the following SF Pro font files in this directory: - SF-Pro-Display-Regular.otf - SF-Pro-Display-Medium.otf - SF-Pro-Display-Semibold.otf - SF-Pro-Display-Bold.otf Note: SF Pro is a licensed font from Apple. You need to download it from Apple's developer website or use it according to Apple's licensing terms. [V0_FILE]typescriptreact:file="app/deals/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/deals/[id]/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/loans/[id]/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/loans/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef>( ({ className, ...props }, ref) => (

), ) Table.displayName = "Table" const TableHeader = React.forwardRef>( ({ className, ...props }, ref) => , ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef>( ({ className, ...props }, ref) => , ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef>( ({ className, ...props }, ref) => ( ), ) TableRow.displayName = "TableRow" // Modify the TableHead component to match the reduced padding const TableHead = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableHead.displayName = "TableHead" // Modify the TableCell component to support centered content for checkboxes const TableCell = React.forwardRef>( ({ className, ...props }, ref) =>

, ) TableCell.displayName = "TableCell" // Add a centered variant of TableCell specifically for checkboxes const TableCellCenter = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCellCenter.displayName = "TableCellCenter" const TableCaption = React.forwardRef>( ({ className, ...props }, ref) => (

), ) TableCaption.displayName = "TableCaption" // Update the exports to include the new TableCellCenter component export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCellCenter, TableCaption } [V0_FILE]typescriptreact:file="app/components/deal-resources.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { TableCard, SimpleTable } from "@/app/components/table-card" import { CheckCircle, Clock, AlertCircle } from "lucide-react" import { useRouter } from "next/navigation" import { StatusBadge } from "@/app/components/status-badge" interface DealLoan { id: string name: string amount: string interestRate: string status: string maturityDate: string loanType: string } interface DealTask { name: string status: string dueDate: string assignee: string } interface DealDocument { name: string status: string date: string owner: string } interface DealResourcesProps { dealLoans: DealLoan[] dealTasks: DealTask[] dealDocuments: DealDocument[] showLoans?: boolean showTasks?: boolean showDocuments?: boolean } export function DealResources({ dealLoans, dealTasks, dealDocuments, showLoans = true, showTasks = true, showDocuments = true, }: DealResourcesProps) { const router = useRouter() const getStatusIcon = (status: string) => { switch (status) { case "Complete": return case "In Progress": return case "To Do": return case "Exception": return case "Waived": return default: return } } return (

{/* Loans */} {showLoans && ( {}} footerContent={ } > ( { console.log(`Navigating to loan: ${loan.id}`) router.push(`/loans/${loan.id}`) }} > {loan.name} ), }, { key: "amount" as keyof DealLoan, header: "Amount" }, { key: "interestRate" as keyof DealLoan, header: "Interest Rate" }, { key: "status" as keyof DealLoan, header: "Status", cell: (loan) => , }, { key: "maturityDate" as keyof DealLoan, header: "Maturity Date" }, { key: "loanType" as keyof DealLoan, header: "Type" }, ]} showCheckbox={true} noResultsMessage="No loans found for this deal." /> )} {/* Tasks */} {showTasks && ( {}} footerContent={ } > {task.name}, }, { key: "status" as keyof DealTask, header: "Status", cell: (task) => , }, { key: "dueDate" as keyof DealTask, header: "Due Date" }, { key: "assignee" as keyof DealTask, header: "Assignee" }, ]} showCheckbox={true} /> )} {/* Documents */} {showDocuments && ( {}} footerContent={ } > {doc.name}, }, { key: "status" as keyof DealDocument, header: "Status", cell: (doc) => , }, { key: "date" as keyof DealDocument, header: "Date" }, { key: "owner" as keyof DealDocument, header: "Owner" }, ]} showCheckbox={false} /> )}

) } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import * as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="app/components/deal-detail-left-column.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import Link from "next/link" import { Building, FileText, Briefcase, PieChart, Users, Edit, ChevronDown, MoreHorizontal, Check, Clock, Calendar, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { toast } from "@/hooks/use-toast" // Define milestone status type export type MilestoneStatus = "Complete" | "In Progress" | "To Do" // Define milestone type export interface Milestone { id: string name: string description: string status: MilestoneStatus date: string } export interface DealDetailLeftColumnProps { deal: any relationship: any dealMilestones: Milestone[] dealProgressOpen: boolean setDealProgressOpen: (open: boolean) => void onMilestoneStatusChange: (milestoneId: string, newStatus: MilestoneStatus) => void onOpenMilestoneDialog: (milestone: Milestone) => void } export function DealDetailLeftColumn({ deal, relationship, dealMilestones, dealProgressOpen, setDealProgressOpen, onMilestoneStatusChange, onOpenMilestoneDialog, }: DealDetailLeftColumnProps) { const router = useRouter() return (

{/* Deal Summary */}

Deal Summary

This {deal.type.toLowerCase()} for {deal.amount} is currently in the {deal.stage.toLowerCase()} stage with a{" "} {deal.probability} probability of closing. The deal is for {deal.relationship}, a{" "} {relationship?.type.toLowerCase()} in the {deal.industry} industry. The expected closing date is{" "} {deal.closingDate}.

This content was generated using AI.{" "} Learn more

{/* Deal Progress */}

Deal Progress

{/* Vertical Progress Stepper */}

{/* Continuous vertical line that runs through all steps */}

{dealMilestones.map((milestone, index) => { const isComplete = milestone.status === "Complete" const isInProgress = milestone.status === "In Progress" // If this milestone is complete, color the line up to the next milestone const showColoredLine = isComplete || isInProgress return (

{/* Colored line segment for completed steps */} {showColoredLine && index < dealMilestones.length - 1 && (

)} {/* Circle indicator */}

onOpenMilestoneDialog(milestone)} role="button" tabIndex={0} aria-label={`Update ${milestone.name} status`} > {isComplete ? ( ) : isInProgress ? (

) : (

)}

{/* Content */}

onOpenMilestoneDialog(milestone)} >

{milestone.name}

{milestone.description}

{milestone.date}

{ e.stopPropagation() onMilestoneStatusChange(milestone.id, "Complete") }} > Mark as Complete { e.stopPropagation() onMilestoneStatusChange(milestone.id, "In Progress") }} > Mark as In Progress { e.stopPropagation() onMilestoneStatusChange(milestone.id, "To Do") }} > ○ Mark as To Do

) })}

{/* Deal Details */}

Deal Details

Deal Name

{deal.name}

Amount

{deal.amount}

Type

{deal.type}

Status

{deal.status}

Stage

{deal.stage}

Probability

{deal.probability}

Priority

{deal.priority}

Creation Date

{deal.dateCreated}

Closing Date

{deal.closingDate}

Owner

{deal.owner}

Industry

{deal.industry}

{/* Relationship Information */}

Relationship

{relationship ? (

Relationship Name

router.push(`/relationships/${deal.relationshipId}`)} > {relationship.name}

Type

{relationship.type}

Status

{relationship.status}

Risk Status

{relationship.riskStatus}

Primary Contact

{relationship.primaryContact}

Contact Email

{relationship.primaryContactEmail}

Contact Phone

{relationship.primaryContactPhone}

) : (

Relationship information not available.

)} {/* Team Section */}

Team

Olivia Benson

Relationship Manager

Larry Owens

Loan Officer

Whitney Wright

Credit Analyst

) } [V0_FILE]typescriptreact:file="app/compensation/snapshot/page.tsx" isMerged="true" "use client" import { CreditCard, ChevronDown, DollarSign, BarChart2, Hash, Clock, LineChart } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import PageHeader from "@/app/components/page-header" import { DataTable } from "@/app/components/data-table" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" export default function CompensationSnapshotPage() { // Breadcrumb items const breadcrumbs = [ { label: "Home", href: "/" }, { label: "Compensation", href: "/compensation" }, { label: "Compensation Snapshot" }, ] // Sample data for daily compensation over the pay period const dailyPayData = [ { day: "Feb 1", amount: 1200 }, { day: "Feb 2", amount: 0 }, { day: "Feb 3", amount: 0 }, { day: "Feb 4", amount: 1500 }, { day: "Feb 5", amount: 800 }, { day: "Feb 6", amount: 0 }, { day: "Feb 7", amount: 2100 }, { day: "Feb 8", amount: 0 }, { day: "Feb 9", amount: 0 }, { day: "Feb 10", amount: 1800 }, { day: "Feb 11", amount: 0 }, { day: "Feb 12", amount: 1300 }, { day: "Feb 13", amount: 0 }, { day: "Feb 14", amount: 0 }, { day: "Feb 15", amount: 2200 }, { day: "Feb 16", amount: 0 }, { day: "Feb 17", amount: 1700 }, { day: "Feb 18", amount: 0 }, { day: "Feb 19", amount: 0 }, { day: "Feb 20", amount: 1400 }, { day: "Feb 21", amount: 900 }, { day: "Feb 22", amount: 0 }, { day: "Feb 23", amount: 0 }, { day: "Feb 24", amount: 1600 }, { day: "Feb 25", amount: 0 }, { day: "Feb 26", amount: 1835.23 }, { day: "Feb 27", amount: 0 }, { day: "Feb 28", amount: 0 }, ] const borrowers = [ { name: "Iljeski", loan: "42532991", amount: "$454,000", bps: "165", pay: "$7,491.00", }, { name: "Rivera", loan: "42532991", amount: "$661,500", bps: "165", pay: "$10,914.75", }, { name: "Garcia-Roman", loan: "42532991", amount: "$508,750", bps: "165", pay: "$8,394.38", }, { name: "White", loan: "42532991", amount: "$253,000", bps: "165", pay: "$4,174.50", }, { name: "Crenshaw", loan: "42532991", amount: "$321,750", bps: "165", pay: "$5,308.88", }, ] const columns = [ { id: "name", header: "Borrower", accessorKey: "name" }, { id: "loan", header: "Loan", accessorKey: "loan" }, { id: "amount", header: "Loan Amount", accessorKey: "amount" }, { id: "bps", header: "BPS", accessorKey: "bps" }, { id: "pay", header: "Pay", accessorKey: "pay" }, ] return (

$0.00

Draw Balance

$2,199,000

Total Volume

Total Units

$0.00

Held Balance

$43,305.00

Marketing Balance

My Compensation Daily pay for Feb 1 - Feb 28, 2025

$18,335.23

{ // Only show every 4th label to avoid crowding const index = dailyPayData.findIndex((item) => item.day === value) return index % 4 === 0 ? value : "" }} /> `$${value}`} /> [`$${value.toFixed(2)}`, "Amount"]} labelFormatter={(label) => `Date: ${label}`} />

Commissions $36,283.51

Adjustments $15,263.24

Draws $2,685.04

Draw Balance

Previous Balance $16,643.28

Held Balance

Previous Balance $0.00

No held balance details

Marketing Balance

Previous Balance $42,000.00

) } [V0_FILE]typescriptreact:file="app/components/task-status-badge.tsx" isMerged="true" // This file should be completely removed since we're now using StatusBadge everywhere // We've already updated the task-table.tsx to use the StatusBadge component [V0_FILE]typescriptreact:file="app/requirements/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { toast } from "@/hooks/use-toast" import { sampleTasks } from "@/app/data/tasks" import { TaskTable, type Task } from "@/app/components/task-table" import PageHeader from "@/app/components/page-header" import { FileText } from "lucide-react" export default function RequirementsPage() { const router = useRouter() const [tasks, setTasks] = useState(sampleTasks) const handleTaskAction = (task: Task, action: string) => { switch (action) { case "View": toast({ title: "Viewing document", description: `Viewing ${task.requirement}`, }) // In a real app, you might navigate to a document view page or open a modal break case "Update": toast({ title: "Update document", description: `Opening ${task.requirement} for update`, }) // Navigate to update form break case "Request": toast({ title: "Request sent", description: `Requesting ${task.requirement} from client`, }) // Send request logic break default: break } } const handleAddTask = () => { toast({ title: "Add Requirement", description: "Opening form to add a new requirement", }) // In a real app, you would navigate to a form or open a modal } // Breadcrumbs for the requirements page const breadcrumbs = [{ label: "Requirements", href: "/requirements" }] return (

) } [V0_FILE]typescriptreact:file="app/examples/relationship-requirements.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { TaskTable, type Task } from "@/app/components/task-table" import { sampleTasks } from "@/app/data/tasks" interface RelationshipRequirementsProps { relationshipId: string } export function RelationshipRequirements({ relationshipId }: RelationshipRequirementsProps) { const [tasks, setTasks] = useState([]) // In a real app, you would fetch tasks for this specific relationship useEffect(() => { // This is just a simulation - in a real app you'd fetch from your API const filteredTasks = sampleTasks.filter((_, index) => index < 8) // Just show fewer tasks as an example setTasks(filteredTasks) }, [relationshipId]) const handleTaskAction = (task: Task, action: string) => { console.log(`Action ${action} on task ${task.id} for relationship ${relationshipId}`) // Handle the action based on your app's requirements } const handleAddTask = () => { console.log(`Add new task for relationship ${relationshipId}`) // Open a form to add a new task } return ( ) } [V0_FILE]typescriptreact:file="app/components/status-badge.tsx" isMerged="true" import { cn } from "@/lib/utils" type StatusType = // Relationship statuses | "Customer" | "Prospect" | "Lead" | "Former Customer" // Deal statuses | "In Progress" | "Approved" | "Pending Approval" | "Closed" // Loan statuses | "Active" | "Pending Closing" | "Past Due" | "Paid Off" // Task statuses | "Complete" | "In Progress" | "To Do" | "Missing" | "Pending" | "Exception" | "Waived" // Onboarding statuses | "Completed" | "Not Started" // Other statuses | string interface StatusBadgeProps { status: StatusType className?: string } export function StatusBadge({ status, className }: StatusBadgeProps) { // Define color mapping for different status types const getStatusColor = (status: StatusType) => { switch (status) { // Relationship statuses case "Customer": return "bg-green-100 text-green-800" case "Prospect": return "bg-blue-100 text-blue-800" case "Lead": return "bg-purple-100 text-purple-800" case "Former Customer": return "bg-gray-100 text-gray-800" // Deal statuses case "In Progress": return "bg-blue-100 text-blue-800" case "Approved": return "bg-green-100 text-green-800" case "Pending Approval": return "bg-yellow-100 text-yellow-800" case "Closed": return "bg-gray-100 text-gray-800" // Loan statuses case "Active": return "bg-green-100 text-green-800" case "Pending Closing": return "bg-yellow-100 text-yellow-800" case "Past Due": return "bg-red-100 text-red-800" case "Paid Off": return "bg-blue-100 text-blue-800" // Task statuses case "Complete": return "bg-green-100 text-green-800" case "To Do": return "bg-gray-100 text-gray-800" case "Missing": return "bg-red-100 text-red-800" case "Exception": return "bg-red-100 text-red-800" case "Waived": return "bg-gray-100 text-gray-800" // Onboarding statuses case "Completed": return "bg-green-100 text-green-800" case "Not Started": return "bg-yellow-100 text-yellow-800" // Default for any other status default: return "bg-gray-100 text-gray-800" } } return ( {status} ) } [V0_FILE]typescriptreact:file="components/status-badge.tsx" isMerged="true" import { cn } from "@/lib/utils" type StatusType = // Relationship statuses | "Customer" | "Prospect" | "Lead" | "Former Customer" // Deal statuses | "In Progress" | "Approved" | "Pending Approval" | "Closed" // Loan statuses | "Active" | "Pending Closing" | "Past Due" | "Paid Off" // Task statuses | "Complete" | "In Progress" | "To Do" | "Missing" | "Exception" | "Waived" // Onboarding statuses | "Completed" | "Not Started" // Other statuses | string interface StatusBadgeProps { status: StatusType className?: string } export function StatusBadge({ status, className }: StatusBadgeProps) { // Define color mapping for different status types const getStatusColor = (status: StatusType) => { switch (status) { // Relationship statuses case "Customer": return "bg-green-100 text-green-800" case "Prospect": return "bg-blue-100 text-blue-800" case "Lead": return "bg-purple-100 text-purple-800" case "Former Customer": return "bg-gray-100 text-gray-800" // Deal statuses case "In Progress": return "bg-blue-100 text-blue-800" case "Approved": return "bg-green-100 text-green-800" case "Pending Approval": return "bg-yellow-100 text-yellow-800" case "Closed": return "bg-gray-100 text-gray-800" // Loan statuses case "Active": return "bg-green-100 text-green-800" case "Pending Closing": return "bg-yellow-100 text-yellow-800" case "Past Due": return "bg-red-100 text-red-800" case "Paid Off": return "bg-blue-100 text-blue-800" // Task statuses case "Complete": return "bg-green-100 text-green-800" case "To Do": return "bg-gray-100 text-gray-800" case "Missing": return "bg-red-100 text-red-800" case "Exception": return "bg-red-100 text-red-800" case "Waived": return "bg-gray-100 text-gray-800" // Onboarding statuses case "Completed": return "bg-green-100 text-green-800" case "Not Started": return "bg-yellow-100 text-yellow-800" // Default for any other status default: return "bg-gray-100 text-gray-800" } } return ( {status} ) } [V0_FILE]typescriptreact:file="app/components/stepper.tsx" isMerged="true" "use client" import { Check } from "lucide-react" import { cn } from "@/lib/utils" export interface StepItem { id: string title: string description?: string } interface StepperProps { steps: StepItem[] currentStep: number onStepClick?: (stepIndex: number) => void } export function Stepper({ steps, currentStep, onStepClick }: StepperProps) { return (

{steps.map((step, index) => { const isCompleted = index < currentStep const isCurrent = index === currentStep const isClickable = onStepClick && (isCompleted || index === currentStep || index === currentStep + 1) return (

isClickable && onStepClick(index)} >

{isCompleted ? : index + 1}

{step.title}

{step.description &&

{step.description}

}

) })}

) } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes {} const Input = React.forwardRef(({ className, type, ...props }, ref) => { return ( ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true" "use client" import * as React from "react" import * as RadioGroupPrimitive from "@radix-ui/react-radio-group" import { Circle } from "lucide-react" import { cn } from "@/lib/utils" const RadioGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return }) RadioGroup.displayName = RadioGroupPrimitive.Root.displayName const RadioGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ) }) RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName export { RadioGroup, RadioGroupItem } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" import type * as React from "react" import { cn } from "@/lib/utils" export interface ChartContainerProps extends React.HTMLAttributes { config: Record } export function ChartContainer({ className, config, children }: ChartContainerProps) { return

{children}

} export interface ChartTooltipProps { children: React.ReactNode } export function ChartTooltip({ children }: ChartTooltipProps) { return <>{children} } export function ChartTooltipContent() { return (

) } export { BarChart, AreaChart, PieChart, } from "recharts" [V0_FILE]typescriptreact:file="app/components/scroll-to-top.tsx" isMerged="true" "use client" import { useEffect } from "react" import { usePathname, useSearchParams } from "next/navigation" export function ScrollToTop() { const pathname = usePathname() const searchParams = useSearchParams() useEffect(() => { // Scroll to top when the route changes if (typeof window !== "undefined") { // Add a small delay to ensure DOM is updated setTimeout(() => { window.scrollTo({ top: 0, left: 0, behavior: "instant", }) }, 0) } }, [pathname, searchParams]) return null } [V0_FILE]typescriptreact:file="app/components/banking-advisor-card.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Sparkles, Copy, ThumbsUp, ThumbsDown } from "lucide-react" import { Button } from "@/components/ui/button" export function BankingAdvisorCard() { const [activePage, setActivePage] = useState(0) const [expanded, setExpanded] = useState(false) const pages = [ { title: "Relationship Summary", content: "The borrower is currently 15 days past due and has breached 1 financial covenants, signaling potential ongoing financial stress. Key indicators include a Risk Rating of 10/15, a low Debt Service Coverage Ratio (DSCR) of 1.23, and a high Debt to Worth ratio of 5.5, alongside a Loan to Value of 77%, all of which reflect significant financial strain. Additionally, the estimated Loss Given Default stands at $75 million, substantially higher than the available $3.5 million in collateral, further highlighting the elevated risk profile.", }, { title: "Five C's of Credit", content: (

Character

Edge Communications has a strong reputation in the industry, with over 10 years in operation and good standing among vendors. Their credit report shows consistent on-time payments and a solid business credit score, making them a reliable applicant.

), }, { title: "Capacity", content: "Edge Communications demonstrates strong cash flow with a historical DSCR of 1.8x, though recent quarters show a decline to 1.23x. Their revenue has grown 12% year-over-year, but operating expenses have increased by 18%, putting pressure on margins.", }, { title: "Capital", content: "The company has $12M in equity against $66M in debt, resulting in a high leverage ratio of 5.5x. This is significantly above the industry average of 3.2x and represents a concerning trend as it has increased from 4.2x last year.", }, { title: "Collateral", content: "Current collateral value is estimated at $3.5M, covering only 4.7% of the total exposure. The primary collateral consists of equipment (60%) and accounts receivable (40%), with liquidation value estimated at 65% of book value.", }, ] const handlePageChange = (index: number) => { setActivePage(index) } return (

Banking Advisor

{pages[activePage].title}

{typeof pages[activePage].content === "string" ? (

{pages[activePage].content}

) : ( pages[activePage].content )}

{typeof pages[activePage].content === "string" && (

)}

{pages.map((_, index) => (

This content was generated using AI.

) } [V0_FILE]typescriptreact:file="app/components/credit-monitoring.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { BankingAdvisorCard } from "./banking-advisor-card" export function CreditMonitoring() { return (

{/* Days Past Due Card */} Days Past Due

15 days

Last payment: 05/15/2024

Current 30+ days 60+ days 90+ days

{/* DSCR Card */} Debt Service Coverage Ratio

1.23x

Minimum required: 1.25x

1.0x 1.5x 2.0x

{/* Banking Advisor Card */}

) } [V0_FILE]typescriptreact:file="app/credit-monitoring/page.tsx" isMerged="true" "use client" import { CreditMonitoring } from "@/app/components/credit-monitoring" import PageHeader from "@/app/components/page-header" import { AlertTriangle } from "lucide-react" export default function CreditMonitoringPage() { return (

) } [V0_FILE]typescriptreact:file="app/credit-monitoring/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

{[...Array(3)].map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="app/components/loan-resources.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { TableCard, SimpleTable } from "@/app/components/table-card" import { CheckCircle, Clock, AlertCircle } from "lucide-react" import { useRouter } from "next/navigation" import { StatusBadge } from "@/app/components/status-badge" interface LoanDocument { name: string status: string date: string owner: string } interface LoanTask { name: string status: string dueDate: string assignee: string } interface LoanTeamMember { name: string role: string email: string phone: string } interface LoanResourcesProps { loanDocuments: LoanDocument[] loanTasks: LoanTask[] loanTeam: LoanTeamMember[] } export function LoanResources({ loanDocuments, loanTasks, loanTeam }: LoanResourcesProps) { const router = useRouter() const getStatusIcon = (status: string) => { switch (status) { case "Complete": return case "In Progress": return case "To Do": return case "Exception": return case "Waived": return default: return } } return (

{/* Documents */} {}} footerContent={ } > {doc.name}, }, { key: "status" as keyof LoanDocument, header: "Status", cell: (doc) => , }, { key: "date" as keyof LoanDocument, header: "Date" }, { key: "owner" as keyof LoanDocument, header: "Owner" }, ]} showCheckbox={false} /> {/* Tasks */} {}} footerContent={ } > {task.name}, }, { key: "status" as keyof LoanTask, header: "Status", cell: (task) => , }, { key: "dueDate" as keyof LoanTask, header: "Due Date" }, { key: "assignee" as keyof LoanTask, header: "Assignee" }, ]} showCheckbox={true} /> {/* Team */} {}} footerContent={ } > {member.name}, }, { key: "role" as keyof LoanTeamMember, header: "Role" }, { key: "email" as keyof LoanTeamMember, header: "Email" }, { key: "phone" as keyof LoanTeamMember, header: "Phone" }, ]} showCheckbox={false} />

) } [V0_FILE]typescriptreact:file="app/components/tabs/spreads-tab.tsx" isMerged="true" "use client" import { FileText, Edit, Plus } from "lucide-react" import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" interface SpreadsTabProps { relationshipId: string } export function SpreadsTab({ relationshipId }: SpreadsTabProps) { return (

{/* Header with actions */}

Financial Spreads

Annual financial data

{/* Period selector */}

Period Selection

2024 2023 2022 2021 2020

{/* Financial Ratios */} Key Financial Ratios

Debt Service Coverage Ratio

1.12x

↓ 0.23x from 2023

Current Ratio

1.43x

↑ 0.15x from 2023

Debt to Worth

3.8x

↑ 0.7x from 2023

Return on Assets

8.2%

↑ 1.4% from 2023

Return on Equity

18.5%

↑ 2.3% from 2023

Inventory Turnover

5.8x

↑ 0.3x from 2023

{/* Profit & Loss Statement */} Profit & Loss Statement

Line Item	2024	2023	2022	% Change (YoY)
Revenue	$8,750,000	$7,850,000	$6,950,000	+11.5%
Cost of Goods Sold	$5,250,000	$4,710,000	$4,170,000	+11.5%
Gross Profit	$3,500,000	$3,140,000	$2,780,000	+11.5%
Operating Expenses	$2,100,000	$1,960,000	$1,805,000	+7.1%
Depreciation & Amortization	$350,000	$325,000	$300,000	+7.7%
Operating Income	$1,050,000	$855,000	$675,000	+22.8%
Interest Expense	$175,000	$157,000	$139,000	+11.5%
Other Income/Expenses	$25,000	$22,000	$18,000	+13.6%
Income Before Taxes	$900,000	$720,000	$554,000	+25.0%
Income Taxes	$225,000	$180,000	$138,500	+25.0%
Net Income	$675,000	$540,000	$415,500	+25.0%

) } [V0_FILE]typescriptreact:file="app/components/tabs/credit-monitoring-tab.tsx" isMerged="true" "use client" import { AlertCircle, BarChart4, CheckCircle, FileText } from "lucide-react" import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { StatusBadge } from "@/components/status-badge" import { Badge } from "@/components/ui/badge" interface CreditMonitoringTabProps { relationshipId: string } export function CreditMonitoringTab({ relationshipId }: CreditMonitoringTabProps) { return ( <>

{/* Days Past Due Card */} Days Past Due Current past due status

Current Past Due Days

30-60 Days: $125,000

60-90 Days: $75,000

>90 Days: $49,000

Historical Average 12 days

{/* Covenants Card */} Covenants Covenant compliance status

Covenants Breached

Minimum DSCR of 1.25x

Maximum Debt to Worth of 3.0x

Minimum Liquidity Ratio of 1.2x

Annual Financial Statements

{/* Risk Rating Card */} Risk Rating Current risk assessment

Current Risk Grade (1-7)

Low Risk High Risk

Previous Rating: 3 (12 months ago)

Rating Trend: Deteriorating

Next Review: June 15, 2025

{/* Debt Service Coverage Ratio Card */} Debt Service Coverage Ratio Ability to service debt obligations

1.12x

Current DSCR

0.5x 1.0x 1.5x 2.0x 2.5x

Required Minimum: 1.2x

Industry Average: 1.5x

Trend (12 mo): +0.15x

{/* Liquidity Ratio Card */} Liquidity Ratio Short-term financial health

1.43x

Current Ratio

0.5x 1.0x 1.5x 2.0x 2.5x

Required Minimum: 1.2x

Industry Average: 1.35x

Trend (12 mo): +0.15x

{/* Debt to Worth Ratio Card */} Debt to Worth Ratio Leverage and long-term solvency

3.8x

Current Ratio

1.0x 2.0x 3.0x 4.0x 5.0x

Maximum Allowed: 3.0x

Industry Average: 2.5x

Trend (12 mo): +0.7x

Credit History

Date Description Status Amount Impact Actions 05/10/2024 DSCR Covenant Breach - High 04/15/2024 Past Due Payment 30+ Days Late $125,000 High 03/31/2024 Annual Financial Statements - Low 02/28/2024 Credit Inquiry - Medium

) } [V0_FILE]typescriptreact:file="app/components/tabs/profitability-tab.tsx" isMerged="true" "use client" import { Building, Filter, ArrowUpDown, ChevronDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import type { initialRelationships } from "@/app/data/relationships" interface ProfitabilityTabProps { relationship: (typeof initialRelationships)[0] } export function ProfitabilityTab({ relationship }: ProfitabilityTabProps) { // Sample loan data for the profitability table const loanProfitabilityData = [ { name: "Port City Coffee Equipment Loan", maturityDate: "Sep 30, 2026", loanTerm: 60, currentLTV: "0%", allInRate: "-", raroc: 20.96, }, { name: "Port City Coffee CRE 3", maturityDate: "Sep 30, 2026", loanTerm: 60, currentLTV: "22.57%", allInRate: "-", raroc: 22.98, }, { name: "Port City Coffee Working Capital", maturityDate: "Mar 15, 2027", loanTerm: 36, currentLTV: "18.35%", allInRate: "-", raroc: 19.75, }, { name: "Port City Coffee Equipment Loan 2", maturityDate: "Dec 10, 2028", loanTerm: 48, currentLTV: "15.22%", allInRate: "-", raroc: 21.45, }, ] return (

{/* Main Profitability Cards */}

{/* Overall Profitability Card */} Profitability Card

RAROC 23.23%

Profitability Calculations

EVA $197,354.12

NIM 2.94%

ROA 3.23%

ROE 13.25%

SVA $197,536.57

{/* Port City Coffee Comparison Card */}

Port City Coffee

Relationship Record Type

Business

Shipping City

—

Actual

Proforma

RAROC

6.94%

18.74%

NIM

2.69%

—

ROA

0.65%

2.38%

ROE

10.41%

—

March 21, 2025 at 10:29 AM

{/* Christa Shelton Household Comparison Card */}

Christa Shelton Household

Relationship Record Type

Household

Shipping City

—

Actual

Proforma

RAROC

10.08%

12.07%

NIM

1.49%

—

ROA

5.55%

3.86%

ROE

7.59%

—

March 21, 2025 at 10:29 AM

{/* Business Line Profitability Cards */}

{/* Loans Card */} Loans

RAROC 21.83%

Income

Total Assets for Loans $3,300,000.00

Net Income $249,635.40

Operating Loan Income $1,054,472.60

Risk Adjusted Income $204,784.45

Capital

Capital Allocated for Loans $938,005.47

Cost of Loan Capital $56,280.33

{/* Deposits Card */} Deposits

RAROC 25.04%

Income

Total Liabilities for Deposits $5,000,000.00

Deposit Revenue $225,000.00

Operating Deposit Income $84,600.00

Risk Adjusted Net Deposit Income $62,604.00

Capital

Capital Allocated for Deposits $250,000.00

Cost of Deposit Capital $25,000.00

{/* Treasury Services Card */} Treasury Services

RAROC 58.83%

Income

Total Assets for Treasury $400,000.00

Operating Treasury Income $23,800.00

Risk Adjusted Net Treasury Income $11,760.00

Treasury EVA $9,760.00

Capital

Capital Allocated for Treasury $20,000.00

Cost of Treasury Capital $2,000.00

{/* Loan Profitability Table */}

Loan Profitability Table

Loan Name Maturity Date Loan Term (Months) Current LTV All-in Rate RAROC {loanProfitabilityData.map((loan, index) => ( {loan.name} {loan.maturityDate} {loan.loanTerm} {loan.currentLTV} {loan.allInRate}

22 ? "bg-green-100 text-green-800" : loan.raroc > 20 ? "bg-blue-100 text-blue-800" : "bg-yellow-100 text-yellow-800" }`} > {loan.raroc.toFixed(2)}%

))}

Showing 4 of 4 loans

) } [V0_FILE]typescriptreact:file="app/components/key-metrics-cards.tsx" isMerged="true" "use client" import { useRouter } from "next/navigation" import { Card, CardContent } from "@/components/ui/card" import { DollarSign, BarChart4, CreditCard } from "lucide-react" interface KeyMetricsCardsProps { relationshipId: string relationship: any } export function KeyMetricsCards({ relationshipId, relationship }: KeyMetricsCardsProps) { const router = useRouter() return (

router.push(`/relationships/${relationshipId}?tab=exposure`)} >

{relationship.totalExposure}

Total Exposure

{relationship.riskGrade}

Risk Grade (1-7)

{relationship.annualRevenue}

Annual Revenue

{relationship.totalDeposits}

Total Deposits

{relationship.ficoScore}

FICO Score

router.push(`/relationships/${relationshipId}?tab=profitability`)} >

26.57%

Profitability (RAROC)

) } [V0_FILE]typescriptreact:file="app/components/tabs/exposure-tab.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { TableCard, SimpleTable } from "@/app/components/table-card" import { ChartContainer } from "@/components/ui/chart" import { BarChart, Bar, PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts" import type { initialRelationships as RelationshipType } from "@/app/data/relationships" // Sample data for exposure breakdown const exposureData = { direct: [ { id: "loan-001", name: "Commercial Real Estate Loan", type: "Term Loan", amount: "$1,250,000", maturityDate: "06/15/2044", status: "Active", loanType: "Long Term", }, { id: "loan-002", name: "Equipment Financing", type: "Equipment Loan", amount: "$350,000", maturityDate: "08/01/2031", status: "Active", loanType: "Long Term", }, { id: "loan-008", name: "Commercial Property Development", type: "Commercial Loan", amount: "$3,500,000", maturityDate: "07/15/2039", status: "Active", loanType: "Long Term", }, { id: "loan-011", name: "Working Capital Line", type: "Line of Credit", amount: "$500,000", maturityDate: "05/15/2025", status: "Active", loanType: "Revolving", }, { id: "loan-012", name: "Inventory Financing", type: "Short Term Loan", amount: "$250,000", maturityDate: "03/30/2025", status: "Active", loanType: "Short Term", }, ], indirect: [ { id: "ind-001", name: "Subsidiary Loan Guarantee", type: "Guarantee", amount: "$750,000", maturityDate: "03/22/2026", status: "Active", loanType: "Long Term", }, { id: "ind-002", name: "Partner Company Credit Line", type: "Line of Credit", amount: "$500,000", maturityDate: "11/30/2025", status: "Active", loanType: "Revolving", }, ], affirmed: [ { id: "aff-001", name: "Letter of Credit - International Trade", type: "Letter of Credit", amount: "$1,200,000", maturityDate: "09/15/2025", status: "Active", loanType: "Short Term", }, { id: "aff-002", name: "Performance Bond - Construction Project", type: "Bond", amount: "$850,000", maturityDate: "12/31/2026", status: "Active", loanType: "Long Term", }, ], affiliated: [ { id: "afl-001", name: "Sister Company Loan", type: "Term Loan", amount: "$1,500,000", maturityDate: "06/30/2030", status: "Active", loanType: "Long Term", }, { id: "afl-002", name: "Parent Company Credit Line", type: "Line of Credit", amount: "$750,000", maturityDate: "04/15/2026", status: "Active", loanType: "Revolving", }, ], } interface ExposureTabProps { relationship: RelationshipType[0] } export function ExposureTab({ relationship }: ExposureTabProps) { const [activeTab, setActiveTab] = useState("all") // Calculate totals const directTotal = exposureData.direct.reduce( (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")), 0, ) const indirectTotal = exposureData.indirect.reduce( (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")), 0, ) const affirmedTotal = exposureData.affirmed.reduce( (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")), 0, ) const affiliatedTotal = exposureData.affiliated.reduce( (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")), 0, ) const grandTotal = directTotal + indirectTotal + affirmedTotal const totalWithAffiliated = grandTotal + affiliatedTotal // Define exposure cap and calculate remaining exposure const exposureCap = 15000000 const remainingExposure = exposureCap - totalWithAffiliated // Prepare data for charts const exposureBreakdownData = [ { name: "Direct", value: directTotal, color: "#3b82f6" }, { name: "Indirect", value: indirectTotal, color: "#10b981" }, { name: "Affirmed", value: affirmedTotal, color: "#f59e0b" }, { name: "Affiliated", value: affiliatedTotal, color: "#8b5cf6" }, ] const exposureCapData = [ { name: "Used", value: totalWithAffiliated, color: "#3b82f6" }, { name: "Remaining", value: remainingExposure, color: "#10b981" }, ] // Custom label for pie chart const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }) => { const RADIAN = Math.PI / 180 const radius = innerRadius + (outerRadius - innerRadius) * 0.5 const x = cx + radius * Math.cos(-midAngle * RADIAN) const y = cy + radius * Math.sin(-midAngle * RADIAN) return ( cx ? "start" : "end"} dominantBaseline="central" fontSize={14} fontWeight="bold" > {`${name} ${(percent * 100).toFixed(0)}%`} ) } return (

{/* Exposure Content */}

Exposure Summary

{/* Column 1: Main Exposure Metrics - Takes 2/5 of the space */}

Total Exposure: ${grandTotal.toLocaleString()}

Direct Debt: ${directTotal.toLocaleString()}

Indirect Debt: ${indirectTotal.toLocaleString()}

Affirmed Debt: ${affirmedTotal.toLocaleString()}

Affiliated Exposure: ${affiliatedTotal.toLocaleString()}

Total with Affiliated: ${totalWithAffiliated.toLocaleString()}

Exposure Cap: ${exposureCap.toLocaleString()}

[`$${Number(value).toLocaleString()}`, ""]} labelFormatter={() => "Exposure"} />

Remaining Exposure: ${remainingExposure.toLocaleString()}

{/* Column 2: Exposure Breakdown Chart - Takes 3/5 of the space */}

{exposureBreakdownData.map((entry, index) => ( ))} [`$${Number(value).toLocaleString()}`, ""]} contentStyle={{ backgroundColor: "white", borderRadius: "4px", border: "1px solid #e2e8f0" }} /> ( {value} )} />

{/* Tabs for different exposure types */} All Exposure Direct Debt (${directTotal.toLocaleString()}) Indirect Debt (${indirectTotal.toLocaleString()}) Affirmed Debt (${affirmedTotal.toLocaleString()}) Affiliated (${affiliatedTotal.toLocaleString()}) {/* All Exposure Tab */} {/* Direct Debt */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.direct)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.direct)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.direct)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.direct)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.direct)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Indirect Debt */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.indirect)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.indirect)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.indirect)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.indirect)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.indirect)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Affirmed Debt */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.affirmed)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.affirmed)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.affirmed)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.affirmed)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.affirmed)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Affiliated Exposure */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.affiliated)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.affiliated)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.affiliated)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.affiliated)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.affiliated)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Direct Debt Tab */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.direct)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.direct)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.direct)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.direct)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.direct)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Indirect Debt Tab */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.indirect)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.indirect)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.indirect)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.indirect)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.indirect)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Affirmed Debt Tab */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.affirmed)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.affirmed)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.affirmed)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.affirmed)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.affirmed)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} /> {/* Affiliated Exposure Tab */} {}} > ( {item.name} ), }, { key: "type" as keyof (typeof exposureData.affiliated)[0], header: "Type" }, { key: "amount" as keyof (typeof exposureData.affiliated)[0], header: "Amount" }, { key: "maturityDate" as keyof (typeof exposureData.affiliated)[0], header: "Maturity Date" }, { key: "loanType" as keyof (typeof exposureData.affiliated)[0], header: "Loan Type" }, { key: "status" as keyof (typeof exposureData.affiliated)[0], header: "Status", cell: (item) => ( {item.status} ), }, ]} />

) } [V0_FILE]typescriptreact:file="app/components/tabs/loan-payments-tab.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Filter, Download, Plus, MoreHorizontal, DollarSign, Calendar, CreditCard } from "lucide-react" import { StatusBadge } from "@/app/components/status-badge" export interface LoanPaymentsTabProps { loan: any paymentHistory: any[] } export function LoanPaymentsTab({ loan, paymentHistory }: LoanPaymentsTabProps) { return (

Payment History

{loan.paymentAmount}

Monthly Payment

{loan.nextPaymentDate}

Next Payment Due

Auto-debit

Payment Method

Date Amount Status Method Confirmation Actions {paymentHistory.map((payment, index) => ( {payment.date} {payment.amount} {payment.method} {payment.confirmationNumber} View Details Download Receipt Report Issue ))}

) } [V0_FILE]typescriptreact:file="app/components/tabs/loan-notes-tab.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Filter, Search, Plus, MoreHorizontal, MessageSquare } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export interface LoanNotesTabProps { loanNotes: any[] } export function LoanNotesTab({ loanNotes }: LoanNotesTabProps) { return (

Loan Notes

{loanNotes.map((note, index) => (

{note.title}

{note.date} {note.time} Edit Delete Share

{note.content}

{note.author .split(" ") .map((n) => n[0]) .join("")}

{note.author}

))}

) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-documents.tsx" isMerged="true" import { FileText, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptyDocuments() { return ( No Documents Yet Documents for this relationship will appear here once they are uploaded. ) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-tasks.tsx" isMerged="true" import { CheckSquare, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptyTasks() { return ( No Tasks Yet Tasks for this relationship will appear here once they are created. ) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-spreads.tsx" isMerged="true" import { BarChart2, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptySpreads() { return ( No Spreads Yet Financial spreads for this relationship will appear here once they are created. ) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-credit-monitoring.tsx" isMerged="true" import { LineChart, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptyCreditMonitoring() { return ( No Credit Monitoring Data Yet Credit monitoring data for this relationship will appear here once it's available. ) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-cashflow.tsx" isMerged="true" import { TrendingUp, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptyCashflow() { return ( No Cashflow Data Yet Cashflow analysis data for this relationship will appear here once it's available. ) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-exposure.tsx" isMerged="true" import { PieChart, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptyExposure() { return ( No Exposure Data Yet Exposure data for this relationship will appear here once it's available. ) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-profitability.tsx" isMerged="true" import { DollarSign, Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export function EmptyProfitability() { return ( No Profitability Data Yet Profitability data for this relationship will appear here once it's available. ) } [V0_FILE]typescriptreact:file="app/relationships/[id]/page.tsx" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { useRouter, useParams } from "next/navigation" import { Building, Plus, CheckCircle, Clock, AlertCircle } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import PageHeader from "@/app/components/page-header" import { type initialRelationships, relationshipExtendedData } from "@/app/data/relationships" import { initialDeals } from "@/app/data/deals" import { getRelationshipById } from "@/lib/relationship-store" import { RelationshipTabs } from "@/app/components/relationship-tabs" import { RelationshipTabManager } from "@/app/components/tabs/relationship-tab-manager" // Sample data for charts based on the projection table const leaseRolloverData = [ { year: "2025", "222 Market Street": 5, "4800 Parker Farm Ln": 8, "456 Greenville Rd": 2, total: 15, }, { year: "2026", "222 Market Street": 10, "4800 Parker Farm Ln": 5, "456 Greenville Rd": 10, total: 25, }, { year: "2027", "222 Market Street": 3, "4800 Parker Farm Ln": 2, "456 Greenville Rd": 5, total: 10, }, { year: "2028", "222 Market Street": 15, "4800 Parker Farm Ln": 12, "456 Greenville Rd": 8, total: 35, }, { year: "2029", "222 Market Street": 2, "4800 Parker Farm Ln": 1, "456 Greenville Rd": 2, total: 5, }, { year: "2030", "222 Market Street": 3, "4800 Parker Farm Ln": 4, "456 Greenville Rd": 3, total: 10, }, ] // NOI data from the projection table const noiData = [ { year: "2025", "222 Market Street": 55000, "4800 Parker Farm Ln": 107500, "456 Greenville Rd": 69375, total: 231875, }, { year: "2026", "222 Market Street": 61950, "4800 Parker Farm Ln": 101175, "456 Greenville Rd": 82056, total: 245181, }, { year: "2027", "222 Market Street": 53958, "4800 Parker Farm Ln": 119961, "456 Greenville Rd": 69818, total: 243737, }, { year: "2028", "222 Market Street": 66028, "4800 Parker Farm Ln": 113859, "456 Greenville Rd": 82663, total: 262550, }, { year: "2029", "222 Market Street": 63158, "4800 Parker Farm Ln": 122875, "456 Greenville Rd": 80593, total: 266626, }, { year: "2030", "222 Market Street": 70352, "4800 Parker Farm Ln": 117011, "456 Greenville Rd": 93610, total: 280973, }, ] // Tenant concentration data based on the properties const tenantConcentrationData = [ { name: "Coastal Medical Group (222 Market)", value: 25 }, { name: "Tech Solutions Inc. (Parker Farm)", value: 22 }, { name: "Wilmington Law Firm (Greenville)", value: 18 }, { name: "Regional Bank (Parker Farm)", value: 15 }, { name: "Coffee Chain (222 Market)", value: 10 }, { name: "Other Tenants", value: 10 }, ] // DSCR data from the projection table const dscrData = [ { year: "2025", value: 1.43 }, { year: "2026", value: 1.51 }, { year: "2027", value: 1.5 }, { year: "2028", value: 1.62 }, { year: "2029", value: 1.65 }, { year: "2030", value: 1.73 }, ] const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"] export default function RelationshipDetailPage() { const router = useRouter() const params = useParams() const id = params.id as string const [priorityTab, setPriorityTab] = useState("tasks") const [spreadsTab, setSpreadsTab] = useState("financial") const [monitoringTab, setMonitoringTab] = useState("alerts") const [documentsTab, setDocumentsTab] = useState("documents") const [relationship, setRelationship] = useState<(typeof initialRelationships)[0] | null>(null) const [loading, setLoading] = useState(true) const [selectedDocument, setSelectedDocument] = useState<(typeof relationshipExtendedData.documents)[0] | null>(null) const [isDocumentDrawerOpen, setIsDocumentDrawerOpen] = useState(false) const [cashflowView, setCashflowView] = useState("dashboard") const [isTableEditable, setIsTableEditable] = useState(false) const [activeScenario, setActiveScenario] = useState("actual") // Find the relationship data based on the ID from the URL useEffect(() => { // In a real app, this would be an API call const foundRelationship = getRelationshipById(id) if (foundRelationship) { setRelationship(foundRelationship) } else { // If not found, show an error message console.error(`Relationship with ID ${id} not found`) // Keep relationship as null so we can show an error state } setLoading(false) }, [id]) // Add this after the useEffect hook const refreshRelationship = useCallback(() => { const updatedRelationship = getRelationshipById(id) if (updatedRelationship) { setRelationship(updatedRelationship) } }, [id]) // Filter deals for this relationship const relationshipDeals = initialDeals.filter((deal) => deal.relationshipId === id) // Filter loans for this relationship const relationshipLoans = relationshipExtendedData.loans.filter((loan) => loan.relationshipId === id) // If loading, show loading state if (loading) { return

Loading relationship details...

} // If relationship not found, show error state if (!relationship) { return (

Relationship Not Found

The relationship you're looking for doesn't exist or may have been removed.

) } // Calculate relationship statistics const completedDocuments = relationshipExtendedData.documents.filter((doc) => doc.status === "Complete").length const pendingDocuments = relationshipExtendedData.documents.filter( (doc) => doc.status === "To Do" || doc.status === "In Progress", ).length const totalContacts = relationshipExtendedData.onboardingSummary.length const totalDeals = relationshipDeals.length const totalLoans = relationshipLoans.length const getStatusIcon = (status: string) => { switch (status) { case "Complete": return case "In Progress": return case "To Do": return case "Exception": return case "Waived": return default: return } } const handleSaveChanges = () => { setIsTableEditable(false) // In a real app, you would save the changes to the database here alert("Changes saved successfully!") } return (

{/* Relationship Header - Now using the relationship name from the data */} } /> {/* Navigation Tabs */} {/* Tab Content */}

) } [V0_FILE]typescriptreact:file="app/components/tabs/credit-resources-tab.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { StatusBadge } from "@/components/status-badge" import { RelationshipSidebar } from "@/app/components/relationship-sidebar" import { Plus, FileText, Shield, Briefcase } from "lucide-react" import { EmptyCreditResources } from "../empty-states/empty-credit-resources" interface CreditResourcesTabProps { relationshipId: string relationship: any refreshRelationship: () => void } export function CreditResourcesTab({ relationshipId, relationship, refreshRelationship }: CreditResourcesTabProps) { // Debug log to check if relationship data is being received console.log("CreditResourcesTab - relationship:", relationship) // If relationship is undefined or null, show a loading state if (!relationship) { return

Loading relationship data...

} // Check if this is a new relationship (created less than 24 hours ago) const isNewRelationship = relationship?.dateCreated ? new Date().getTime() - new Date(relationship.dateCreated).getTime() < 86400000 : false // Show empty state for new relationships if (isNewRelationship) { return } return (

{/* Left Column - 1/3 width */}

{/* Right Column - 2/3 width */}

{/* Credit Score Section */} Credit Score

Current FICO Score: {relationship?.ficoScore || "N/A"}

{relationship?.ficoScore ? ( <>

= 740 ? "bg-green-500" : Number(relationship.ficoScore) >= 670 ? "bg-yellow-500" : "bg-red-500" }`} style={{ width: `${(Number(relationship.ficoScore) / 850) * 100}%` }} >

Poor Fair Good Very Good Excellent

) : (

No credit score data available

)}

Previous Score: 760 (6 months ago)

Score Change: -20

Last Updated: 05/01/2024

Key Factors Affecting Score

High credit utilization (68% of available credit)
Recent credit inquiries (3 in last 6 months)
Long credit history (18 years)
No missed payments in last 24 months

{/* Collateral Section */}

Collateral

Description Type Value LTV Status Actions Office Building - 123 Main St Commercial Real Estate $3,500,000 65% Manufacturing Equipment Equipment $750,000 70% Accounts Receivable AR $1,250,000 75%

{/* Covenants Section */}

Covenants

Description Type Threshold Current Value Status Actions Debt Service Coverage Ratio Financial ≥ 1.25x 1.35x Debt to EBITDA Ratio Financial ≤ 3.5x 3.2x Current Ratio Financial ≥ 1.2x 1.1x Annual Financial Statements Reporting Annual Submitted 03/15/2024

{/* Policy Exceptions Section */}

Policy Exceptions

Description Reason Approval Date Expiration Date Status Actions LTV Exception Strong cash flow and deposit relationship 01/15/2024 01/15/2025 Debt to Income Ratio Significant liquid assets 03/22/2024 03/22/2025 Collateral Exception Strong guarantor support 11/05/2023 11/05/2024

) } [V0_FILE]typescriptreact:file="app/components/empty-states/empty-credit-resources.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { FileText, Plus, Shield, Briefcase } from "lucide-react" interface EmptyCreditResourcesProps { relationshipId?: string } export function EmptyCreditResources({ relationshipId }: EmptyCreditResourcesProps) { return (

{/* Credit Score Section */} Credit Score Track and monitor credit scores for this relationship

No Credit Score Data Available

Run a credit check to view the credit score and related information for this relationship.

{/* Collateral Section */} Collateral Track assets used as collateral for loans

No Collateral Added

Add collateral assets to track their values, loan-to-value ratios, and status.

{/* Covenants Section */} Covenants Track financial and reporting covenants

No Covenants Added

Add covenants to track compliance with financial and reporting requirements.

{/* Policy Exceptions Section */} Policy Exceptions Track exceptions to standard lending policies

No Policy Exceptions

Add policy exceptions to track approvals and expirations for non-standard terms.

) } [V0_FILE]typescriptreact:file="app/components/banking-advisor-chat.tsx" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Send, X, Sparkles } from "lucide-react" import { Button } from "@/components/ui/button" interface Message { id: string content: string sender: "user" | "assistant" timestamp: Date } interface BankingAdvisorChatProps { onClose: () => void } export function BankingAdvisorChat({ onClose }: BankingAdvisorChatProps) { const [messages, setMessages] = useState([ { id: "1", content: "Hello! I'm your Banking Advisor. How can I help you today?", sender: "assistant", timestamp: new Date(), }, ]) const [inputValue, setInputValue] = useState("") const [isTyping, setIsTyping] = useState(false) const messagesEndRef = useRef(null) const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) } useEffect(() => { scrollToBottom() }, [messages]) const handleSendMessage = () => { if (inputValue.trim() === "") return const newUserMessage: Message = { id: `user-${Date.now()}`, content: inputValue, sender: "user", timestamp: new Date(), } setMessages((prev) => [...prev, newUserMessage]) setInputValue("") setIsTyping(true) // Simulate AI response after a delay setTimeout(() => { const responses = [ "I can help you analyze the financial health of this relationship.", "Based on the current data, I recommend reviewing the covenant compliance.", "Would you like me to prepare a summary of key risk indicators?", "I notice this relationship has some potential cash flow issues. Would you like me to analyze them further?", "Let me know if you need any specific financial analysis for this relationship.", ] const randomResponse = responses[Math.floor(Math.random() * responses.length)] const newAssistantMessage: Message = { id: `assistant-${Date.now()}`, content: randomResponse, sender: "assistant", timestamp: new Date(), } setMessages((prev) => [...prev, newAssistantMessage]) setIsTyping(false) }, 1500) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSendMessage() } } return (

Banking Advisor

{messages.map((message) => (

{message.sender === "assistant" && (

Banking Advisor

)}

{message.content}

{message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}

))} {isTyping && (

)}

setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
          />
          <Button size="icon" onClick={handleSendMessage} disabled={inputValue.trim() === ""}>
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    fontSize: {
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.25rem" }],
      base: ["1rem", { lineHeight: "1.5rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
      "5xl": ["3rem", { lineHeight: "1" }],
      "6xl": ["3.75rem", { lineHeight: "1" }],
      "7xl": ["4.5rem", { lineHeight: "1" }],
      "8xl": ["6rem", { lineHeight: "1" }],
      "9xl": ["8rem", { lineHeight: "1" }],
    },
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: [
          "var(--font-open-sans)",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
        ],
        serif: ["var(--font-avenir)", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
        xl: "16px",
      },
      boxShadow: {
        card: "0 4px 20px rgba(0,0,0,0.08)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescriptreact:file="app/components/email-window.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Send } from "lucide-react"
import { Button } from "@/components/ui/button"

interface EmailWindowProps {
  onClose: () => void
  recipientName: string
  recipientEmail: string
  subject: string
  defaultContent: string
}

export function EmailWindow({ onClose, recipientName, recipientEmail, subject, defaultContent }: EmailWindowProps) {
  const [emailContent, setEmailContent] = useState(defaultContent)
  const [isSending, setIsSending] = useState(false)
  const [isSent, setIsSent] = useState(false)

const handleSendEmail = () => {
    setIsSending(true)

// Simulate sending email
    setTimeout(() => {
      setIsSending(false)
      setIsSent(true)

// Close the window after showing success message
      setTimeout(() => {
        onClose()
      }, 2000)
    }, 1500)
  }

return (
    <div className="fixed z-50 bg-white rounded-lg shadow-xl border border-gray-200 w-[700px] h-[75vh] bottom-20 right-8 flex flex-col">
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        <h5 className="font-medium text-lg">Compose Email</h5>
        <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
          <X className="h-4 w-4" />
        </Button>
      </div>

{/* Email Form */}
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {isSent ? (
          <div className="flex items-center justify-center h-full">
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 mb-4">
                <svg
                  className="w-8 h-8 text-green-500"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
                </svg>
              </div>
              <h3 className="text-xl font-medium text-gray-900 mb-2">Email Sent Successfully</h3>
              <p className="text-gray-600">Your email has been sent to {recipientName}.</p>
            </div>
          </div>
        ) : (
          <>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">To:</label>
              <div className="flex items-center space-x-2 border rounded-md p-2 bg-gray-50">
                <span className="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-1 rounded flex items-center">
                  {recipientName} <span className="text-gray-500 ml-1"><{recipientEmail}></span>
                </span>
              </div>
            </div>

<div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Subject:</label>
              <input
                type="text"
                value={subject}
                readOnly
                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 bg-gray-50"
              />
            </div>

<div className="flex-1">
              <label className="block text-sm font-medium text-gray-700 mb-1">Message:</label>
              <div
                contentEditable
                dangerouslySetInnerHTML={{ __html: emailContent }}
                onBlur={(e) => setEmailContent(e.currentTarget.innerHTML)}
                className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 min-h-[200px] overflow-y-auto"
              />
            </div>
          </>
        )}
      </div>

{/* Footer */}
      {!isSent && (
        <div className="border-t border-gray-200 p-4 flex justify-end">
          <Button variant="outline" onClick={onClose} className="mr-2">
            Cancel
          </Button>
          <Button
            onClick={handleSendEmail}
            disabled={isSending}
            className="bg-blue-500 hover:bg-blue-600 flex items-center space-x-2"
          >
            {isSending ? (
              <>
                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                <span>Sending...</span>
              </>
            ) : (
              <>
                <Send className="h-4 w-4" />
                <span>Send Email</span>
              </>
            )}
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/footer.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Sparkles, ClipboardList, Calculator } from "lucide-react"
import { BankingAdvisorChatWindow } from "@/app/components/banking-advisor-chat-window"

export default function Footer() {
  const [activeItem, setActiveItem] = useState<string | null>(null)
  const [showBankingAdvisor, setShowBankingAdvisor] = useState(false)

const handleItemClick = (item: string) => {
    if (item === "Banking Advisor") {
      setShowBankingAdvisor(!showBankingAdvisor)
      return
    }

if (activeItem === item) {
      setActiveItem(null)
    } else {
      setActiveItem(item)
    }
  }

return (
    <>
      {showBankingAdvisor && <BankingAdvisorChatWindow onClose={() => setShowBankingAdvisor(false)} />}

<footer className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-3 px-4 z-40">
        <div className="flex items-center justify-end space-x-8">
          <button
            onClick={() => handleItemClick("Quick Price")}
            className="flex items-center space-x-2 hover:bg-gray-100 rounded-md px-2 py-1 transition-colors"
          >
            <div className="p-1">
              <div className="h-5 w-5 bg-gray-100 rounded flex items-center justify-center">
                <Calculator className="h-3 w-3 text-gray-600" />
              </div>
            </div>
            <span className="text-sm font-medium text-gray-600">Quick Price</span>
          </button>

<button
            onClick={() => handleItemClick("Priority Manager")}
            className="flex items-center space-x-2 hover:bg-gray-100 rounded-md px-2 py-1 transition-colors"
          >
            <div className="p-1">
              <div className="h-5 w-5 bg-gray-100 rounded flex items-center justify-center">
                <ClipboardList className="h-3 w-3 text-gray-600" />
              </div>
            </div>
            <span className="text-sm font-medium text-gray-600">Priority Manager</span>
          </button>

<button
            onClick={() => handleItemClick("Banking Advisor")}
            className="flex items-center space-x-2 hover:bg-gray-100 rounded-md px-2 py-1 transition-colors"
          >
            <div className="p-1">
              <div
                className={`h-5 w-5 ${showBankingAdvisor ? "bg-blue-100" : "bg-gray-100"} rounded flex items-center justify-center`}
              >
                <Sparkles className={`h-3 w-3 ${showBankingAdvisor ? "text-blue-600" : "text-gray-600"}`} />
              </div>
            </div>
            <span className={`text-sm font-medium ${showBankingAdvisor ? "text-blue-600" : "text-gray-600"}`}>
              Banking Advisor
            </span>
          </button>
        </div>
      </footer>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true"
... This file was left out for brevity. Assume it is correct and does not need any modifications. ...

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

h1 {
  font-size: 2rem;
}
[V0_FILE]typescriptreact:file="app/tasks/page.tsx" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import { GlobalTasksCard } from "@/app/components/global-tasks-card"
import { globalTasks } from "@/app/data/global-tasks"
import PageHeader from "@/app/components/page-header"
import { CheckSquare } from "lucide-react"

export default function TasksPage() {
  const router = useRouter()

// Breadcrumbs for the tasks page
  const breadcrumbs = [{ label: "Tasks", href: "/tasks" }]

return (
    <div className="flex-1 p-4 space-y-4">
      <PageHeader
        title="Tasks"
        subtitle="Manage all your tasks across relationships, deals, and loans"
        icon={CheckSquare}
        breadcrumbs={breadcrumbs}
      />

<GlobalTasksCard tasks={globalTasks} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tasks/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import PageHeader from "@/app/components/page-header"
import { CheckSquare } from "lucide-react"

export default function TasksLoading() {
  // Breadcrumbs for the tasks page
  const breadcrumbs = [{ label: "Tasks", href: "/tasks" }]

<Card>
        <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
          <Skeleton className="h-6 w-32" />
          <div className="flex space-x-2">
            <Skeleton className="h-8 w-24" />
          </div>
        </CardHeader>
        <CardContent className="px-4 pb-4 pt-0">
          <div className="space-y-2 mb-4">
            <div className="flex space-x-2">
              <Skeleton className="h-9 w-64" />
              <Skeleton className="h-9 w-32" />
              <Skeleton className="h-9 w-32" />
            </div>
          </div>
          <div className="border rounded-lg overflow-hidden">
            <div className="bg-gray-50 border-b p-3">
              <div className="grid grid-cols-6 gap-4">
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-4 w-full" />
              </div>
            </div>
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="border-b p-3">
                <div className="grid grid-cols-6 gap-4">
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-full" />
                  <Skeleton className="h-4 w-full" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/shared/document-table.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search, Filter, ArrowUpDown, MoreHorizontal, Plus, CheckCircle, Clock, AlertCircle } from "lucide-react"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DocumentDrawer } from "@/app/components/document-drawer"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export interface Document {
  name: string
  clientName?: string
  status: string
  date?: string
  dueDate?: string
  assignedTo?: string
  owner?: string
  type?: string
  uploadDate?: string
  fileSize?: string
  lastModified?: string
  version?: string
  tags?: string[]
  description?: string
}

export interface DocumentTableProps {
  documents: Document[]
  showClientColumn?: boolean
  showAssignedToColumn?: boolean
  showOwnerColumn?: boolean
  showAddButton?: boolean
  title?: string
  onAddDocument?: () => void
}

export function DocumentTable({
  documents,
  showClientColumn = false,
  showAssignedToColumn = false,
  showOwnerColumn = false,
  showAddButton = false,
  title = "Documents",
  onAddDocument,
}: DocumentTableProps) {
  const [selectedDocument, setSelectedDocument] = useState<Document | null>(null)
  const [isDocumentDrawerOpen, setIsDocumentDrawerOpen] = useState(false)

const completedDocuments = documents.filter((doc) => doc.status === "Complete").length

const getStatusIcon = (status: string) => {
    switch (status) {
      case "Complete":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "In Progress":
        return <Clock className="h-5 w-5 text-blue-500" />
      case "To Do":
        return <Clock className="h-5 w-5 text-gray-500" />
      case "Exception":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "Waived":
        return <CheckCircle className="h-5 w-5 text-gray-400" />
      default:
        return <CheckCircle className="h-5 w-5 text-gray-400" />
    }
  }

return (
    <>
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <CardTitle className="text-lg">
            {title} ({completedDocuments}/{documents.length})
          </CardTitle>
          <div className="flex items-center space-x-2">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
              <Input placeholder="Search documents..." className="pl-9 w-64" />
            </div>
            <Button variant="outline" size="sm">
              <Filter className="h-4 w-4 mr-1" />
              Filter
            </Button>
            <Button variant="outline" size="sm">
              <ArrowUpDown className="h-4 w-4 mr-1" />
              Sort
            </Button>
            {showAddButton && (
              <Button className="bg-blue-900" onClick={onAddDocument}>
                <Plus className="h-4 w-4 mr-1" />
                Add Document
              </Button>
            )}
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-[30px]">
                  <input type="checkbox" className="rounded border-gray-300" />
                </TableHead>
                <TableHead>Name</TableHead>
                {showClientColumn && <TableHead>Client Name</TableHead>}
                {showAssignedToColumn && <TableHead>Assigned To</TableHead>}
                {showOwnerColumn && <TableHead>Owner</TableHead>}
                <TableHead>{documents[0]?.dueDate ? "Due Date" : "Date"}</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="w-[50px]"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {documents.map((doc, index) => (
                <TableRow key={index}>
                  <TableCell className="py-1.5 px-2">
                    <input type="checkbox" className="rounded border-gray-300" />
                  </TableCell>
                  <TableCell
                    className="py-1.5 px-2 font-medium text-blue-900 hover:underline cursor-pointer"
                    onClick={() => {
                      setSelectedDocument(doc)
                      setIsDocumentDrawerOpen(true)
                    }}
                  >
                    {doc.name}
                  </TableCell>
                  {showClientColumn && <TableCell className="py-1.5 px-2">{doc.clientName}</TableCell>}
                  {showAssignedToColumn && <TableCell className="py-1.5 px-2">{doc.assignedTo}</TableCell>}
                  {showOwnerColumn && <TableCell className="py-1.5 px-2">{doc.owner}</TableCell>}
                  <TableCell className="py-1.5 px-2">{doc.dueDate || doc.date}</TableCell>
                  <TableCell className="py-1.5 px-2">
                    <div className="flex items-center">
                      {getStatusIcon(doc.status)}
                      <span className="ml-2">{doc.status}</span>
                    </div>
                  </TableCell>
                  <TableCell className="py-1.5 px-2">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8 p-0">
                          <MoreHorizontal className="h-4 w-4" />
                          <span className="sr-only">Open menu</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>View</DropdownMenuItem>
                        <DropdownMenuItem>Download</DropdownMenuItem>
                        <DropdownMenuItem>Edit</DropdownMenuItem>
                        <DropdownMenuItem>Share</DropdownMenuItem>
                        <DropdownMenuItem>Update Status</DropdownMenuItem>
                        <DropdownMenuItem className="text-red-600">Delete</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>

<DocumentDrawer
        isOpen={isDocumentDrawerOpen}
        onClose={() => setIsDocumentDrawerOpen(false)}
        document={selectedDocument}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/documents-tab.tsx" isMerged="true"
"use client"

import { DocumentTable } from "@/app/components/shared/document-table"
import { relationshipExtendedData } from "@/app/data/relationships"

interface DocumentsTabProps {
  relationshipId: string
}

export function DocumentsTab({ relationshipId }: DocumentsTabProps) {
  return (
    <DocumentTable documents={relationshipExtendedData.documents} showClientColumn={true} showAssignedToColumn={true} />
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/deal-documents-tab.tsx" isMerged="true"
"use client"

import { DocumentTable } from "@/app/components/shared/document-table"

export interface DealDocumentsTabProps {
  dealDocuments: any[]
}

export function DealDocumentsTab({ dealDocuments }: DealDocumentsTabProps) {
  return (
    <DocumentTable
      documents={dealDocuments}
      showOwnerColumn={true}
      showAddButton={true}
      title="Deal Documents"
      onAddDocument={() => console.log("Add document clicked")}
    />
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-documents-tab.tsx" isMerged="true"
"use client"

import { DocumentTable } from "@/app/components/shared/document-table"
import { Card, CardContent } from "@/components/ui/card"
import { FileText, CheckCircle, Clock } from "lucide-react"

export interface LoanDocumentsTabProps {
  loanDocuments: any[]
  getStatusIcon: (status: string) => JSX.Element
}

export function LoanDocumentsTab({ loanDocuments, getStatusIcon }: LoanDocumentsTabProps) {
  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-blue-500 p-1 rounded">
                <FileText className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loanDocuments.length}</span>
            </div>
            <div className="text-sm text-gray-500">Total Documents</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <CheckCircle className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loanDocuments.filter((d) => d.status === "Complete").length}</span>
            </div>
            <div className="text-sm text-gray-500">Completed Documents</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-yellow-500 p-1 rounded">
                <Clock className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loanDocuments.filter((d) => d.status !== "Complete").length}</span>
            </div>
            <div className="text-sm text-gray-500">Pending Documents</div>
          </CardContent>
        </Card>
      </div>

<DocumentTable
        documents={loanDocuments}
        showOwnerColumn={true}
        showAddButton={true}
        title="Loan Documents"
        onAddDocument={() => console.log("Add document clicked")}
      />
    </>
  )
}
[V0_FILE]typescript:file="app/data/onboarding.ts" isMerged="true"
// Sample data for onboarding
export const initialOnboardingData = [
  {
    id: "port-city-coffee-123",
    name: "Port City Coffee",
    status: "In Progress",
    type: "Business",
    progress: 75,
    startDate: "05/25/2024",
    owner: "Naomi Vu",
    verification: "Verified",
  },
  {
    id: "lilliana-jacobs-201",
    name: "Lilliana Jacobs",
    status: "In Progress",
    type: "Individual",
    progress: 45,
    startDate: "05/26/2024",
    owner: "Naomi Vu",
    verification: "Review",
  },
  {
    id: "stan-lee-202",
    name: "Stan Lee",
    status: "In Progress",
    type: "Individual",
    progress: 60,
    startDate: "05/26/2024",
    owner: "Naomi Vu",
    verification: "Verified",
  },
  {
    id: "smiths-bakery-203",
    name: "Smith's Bakery",
    status: "Not Started",
    type: "Business",
    progress: 0,
    startDate: "05/27/2024",
    owner: "Naomi Vu",
    verification: "Waiting",
  },
  {
    id: "mindy-baker-204",
    name: "Mindy Baker",
    status: "Not Started",
    type: "Individual",
    progress: 0,
    startDate: "05/27/2024",
    owner: "Naomi Vu",
    verification: "Waiting",
  },
  {
    id: "craving-confectionary-205",
    name: "Craving Confectionary",
    status: "Completed",
    type: "Business",
    progress: 100,
    startDate: "05/20/2024",
    owner: "Naomi Vu",
    verification: "Verified",
  },
  {
    id: "jack-smith-206",
    name: "Jack Smith",
    status: "Completed",
    type: "Individual",
    progress: 100,
    startDate: "05/21/2024",
    owner: "Naomi Vu",
    verification: "Review",
  },
  {
    id: "demi-moore-207",
    name: "Demi Moore",
    status: "In Progress",
    type: "Individual",
    progress: 30,
    startDate: "05/28/2024",
    owner: "Naomi Vu",
    verification: "Waiting",
  },
]
[V0_FILE]typescriptreact:file="app/components/data-table.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Check, Clock, ChevronUp, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

export type ColumnDef<T> = {
  id: string
  header: string
  accessorKey: keyof T
  cell?: (item: T) => React.ReactNode
  sortable?: boolean
  className?: string
  onClick?: (item: T) => void
}

export type SortDirection = "asc" | "desc"

interface DataTableProps<T> {
  data: T[]
  columns: ColumnDef<T>[]
  initialSortField?: string
  initialSortDirection?: SortDirection
  noResultsMessage?: string
  showViewAllButton?: boolean
  onRowClick?: (item: T) => void
  showCheckbox?: boolean
}

export function DataTable<T>({
  data,
  columns,
  initialSortField,
  initialSortDirection = "asc",
  noResultsMessage = "No results found.",
  showViewAllButton = false,
  onRowClick,
  showCheckbox = false,
}: DataTableProps<T>) {
  const [sortField, setSortField] = useState<string>(initialSortField || columns[0].id)
  const [sortDirection, setSortDirection] = useState<SortDirection>(initialSortDirection)

const handleSort = (field: string) => {
    const isAsc = sortField === field && sortDirection === "asc"
    setSortDirection(isAsc ? "desc" : "asc")
    setSortField(field)
  }

const getSortIcon = (field: string) => {
    if (sortField !== field) {
      return <div className="ml-1 inline-block w-4"></div>
    }
    return sortDirection === "asc" ? (
      <ChevronUp className="ml-1 h-4 w-4 inline text-gray-400" />
    ) : (
      <ChevronDown className="ml-1 h-4 w-4 inline text-gray-400" />
    )
  }

// Sort the data
  const sortedData = [...data].sort((a, b) => {
    const column = columns.find((col) => col.id === sortField)
    if (!column) return 0

const aValue = a[column.accessorKey]
    const bValue = b[column.accessorKey]

// Handle date fields
    if (
      typeof aValue === "string" &&
      typeof bValue === "string" &&
      (aValue.includes("/") || aValue.includes("-")) &&
      (bValue.includes("/") || bValue.includes("-"))
    ) {
      const dateA = new Date(aValue)
      const dateB = new Date(bValue)

if (!isNaN(dateA.getTime()) && !isNaN(dateB.getTime())) {
        return sortDirection === "asc" ? dateA.getTime() - dateB.getTime() : dateB.getTime() - dateA.getTime()
      }
    }

// Handle string and number comparisons
    if (aValue < bValue) return sortDirection === "asc" ? -1 : 1
    if (aValue > bValue) return sortDirection === "asc" ? 1 : -1
    return 0
  })

// Add custom styles for better spacing
  const tableStyles = {
    th: "py-3 px-4 text-left font-medium text-gray-700 border-b border-gray-200",
    td: "py-3 px-4 border-b border-gray-100",
    row: "hover:bg-gray-50",
  }

return (
    <div>
      <Table>
        <TableHeader>
          <TableRow>
            {showCheckbox && (
              <TableHead className="w-[30px]">
                <input type="checkbox" className="rounded border-gray-300" />
              </TableHead>
            )}
            {columns.map((column) => (
              <TableHead
                key={column.id}
                className={`${column.sortable !== false ? "cursor-pointer" : ""} ${column.className || ""} ${tableStyles.th}`}
                onClick={() => column.sortable !== false && handleSort(column.id)}
              >
                {column.header}
                {column.sortable !== false && getSortIcon(column.id)}
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {sortedData.length > 0 ? (
            sortedData.map((item, index) => (
              <TableRow
                key={index}
                className={`text-sm ${tableStyles.row}`}
                onClick={(e) => {
                  // Only trigger row click if the click wasn't on an interactive element
                  if (
                    onRowClick &&
                    !(e.target as HTMLElement).closest("button") &&
                    !(e.target as HTMLElement).closest('[data-prevent-row-click="true"]')
                  ) {
                    onRowClick(item)
                  }
                }}
              >
                {showCheckbox && (
                  <TableCell>
                    <input type="checkbox" className="rounded border-gray-300" />
                  </TableCell>
                )}
                {columns.map((column) => (
                  <TableCell
                    key={column.id}
                    className={`${column.className || ""} ${column.onClick ? "cursor-pointer hover:underline" : ""} ${tableStyles.td}`}
                    onClick={(e) => {
                      if (column.onClick) {
                        e.stopPropagation()
                        column.onClick(item)
                      }
                    }}
                    data-prevent-row-click={column.onClick || column.id === "actions" ? "true" : "false"}
                  >
                    {column.id === "progress" ? (
                      <div className="flex items-center gap-2">
                        {item[column.accessorKey] === "Completed" ? (
                          <Check className="h-4 w-4 text-green-500" />
                        ) : (
                          <Clock className="h-4 w-4 text-blue-500" />
                        )}
                        <span>{item[column.accessorKey] as string}</span>
                      </div>
                    ) : column.id === "verification" ? (
                      <span
                        className={`inline-flex rounded-full px-2 py-1 text-xs ${
                          item[column.accessorKey] === "Verified"
                            ? "bg-green-100 text-green-800"
                            : item[column.accessorKey] === "Review"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-gray-100 text-gray-800"
                        }`}
                      >
                        {item[column.accessorKey] as string}
                      </span>
                    ) : column.cell ? (
                      column.cell(item)
                    ) : (
                      (item[column.accessorKey] as React.ReactNode)
                    )}
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell
                colSpan={showCheckbox ? columns.length + 1 : columns.length}
                className="text-center py-4 text-gray-500"
              >
                {noResultsMessage}
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
      {sortedData.length > 0 && showViewAllButton && (
        <div className="p-4 text-center border-t">
          <Button variant="link" className="text-gray-600">
            View All
          </Button>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/relationship-tab-manager.tsx" isMerged="true"
"use client"

import { useSearchParams } from "next/navigation"
import { OverviewTab } from "@/app/components/tabs/overview-tab"
import { CreditResourcesTab } from "@/app/components/tabs/credit-resources-tab"
import { PriorityManagerTab } from "@/app/components/tabs/priority-manager-tab"
import { DocumentsTab } from "@/app/components/tabs/documents-tab"
import { SpreadsTab } from "@/app/components/tabs/spreads-tab"
import { CreditMonitoringTab } from "@/app/components/tabs/credit-monitoring-tab"
import { CashflowAnalysisTab } from "@/app/components/tabs/cashflow-analysis-tab"
import { ExposureTab } from "@/app/components/tabs/exposure-tab"
import { ProfitabilityTab } from "@/app/components/tabs/profitability-tab"

// Import empty states
import { EmptyCreditResources } from "@/app/components/empty-states/empty-credit-resources"
import { EmptyDocuments } from "@/app/components/empty-states/empty-documents"
import { EmptyTasks } from "@/app/components/empty-states/empty-tasks"
import { EmptySpreads } from "@/app/components/empty-states/empty-spreads"
import { EmptyCreditMonitoring } from "@/app/components/empty-states/empty-credit-monitoring"
import { EmptyCashflow } from "@/app/components/empty-states/empty-cashflow"
import { EmptyExposure } from "@/app/components/empty-states/empty-exposure"
import { EmptyProfitability } from "@/app/components/empty-states/empty-profitability"

interface RelationshipTabManagerProps {
  relationshipId: string
  relationship: any
  refreshRelationship: () => void
}

export function RelationshipTabManager({
  relationshipId,
  relationship,
  refreshRelationship,
}: RelationshipTabManagerProps) {
  const searchParams = useSearchParams()
  const currentTab = searchParams.get("tab") || "overview"

// Check if this is a new relationship (created within the last minute)
  const isNewRelationship = relationship && new Date().getTime() - new Date(relationship.dateCreated).getTime() < 60000

// Render the appropriate tab content based on the current tab
  const renderTabContent = () => {
    switch (currentTab) {
      case "overview":
        return (
          <OverviewTab
            relationshipId={relationshipId}
            relationship={relationship}
            refreshRelationship={refreshRelationship}
          />
        )
      case "credit-resources":
        return isNewRelationship ? (
          <EmptyCreditResources />
        ) : (
          <CreditResourcesTab
            relationshipId={relationshipId}
            relationship={relationship}
            refreshRelationship={refreshRelationship}
          />
        )
      case "priority-manager":
        return isNewRelationship ? <EmptyTasks /> : <PriorityManagerTab relationshipId={relationshipId} />
      case "documents":
        return isNewRelationship ? <EmptyDocuments /> : <DocumentsTab relationshipId={relationshipId} />
      case "spreads":
        return isNewRelationship ? <EmptySpreads /> : <SpreadsTab relationshipId={relationshipId} />
      case "credit-monitoring":
        return isNewRelationship ? <EmptyCreditMonitoring /> : <CreditMonitoringTab relationshipId={relationshipId} />
      case "cashflow-analysis":
        return isNewRelationship ? (
          <EmptyCashflow />
        ) : (
          <CashflowAnalysisTab
            relationshipId={relationshipId}
            relationship={relationship}
            refreshRelationship={refreshRelationship}
          />
        )
      case "exposure":
        return isNewRelationship ? <EmptyExposure /> : <ExposureTab relationship={relationship} />
      case "profitability":
        return isNewRelationship ? <EmptyProfitability /> : <ProfitabilityTab relationship={relationship} />
      default:
        return (
          <OverviewTab
            relationshipId={relationshipId}
            relationship={relationship}
            refreshRelationship={refreshRelationship}
          />
        )
    }
  }

return <div className="space-y-4">{renderTabContent()}</div>
}
[V0_FILE]typescriptreact:file="app/components/tabs/onboarding-tab.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { useState } from "react"
import { DataTable } from "@/app/components/data-table"
import { TableCard } from "@/app/components/table-card"
import { Button } from "@/components/ui/button"
import { Clock, CheckCircle, AlertTriangle, MoreVertical, ArrowUpRight, FileEdit } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { getOnboardingItems, deleteRelationship } from "@/lib/relationship-store"
import { Trash2 } from "lucide-react"

export function OnboardingTab() {
  const router = useRouter()
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [relationshipToDelete, setRelationshipToDelete] = useState<string | null>(null)

// Get onboarding items from the store
  const onboardingItems = getOnboardingItems()

const handleDeleteClick = (id: string) => {
    setRelationshipToDelete(id)
    setIsDeleteDialogOpen(true)
  }

const confirmDelete = () => {
    if (relationshipToDelete) {
      deleteRelationship(relationshipToDelete)
      setIsDeleteDialogOpen(false)
      setRelationshipToDelete(null)

// Refresh the page
      router.refresh()
    }
  }

// Function to continue an incomplete application
  const continueApplication = (relationshipId: string) => {
    // Navigate to the new relationship page with edit parameter
    router.push(`/relationships/new?edit=${relationshipId}`)
  }

return (
    <div className="p-0">
      <TableCard
        title="Onboarding Processes"
        actionLabel="New Relationship"
        onAction={() => router.push("/relationships/new")}
      >
        <DataTable
          data={onboardingItems}
          columns={[
            {
              id: "name",
              header: "Name",
              accessorKey: "name",
              className: "font-medium w-60",
              cell: (item) => (
                <div className="flex items-center gap-2">
                  <span
                    className="text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/relationships/${item.id}`)}
                  >
                    {item.name}
                  </span>
                </div>
              ),
            },
            {
              id: "type",
              header: "Type",
              accessorKey: "type",
            },
            {
              id: "status",
              header: "Status",
              accessorKey: "status",
              cell: (item) => {
                return (
                  <div className="flex items-center gap-2">
                    {item.status === "Completed" ? (
                      <CheckCircle className="h-4 w-4 text-green-500" />
                    ) : item.status === "In Progress" ? (
                      <Clock className="h-4 w-4 text-blue-500" />
                    ) : (
                      <AlertTriangle className="h-4 w-4 text-amber-500" />
                    )}
                    <span>{item.status}</span>
                  </div>
                )
              },
            },
            {
              id: "verification",
              header: "Verification",
              accessorKey: "verification",
              cell: (item) => (
                <span
                  className={`inline-flex rounded-full px-2 py-1 text-xs ${
                    item.verification === "Verified"
                      ? "bg-green-100 text-green-800"
                      : item.verification === "Review" || item.verification === "Waiting"
                        ? "bg-yellow-100 text-yellow-800"
                        : "bg-gray-100 text-gray-800"
                  }`}
                >
                  {item.verification}
                </span>
              ),
            },
            {
              id: "progress",
              header: "Progress",
              accessorKey: "progress",
              cell: (item) => (
                <div className="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                  <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: `${item.progress}%` }}></div>
                </div>
              ),
            },
            {
              id: "startDate",
              header: "Start Date",
              accessorKey: "startDate",
            },
            {
              id: "owner",
              header: "Owner",
              accessorKey: "owner",
            },
            {
              id: "actions",
              header: "",
              accessorKey: "id",
              cell: (item) => (
                <div className="flex items-center justify-end">
                  {item.status !== "Completed" && (
                    <Button variant="outline" size="sm" className="mr-2" onClick={() => continueApplication(item.id)}>
                      <FileEdit className="h-4 w-4 mr-1" />
                      Continue
                    </Button>
                  )}
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm">
                        <MoreVertical className="h-4 w-4" />
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => router.push(`/relationships/${item.id}`)}>
                        <ArrowUpRight className="h-4 w-4 mr-2" />
                        View Details
                      </DropdownMenuItem>
                      <DropdownMenuItem
                        onClick={() => handleDeleteClick(item.id)}
                        className="text-red-600 focus:text-red-600"
                      >
                        <Trash2 className="h-4 w-4 mr-2" />
                        Delete
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </div>
              ),
              sortable: false,
            },
          ]}
          initialSortField="startDate"
          initialSortDirection="desc"
          showCheckbox={false}
          noResultsMessage="No onboarding processes found."
        />
      </TableCard>

{/* Delete Confirmation Dialog */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Relationship</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete this relationship? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={confirmDelete}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/table-card.tsx" isMerged="true"
"use client"

import type { ReactNode } from "react"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"

interface TableCardProps {
  title: string
  children: ReactNode
  actionLabel?: string
  onAction?: () => void
  footerContent?: ReactNode
  headerContent?: ReactNode
}

export function TableCard({ title, children, actionLabel, onAction, footerContent, headerContent }: TableCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
        <CardTitle className="text-lg">{title}</CardTitle>
        <div className="flex items-center space-x-2">
          {headerContent}
          {actionLabel && onAction && (
            <Button className="bg-blue-900" onClick={onAction}>
              <Plus className="h-4 w-4 mr-1" />
              {actionLabel}
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent>{children}</CardContent>
      {footerContent && <CardFooter className="border-t pt-4">{footerContent}</CardFooter>}
    </Card>
  )
}

interface SimpleTableProps {
  data: any[]
  columns: {
    key: string
    header: string
    cell?: (item: any) => ReactNode
  }[]
  showCheckbox?: boolean
  noResultsMessage?: string
}

export function SimpleTable({
  data,
  columns,
  showCheckbox = false,
  noResultsMessage = "No data found.",
}: SimpleTableProps) {
  if (data.length === 0) {
    return <div className="text-center py-4 text-gray-500">{noResultsMessage}</div>
  }

return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr className="border-b">
            {showCheckbox && <th className="px-4 py-2 text-left w-[40px]"></th>}
            {columns.map((column) => (
              <th key={column.key} className="px-4 py-2 text-left font-medium text-gray-500">
                {column.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((item, index) => (
            <tr key={index} className="border-b last:border-0">
              {showCheckbox && (
                <td className="px-4 py-2">
                  <input type="checkbox" className="rounded border-gray-300" />
                </td>
              )}
              {columns.map((column) => (
                <td key={`${index}-${column.key}`} className="px-4 py-2">
                  {column.cell ? column.cell(item) : item[column.key]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/type-badge.tsx" isMerged="true"
import { Badge } from "@/components/ui/badge"

interface TypeBadgeProps {
  type: string
}

export function TypeBadge({ type }: TypeBadgeProps) {
  // Define color variants based on task type
  const getVariant = (type: string) => {
    switch (type) {
      case "Meeting":
        return "bg-blue-100 text-blue-800 hover:bg-blue-100"
      case "Document":
        return "bg-amber-100 text-amber-800 hover:bg-amber-100"
      case "Financial":
        return "bg-green-100 text-green-800 hover:bg-green-100"
      case "Credit Review":
        return "bg-purple-100 text-purple-800 hover:bg-purple-100"
      case "Risk Management":
        return "bg-red-100 text-red-800 hover:bg-red-100"
      case "Client Management":
        return "bg-blue-100 text-blue-800 hover:bg-blue-100"
      case "Business Verification":
        return "bg-gray-100 text-gray-800 hover:bg-gray-100"
      case "Credit Verification":
        return "bg-purple-100 text-purple-800 hover:bg-purple-100"
      case "Legal":
        return "bg-indigo-100 text-indigo-800 hover:bg-indigo-100"
      case "Business Planning":
        return "bg-blue-100 text-blue-800 hover:bg-blue-100"
      case "Collateral":
        return "bg-orange-100 text-orange-800 hover:bg-orange-100"
      case "Environmental":
        return "bg-green-100 text-green-800 hover:bg-green-100"
      case "Consumer":
        return "bg-teal-100 text-teal-800 hover:bg-teal-100"
      case "Due Diligence":
        return "bg-amber-100 text-amber-800 hover:bg-amber-100"
      case "Loan Processing":
        return "bg-blue-100 text-blue-800 hover:bg-blue-100"
      case "Compliance":
        return "bg-red-100 text-red-800 hover:bg-red-100"
      default:
        return "bg-gray-100 text-gray-800 hover:bg-gray-100"
    }
  }

return (
    <Badge variant="outline" className={`font-medium ${getVariant(type)}`}>
      {type}
    </Badge>
  )
}
[V0_FILE]typescriptreact:file="app/components/relationship-sidebar.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { StatusBadge } from "@/components/status-badge"
// Add the missing imports
import Link from "next/link"
import {
  Building,
  Calendar,
  Edit,
  Shield,
  FileText,
  Users,
  CheckCircle,
  Clock,
  MoreHorizontal,
  Save,
  X,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { relationshipExtendedData } from "@/app/data/relationships"
import { updateRelationship } from "@/lib/relationship-store"
import { useRouter } from "next/navigation"

interface RelationshipSidebarProps {
  relationship: any
  onUpdate?: () => void
}

// Update the component to include the missing state and handlers
export function RelationshipSidebar({ relationship, onUpdate }: RelationshipSidebarProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [formData, setFormData] = useState(
    relationship || {
      productPackageName: "",
      status: "",
      dateCreated: "",
      nextMeetingDate: "",
      name: "",
      primaryContact: "",
      primaryContactEmail: "",
      primaryContactPhone: "",
      industry: "",
      yearEstablished: "",
      employeeCount: "",
      location: "",
    },
  )

const router = useRouter()

// Add a check at the beginning of the component to handle null relationship
  if (!relationship) {
    console.error("RelationshipSidebar: relationship is undefined or null")
    return (
      <div className="space-y-6">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Building className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Relationship Details</CardTitle>
            </div>
          </CardHeader>
          <CardContent>
            <div className="flex items-center justify-center h-32">
              <div className="text-center">
                <p className="text-gray-500">Loading relationship details...</p>
                <p className="text-sm text-gray-400 mt-1">If this persists, the relationship may not exist.</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleSave = () => {
    updateRelationship(relationship.id, formData)
    setIsEditing(false)
    if (onUpdate) {
      onUpdate()
    }
  }

const handleCancel = () => {
    setFormData(relationship)
    setIsEditing(false)
  }

return (
    <div className="space-y-6">
      {/* Summary Section */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <FileText className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Summary</CardTitle>
          </div>
          <Button variant="outline" size="sm">
            <Edit className="h-4 w-4 mr-1" />
            Suggested Actions
          </Button>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-gray-700">
            {relationship.name} is a {relationship.type.toLowerCase()} in the {relationship.industry} industry with{" "}
            {relationship.employeeCount} employees. Established in {relationship.yearEstablished} and located in{" "}
            {relationship.location}, they have an annual revenue of {relationship.annualRevenue}
            and a risk grade of {relationship.riskGrade}/7. Their total exposure is {relationship.totalExposure} with
            total deposits of {relationship.totalDeposits}.
          </p>
          <div className="text-xs text-gray-500 mt-2">
            This content was generated using AI.{" "}
            <Link href="#" className="text-blue-600">
              Learn more
            </Link>
          </div>
        </CardContent>
      </Card>

{/* Relationship Details Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <Building className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Relationship Details</CardTitle>
          </div>
          {isEditing ? (
            <div className="flex space-x-2">
              <Button variant="outline" size="sm" onClick={handleCancel}>
                <X className="h-4 w-4 mr-1" />
                Cancel
              </Button>
              <Button variant="outline" size="sm" onClick={handleSave}>
                <Save className="h-4 w-4 mr-1" />
                Save
              </Button>
            </div>
          ) : (
            <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          )}
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <div className="text-sm text-gray-500 mb-1">Product Package Name</div>
              {isEditing ? (
                <Input
                  name="productPackageName"
                  value={formData.productPackageName}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.productPackageName}>
                  {relationship.productPackageName}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Status</div>
              {isEditing ? (
                <Input name="status" value={formData.status} onChange={handleInputChange} className="mt-1" />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.status}>
                  {relationship.status}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Creation Date</div>
              {isEditing ? (
                <Input name="dateCreated" value={formData.dateCreated} onChange={handleInputChange} className="mt-1" />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.dateCreated}>
                  {relationship.dateCreated}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Next Meeting Date</div>
              {isEditing ? (
                <Input
                  name="nextMeetingDate"
                  value={formData.nextMeetingDate}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.nextMeetingDate}>
                  {relationship.nextMeetingDate}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Relationship Name</div>
              {isEditing ? (
                <Input name="name" value={formData.name} onChange={handleInputChange} className="mt-1" />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.name}>
                  {relationship.name}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Primary Contact</div>
              {isEditing ? (
                <Input
                  name="primaryContact"
                  value={formData.primaryContact}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.primaryContact}>
                  {relationship.primaryContact}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Primary Contact Email Address</div>
              {isEditing ? (
                <Input
                  name="primaryContactEmail"
                  value={formData.primaryContactEmail}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.primaryContactEmail}>
                  {relationship.primaryContactEmail}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Primary Contact Phone Number</div>
              {isEditing ? (
                <Input
                  name="primaryContactPhone"
                  value={formData.primaryContactPhone}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.primaryContactPhone}>
                  {relationship.primaryContactPhone}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Industry</div>
              {isEditing ? (
                <Input name="industry" value={formData.industry} onChange={handleInputChange} className="mt-1" />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.industry}>
                  {relationship.industry}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Year Established</div>
              {isEditing ? (
                <Input
                  name="yearEstablished"
                  value={formData.yearEstablished}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.yearEstablished}>
                  {relationship.yearEstablished}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Employee Count</div>
              {isEditing ? (
                <Input
                  name="employeeCount"
                  value={formData.employeeCount}
                  onChange={handleInputChange}
                  className="mt-1"
                />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.employeeCount}>
                  {relationship.employeeCount}
                </div>
              )}
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Location</div>
              {isEditing ? (
                <Input name="location" value={formData.location} onChange={handleInputChange} className="mt-1" />
              ) : (
                <div className="text-xl font-semibold truncate" title={relationship.location}>
                  {relationship.location}
                </div>
              )}
            </div>

{/* Business Information - Only show for Business type */}
            {relationship.type === "Business" && (
              <>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Annual Revenue</div>
                  <div className="text-xl font-semibold truncate" title={relationship.annualRevenue}>
                    {relationship.annualRevenue}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Risk Grade</div>
                  <div className="text-xl font-semibold truncate" title={`${relationship.riskGrade}/7`}>
                    {relationship.riskGrade}/7
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Total Exposure</div>
                  <div className="text-xl font-semibold truncate" title={relationship.totalExposure}>
                    {relationship.totalExposure}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Total Deposits</div>
                  <div className="text-xl font-semibold truncate" title={relationship.totalDeposits}>
                    {relationship.totalDeposits}
                  </div>
                </div>
              </>
            )}

{/* Parent Relationship Information - Only show if there's a parent */}
            {relationship.parentRelationshipId && (
              <>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Parent Company</div>
                  <div
                    className="text-xl font-semibold text-blue-900 hover:underline cursor-pointer truncate"
                    onClick={() => router.push(`/relationships/${relationship.parentRelationshipId}`)}
                    title="Port City Coffee"
                  >
                    Port City Coffee
                  </div>
                </div>
                {relationship.ownershipPercentage && (
                  <div>
                    <div className="text-sm text-gray-500 mb-1">Ownership Percentage</div>
                    <div className="text-xl font-semibold truncate" title={relationship.ownershipPercentage}>
                      {relationship.ownershipPercentage}
                    </div>
                  </div>
                )}
                {relationship.relationshipRole && (
                  <div>
                    <div className="text-sm text-gray-500 mb-1">Relationship Role</div>
                    <div className="text-xl font-semibold truncate" title={relationship.relationshipRole}>
                      {relationship.relationshipRole}
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        </CardContent>
      </Card>

{/* Team Meeting */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <Users className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Team Meeting</CardTitle>
          </div>
          <Button variant="outline" size="icon">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {relationshipExtendedData.teamMeetings.map((meeting, index) => (
              <div key={index} className="flex items-start">
                <div className="mr-3 relative">
                  <div
                    className={`w-8 h-8 rounded-full flex items-center justify-center ${
                      meeting.status === "completed"
                        ? "bg-green-100 text-green-600"
                        : meeting.status === "scheduled"
                          ? "bg-blue-100 text-blue-600"
                          : "bg-gray-100 text-gray-600"
                    }`}
                  >
                    {meeting.status === "completed" ? (
                      <CheckCircle className="h-5 w-5" />
                    ) : meeting.status === "scheduled" ? (
                      <Calendar className="h-5 w-5" />
                    ) : (
                      <Clock className="h-5 w-5" />
                    )}
                  </div>
                  {index < relationshipExtendedData.teamMeetings.length - 1 && (
                    <div className="absolute top-8 bottom-0 left-1/2 w-0.5 -ml-px h-full bg-gray-200"></div>
                  )}
                </div>
                <div className="flex-1">
                  <div className="flex items-center">
                    <div className="font-medium text-blue-900 truncate" title={meeting.type}>
                      {meeting.type}
                    </div>
                    <span className="text-xs text-gray-500 ml-2 whitespace-nowrap">
                      {meeting.time} | {meeting.date}
                    </span>
                    <Button variant="outline" size="icon" className="ml-auto">
                      <MoreHorizontal className="h-4 w-4" />
                    </Button>
                  </div>
                  <p
                    className="text-sm text-gray-600 mt-1 truncate"
                    title={`You ${
                      meeting.status === "completed"
                        ? "submitted"
                        : meeting.status === "scheduled"
                          ? "scheduled"
                          : "created"
                    } ${meeting.type.toLowerCase()} ${meeting.status === "scheduled" ? `with ${meeting.person}` : `for ${meeting.person}`}`}
                  >
                    You{" "}
                    {meeting.status === "completed"
                      ? "submitted"
                      : meeting.status === "scheduled"
                        ? "scheduled"
                        : "created"}{" "}
                    {meeting.type.toLowerCase()}{" "}
                    {meeting.status === "scheduled" ? `with ${meeting.person}` : `for ${meeting.person}`}
                  </p>
                  {meeting.details && (
                    <p className="text-sm text-gray-600 mt-1 truncate" title={meeting.details}>
                      {meeting.details}
                    </p>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

{/* Compliance Information Card */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <Shield className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Compliance Information</CardTitle>
          </div>
          <Button variant="ghost" size="sm">
            <Edit className="h-4 w-4 mr-1" />
            Edit
          </Button>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <div className="text-sm text-gray-500 mb-1">KYC Status</div>
              <div className="text-xl font-semibold">
                <StatusBadge status={relationship.kycStatus || "Completed"} />
              </div>
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Last Review</div>
              <div className="text-xl font-semibold truncate" title={relationship.lastReviewDate || "01/15/2023"}>
                {relationship.lastReviewDate || "01/15/2023"}
              </div>
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Next Review</div>
              <div className="text-xl font-semibold truncate" title={relationship.nextReviewDate || "01/15/2024"}>
                {relationship.nextReviewDate || "01/15/2024"}
              </div>
            </div>
            <div>
              <div className="text-sm text-gray-500 mb-1">Risk Rating</div>
              <div className="text-xl font-semibold truncate" title={relationship.riskRating || "Low"}>
                {relationship.riskRating || "Low"}
              </div>
            </div>
          </div>
        </CardContent>
        <CardFooter className="border-t pt-4">
          <Button variant="outline" size="sm" className="w-full">
            <Calendar className="h-4 w-4 mr-2" />
            Schedule Review
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loans/new/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"

export default function NewLoanLoading() {
  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex items-center justify-between">
        <div className="space-y-1">
          <Skeleton className="h-8 w-[250px]" />
          <Skeleton className="h-4 w-[350px]" />
        </div>
        <Skeleton className="h-10 w-[100px]" />
      </div>

<Card>
        <CardHeader>
          <Skeleton className="h-6 w-[200px]" />
          <Skeleton className="h-4 w-[300px]" />
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {[1, 2, 3, 4, 5, 6].map((item) => (
              <div key={item} className="space-y-2">
                <Skeleton className="h-4 w-[100px]" />
                <Skeleton className="h-10 w-full" />
              </div>
            ))}
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Skeleton className="h-10 w-[100px]" />
          <Skeleton className="h-10 w-[100px]" />
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/page-header.tsx" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import type React from "react"
import { useRouter } from "next/navigation"
import { FileText } from "lucide-react"
import type { LucideIcon } from "lucide-react"
import Breadcrumb, { type BreadcrumbItem } from "./breadcrumb"

interface PageHeaderProps {
  title: string
  subtitle?: string
  description?: string // Added description as an alternative to subtitle
  icon?: LucideIcon
  actionLabel?: string
  actionIcon?: LucideIcon
  onAction?: () => void
  actions?: React.ReactNode // Added actions as an alternative to secondaryActions
  breadcrumbs?: BreadcrumbItem[]
  secondaryActions?: React.ReactNode
}

export function PageHeader({
  title,
  subtitle,
  description, // Support both subtitle and description
  icon: Icon = FileText, // Default icon
  actionLabel,
  actionIcon: ActionIcon,
  onAction,
  actions,
  breadcrumbs,
  secondaryActions,
}: PageHeaderProps) {
  const router = useRouter()

// Use description as fallback for subtitle
  const displaySubtitle = subtitle || description

return (
    <div className="space-y-3">
      <div className="flex items-center justify-between">
        <div className="flex items-start space-x-3">
          <div className="bg-gray-200 p-2 rounded self-center mt-1">
            <Icon className="h-6 w-6 text-gray-700" />
          </div>
          <div>
            {displaySubtitle && <div className="text-sm text-gray-500">{displaySubtitle}</div>}
            <h1 className="font-semibold">{title}</h1>
            {breadcrumbs && (
              <div className="mt-2">
                <Breadcrumb items={breadcrumbs} />
              </div>
            )}
          </div>
        </div>

<div className="flex space-x-2">
          {actions || secondaryActions}
          {actionLabel && (
            <Button
              className="bg-blue-900"
              onClick={() => {
                if (onAction) {
                  onAction()
                  return
                }

// Only navigate if no custom onAction is provided
                if (title.includes("Relationship")) {
                  router.push("/relationships/new")
                } else if (title.includes("Application")) {
                  router.push("/applications/new")
                }
              }}
            >
              {ActionIcon && <ActionIcon className="h-4 w-4 mr-2" />}
              {actionLabel}
            </Button>
          )}
        </div>
      </div>
    </div>
  )
}

// Export both as default and named export for backward compatibility
export default PageHeader
[V0_FILE]typescriptreact:file="app/relationships/new/page.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState, useEffect } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import {
  Building,
  Calendar,
  Mail,
  Phone,
  Users,
  MapPin,
  Clock,
  Save,
  ChevronLeft,
  ChevronRight,
  Globe,
  Hash,
  DollarSign,
  CreditCard,
  HelpCircle,
  FileText,
  User,
  Briefcase,
  Edit,
  Trash2,
  UserPlus,
  Percent,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { PageHeader } from "@/app/components/page-header"
import { Stepper, type StepItem } from "@/app/components/stepper"
import { TaskTable } from "@/app/components/task-table"
import { addRelationship, type Relationship, updateRelationship, getRelationshipById } from "@/lib/relationship-store"
import { requiredDocuments } from "@/app/data/required-documents"

// Define the steps for creating a new relationship
const steps: StepItem[] = [
  {
    id: "company-info",
    title: "Company Information",
    description: "Basic company details",
  },
  {
    id: "contact-info",
    title: "Contact Information",
    description: "Primary contact details",
  },
  {
    id: "required-documents",
    title: "Required Documents",
    description: "Documentation needed for application",
  },
  {
    id: "related-parties",
    title: "Related Parties",
    description: "Business ownership structure",
  },
  {
    id: "review",
    title: "Review & Submit",
    description: "Verify and submit",
  },
]

// Define the type for a related party (business owner)
interface RelatedParty {
  id: string
  name: string
  title: string
  ownershipPercentage: number
  email?: string
  phone?: string
  role?: string
  idType?: string
  idNumber?: string
  parentId?: string | null
  children?: RelatedParty[]
}

export default function NewRelationshipPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const editId = searchParams.get("edit")
  const isEditing = !!editId

const [currentStep, setCurrentStep] = useState(0)
  const [formData, setFormData] = useState({
    // Company Information
    name: "",
    status: "Prospect",
    primaryContact: "",
    primaryContactEmail: "",
    primaryContactPhone: "",
    industry: "",
    yearEstablished: "",
    employeeCount: "",
    businessType: "",
    taxId: "",
    companyType: "",
    website: "",
    naicsCodes: "",
    businessAddress: "",
    monthlyIncome: "",
    monthlyExpenses: "",
    cannabisBusiness: "no",
    cannabisRevenue: "",
    remoteChecks: "no",
    cryptocurrency: "no",
    gambling: "no",
    checkCashing: "no",

// Contact Information
    idType: "",
    idNumber: "",
    dateOfBirth: "",
    countryOfResidence: "",
    contactAddress: "",
    sameAsBusinessAddress: false,
    businessRole: "",
    officialTitle: "",
    controlProng: "no",
    signDocuments: "no",
  })

// State for related parties (business ownership structure)
  const [relatedParties, setRelatedParties] = useState<RelatedParty[]>([
    {
      id: "company",
      name: "Primary Business",
      title: "Primary Business",
      ownershipPercentage: 100,
      children: [],
    },
  ])

// State for the new party form - moved inside the component
  const [newParty, setNewParty] = useState<Omit<RelatedParty, "id" | "children">>({
    name: "",
    title: "",
    ownershipPercentage: 0,
    email: "",
    phone: "",
    role: "Owner",
    idType: "",
    idNumber: "",
    parentId: "company",
  })

// State for dialog visibility
  const [isAddPartyDialogOpen, setIsAddPartyDialogOpen] = useState(false)
  const [selectedParentId, setSelectedParentId] = useState<string | null>("company")
  const [isEditMode, setIsEditMode] = useState(false)
  const [editPartyId, setEditPartyId] = useState<string | null>(null)

// Load existing relationship data if in edit mode
  useEffect(() => {
    if (isEditing && editId) {
      const existingRelationship = getRelationshipById(editId)
      if (existingRelationship) {
        // Populate form data from existing relationship
        setFormData({
          name: existingRelationship.name || "",
          status: existingRelationship.status || "Prospect",
          primaryContact: existingRelationship.primaryContact || "",
          primaryContactEmail: existingRelationship.primaryContactEmail || "",
          primaryContactPhone: existingRelationship.primaryContactPhone || "",
          industry: existingRelationship.industry || "",
          yearEstablished: existingRelationship.yearEstablished || "",
          employeeCount: existingRelationship.employeeCount || "",
          businessType: existingRelationship.businessType || "",
          taxId: existingRelationship.taxId || "",
          companyType: existingRelationship.companyType || "",
          website: existingRelationship.website || "",
          naicsCodes: existingRelationship.naicsCodes || "",
          businessAddress: existingRelationship.location || "",
          monthlyIncome: existingRelationship.monthlyIncome || "",
          monthlyExpenses: existingRelationship.monthlyExpenses || "",
          cannabisBusiness: existingRelationship.cannabisBusiness || "no",
          cannabisRevenue: existingRelationship.cannabisRevenue || "",
          remoteChecks: existingRelationship.remoteChecks || "no",
          cryptocurrency: existingRelationship.cryptocurrency || "no",
          gambling: existingRelationship.gambling || "no",
          checkCashing: existingRelationship.checkCashing || "no",
          idType: existingRelationship.idType || "",
          idNumber: existingRelationship.idNumber || "",
          dateOfBirth: existingRelationship.dateOfBirth || "",
          countryOfResidence: existingRelationship.countryOfResidence || "",
          contactAddress: existingRelationship.contactAddress || "",
          sameAsBusinessAddress: existingRelationship.sameAsBusinessAddress || false,
          businessRole: existingRelationship.businessRole || "",
          officialTitle: existingRelationship.officialTitle || "",
          controlProng: existingRelationship.controlProng || "no",
          signDocuments: existingRelationship.signDocuments || "no",
        })

// If there are related parties, update the related parties state
        if (existingRelationship.relatedParties && existingRelationship.relatedParties.length > 0) {
          // Update the company name in the related parties
          setRelatedParties([
            {
              id: "company",
              name: existingRelationship.name || "Primary Business",
              title: "Primary Business",
              ownershipPercentage: 100,
              children: existingRelationship.relatedParties.map((party) => ({
                id: party.id,
                name: party.name,
                title: party.role || "Owner",
                ownershipPercentage: party.ownershipPercentage,
                role: party.role || "Owner",
                type: party.type,
                children: [],
              })),
            },
          ])
        }
      }
    }
  }, [isEditing, editId])

// Update company name in related parties when it changes
  const handleChange = (field: string, value: string | boolean) => {
    setFormData({
      ...formData,
      [field]: value,
    })

// Update the company name in the related parties if it changes
    if (field === "name" && typeof value === "string") {
      setRelatedParties((prev) => {
        const updated = [...prev]
        const companyIndex = updated.findIndex((p) => p.id === "company")
        if (companyIndex !== -1) {
          updated[companyIndex] = {
            ...updated[companyIndex],
            name: value || "Primary Business",
          }
        }
        return updated
      })
    }
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

if (isEditing && editId) {
      // Update existing relationship
      updateRelationship(editId, {
        name: formData.name || "Updated Relationship",
        type: "Business", // Default to Business type
        status: formData.status as "Prospect" | "Customer",
        industry: formData.industry || "Not specified",
        yearEstablished: formData.yearEstablished || "N/A",
        employeeCount: formData.employeeCount || "N/A",
        location: formData.businessAddress || "Not specified",
        primaryContact: formData.primaryContact || "Not specified",
        primaryContactEmail: formData.primaryContactEmail || "Not specified",
        primaryContactPhone: formData.primaryContactPhone || "Not specified",
        // Update other fields as needed
      })

// Navigate back to the relationship detail page
      router.push(`/relationships/${editId}`)
      return
    }

// Generate a unique ID for the new relationship
    const newId = `rel-${Date.now()}`

// Create a new relationship object from the form data
    const newRelationship: Relationship = {
      id: newId,
      name: formData.name || "New Relationship",
      type: "Business", // Default to Business type
      status: formData.status as "Prospect" | "Customer",
      riskStatus: "Low Risk", // Default risk status
      caseOwner: "Current User", // Default case owner
      lastUpdated: new Date().toISOString(),
      dateCreated: new Date().toISOString(),
      industry: formData.industry || "Not specified",
      yearEstablished: formData.yearEstablished || "N/A",
      employeeCount: formData.employeeCount || "N/A",
      location: formData.businessAddress || "Not specified",
      primaryContact: formData.primaryContact || "Not specified",
      primaryContactEmail: formData.primaryContactEmail || "Not specified",
      primaryContactPhone: formData.primaryContactPhone || "Not specified",
      productPackageName: "Basic", // Default product package
      totalExposure: "$0", // Default exposure
      riskGrade: "B", // Default risk grade
      annualRevenue: "Not specified", // Default annual revenue
      totalDeposits: "$0", // Default deposits
      ficoScore: "N/A", // Default FICO score
      nextMeetingDate: "", // No next meeting by default
      relatedParties: [], // Initialize related parties array
    }

// Add the new relationship to the store
    addRelationship(newRelationship)

// Create relationships for each related party (except the company itself)
    const relatedPartyRelationships: Relationship[] = []

// Recursive function to process all related parties in the tree
    const processRelatedParties = (parties: RelatedParty[], parentId: string) => {
      parties.forEach((party) => {
        // Skip the company itself
        if (party.id === "company") {
          // Process its children
          if (party.children && party.children.length > 0) {
            processRelatedParties(party.children, newId)
          }
          return
        }

// Create a relationship for this related party
        const partyId = `rel-party-${Date.now()}-${Math.floor(Math.random() * 1000)}`
        const partyRelationship: Relationship = {
          id: partyId,
          name: party.name,
          type: party.role === "Owner" || party.role === "Partner" ? "Individual" : "Business",
          status: "Prospect",
          riskStatus: "Low Risk",
          caseOwner: "Current User",
          lastUpdated: new Date().toISOString(),
          dateCreated: new Date().toISOString(),
          industry: formData.industry || "Not specified",
          yearEstablished: "N/A",
          employeeCount: "1",
          location: formData.businessAddress || "Not specified",
          primaryContact: party.name,
          primaryContactEmail: party.email || "Not specified",
          primaryContactPhone: party.phone || "Not specified",
          productPackageName: "None",
          totalExposure: "$0",
          riskGrade: "C",
          annualRevenue: "Not specified",
          totalDeposits: "$0",
          ficoScore: "N/A",
          nextMeetingDate: "",
          parentRelationshipId: parentId,
          ownershipPercentage: `${party.ownershipPercentage}%`,
          relationshipRole: party.role || "Beneficial Owner",
        }

// Add to our collection
        relatedPartyRelationships.push(partyRelationship)

// Add this party to the main relationship's related parties
        newRelationship.relatedParties = [
          ...(newRelationship.relatedParties || []),
          {
            id: partyId,
            name: party.name,
            role: party.role || "Beneficial Owner",
            ownershipPercentage: party.ownershipPercentage,
            type: partyRelationship.type,
          },
        ]

// Process children of this party
        if (party.children && party.children.length > 0) {
          processRelatedParties(party.children, partyId)
        }
      })
    }

// Start processing from the root
    processRelatedParties(relatedParties, newId)

// Update the main relationship with related parties
    updateRelationship(newId, { relatedParties: newRelationship.relatedParties })

// Add all related party relationships to the store
    relatedPartyRelationships.forEach((relationship) => {
      addRelationship(relationship)
    })

// Navigate to the new relationship detail page
    router.push(`/relationships/${newId}`)
  }

const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    }
  }

const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

const handleStepClick = (stepIndex: number) => {
    // Only allow navigating to completed steps or the next available step
    if (stepIndex <= currentStep + 1) {
      setCurrentStep(stepIndex)
    }
  }

// Handle changes to the new party form
  const handleNewPartyChange = (field: string, value: string | number | string[]) => {
    setNewParty({
      ...newParty,
      [field]: value,
    })
  }

// Add a new related party
  const handleAddParty = () => {
    if (!newParty.name || !newParty.title || newParty.ownershipPercentage <= 0) {
      return // Validate required fields
    }

const newId = `party-${Date.now()}`

if (isEditMode && editPartyId) {
      // Update existing party
      setRelatedParties((prev) => {
        const findAndUpdateParty = (parties: RelatedParty[]): RelatedParty[] => {
          return parties.map((party) => {
            if (party.id === editPartyId) {
              return {
                ...party,
                name: newParty.name,
                title: newParty.title,
                ownershipPercentage: newParty.ownershipPercentage,
                email: newParty.email,
                phone: newParty.phone,
                role: newParty.role,
                idType: newParty.idType,
                idNumber: newParty.idNumber,
              }
            }

if (party.children && party.children.length > 0) {
              return {
                ...party,
                children: findAndUpdateParty(party.children),
              }
            }

return party
          })
        }

return findAndUpdateParty(prev)
      })
    } else {
      // Add new party
      setRelatedParties((prev) => {
        const addPartyToTree = (parties: RelatedParty[], parentId: string | null): RelatedParty[] => {
          return parties.map((party) => {
            if (party.id === parentId) {
              return {
                ...party,
                children: [
                  ...(party.children || []),
                  {
                    id: newId,
                    name: newParty.name,
                    title: newParty.title,
                    ownershipPercentage: newParty.ownershipPercentage,
                    email: newParty.email,
                    phone: newParty.phone,
                    role: newParty.role,
                    idType: newParty.idType,
                    idNumber: newParty.idNumber,
                    parentId: parentId,
                    children: [],
                  },
                ],
              }
            }

if (party.children && party.children.length > 0) {
              return {
                ...party,
                children: addPartyToTree(party.children, parentId),
              }
            }

return party
          })
        }

return addPartyToTree(prev, selectedParentId)
      })
    }

// Reset form and close dialog
    setNewParty({
      name: "",
      title: "",
      ownershipPercentage: 0,
      email: "",
      phone: "",
      role: "Owner",
      idType: "",
      idNumber: "",
      parentId: "company",
    })
    setIsAddPartyDialogOpen(false)
    setIsEditMode(false)
    setEditPartyId(null)
  }

// Delete a related party
  const handleDeleteParty = (partyId: string) => {
    setRelatedParties((prev) => {
      const removePartyFromTree = (parties: RelatedParty[]): RelatedParty[] => {
        return parties.filter((party) => {
          if (party.id === partyId) {
            return false
          }

if (party.children && party.children.length > 0) {
            party.children = removePartyFromTree(party.children)
          }

return true
        })
      }

return removePartyFromTree(prev)
    })
  }

// Edit a related party
  const handleEditParty = (party: RelatedParty) => {
    setNewParty({
      name: party.name,
      title: party.title,
      ownershipPercentage: party.ownershipPercentage,
      email: party.email || "",
      phone: party.phone || "",
      role: party.role || "Owner",
      idType: party.idType || "",
      idNumber: party.idNumber || "",
      parentId: party.parentId || "company",
    })
    setIsEditMode(true)
    setEditPartyId(party.id)
    setIsAddPartyDialogOpen(true)
  }

// Open the add party dialog
  const openAddPartyDialog = (parentId: string, e?: React.MouseEvent) => {
    // Prevent event propagation to avoid form submission
    if (e) {
      e.preventDefault()
      e.stopPropagation()
    }

setSelectedParentId(parentId)
    setIsEditMode(false)
    setNewParty({
      name: "",
      title: "",
      ownershipPercentage: 0,
      email: "",
      phone: "",
      role: "Owner",
      idType: "",
      idNumber: "",
      parentId: parentId,
    })
    setIsAddPartyDialogOpen(true)
  }

// Render a related party node in the tree
  const renderPartyNode = (party: RelatedParty, level = 0) => {
    const isCompany = party.id === "company"
    const initials = party.name
      .split(" ")
      .map((word) => word[0])
      .join("")
      .substring(0, 2)
      .toUpperCase()

return (
      <div key={party.id} className={`mb-4 ${level > 0 ? "ml-12" : ""}`}>
        <div className="relative">
          {/* Connection lines */}
          {level > 0 && <div className="absolute -left-8 top-1/2 w-8 h-px bg-gray-300"></div>}

<Card className={`${isCompany ? "border-blue-500 bg-blue-50" : "border-gray-200"}`}>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <Avatar className={`h-10 w-10 ${isCompany ? "bg-blue-500" : "bg-gray-500"}`}>
                    <AvatarFallback>{initials}</AvatarFallback>
                  </Avatar>
                  <div className="ml-3">
                    <h3 className="font-medium">{party.name}</h3>
                    <p className="text-sm text-gray-500">{party.title}</p>
                  </div>
                </div>

{!isCompany && (
                  <div className="flex items-center">
                    <span className="text-sm font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
                      {party.ownershipPercentage}%
                    </span>
                    <div className="ml-2 flex space-x-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => handleEditParty(party)}>
                        <Edit className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-8 w-8 text-red-500 hover:text-red-700"
                        onClick={() => handleDeleteParty(party.id)}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                )}
              </div>

{party.email && (
                <div className="mt-2 text-sm flex items-center text-gray-500">
                  <Mail className="h-3 w-3 mr-1" />
                  {party.email}
                </div>
              )}

{party.phone && (
                <div className="mt-1 text-sm flex items-center text-gray-500">
                  <Phone className="h-3 w-3 mr-1" />
                  {party.phone}
                </div>
              )}
            </CardContent>
            <CardFooter className="p-2 flex justify-end bg-gray-50">
              <Button
                variant="ghost"
                size="sm"
                className="text-blue-600 hover:text-blue-800"
                onClick={(e) => {
                  e.preventDefault()
                  openAddPartyDialog(party.id, e)
                }}
                type="button"
              >
                <UserPlus className="h-4 w-4 mr-1" />
                Add {isCompany ? "Owner" : "Related Party"}
              </Button>
            </CardFooter>
          </Card>
        </div>

{/* Render children */}
        {party.children && party.children.length > 0 && (
          <div className="mt-2 border-l-2 border-gray-200 pl-4">
            {party.children.map((child) => renderPartyNode(child, level + 1))}
          </div>
        )}
      </div>
    )
  }

// Render the appropriate form based on the current step
  const renderStepContent = () => {
    switch (currentStep) {
      case 0: // Company Information
        return (
          <>
            {/* Company Information Fields */}
            <div className="space-y-2">
              <Label htmlFor="name" className="text-gray-500">
                Relationship Name
              </Label>
              <div className="flex items-center space-x-2">
                <Building className="h-4 w-4 text-gray-500" />
                <Input
                  id="name"
                  placeholder="Enter company name"
                  value={formData.name}
                  onChange={(e) => handleChange("name", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="status" className="text-gray-500">
                Status
              </Label>
              <div className="flex items-center space-x-2">
                <Clock className="h-4 w-4 text-gray-500" />
                <Select value={formData.status} onValueChange={(value) => handleChange("status", value)}>
                  <SelectTrigger id="status" className="w-full">
                    <SelectValue placeholder="Select status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Prospect">Prospect</SelectItem>
                    <SelectItem value="Active">Active</SelectItem>
                    <SelectItem value="Inactive">Inactive</SelectItem>
                    <SelectItem value="Churned">Churned</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="businessType" className="text-gray-500">
                Business Type
              </Label>
              <div className="flex items-center space-x-2">
                <Building className="h-4 w-4 text-gray-500" />
                <Select value={formData.businessType} onValueChange={(value) => handleChange("businessType", value)}>
                  <SelectTrigger id="businessType" className="w-full">
                    <SelectValue placeholder="Select business type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Corporation">Corporation</SelectItem>
                    <SelectItem value="LLC">LLC</SelectItem>
                    <SelectItem value="Partnership">Partnership</SelectItem>
                    <SelectItem value="Sole Proprietorship">Sole Proprietorship</SelectItem>
                    <SelectItem value="Non-Profit">Non-Profit</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="taxId" className="text-gray-500">
                Tax Identification Number
              </Label>
              <div className="flex items-center space-x-2">
                <Building className="h-4 w-4 text-gray-500" />
                <Input
                  id="taxId"
                  placeholder="Enter tax ID"
                  value={formData.taxId}
                  onChange={(e) => handleChange("taxId", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="companyType" className="text-gray-500">
                Company Type
              </Label>
              <div className="flex items-center space-x-2">
                <Building className="h-4 w-4 text-gray-500" />
                <Select value={formData.companyType} onValueChange={(value) => handleChange("companyType", value)}>
                  <SelectTrigger id="companyType" className="w-full">
                    <SelectValue placeholder="Select company type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Public">Public</SelectItem>
                    <SelectItem value="Private">Private</SelectItem>
                    <SelectItem value="Government">Government</SelectItem>
                    <SelectItem value="Educational">Educational</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="website" className="text-gray-500">
                Website
              </Label>
              <div className="flex items-center space-x-2">
                <Globe className="h-4 w-4 text-gray-500" />
                <Input
                  id="website"
                  type="url"
                  placeholder="Enter website URL"
                  value={formData.website}
                  onChange={(e) => handleChange("website", e.target.value)}
                  className="w-full"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="industry" className="text-gray-500">
                Industry
              </Label>
              <div className="flex items-center space-x-2">
                <Building className="h-4 w-4 text-gray-500" />
                <Input
                  id="industry"
                  placeholder="Enter industry"
                  value={formData.industry}
                  onChange={(e) => handleChange("industry", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="naicsCodes" className="text-gray-500">
                NAICS Codes
              </Label>
              <div className="flex items-center space-x-2">
                <Hash className="h-4 w-4 text-gray-500" />
                <Input
                  id="naicsCodes"
                  placeholder="Enter NAICS codes"
                  value={formData.naicsCodes}
                  onChange={(e) => handleChange("naicsCodes", e.target.value)}
                  className="w-full"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="yearEstablished" className="text-gray-500">
                Year Established
              </Label>
              <div className="flex items-center space-x-2">
                <Calendar className="h-4 w-4 text-gray-500" />
                <Input
                  id="yearEstablished"
                  placeholder="Enter year"
                  value={formData.yearEstablished}
                  onChange={(e) => handleChange("yearEstablished", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="employeeCount" className="text-gray-500">
                Employee Count
              </Label>
              <div className="flex items-center space-x-2">
                <Users className="h-4 w-4 text-gray-500" />
                <Input
                  id="employeeCount"
                  type="number"
                  placeholder="Enter employee count"
                  value={formData.employeeCount}
                  onChange={(e) => handleChange("employeeCount", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2 col-span-2">
              <Label htmlFor="businessAddress" className="text-gray-500">
                Business Address
              </Label>
              <div className="flex items-center space-x-2">
                <MapPin className="h-4 w-4 text-gray-500" />
                <Input
                  id="businessAddress"
                  placeholder="Enter business address"
                  value={formData.businessAddress}
                  onChange={(e) => handleChange("businessAddress", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

{/* Business Questionnaire Card */}
            <div className="col-span-2 mt-6">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">Business Questionnaire</CardTitle>
                </CardHeader>
                <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="monthlyIncome" className="text-gray-500">
                      Monthly Income Sources
                    </Label>
                    <div className="flex items-center space-x-2">
                      <DollarSign className="h-4 w-4 text-gray-500" />
                      <Input
                        id="monthlyIncome"
                        placeholder="Describe income sources"
                        value={formData.monthlyIncome}
                        onChange={(e) => handleChange("monthlyIncome", e.target.value)}
                        className="w-full"
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="monthlyExpenses" className="text-gray-500">
                      Monthly Expenses
                    </Label>
                    <div className="flex items-center space-x-2">
                      <CreditCard className="h-4 w-4 text-gray-500" />
                      <Input
                        id="monthlyExpenses"
                        placeholder="Describe monthly expenses"
                        value={formData.monthlyExpenses}
                        onChange={(e) => handleChange("monthlyExpenses", e.target.value)}
                        className="w-full"
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">
                      Does this business grow, sell or distribute cannabis, cannabis seeds or cannabis related products?
                    </Label>
                    <RadioGroup
                      value={formData.cannabisBusiness}
                      onValueChange={(value) => handleChange("cannabisBusiness", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="cannabis-yes" />
                        <Label htmlFor="cannabis-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="cannabis-no" />
                        <Label htmlFor="cannabis-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="cannabisRevenue" className="text-gray-500">
                      What is the percentage of annual revenue derived from providing goods or services to cannabis
                      businesses
                    </Label>
                    <div className="flex items-center space-x-2">
                      <HelpCircle className="h-4 w-4 text-gray-500" />
                      <Input
                        id="cannabisRevenue"
                        type="number"
                        min="0"
                        max="100"
                        placeholder="Enter percentage (0-100)"
                        value={formData.cannabisRevenue}
                        onChange={(e) => handleChange("cannabisRevenue", e.target.value)}
                        className="w-full"
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">
                      Does this business accept Remotely Created Checks as payment for goods and services?
                    </Label>
                    <RadioGroup
                      value={formData.remoteChecks}
                      onValueChange={(value) => handleChange("remoteChecks", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="checks-yes" />
                        <Label htmlFor="checks-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="checks-no" />
                        <Label htmlFor="checks-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">Does this business buy or sell Cryptocurrencies?</Label>
                    <RadioGroup
                      value={formData.cryptocurrency}
                      onValueChange={(value) => handleChange("cryptocurrency", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="crypto-yes" />
                        <Label htmlFor="crypto-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="crypto-no" />
                        <Label htmlFor="crypto-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">
                      Is this business involved in financial services to third parties: Casino/Gambling?
                    </Label>
                    <RadioGroup
                      value={formData.gambling}
                      onValueChange={(value) => handleChange("gambling", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="gambling-yes" />
                        <Label htmlFor="gambling-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="gambling-no" />
                        <Label htmlFor="gambling-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">Is this business involved in Check Cashing / Payday Loans?</Label>
                    <RadioGroup
                      value={formData.checkCashing}
                      onValueChange={(value) => handleChange("checkCashing", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="check-cashing-yes" />
                        <Label htmlFor="check-cashing-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="check-cashing-no" />
                        <Label htmlFor="check-cashing-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>
                </CardContent>
              </Card>
            </div>
          </>
        )
      case 1: // Contact Information
        return (
          <>
            {/* Contact Information Fields */}
            <div className="space-y-2">
              <Label htmlFor="primaryContact" className="text-gray-500">
                Primary Contact
              </Label>
              <div className="flex items-center space-x-2">
                <Users className="h-4 w-4 text-gray-500" />
                <Input
                  id="primaryContact"
                  placeholder="Enter contact name"
                  value={formData.primaryContact}
                  onChange={(e) => handleChange("primaryContact", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="primaryContactEmail" className="text-gray-500">
                Primary Contact Email Address
              </Label>
              <div className="flex items-center space-x-2">
                <Mail className="h-4 w-4 text-gray-500" />
                <Input
                  id="primaryContactEmail"
                  type="email"
                  placeholder="Enter email address"
                  value={formData.primaryContactEmail}
                  onChange={(e) => handleChange("primaryContactEmail", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="primaryContactPhone" className="text-gray-500">
                Primary Contact Phone Number
              </Label>
              <div className="flex items-center space-x-2">
                <Phone className="h-4 w-4 text-gray-500" />
                <Input
                  id="primaryContactPhone"
                  placeholder="Enter phone number"
                  value={formData.primaryContactPhone}
                  onChange={(e) => handleChange("primaryContactPhone", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="idType" className="text-gray-500">
                ID Type
              </Label>
              <div className="flex items-center space-x-2">
                <FileText className="h-4 w-4 text-gray-500" />
                <Select value={formData.idType} onValueChange={(value) => handleChange("idType", value)}>
                  <SelectTrigger id="idType" className="w-full">
                    <SelectValue placeholder="Select ID type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Driver's License">Driver's License</SelectItem>
                    <SelectItem value="Passport">Passport</SelectItem>
                    <SelectItem value="State ID">State ID</SelectItem>
                    <SelectItem value="Military ID">Military ID</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="idNumber" className="text-gray-500">
                ID Number
              </Label>
              <div className="flex items-center space-x-2">
                <FileText className="h-4 w-4 text-gray-500" />
                <Input
                  id="idNumber"
                  placeholder="Enter ID number"
                  value={formData.idNumber}
                  onChange={(e) => handleChange("idNumber", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="dateOfBirth" className="text-gray-500">
                Date of Birth
              </Label>
              <div className="flex items-center space-x-2">
                <Calendar className="h-4 w-4 text-gray-500" />
                <Input
                  id="dateOfBirth"
                  type="date"
                  value={formData.dateOfBirth}
                  onChange={(e) => handleChange("dateOfBirth", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="countryOfResidence" className="text-gray-500">
                Country of Residence
              </Label>
              <div className="flex items-center space-x-2">
                <Globe className="h-4 w-4 text-gray-500" />
                <Input
                  id="countryOfResidence"
                  placeholder="Enter country"
                  value={formData.countryOfResidence}
                  onChange={(e) => handleChange("countryOfResidence", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2 col-span-2">
              <Label htmlFor="contactAddress" className="text-gray-500">
                Address
              </Label>
              <div className="flex items-center space-x-2">
                <MapPin className="h-4 w-4 text-gray-500" />
                <Input
                  id="contactAddress"
                  placeholder="Enter address"
                  value={formData.contactAddress}
                  onChange={(e) => handleChange("contactAddress", e.target.value)}
                  className="w-full"
                  required
                />
              </div>
            </div>

<div className="space-y-2 col-span-2">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="sameAsBusinessAddress"
                  checked={formData.sameAsBusinessAddress as boolean}
                  onCheckedChange={(checked) => handleChange("sameAsBusinessAddress", checked as boolean)}
                />
                <Label htmlFor="sameAsBusinessAddress" className="text-gray-500">
                  Mailing Address is same as primary address?
                </Label>
              </div>
            </div>

{/* Business Involvement Card */}
            <div className="col-span-2 mt-6">
              <Card>
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">What is their involvement in the business?</CardTitle>
                </CardHeader>
                <CardContent className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="businessRole" className="text-gray-500">
                      Business Role
                    </Label>
                    <div className="flex items-center space-x-2">
                      <Briefcase className="h-4 w-4 text-gray-500" />
                      <Select
                        value={formData.businessRole}
                        onValueChange={(value) => handleChange("businessRole", value)}
                      >
                        <SelectTrigger id="businessRole" className="w-full">
                          <SelectValue placeholder="Select role" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="Owner">Owner</SelectItem>
                          <SelectItem value="Partner">Partner</SelectItem>
                          <SelectItem value="Director">Director</SelectItem>
                          <SelectItem value="Officer">Officer</SelectItem>
                          <SelectItem value="Manager">Manager</SelectItem>
                          <SelectItem value="Employee">Employee</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="officialTitle" className="text-gray-500">
                      Official Title
                    </Label>
                    <div className="flex items-center space-x-2">
                      <User className="h-4 w-4 text-gray-500" />
                      <Input
                        id="officialTitle"
                        placeholder="Enter official title"
                        value={formData.officialTitle}
                        onChange={(e) => handleChange("officialTitle", e.target.value)}
                        className="w-full"
                        required
                      />
                    </div>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">Are they a Control Prong?</Label>
                    <RadioGroup
                      value={formData.controlProng}
                      onValueChange={(value) => handleChange("controlProng", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="control-yes" />
                        <Label htmlFor="control-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="control-no" />
                        <Label htmlFor="control-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>

<div className="space-y-2">
                    <Label className="text-gray-500">
                      Will they sign legal documents for the business or a product?
                    </Label>
                    <RadioGroup
                      value={formData.signDocuments}
                      onValueChange={(value) => handleChange("signDocuments", value)}
                      className="flex space-x-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="yes" id="sign-yes" />
                        <Label htmlFor="sign-yes">Yes</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="no" id="sign-no" />
                        <Label htmlFor="sign-no">No</Label>
                      </div>
                    </RadioGroup>
                  </div>
                </CardContent>
              </Card>
            </div>
          </>
        )
      case 2: // Required Documents
        return (
          <div className="col-span-2">
            <div className="mb-4">
              <p className="text-gray-500">
                The following documents are typically required for business loan applications. Please prepare these
                documents for submission.
              </p>
            </div>
            <TaskTable
              title="Required Documents Checklist"
              tasks={requiredDocuments}
              showFilters={true}
              showCheckboxes={true}
              showTypeColumn={true}
              emptyMessage="No required documents found."
            />
          </div>
        )
      case 3: // Related Parties
        return (
          <div className="col-span-2">
            <div className="mb-4">
              <p className="text-gray-500">
                Add owners and related parties to visualize the business ownership structure. Click on "Add Owner" to
                add direct owners to the business, or add related parties to existing owners.
              </p>
            </div>

<div className="mt-6 border rounded-lg p-4 bg-gray-50">
              <div className="ownership-tree">{relatedParties.map((party) => renderPartyNode(party))}</div>
            </div>

{/* Add Party Dialog */}
            <Dialog open={isAddPartyDialogOpen} onOpenChange={setIsAddPartyDialogOpen}>
              <DialogContent className="sm:max-w-lg">
                <DialogHeader>
                  <DialogTitle>{isEditMode ? "Edit Related Party" : "Add Related Party"}</DialogTitle>
                </DialogHeader>
                <div className="grid gap-4 py-4 max-h-[70vh] overflow-y-auto">
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-name" className="text-right">
                      Name
                    </Label>
                    <Input
                      id="party-name"
                      value={newParty.name}
                      onChange={(e) => handleNewPartyChange("name", e.target.value)}
                      className="col-span-3"
                      placeholder="Enter name"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-title" className="text-right">
                      Title
                    </Label>
                    <Input
                      id="party-title"
                      value={newParty.title}
                      onChange={(e) => handleNewPartyChange("title", e.target.value)}
                      className="col-span-3"
                      placeholder="Enter title"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-ownership" className="text-right">
                      Ownership %
                    </Label>
                    <div className="col-span-3 flex items-center">
                      <Input
                        id="party-ownership"
                        type="number"
                        min="0"
                        max="100"
                        value={newParty.ownershipPercentage}
                        onChange={(e) => handleNewPartyChange("ownershipPercentage", Number.parseFloat(e.target.value))}
                        className="flex-1"
                        placeholder="Enter ownership percentage"
                      />
                      <Percent className="ml-2 h-4 w-4 text-gray-500" />
                    </div>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-email" className="text-right">
                      Email
                    </Label>
                    <Input
                      id="party-email"
                      type="email"
                      value={newParty.email}
                      onChange={(e) => handleNewPartyChange("email", e.target.value)}
                      className="col-span-3"
                      placeholder="Enter email address"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-phone" className="text-right">
                      Phone
                    </Label>
                    <Input
                      id="party-phone"
                      value={newParty.phone}
                      onChange={(e) => handleNewPartyChange("phone", e.target.value)}
                      className="col-span-3"
                      placeholder="Enter phone number"
                    />
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-role" className="text-right">
                      Business Role
                    </Label>
                    <Select
                      value={newParty.role || "Owner"}
                      onValueChange={(value) => handleNewPartyChange("role", value)}
                    >
                      <SelectTrigger id="party-role" className="col-span-3">
                        <SelectValue placeholder="Select role" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Owner">Owner</SelectItem>
                        <SelectItem value="Partner">Partner</SelectItem>
                        <SelectItem value="Director">Director</SelectItem>
                        <SelectItem value="Officer">Officer</SelectItem>
                        <SelectItem value="Manager">Manager</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-id-type" className="text-right">
                      ID Type
                    </Label>
                    <Select
                      value={newParty.idType || ""}
                      onValueChange={(value) => handleNewPartyChange("idType", value)}
                    >
                      <SelectTrigger id="party-id-type" className="col-span-3">
                        <SelectValue placeholder="Select ID type" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="Driver's License">Driver's License</SelectItem>
                        <SelectItem value="Passport">Passport</SelectItem>
                        <SelectItem value="State ID">State ID</SelectItem>
                        <SelectItem value="Military ID">Military ID</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="grid grid-cols-4 items-center gap-4">
                    <Label htmlFor="party-id-number" className="text-right">
                      ID Number
                    </Label>
                    <Input
                      id="party-id-number"
                      value={newParty.idNumber || ""}
                      onChange={(e) => handleNewPartyChange("idNumber", e.target.value)}
                      className="col-span-3"
                      placeholder="Enter ID number"
                    />
                  </div>
                </div>
                <DialogFooter>
                  <Button variant="outline" onClick={() => setIsAddPartyDialogOpen(false)} type="button">
                    Cancel
                  </Button>
                  <Button onClick={handleAddParty} type="button">
                    {isEditMode ? "Update" : "Add"}
                  </Button>
                </DialogFooter>
              </DialogContent>
            </Dialog>
          </div>
        )
      case 4: // Review & Submit
        return (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-medium mb-2">Company Information</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-500">Relationship Name</p>
                  <p>{formData.name || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Status</p>
                  <p>{formData.status}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Business Type</p>
                  <p>{formData.businessType || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Tax ID</p>
                  <p>{formData.taxId || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Company Type</p>
                  <p>{formData.companyType || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Website</p>
                  <p>{formData.website || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Industry</p>
                  <p>{formData.industry || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">NAICS Codes</p>
                  <p>{formData.naicsCodes || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Year Established</p>
                  <p>{formData.yearEstablished || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Employee Count</p>
                  <p>{formData.employeeCount || "Not provided"}</p>
                </div>
                <div className="col-span-2">
                  <p className="text-sm text-gray-500">Business Address</p>
                  <p>{formData.businessAddress || "Not provided"}</p>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-lg font-medium mb-2">Business Questionnaire</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-500">Monthly Income Sources</p>
                  <p>{formData.monthlyIncome || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Monthly Expenses</p>
                  <p>{formData.monthlyExpenses || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Cannabis Business</p>
                  <p>{formData.cannabisBusiness === "yes" ? "Yes" : "No"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Cannabis Revenue Percentage</p>
                  <p>{formData.cannabisRevenue ? `${formData.cannabisRevenue}%` : "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Accepts Remotely Created Checks</p>
                  <p>{formData.remoteChecks === "yes" ? "Yes" : "No"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Cryptocurrency Business</p>
                  <p>{formData.cryptocurrency === "yes" ? "Yes" : "No"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Casino/Gambling Services</p>
                  <p>{formData.gambling === "yes" ? "Yes" : "No"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Check Cashing/Payday Loans</p>
                  <p>{formData.checkCashing === "yes" ? "Yes" : "No"}</p>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-lg font-medium mb-2">Contact Information</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-500">Primary Contact</p>
                  <p>{formData.primaryContact || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Email Address</p>
                  <p>{formData.primaryContactEmail || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Phone Number</p>
                  <p>{formData.primaryContactPhone || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">ID Type</p>
                  <p>{formData.idType || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">ID Number</p>
                  <p>{formData.idNumber || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Date of Birth</p>
                  <p>{formData.dateOfBirth || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Country of Residence</p>
                  <p>{formData.countryOfResidence || "Not provided"}</p>
                </div>
                <div className="col-span-2">
                  <p className="text-sm text-gray-500">Address</p>
                  <p>{formData.contactAddress || "Not provided"}</p>
                </div>
                <div className="col-span-2">
                  <p className="text-sm text-gray-500">Same as Business Address</p>
                  <p>{formData.sameAsBusinessAddress ? "Yes" : "No"}</p>
                </div>
              </div>
            </div>

<div>
              <h3 className="text-lg font-medium mb-2">Business Involvement</h3>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-gray-500">Business Role</p>
                  <p>{formData.businessRole || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Official Title</p>
                  <p>{formData.officialTitle || "Not provided"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Control Prong</p>
                  <p>{formData.controlProng === "yes" ? "Yes" : "No"}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-500">Signs Legal Documents</p>
                  <p>{formData.signDocuments === "yes" ? "Yes" : "No"}</p>
                </div>
              </div>
            </div>
          </div>
        )
      default:
        return null
    }
  }

return (
    <div className="flex-1 p-4 space-y-4">
      <PageHeader
        title={isEditing ? "Edit Relationship" : "Add New Relationship"}
        subtitle={isEditing ? "Update an existing business relationship" : "Create a new business relationship"}
        icon={Building}
        breadcrumbs={[
          { label: "Relationships", href: "/relationships" },
          { label: isEditing ? "Edit Relationship" : "New Relationship" },
        ]}
      />

<div className="flex flex-col md:flex-row gap-4">
        {/* Stepper Navigation Card */}
        <div className="md:w-1/4">
          <Card className="sticky top-4">
            <CardHeader className="pb-2">
              <CardTitle className="text-lg">Progress</CardTitle>
            </CardHeader>
            <CardContent>
              <Stepper steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
            </CardContent>
          </Card>
        </div>

{/* Form Card */}
        <div className="md:w-3/4">
          <form onSubmit={handleSubmit}>
            <Card>
              <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
                <CardTitle className="text-lg">{steps[currentStep].title}</CardTitle>
                {currentStep === steps.length - 1 ? (
                  <Button type="submit" className="bg-blue-900">
                    <Save className="h-4 w-4 mr-2" />
                    {isEditing ? "Update" : "Save"} Relationship
                  </Button>
                ) : null}
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">{renderStepContent()}</div>

<div className="flex justify-between mt-8">
                  <Button type="button" variant="outline" onClick={handlePrevious} disabled={currentStep === 0}>
                    <ChevronLeft className="h-4 w-4 mr-2" />
                    Previous
                  </Button>

{currentStep < steps.length - 1 ? (
                    <Button type="button" onClick={handleNext} className="bg-blue-900">
                      Next
                      <ChevronRight className="h-4 w-4 ml-2" />
                    </Button>
                  ) : null}
                </div>
              </CardContent>
            </Card>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/deposit-store.ts" isMerged="true"
// Define deposit types
export interface Deposit {
  id: string
  name: string
  accountNumber: string
  amount: string | number
  balance?: string | number
  interestRate: string
  status: string
  type: string
  relationshipId: string
  relationship?: string
  dealId?: string
  openDate: string
  maturityDate?: string
  term?: string
  accountOwner?: string
  jointOwners?: string[]
  beneficiaries?: string[]
  routingNumber?: string
  accountFeatures?: string[]
  minimumBalance?: string | number
  monthlyFee?: string | number
  overdraftProtection?: boolean
  statementFrequency?: string
  interestPaymentFrequency?: string
  interestPaymentMethod?: string
  autoRenewal?: boolean
  earlyWithdrawalPenalty?: boolean
}

// In-memory store for deposits
let deposits: Deposit[] = [
  {
    id: "deposit-001",
    name: "Business Checking",
    accountNumber: "****4567",
    amount: "$350,000",
    balance: "$350,000",
    interestRate: "0.25%",
    status: "Active",
    type: "Checking",
    relationshipId: "rel-001",
    relationship: "Acme Corporation",
    dealId: "deal-001",
    openDate: "01/15/2023",
    accountOwner: "John Smith",
    routingNumber: "123456789",
    accountFeatures: ["Online Banking", "Mobile Deposits", "Bill Pay"],
    minimumBalance: "$1,000",
    monthlyFee: "$15",
    overdraftProtection: true,
    statementFrequency: "Monthly",
  },
  {
    id: "deposit-002",
    name: "Business Savings",
    accountNumber: "****7890",
    amount: "$1,250,000",
    balance: "$1,250,000",
    interestRate: "1.75%",
    status: "Active",
    type: "Savings",
    relationshipId: "rel-001",
    relationship: "Acme Corporation",
    dealId: "deal-001",
    openDate: "02/20/2023",
    accountOwner: "John Smith",
    routingNumber: "123456789",
    accountFeatures: ["Online Banking", "Overdraft Protection"],
    minimumBalance: "$5,000",
    monthlyFee: "$0",
    interestPaymentFrequency: "Monthly",
    statementFrequency: "Quarterly",
  },
  {
    id: "deposit-003",
    name: "Certificate of Deposit",
    accountNumber: "****2345",
    amount: "$500,000",
    balance: "$500,000",
    interestRate: "3.25%",
    status: "Active",
    type: "CD",
    relationshipId: "rel-001",
    relationship: "Acme Corporation",
    dealId: "deal-001",
    openDate: "03/10/2023",
    maturityDate: "03/10/2025",
    term: "24 months",
    accountOwner: "John Smith",
    interestPaymentFrequency: "Monthly",
    interestPaymentMethod: "Transfer to Checking",
    autoRenewal: true,
    earlyWithdrawalPenalty: true,
  },
]

// Get all deposits
export function getDeposits(): Deposit[] {
  return deposits
}

// Get deposits by relationship ID
export function getDepositsByRelationshipId(relationshipId: string): Deposit[] {
  return deposits.filter((deposit) => deposit.relationshipId === relationshipId)
}

// Get deposits by deal ID
export function getDepositsByDealId(dealId: string): Deposit[] {
  return deposits.filter((deposit) => deposit.dealId === dealId)
}

// Get deposit by ID
export function getDepositById(id: string): Deposit | undefined {
  return deposits.find((deposit) => deposit.id === id)
}

// Add a new deposit
export function addDeposit(deposit: Omit<Deposit, "id">): Deposit {
  const newDeposit = {
    ...deposit,
    id: `deposit-${Date.now()}`,
  }

deposits.push(newDeposit)
  return newDeposit
}

// Update an existing deposit
export function updateDeposit(id: string, deposit: Partial<Deposit>): Deposit | undefined {
  const index = deposits.findIndex((d) => d.id === id)

if (index !== -1) {
    deposits[index] = { ...deposits[index], ...deposit }
    return deposits[index]
  }

return undefined
}

// Delete a deposit
export function deleteDeposit(id: string): boolean {
  const initialLength = deposits.length
  deposits = deposits.filter((deposit) => deposit.id !== id)
  return deposits.length < initialLength
}
[V0_FILE]typescriptreact:file="app/deposits/new/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { PageHeader } from "@/app/components/page-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import type { StepItem } from "@/app/components/stepper"
import { getRelationships } from "@/lib/relationship-store"
import { initialDeals } from "@/app/data/deals"
import { Check, Wallet, User, Users } from "lucide-react"
import { cn } from "@/lib/utils"
import { addDeposit } from "@/lib/deposit-store"

// Define deposit account types
const depositTypes = [
  {
    id: "checking",
    name: "Checking",
    types: ["business-checking", "personal-checking", "interest-checking", "analyzed-checking"],
  },
  {
    id: "savings",
    name: "Savings",
    types: ["business-savings", "personal-savings", "money-market", "high-yield-savings"],
  },
  {
    id: "cd",
    name: "Certificate of Deposit",
    types: ["standard-cd", "jumbo-cd", "step-up-cd", "callable-cd"],
  },
  {
    id: "ira",
    name: "Individual Retirement Account",
    types: ["traditional-ira", "roth-ira", "sep-ira", "simple-ira"],
  },
  {
    id: "specialty",
    name: "Specialty Accounts",
    types: ["health-savings", "education-savings", "trust-account", "escrow-account"],
  },
]

// Map of deposit types with display names
const depositTypeNames: Record<string, string> = {
  // Checking
  "business-checking": "Business Checking",
  "personal-checking": "Personal Checking",
  "interest-checking": "Interest Checking",
  "analyzed-checking": "Analyzed Checking",

// Savings
  "business-savings": "Business Savings",
  "personal-savings": "Personal Savings",
  "money-market": "Money Market Account",
  "high-yield-savings": "High-Yield Savings",

// Certificate of Deposit
  "standard-cd": "Standard CD",
  "jumbo-cd": "Jumbo CD",
  "step-up-cd": "Step-Up CD",
  "callable-cd": "Callable CD",

// Individual Retirement Account
  "traditional-ira": "Traditional IRA",
  "roth-ira": "Roth IRA",
  "sep-ira": "SEP IRA",
  "simple-ira": "SIMPLE IRA",

// Specialty Accounts
  "health-savings": "Health Savings Account (HSA)",
  "education-savings": "Education Savings Account (ESA)",
  "trust-account": "Trust Account",
  "escrow-account": "Escrow Account",
}

export default function NewDepositPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const relationshipId = searchParams.get("relationshipId")
  const dealId = searchParams.get("dealId")

const [currentStep, setCurrentStep] = useState(0)
  const [formData, setFormData] = useState({
    name: "",
    accountNumber: "",
    amount: "",
    interestRate: "",
    term: "",
    depositCategory: "",
    depositType: "",
    relationshipId: relationshipId || "",
    dealId: dealId || "",
    openDate: new Date().toISOString().split("T")[0],
    maturityDate: "",
    accountOwner: "",
    jointOwners: [],
    beneficiaries: [],
    routingNumber: "",
    accountFeatures: [],
    minimumBalance: "",
    monthlyFee: "",
    overdraftProtection: false,
    statementFrequency: "Monthly",
    interestPaymentFrequency: "Monthly",
    interestPaymentMethod: "Add to Principal",
    autoRenewal: false,
    earlyWithdrawalPenalty: false,
  })

// Get all relationships for the dropdown
  const relationships = getRelationships()

// Get all deals for the selected relationship
  const relationshipDeals = initialDeals.filter((deal) => deal.relationshipId === formData.relationshipId)

const steps: StepItem[] = [
    {
      id: "account-details",
      title: "Account Details",
      description: "Provide basic information about the deposit account including name, type, and amount.",
    },
    {
      id: "account-structure",
      title: "Account Structure",
      description: "Define the structure and terms of the deposit account including interest rate and features.",
    },
    {
      id: "ownership",
      title: "Ownership Information",
      description: "Provide details about the account owners and beneficiaries.",
    },
    {
      id: "terms",
      title: "Additional Terms",
      description: "Specify any additional terms or features for this deposit account.",
    },
    {
      id: "review",
      title: "Review Application",
      description: "Review the deposit account details before submitting",
    },
  ]

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleCheckboxChange = (name: string, checked: boolean) => {
    setFormData((prev) => ({ ...prev, [name]: checked }))
  }

const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    }
  }

const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

const handleStepClick = (stepIndex: number) => {
    setCurrentStep(stepIndex)
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()

// Get the relationship name
    const selectedRelationship = relationships.find((r) => r.id === formData.relationshipId)

// Add the deposit with the form data
    const newDeposit = addDeposit({
      name: formData.name,
      accountNumber: formData.accountNumber || `****${Math.floor(1000 + Math.random() * 9000)}`,
      amount: formatCurrency(formData.amount),
      interestRate: formData.interestRate ? `${formData.interestRate}%` : "0.00%",
      relationshipId: formData.relationshipId,
      relationship: selectedRelationship?.name || "",
      status: "Pending Activation",
      type: depositTypeNames[formData.depositType] || formData.depositType,
      dealId: formData.dealId || undefined,
      openDate: formData.openDate,
      maturityDate: formData.maturityDate || undefined,
      term: formData.term || undefined,
      accountOwner: formData.accountOwner,
      jointOwners: formData.jointOwners,
      beneficiaries: formData.beneficiaries,
      routingNumber: formData.routingNumber,
      accountFeatures: formData.accountFeatures,
      minimumBalance: formatCurrency(formData.minimumBalance),
      monthlyFee: formatCurrency(formData.monthlyFee),
      overdraftProtection: formData.overdraftProtection,
      statementFrequency: formData.statementFrequency,
      interestPaymentFrequency: formData.interestPaymentFrequency,
      interestPaymentMethod: formData.interestPaymentMethod,
      autoRenewal: formData.autoRenewal,
      earlyWithdrawalPenalty: formData.earlyWithdrawalPenalty,
    })

// Navigate to the newly created deposit detail page (or back to the deal page if coming from there)
    if (dealId) {
      router.push(`/deals/${dealId}`)
    } else {
      router.push(`/deposits/${newDeposit.id}`)
    }
  }

const formatCurrency = (value: string) => {
    if (!value) return ""

// Remove all non-numeric characters
    const numericValue = value.replace(/[^0-9]/g, "")

// Convert to number and format
    const number = Number.parseInt(numericValue, 10)
    if (isNaN(number)) return ""

return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 0,
      maximumFractionDigits: 0,
    }).format(number)
  }

const handleCurrencyInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

// Store the raw numeric value but display the formatted value
    const numericValue = value.replace(/[^0-9]/g, "")
    e.target.value = formatCurrency(numericValue)

setFormData((prev) => ({ ...prev, [name]: numericValue }))
  }

return (
    <div className="py-6 px-6 space-y-6">
      <PageHeader
        title="New Deposit Account"
        subtitle="Create a new deposit account for your client"
        icon={Wallet}
        breadcrumbs={[
          { label: "Relationships", href: "/relationships" },
          ...(relationshipId
            ? [
                {
                  label: relationships.find((r) => r.id === relationshipId)?.name || "Relationship",
                  href: `/relationships/${relationshipId}`,
                },
              ]
            : []),
          ...(dealId
            ? [
                {
                  label: relationshipDeals.find((d) => d.id === dealId)?.name || "Deal",
                  href: `/deals/${dealId}`,
                },
              ]
            : []),
          { label: "New Deposit Account", href: "/deposits/new" },
        ]}
        actions={
          <Button variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
        }
      />

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column - Steps, Instructions and Help */}
        <div className="lg:col-span-1 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Application Guide</CardTitle>
              <CardDescription>Follow these steps to complete your application</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {/* Custom Stepper */}
              <div className="space-y-4">
                {steps.map((step, index) => {
                  const isCompleted = index < currentStep
                  const isCurrent = index === currentStep
                  const isClickable = isCompleted || index === currentStep || index === currentStep + 1

return (
                    <div
                      key={step.id}
                      className={cn(
                        "flex items-start space-x-3 p-3 rounded-md transition-colors",
                        isCurrent && "bg-blue-50",
                        isClickable && "cursor-pointer hover:bg-gray-50",
                      )}
                      onClick={() => isClickable && handleStepClick(index)}
                    >
                      <div
                        className={cn(
                          "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium",
                          isCompleted && "border-blue-900 bg-blue-900 text-white",
                          isCurrent && "border-blue-900 text-blue-900",
                          !isCompleted && !isCurrent && "border-gray-300 text-gray-500",
                        )}
                      >
                        {isCompleted ? <Check className="h-4 w-4" /> : index + 1}
                      </div>
                      <div className="space-y-0.5">
                        <div
                          className={cn(
                            "font-medium",
                            isCurrent && "text-blue-900",
                            !isCompleted && !isCurrent && "text-gray-500",
                          )}
                        >
                          {step.title}
                        </div>
                        <div className="text-sm text-gray-500">{step.description}</div>
                      </div>
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>
        </div>

{/* Right Column - Form */}
        <div className="lg:col-span-2">
          <form onSubmit={handleSubmit}>
            <div className="space-y-6">
              {/* Step 1: Account Details */}
              {currentStep === 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Account Details</CardTitle>
                    <CardDescription>Enter the basic information about this deposit account</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="name">Account Name</Label>
                        <Input
                          id="name"
                          name="name"
                          value={formData.name}
                          onChange={handleInputChange}
                          placeholder="Business Checking Account"
                          required
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="relationshipId">Relationship</Label>
                        <Select
                          value={formData.relationshipId || ""}
                          onValueChange={(value) => handleSelectChange("relationshipId", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select relationship" />
                          </SelectTrigger>
                          <SelectContent>
                            {relationships.map((relationship) => (
                              <SelectItem key={relationship.id} value={relationship.id}>
                                {relationship.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="depositCategory">Account Category</Label>
                        <Select
                          value={formData.depositCategory}
                          onValueChange={(value) => handleSelectChange("depositCategory", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select account category" />
                          </SelectTrigger>
                          <SelectContent>
                            {depositTypes.map((category) => (
                              <SelectItem key={category.id} value={category.id}>
                                {category.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="depositType">Account Type</Label>
                        <Select
                          value={formData.depositType}
                          onValueChange={(value) => handleSelectChange("depositType", value)}
                          disabled={!formData.depositCategory}
                        >
                          <SelectTrigger>
                            <SelectValue
                              placeholder={formData.depositCategory ? "Select account type" : "Select a category first"}
                            />
                          </SelectTrigger>
                          <SelectContent>
                            {formData.depositCategory &&
                              depositTypes
                                .find((cat) => cat.id === formData.depositCategory)
                                ?.types.map((type) => (
                                  <SelectItem key={type} value={type}>
                                    {depositTypeNames[type] || type}
                                  </SelectItem>
                                ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="amount">Initial Deposit Amount</Label>
                        <Input
                          id="amount"
                          name="amount"
                          value={formatCurrency(formData.amount)}
                          onChange={handleCurrencyInput}
                          placeholder="$10,000"
                          required
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="dealId">Associated Deal (Optional)</Label>
                        <Select
                          value={formData.dealId}
                          onValueChange={(value) => handleSelectChange("dealId", value)}
                          disabled={!formData.relationshipId || relationshipDeals.length === 0}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select deal" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="none">None</SelectItem>
                            {relationshipDeals.map((deal) => (
                              <SelectItem key={deal.id} value={deal.id}>
                                {deal.name}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={() => router.back()}>
                      Cancel
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 2: Account Structure */}
              {currentStep === 1 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Account Structure</CardTitle>
                    <CardDescription>Define the structure and terms of the deposit account</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="interestRate">Interest Rate (%)</Label>
                        <Input
                          id="interestRate"
                          name="interestRate"
                          value={formData.interestRate}
                          onChange={handleInputChange}
                          placeholder="1.25"
                        />
                      </div>

{(formData.depositCategory === "cd" || formData.depositCategory === "ira") && (
                        <>
                          <div className="space-y-2">
                            <Label htmlFor="term">Term (months)</Label>
                            <Input
                              id="term"
                              name="term"
                              type="number"
                              value={formData.term}
                              onChange={handleInputChange}
                              placeholder="12"
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="maturityDate">Maturity Date</Label>
                            <Input
                              id="maturityDate"
                              name="maturityDate"
                              type="date"
                              value={formData.maturityDate}
                              onChange={handleInputChange}
                            />
                          </div>
                        </>
                      )}

<div className="space-y-2">
                        <Label htmlFor="minimumBalance">Minimum Balance</Label>
                        <Input
                          id="minimumBalance"
                          name="minimumBalance"
                          value={formatCurrency(formData.minimumBalance)}
                          onChange={handleCurrencyInput}
                          placeholder="$1,000"
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="monthlyFee">Monthly Fee</Label>
                        <Input
                          id="monthlyFee"
                          name="monthlyFee"
                          value={formatCurrency(formData.monthlyFee)}
                          onChange={handleCurrencyInput}
                          placeholder="$15"
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="statementFrequency">Statement Frequency</Label>
                        <Select
                          value={formData.statementFrequency}
                          onValueChange={(value) => handleSelectChange("statementFrequency", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select frequency" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Monthly">Monthly</SelectItem>
                            <SelectItem value="Quarterly">Quarterly</SelectItem>
                            <SelectItem value="Semi-Annual">Semi-Annual</SelectItem>
                            <SelectItem value="Annual">Annual</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="interestPaymentFrequency">Interest Payment Frequency</Label>
                        <Select
                          value={formData.interestPaymentFrequency}
                          onValueChange={(value) => handleSelectChange("interestPaymentFrequency", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select frequency" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Monthly">Monthly</SelectItem>
                            <SelectItem value="Quarterly">Quarterly</SelectItem>
                            <SelectItem value="Semi-Annual">Semi-Annual</SelectItem>
                            <SelectItem value="Annual">Annual</SelectItem>
                            <SelectItem value="At Maturity">At Maturity</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <Label htmlFor="interestPaymentMethod">Interest Payment Method</Label>
                        <Select
                          value={formData.interestPaymentMethod}
                          onValueChange={(value) => handleSelectChange("interestPaymentMethod", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select method" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Add to Principal">Add to Principal</SelectItem>
                            <SelectItem value="Transfer to Checking">Transfer to Checking</SelectItem>
                            <SelectItem value="Transfer to Savings">Transfer to Savings</SelectItem>
                            <SelectItem value="Check">Check</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>

{formData.depositCategory === "checking" && (
                        <div className="flex items-center space-x-2 pt-4">
                          <Checkbox
                            id="overdraftProtection"
                            checked={formData.overdraftProtection}
                            onCheckedChange={(checked) =>
                              handleCheckboxChange("overdraftProtection", checked as boolean)
                            }
                          />
                          <Label htmlFor="overdraftProtection">Overdraft Protection</Label>
                        </div>
                      )}

{(formData.depositCategory === "cd" || formData.depositCategory === "ira") && (
                        <>
                          <div className="flex items-center space-x-2 pt-4">
                            <Checkbox
                              id="autoRenewal"
                              checked={formData.autoRenewal}
                              onCheckedChange={(checked) => handleCheckboxChange("autoRenewal", checked as boolean)}
                            />
                            <Label htmlFor="autoRenewal">Auto Renewal</Label>
                          </div>
                          <div className="flex items-center space-x-2 pt-4">
                            <Checkbox
                              id="earlyWithdrawalPenalty"
                              checked={formData.earlyWithdrawalPenalty}
                              onCheckedChange={(checked) =>
                                handleCheckboxChange("earlyWithdrawalPenalty", checked as boolean)
                              }
                            />
                            <Label htmlFor="earlyWithdrawalPenalty">Early Withdrawal Penalty</Label>
                          </div>
                        </>
                      )}
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 3: Ownership Information */}
              {currentStep === 2 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Ownership Information</CardTitle>
                    <CardDescription>Provide details about the account owners and beneficiaries</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="accountOwner">Primary Account Owner</Label>
                        <Input
                          id="accountOwner"
                          name="accountOwner"
                          value={formData.accountOwner}
                          onChange={handleInputChange}
                          placeholder="John Smith"
                          required
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="routingNumber">Routing Number</Label>
                        <Input
                          id="routingNumber"
                          name="routingNumber"
                          value={formData.routingNumber}
                          onChange={handleInputChange}
                          placeholder="123456789"
                        />
                      </div>

<div className="space-y-2">
                        <Label htmlFor="accountNumber">Account Number (Optional)</Label>
                        <Input
                          id="accountNumber"
                          name="accountNumber"
                          value={formData.accountNumber}
                          onChange={handleInputChange}
                          placeholder="Will be auto-generated if left blank"
                        />
                      </div>
                    </div>

{/* Joint Owners Section */}
                    <div className="space-y-2 pt-4">
                      <Label>Joint Owners</Label>
                      <div className="border rounded-md p-4 bg-gray-50">
                        <p className="text-sm text-gray-500 mb-2">
                          Joint owners will be added in a future update. Currently, only the primary account owner is
                          supported.
                        </p>
                        <Button type="button" variant="outline" disabled>
                          <Users className="h-4 w-4 mr-2" />
                          Add Joint Owner
                        </Button>
                      </div>
                    </div>

{/* Beneficiaries Section */}
                    <div className="space-y-2 pt-4">
                      <Label>Beneficiaries</Label>
                      <div className="border rounded-md p-4 bg-gray-50">
                        <p className="text-sm text-gray-500 mb-2">
                          Beneficiaries will be added in a future update. Currently, beneficiary information is not
                          supported.
                        </p>
                        <Button type="button" variant="outline" disabled>
                          <User className="h-4 w-4 mr-2" />
                          Add Beneficiary
                        </Button>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 4: Additional Terms */}
              {currentStep === 3 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Additional Terms</CardTitle>
                    <CardDescription>Specify any additional terms or features for this deposit account</CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label>Account Features</Label>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-online" />
                          <Label htmlFor="feature-online">Online Banking</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-mobile" />
                          <Label htmlFor="feature-mobile">Mobile Banking</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-billpay" />
                          <Label htmlFor="feature-billpay">Bill Pay</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-estatements" />
                          <Label htmlFor="feature-estatements">eStatements</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-debitcard" />
                          <Label htmlFor="feature-debitcard">Debit Card</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-checks" />
                          <Label htmlFor="feature-checks">Check Writing</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-zelle" />
                          <Label htmlFor="feature-zelle">Zelle</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="feature-wire" />
                          <Label htmlFor="feature-wire">Wire Transfers</Label>
                        </div>
                      </div>
                    </div>

<div className="space-y-2 pt-4">
                      <Label>Account Disclosures</Label>
                      <div className="border rounded-md p-4 bg-gray-50">
                        <div className="flex items-center space-x-2 mb-4">
                          <Checkbox id="disclosure-truthinsavings" defaultChecked />
                          <Label htmlFor="disclosure-truthinsavings">Truth in Savings Disclosure</Label>
                        </div>
                        <div className="flex items-center space-x-2 mb-4">
                          <Checkbox id="disclosure-privacy" defaultChecked />
                          <Label htmlFor="disclosure-privacy">Privacy Notice</Label>
                        </div>
                        <div className="flex items-center space-x-2 mb-4">
                          <Checkbox id="disclosure-electronic" defaultChecked />
                          <Label htmlFor="disclosure-electronic">Electronic Banking Agreement</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="disclosure-funds" defaultChecked />
                          <Label htmlFor="disclosure-funds">Funds Availability Policy</Label>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 5: Review */}
              {currentStep === 4 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Review Deposit Account</CardTitle>
                    <CardDescription>Review the account details before submitting</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <Tabs defaultValue="details" className="w-full">
                      <TabsList className="grid grid-cols-4 mb-4">
                        <TabsTrigger value="details">Details</TabsTrigger>
                        <TabsTrigger value="structure">Structure</TabsTrigger>
                        <TabsTrigger value="ownership">Ownership</TabsTrigger>
                        <TabsTrigger value="terms">Terms</TabsTrigger>
                      </TabsList>
                      <TabsContent value="details" className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Account Name</h3>
                            <p>{formData.name || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Account Category</h3>
                            <p>
                              {depositTypes.find((cat) => cat.id === formData.depositCategory)?.name || "Not specified"}
                            </p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Account Type</h3>
                            <p>{depositTypeNames[formData.depositType] || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Initial Deposit Amount</h3>
                            <p>{formatCurrency(formData.amount) || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Open Date</h3>
                            <p>{formData.openDate || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Relationship</h3>
                            <p>
                              {relationships.find((r) => r.id === formData.relationshipId)?.name || "Not specified"}
                            </p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Associated Deal</h3>
                            <p>{relationshipDeals.find((d) => d.id === formData.dealId)?.name || "None"}</p>
                          </div>
                        </div>
                      </TabsContent>
                      <TabsContent value="structure" className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Interest Rate</h3>
                            <p>{formData.interestRate ? `${formData.interestRate}%` : "Not specified"}</p>
                          </div>
                          {(formData.depositCategory === "cd" || formData.depositCategory === "ira") && (
                            <>
                              <div>
                                <h3 className="text-sm font-medium text-gray-500">Term</h3>
                                <p>{formData.term ? `${formData.term} months` : "Not specified"}</p>
                              </div>
                              <div>
                                <h3 className="text-sm font-medium text-gray-500">Maturity Date</h3>
                                <p>{formData.maturityDate || "Not specified"}</p>
                              </div>
                            </>
                          )}
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Minimum Balance</h3>
                            <p>{formatCurrency(formData.minimumBalance) || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Monthly Fee</h3>
                            <p>{formatCurrency(formData.monthlyFee) || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Statement Frequency</h3>
                            <p>{formData.statementFrequency}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Interest Payment Frequency</h3>
                            <p>{formData.interestPaymentFrequency}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Interest Payment Method</h3>
                            <p>{formData.interestPaymentMethod}</p>
                          </div>
                          {formData.depositCategory === "checking" && (
                            <div>
                              <h3 className="text-sm font-medium text-gray-500">Overdraft Protection</h3>
                              <p>{formData.overdraftProtection ? "Yes" : "No"}</p>
                            </div>
                          )}
                          {(formData.depositCategory === "cd" || formData.depositCategory === "ira") && (
                            <>
                              <div>
                                <h3 className="text-sm font-medium text-gray-500">Auto Renewal</h3>
                                <p>{formData.autoRenewal ? "Yes" : "No"}</p>
                              </div>
                              <div>
                                <h3 className="text-sm font-medium text-gray-500">Early Withdrawal Penalty</h3>
                                <p>{formData.earlyWithdrawalPenalty ? "Yes" : "No"}</p>
                              </div>
                            </>
                          )}
                        </div>
                      </TabsContent>
                      <TabsContent value="ownership" className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Primary Account Owner</h3>
                            <p>{formData.accountOwner || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Routing Number</h3>
                            <p>{formData.routingNumber || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Account Number</h3>
                            <p>{formData.accountNumber || "Will be auto-generated"}</p>
                          </div>
                        </div>
                      </TabsContent>
                      <TabsContent value="terms" className="space-y-4">
                        <div>
                          <h3 className="text-sm font-medium text-gray-500">Account Features</h3>
                          <p>Selected features will be displayed here</p>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-gray-500">Account Disclosures</h3>
                          <p>Standard account disclosures will be provided</p>
                        </div>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button type="submit">Submit Deposit Application</Button>
                  </CardFooter>
                </Card>
              )}
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/deposits/new/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"
import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"

export default function NewDepositLoading() {
  return (
    <div className="py-6 px-6 space-y-6">
      {/* Header Skeleton */}
      <div className="space-y-2">
        <Skeleton className="h-8 w-64" />
        <Skeleton className="h-4 w-48" />
      </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Left Column - Steps */}
        <div className="lg:col-span-1 space-y-6">
          <Card>
            <CardHeader>
              <Skeleton className="h-6 w-40 mb-2" />
              <Skeleton className="h-4 w-56" />
            </CardHeader>
            <CardContent className="space-y-4">
              {Array.from({ length: 5 }).map((_, i) => (
                <div key={i} className="flex items-start space-x-3 p-3">
                  <Skeleton className="h-8 w-8 rounded-full" />
                  <div className="space-y-1 flex-1">
                    <Skeleton className="h-5 w-24" />
                    <Skeleton className="h-4 w-full" />
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </div>

{/* Right Column - Form */}
        <div className="lg:col-span-2">
          <Card>
            <CardHeader>
              <Skeleton className="h-6 w-40 mb-2" />
              <Skeleton className="h-4 w-56" />
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {Array.from({ length: 6 }).map((_, i) => (
                  <div key={i} className="space-y-2">
                    <Skeleton className="h-4 w-24" />
                    <Skeleton className="h-10 w-full" />
                  </div>
                ))}
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Skeleton className="h-10 w-24" />
              <Skeleton className="h-10 w-24" />
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loans/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import {
  Search,
  CreditCard,
  MoreVertical,
  Plus,
  Filter,
  X,
  DollarSign,
  Clock,
  CheckCircle,
  AlertTriangle,
  LayoutList,
  LayoutGrid,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import PageHeader from "@/app/components/page-header"
import { DataTable, type ColumnDef } from "@/app/components/data-table"
import { StatusBadge } from "@/app/components/status-badge"
import { getLoans, type Loan } from "@/lib/loan-store"

type LoanType = Loan

// Get unique values for filter options
const getUniqueValues = (field: keyof Loan) => {
  const values = getLoans().map((item) => item[field])
  return [...new Set(values)]
}

export default function LoansPage() {
  const router = useRouter()
  const [loans, setLoans] = useState<Loan[]>([])
  const [filteredLoans, setFilteredLoans] = useState<Loan[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [viewMode, setViewMode] = useState<"list" | "card">("list")

// Filter states
  const [filters, setFilters] = useState({
    status: "",
    loanType: "",
    relationshipId: "",
    loanCategory: "", // Add loan category filter
  })

// Load loans from storage on component mount
  useEffect(() => {
    const loansData = getLoans()
    setLoans(loansData)
    setFilteredLoans(loansData)
  }, [])

// Get unique values for filter dropdowns
  const statusOptions = getUniqueValues("status")
  const loanTypeOptions = getUniqueValues("loanType")
  const relationshipOptions = getUniqueValues("relationshipId")
  const loanCategoryOptions = getUniqueValues("loanCategory") // Add this line

// Count active filters
  const activeFilterCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)

const handleNewLoan = () => {
    // Navigate to new loan page
    router.push("/loans/new")
  }

// Handle filter changes
  const handleFilterChange = (field: string, value: string) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Clear all filters
  const clearFilters = () => {
    setFilters({
      status: "",
      loanType: "",
      relationshipId: "",
      loanCategory: "", // Add this line
    })
    setSearchTerm("")
  }

// Navigate to loan detail
  const handleLoanClick = (loan: Loan) => {
    router.push(`/loans/${loan.id}`)
  }

// Apply filters
  useEffect(() => {
    if (!loans) return
    let result = [...loans]

// Apply search term filter
    if (searchTerm) {
      result = result.filter(
        (item) =>
          item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.loanType.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

// Apply dropdown filters
    Object.entries(filters).forEach(([field, value]) => {
      if (value && value !== "all") {
        result = result.filter((item) => item[field as keyof typeof item] === value)
      }
    })

setFilteredLoans(result)
  }, [searchTerm, filters, loans])

const columns: ColumnDef<Loan>[] = [
    {
      id: "name",
      header: "Loan Name",
      accessorKey: "name",
      className: "font-bold text-blue-900 hover:underline cursor-pointer",
      onClick: handleLoanClick,
    },
    {
      id: "amount",
      header: "Amount",
      accessorKey: "amount",
      className: "font-semibold",
    },
    {
      id: "interestRate",
      header: "Interest Rate",
      accessorKey: "interestRate",
    },
    {
      id: "status",
      header: "Status",
      accessorKey: "status",
      cell: (item) => <StatusBadge status={item.status} />,
    },
    {
      id: "loanType",
      header: "Type",
      accessorKey: "loanType",
    },
    {
      id: "maturityDate",
      header: "Maturity Date",
      accessorKey: "maturityDate",
    },
    {
      id: "nextPaymentDate",
      header: "Next Payment",
      accessorKey: "nextPaymentDate",
    },
    {
      id: "actions",
      header: "",
      accessorKey: "id",
      sortable: false,
      cell: () => (
        <Button variant="ghost" size="icon">
          <MoreVertical className="h-4 w-4" />
        </Button>
      ),
    },
  ]

const breadcrumbs = [{ label: "Loans", href: "/loans" }, { label: "All Loans" }]

// Calculate loan statistics
  const activeLoans = loans.filter((loan) => loan.status === "Active").length
  const pendingLoans = loans.filter((loan) => loan.status === "Pending Closing").length
  const pastDueLoans = 0 // Placeholder for now
  const paidOffLoans = 0 // Placeholder for now
  const totalLoanAmount = loans.reduce((sum, loan) => {
    const amount = Number.parseFloat(loan.amount.replace(/[^0-9.-]+/g, ""))
    return sum + amount
  }, 0)
  const formattedTotalAmount = `${totalLoanAmount.toLocaleString()}`

// Get status color for card view
  const getStatusColor = (status: string) => {
    switch (status) {
      case "Active":
        return "bg-green-500"
      case "Pending Closing":
        return "bg-yellow-500"
      case "Past Due":
        return "bg-red-500"
      case "Paid Off":
        return "bg-teal-500"
      default:
        return "bg-gray-500"
    }
  }

// Format loan category for display
  const formatLoanCategory = (category: string) => {
    if (!category) return ""
    return category
      .split("-")
      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
      .join(" ")
  }

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Page Header */}
      <PageHeader
        title={`Loans`}
        subtitle={`Total Value: ${formattedTotalAmount}`}
        icon={CreditCard}
        actionLabel="New Loan"
        actionIcon={Plus}
        onAction={handleNewLoan}
        breadcrumbs={breadcrumbs}
      />

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <CheckCircle className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{activeLoans}</span>
            </div>
            <div className="text-sm text-gray-500">Active Loans</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-yellow-500 p-1 rounded">
                <AlertTriangle className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{pendingLoans}</span>
            </div>
            <div className="text-sm text-gray-500">Pending Closing</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-red-500 p-1 rounded">
                <Clock className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{pastDueLoans}</span>
            </div>
            <div className="text-sm text-gray-500">Past Due</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-teal-500 p-1 rounded">
                <DollarSign className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{paidOffLoans}</span>
            </div>
            <div className="text-sm text-gray-500">Paid Off</div>
          </CardContent>
        </Card>
      </div>

{/* Table Section */}
      <Card>
        <CardContent className="p-6">
          <div className="space-y-4">
            {/* Search and Filter Section */}
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div className="flex flex-wrap items-center gap-3">
                <div className="relative flex-1 max-w-sm">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                  <Input
                    placeholder="Search loans..."
                    className="pl-9"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>

<Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" className="flex items-center gap-2">
                      <Filter className="h-4 w-4" />
                      Filters
                      {activeFilterCount > 0 && <Badge className="ml-1 bg-blue-900">{activeFilterCount}</Badge>}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-80">
                    <div className="space-y-4">
                      <h3 className="font-medium">Filter Loans</h3>

<div className="space-y-2">
                        <label className="text-sm font-medium">Status</label>
                        <Select
                          value={filters.status}
                          onValueChange={(value) => handleFilterChange("status", value === "all" ? "" : value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select status" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">All</SelectItem>
                            {statusOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium">Loan Type</label>
                        <Select
                          value={filters.loanType}
                          onValueChange={(value) => handleFilterChange("loanType", value === "all" ? "" : value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select loan type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">All</SelectItem>
                            {loanTypeOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="flex justify-between pt-2">
                        <Button variant="outline" size="sm" onClick={clearFilters}>
                          Clear Filters
                        </Button>
                        <Button size="sm" className="bg-blue-900">
                          Apply Filters
                        </Button>
                      </div>
                    </div>
                  </PopoverContent>
                </Popover>

<Select
                  value={filters.loanCategory}
                  onValueChange={(value) => handleFilterChange("loanCategory", value === "all" ? "" : value)}
                >
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="All Categories" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Categories</SelectItem>
                    {loanCategoryOptions.map((option) => (
                      <SelectItem key={option} value={option}>
                        {formatLoanCategory(option)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>

{activeFilterCount > 0 && (
                  <Button variant="ghost" size="sm" onClick={clearFilters} className="text-gray-500">
                    <X className="h-4 w-4 mr-1" />
                    Clear All
                  </Button>
                )}
              </div>

{/* Results count and view toggle */}
              <div className="flex items-center gap-3">
                <div className="text-sm text-gray-500">
                  Showing {filteredLoans.length} of {loans.length} loans
                </div>

{/* View toggle buttons */}
                <div className="inline-flex items-center rounded-md border border-gray-200 overflow-hidden">
                  <Button
                    variant="ghost"
                    size="sm"
                    className={`rounded-none border-0 ${
                      viewMode === "list" ? "bg-blue-600 text-white hover:bg-blue-700" : "hover:bg-gray-100"
                    }`}
                    onClick={() => setViewMode("list")}
                    aria-label="List View"
                    title="List View"
                  >
                    <LayoutList className="h-4 w-4" />
                  </Button>
                  <div className="h-5 w-px bg-gray-200"></div>
                  <Button
                    variant="ghost"
                    size="sm"
                    className={`rounded-none border-0 ${
                      viewMode === "card" ? "bg-blue-600 text-white hover:bg-blue-700" : "hover:bg-gray-100"
                    }`}
                    onClick={() => setViewMode("card")}
                    aria-label="Card View"
                    title="Card View"
                  >
                    <LayoutGrid className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>

{/* Active filter badges */}
            {activeFilterCount > 0 && (
              <div className="flex flex-wrap gap-2 mt-2 w-full">
                {searchTerm && (
                  <Badge variant="outline" className="flex items-center gap-1">
                    Search: {searchTerm}
                    <X className="h-3 w-3 ml-1 cursor-pointer" onClick={() => setSearchTerm("")} />
                  </Badge>
                )}

{Object.entries(filters).map(([key, value]) => {
                  if (!value) return null
                  return (
                    <Badge key={key} variant="outline" className="flex items-center gap-1">
                      {key.replace(/([A-Z])/g, " $1").trim()}: {value}
                      <X className="h-3 w-3 ml-1 cursor-pointer" onClick={() => handleFilterChange(key, "")} />
                    </Badge>
                  )
                })}
              </div>
            )}

{/* List View */}
            {viewMode === "list" && (
              <div className="border rounded-lg">
                <DataTable
                  data={filteredLoans}
                  columns={columns}
                  initialSortField="name"
                  noResultsMessage="No loans match your filters. Try adjusting your criteria."
                  onRowClick={handleLoanClick}
                />
              </div>
            )}

{/* Card View */}
            {viewMode === "card" && (
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {filteredLoans.length > 0 ? (
                  filteredLoans.map((loan) => (
                    <Card
                      key={loan.id}
                      className="cursor-pointer hover:shadow-md transition-shadow"
                      onClick={() => handleLoanClick(loan)}
                    >
                      <CardContent className="p-4">
                        <div className="flex justify-between items-start mb-3">
                          <h3 className="font-bold text-blue-900">{loan.name}</h3>
                          <StatusBadge status={loan.status} />
                        </div>
                        <div className="space-y-2">
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-500">Amount</span>
                            <span className="font-semibold">{loan.amount}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-500">Interest Rate</span>
                            <span>{loan.interestRate}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-500">Type</span>
                            <span>{loan.loanType}</span>
                          </div>
                          <div className="flex justify-between">
                            <span className="text-sm text-gray-500">Maturity Date</span>
                            <span>{loan.maturityDate}</span>
                          </div>
                        </div>
                      </CardContent>
                      <CardFooter className="bg-gray-50 p-3 flex justify-between">
                        <span className="text-sm text-gray-500">Next Payment</span>
                        <span className="text-sm font-medium">{loan.nextPaymentDate}</span>
                      </CardFooter>
                    </Card>
                  ))
                ) : (
                  <div className="col-span-full p-8 text-center text-gray-500">
                    No loans match your filters. Try adjusting your criteria.
                  </div>
                )}
              </div>
            )}
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescript:file="app/components/tabs/deal-tasks-tab.tsx" isMerged="true"
"use client"

import { TaskTable } from "@/app/components/task-table"
import { getTasksForDeal } from "@/app/data/tasks"
import { useEffect, useState } from "react"

export interface DealTasksTabProps {
  dealId: string
}

export function DealTasksTab({ dealId }: DealTasksTabProps) {
  const [dealTasks, setDealTasks] = useState<any[]>([])

useEffect(() => {
    // Get tasks for this deal from the centralized task store
    const tasks = getTasksForDeal(dealId)
    setDealTasks(tasks)
  }, [dealId])

return (
    <TaskTable
      title="Tasks"
      tasks={dealTasks.map((task) => ({
        id: task.id,
        name: task.name,
        type: task.type,
        status: task.status as any,
        assignedTo: task.assignedTo,
        dueDate: task.dueDate,
      }))}
      onAddTask={() => {
        console.log("Add task for deal:", dealId)
      }}
      onUpdateTask={(task) => {
        console.log("Update task:", task)
      }}
      onViewTask={(task) => {
        console.log("View task:", task)
      }}
      showFilters={true}
      showSearch={true}
      showTypeColumn={true}
    />
  )
}
[V0_FILE]typescript:file="app/components/tabs/loan-tasks-tab.tsx" isMerged="true"
"use client"

import { TaskTable } from "@/app/components/task-table"
import { getTasksForLoan } from "@/app/data/tasks"
import { useEffect, useState } from "react"

export interface LoanTasksTabProps {
  loanId: string
}

export function LoanTasksTab({ loanId }: LoanTasksTabProps) {
  const [loanTasks, setLoanTasks] = useState<any[]>([])

useEffect(() => {
    // Get tasks for this loan from the centralized task store
    const tasks = getTasksForLoan(loanId)
    setLoanTasks(tasks)
  }, [loanId])

return (
    <TaskTable
      title="Tasks"
      tasks={loanTasks.map((task) => ({
        id: task.id,
        name: task.name,
        type: task.type,
        status: task.status as any,
        assignedTo: task.assignedTo,
        dueDate: task.dueDate,
      }))}
      onAddTask={() => {
        console.log("Add task for loan:", loanId)
      }}
      onUpdateTask={(task) => {
        console.log("Update task:", task)
      }}
      onViewTask={(task) => {
        console.log("View task:", task)
      }}
      showFilters={true}
      showSearch={true}
      showTypeColumn={true}
    />
  )
}
[V0_FILE]typescriptreact:file="app/deals/[id]/page.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useRouter, useParams } from "next/navigation"
import {
  Plus,
  Calendar,
  DollarSign,
  Briefcase,
  CheckCircle,
  Clock,
  AlertCircle,
  Percent,
  Tag,
  Landmark,
  Edit,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { toast } from "@/hooks/use-toast"

import PageHeader from "@/app/components/page-header"

// Add the import for StatusBadge at the top of the file with other imports
import { StatusBadge } from "@/app/components/status-badge"
import { DealTabManager } from "@/app/components/tabs/deal-tab-manager"
import type { MilestoneStatus, Milestone } from "@/app/components/tabs/deal-overview-tab"

// Add import for loan store at the top of the file
import { getLoansByDealId } from "@/lib/loan-store"
// Import the task store functions
import { getTasksForDeal } from "@/app/data/tasks"

// Import the data
import { initialDeals } from "@/app/data/deals"
import { initialRelationships } from "@/app/data/relationships"

export default function DealDetailPage() {
  const router = useRouter()
  const params = useParams()
  const id = params.id as string

const [activeTab, setActiveTab] = useState("overview")
  const [deal, setDeal] = useState<(typeof initialDeals)[0] | null>(null)
  const [relationship, setRelationship] = useState<(typeof initialRelationships)[0] | null>(null)
  const [loading, setLoading] = useState(true)
  const [dealProgressOpen, setDealProgressOpen] = useState(true)
  const [milestoneDialogOpen, setMilestoneDialogOpen] = useState(false)
  const [selectedMilestone, setSelectedMilestone] = useState<Milestone | null>(null)
  const [dealMilestones, setDealMilestones] = useState<Milestone[]>([
    {
      id: "1",
      name: "Application Submitted",
      description: "Initial application and required documents.",
      status: "Complete",
      date: "05/01/2024",
    },
    {
      id: "2",
      name: "Underwriting Review",
      description: "Financial analysis and risk assessment.",
      status: "Complete",
      date: "05/08/2024",
    },
    {
      id: "3",
      name: "Credit Committee Approval",
      description: "Final review and decision by committee.",
      status: "In Progress",
      date: "05/15/2024",
    },
    {
      id: "4",
      name: "Legal Documentation",
      description: "Preparation and review of contracts.",
      status: "To Do",
      date: "05/22/2024",
    },
    {
      id: "5",
      name: "Closing",
      description: "Final signatures and document execution.",
      status: "To Do",
      date: "05/29/2024",
    },
    {
      id: "6",
      name: "Funding",
      description: "Disbursement of approved funds.",
      status: "To Do",
      date: "06/05/2024",
    },
  ])

// Sample documents for this deal
  const dealDocuments = [
    { name: "Loan Application", status: "Complete", date: "05/15/2024", owner: "Olivia Benson" },
    { name: "Financial Statements", status: "Complete", date: "05/18/2024", owner: "Larry Owens" },
    { name: "Business Plan", status: "In Progress", date: "05/20/2024", owner: "Whitney Wright" },
    { name: "Tax Returns", status: "To Do", date: "05/25/2024", owner: "Olivia Benson" },
    { name: "Property Appraisal", status: "Complete", date: "05/22/2024", owner: "Larry Owens" },
  ]

// Sample loans for this deal
  const [dealLoans, setDealLoans] = useState([
    {
      id: "loan-001",
      name: "Commercial Mortgage",
      amount: "$2,500,000",
      interestRate: "4.25%",
      status: "Active",
      maturityDate: "06/15/2034",
      loanType: "Commercial Real Estate",
    },
    {
      id: "loan-002",
      name: "Equipment Financing",
      amount: "$750,000",
      interestRate: "5.10%",
      status: "Pending Closing",
      maturityDate: "03/22/2029",
      loanType: "Equipment",
    },
    {
      id: "loan-003",
      name: "Working Capital Line",
      amount: "$500,000",
      interestRate: "6.75%",
      status: "Approved",
      maturityDate: "11/30/2026",
      loanType: "Line of Credit",
    },
  ])

// Get tasks for this deal from the task store
  const [dealTasks, setDealTasks] = useState<any[]>([])

// Sample deposits for this deal
  const dealDeposits = [
    {
      id: "deposit-001",
      name: "Business Checking",
      accountNumber: "****4567",
      amount: "$350,000",
      interestRate: "0.25%",
      status: "Active",
      type: "Checking",
    },
    {
      id: "deposit-002",
      name: "Business Savings",
      accountNumber: "****7890",
      amount: "$1,250,000",
      interestRate: "1.75%",
      status: "Active",
      type: "Savings",
    },
    {
      id: "deposit-003",
      name: "Certificate of Deposit",
      accountNumber: "****2345",
      amount: "$500,000",
      interestRate: "3.25%",
      status: "Active",
      type: "CD",
    },
  ]

// Find the deal data based on the ID from the URL
  useEffect(() => {
    // In a real app, this would be an API call
    const foundDeal = initialDeals.find((d) => d.id === id)

if (foundDeal) {
      setDeal(foundDeal)

// Find the associated relationship
      const foundRelationship = initialRelationships.find((r) => r.id === foundDeal.relationshipId)
      if (foundRelationship) {
        setRelationship(foundRelationship)
      }

// Get associated loans from loan store for this deal
      const associatedLoans = getLoansByDealId(id)
      if (associatedLoans && associatedLoans.length > 0) {
        setDealLoans(
          associatedLoans.map((loan) => ({
            id: loan.id,
            name: loan.name,
            amount: `$${loan.amount.toLocaleString()}`,
            interestRate: `${loan.interestRate}%`,
            status: loan.status,
            maturityDate: loan.maturityDate,
            loanType: loan.type,
          })),
        )
      }

// Get tasks for this deal from the task store
      const tasks = getTasksForDeal(id)
      setDealTasks(tasks)
    } else {
      // If not found, could redirect to 404 or show an error
      console.error(`Deal with ID ${id} not found`)
    }

setLoading(false)
  }, [id])

// If loading or deal not found, show loading state
  if (loading || !deal) {
    return <div className="flex-1 p-4">Loading deal details...</div>
  }

// Function to handle milestone status change
  const handleMilestoneStatusChange = (milestoneId: string, newStatus: MilestoneStatus) => {
    // Update the milestone status
    const updatedMilestones = dealMilestones.map((milestone) => {
      if (milestone.id === milestoneId) {
        return { ...milestone, status: newStatus }
      }

// If marking a milestone as complete, also mark all previous milestones as complete
      if (newStatus === "Complete" && Number(milestone.id) < Number(milestoneId) && milestone.status !== "Complete") {
        return { ...milestone, status: "Complete" }
      }

// If marking a milestone as in progress, ensure all previous are complete
      if (
        newStatus === "In Progress" &&
        Number(milestone.id) < Number(milestoneId) &&
        milestone.status !== "Complete"
      ) {
        return { ...milestone, status: "Complete" }
      }

// If marking a milestone as to do, ensure all later ones are also to do
      if (
        (newStatus === "To Do" || newStatus === "In Progress") &&
        Number(milestone.id) > Number(milestoneId) &&
        milestone.status !== "To Do"
      ) {
        return { ...milestone, status: "To Do" }
      }

return milestone
    })

setDealMilestones(updatedMilestones)

// Show toast notification
    toast({
      title: "Milestone updated",
      description: `${selectedMilestone?.name} status changed to ${newStatus}`,
    })

// Close the dialog if open
    setMilestoneDialogOpen(false)
  }

// Function to open milestone dialog
  const openMilestoneDialog = (milestone: Milestone) => {
    setSelectedMilestone(milestone)
    setMilestoneDialogOpen(true)
  }

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Deal Header */}
      <PageHeader
        title={deal.name}
        subtitle={`${deal.type} • ${deal.status} • ${deal.stage} • ${deal.amount}`}
        icon={Briefcase}
        breadcrumbs={[
          { label: "Relationships", href: "/relationships" },
          { label: relationship?.name || "Relationship", href: `/relationships/${deal.relationshipId}` },
          { label: "Deals", href: `/relationships/${deal.relationshipId}?tab=deals` },
          { label: deal.name },
        ]}
        secondaryActions={
          <>
            <Button variant="outline">
              <Plus className="h-4 w-4 mr-1" />
              Add Task
            </Button>
            <Button variant="outline">Add Document</Button>
            <Button variant="outline">Add Note</Button>
            <Button className="bg-blue-900">
              <Edit className="h-4 w-4 mr-1" />
              Edit Deal
            </Button>
          </>
        }
      />

{/* Key Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-teal-500 p-1 rounded">
                <DollarSign className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{deal.amount}</span>
            </div>
            <div className="text-sm text-gray-500">Deal Amount</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-blue-500 p-1 rounded">
                <Calendar className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{deal.closingDate}</span>
            </div>
            <div className="text-sm text-gray-500">Closing Date</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-purple-500 p-1 rounded">
                <Percent className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{deal.probability}</span>
            </div>
            <div className="text-sm text-gray-500">Probability</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-pink-500 p-1 rounded">
                <Tag className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">
                <StatusBadge status={deal.priority} />
              </span>
            </div>
            <div className="text-sm text-gray-500">Priority</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <Landmark className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">
                <StatusBadge status={deal.status} />
              </span>
            </div>
            <div className="text-sm text-gray-500">Status</div>
          </CardContent>
        </Card>
      </div>

{/* Main Tabs */}
      <DealTabManager
        deal={deal}
        relationship={relationship}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
        dealMilestones={dealMilestones}
        dealProgressOpen={dealProgressOpen}
        setDealProgressOpen={setDealProgressOpen}
        onMilestoneStatusChange={handleMilestoneStatusChange}
        onOpenMilestoneDialog={openMilestoneDialog}
        dealLoans={dealLoans}
        dealTasks={dealTasks}
        dealDocuments={dealDocuments}
        dealDeposits={dealDeposits}
      />

{/* Milestone Dialog */}
      <Dialog open={milestoneDialogOpen} onOpenChange={setMilestoneDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>{selectedMilestone?.name}</DialogTitle>
            <DialogDescription>Update the status of this milestone.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <label htmlFor="status" className="text-right">
                Status
              </label>
              <select
                id="status"
                defaultValue={selectedMilestone?.status}
                className="col-span-3 rounded-md border shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                onChange={(e) => {
                  if (selectedMilestone) {
                    handleMilestoneStatusChange(selectedMilestone.id, e.target.value as MilestoneStatus)
                  }
                }}
              >
                <option value="To Do">To Do</option>
                <option value="In Progress">In Progress</option>
                <option value="Complete">Complete</option>
              </select>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setMilestoneDialogOpen(false)}>
              Cancel
            </Button>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

const fieldLabelStyle = "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"

function FieldLabel({ children }: { children: React.ReactNode }) {
  return <label className={fieldLabelStyle}>{children}</label>
}
[V0_FILE]typescriptreact:file="app/components/tabs/deal-tab-manager.tsx" isMerged="true"
"use client"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DealOverviewTab } from "./deal-overview-tab"
import { DealCreditResourcesTab } from "./deal-credit-resources-tab"
import { DealDocumentsTab } from "./deal-documents-tab"
import { DealTasksTab } from "./deal-tasks-tab"
import type { MilestoneStatus, Milestone } from "./deal-overview-tab"

interface DealTabManagerProps {
  deal: any
  relationship: any
  activeTab: string
  setActiveTab: (tab: string) => void
  dealMilestones: Milestone[]
  dealProgressOpen: boolean
  setDealProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneId: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
  dealLoans: any[]
  dealTasks: any[]
  dealDocuments: any[]
  dealDeposits: any[]
}

export function DealTabManager({
  deal,
  relationship,
  activeTab,
  setActiveTab,
  dealMilestones,
  dealProgressOpen,
  setDealProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
  dealLoans,
  dealTasks,
  dealDocuments,
  dealDeposits,
}: DealTabManagerProps) {
  return (
    <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="w-full">
      <TabsList className="border-b w-full justify-start rounded-none bg-transparent p-0">
        <TabsTrigger
          value="overview"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Overview
        </TabsTrigger>
        <TabsTrigger
          value="credit-resources"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Credit Resources
        </TabsTrigger>
        <TabsTrigger
          value="documents"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Documents ({dealDocuments.filter((d) => d.status === "Complete").length}/{dealDocuments.length})
        </TabsTrigger>
        <TabsTrigger
          value="tasks"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Tasks ({dealTasks.filter((t) => t.status === "Complete").length}/{dealTasks.length})
        </TabsTrigger>
      </TabsList>

{/* Tab Content */}
      <TabsContent value="overview" className="mt-6">
        <DealOverviewTab
          deal={deal}
          relationship={relationship}
          dealMilestones={dealMilestones}
          dealProgressOpen={dealProgressOpen}
          setDealProgressOpen={setDealProgressOpen}
          onMilestoneStatusChange={onMilestoneStatusChange}
          onOpenMilestoneDialog={onOpenMilestoneDialog}
          dealLoans={dealLoans}
          dealTasks={dealTasks}
          dealDocuments={dealDocuments}
          dealDeposits={dealDeposits}
        />
      </TabsContent>

<TabsContent value="tasks" className="mt-6">
        <DealTasksTab dealId={deal.id} />
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]typescript:file="app/data/required-documents.ts" isMerged="true"
import type { Task } from "@/app/components/task-table"

// Required documents based on credit policy
export const requiredDocuments: (Task & { level: "relationship" | "deal" | "loan" })[] = [
  {
    id: "doc1",
    name: "Business Registration Certificate",
    type: "Business Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "relationship",
  },
  {
    id: "doc2",
    name: "Articles of Incorporation/Organization",
    type: "Business Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "relationship",
  },
  {
    id: "doc3",
    name: "EIN Verification",
    type: "Business Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "relationship",
  },
  {
    id: "doc4",
    name: "Business License",
    type: "Business Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "relationship",
  },
  {
    id: "doc5",
    name: "Operating Agreement/Bylaws",
    type: "Business Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "relationship",
  },
  {
    id: "doc6",
    name: "Certificate of Good Standing",
    type: "Business Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "relationship",
  },
  // Financial Documents (Section 305) - Deal level
  {
    id: "doc7",
    name: "Complete Financial Statements (3 years)",
    type: "Financial",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  {
    id: "doc8",
    name: "Tax Returns (3 years)",
    type: "Financial",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  {
    id: "doc9",
    name: "CPA-Prepared Statements (if exposure > $1M)",
    type: "Financial",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  {
    id: "doc10",
    name: "Accounts Receivable Aging Report",
    type: "Financial",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  {
    id: "doc11",
    name: "Accounts Payable Aging Report",
    type: "Financial",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  // Credit Reports & Background Checks (Section 335) - Loan level
  {
    id: "doc12",
    name: "Credit Report Authorization",
    type: "Credit Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  {
    id: "doc13",
    name: "Trade References",
    type: "Credit Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  {
    id: "doc14",
    name: "Background Check Authorization",
    type: "Credit Verification",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Required",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  // Trust Documentation (Section 500) - Loan level
  {
    id: "doc15",
    name: "Trust Agreement (if applicable)",
    type: "Legal",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  {
    id: "doc16",
    name: "Trustee Certification (if applicable)",
    type: "Legal",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  // Small Business Documentation (Section 505) - Deal level
  {
    id: "doc17",
    name: "Business Plan (for startups)",
    type: "Business Planning",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  {
    id: "doc18",
    name: "Financial Projections (3 years)",
    type: "Business Planning",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "deal",
  },
  // Real Estate Documentation (Section 610) - Loan level
  {
    id: "doc19",
    name: "Property Deed/Title (if real estate collateral)",
    type: "Collateral",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  // Environmental Documentation (Section 615) - Loan level
  {
    id: "doc20",
    name: "Environmental Questionnaire (if real estate collateral)",
    type: "Environmental",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
  // Consumer Credits Documentation (Section 700) - Loan level
  {
    id: "doc21",
    name: "Income Verification (for personal guarantees)",
    type: "Consumer",
    status: "To Do",
    assignedTo: "Applicant",
    dueDate: "Conditional",
    actions: ["Request", "Upload", "Waive"],
    level: "loan",
  },
]

// Helper functions to filter documents by level
export function getRelationshipLevelDocuments() {
  return requiredDocuments.filter((doc) => doc.level === "relationship")
}

export function getDealLevelDocuments() {
  return requiredDocuments.filter((doc) => doc.level === "deal")
}

export function getLoanLevelDocuments() {
  return requiredDocuments.filter((doc) => doc.level === "loan")
}
[V0_FILE]typescript:file="app/data/tasks.ts" isMerged="true"
import {
  requiredDocuments,
  getRelationshipLevelDocuments,
  getDealLevelDocuments,
  getLoanLevelDocuments,
} from "./required-documents"

// Sample tasks for the application
export const sampleTasks = [
  {
    id: "task1",
    name: "Review Credit Application",
    type: "Credit Review",
    status: "Complete",
    assignedTo: "John Smith",
    dueDate: "15/04/2023",
    relationshipId: "rel1",
    dealId: "deal1",
    loanId: null,
  },
  {
    id: "task2",
    name: "Schedule Client Meeting",
    type: "Client Management",
    status: "In Progress",
    assignedTo: "Sarah Johnson",
    dueDate: "20/04/2023",
    relationshipId: "rel1",
    dealId: null,
    loanId: null,
  },
  {
    id: "task3",
    name: "Prepare Loan Documentation",
    type: "Loan Processing",
    status: "To Do",
    assignedTo: "Michael Brown",
    dueDate: "25/04/2023",
    relationshipId: "rel1",
    dealId: null,
    loanId: "loan1",
  },
  {
    id: "task4",
    name: "Conduct Risk Assessment",
    type: "Risk Management",
    status: "In Progress",
    assignedTo: "Emily Davis",
    dueDate: "18/04/2023",
    relationshipId: "rel2",
    dealId: "deal2",
    loanId: null,
  },
  {
    id: "task5",
    name: "Update Client Information",
    type: "Client Management",
    status: "Complete",
    assignedTo: "David Wilson",
    dueDate: "10/04/2023",
    relationshipId: "rel2",
    dealId: null,
    loanId: null,
  },
  {
    id: "task6",
    name: "Review Financial Statements",
    type: "Financial Analysis",
    status: "To Do",
    assignedTo: "Jennifer Lee",
    dueDate: "22/04/2023",
    relationshipId: "rel3",
    dealId: "deal3",
    loanId: null,
  },
  {
    id: "task7",
    name: "Prepare Credit Memo",
    type: "Credit Review",
    status: "In Progress",
    assignedTo: "Robert Taylor",
    dueDate: "19/04/2023",
    relationshipId: "rel3",
    dealId: null,
    loanId: null,
  },
  {
    id: "task8",
    name: "Conduct Site Visit",
    type: "Due Diligence",
    status: "To Do",
    assignedTo: "Lisa Anderson",
    dueDate: "27/04/2023",
    relationshipId: "rel4",
    dealId: "deal4",
    loanId: null,
  },
  {
    id: "task9",
    name: "Review Collateral Documentation",
    type: "Loan Processing",
    status: "Complete",
    assignedTo: "James Martinez",
    dueDate: "12/04/2023",
    relationshipId: "rel4",
    dealId: null,
    loanId: "loan2",
  },
  {
    id: "task10",
    name: "Prepare Approval Package",
    type: "Credit Review",
    status: "To Do",
    assignedTo: "Patricia Harris",
    dueDate: "24/04/2023",
    relationshipId: "rel5",
    dealId: "deal5",
    loanId: null,
  },
  {
    id: "task11",
    name: "Schedule Loan Closing",
    type: "Loan Processing",
    status: "In Progress",
    assignedTo: "Thomas Clark",
    dueDate: "29/04/2023",
    relationshipId: "rel5",
    dealId: null,
    loanId: "loan3",
  },
  {
    id: "task12",
    name: "Conduct Background Check",
    type: "Due Diligence",
    status: "Complete",
    assignedTo: "Nancy Lewis",
    dueDate: "08/04/2023",
    relationshipId: "rel1",
    dealId: "deal1",
    loanId: null,
  },
  {
    id: "task13",
    name: "Review Insurance Coverage",
    type: "Risk Management",
    status: "To Do",
    assignedTo: "Daniel Walker",
    dueDate: "21/04/2023",
    relationshipId: "rel2",
    dealId: null,
    loanId: "loan4",
  },
  {
    id: "task14",
    name: "Prepare Annual Review",
    type: "Client Management",
    status: "In Progress",
    assignedTo: "Karen Hall",
    dueDate: "26/04/2023",
    relationshipId: "rel3",
    dealId: "deal3",
    loanId: null,
  },
  {
    id: "task15",
    name: "Update Covenant Compliance",
    type: "Loan Monitoring",
    status: "Complete",
    assignedTo: "Steven Young",
    dueDate: "14/04/2023",
    relationshipId: "rel4",
    dealId: null,
    loanId: "loan5",
  },
  {
    id: "task16",
    name: "Review Appraisal Report",
    type: "Loan Processing",
    status: "To Do",
    assignedTo: "Betty King",
    dueDate: "23/04/2023",
    relationshipId: "rel5",
    dealId: "deal5",
    loanId: null,
  },
  {
    id: "task17",
    name: "Conduct Portfolio Review",
    type: "Risk Management",
    status: "In Progress",
    assignedTo: "Richard Scott",
    dueDate: "28/04/2023",
    relationshipId: "rel1",
    dealId: null,
    loanId: "loan6",
  },
  {
    id: "task18",
    name: "Update Credit Score",
    type: "Credit Review",
    status: "Complete",
    assignedTo: "Susan Green",
    dueDate: "11/04/2023",
    relationshipId: "rel2",
    dealId: "deal2",
    loanId: null,
  },
  {
    id: "task19",
    name: "Prepare Loan Modification",
    type: "Loan Processing",
    status: "To Do",
    assignedTo: "Joseph Adams",
    dueDate: "30/04/2023",
    relationshipId: "rel3",
    dealId: null,
    loanId: "loan7",
  },
  {
    id: "task20",
    name: "Review Compliance Requirements",
    type: "Compliance",
    status: "In Progress",
    assignedTo: "Margaret Baker",
    dueDate: "17/04/2023",
    relationshipId: "rel4",
    dealId: "deal4",
    loanId: null,
  },
  // Additional deal-specific tasks
  {
    id: "task21",
    name: "Review financial statements",
    type: "Financial Analysis",
    status: "Complete",
    assignedTo: "Larry Owens",
    dueDate: "20/05/2024",
    relationshipId: null,
    dealId: "deal1",
    loanId: null,
  },
  {
    id: "task22",
    name: "Conduct site visit",
    type: "Due Diligence",
    status: "Complete",
    assignedTo: "Whitney Wright",
    dueDate: "22/05/2024",
    relationshipId: null,
    dealId: "deal1",
    loanId: null,
  },
  {
    id: "task23",
    name: "Prepare credit memo",
    type: "Credit Review",
    status: "In Progress",
    assignedTo: "Olivia Benson",
    dueDate: "28/05/2024",
    relationshipId: null,
    dealId: "deal1",
    loanId: null,
  },
  {
    id: "task24",
    name: "Schedule closing meeting",
    type: "Loan Processing",
    status: "To Do",
    assignedTo: "Larry Owens",
    dueDate: "10/06/2024",
    relationshipId: null,
    dealId: "deal1",
    loanId: null,
  },
  {
    id: "task25",
    name: "Obtain final approvals",
    type: "Credit Review",
    status: "To Do",
    assignedTo: "Whitney Wright",
    dueDate: "15/06/2024",
    relationshipId: null,
    dealId: "deal1",
    loanId: null,
  },
  // Additional loan-specific tasks
  {
    id: "task26",
    name: "Review loan agreement",
    type: "Loan Processing",
    status: "Complete",
    assignedTo: "Larry Owens",
    dueDate: "20/05/2024",
    relationshipId: null,
    dealId: null,
    loanId: "loan1",
  },
  {
    id: "task27",
    name: "Verify collateral",
    type: "Due Diligence",
    status: "Complete",
    assignedTo: "Whitney Wright",
    dueDate: "22/05/2024",
    relationshipId: null,
    dealId: null,
    loanId: "loan1",
  },
  {
    id: "task28",
    name: "Prepare disbursement schedule",
    type: "Loan Processing",
    status: "In Progress",
    assignedTo: "Olivia Benson",
    dueDate: "28/05/2024",
    relationshipId: null,
    dealId: null,
    loanId: "loan1",
  },
  {
    id: "task29",
    name: "Schedule closing meeting",
    type: "Loan Processing",
    status: "To Do",
    assignedTo: "Larry Owens",
    dueDate: "10/06/2024",
    relationshipId: null,
    dealId: null,
    loanId: "loan1",
  },
  {
    id: "task30",
    name: "Obtain final approvals",
    type: "Credit Review",
    status: "To Do",
    assignedTo: "Whitney Wright",
    dueDate: "15/06/2024",
    relationshipId: null,
    dealId: null,
    loanId: "loan1",
  },
]

export interface Task {
  id: string
  name: string
  type: string
  status: string
  assignedTo: string
  dueDate: string
  relationshipId?: string | null
  dealId?: string | null
  loanId?: string | null
  level?: "relationship" | "deal" | "loan"
}

// Function to get all tasks for a relationship, including required documents
export function getTasksForRelationship(relationshipId: string) {
  // Get the base tasks for this relationship
  const baseTasks = sampleTasks.filter((task) => task.relationshipId === relationshipId)

// Get relationship-level documents
  const relationshipDocuments = getRelationshipLevelDocuments().map((doc) => ({
    ...doc,
    relationshipId,
    // Generate a unique ID by combining the document ID and relationship ID
    id: `${doc.id}-${relationshipId}`,
  }))

// Get all deals for this relationship
  const relatedDeals = sampleTasks
    .filter((task) => task.relationshipId === relationshipId && task.dealId)
    .map((task) => task.dealId)
    .filter((value, index, self) => value && self.indexOf(value) === index) as string[]

// Get all loans for this relationship (directly or via deals)
  const relatedLoans = sampleTasks
    .filter(
      (task) =>
        (task.relationshipId === relationshipId && task.loanId) ||
        (relatedDeals.includes(task.dealId as string) && task.loanId),
    )
    .map((task) => task.loanId)
    .filter((value, index, self) => value && self.indexOf(value) === index) as string[]

// Roll up deal-level documents for all related deals
  const dealDocuments = relatedDeals.flatMap((dealId) => {
    return getDealLevelDocuments().map((doc) => ({
      ...doc,
      relationshipId,
      dealId,
      id: `${doc.id}-${dealId}-${relationshipId}`,
    }))
  })

// Roll up loan-level documents for all related loans
  const loanDocuments = relatedLoans.flatMap((loanId) => {
    return getLoanLevelDocuments().map((doc) => ({
      ...doc,
      relationshipId,
      loanId,
      id: `${doc.id}-${loanId}-${relationshipId}`,
    }))
  })

// Combine all tasks and documents
  return [...baseTasks, ...relationshipDocuments, ...dealDocuments, ...loanDocuments]
}

// Function to get all tasks for a deal, including required documents
export function getTasksForDeal(dealId: string) {
  // Get tasks specifically assigned to this deal
  const dealTasks = sampleTasks.filter((task) => task.dealId === dealId)

// Get the relationship ID for this deal
  const relationshipId = dealTasks.find((task) => task.relationshipId)?.relationshipId

// Get deal-level documents
  const dealDocuments = getDealLevelDocuments().map((doc) => ({
    ...doc,
    dealId,
    relationshipId,
    // Generate a unique ID by combining the document ID and deal ID
    id: `${doc.id}-${dealId}`,
  }))

// Get all loans for this deal
  const relatedLoans = sampleTasks
    .filter((task) => task.dealId === dealId && task.loanId)
    .map((task) => task.loanId)
    .filter((value, index, self) => value && self.indexOf(value) === index) as string[]

// Roll up loan-level documents for all related loans
  const loanDocuments = relatedLoans.flatMap((loanId) => {
    return getLoanLevelDocuments().map((doc) => ({
      ...doc,
      dealId,
      relationshipId,
      loanId,
      id: `${doc.id}-${loanId}-${dealId}`,
    }))
  })

// Combine deal tasks and documents
  return [...dealTasks, ...dealDocuments, ...loanDocuments]
}

// Function to get all tasks for a loan, including required documents
export function getTasksForLoan(loanId: string) {
  // Get tasks specifically assigned to this loan
  const loanTasks = sampleTasks.filter((task) => task.loanId === loanId)

// Get the deal ID and relationship ID for this loan
  const dealId = loanTasks.find((task) => task.dealId)?.dealId
  const relationshipId = loanTasks.find((task) => task.relationshipId)?.relationshipId

// Get loan-level documents
  const loanDocuments = getLoanLevelDocuments().map((doc) => ({
    ...doc,
    loanId,
    dealId,
    relationshipId,
    // Generate a unique ID by combining the document ID and loan ID
    id: `${doc.id}-${loanId}`,
  }))

// Combine loan tasks and documents
  return [...loanTasks, ...loanDocuments]
}

// Function to get all tasks across all relationships
export function getAllTasks() {
  // Get unique relationship IDs from the sample tasks
  const relationshipIds = [
    ...new Set(sampleTasks.filter((task) => task.relationshipId).map((task) => task.relationshipId)),
  ]

// Start with the base sample tasks
  let allTasks = [...sampleTasks]

// Add required documents for each relationship
  relationshipIds.forEach((relationshipId) => {
    if (relationshipId) {
      const relationshipDocuments = requiredDocuments.map((doc) => ({
        ...doc,
        relationshipId,
        // Generate a unique ID by combining the document ID and relationship ID
        id: `${doc.id}-${relationshipId}`,
      }))

allTasks = [...allTasks, ...relationshipDocuments]
    }
  })

return allTasks
}

// Function to create a new task
export function createTask(task: Omit<Task, "id">): Task {
  const newTask = {
    ...task,
    id: `task${sampleTasks.length + 1}`,
  }

sampleTasks.push(newTask)
  return newTask
}

// Function to update an existing task
export function updateTask(taskId: string, updates: Partial<Task>): Task | null {
  const taskIndex = sampleTasks.findIndex((task) => task.id === taskId)

if (taskIndex === -1) {
    return null
  }

const updatedTask = {
    ...sampleTasks[taskIndex],
    ...updates,
  }

sampleTasks[taskIndex] = updatedTask
  return updatedTask
}

// Function to delete a task
export function deleteTask(taskId: string): boolean {
  const taskIndex = sampleTasks.findIndex((task) => task.id === taskId)

if (taskIndex === -1) {
    return false
  }

sampleTasks.splice(taskIndex, 1)
  return true
}
[V0_FILE]typescriptreact:file="app/components/task-table.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useMemo } from "react"
import {
  Plus,
  Search,
  MoreHorizontal,
  Check,
  ChevronDown,
  Upload,
  FileText,
  AlertCircle,
  FileEdit,
  ClipboardList,
  Building,
  Briefcase,
  CreditCard,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { StatusBadge } from "@/app/components/status-badge"
import { TypeBadge } from "./type-badge"
import { Badge } from "@/components/ui/badge"

export interface Task {
  id: string
  name: string
  type: string
  status: TaskStatus
  assignedTo: string
  dueDate: string
  actions?: string[]
  level?: "relationship" | "deal" | "loan"
}

interface ActionMenuItem {
  label: string
  icon?: React.ReactNode
  onClick: () => void
}

interface TaskTableProps {
  title?: string
  tasks: Task[]
  onAddTask?: () => void
  onUpdateTask?: (task: Task) => void
  onViewTask?: (task: Task) => void
  onRequestTask?: (task: Task) => void
  showFilters?: boolean
  showCheckboxes?: boolean
  showPagination?: boolean
  showSearch?: boolean
  showTypeColumn?: boolean
  showLevelColumn?: boolean
  emptyMessage?: string
  renderTypeColumn?: (task: Task) => React.ReactNode
  renderActionMenu?: (task: Task) => ActionMenuItem[] | undefined
}

export function TaskTable({
  title = "Tasks",
  tasks,
  onAddTask,
  onUpdateTask,
  onViewTask,
  onRequestTask,
  showFilters = true,
  showCheckboxes = true,
  showPagination = false,
  showSearch = true,
  showTypeColumn = true,
  showLevelColumn = true,
  emptyMessage = "No tasks found.",
  renderTypeColumn,
  renderActionMenu,
}: TaskTableProps) {
  const [selectedTasks, setSelectedTasks] = useState<string[]>([])
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [typeFilter, setTypeFilter] = useState<string>("all")
  const [assigneeFilter, setAssigneeFilter] = useState<string>("all")
  const [taskTypeFilter, setTaskTypeFilter] = useState<string>("all") // New filter for document vs regular tasks
  const [levelFilter, setLevelFilter] = useState<string>("all") // New filter for level
  const [sortColumn, setSortColumn] = useState<keyof Task>("dueDate")
  const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc")

// Reset selected tasks when tasks change
  useEffect(() => {
    setSelectedTasks([])
  }, [tasks])

// Get unique types for filter
  const uniqueTypes = useMemo(() => {
    const types = new Set(tasks.map((task) => task.type))
    return Array.from(types)
  }, [tasks])

// Get unique assignees for filter
  const uniqueAssignees = useMemo(() => {
    const assignees = new Set(tasks.map((task) => task.assignedTo))
    return Array.from(assignees)
  }, [tasks])

// Function to determine if a task is a document task
  const isDocumentTask = (task: Task) => {
    return (
      task.type === "Business Verification" ||
      task.type === "Financial" ||
      task.type === "Credit Verification" ||
      task.type === "Legal" ||
      task.type === "Business Planning" ||
      task.type === "Collateral" ||
      task.type === "Environmental" ||
      task.type === "Consumer" ||
      task.type === "Document"
    )
  }

// Handle select all checkbox
  const handleSelectAll = () => {
    if (selectedTasks.length === filteredTasks.length) {
      setSelectedTasks([])
    } else {
      setSelectedTasks(filteredTasks.map((task) => task.id))
    }
  }

// Handle individual checkbox selection
  const handleSelectTask = (taskId: string) => {
    if (selectedTasks.includes(taskId)) {
      setSelectedTasks(selectedTasks.filter((id) => id !== taskId))
    } else {
      setSelectedTasks([...selectedTasks, taskId])
    }
  }

// Handle sort
  const handleSort = (column: keyof Task) => {
    if (sortColumn === column) {
      setSortDirection(sortDirection === "asc" ? "desc" : "asc")
    } else {
      setSortColumn(column)
      setSortDirection("asc")
    }
  }

// Filter and sort tasks
  const filteredTasks = useMemo(() => {
    return tasks
      .filter((task) => {
        // Search filter
        const matchesSearch =
          searchQuery === "" ||
          task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
          task.assignedTo.toLowerCase().includes(searchQuery.toLowerCase())

// Status filter
        const matchesStatus = statusFilter === "all" || task.status === statusFilter

// Type filter
        const matchesType = typeFilter === "all" || task.type === typeFilter

// Assignee filter
        const matchesAssignee = assigneeFilter === "all" || task.assignedTo === assigneeFilter

// Document vs Regular task filter
        const matchesTaskType =
          taskTypeFilter === "all" ||
          (taskTypeFilter === "documents" && isDocumentTask(task)) ||
          (taskTypeFilter === "tasks" && !isDocumentTask(task))

// Level filter
        const matchesLevel = levelFilter === "all" || task.level === levelFilter

return matchesSearch && matchesStatus && matchesType && matchesAssignee && matchesTaskType && matchesLevel
      })
      .sort((a, b) => {
        // Handle sorting
        if (a[sortColumn] < b[sortColumn]) {
          return sortDirection === "asc" ? -1 : 1
        }
        if (a[sortColumn] > b[sortColumn]) {
          return sortDirection === "asc" ? 1 : -1
        }
        return 0
      })
  }, [
    tasks,
    searchQuery,
    statusFilter,
    typeFilter,
    assigneeFilter,
    taskTypeFilter,
    levelFilter,
    sortColumn,
    sortDirection,
  ])

// Count document tasks
  const documentTasksCount = tasks.filter(isDocumentTask).length
  const regularTasksCount = tasks.length - documentTasksCount

// Get action button based on task status
  const getActionButton = (task: Task) => {
    // Use custom action menu if provided
    if (renderActionMenu) {
      const customActions = renderActionMenu(task)
      if (customActions) {
        return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="h-8 w-8 p-0">
                <span className="sr-only">Open menu</span>
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              {customActions.map((action, index) => (
                <DropdownMenuItem key={index} onClick={action.onClick}>
                  {action.icon}
                  {action.label}
                </DropdownMenuItem>
              ))}
            </DropdownMenuContent>
          </DropdownMenu>
        )
      }
    }

// Determine available actions based on task status and type
    const actions = []

if (task.actions && task.actions.length > 0) {
      // If specific actions are provided, use those
      actions.push(...task.actions)
    } else {
      // Default actions based on status and type
      if (isDocumentTask(task)) {
        // Document-specific actions
        switch (task.status) {
          case "Complete":
            actions.push("View")
            break
          case "Missing":
            actions.push("Request", "Upload")
            break
          case "In Progress":
          case "Pending":
          case "To Do":
            actions.push("Upload", "Mark Complete")
            break
          default:
            actions.push("View")
        }
      } else {
        // Regular task actions
        switch (task.status) {
          case "Complete":
            actions.push("View")
            break
          case "Missing":
            actions.push("Request")
            break
          case "In Progress":
          case "Pending":
          case "To Do":
            actions.push("Update")
            break
          default:
            actions.push("View")
        }
      }
    }

return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="h-8 w-8 p-0">
            <span className="sr-only">Open menu</span>
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          {isDocumentTask(task) ? (
            // Document-specific actions - standardized for all document tasks
            <>
              <DropdownMenuItem onClick={() => onRequestTask && onRequestTask(task)}>
                <FileText className="h-4 w-4 mr-2" />
                Request Document
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => onUpdateTask && onUpdateTask(task)}>
                <Upload className="h-4 w-4 mr-2" />
                Upload Document
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => onViewTask && onViewTask(task)}>
                <Check className="h-4 w-4 mr-2" />
                Mark Complete
              </DropdownMenuItem>
              <DropdownMenuItem>
                <AlertCircle className="h-4 w-4 mr-2" />
                Request Waiver
              </DropdownMenuItem>
            </>
          ) : (
            // Regular task actions
            actions.map((action) => (
              <DropdownMenuItem
                key={action}
                onClick={() => {
                  if (action === "View" && onViewTask) {
                    onViewTask(task)
                  } else if (action === "Update" && onUpdateTask) {
                    onUpdateTask(task)
                  } else if (action === "Request" && onRequestTask) {
                    onRequestTask(task)
                  } else if (action === "Upload" && onUpdateTask) {
                    onUpdateTask(task)
                  } else if (action === "Mark Complete" && onViewTask) {
                    onViewTask(task)
                  }
                }}
              >
                {action === "View" && <FileText className="h-4 w-4 mr-2" />}
                {action === "Update" && <FileEdit className="h-4 w-4 mr-2" />}
                {action === "Request" && <FileText className="h-4 w-4 mr-2" />}
                {action === "Upload" && <Upload className="h-4 w-4 mr-2" />}
                {action === "Mark Complete" && <Check className="h-4 w-4 mr-2" />}
                {action}
              </DropdownMenuItem>
            ))
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    )
  }

// Calculate completion stats
  const completedTasks = tasks.filter((task) => task.status === "Complete").length
  const totalTasks = tasks.length
  const completionText = totalTasks > 0 ? `${completedTasks}/${totalTasks}` : ""

// Render level badge
  const renderLevelBadge = (level?: string) => {
    if (!level) return null

switch (level) {
      case "relationship":
        return (
          <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
            <Building className="h-3 w-3 mr-1" />
            Relationship
          </Badge>
        )
      case "deal":
        return (
          <Badge variant="outline" className="bg-purple-50 text-purple-700 border-purple-200">
            <Briefcase className="h-3 w-3 mr-1" />
            Deal
          </Badge>
        )
      case "loan":
        return (
          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
            <CreditCard className="h-3 w-3 mr-1" />
            Loan
          </Badge>
        )
      default:
        return null
    }
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
        <CardTitle className="text-lg">
          {title} {completionText && `(${completionText})`}
          {documentTasksCount > 0 &&
            regularTasksCount > 0 &&
            ` • ${documentTasksCount} Documents, ${regularTasksCount} Tasks`}
        </CardTitle>
        <div className="flex items-center space-x-2">
          {showSearch && (
            <div className="relative">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
              <Input
                placeholder="Search tasks..."
                className="pl-9 w-64"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
            </div>
          )}
          {showFilters && (
            <div className="flex items-center space-x-2">
              <div className="flex items-center space-x-2">
                {/* New filter for document vs regular tasks */}
                <Select value={taskTypeFilter} onValueChange={setTaskTypeFilter}>
                  <SelectTrigger className="w-[150px] h-9">
                    <SelectValue placeholder="Task Type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Items</SelectItem>
                    <SelectItem value="documents">Documents Only</SelectItem>
                    <SelectItem value="tasks">Tasks Only</SelectItem>
                  </SelectContent>
                </Select>

{/* New filter for document level */}
                <Select value={levelFilter} onValueChange={setLevelFilter}>
                  <SelectTrigger className="w-[150px] h-9">
                    <SelectValue placeholder="Level" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Levels</SelectItem>
                    <SelectItem value="relationship">Relationship</SelectItem>
                    <SelectItem value="deal">Deal</SelectItem>
                    <SelectItem value="loan">Loan</SelectItem>
                  </SelectContent>
                </Select>

<Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger className="w-[130px] h-9">
                    <SelectValue placeholder="Status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Statuses</SelectItem>
                    <SelectItem value="Complete">Complete</SelectItem>
                    <SelectItem value="In Progress">In Progress</SelectItem>
                    <SelectItem value="To Do">To Do</SelectItem>
                    <SelectItem value="Missing">Missing</SelectItem>
                    <SelectItem value="Pending">Pending</SelectItem>
                    <SelectItem value="Waived">Waived</SelectItem>
                  </SelectContent>
                </Select>

{showTypeColumn && (
                  <Select value={typeFilter} onValueChange={setTypeFilter}>
                    <SelectTrigger className="w-[150px] h-9">
                      <SelectValue placeholder="Type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Types</SelectItem>
                      {uniqueTypes.map((type) => (
                        <SelectItem key={type} value={type}>
                          {type}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}

<Select value={assigneeFilter} onValueChange={setAssigneeFilter}>
                  <SelectTrigger className="w-[150px] h-9">
                    <SelectValue placeholder="Assignee" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Assignees</SelectItem>
                    {uniqueAssignees.map((assignee) => (
                      <SelectItem key={assignee} value={assignee}>
                        {assignee}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

{onAddTask && (
                <Button className="bg-blue-900" onClick={onAddTask}>
                  <Plus className="h-4 w-4 mr-1" />
                  Add Task
                </Button>
              )}
            </div>
          )}
        </div>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              {showCheckboxes && (
                <TableHead className="w-[40px]">
                  <Checkbox
                    checked={selectedTasks.length === filteredTasks.length && filteredTasks.length > 0}
                    onCheckedChange={handleSelectAll}
                    aria-label="Select all tasks"
                  />
                </TableHead>
              )}
              <TableHead className="cursor-pointer" onClick={() => handleSort("name")}>
                <div className="flex items-center">
                  Task
                  {sortColumn === "name" && (
                    <ChevronDown className={`ml-1 h-4 w-4 ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </div>
              </TableHead>
              {showTypeColumn && (
                <TableHead className="cursor-pointer" onClick={() => handleSort("type")}>
                  <div className="flex items-center">
                    Type
                    {sortColumn === "type" && (
                      <ChevronDown className={`ml-1 h-4 w-4 ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                    )}
                  </div>
                </TableHead>
              )}
              {showLevelColumn && (
                <TableHead>
                  <div className="flex items-center">Level</div>
                </TableHead>
              )}
              <TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
                <div className="flex items-center">
                  Status
                  {sortColumn === "status" && (
                    <ChevronDown className={`ml-1 h-4 w-4 ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </div>
              </TableHead>
              <TableHead className="cursor-pointer" onClick={() => handleSort("assignedTo")}>
                <div className="flex items-center">
                  Assigned To
                  {sortColumn === "assignedTo" && (
                    <ChevronDown className={`ml-1 h-4 w-4 ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </div>
              </TableHead>
              <TableHead className="cursor-pointer" onClick={() => handleSort("dueDate")}>
                <div className="flex items-center">
                  Due Date
                  {sortColumn === "dueDate" && (
                    <ChevronDown className={`ml-1 h-4 w-4 ${sortDirection === "desc" ? "rotate-180" : ""}`} />
                  )}
                </div>
              </TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {filteredTasks.length === 0 ? (
              <TableRow>
                <TableCell
                  colSpan={
                    showCheckboxes
                      ? showTypeColumn
                        ? showLevelColumn
                          ? 8
                          : 7
                        : showLevelColumn
                          ? 7
                          : 6
                      : showTypeColumn
                        ? showLevelColumn
                          ? 7
                          : 6
                        : showLevelColumn
                          ? 6
                          : 5
                  }
                  className="text-center py-8 text-gray-500"
                >
                  {emptyMessage}
                </TableCell>
              </TableRow>
            ) : (
              filteredTasks.map((task) => (
                <TableRow key={task.id}>
                  {showCheckboxes && (
                    <TableCell>
                      <Checkbox
                        checked={selectedTasks.includes(task.id)}
                        onCheckedChange={() => handleSelectTask(task.id)}
                        aria-label={`Select ${task.name}`}
                      />
                    </TableCell>
                  )}
                  <TableCell className="font-medium">
                    {isDocumentTask(task) ? (
                      <div className="flex items-center">
                        <FileText className="h-4 w-4 mr-2 text-blue-600" />
                        {task.name}
                      </div>
                    ) : (
                      <div className="flex items-center">
                        <ClipboardList className="h-4 w-4 mr-2 text-gray-600" />
                        {task.name}
                      </div>
                    )}
                  </TableCell>
                  {showTypeColumn && (
                    <TableCell>{renderTypeColumn ? renderTypeColumn(task) : <TypeBadge type={task.type} />}</TableCell>
                  )}
                  {showLevelColumn && <TableCell>{renderLevelBadge(task.level)}</TableCell>}
                  <TableCell>
                    <StatusBadge status={task.status} />
                  </TableCell>
                  <TableCell>{task.assignedTo}</TableCell>
                  <TableCell>{task.dueDate}</TableCell>
                  <TableCell className="text-right">{getActionButton(task)}</TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </CardContent>
      {selectedTasks.length > 0 && (
        <CardFooter className="border-t pt-4 flex justify-between">
          <div className="text-sm text-gray-500">
            {selectedTasks.length} {selectedTasks.length === 1 ? "item" : "items"} selected
          </div>
          <div className="flex space-x-2">
            <Button variant="outline" size="sm">
              <Upload className="h-4 w-4 mr-1" />
              Upload Documents
            </Button>
            <Button variant="outline" size="sm">
              <Check className="h-4 w-4 mr-1" />
              Mark Complete
            </Button>
            <Button variant="outline" size="sm">
              <AlertCircle className="h-4 w-4 mr-1" />
              Request Waiver
            </Button>
          </div>
        </CardFooter>
      )}
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/priority-manager-tab.tsx" isMerged="true"
"use client"
import { TaskTable } from "@/app/components/task-table"
import { getTasksForRelationship } from "@/app/data/tasks"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Upload, CheckCircle, AlertCircle, FileText, Check } from "lucide-react"

interface PriorityManagerTabProps {
  relationshipId: string
}

export function PriorityManagerTab({ relationshipId }: PriorityManagerTabProps) {
  // Get all tasks for this relationship, including required documents
  const allRelationshipTasks = getTasksForRelationship(relationshipId)

// Identify document tasks (but don't separate them)
  const documentTasks = allRelationshipTasks.filter(
    (task) =>
      task.type === "Business Verification" ||
      task.type === "Financial" ||
      task.type === "Credit Verification" ||
      task.type === "Legal" ||
      task.type === "Business Planning" ||
      task.type === "Collateral" ||
      task.type === "Environmental" ||
      task.type === "Consumer" ||
      task.type === "Document",
  )

// Calculate document stats for the progress bar
  const completedDocuments = documentTasks.filter((doc) => doc.status === "Complete").length
  const totalDocuments = documentTasks.length
  const documentProgress = totalDocuments > 0 ? Math.round((completedDocuments / totalDocuments) * 100) : 0

// Handle task actions
  const handleAddTask = () => {
    alert("Add task functionality would go here")
  }

const handleUpdateTask = (task: any) => {
    alert(`Update task: ${task.name}`)
  }

const handleViewTask = (task: any) => {
    alert(`View task: ${task.name}`)
  }

const handleRequestTask = (task: any) => {
    alert(`Request task: ${task.name}`)
  }

// Function to determine if a task is a document task
  const isDocumentTask = (task: any) => {
    return (
      task.type === "Business Verification" ||
      task.type === "Financial" ||
      task.type === "Credit Verification" ||
      task.type === "Legal" ||
      task.type === "Business Planning" ||
      task.type === "Collateral" ||
      task.type === "Environmental" ||
      task.type === "Consumer" ||
      task.type === "Document"
    )
  }

return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Task & Document Management</CardTitle>
          <CardDescription>Manage tasks and required documents for this relationship</CardDescription>
        </CardHeader>
        <CardContent>
          {totalDocuments > 0 && (
            <div className="flex justify-between items-center mb-6">
              <div className="flex items-center space-x-2">
                <div className="text-sm text-gray-500">Document completion: {documentProgress}%</div>
                <div className="w-48 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div className="h-full bg-green-500 rounded-full" style={{ width: `${documentProgress}%` }}></div>
                </div>
              </div>
              <div className="flex space-x-2">
                <Button variant="outline" size="sm">
                  <Upload className="h-4 w-4 mr-1" />
                  Upload Documents
                </Button>
                <Button variant="outline" size="sm">
                  <CheckCircle className="h-4 w-4 mr-1" />
                  Verify All
                </Button>
              </div>
            </div>
          )}

<TaskTable
            title="Tasks & Documents"
            tasks={allRelationshipTasks}
            onAddTask={handleAddTask}
            onUpdateTask={handleUpdateTask}
            onViewTask={handleViewTask}
            onRequestTask={handleRequestTask}
            emptyMessage="No tasks or document requirements found for this relationship."
            showCheckboxes={true}
            showFilters={true}
            showSearch={true}
            renderActionMenu={(task) => {
              if (isDocumentTask(task)) {
                return [
                  {
                    label: "Request Document",
                    icon: <FileText className="h-4 w-4 mr-2" />,
                    onClick: () => handleRequestTask(task),
                  },
                  {
                    label: "Upload Document",
                    icon: <Upload className="h-4 w-4 mr-2" />,
                    onClick: () => handleUpdateTask(task),
                  },
                  {
                    label: "Mark Complete",
                    icon: <Check className="h-4 w-4 mr-2" />,
                    onClick: () => handleViewTask(task),
                  },
                  {
                    label: "Request Waiver",
                    icon: <AlertCircle className="h-4 w-4 mr-2" />,
                    onClick: () => handleRequestTask(task),
                  },
                ]
              }
              return undefined // Use default actions for non-document tasks
            }}
          />

<div className="flex justify-between items-center mt-4">
            <div className="text-sm text-gray-500">{totalDocuments} document requirements based on credit policy</div>
            <Button variant="outline" size="sm">
              <AlertCircle className="h-4 w-4 mr-1" />
              Request Exceptions
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/overview-tab.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { TableCard, SimpleTable } from "@/app/components/table-card"
import { RelationshipSidebar } from "@/app/components/relationship-sidebar"
import { StatusBadge } from "@/components/status-badge"
import { relationshipExtendedData } from "@/app/data/relationships"
import { useState } from "react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { deleteRelationship, getRelationships, getOnboardingItems } from "@/lib/relationship-store"
import { initialDeals } from "@/app/data/deals"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  MoreHorizontal,
  FileEdit,
  Trash2,
  UserPlus,
  ClipboardList,
  FileText,
  Upload,
  AlertCircle,
  Calendar,
  FileCheck,
  FileSpreadsheet,
  FileCog,
  FileWarning,
  FileSearch,
  FilePlus,
  FileQuestion,
  Users,
  Building,
  CreditCard,
  Briefcase,
  ShieldCheck,
  FileSignature,
  FileX,
  Check,
} from "lucide-react"
import { getTasksForRelationship } from "@/app/data/tasks"
import { TypeBadge } from "@/app/components/type-badge"
// First, add the import for getLoansByRelationship at the top of the file
import { getLoansByRelationship } from "@/lib/loan-store"

interface OverviewTabProps {
  relationshipId: string
  relationship: any
  refreshRelationship: () => void
}

export function OverviewTab({ relationshipId, relationship, refreshRelationship }: OverviewTabProps) {
  const router = useRouter()
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [partyToDelete, setPartyToDelete] = useState<any | null>(null)

// Filter deals for this relationship
  const relationshipDeals = initialDeals.filter(
    (deal) => deal.relationshipId === relationshipId || deal.relationship === relationship.name,
  )

// Then, update the code that gets relationship loans
  // Replace this line:
  // With this:
  const relationshipLoans = getLoansByRelationship(relationshipId)

// Get all tasks for this relationship, including required documents
  const allRelationshipTasks = getTasksForRelationship(relationshipId)

// Sort by due date (ascending) and take only the top 5 for the overview
  const displayedTasks = allRelationshipTasks
    .sort((a, b) => {
      // Handle "Required" and "Conditional" special cases
      if (a.dueDate === "Required" && b.dueDate !== "Required") return -1
      if (a.dueDate !== "Required" && b.dueDate === "Required") return 1
      if (a.dueDate === "Conditional" && b.dueDate !== "Conditional" && b.dueDate !== "Required") return -1
      if (a.dueDate !== "Conditional" && a.dueDate !== "Required" && b.dueDate === "Conditional") return 1

// For actual dates
      if (a.dueDate.includes("/") && b.dueDate.includes("/")) {
        const dateA = new Date(a.dueDate.split("/").reverse().join("-"))
        const dateB = new Date(b.dueDate.split("/").reverse().join("-"))
        return dateA.getTime() - dateB.getTime()
      }

return 0
    })
    .slice(0, 5)

// Get onboarding items to check application status
  const onboardingItems = getOnboardingItems()

// Function to check if a relationship's application is incomplete
  const isApplicationIncomplete = (id: string) => {
    const onboardingItem = onboardingItems.find((item) => item.id === id)
    return onboardingItem && onboardingItem.status !== "Completed"
  }

// Handle deleting a related party
  const handleDeleteRelationship = (party: any) => {
    setPartyToDelete(party)
    setIsDeleteDialogOpen(true)
  }

const confirmDelete = () => {
    if (partyToDelete) {
      deleteRelationship(partyToDelete.id)
      setIsDeleteDialogOpen(false)
      setPartyToDelete(null)
      refreshRelationship()
    }
  }

// Get related parties data
  const getRelatedPartiesData = () => {
    // Check if we have related parties in the new data structure
    const relatedParties = relationship.relatedParties || []

// If we have related parties in the new structure, use those
    if (relatedParties.length > 0) {
      return {
        title: "Related Parties",
        data: relatedParties,
        columns: [
          {
            key: "name",
            header: "Name",
            cell: (item: any) => (
              <span
                className="font-medium text-blue-900 hover:underline cursor-pointer"
                onClick={() => router.push(`/relationships/${item.id}`)}
              >
                {item.name}
              </span>
            ),
          },
          { key: "type", header: "Type" },
          { key: "role", header: "Role" },
          {
            key: "ownershipPercentage",
            header: "Ownership %",
            cell: (item: any) => `${item.ownershipPercentage}%`,
          },
          {
            key: "actions",
            header: "Actions",
            cell: (item: any) => (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                    <span className="sr-only">Open menu</span>
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  {isApplicationIncomplete(item.id) && (
                    <DropdownMenuItem onClick={() => continueApplication(item.id)}>
                      <FileEdit className="h-4 w-4 mr-2" />
                      Continue
                    </DropdownMenuItem>
                  )}
                  <DropdownMenuItem className="text-red-600" onClick={() => handleDeleteRelationship(item)}>
                    <Trash2 className="h-4 w-4 mr-2" />
                    Delete
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ),
          },
        ],
      }
    }

// Otherwise, fall back to the old logic for backward compatibility
    // Find all relationships related to the current one
    const oldRelatedParties: any[] = []

// Get all relationships from the store instead of using initialRelationships
    const allRelationships = getRelationships()

// If this is a parent relationship (like Port City Coffee)
    const childRelationships = allRelationships.filter((rel) => rel.parentRelationshipId === relationshipId)

// If this is a child relationship (like Lilliana Jacobs)
    const isChildRelationship = relationship.parentRelationshipId
    const parentRelationship = isChildRelationship
      ? allRelationships.find((rel) => rel.id === relationship.parentRelationshipId)
      : null
    const siblingRelationships = isChildRelationship
      ? allRelationships.filter(
          (rel) => rel.parentRelationshipId === relationship.parentRelationshipId && rel.id !== relationshipId,
        )
      : []

// Prepare data for display
    if (childRelationships.length > 0) {
      // This is a parent relationship, show all children
      childRelationships.forEach((child) => {
        oldRelatedParties.push({
          id: child.id,
          name: child.name,
          type: child.type,
          role: child.relationshipRole || "Related Party",
          ownership: child.ownershipPercentage || "N/A",
        })
      })
    } else if (isChildRelationship && parentRelationship) {
      // This is a child relationship, show parent and siblings

// Add parent
      oldRelatedParties.push({
        id: parentRelationship.id,
        name: parentRelationship.name,
        type: parentRelationship.type,
        role: "Parent Entity",
        ownership: "N/A",
      })

// Add siblings
      siblingRelationships.forEach((sibling) => {
        oldRelatedParties.push({
          id: sibling.id,
          name: sibling.name,
          type: sibling.type,
          role: sibling.relationshipRole || "Related Party",
          ownership: sibling.ownershipPercentage || "N/A",
        })
      })
    }

// Return data for the old structure
    return {
      title: isChildRelationship ? "Related Parties" : "Related Parties",
      data: oldRelatedParties,
      columns: [
        {
          key: "name",
          header: "Name",
          cell: (item: any) => (
            <span
              className="font-medium text-blue-900 hover:underline cursor-pointer"
              onClick={() => router.push(`/relationships/${item.id}`)}
            >
              {item.name}
            </span>
          ),
        },
        { key: "type", header: "Type" },
        { key: "role", header: "Role" },
        { key: "ownership", header: "Ownership %" },
        {
          key: "status",
          header: "Status",
          cell: () => <StatusBadge status="In Progress" />,
        },
        {
          key: "actions",
          header: "Actions",
          cell: (item: any) => (
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                  <span className="sr-only">Open menu</span>
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                {isApplicationIncomplete(item.id) && (
                  <DropdownMenuItem onClick={() => continueApplication(item.id)}>
                    <FileEdit className="h-4 w-4 mr-2" />
                    Continue
                  </DropdownMenuItem>
                )}
              </DropdownMenuContent>
            </DropdownMenu>
          ),
        },
      ],
    }
  }

// Get related parties data
  const relatedPartiesData = getRelatedPartiesData()

// Function to get the appropriate icon for a task based on its type
  const getTaskIcon = (task: any) => {
    switch (task.type) {
      case "Meeting":
        return <Calendar className="h-4 w-4 mr-2 text-blue-600" />
      case "Document":
        return <FileText className="h-4 w-4 mr-2 text-amber-600" />
      case "Financial":
        return <FileSpreadsheet className="h-4 w-4 mr-2 text-green-600" />
      case "Credit Review":
        return <CreditCard className="h-4 w-4 mr-2 text-purple-600" />
      case "Risk Management":
        return <ShieldCheck className="h-4 w-4 mr-2 text-red-600" />
      case "Client Management":
        return <Users className="h-4 w-4 mr-2 text-blue-600" />
      case "Business Verification":
        return <Building className="h-4 w-4 mr-2 text-gray-600" />
      case "Credit Verification":
        return <FileCheck className="h-4 w-4 mr-2 text-purple-600" />
      case "Legal":
        return <FileSignature className="h-4 w-4 mr-2 text-indigo-600" />
      case "Business Planning":
        return <Briefcase className="h-4 w-4 mr-2 text-blue-600" />
      case "Collateral":
        return <FileCog className="h-4 w-4 mr-2 text-orange-600" />
      case "Environmental":
        return <FileWarning className="h-4 w-4 mr-2 text-green-600" />
      case "Consumer":
        return <Users className="h-4 w-4 mr-2 text-teal-600" />
      case "Due Diligence":
        return <FileSearch className="h-4 w-4 mr-2 text-amber-600" />
      case "Loan Processing":
        return <FilePlus className="h-4 w-4 mr-2 text-blue-600" />
      case "Compliance":
        return <FileX className="h-4 w-4 mr-2 text-red-600" />
      default:
        return <FileQuestion className="h-4 w-4 mr-2 text-gray-600" />
    }
  }

return (
    <div className="flex flex-col md:flex-row gap-6">
      {/* Left Column - 1/3 width */}
      <div className="md:w-1/3">
        <RelationshipSidebar relationship={relationship} onUpdate={refreshRelationship} />
        {/* Update the Edit button to use the new approach */}
      </div>

{/* Right Column - 2/3 width */}
      <div className="md:w-2/3 space-y-6">
        {/* Related Parties Card - Always show this card */}
        <TableCard
          title="Related Parties"
          actionLabel="Add Related Party"
          onAction={() => router.push("/relationships/new")}
        >
          {relatedPartiesData.data.length > 0 ? (
            <SimpleTable data={relatedPartiesData.data} columns={relatedPartiesData.columns} />
          ) : (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <div className="rounded-full bg-gray-100 p-3 mb-4">
                <UserPlus className="h-6 w-6 text-gray-400" />
              </div>
              <h3 className="text-lg font-medium text-gray-900 mb-1">No related parties</h3>
              <p className="text-sm text-gray-500 mb-4 max-w-sm">
                This relationship doesn't have any related parties yet. Add a related party to establish connections.
              </p>
              <Button onClick={() => router.push("/relationships/new")}>Add Related Party</Button>
            </div>
          )}
        </TableCard>

{/* Tasks Card - Combined tasks and documents */}
        <TableCard
          title={`Tasks & Documents (${allRelationshipTasks.length})`}
          actionLabel="Add Task"
          onAction={() => {}}
          headerContent={
            totalDocuments > 0 && (
              <div className="flex items-center space-x-2">
                <div className="text-sm text-gray-500">Document completion: {documentProgress}%</div>
                <div className="w-48 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div className="h-full bg-green-500 rounded-full" style={{ width: `${documentProgress}%` }}></div>
                </div>
              </div>
            )
          }
          footerContent={
            <Button
              variant="outline"
              size="sm"
              onClick={() => router.push(`/relationships/${relationshipId}?tab=priority-manager`)}
            >
              View All Tasks
            </Button>
          }
        >
          {displayedTasks.length > 0 ? (
            <SimpleTable
              data={displayedTasks}
              columns={[
                {
                  key: "name",
                  header: "Task",
                  cell: (item) => (
                    <div className="flex items-center">
                      {getTaskIcon(item)}
                      <span className="font-medium">{item.name}</span>
                    </div>
                  ),
                },
                {
                  key: "type",
                  header: "Type",
                  cell: (item) => <TypeBadge type={item.type} />,
                },
                {
                  key: "status",
                  header: "Status",
                  cell: (item) => <StatusBadge status={item.status} />,
                },
                {
                  key: "assignedTo",
                  header: "Assigned To",
                },
                {
                  key: "dueDate",
                  header: "Due Date",
                },
                {
                  key: "actions",
                  header: "Actions",
                  cell: (item) => (
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <span className="sr-only">Open menu</span>
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        {isDocumentTask(item) ? (
                          <>
                            <DropdownMenuItem>
                              <FileText className="h-4 w-4 mr-2" />
                              Request Document
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Upload className="h-4 w-4 mr-2" />
                              Upload Document
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Check className="h-4 w-4 mr-2" />
                              Mark Complete
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <AlertCircle className="h-4 w-4 mr-2" />
                              Request Waiver
                            </DropdownMenuItem>
                          </>
                        ) : (
                          <>
                            <DropdownMenuItem>
                              <FileEdit className="h-4 w-4 mr-2" />
                              Edit
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <ClipboardList className="h-4 w-4 mr-2" />
                              Mark Complete
                            </DropdownMenuItem>
                          </>
                        )}
                      </DropdownMenuContent>
                    </DropdownMenu>
                  ),
                },
              ]}
            />
          ) : (
            <div className="flex flex-col items-center justify-center py-12 text-center">
              <div className="rounded-full bg-gray-100 p-3 mb-4">
                <ClipboardList className="h-6 w-6 text-gray-400" />
              </div>
              <h3 className="text-lg font-medium text-gray-900 mb-1">No tasks</h3>
              <p className="text-sm text-gray-500 mb-4 max-w-sm">
                There are no tasks assigned to this relationship yet. Add a task to track work that needs to be done.
              </p>
              <Button>Add Task</Button>
            </div>
          )}
        </TableCard>

{/* Deals */}
        <TableCard
          title={`Deals (${relationshipDeals.length})`}
          actionLabel="New Deal"
          onAction={() => router.push("/deals/new")}
          footerContent={
            relationshipDeals.length > 0 && (
              <Button variant="outline" size="sm" onClick={() => router.push("/deals")}>
                View All Deals
              </Button>
            )
          }
        >
          <SimpleTable
            data={relationshipDeals}
            showCheckbox={true}
            columns={[
              {
                key: "name" as keyof (typeof relationshipDeals)[0],
                header: "Deal Name",
                cell: (deal) => (
                  <span
                    className="font-medium text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/deals/${deal.id}`)}
                  >
                    {deal.name}
                  </span>
                ),
              },
              { key: "amount" as keyof (typeof relationshipDeals)[0], header: "Amount" },
              {
                key: "status" as keyof (typeof relationshipDeals)[0],
                header: "Status",
                cell: (deal) =>
                  deal.status === "In Progress" ? (
                    <StatusBadge status="In Progress" />
                  ) : deal.status === "Approved" ? (
                    <StatusBadge status="Approved" />
                  ) : deal.status === "Pending Approval" ? (
                    <StatusBadge status="Pending Approval" />
                  ) : (
                    <StatusBadge status={deal.status} />
                  ),
              },
              { key: "stage" as keyof (typeof relationshipDeals)[0], header: "Stage" },
              { key: "closingDate" as keyof (typeof relationshipDeals)[0], header: "Closing Date" },
            ]}
            noResultsMessage="No deals found for this relationship."
          />
        </TableCard>

{/* Loans */}
        <TableCard
          title={`Loans (${relationshipLoans.length})`}
          actionLabel="New Loan"
          onAction={() => router.push(`/loans/new?relationshipId=${relationshipId}`)}
          footerContent={
            relationshipLoans.length > 0 && (
              <Button variant="outline" size="sm" onClick={() => router.push("/loans")}>
                View All Loans
              </Button>
            )
          }
        >
          <SimpleTable
            data={relationshipLoans}
            showCheckbox={true}
            columns={[
              {
                key: "name" as keyof (typeof relationshipLoans)[0],
                header: "Loan Name",
                cell: (loan) => (
                  <span
                    className="font-medium text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/loans/${loan.id}`)}
                  >
                    {loan.name}
                  </span>
                ),
              },
              { key: "amount" as keyof (typeof relationshipLoans)[0], header: "Amount" },
              { key: "interestRate" as keyof (typeof relationshipLoans)[0], header: "Interest Rate" },
              {
                key: "status" as keyof (typeof relationshipLoans)[0],
                header: "Status",
                cell: (loan) => <StatusBadge status={loan.status} />,
              },
              { key: "maturityDate" as keyof (typeof relationshipLoans)[0], header: "Maturity Date" },
              { key: "loanType" as keyof (typeof relationshipLoans)[0], header: "Type" },
            ]}
            noResultsMessage="No loans found for this relationship."
          />
        </TableCard>

{/* Deposits */}
        <TableCard
          title={`Deposit Accounts (${relationshipExtendedData.deposits.length})`}
          actionLabel="New Deposit Account"
          onAction={() => router.push(`/deposits/new?relationshipId=${relationshipId}`)}
          footerContent={
            relationshipExtendedData.deposits.length > 0 && (
              <Button variant="outline" size="sm">
                View All Deposit Accounts
              </Button>
            )
          }
        >
          <SimpleTable
            data={relationshipExtendedData.deposits}
            showCheckbox={true}
            columns={[
              {
                key: "name" as keyof (typeof relationshipExtendedData.deposits)[0],
                header: "Account Name",
                cell: (deposit) => (
                  <span className="font-medium text-blue-900 hover:underline cursor-pointer">{deposit.name}</span>
                ),
              },
              {
                key: "status" as keyof (typeof relationshipExtendedData.deposits)[0],
                header: "Status",
                cell: (deposit) => <StatusBadge status="Active" />,
              },
              {
                key: "balance" as keyof (typeof relationshipExtendedData.deposits)[0],
                header: "Balance",
                cell: () => "$125,000.00",
              },
              {
                key: "accountType" as keyof (typeof relationshipExtendedData.deposits)[0],
                header: "Account Type",
                cell: (deposit) => (deposit.name.includes("Checking") ? "Checking" : "Savings"),
              },
            ]}
            noResultsMessage="No deposit accounts found for this relationship."
          />
        </TableCard>

<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>Delete Relationship</DialogTitle>
              <DialogDescription>
                Are you sure you want to delete {partyToDelete?.name}? This action cannot be undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="secondary" onClick={() => setIsDeleteDialogOpen(false)}>
                Cancel
              </Button>
              <Button variant="destructive" onClick={confirmDelete}>
                Delete
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/deal-overview-tab.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import Link from "next/link"
import {
  Building,
  FileText,
  Briefcase,
  PieChart,
  Users,
  Edit,
  ChevronDown,
  MoreHorizontal,
  Check,
  Clock,
  Calendar,
  Plus,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { toast } from "@/hooks/use-toast"
import { TableCard, SimpleTable } from "@/app/components/table-card"
import { StatusBadge } from "@/app/components/status-badge"
import { TaskTable } from "@/app/components/task-table"
import { getTasksForDeal } from "@/app/data/tasks"

// Define milestone status type
export type MilestoneStatus = "Complete" | "In Progress" | "To Do"

// Define milestone type
export interface Milestone {
  id: string
  name: string
  description: string
  status: MilestoneStatus
  date: string
}

export interface DealOverviewTabProps {
  deal: any
  relationship: any
  dealMilestones: Milestone[]
  dealProgressOpen: boolean
  setDealProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneId: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
  dealLoans: any[]
  dealTasks: any[]
  dealDocuments: any[]
  dealDeposits: any[] // Add this line
}

export function DealOverviewTab({
  deal,
  relationship,
  dealMilestones,
  dealProgressOpen,
  setDealProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
  dealLoans,
  dealTasks,
  dealDocuments,
  dealDeposits, // Add this line
}: DealOverviewTabProps) {
  const router = useRouter()

return (
    <div className="flex flex-col md:flex-row gap-6">
      {/* Left Column - 1/3 width */}
      <div className="md:w-1/3 space-y-6">
        {/* Deal Summary */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Deal Summary</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-700">
              This {deal.type.toLowerCase()} for {deal.amount} is currently in the {deal.stage.toLowerCase()} stage with
              a {deal.probability} probability of closing. The deal is for {deal.relationship}, a{" "}
              {relationship?.type.toLowerCase()} in the {deal.industry} industry. The expected closing date is{" "}
              {deal.closingDate}.
            </p>
            <div className="text-xs text-gray-500 mt-2">
              This content was generated using AI.{" "}
              <Link href="#" className="text-blue-600">
                Learn more
              </Link>
            </div>
          </CardContent>
        </Card>

{/* Deal Progress */}
        <Collapsible open={dealProgressOpen} onOpenChange={setDealProgressOpen} className="space-y-2">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
              <div className="flex items-center space-x-2">
                <PieChart className="h-5 w-5 text-gray-500" />
                <CardTitle className="text-lg">Deal Progress</CardTitle>
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    // Find the first incomplete milestone
                    const nextMilestone = dealMilestones.find((m) => m.status !== "Complete")
                    if (nextMilestone) {
                      onMilestoneStatusChange(nextMilestone.id, "Complete")
                      toast({
                        title: "Progress updated",
                        description: `${nextMilestone.name} marked as complete`,
                      })
                    } else {
                      toast({
                        title: "All milestones complete",
                        description: "The deal has reached the final stage",
                      })
                    }
                  }}
                >
                  Update Progress
                </Button>
                <CollapsibleTrigger asChild>
                  <Button variant="ghost" size="sm">
                    <ChevronDown className={`h-4 w-4 transition-transform ${dealProgressOpen ? "" : "rotate-180"}`} />
                  </Button>
                </CollapsibleTrigger>
              </div>
            </CardHeader>
            <CollapsibleContent>
              <CardContent>
                <div className="space-y-2">
                  {/* Vertical Progress Stepper */}
                  <div className="relative">
                    {/* Continuous vertical line that runs through all steps */}
                    <div
                      className="absolute left-4 top-4 bottom-4 w-[2px] bg-gray-200"
                      style={{ transform: "translateX(-50%)" }}
                    />
                    {dealMilestones.map((milestone, index) => {
                      const isComplete = milestone.status === "Complete"
                      const isInProgress = milestone.status === "In Progress"
                      // If this milestone is complete, color the line up to the next milestone
                      const showColoredLine = isComplete || isInProgress

return (
                        <div key={milestone.id} className="flex items-start mb-6 last:mb-0 relative">
                          {/* Colored line segment for completed steps */}
                          {showColoredLine && index < dealMilestones.length - 1 && (
                            <div
                              className="absolute left-4 top-4 w-[2px] bg-blue-600 h-[calc(100%+1.5rem)]"
                              style={{ transform: "translateX(-50%)" }}
                            />
                          )}

{/* Circle indicator */}
                          <div
                            className={`relative z-10 flex items-center justify-center w-8 h-8 rounded-full border-2 cursor-pointer transition-colors ${
                              isComplete
                                ? "bg-blue-600 border-blue-600"
                                : isInProgress
                                  ? "bg-white border-blue-600"
                                  : "bg-white border-gray-300"
                            }`}
                            onClick={() => onOpenMilestoneDialog(milestone)}
                            role="button"
                            tabIndex={0}
                            aria-label={`Update ${milestone.name} status`}
                          >
                            {isComplete ? (
                              <Check className="h-4 w-4 text-white" />
                            ) : isInProgress ? (
                              <div className="h-2 w-2 rounded-full bg-blue-600" />
                            ) : (
                              <div className="h-2 w-2 rounded-full bg-gray-300" />
                            )}
                          </div>

{/* Content */}
                          <div
                            className="flex-1 ml-4 cursor-pointer group"
                            onClick={() => onOpenMilestoneDialog(milestone)}
                          >
                            <div className="flex justify-between items-start">
                              <div className="flex flex-col">
                                <span
                                  className={`text-sm font-medium group-hover:text-blue-600 transition-colors ${
                                    isComplete || isInProgress ? "text-gray-900" : "text-gray-500"
                                  }`}
                                >
                                  {milestone.name}
                                </span>
                                <p className="text-xs text-gray-500 mt-1">{milestone.description}</p>
                                <div className="flex items-center mt-1">
                                  <Calendar className="h-3 w-3 text-gray-400 mr-1" />
                                  <span className="text-xs text-gray-400">{milestone.date}</span>
                                </div>
                              </div>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                                    <MoreHorizontal className="h-4 w-4" />
                                    <span className="sr-only">Open menu</span>
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.id, "Complete")
                                    }}
                                  >
                                    <Check className="mr-2 h-4 w-4" />
                                    <span>Mark as Complete</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.id, "In Progress")
                                    }}
                                  >
                                    <Clock className="mr-2 h-4 w-4" />
                                    <span>Mark as In Progress</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.id, "To Do")
                                    }}
                                  >
                                    <span className="mr-2 h-4 w-4 flex items-center justify-center">○</span>
                                    <span>Mark as To Do</span>
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </CardContent>
            </CollapsibleContent>
          </Card>
        </Collapsible>

{/* Deal Details */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Briefcase className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Deal Details</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <div className="text-sm text-gray-500 mb-1">Deal Name</div>
                <div className="text-xl font-semibold">{deal.name}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Amount</div>
                <div className="text-xl font-semibold">{deal.amount}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Type</div>
                <div className="text-xl font-semibold">{deal.type}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Status</div>
                <div className="text-xl font-semibold">{deal.status}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Stage</div>
                <div className="text-xl font-semibold">{deal.stage}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Probability</div>
                <div className="text-xl font-semibold">{deal.probability}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Priority</div>
                <div className="text-xl font-semibold">{deal.priority}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Creation Date</div>
                <div className="text-xl font-semibold">{deal.dateCreated}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Closing Date</div>
                <div className="text-xl font-semibold">{deal.closingDate}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Owner</div>
                <div className="text-xl font-semibold">{deal.owner}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Industry</div>
                <div className="text-xl font-semibold">{deal.industry}</div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Relationship Information */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Building className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Relationship</CardTitle>
            </div>
            <Button variant="ghost" size="sm" onClick={() => router.push(`/relationships/${deal.relationshipId}`)}>
              View
            </Button>
          </CardHeader>
          <CardContent>
            {relationship ? (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-gray-500 mb-1">Relationship Name</div>
                  <div
                    className="text-xl font-semibold text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/relationships/${deal.relationshipId}`)}
                  >
                    {relationship.name}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Type</div>
                  <div className="text-xl font-semibold">{relationship.type}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Status</div>
                  <div className="text-xl font-semibold">{relationship.status}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Risk Status</div>
                  <div className="text-xl font-semibold">{relationship.riskStatus}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Primary Contact</div>
                  <div className="text-xl font-semibold">{relationship.primaryContact}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Contact Email</div>
                  <div className="text-xl font-semibold">{relationship.primaryContactEmail}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Contact Phone</div>
                  <div className="text-xl font-semibold">{relationship.primaryContactPhone}</div>
                </div>
              </div>
            ) : (
              <p className="text-sm text-gray-500">Relationship information not available.</p>
            )}
          </CardContent>
        </Card>

{/* Team Section */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Users className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Team</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>

<CardContent>
            <div className="space-y-3">
              <div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                  <span className="font-medium text-blue-800">OB</span>
                </div>
                <div>
                  <p className="font-medium text-gray-900">Olivia Benson</p>
                  <p className="text-xs text-gray-500">Relationship Manager</p>
                </div>
              </div>

<div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                  <span className="font-medium text-blue-800">LO</span>
                </div>
                <div>
                  <p className="font-medium text-gray-900">Larry Owens</p>
                  <p className="text-xs text-gray-500">Loan Officer</p>
                </div>
              </div>

<div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                  <span className="font-medium text-blue-800">WW</span>
                </div>
                <div>
                  <p className="font-medium text-gray-900">Whitney Wright</p>
                  <p className="text-xs text-gray-500">Credit Analyst</p>
                </div>
              </div>
            </div>
          </CardContent>

{/* Right Column - 2/3 width */}
      <div className="md:w-2/3 space-y-6">
        {/* Tasks - Now at the top */}
        <TaskTable
          title="Tasks"
          tasks={getTasksForDeal(deal.id).map((task) => ({
            id: task.id,
            name: task.name,
            type: task.type,
            status: task.status,
            assignedTo: task.assignedTo,
            dueDate: task.dueDate,
          }))}
          onAddTask={() => {}}
          onUpdateTask={(task) => {
            console.log("Update task:", task)
          }}
          onViewTask={(task) => {
            console.log("View task:", task)
          }}
          showTypeColumn={true}
        />

{/* Loans */}
        <TableCard
          title="Loans"
          actionLabel="Add Loan"
          onAction={() => router.push(`/loans/new?dealId=${deal.id}&relationshipId=${deal.relationshipId}`)}
          footerContent={
            <Button variant="ghost" size="sm">
              View All Loans
            </Button>
          }
        >
          {dealLoans && dealLoans.length > 0 ? (
            <SimpleTable
              data={dealLoans}
              columns={[
                {
                  key: "name" as keyof (typeof dealLoans)[0],
                  header: "Loan Name",
                  cell: (loan) => (
                    <span
                      className="font-medium text-blue-900 hover:underline cursor-pointer"
                      onClick={() => {
                        console.log(`Navigating to loan: ${loan.id}`)
                        router.push(`/loans/${loan.id}`)
                      }}
                    >
                      {loan.name}
                    </span>
                  ),
                },
                { key: "amount" as keyof (typeof dealLoans)[0], header: "Amount" },
                { key: "interestRate" as keyof (typeof dealLoans)[0], header: "Interest Rate" },
                {
                  key: "status" as keyof (typeof dealLoans)[0],
                  header: "Status",
                  cell: (loan) => <StatusBadge status={loan.status} />,
                },
                { key: "maturityDate" as keyof (typeof dealLoans)[0], header: "Maturity Date" },
                { key: "loanType" as keyof (typeof dealLoans)[0], header: "Type" },
              ]}
              showCheckbox={true}
              noResultsMessage="No loans found for this deal."
            />
          ) : (
            <div className="text-center py-6 text-gray-500">
              <p>No loans associated with this deal.</p>
              <Button
                variant="outline"
                size="sm"
                className="mt-2"
                onClick={() => router.push(`/loans/new?dealId=${deal.id}&relationshipId=${deal.relationshipId}`)}
              >
                <Plus className="h-4 w-4 mr-1" />
                Add New Loan
              </Button>
            </div>
          )}
        </TableCard>

{/* Deposits - New card */}
        <TableCard
          title="Deposits"
          actionLabel="Add Deposit"
          onAction={() => router.push(`/deposits/new?dealId=${deal.id}&relationshipId=${deal.relationshipId}`)}
          footerContent={
            <Button variant="ghost" size="sm">
              View All Deposits
            </Button>
          }
        >
          <SimpleTable
            data={dealDeposits}
            columns={[
              {
                key: "name" as keyof (typeof dealDeposits)[0],
                header: "Account Name",
                cell: (deposit) => (
                  <span
                    className="font-medium text-blue-900 hover:underline cursor-pointer"
                    onClick={() => {
                      console.log(`Navigating to deposit: ${deposit.id}`)
                      // router.push(`/deposits/${deposit.id}`)
                    }}
                  >
                    {deposit.name}
                  </span>
                ),
              },
              { key: "accountNumber" as keyof (typeof dealDeposits)[0], header: "Account Number" },
              { key: "amount" as keyof (typeof dealDeposits)[0], header: "Balance" },
              { key: "interestRate" as keyof (typeof dealDeposits)[0], header: "Interest Rate" },
              {
                key: "status" as keyof (typeof dealDeposits)[0],
                header: "Status",
                cell: (deposit) => <StatusBadge status={deposit.status} />,
              },
              { key: "type" as keyof (typeof dealDeposits)[0], header: "Type" },
            ]}
            showCheckbox={true}
            noResultsMessage="No deposits found for this deal."
          />
        </TableCard>

{/* Documents - Still at the bottom */}
        <TableCard
          title="Documents"
          actionLabel="Add Document"
          onAction={() => {}}
          footerContent={
            <Button variant="ghost" size="sm">
              View All Documents
            </Button>
          }
        >
          <SimpleTable
            data={dealDocuments}
            columns={[
              {
                key: "name" as keyof (typeof dealDocuments)[0],
                header: "Document Name",
                cell: (doc) => <span className="font-medium">{doc.name}</span>,
              },
              {
                key: "status" as keyof (typeof dealDocuments)[0],
                header: "Status",
                cell: (doc) => <StatusBadge status={doc.status} />,
              },
              { key: "date" as keyof (typeof dealDocuments)[0], header: "Date" },
              { key: "owner" as keyof (typeof dealDocuments)[0], header: "Owner" },
            ]}
            showCheckbox={false}
          />
        </TableCard>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/global-tasks-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { useRouter } from "next/navigation"
import { TaskTable, type Task } from "@/app/components/task-table"
import Link from "next/link"
import { Card, CardFooter } from "@/components/ui/card"
import { FileText, Upload, Check, AlertCircle } from "lucide-react"

// Update the GlobalTask interface to extend the SystemTask interface
interface GlobalTask extends Task {
  entityId: string
  entityType: "Relationship" | "Deal" | "Loan"
  entityName: string
}

interface GlobalTasksCardProps {
  tasks: GlobalTask[]
  limit?: number
}

export function GlobalTasksCard({ tasks, limit }: GlobalTasksCardProps) {
  const router = useRouter()
  const [searchQuery, setSearchQuery] = useState("")
  const [statusFilter, setStatusFilter] = useState<string>("all")
  const [entityFilter, setEntityFilter] = useState<string>("all")
  const [selectedTasks, setSelectedTasks] = useState<string[]>([])

// Filter tasks based on search and filters
  const filteredTasks = tasks.filter((task) => {
    const matchesSearch =
      searchQuery === "" ||
      task.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      task.entityName.toLowerCase().includes(searchQuery.toLowerCase())

const matchesStatus = statusFilter === "all" || task.status === statusFilter
    const matchesEntity = entityFilter === "all" || task.entityType === entityFilter

return matchesSearch && matchesStatus && matchesEntity
  })

// Navigate to the entity page when clicking on an entity
  const handleEntityClick = (task: GlobalTask) => {
    switch (task.entityType) {
      case "Relationship":
        router.push(`/relationships/${task.entityId}`)
        break
      case "Deal":
        router.push(`/deals/${task.entityId}`)
        break
      case "Loan":
        router.push(`/loans/${task.entityId}`)
        break
    }
  }

// Sort tasks by due date (most urgent first)
  const sortedTasks = [...tasks].sort((a, b) => {
    return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime()
  })

// Limit the number of tasks if specified
  const limitedTasks = limit ? sortedTasks.slice(0, limit) : sortedTasks

// Handle navigation to the entity page
  const handleViewTask = (task: Task) => {
    const globalTask = task as GlobalTask
    switch (globalTask.entityType) {
      case "Relationship":
        router.push(`/relationships/${globalTask.entityId}`)
        break
      case "Deal":
        router.push(`/deals/${globalTask.entityId}`)
        break
      case "Loan":
        router.push(`/loans/${globalTask.entityId}`)
        break
    }
  }

// Add this function after the handleViewTask function
  const renderActionMenu = (task: Task) => {
    const globalTask = task as GlobalTask

// Check if it's a document task
    if (
      task.type === "Business Verification" ||
      task.type === "Financial" ||
      task.type === "Credit Verification" ||
      task.type === "Legal" ||
      task.type === "Business Planning" ||
      task.type === "Collateral" ||
      task.type === "Environmental" ||
      task.type === "Consumer" ||
      task.type === "Document"
    ) {
      return [
        {
          label: "Request Document",
          icon: <FileText className="h-4 w-4 mr-2" />,
          onClick: () => handleViewTask(task),
        },
        {
          label: "Upload Document",
          icon: <Upload className="h-4 w-4 mr-2" />,
          onClick: () => handleViewTask(task),
        },
        {
          label: "Mark Complete",
          icon: <Check className="h-4 w-4 mr-2" />,
          onClick: () => handleViewTask(task),
        },
        {
          label: "Request Waiver",
          icon: <AlertCircle className="h-4 w-4 mr-2" />,
          onClick: () => handleViewTask(task),
        },
      ]
    }
    return undefined
  }

// Custom renderer for the type column to show entity information
  const renderTypeColumn = (task: Task) => {
    const globalTask = task as GlobalTask
    return (
      <div className="flex items-center gap-2">
        <Badge variant="outline" className="cursor-pointer hover:bg-gray-100" onClick={() => handleViewTask(task)}>
          {globalTask.entityType}: {globalTask.entityName}
        </Badge>
      </div>
    )
  }

return (
    <Card>
      <TaskTable
        title="My Tasks"
        tasks={limitedTasks}
        onViewTask={handleViewTask}
        showFilters={true}
        showCheckboxes={true}
        showPagination={false}
        showSearch={true}
        showTypeColumn={true}
        emptyMessage="No tasks to display."
        renderTypeColumn={renderTypeColumn}
        renderActionMenu={renderActionMenu}
      />
      <CardFooter className="px-4 py-2 border-t border-gray-100">
        <Link href="/tasks" className="text-blue-600 text-sm hover:text-blue-800">
          View All Tasks
        </Link>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-credit-resources-tab.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { EmptyLoanCreditResources } from "../empty-states/empty-loan-credit-resources"
import { StatusBadge } from "@/components/status-badge"
import {
  AlertCircle,
  Building,
  Calendar,
  CheckCircle,
  CheckCircle2,
  ChevronDown,
  ChevronRight,
  Clock,
  CreditCard,
  Edit,
  FileText,
  MoreHorizontal,
  PieChart,
  Plus,
  Shield,
  Users,
  Briefcase,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { toast } from "@/hooks/use-toast"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useRouter } from "next/navigation"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import type { Milestone, MilestoneStatus } from "./loan-overview-tab"

interface LoanCreditResourcesTabProps {
  loan: any
  relationship: any
  deal: any | null
  loanMilestones: Milestone[]
  loanProgressOpen: boolean
  setLoanProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneName: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
  loanTeam: any[]
  loanNotes: any[]
  creditResources: any[]
}

export function LoanCreditResourcesTab({
  loan,
  relationship,
  deal,
  loanMilestones,
  loanProgressOpen,
  setLoanProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
  loanTeam,
  loanNotes,
  creditResources,
}: LoanCreditResourcesTabProps) {
  const router = useRouter()

// Check if this is a new loan (created less than 24 hours ago)
  const isNewLoan = loan?.dateCreated ? new Date().getTime() - new Date(loan.dateCreated).getTime() < 86400000 : false

// Show empty state if no credit resources
  if (isNewLoan || !creditResources || creditResources.length === 0) {
    return <EmptyLoanCreditResources loanId={loan.id} />
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "Compliant":
        return <CheckCircle2 className="h-5 w-5 text-green-500" />
      case "Non-Compliant":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "Pending Review":
        return <Clock className="h-5 w-5 text-yellow-500" />
      case "Complete":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "In Progress":
        return <Clock className="h-5 w-5 text-blue-500" />
      case "To Do":
        return <Clock className="h-5 w-5 text-gray-500" />
      case "Exception":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "Waived":
        return <CheckCircle className="h-5 w-5 text-gray-400" />
      case "Active":
        return <CheckCircle2 className="h-5 w-5 text-green-500" />
      default:
        return <FileText className="h-5 w-5 text-gray-500" />
    }
  }

return (
    <div className="flex flex-col md:flex-row gap-6">
      {/* Left Column - 1/3 width - Same as Overview Tab */}
      <div className="md:w-1/3 space-y-6">
        {/* Loan Summary */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Loan Summary</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-700">
              This {loan.loanType?.toLowerCase()} for {loan.amount} is currently {loan.status?.toLowerCase()}. The loan
              has an interest rate of {loan.interestRate} with a term of {loan.term} and matures on {loan.maturityDate}.
              The monthly payment amount is {loan.paymentAmount} with the next payment due on {loan.nextPaymentDate}.
            </p>
            <div className="text-xs text-gray-500 mt-2">
              This content was generated using AI.{" "}
              <Link href="#" className="text-blue-600">
                Learn more
              </Link>
            </div>
          </CardContent>
        </Card>

{/* Loan Progress */}
        <Collapsible open={loanProgressOpen} onOpenChange={setLoanProgressOpen} className="space-y-2">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
              <div className="flex items-center space-x-2">
                <PieChart className="h-5 w-5 text-gray-500" />
                <CardTitle className="text-lg">Loan Progress</CardTitle>
              </div>
              <div className="flex items-center space-x-2">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={() => {
                    // Find the first incomplete milestone
                    const nextMilestone = loanMilestones.find((m) => m.status !== "Complete")
                    if (nextMilestone) {
                      onMilestoneStatusChange(nextMilestone.name, "Complete")
                      toast({
                        title: "Progress updated",
                        description: `${nextMilestone.name} marked as complete`,
                      })
                    } else {
                      toast({
                        title: "All milestones complete",
                        description: "The loan has reached the final stage",
                      })
                    }
                  }}
                >
                  Update Progress
                </Button>
                <CollapsibleTrigger asChild>
                  <Button variant="ghost" size="sm">
                    {loanProgressOpen ? (
                      <ChevronDown className="h-4 w-4 transition-transform" />
                    ) : (
                      <ChevronRight className="h-4 w-4 transition-transform" />
                    )}
                  </Button>
                </CollapsibleTrigger>
              </div>
            </CardHeader>
            <CollapsibleContent>
              <CardContent>
                <div className="space-y-2">
                  {/* Vertical Progress Stepper */}
                  <div className="relative">
                    {/* Continuous vertical line that runs through all steps */}
                    <div
                      className="absolute left-4 top-4 bottom-4 w-[2px] bg-gray-200"
                      style={{ transform: "translateX(-50%)" }}
                    />
                    {loanMilestones.map((milestone, index) => {
                      const isComplete = milestone.status === "Complete"
                      const isInProgress = milestone.status === "In Progress"
                      // If this milestone is complete, color the line up to the next milestone
                      const showColoredLine = isComplete || isInProgress

return (
                        <div key={milestone.name} className="flex items-start mb-6 last:mb-0 relative">
                          {/* Colored line segment for completed steps */}
                          {showColoredLine && index < loanMilestones.length - 1 && (
                            <div
                              className="absolute left-4 top-4 w-[2px] bg-blue-600 h-[calc(100%+1.5rem)]"
                              style={{ transform: "translateX(-50%)" }}
                            />
                          )}

{/* Circle indicator */}
                          <div
                            className={`relative z-10 flex items-center justify-center w-8 h-8 rounded-full border-2 cursor-pointer transition-colors ${
                              isComplete
                                ? "bg-blue-600 border-blue-600"
                                : isInProgress
                                  ? "bg-white border-blue-600"
                                  : "bg-white border-gray-300"
                            }`}
                            onClick={() => onOpenMilestoneDialog(milestone)}
                            role="button"
                            tabIndex={0}
                            aria-label={`Update ${milestone.name} status`}
                          >
                            {isComplete ? (
                              <CheckCircle className="h-4 w-4 text-white" />
                            ) : isInProgress ? (
                              <div className="h-2 w-2 rounded-full bg-blue-600" />
                            ) : (
                              <div className="h-2 w-2 rounded-full bg-gray-300" />
                            )}
                          </div>

{/* Content */}
                          <div
                            className="flex-1 ml-4 cursor-pointer group"
                            onClick={() => onOpenMilestoneDialog(milestone)}
                          >
                            <div className="flex justify-between items-start">
                              <div className="flex flex-col">
                                <span
                                  className={`text-sm font-medium group-hover:text-blue-600 transition-colors ${
                                    isComplete || isInProgress ? "text-gray-900" : "text-gray-500"
                                  }`}
                                >
                                  {milestone.name}
                                </span>
                                <div className="flex items-center mt-1">
                                  <Calendar className="h-3 w-3 text-gray-400 mr-1" />
                                  <span className="text-xs text-gray-400">{milestone.date}</span>
                                </div>
                              </div>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                                    <MoreHorizontal className="h-4 w-4" />
                                    <span className="sr-only">Open menu</span>
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.name, "Complete")
                                    }}
                                  >
                                    <CheckCircle className="mr-2 h-4 w-4" />
                                    <span>Mark as Complete</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.name, "In Progress")
                                    }}
                                  >
                                    <Clock className="mr-2 h-4 w-4" />
                                    <span>Mark as In Progress</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.name, "To Do")
                                    }}
                                  >
                                    <span className="mr-2 h-4 w-4 flex items-center justify-center">○</span>
                                    <span>Mark as To Do</span>
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </CardContent>
            </CollapsibleContent>
          </Card>
        </Collapsible>

{/* Loan Details */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <CreditCard className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Loan Details</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <div className="text-sm text-gray-500 mb-1">Loan Name</div>
                <div className="text-xl font-semibold">{loan.name}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Loan Type</div>
                <div className="text-xl font-semibold">{loan.loanType}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Amount</div>
                <div className="text-xl font-semibold">{loan.amount}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Interest Rate</div>
                <div className="text-xl font-semibold">{loan.interestRate}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Term</div>
                <div className="text-xl font-semibold">{loan.term}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Status</div>
                <div className="text-xl font-semibold">{loan.status}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Origination Date</div>
                <div className="text-xl font-semibold">{loan.originationDate}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Maturity Date</div>
                <div className="text-xl font-semibold">{loan.maturityDate}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Payment Amount</div>
                <div className="text-xl font-semibold">{loan.paymentAmount}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Next Payment Date</div>
                <div className="text-xl font-semibold">{loan.nextPaymentDate}</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Collateral</div>
                <div className="text-xl font-semibold">{loan.collateral}</div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Relationship Information */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Building className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Relationship</CardTitle>
            </div>
            <Button variant="ghost" size="sm" onClick={() => router.push(`/relationships/${loan.relationshipId}`)}>
              View
            </Button>
          </CardHeader>
          <CardContent>
            {relationship ? (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-gray-500 mb-1">Relationship Name</div>
                  <div
                    className="text-xl font-semibold text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/relationships/${loan.relationshipId}`)}
                  >
                    {relationship.name}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Type</div>
                  <div className="text-xl font-semibold">{relationship.type}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Status</div>
                  <div className="text-xl font-semibold">{relationship.status}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Risk Status</div>
                  <div className="text-xl font-semibold">{relationship.riskStatus}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Primary Contact</div>
                  <div className="text-xl font-semibold">{relationship.primaryContact}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Contact Email</div>
                  <div className="text-xl font-semibold">{relationship.primaryContactEmail}</div>
                </div>
              </div>
            ) : (
              <p className="text-sm text-gray-500">Relationship information not available.</p>
            )}
          </CardContent>
        </Card>

<CardContent>
            <div className="space-y-3">
              {loanTeam.map((member, index) => (
                <div key={index} className="flex items-center space-x-3">
                  <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                    <span className="font-medium text-blue-800">
                      {member.name
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </span>
                  </div>
                  <div>
                    <p className="font-medium text-gray-900">{member.name}</p>
                    <p className="text-xs text-gray-500">{member.role}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>

{/* Right Column - 2/3 width - Credit Resources Content */}
      <div className="md:w-2/3 space-y-6">
        {/* Credit Score Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-5 w-5 text-muted-foreground" />
              <CardTitle className="text-lg">Credit Score</CardTitle>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-lg font-medium">Current FICO Score:</span>
                  <span className="text-2xl font-bold">{relationship?.ficoScore || "780"}</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2.5">
                  <div
                    className={`h-2.5 rounded-full ${
                      Number(relationship?.ficoScore || 780) >= 740
                        ? "bg-green-500"
                        : Number(relationship?.ficoScore || 780) >= 670
                          ? "bg-yellow-500"
                          : "bg-red-500"
                    }`}
                    style={{ width: `${(Number(relationship?.ficoScore || 780) / 850) * 100}%` }}
                  ></div>
                </div>
                <div className="flex justify-between text-xs">
                  <span>Poor</span>
                  <span>Fair</span>
                  <span>Good</span>
                  <span>Very Good</span>
                  <span>Excellent</span>
                </div>
                <div className="space-y-2 mt-4">
                  <div className="flex justify-between items-center">
                    <span>Previous Score:</span>
                    <span className="font-medium">760 (6 months ago)</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Score Change:</span>
                    <span className="font-medium text-yellow-600">+20</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Last Updated:</span>
                    <span className="font-medium">05/01/2024</span>
                  </div>
                </div>
              </div>
              <div className="space-y-4">
                <div className="p-4 border rounded-lg">
                  <div className="field-label">Key Factors Affecting Score</div>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                      <span>Long credit history (18 years)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                      <span>No missed payments in last 24 months</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-yellow-500 mt-1.5 mr-2"></div>
                      <span>Credit utilization (42% of available credit)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-yellow-500 mt-1.5 mr-2"></div>
                      <span>Recent credit inquiries (2 in last 6 months)</span>
                    </li>
                  </ul>
                </div>
                <Button className="w-full">Run New Credit Check</Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Collateral Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Shield className="h-5 w-5 text-muted-foreground" />
                <CardTitle className="text-lg">Collateral</CardTitle>
              </div>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Collateral
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Value</TableHead>
                  <TableHead>LTV</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Office Building - 123 Main St</TableCell>
                  <TableCell>Commercial Real Estate</TableCell>
                  <TableCell>$3,500,000</TableCell>
                  <TableCell>65%</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Manufacturing Equipment</TableCell>
                  <TableCell>Equipment</TableCell>
                  <TableCell>$750,000</TableCell>
                  <TableCell>70%</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

{/* Covenants Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <FileText className="h-5 w-5 text-muted-foreground" />
                <CardTitle className="text-lg">Covenants</CardTitle>
              </div>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Covenant
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Requirement</TableHead>
                  <TableHead>Actual</TableHead>
                  <TableHead>Compliance</TableHead>
                  <TableHead>Next Review</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Debt Service Coverage Ratio</TableCell>
                  <TableCell>Min 1.25x</TableCell>
                  <TableCell>1.12x</TableCell>
                  <TableCell>
                    <StatusBadge status="Non-Compliant" />
                  </TableCell>
                  <TableCell>06/30/2024</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      Details
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Current Ratio</TableCell>
                  <TableCell>Min 1.2x</TableCell>
                  <TableCell>1.43x</TableCell>
                  <TableCell>
                    <StatusBadge status="Compliant" />
                  </TableCell>
                  <TableCell>06/30/2024</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      Details
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

{/* Policy Exceptions Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Briefcase className="h-5 w-5 text-muted-foreground" />
                <CardTitle className="text-lg">Policy Exceptions</CardTitle>
              </div>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Exception
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Exception Type</TableHead>
                  <TableHead>Description</TableHead>
                  <TableHead>Approval Level</TableHead>
                  <TableHead>Approved By</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>LTV Exception</TableCell>
                  <TableCell className="font-medium">
                    LTV exception of 80% vs policy of 75% for office building
                  </TableCell>
                  <TableCell>Credit Committee</TableCell>
                  <TableCell>John Smith</TableCell>
                  <TableCell>04/15/2024</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-loan-credit-resources.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { FileText, Plus, Shield, Briefcase } from "lucide-react"

interface EmptyLoanCreditResourcesProps {
  loanId: string
}

export function EmptyLoanCreditResources({ loanId }: EmptyLoanCreditResourcesProps) {
  return (
    <div className="space-y-6">
      {/* Credit Score Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
            Credit Score
          </CardTitle>
          <CardDescription>Track and monitor credit scores for this loan</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <FileText className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Credit Score Data Available</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Run a credit check to view the credit score and related information for this loan.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Run Credit Check
          </Button>
        </CardFooter>
      </Card>

{/* Collateral Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Shield className="h-5 w-5 mr-2 text-muted-foreground" />
            Collateral
          </CardTitle>
          <CardDescription>Track assets used as collateral for this loan</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <Shield className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Collateral Added</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Add collateral assets to track their values, loan-to-value ratios, and status.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Collateral
          </Button>
        </CardFooter>
      </Card>

{/* Covenants Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
            Covenants
          </CardTitle>
          <CardDescription>Track financial and reporting covenants</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <FileText className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Covenants Added</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Add covenants to track compliance with financial and reporting requirements.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Covenant
          </Button>
        </CardFooter>
      </Card>

{/* Policy Exceptions Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Briefcase className="h-5 w-5 mr-2 text-muted-foreground" />
            Policy Exceptions
          </CardTitle>
          <CardDescription>Track exceptions to standard lending policies</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <Briefcase className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Policy Exceptions</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Add policy exceptions to track approvals and expirations for non-standard terms.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Exception
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loans/new/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import { PageHeader } from "@/app/components/page-header"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import type { StepItem } from "@/app/components/stepper"
import { getRelationships } from "@/lib/relationship-store"
import { initialDeals } from "@/app/data/deals"
import { CreditCard, Check, Building, Home, Briefcase, DollarSign, Car, ShoppingBag } from "lucide-react"
import { cn } from "@/lib/utils"
import { requiredDocuments } from "@/app/data/required-documents"
import { TaskTable } from "@/app/components/task-table"
import { FileText, Upload, AlertCircle } from "lucide-react"
import { addLoan } from "@/lib/loan-store"
import { toast } from "@/components/ui/use-toast"

// Define loan categories and their associated loan types
const loanCategories = [
  {
    id: "business-card",
    name: "Business Card",
    types: ["business-card"],
  },
  {
    id: "cib",
    name: "CIB",
    types: ["subordinated-debt", "mezzanine-financing", "derivatives-hedging"],
  },
  {
    id: "commercial",
    name: "Commercial",
    types: [
      "term",
      "governmental",
      "securities-backed",
      "standby-loc",
      "unsecured-commercial",
      "ar-inventory",
      "trusts",
      "commercial-loc",
      "working-capital",
      "non-profit",
      "commercial-mortgage",
      "construction-bridge",
    ],
  },
  {
    id: "consumer",
    name: "Consumer",
    types: [
      "auto",
      "home-equity-loan",
      "home-equity-line",
      "life-insurance",
      "overdraft",
      "unsecured-personal",
      "cd-secured",
      "recreational",
      "residential-lot",
    ],
  },
  {
    id: "equipment-leasing",
    name: "Equipment Leasing - Direct",
    types: ["equipment-lease"],
  },
  {
    id: "leasing-finance",
    name: "Leasing and Finance",
    types: ["equipment", "factoring"],
  },
  {
    id: "mortgage",
    name: "Mortgage",
    types: [
      "residential",
      "primary-residence",
      "second-home",
      "private-banking",
      "wealth-banking",
      "investment-property",
      "commercial-real-estate",
      "construction-individual",
      "affordable-housing",
      "land-acquisition",
      "unimproved-land",
    ],
  },
  {
    id: "personal-card",
    name: "Personal Card",
    types: ["personal-card"],
  },
  {
    id: "sba",
    name: "SBA",
    types: ["sba-7a", "sba-504", "sba-express"],
  },
  {
    id: "small-business",
    name: "Small Business",
    types: [
      "small-business",
      "small-business-ar",
      "small-business-equipment",
      "small-business-loc",
      "small-business-working-capital",
    ],
  },
]

// Map of loan types with display names
const loanTypeNames: Record<string, string> = {
  // Business Card
  "business-card": "Business Credit Card",

// CIB
  "subordinated-debt": "Subordinated Debt",
  "mezzanine-financing": "Mezzanine Financing",
  "derivatives-hedging": "Customer Derivatives and Hedging",

// Commercial
  term: "Term Loan",
  governmental: "Governmental Lending",
  "securities-backed": "Securities Backed Loan",
  "standby-loc": "Standby Letter of Credit Backed",
  "unsecured-commercial": "Unsecured Commercial",
  "ar-inventory": "Accounts Receivable & Inventory Financing",
  trusts: "Loans to Trusts",
  "commercial-loc": "Commercial Letter of Credit",
  "working-capital": "Working Capital",
  "non-profit": "Not-for-Profit Organization",
  "commercial-mortgage": "Commercial Real Estate Mortgage",
  "construction-bridge": "Construction & Bridge Loan",

// Consumer
  auto: "Automobile Financing",
  "home-equity-loan": "Home Equity Loan",
  "home-equity-line": "Home Equity Line of Credit",
  "life-insurance": "Life Insurance Loan",
  overdraft: "Overdraft Line of Credit",
  "unsecured-personal": "Unsecured Personal Loan",
  "cd-secured": "CD-Secured Loan",
  recreational: "Recreational Secured Loan",
  "residential-lot": "Residential Lot Loan",

// Equipment Leasing - Direct
  "equipment-lease": "Direct Equipment Lease",

// Leasing and Finance
  equipment: "Equipment Term Loan",
  factoring: "Factoring/Invoice Finance",

// Mortgage
  residential: "Residential Real Estate",
  "primary-residence": "Primary Residence Mortgage",
  "second-home": "Second Home Mortgage",
  "private-banking": "Private Banking Client Mortgage",
  "wealth-banking": "Wealth Banking Client Mortgage",
  "investment-property": "Residential Investment Property",
  "commercial-real-estate": "Commercial Real Estate",
  "construction-individual": "Construction Loan to Individual",
  "affordable-housing": "Affordable Housing & Economic Development",
  "land-acquisition": "Land Acquisition & Development",
  "unimproved-land": "Unimproved Land Loan",

// Personal Card
  "personal-card": "Personal Credit Card",

// SBA
  "sba-7a": "SBA 7(a) Loan",
  "sba-504": "SBA 504 Loan",
  "sba-express": "SBA Express Loan",

// Small Business
  "small-business": "Small Business Loan",
  "small-business-ar": "Small Business A/R Financing",
  "small-business-equipment": "Small Business Equipment Loan",
  "small-business-loc": "Small Business Line of Credit",
  "small-business-working-capital": "Small Business Working Capital",
}

// Loan recommendation questions
const loanQuestions = [
  {
    id: "borrower-type",
    question: "Who is the borrower?",
    options: [
      { value: "individual", label: "Individual", icon: <Home className="h-5 w-5 mr-2" /> },
      { value: "business", label: "Business", icon: <Building className="h-5 w-5 mr-2" /> },
    ],
  },
  {
    id: "loan-purpose",
    question: "What is the primary purpose of this loan?",
    options: [
      { value: "real-estate", label: "Real Estate Purchase or Refinance", icon: <Home className="h-5 w-5 mr-2" /> },
      { value: "equipment", label: "Equipment Purchase or Lease", icon: <Briefcase className="h-5 w-5 mr-2" /> },
      { value: "working-capital", label: "Working Capital", icon: <DollarSign className="h-5 w-5 mr-2" /> },
      { value: "vehicle", label: "Vehicle Purchase", icon: <Car className="h-5 w-5 mr-2" /> },
      { value: "debt-consolidation", label: "Debt Consolidation", icon: <CreditCard className="h-5 w-5 mr-2" /> },
      { value: "inventory", label: "Inventory Financing", icon: <ShoppingBag className="h-5 w-5 mr-2" /> },
    ],
  },
  {
    id: "business-size",
    question: "What is the size of your business?",
    options: [
      { value: "small", label: `Small Business (< $5M annual revenue)` },
      { value: "medium", label: "Medium Business ($5M - $50M annual revenue)" },
      { value: "large", label: "Large Business (> $50M annual revenue)" },
    ],
    showIf: (answers: Record<string, string>) => answers["borrower-type"] === "business",
  },
  {
    id: "real-estate-type",
    question: "What type of real estate?",
    options: [
      { value: "primary-residence", label: "Primary Residence" },
      { value: "second-home", label: "Second Home" },
      { value: "investment-property", label: "Investment Property" },
      { value: "commercial", label: "Commercial Property" },
      { value: "land", label: "Land" },
    ],
    showIf: (answers: Record<string, string>) => answers["loan-purpose"] === "real-estate",
  },
  {
    id: "loan-amount",
    question: "What is the approximate loan amount?",
    options: [
      { value: "small", label: "Less than $50,000" },
      { value: "medium", label: "$50,000 - $250,000" },
      { value: "large", label: "$250,000 - $1,000,000" },
      { value: "very-large", label: "More than $1,000,000" },
    ],
  },
  {
    id: "loan-term",
    question: "What is your preferred loan term?",
    options: [
      { value: "short", label: "Short term (< 1 year)" },
      { value: "medium", label: "Medium term (1-5 years)" },
      { value: "long", label: "Long term (> 5 years)" },
    ],
  },
]

// Map loan amount ranges to approximate values for auto-filling
const loanAmountValues: Record<string, string> = {
  small: "25000", // $25,000
  medium: "150000", // $150,000
  large: "500000", // $500,000
  "very-large": "2000000", // $2,000,000
}

// Logic to recommend loan types based on answers
const recommendLoanTypes = (answers: Record<string, string>): { categoryId: string; typeId: string }[] => {
  let recommendations: { categoryId: string; typeId: string }[] = []

// Individual borrower
  if (answers["borrower-type"] === "individual") {
    // Real estate loans for individuals
    if (answers["loan-purpose"] === "real-estate") {
      if (answers["real-estate-type"] === "primary-residence") {
        recommendations.push({ categoryId: "mortgage", typeId: "primary-residence" })
      } else if (answers["real-estate-type"] === "second-home") {
        recommendations.push({ categoryId: "mortgage", typeId: "second-home" })
      } else if (answers["real-estate-type"] === "investment-property") {
        recommendations.push({ categoryId: "mortgage", typeId: "investment-property" })
      } else if (answers["real-estate-type"] === "land") {
        recommendations.push({ categoryId: "mortgage", typeId: "unimproved-land" })
      }
    }
    // Vehicle loans for individuals
    else if (answers["loan-purpose"] === "vehicle") {
      recommendations.push({ categoryId: "consumer", typeId: "auto" })
    }
    // Debt consolidation for individuals
    else if (answers["loan-purpose"] === "debt-consolidation") {
      recommendations.push({ categoryId: "consumer", typeId: "unsecured-personal" })
      recommendations.push({ categoryId: "consumer", typeId: "home-equity-loan" })
    }
    // Credit needs
    if (answers["loan-amount"] === "small") {
      recommendations.push({ categoryId: "personal-card", typeId: "personal-card" })
    }

// Consider bankruptcy history
    if (answers["previous-bankruptcy"] === "yes") {
      // Filter out certain loan types that require good credit
      const filteredRecommendations = recommendations.filter(
        (loan) => !["primary-residence", "second-home", "investment-property"].includes(loan.typeId),
      )
      recommendations = filteredRecommendations
      // Add secured loan options for those with bankruptcy history
      if (answers["has-collateral"] === "yes") {
        recommendations.push({ categoryId: "consumer", typeId: "cd-secured" })
      }
    }
  }
  // Business borrower
  else if (answers["borrower-type"] === "business") {
    // Small business
    if (answers["business-size"] === "small") {
      // Equipment for small business
      if (answers["loan-purpose"] === "equipment") {
        recommendations.push({ categoryId: "small-business", typeId: "small-business-equipment" })
        recommendations.push({ categoryId: "equipment-leasing", typeId: "equipment-lease" })
        recommendations.push({ categoryId: "sba", typeId: "sba-express" })
      }
      // Working capital for small business
      else if (answers["loan-purpose"] === "working-capital") {
        recommendations.push({ categoryId: "small-business", typeId: "small-business-working-capital" })
        recommendations.push({ categoryId: "small-business", typeId: "small-business-loc" })
        recommendations.push({ categoryId: "sba", typeId: "sba-7a" })
      }
      // Real estate for small business
      else if (answers["loan-purpose"] === "real-estate" && answers["real-estate-type"] === "commercial") {
        recommendations.push({ categoryId: "sba", typeId: "sba-504" })
        recommendations.push({ categoryId: "commercial", typeId: "commercial-mortgage" })
      }
      // Inventory financing for small business
      else if (answers["loan-purpose"] === "inventory") {
        recommendations.push({ categoryId: "small-business", typeId: "small-business-ar" })
        recommendations.push({ categoryId: "commercial", typeId: "ar-inventory" })
      }
      // Credit needs for small business
      if (answers["loan-amount"] === "small" || answers["loan-amount"] === "medium") {
        recommendations.push({ categoryId: "business-card", typeId: "business-card" })
      }

// Consider bankruptcy history for business
      if (answers["previous-bankruptcy"] === "yes") {
        // Remove SBA loans which are harder to get with bankruptcy history
        const filteredRecommendations = recommendations.filter((loan) => !loan.categoryId.includes("sba"))
        recommendations = filteredRecommendations
        // Add more secured options
        if (answers["has-collateral"] === "yes") {
          recommendations.push({ categoryId: "commercial", typeId: "securities-backed" })
        }
      }
    }
    // Medium to large business
    else {
      // Equipment for medium/large business
      if (answers["loan-purpose"] === "equipment") {
        recommendations.push({ categoryId: "leasing-finance", typeId: "equipment" })
        recommendations.push({ categoryId: "commercial", typeId: "term" })
      }
      // Working capital for medium/large business
      else if (answers["loan-purpose"] === "working-capital") {
        recommendations.push({ categoryId: "commercial", typeId: "working-capital" })
        recommendations.push({ categoryId: "commercial", typeId: "commercial-loc" })
      }
      // Real estate for medium/large business
      else if (answers["loan-purpose"] === "real-estate" && answers["real-estate-type"] === "commercial") {
        recommendations.push({ categoryId: "commercial", typeId: "commercial-mortgage" })
        if (answers["loan-term"] === "short") {
          recommendations.push({ categoryId: "commercial", typeId: "construction-bridge" })
        }
      }
      // Inventory financing for medium/large business
      else if (answers["loan-purpose"] === "inventory") {
        recommendations.push({ categoryId: "commercial", typeId: "ar-inventory" })
        recommendations.push({ categoryId: "leasing-finance", typeId: "factoring" })
      }
    }
  }

// Consider preferred payment frequency
  if (answers["preferred-payment-frequency"]) {
    // Prioritize loans that typically offer the preferred payment frequency
    if (answers["preferred-payment-frequency"] === "Monthly") {
      // Most loans are monthly, no change needed
    } else if (answers["preferred-payment-frequency"] === "Quarterly") {
      // Move commercial loans to the top as they're more likely to offer quarterly payments
      const filteredRecommendations = [
        ...recommendations.filter((loan) => loan.categoryId === "commercial"),
        ...recommendations.filter((loan) => loan.categoryId !== "commercial"),
      ]
      recommendations = filteredRecommendations
    } else if (answers["preferred-payment-frequency"] === "Annual") {
      // Certain commercial loans might offer annual payments
      const filteredRecommendations = [
        ...recommendations.filter((loan) => loan.typeId === "commercial-mortgage" || loan.typeId === "term"),
        ...recommendations.filter((loan) => loan.typeId !== "commercial-mortgage" && loan.typeId !== "term"),
      ]
      recommendations = filteredRecommendations
    }
  }

// Consider preferred loan structure
  if (answers["preferred-loan-structure"]) {
    if (answers["preferred-loan-structure"] === "Interest-Only") {
      // Prioritize loans that commonly offer interest-only options
      const filteredRecommendations = [
        ...recommendations.filter((loan) =>
          ["commercial-mortgage", "home-equity-line", "investment-property"].includes(loan.typeId),
        ),
        ...recommendations.filter(
          (loan) => !["commercial-mortgage", "home-equity-line", "investment-property"].includes(loan.typeId),
        ),
      ]
      recommendations = filteredRecommendations
    } else if (answers["preferred-loan-structure"] === "Balloon") {
      // Prioritize loans that commonly offer balloon payment structures
      const filteredRecommendations = [
        ...recommendations.filter((loan) => ["commercial-mortgage", "construction-bridge"].includes(loan.typeId)),
        ...recommendations.filter((loan) => !["commercial-mortgage", "construction-bridge"].includes(loan.typeId)),
      ]
      recommendations = filteredRecommendations
    }
  }

// Consider collateral availability
  if (answers["has-collateral"] === "no") {
    // Filter out loans that typically require collateral
    const filteredRecommendations = recommendations.filter(
      (loan) =>
        ![
          "securities-backed",
          "ar-inventory",
          "equipment",
          "commercial-mortgage",
          "primary-residence",
          "second-home",
          "investment-property",
          "auto",
          "cd-secured",
        ].includes(loan.typeId),
    )
    recommendations = filteredRecommendations

// Add more unsecured options
    if (answers["borrower-type"] === "individual") {
      recommendations.push({ categoryId: "consumer", typeId: "unsecured-personal" })
    } else {
      recommendations.push({ categoryId: "commercial", typeId: "unsecured-commercial" })
    }
  }

// Filter out loans to borrowers with a prior bankruptcy filing or whose previous performance has resulted in actual loss
  if (answers["previous-bankruptcy"] === "yes") {
    recommendations = recommendations.filter(
      (loan) =>
        ![
          "term",
          "governmental",
          "securities-backed",
          "standby-loc",
          "unsecured-commercial",
          "ar-inventory",
          "trusts",
          "commercial-loc",
          "working-capital",
          "non-profit",
          "commercial-mortgage",
          "construction-bridge",
          "auto",
          "home-equity-loan",
          "home-equity-line",
          "life-insurance",
          "overdraft",
          "unsecured-personal",
          "cd-secured",
          "recreational",
          "residential-lot",
          "equipment-lease",
          "equipment",
          "factoring",
          "residential",
          "primary-residence",
          "second-home",
          "private-banking",
          "wealth-banking",
          "investment-property",
          "commercial-real-estate",
          "construction-individual",
          "affordable-housing",
          "land-acquisition",
          "unimproved-land",
          "personal-card",
          "sba-7a",
          "sba-504",
          "sba-express",
          "small-business",
          "small-business-ar",
          "small-business-equipment",
          "small-business-loc",
          "small-business-working-capital",
        ].includes(loan.typeId),
    )
  }

return recommendations
}

const formatCurrency = (value: string) => {
  if (!value) return ""

// Remove all non-numeric characters
  const numericValue = value.replace(/[^0-9]/g, "")

// Convert to number and format
  const number = Number.parseInt(numericValue, 10)
  if (isNaN(number)) return ""

return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 0,
    maximumFractionDigits: 0,
  }).format(number)
}

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault()

// Validate that a relationship is selected
  if (!formData.relationshipId) {
    toast({
      title: "Error",
      description: "A loan must be associated with a relationship",
      variant: "destructive",
    })
    return
  }

// Generate a next payment date (30 days from now)
  const nextPaymentDate = new Date()
  nextPaymentDate.setDate(nextPaymentDate.getDate() + 30)
  const formattedNextPaymentDate = nextPaymentDate.toISOString().split("T")[0]

// Get the relationship name
  const selectedRelationship = relationships.find((r) => r.id === formData.relationshipId)

// Add the loan with the form data
  const newLoan = addLoan({
    name: formData.name,
    amount: formatCurrency(formData.amount),
    interestRate: formData.interestRate ? `${formData.interestRate}%` : "",
    relationshipId: formData.relationshipId,
    relationship: selectedRelationship?.name || "",
    status: "Pending Closing",
    loanType: loanTypeNames[formData.loanType] || formData.loanType,
    maturityDate: formData.maturityDate || "",
    nextPaymentDate: formattedNextPaymentDate,
    collateralType: formData.collateralType,
    collateralValue: formatCurrency(formData.collateralValue),
    term: formData.term,
    paymentFrequency: formData.paymentFrequency,
    amortization: formData.amortization,
    purpose: formData.purpose,
    prepaymentPenalty: formData.prepaymentPenalty,
    dealId: formData.dealId,
    loanCategory: formData.loanCategory,
    selectedDocuments: formData.selectedDocuments,
  })

// Navigate to the newly created loan detail page
  router.push(`/loans/${newLoan.id}`)
}

export default function NewLoanPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const relationshipId = searchParams.get("relationshipId")

const [currentStep, setCurrentStep] = useState(0)
  const [showRecommendations, setShowRecommendations] = useState(false)
  const [recommendedLoans, setRecommendedLoans] = useState<{ categoryId: string; typeId: string }[]>([])
  const [selectedLoan, setSelectedLoan] = useState<{ categoryId: string; typeId: string; name: string } | null>(null)

const [formData, setFormData] = useState({
    name: "",
    amount: "",
    interestRate: "",
    term: "",
    loanCategory: "",
    loanType: "",
    purpose: "",
    collateralType: "",
    collateralValue: "",
    relationshipId: relationshipId || "",
    dealId: "",
    maturityDate: "",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    prepaymentPenalty: false,
    covenants: [],
    guarantors: [],
    selectedDocuments: [] as string[],
    // Loan finder fields
    borrowerType: "",
    loanPurpose: "",
    businessSize: "",
    realEstateType: "",
    loanAmount: "",
    loanTerm: "",
    // New fields
    preferredPaymentFrequency: "",
    preferredLoanStructure: "",
    hasCollateral: "",
    previousBankruptcy: "",
  })

// Get all relationships for the dropdown
  const relationships = getRelationships()

// Get all deals for the selected relationship
  const relationshipDeals = initialDeals.filter((deal) => deal.relationshipId === formData.relationshipId)

// Group documents by type
  const documentsByType = requiredDocuments.reduce(
    (acc, doc) => {
      if (!acc[doc.type]) {
        acc[doc.type] = []
      }
      acc[doc.type].push(doc)
      return acc
    },
    {} as Record<string, typeof requiredDocuments>,
  )

// Filter for loan-specific documents
  const isLoanDocument = (doc: (typeof requiredDocuments)[0]) =>
    doc.type === "Financial" ||
    doc.type === "Collateral" ||
    doc.type === "Legal" ||
    doc.type === "Business Verification" ||
    doc.type === "Credit Verification"

// Get only loan-related documents
  const loanDocuments = requiredDocuments.filter(isLoanDocument)

// Get document types for grouping
  const documentTypes = Object.keys(documentsByType)

const steps: StepItem[] = [
    {
      id: "loan-details",
      title: "Loan Details",
      description: "Provide basic information about the loan including name, type, amount, and purpose.",
    },
    {
      id: "structure",
      title: "Loan Structure",
      description:
        "Define the structure and terms of the loan including term length, interest rate, and payment details.",
    },
    {
      id: "collateral",
      title: "Collateral Information",
      description: "Provide details about the collateral securing this loan, including type and value.",
    },
    {
      id: "required-documents",
      title: "Required Documents",
      description: "Select the documents required for this loan application based on credit policy.",
    },
    {
      id: "terms",
      title: "Additional Terms",
      description: "Specify any additional terms or covenants for this loan, including financial covenants.",
    },
    {
      id: "review",
      title: "Review Application",
      description: "Review the loan details before submitting",
    },
  ]

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string, value: string) => {
    if (name === "loanPurpose") {
      // When loan purpose changes, update both loanPurpose and purpose fields
      setFormData((prev) => ({
        ...prev,
        [name]: value,
        purpose: loanQuestions[1].options.find((opt) => opt.value === value)?.label || "",
      }))
    } else if (name === "loanAmount") {
      // When loan amount range changes, update both loanAmount and amount fields
      setFormData((prev) => ({
        ...prev,
        [name]: value,
        amount: loanAmountValues[value] || prev.amount,
      }))
    } else {
      setFormData((prev) => ({ ...prev, [name]: value }))
    }

// If changing one of the loan finder fields, update recommendations
    if (
      [
        "borrowerType",
        "loanPurpose",
        "businessSize",
        "realEstateType",
        "loanAmount",
        "loanTerm",
        "preferredPaymentFrequency",
        "preferredLoanStructure",
        "hasCollateral",
        "previousBankruptcy",
      ].includes(name)
    ) {
      const updatedData = {
        ...formData,
        [name]: value,
        // If updating loanPurpose, also update purpose
        ...(name === "loanPurpose"
          ? {
              purpose: loanQuestions[1].options.find((opt) => opt.value === value)?.label || "",
            }
          : {}),
        // If updating loanAmount, also update amount
        ...(name === "loanAmount"
          ? {
              amount: loanAmountValues[value] || formData.amount,
            }
          : {}),
        // If updating preferredPaymentFrequency, also update paymentFrequency
        ...(name === "preferredPaymentFrequency"
          ? {
              paymentFrequency: value,
            }
          : {}),
        // If updating preferredLoanStructure, also update amortization
        ...(name === "preferredLoanStructure"
          ? {
              amortization: value,
            }
          : {}),
      }

updateRecommendations(updatedData)
    }
  }

const updateRecommendations = (data: typeof formData) => {
    // Only show recommendations if we have enough data
    if (data.borrowerType && data.loanPurpose) {
      const answers: Record<string, string> = {
        "borrower-type": data.borrowerType,
        "loan-purpose": data.loanPurpose,
        "business-size": data.businessSize,
        "real-estate-type": data.realEstateType,
        "loan-amount": data.loanAmount,
        "loan-term": data.loanTerm,
        "preferred-payment-frequency": data.preferredPaymentFrequency,
        "preferred-loan-structure": data.preferredLoanStructure,
        "has-collateral": data.hasCollateral,
        "previous-bankruptcy": data.previousBankruptcy,
      }

const recommendations = recommendLoanTypes(answers)
      setRecommendedLoans(recommendations)
      setShowRecommendations(recommendations.length > 0)
    } else {
      setShowRecommendations(false)
    }
  }

const handleCheckboxChange = (name: string, checked: boolean) => {
    setFormData((prev) => ({ ...prev, [name]: checked }))
  }

const handleDocumentSelection = (docId: string, checked: boolean) => {
    setFormData((prev) => {
      if (checked) {
        return { ...prev, selectedDocuments: [...prev.selectedDocuments, docId] }
      } else {
        return { ...prev, selectedDocuments: prev.selectedDocuments.filter((id) => id !== docId) }
      }
    })
  }

const handleNext = () => {
    if (currentStep < steps.length - 1) {
      setCurrentStep(currentStep + 1)
    }
  }

const handlePrevious = () => {
    if (currentStep > 0) {
      setCurrentStep(currentStep - 1)
    }
  }

const handleStepClick = (stepIndex: number) => {
    setCurrentStep(stepIndex)
  }

const handleCurrencyInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target

// Store the raw numeric value but display the formatted value
    const numericValue = value.replace(/[^0-9]/g, "")
    e.target.value = formatCurrency(numericValue)

setFormData((prev) => ({ ...prev, [name]: numericValue }))

// If updating the amount field, also update the loanAmount field if possible
    if (name === "amount") {
      const amount = Number.parseInt(numericValue)
      let loanAmountCategory = ""

if (amount < 50000) loanAmountCategory = "small"
      else if (amount < 250000) loanAmountCategory = "medium"
      else if (amount < 1000000) loanAmountCategory = "large"
      else loanAmountCategory = "very-large"

if (loanAmountCategory) {
        setFormData((prev) => ({
          ...prev,
          loanAmount: loanAmountCategory,
          amount: numericValue,
        }))

// Update recommendations with the new amount
        updateRecommendations({
          ...formData,
          loanAmount: loanAmountCategory,
          amount: numericValue,
        })
      }
    }
  }

// Select a recommended loan
  const selectRecommendedLoan = (categoryId: string, typeId: string) => {
    const category = loanCategories.find((cat) => cat.id === categoryId)
    const typeName = loanTypeNames[typeId] || typeId

setSelectedLoan({
      categoryId,
      typeId,
      name: typeName,
    })

// Auto-generate a loan name if none exists
    const loanName = formData.name || `${typeName} - ${formData.purpose || "New Loan"}`

setFormData((prev) => ({
      ...prev,
      loanCategory: categoryId,
      loanType: typeId,
      name: loanName,
    }))

setShowRecommendations(false)
  }

// Show business size field only if borrower type is business
  const showBusinessSizeField = formData.borrowerType === "business"

// Show real estate type field only if loan purpose is real-estate
  const showRealEstateTypeField = formData.loanPurpose === "real-estate"

const handleRadioChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))

// Update recommendations when radio buttons change
    updateRecommendations({
      ...formData,
      [name]: value,
    })
  }

return (
    <div className="py-6 px-6 space-y-6">
      <PageHeader
        title="New Loan Application"
        subtitle="Create a new loan for your client"
        icon={CreditCard}
        breadcrumbs={[
          { label: "Loans", href: "/loans" },
          { label: "New Loan Application", href: "/loans/new" },
        ]}
        actions={
          <Button variant="outline" onClick={() => router.back()}>
            Cancel
          </Button>
        }
      />

{/* Right Column - Form */}
        <div className="lg:col-span-2">
          <form onSubmit={handleSubmit}>
            <div className="space-y-6">
              {/* Step 1: Loan Details */}
              {currentStep === 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Loan Details</CardTitle>
                    <CardDescription>Enter the basic information about this loan</CardDescription>
                  </CardHeader>
                  <div className="px-6 pb-2">
                    <div className="bg-blue-50 p-3 rounded-md border border-blue-100">
                      <h4 className="text-sm font-medium text-blue-800">Tip</h4>
                      <p className="text-xs text-blue-700">
                        Answer a few questions about your loan needs to get personalized recommendations.
                      </p>
                    </div>
                  </div>
                  <CardContent className="space-y-6">
                    {/* Loan Finder Section */}
                    <div>
                      <h3 className="text-lg font-medium mb-4">Find the Right Loan</h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div className="space-y-2">
                          <Label htmlFor="name">Loan Name</Label>
                          <Input
                            id="name"
                            name="name"
                            value={formData.name}
                            onChange={handleInputChange}
                            placeholder="Equipment Financing Loan"
                            required
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor="relationshipId">Select Relationship*</Label>
                          <select
                            id="relationshipId"
                            name="relationshipId"
                            value={formData.relationshipId}
                            onChange={(e) => handleSelectChange("relationshipId", e.target.value)}
                            className="w-full p-2 border border-gray-300 rounded-md"
                            required
                          >
                            <option value="">Select a relationship</option>
                            {relationships.map((relationship) => (
                              <option key={relationship.id} value={relationship.id}>
                                {relationship.name} - {relationship.type}
                              </option>
                            ))}
                          </select>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="borrowerType">Who is the borrower?</Label>
                          <Select
                            value={formData.borrowerType}
                            onValueChange={(value) => handleSelectChange("borrowerType", value)}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select borrower type" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="individual">Individual</SelectItem>
                              <SelectItem value="business">Business</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="loanPurpose">Loan Purpose</Label>
                          <Select
                            value={formData.loanPurpose}
                            onValueChange={(value) => handleSelectChange("loanPurpose", value)}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select loan purpose" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="real-estate">Real Estate Purchase or Refinance</SelectItem>
                              <SelectItem value="equipment">Equipment Purchase or Lease</SelectItem>
                              <SelectItem value="working-capital">Working Capital</SelectItem>
                              <SelectItem value="vehicle">Vehicle Purchase</SelectItem>
                              <SelectItem value="debt-consolidation">Debt Consolidation</SelectItem>
                              <SelectItem value="inventory">Inventory Financing</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

{showBusinessSizeField && (
                          <div className="space-y-2">
                            <Label htmlFor="businessSize">Business Size</Label>
                            <Select
                              value={formData.businessSize}
                              onValueChange={(value) => handleSelectChange("businessSize", value)}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select business size" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="small">Small Business ({`<`} $5M annual revenue)</SelectItem>
                                <SelectItem value="medium">Medium Business ($5M - $50M annual revenue)</SelectItem>
                                <SelectItem value="large">Large Business ({`>`} $5M annual revenue)</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        )}

{showRealEstateTypeField && (
                          <div className="space-y-2">
                            <Label htmlFor="realEstateType">Real Estate Type</Label>
                            <Select
                              value={formData.realEstateType}
                              onValueChange={(value) => handleSelectChange("realEstateType", value)}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select real estate type" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="primary-residence">Primary Residence</SelectItem>
                                <SelectItem value="second-home">Second Home</SelectItem>
                                <SelectItem value="investment-property">Investment Property</SelectItem>
                                <SelectItem value="commercial">Commercial Property</SelectItem>
                                <SelectItem value="land">Land</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        )}

<div className="space-y-2">
                          <Label htmlFor="amount">Loan Amount</Label>
                          <Input
                            id="amount"
                            name="amount"
                            value={formatCurrency(formData.amount)}
                            onChange={handleCurrencyInput}
                            placeholder="$250,000"
                            required
                          />
                        </div>

<div className="space-y-2">
                          <Label htmlFor="loanTerm">Preferred Loan Term</Label>
                          <Select
                            value={formData.loanTerm}
                            onValueChange={(value) => handleSelectChange("loanTerm", value)}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select loan term" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="short">Short term ({`<`} 1 year)</SelectItem>
                              <SelectItem value="medium">Medium term (1-5 years)</SelectItem>
                              <SelectItem value="long">Long term ({`>`} 5 years)</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

{/* Find the Right Loan section - add the new fields after the existing ones */}
                        <div className="space-y-2">
                          <Label htmlFor="preferredPaymentFrequency">Preferred Payment Frequency</Label>
                          <Select
                            value={formData.preferredPaymentFrequency}
                            onValueChange={(value) => handleSelectChange("preferredPaymentFrequency", value)}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select frequency" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Monthly">Monthly</SelectItem>
                              <SelectItem value="Quarterly">Quarterly</SelectItem>
                              <SelectItem value="Semi-Annual">Semi-Annual</SelectItem>
                              <SelectItem value="Annual">Annual</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="space-y-2">
                          <Label htmlFor="preferredLoanStructure">Preferred Loan Structure</Label>
                          <Select
                            value={formData.preferredLoanStructure}
                            onValueChange={(value) => handleSelectChange("preferredLoanStructure", value)}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select structure" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Standard">Standard</SelectItem>
                              <SelectItem value="Interest-Only">Interest-Only</SelectItem>
                              <SelectItem value="Balloon">Balloon Payment</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

<div className="space-y-2">
                          <Label>Do you have collateral?</Label>
                          <div className="flex space-x-4 mt-1">
                            <div className="flex items-center space-x-2">
                              <div
                                className={`rounded-full p-2 cursor-pointer ${
                                  formData.hasCollateral === "yes" ? "bg-black text-white" : "bg-gray-200"
                                }`}
                                onClick={() => handleRadioChange("hasCollateral", "yes")}
                              >
                                <span className="px-2">Yes</span>
                              </div>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div
                                className={`rounded-full p-2 cursor-pointer ${
                                  formData.hasCollateral === "no" ? "bg-black text-white" : "bg-gray-200"
                                }`}
                                onClick={() => handleRadioChange("hasCollateral", "no")}
                              >
                                <span className="px-2">No</span>
                              </div>
                            </div>
                          </div>
                        </div>

<div className="space-y-2">
                          <Label>Previous Bankruptcy?</Label>
                          <div className="flex space-x-4 mt-1">
                            <div className="flex items-center space-x-2">
                              <div
                                className={`rounded-full p-2 cursor-pointer ${
                                  formData.previousBankruptcy === "yes" ? "bg-black text-white" : "bg-gray-200"
                                }`}
                                onClick={() => handleRadioChange("previousBankruptcy", "yes")}
                              >
                                <span className="px-2">Yes</span>
                              </div>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div
                                className={`rounded-full p-2 cursor-pointer ${
                                  formData.previousBankruptcy === "no" ? "bg-black text-white" : "bg-gray-200"
                                }`}
                                onClick={() => handleRadioChange("previousBankruptcy", "no")}
                              >
                                <span className="px-2">No</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

{/* Recommended Loans Section */}
                    {showRecommendations && (
                      <div className="mt-6">
                        <h3 className="text-lg font-medium mb-4">Recommended Loans</h3>
                        <div className="space-y-4">
                          {recommendedLoans.map((loan, index) => {
                            const category = loanCategories.find((cat) => cat.id === loan.categoryId)
                            const typeName = loanTypeNames[loan.typeId] || loan.typeId

return (
                              <div
                                key={index}
                                className="border rounded-lg p-4 hover:border-blue-500 transition-colors"
                              >
                                <div className="flex justify-between items-start">
                                  <div>
                                    <h3 className="font-medium text-lg">{typeName}</h3>
                                    <p className="text-sm text-gray-500">{category?.name}</p>

{/* Loan description based on type */}
                                    {loan.typeId === "working-capital" && (
                                      <p className="mt-2 text-sm">
                                        Ideal for businesses needing funds for day-to-day operations, inventory
                                        purchases, or managing cash flow gaps.
                                      </p>
                                    )}
                                    {loan.typeId === "equipment" && (
                                      <p className="mt-2 text-sm">
                                        Perfect for purchasing new equipment with competitive rates and flexible terms.
                                      </p>
                                    )}
                                    {loan.typeId === "commercial-mortgage" && (
                                      <p className="mt-2 text-sm">
                                        Designed for purchasing or refinancing commercial real estate with favorable
                                        long-term rates.
                                      </p>
                                    )}
                                    {loan.typeId === "primary-residence" && (
                                      <p className="mt-2 text-sm">
                                        Our best rates for financing your primary home with various term options.
                                      </p>
                                    )}
                                    {loan.typeId === "auto" && (
                                      <p className="mt-2 text-sm">
                                        Competitive rates for new or used vehicle purchases with flexible terms.
                                      </p>
                                    )}
                                    {loan.typeId.includes("sba") && (
                                      <p className="mt-2 text-sm">
                                        Government-backed loans with favorable terms for qualified small businesses.
                                      </p>
                                    )}
                                  </div>
                                  <Button onClick={() => selectRecommendedLoan(loan.categoryId, loan.typeId)}>
                                    Select
                                  </Button>
                                </div>

{/* Features list */}
                                <div className="mt-4 grid grid-cols-2 gap-2">
                                  <div className="flex items-center">
                                    <Check className="h-4 w-4 text-green-500 mr-2" />
                                    <span className="text-sm">Competitive rates</span>
                                  </div>
                                  <div className="flex items-center">
                                    <Check className="h-4 w-4 text-green-500 mr-2" />
                                    <span className="text-sm">Flexible terms</span>
                                  </div>
                                  {loan.typeId.includes("sba") && (
                                    <div className="flex items-center">
                                      <Check className="h-4 w-4 text-green-500 mr-2" />
                                      <span className="text-sm">Lower down payment</span>
                                    </div>
                                  )}
                                  {(loan.typeId === "equipment" || loan.typeId === "equipment-lease") && (
                                    <div className="flex items-center">
                                      <Check className="h-4 w-4 text-green-500 mr-2" />
                                      <span className="text-sm">Equipment as collateral</span>
                                    </div>
                                  )}
                                </div>
                              </div>
                            )
                          })}
                        </div>
                      </div>
                    )}

{/* Additional Loan Information */}
                    <div className={selectedLoan ? "border-t pt-6 mt-6" : ""}>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {selectedLoan ? (
                          <div className="space-y-2 md:col-span-2">
                            <Label>Selected Loan Type</Label>
                            <div className="flex items-center p-3 border rounded-md bg-blue-50">
                              <div className="mr-3">
                                <CreditCard className="h-5 w-5 text-blue-600" />
                              </div>
                              <div>
                                <div className="font-medium">{selectedLoan.name}</div>
                                <div className="text-sm text-gray-500">
                                  {loanCategories.find((cat) => cat.id === selectedLoan.categoryId)?.name}
                                </div>
                              </div>
                            </div>
                          </div>
                        ) : (
                          <>
                            <div className="space-y-2">
                              <Label htmlFor="loanCategory">Loan Category</Label>
                              <Select
                                value={formData.loanCategory}
                                onValueChange={(value) => handleSelectChange("loanCategory", value)}
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select loan category" />
                                </SelectTrigger>
                                <SelectContent>
                                  {loanCategories.map((category) => (
                                    <SelectItem key={category.id} value={category.id}>
                                      {category.name}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>
                            <div className="space-y-2">
                              <Label htmlFor="loanType">Loan Type</Label>
                              <Select
                                value={formData.loanType}
                                onValueChange={(value) => handleSelectChange("loanType", value)}
                                disabled={!formData.loanCategory}
                              >
                                <SelectTrigger>
                                  <SelectValue
                                    placeholder={formData.loanCategory ? "Select loan type" : "Select a category first"}
                                  />
                                </SelectTrigger>
                                <SelectContent>
                                  {formData.loanCategory &&
                                    loanCategories
                                      .find((cat) => cat.id === formData.loanCategory)
                                      ?.types.map((type) => (
                                        <SelectItem key={type} value={type}>
                                          {loanTypeNames[type] || type}
                                        </SelectItem>
                                      ))}
                                </SelectContent>
                              </Select>
                            </div>
                          </>
                        )}

<div className="space-y-2">
                          <Label htmlFor="dealId">Associated Deal (Optional)</Label>
                          <Select
                            value={formData.dealId}
                            onValueChange={(value) => handleSelectChange("dealId", value)}
                            disabled={!formData.relationshipId || relationshipDeals.length === 0}
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select deal" />
                            </SelectTrigger>
                            <SelectContent>
                              {relationshipDeals.map((deal) => (
                                <SelectItem key={deal.id} value={deal.id}>
                                  {deal.name}
                                </SelectItem>
                              ))}
                            </SelectContent>
                          </Select>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={() => router.back()}>
                      Cancel
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 2: Structure */}
              {currentStep === 1 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Loan Structure</CardTitle>
                    <CardDescription>Define the structure and terms of the loan</CardDescription>
                  </CardHeader>
                  <div className="px-6 pb-2">
                    <div className="bg-blue-50 p-3 rounded-md border border-blue-100">
                      <h4 className="text-sm font-medium text-blue-800">Tip</h4>
                      <p className="text-xs text-blue-700">
                        Consider the client's cash flow when selecting payment frequency and amortization type.
                      </p>
                    </div>
                  </div>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="term">Loan Term (months)</Label>
                        <Input
                          id="term"
                          name="term"
                          type="number"
                          value={formData.term}
                          onChange={handleInputChange}
                          placeholder="60"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="interestRate">Interest Rate (%)</Label>
                        <Input
                          id="interestRate"
                          name="interestRate"
                          value={formData.interestRate}
                          onChange={handleInputChange}
                          placeholder="5.25"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="maturityDate">Maturity Date</Label>
                        <Input
                          id="maturityDate"
                          name="maturityDate"
                          type="date"
                          value={formData.maturityDate}
                          onChange={handleInputChange}
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="paymentFrequency">Payment Frequency</Label>
                        <Select
                          value={formData.paymentFrequency}
                          onValueChange={(value) => handleSelectChange("paymentFrequency", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select frequency" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Monthly">Monthly</SelectItem>
                            <SelectItem value="Quarterly">Quarterly</SelectItem>
                            <SelectItem value="Semi-Annual">Semi-Annual</SelectItem>
                            <SelectItem value="Annual">Annual</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="amortization">Amortization Type</Label>
                        <Select
                          value={formData.amortization}
                          onValueChange={(value) => handleSelectChange("amortization", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select amortization type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="Standard">Standard</SelectItem>
                            <SelectItem value="Interest-Only">Interest-Only</SelectItem>
                            <SelectItem value="Balloon">Balloon Payment</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="flex items-center space-x-2 pt-4">
                        <Checkbox
                          id="prepaymentPenalty"
                          checked={formData.prepaymentPenalty}
                          onCheckedChange={(checked) => handleCheckboxChange("prepaymentPenalty", checked as boolean)}
                        />
                        <Label htmlFor="prepaymentPenalty">Prepayment Penalty</Label>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 3: Collateral */}
              {currentStep === 2 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Collateral Information</CardTitle>
                    <CardDescription>Provide details about the collateral securing this loan</CardDescription>
                  </CardHeader>
                  <div className="px-6 pb-2">
                    <div className="bg-blue-50 p-3 rounded-md border border-blue-100">
                      <h4 className="text-sm font-medium text-blue-800">Tip</h4>
                      <p className="text-xs text-blue-700">
                        A loan-to-value ratio below 80% is generally preferred for most secured loans.
                      </p>
                    </div>
                  </div>
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="collateralType">Collateral Type</Label>
                        <Select
                          value={formData.collateralType}
                          onValueChange={(value) => handleSelectChange("collateralType", value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select collateral type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="real-estate">Real Estate</SelectItem>
                            <SelectItem value="equipment">Equipment</SelectItem>
                            <SelectItem value="inventory">Inventory</SelectItem>
                            <SelectItem value="accounts-receivable">Accounts Receivable</SelectItem>
                            <SelectItem value="cash">Cash/Deposits</SelectItem>
                            <SelectItem value="securities">Securities</SelectItem>
                            <SelectItem value="unsecured">Unsecured</SelectItem>
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="collateralValue">Collateral Value</Label>
                        <Input
                          id="collateralValue"
                          name="collateralValue"
                          value={formatCurrency(formData.collateralValue)}
                          onChange={handleCurrencyInput}
                          placeholder="$300,000"
                        />
                      </div>
                    </div>

<div className="space-y-2 pt-4">
                      <Label>Loan-to-Value Ratio</Label>
                      <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
                        <div
                          className="h-full bg-green-500 rounded-full"
                          style={{
                            width: `${
                              formData.amount && formData.collateralValue
                                ? Math.min(
                                    (Number.parseInt(formData.amount) / Number.parseInt(formData.collateralValue)) *
                                      100,
                                    100,
                                  )
                                : 0
                            }%`,
                          }}
                        ></div>
                      </div>
                      <div className="text-sm text-gray-500">
                        {formData.amount && formData.collateralValue
                          ? `${Math.round((Number.parseInt(formData.amount) / Number.parseInt(formData.collateralValue)) * 100)}%`
                          : "0%"}
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 4: Required Documents */}
              {currentStep === 3 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Required Documents</CardTitle>
                    <CardDescription>
                      Select the documents required for this loan application based on credit policy
                    </CardDescription>
                  </CardHeader>
                  <div className="px-6 pb-2">
                    <div className="bg-blue-50 p-3 rounded-md border border-blue-100">
                      <h4 className="text-sm font-medium text-blue-800">Tip</h4>
                      <p className="text-xs text-blue-700">
                        Documents marked as "Required" are mandatory per credit policy. Documents marked as
                        "Conditional" may be required based on specific loan criteria.
                      </p>
                    </div>
                  </div>
                  <CardContent className="space-y-4">
                    <TaskTable
                      title="Required Documents Checklist"
                      tasks={loanDocuments}
                      showFilters={true}
                      showCheckboxes={true}
                      showTypeColumn={true}
                      emptyMessage="No required documents found."
                      renderActionMenu={(task) => [
                        {
                          label: "Request Document",
                          icon: <FileText className="h-4 w-4 mr-2" />,
                          onClick: () => {
                            // First select the document if not already selected
                            if (!formData.selectedDocuments.includes(task.id)) {
                              handleDocumentSelection(task.id, true)
                            }
                            // Additional request document logic would go here
                          },
                        },
                        {
                          label: "Upload Document",
                          icon: <Upload className="h-4 w-4 mr-2" />,
                          onClick: () => {
                            // First select the document if not already selected
                            if (!formData.selectedDocuments.includes(task.id)) {
                              handleDocumentSelection(task.id, true)
                            }
                            // Additional upload document logic would go here
                          },
                        },
                        {
                          label: "Mark Complete",
                          icon: <Check className="h-4 w-4 mr-2" />,
                          onClick: () => {
                            // First select the document if not already selected
                            if (!formData.selectedDocuments.includes(task.id)) {
                              handleDocumentSelection(task.id, true)
                            }
                            // Additional mark complete logic would go here
                          },
                        },
                        {
                          label: "Request Waiver",
                          icon: <AlertCircle className="h-4 w-4 mr-2" />,
                          onClick: () => {
                            // First select the document if not already selected
                            if (!formData.selectedDocuments.includes(task.id)) {
                              handleDocumentSelection(task.id, true)
                            }
                            // Additional request waiver logic would go here
                          },
                        },
                      ]}
                    />
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 5: Terms */}
              {currentStep === 4 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Additional Terms</CardTitle>
                    <CardDescription>Specify any additional terms or covenants for this loan</CardDescription>
                  </CardHeader>
                  <div className="px-6 pb-2">
                    <div className="bg-blue-50 p-3 rounded-md border border-blue-100">
                      <h4 className="text-sm font-medium text-blue-800">Tip</h4>
                      <p className="text-xs text-blue-700">
                        Select covenants that align with the client's business model and financial structure.
                      </p>
                    </div>
                  </div>
                  <CardContent className="space-y-4">
                    <div className="space-y-2">
                      <Label>Covenants</Label>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                        <div className="flex items-center space-x-2">
                          <Checkbox id="covenant-dscr" />
                          <Label htmlFor="covenant-dscr">Debt Service Coverage Ratio</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="covenant-leverage" />
                          <Label htmlFor="covenant-leverage">Leverage Ratio</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="covenant-liquidity" />
                          <Label htmlFor="covenant-liquidity">Liquidity Ratio</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Checkbox id="covenant-tangible" />
                          <Label htmlFor="covenant-tangible">Tangible Net Worth</Label>
                        </div>
                      </div>
                    </div>

<div className="space-y-2 pt-4">
                      <Label>Guarantors Required</Label>
                      <RadioGroup defaultValue="personal">
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="personal" id="personal" />
                          <Label htmlFor="personal">Personal Guarantee</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="corporate" id="corporate" />
                          <Label htmlFor="corporate">Corporate Guarantee</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="both" id="both" />
                          <Label htmlFor="both">Both Personal and Corporate</Label>
                        </div>
                        <div className="flex items-center space-x-2">
                          <RadioGroupItem value="none" id="none" />
                          <Label htmlFor="none">No Guarantee Required</Label>
                        </div>
                      </RadioGroup>
                    </div>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button onClick={handleNext}>Next</Button>
                  </CardFooter>
                </Card>
              )}

{/* Step 6: Review */}
              {currentStep === 5 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Review Loan Application</CardTitle>
                    <CardDescription>Review the loan details before submitting</CardDescription>
                  </CardHeader>
                  <div className="px-6 pb-2">
                    <div className="bg-blue-50 p-3 rounded-md border border-blue-100">
                      <h4 className="text-sm font-medium text-blue-800">Tip</h4>
                      <p className="text-xs text-blue-700">
                        Double-check all financial figures and dates to ensure accuracy before submission.
                      </p>
                    </div>
                  </div>
                  <CardContent>
                    <Tabs defaultValue="details" className="w-full">
                      <TabsList className="grid grid-cols-5 mb-4">
                        <TabsTrigger value="details">Details</TabsTrigger>
                        <TabsTrigger value="structure">Structure</TabsTrigger>
                        <TabsTrigger value="collateral">Collateral</TabsTrigger>
                        <TabsTrigger value="documents">Documents</TabsTrigger>
                        <TabsTrigger value="terms">Terms</TabsTrigger>
                      </TabsList>
                      <TabsContent value="details" className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan Name</h3>
                            <p>{formData.name || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan Category</h3>
                            <p>
                              {loanCategories.find((cat) => cat.id === formData.loanCategory)?.name || "Not specified"}
                            </p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan Type</h3>
                            <p>{loanTypeNames[formData.loanType] || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan Amount</h3>
                            <p>{formatCurrency(formData.amount) || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan Purpose</h3>
                            <p>{formData.purpose || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Relationship</h3>
                            <p>
                              {relationships.find((r) => r.id === formData.relationshipId)?.name || "Not specified"}
                            </p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Associated Deal</h3>
                            <p>{relationshipDeals.find((d) => d.id === formData.dealId)?.name || "None"}</p>
                          </div>
                        </div>
                      </TabsContent>
                      <TabsContent value="structure" className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan Term</h3>
                            <p>{formData.term ? `${formData.term} months` : "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Interest Rate</h3>
                            <p>{formData.interestRate ? `${formData.interestRate}%` : "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Maturity Date</h3>
                            <p>{formData.maturityDate || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Payment Frequency</h3>
                            <p>{formData.paymentFrequency}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Amortization Type</h3>
                            <p>{formData.amortization}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Prepayment Penalty</h3>
                            <p>{formData.prepaymentPenalty ? "Yes" : "No"}</p>
                          </div>
                        </div>
                      </TabsContent>
                      <TabsContent value="collateral" className="space-y-4">
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Collateral Type</h3>
                            <p>{formData.collateralType || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Collateral Value</h3>
                            <p>{formatCurrency(formData.collateralValue) || "Not specified"}</p>
                          </div>
                          <div>
                            <h3 className="text-sm font-medium text-gray-500">Loan-to-Value Ratio</h3>
                            <p>
                              {formData.amount && formData.collateralValue
                                ? `${Math.round((Number.parseInt(formData.amount) / Number.parseInt(formData.collateralValue)) * 100)}%`
                                : "Not applicable"}
                            </p>
                          </div>
                        </div>
                      </TabsContent>
                      <TabsContent value="documents" className="space-y-4">
                        <div>
                          <h3 className="text-sm font-medium text-gray-500">Selected Documents</h3>
                          {formData.selectedDocuments.length > 0 ? (
                            <ul className="mt-2 space-y-1">
                              {formData.selectedDocuments.map((docId) => {
                                const doc = requiredDocuments.find((d) => d.id === docId)
                                return (
                                  <li key={docId} className="flex items-center space-x-2">
                                    <Check className="h-4 w-4 text-green-500" />
                                    <span>{doc?.name}</span>
                                  </li>
                                )
                              })}
                            </ul>
                          ) : (
                            <p className="text-gray-500 italic">No documents selected</p>
                          )}
                        </div>
                      </TabsContent>
                      <TabsContent value="terms" className="space-y-4">
                        <div>
                          <h3 className="text-sm font-medium text-gray-500">Covenants</h3>
                          <p>Selected covenants will be displayed here</p>
                        </div>
                        <div>
                          <h3 className="text-sm font-medium text-gray-500">Guarantors</h3>
                          <p>Selected guarantor requirements will be displayed here</p>
                        </div>
                      </TabsContent>
                    </Tabs>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button variant="outline" onClick={handlePrevious}>
                      Previous
                    </Button>
                    <Button type="submit">Submit Loan Application</Button>
                  </CardFooter>
                </Card>
              )}
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-overview-tab.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import Link from "next/link"
import {
  Building,
  FileText,
  CreditCard,
  PieChart,
  Edit,
  ChevronDown,
  ChevronRight,
  MoreHorizontal,
  Check,
  Clock,
  Calendar,
  MessageSquare,
  BarChart4,
  Download,
  Briefcase,
  DollarSign,
  Users,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { toast } from "@/hooks/use-toast"
import { StatusBadge } from "@/app/components/status-badge"
import { TaskTable } from "@/app/components/task-table"
import {
  Line,
  LineChart,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip as RechartsTooltip,
  Legend,
  ResponsiveContainer,
} from "recharts"
import type { JSX } from "react"
import { getTasksForLoan } from "@/app/data/tasks"

// Define milestone status type
export type MilestoneStatus = "Complete" | "In Progress" | "To Do"

// Define milestone type
export interface Milestone {
  name: string
  status: MilestoneStatus
  date: string
}

export interface LoanOverviewTabProps {
  loan: any
  relationship: any
  deal: any | null
  loanMilestones: Milestone[]
  loanProgressOpen: boolean
  setLoanProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneName: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
  paymentHistory: any[]
  loanDocuments: any[]
  loanTasks: any[]
  loanNotes: any[]
  loanTeam: any[]
  creditResources: any[]
  getStatusIcon: (status: string) => JSX.Element
}

export function LoanOverviewTab({
  loan,
  relationship,
  deal,
  loanMilestones,
  loanProgressOpen,
  setLoanProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
  paymentHistory,
  loanDocuments,
  loanTasks,
  loanNotes,
  loanTeam,
  creditResources,
  getStatusIcon,
}: LoanOverviewTabProps) {
  const router = useRouter()

return (
    <div className="flex flex-col md:flex-row gap-6">
      {/* Left Column - 1/3 width */}
      <div className="md:w-1/3 space-y-6">
        {/* Add a warning message when rendering the loan overview if relationshipId is empty: */}
        {!loan.relationshipId && (
          <div className="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-4">
            <div className="flex">
              <div className="flex-shrink-0">
                <svg
                  className="h-5 w-5 text-yellow-500"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div className="ml-3">
                <p className="text-sm text-yellow-700">
                  This loan is not associated with any relationship. Please edit the loan to add a relationship.
                </p>
              </div>
            </div>
          </div>
        )}
        {/* Loan Summary */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Loan Summary</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-700">
              This {loan.loanType.toLowerCase()} for {loan.amount} is currently {loan.status.toLowerCase()}. The loan
              has an interest rate of {loan.interestRate} with a term of {loan.term} and matures on {loan.maturityDate}.
              The monthly payment amount is {loan.paymentAmount} with the next payment due on {loan.nextPaymentDate}.
            </p>
            <div className="text-xs text-gray-500 mt-2">
              This content was generated using AI.{" "}
              <Link href="#" className="text-blue-600">
                Learn more
              </Link>
            </div>
          </CardContent>
        </Card>

{/* Content */}
                          <div
                            className="flex-1 ml-4 cursor-pointer group"
                            onClick={() => onOpenMilestoneDialog(milestone)}
                          >
                            <div className="flex justify-between items-start">
                              <div className="flex flex-col">
                                <span
                                  className={`text-sm font-medium group-hover:text-blue-600 transition-colors ${
                                    isComplete || isInProgress ? "text-gray-900" : "text-gray-500"
                                  }`}
                                >
                                  {milestone.name}
                                </span>
                                <div className="flex items-center mt-1">
                                  <Calendar className="h-3 w-3 text-gray-400 mr-1" />
                                  <span className="text-xs text-gray-400">{milestone.date}</span>
                                </div>
                              </div>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                                    <MoreHorizontal className="h-4 w-4" />
                                    <span className="sr-only">Open menu</span>
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.name, "Complete")
                                    }}
                                  >
                                    <Check className="mr-2 h-4 w-4" />
                                    <span>Mark as Complete</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.name, "In Progress")
                                    }}
                                  >
                                    <Clock className="mr-2 h-4 w-4" />
                                    <span>Mark as In Progress</span>
                                  </DropdownMenuItem>
                                  <DropdownMenuItem
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      onMilestoneStatusChange(milestone.name, "To Do")
                                    }}
                                  >
                                    <span className="mr-2 h-4 w-4 flex items-center justify-center">○</span>
                                    <span>Mark as To Do</span>
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </div>
                        </div>
                      )
                    })}
                  </div>
                </div>
              </CardContent>
            </CollapsibleContent>
          </Card>
        </Collapsible>

{/* Relationship Information */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Building className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Relationship</CardTitle>
            </div>
            <Button variant="ghost" size="sm" onClick={() => router.push(`/relationships/${loan.relationshipId}`)}>
              View
            </Button>
          </CardHeader>
          <CardContent>
            {relationship ? (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-gray-500 mb-1">Relationship Name</div>
                  <div
                    className="text-xl font-semibold text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/relationships/${loan.relationshipId}`)}
                  >
                    {relationship.name}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Type</div>
                  <div className="text-xl font-semibold">{relationship.type}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Status</div>
                  <div className="text-xl font-semibold">{relationship.status}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Risk Status</div>
                  <div className="text-xl font-semibold">{relationship.riskStatus}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Primary Contact</div>
                  <div className="text-xl font-semibold">{relationship.primaryContact}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Contact Email</div>
                  <div className="text-xl font-semibold">{relationship.primaryContactEmail}</div>
                </div>
              </div>
            ) : (
              <p className="text-sm text-gray-500">Relationship information not available.</p>
            )}
          </CardContent>
        </Card>

{/* Deal Information (if available) */}
        {deal && (
          <Card>
            <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
              <div className="flex items-center space-x-2">
                <Briefcase className="h-5 w-5 text-gray-500" />
                <CardTitle className="text-lg">Deal</CardTitle>
              </div>
              <Button variant="ghost" size="sm" onClick={() => router.push(`/deals/${deal.id}`)}>
                View
              </Button>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-gray-500 mb-1">Deal Name</div>
                  <div
                    className="text-xl font-semibold text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/deals/${deal.id}`)}
                  >
                    {deal.name}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Amount</div>
                  <div className="text-xl font-semibold">{deal.amount}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Status</div>
                  <div className="text-xl font-semibold">{deal.status}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Stage</div>
                  <div className="text-xl font-semibold">{deal.stage}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Owner</div>
                  <div className="text-xl font-semibold">{deal.owner}</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Closing Date</div>
                  <div className="text-xl font-semibold">{deal.closingDate}</div>
                </div>
              </div>
            </CardContent>
          </Card>
        )}

{/* Recent Notes */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <MessageSquare className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Recent Notes</CardTitle>
            </div>
            <Button variant="outline" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Add Note
            </Button>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {loanNotes.map((note, index) => (
                <div key={index} className="border-b border-gray-100 pb-4 last:border-0 last:pb-0">
                  <div className="flex justify-between items-center mb-2">
                    <div className="font-medium">{note.title}</div>
                    <span className="text-xs text-gray-500">
                      {note.date} {note.time}
                    </span>
                  </div>
                  <p className="text-sm text-gray-700 mb-2">{note.content}</p>
                  <div className="flex justify-between items-center">
                    <span className="text-xs text-gray-500">By: {note.author}</span>
                    <Button variant="ghost" size="sm">
                      View Details
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
          <CardFooter className="border-t pt-4 flex justify-center">
            <Button variant="ghost" size="sm">
              View All Notes
            </Button>
          </CardFooter>
        </Card>
      </div>

{/* Right Column - 2/3 width */}
      <div className="md:w-2/3 space-y-6">
        {/* Loan Analytics */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <BarChart4 className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Loan Analytics</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Download className="h-4 w-4 mr-1" />
              Export
            </Button>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              <div className="bg-blue-50 p-3 rounded-lg">
                <div className="text-sm text-gray-500 mb-1">Principal Balance</div>
                <div className="text-xl font-bold">{loan.amount}</div>
                <div className="text-xs text-green-600 mt-1">-$2,500 from last month</div>
              </div>
              <div className="bg-green-50 p-3 rounded-lg">
                <div className="text-sm text-gray-500 mb-1">Interest Paid YTD</div>
                <div className="text-xl font-bold">$4,250.00</div>
                <div className="text-xs text-gray-500 mt-1">$12,500 total interest</div>
              </div>
              <div className="bg-purple-50 p-3 rounded-lg">
                <div className="text-sm text-gray-500 mb-1">Payments Remaining</div>
                <div className="text-xl font-bold">42</div>
                <div className="text-xs text-gray-500 mt-1">of 60 total payments</div>
              </div>
            </div>
            <div className="h-64 w-full">
              <div className="text-sm font-medium mb-2">Loan Balance Over Time</div>
              <div className="h-56 w-full">
                <ResponsiveContainer width="100%" height="100%">
                  <LineChart
                    data={[
                      { month: "Jan", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) },
                      { month: "Feb", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.98 },
                      { month: "Mar", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.96 },
                      { month: "Apr", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.94 },
                      { month: "May", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.92 },
                      { month: "Jun", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.9 },
                      { month: "Jul", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.88 },
                      { month: "Aug", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.86 },
                      { month: "Sep", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.84 },
                      { month: "Oct", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.82 },
                      { month: "Nov", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.8 },
                      { month: "Dec", balance: Number.parseFloat(loan.amount.replace(/[$,]/g, "")) * 0.78 },
                    ]}
                    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                  >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="month" />
                    <YAxis tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`} />
                    <RechartsTooltip formatter={(value) => [`${value.toLocaleString()}`, "Balance"]} />
                    <Legend />
                    <Line
                      type="monotone"
                      dataKey="balance"
                      stroke="#3b82f6"
                      strokeWidth={2}
                      dot={{ r: 4 }}
                      activeDot={{ r: 6 }}
                      name="Loan Balance"
                    />
                  </LineChart>
                </ResponsiveContainer>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Tasks */}
        <TaskTable
          title="Tasks"
          tasks={getTasksForLoan(loan.id).map((task) => ({
            id: task.id,
            name: task.name,
            type: task.type,
            status: task.status,
            assignedTo: task.assignedTo,
            dueDate: task.dueDate,
          }))}
          onAddTask={() => {}}
          onUpdateTask={(task) => {
            console.log("Update task:", task)
          }}
          onViewTask={(task) => {
            console.log("View task:", task)
          }}
          showTypeColumn={true}
        />

{/* Payment History */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <DollarSign className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Payment History</CardTitle>
            </div>
            <Button variant="outline" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Add Payment
            </Button>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Date</TableHead>
                  <TableHead>Amount</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Method</TableHead>
                  <TableHead>Confirmation</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paymentHistory.map((payment, index) => (
                  <TableRow key={index}>
                    <TableCell>{payment.date}</TableCell>
                    <TableCell>{payment.amount}</TableCell>
                    <TableCell>
                      <StatusBadge status={payment.status} />
                    </TableCell>
                    <TableCell>{payment.method}</TableCell>
                    <TableCell>{payment.confirmationNumber}</TableCell>
                    <TableCell className="text-right">
                      <Button variant="ghost" size="sm">
                        View
                      </Button>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
          <CardFooter className="border-t pt-4 flex justify-center">
            <Button variant="ghost" size="sm">
              View All Payments
            </Button>
          </CardFooter>
        </Card>

{/* Documents */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Documents</CardTitle>
            </div>
            <Button variant="outline" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Add Document
            </Button>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Document</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Owner</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {loanDocuments.map((doc, index) => (
                  <TableRow key={index}>
                    <TableCell className="font-medium">{doc.name}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        {getStatusIcon(doc.status)}
                        <span className="ml-2">{doc.status}</span>
                      </div>
                    </TableCell>
                    <TableCell>{doc.date}</TableCell>
                    <TableCell>{doc.owner}</TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">Open menu</span>
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuItem>View</DropdownMenuItem>
                          <DropdownMenuItem>Download</DropdownMenuItem>
                          <DropdownMenuItem>Share</DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
          <CardFooter className="border-t pt-4 flex justify-center">
            <Button variant="ghost" size="sm">
              View All Documents
            </Button>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/loans/[id]/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { useRouter, useParams } from "next/navigation"
import { Building, Plus, Edit, Calendar, DollarSign, CreditCard, CheckCircle, Clock, AlertCircle } from "lucide-react"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { toast } from "@/hooks/use-toast"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

import PageHeader from "@/app/components/page-header"
import { initialRelationships, type relationshipExtendedData } from "@/app/data/relationships"
import { initialDeals } from "@/app/data/deals"
import { StatusBadge } from "@/app/components/status-badge"
import { LoanTabManager } from "@/app/components/tabs/loan-tab-manager"
import type { MilestoneStatus, Milestone } from "@/app/components/tabs/loan-overview-tab"
import { getLoanById } from "@/lib/loan-store"
import { getTasksForLoan } from "@/app/data/tasks"

export default function LoanDetailPage() {
  const router = useRouter()
  const params = useParams()
  const id = params.id as string

const [activeTab, setActiveTab] = useState("overview")
  const [loan, setLoan] = useState<(typeof relationshipExtendedData.loans)[0] | null>(null)
  const [relationship, setRelationship] = useState<(typeof initialRelationships)[0] | null>(null)
  const [deal, setDeal] = useState<(typeof initialDeals)[0] | null>(null)
  const [loading, setLoading] = useState(true)

// Add these state variables after the existing useState declarations
  const [loanProgressOpen, setLoanProgressOpen] = useState(true)
  const [milestoneDialogOpen, setMilestoneDialogOpen] = useState(false)
  const [selectedMilestone, setSelectedMilestone] = useState<Milestone | null>(null)
  const [loanMilestones, setLoanMilestones] = useState<Milestone[]>([])

// Get tasks for this loan from the task store
  const [loanTasks, setLoanTasks] = useState<any[]>([])

// Find the loan data based on the ID from the URL
  useEffect(() => {
    try {
      // In a real app, this would be an API call
      // const foundLoan = relationshipExtendedData.loans.find((l) => l.id === id)
      const foundLoan = getLoanById(id)

if (foundLoan) {
        setLoan(foundLoan)

// Find the associated relationship
        const foundRelationship = initialRelationships.find((r) => r.id === foundLoan.relationshipId)
        if (foundRelationship) {
          setRelationship(foundRelationship)

// Find the associated deal directly from the loan's dealId
          if (foundLoan.dealId) {
            const foundDeal = initialDeals.find((d) => d.id === foundLoan.dealId)
            if (foundDeal) {
              setDeal(foundDeal)
            }
          }
        }

// Get tasks for this loan from the task store
        const tasks = getTasksForLoan(id)
        setLoanTasks(tasks)
      } else {
        // If not found, show a more user-friendly message
        console.error(`Loan with ID ${id} not found`)
      }
    } catch (error) {
      console.error("Error loading loan:", error instanceof Error ? error.message : String(error))
    }

setLoading(false)
  }, [id])

// Update loan milestones when loan data changes
  useEffect(() => {
    if (!loan) {
      setLoanMilestones([])
      return
    }
    // Initialize milestones with default values
    const initialMilestones = [
      { name: "Qualifications", status: "Complete" as MilestoneStatus, date: "05/15/2024" },
      { name: "Proposal", status: "Complete" as MilestoneStatus, date: "05/18/2024" },
      { name: "Credit Underwriting", status: "Complete" as MilestoneStatus, date: "05/22/2024" },
      { name: "Approval", status: "Complete" as MilestoneStatus, date: "05/25/2024" },
      {
        name: "Processing",
        status: loan.status === "Active" ? ("Complete" as MilestoneStatus) : ("In Progress" as MilestoneStatus),
        date: "06/05/2024",
      },
      {
        name: "Doc Prep",
        status: loan.status === "Active" ? ("Complete" as MilestoneStatus) : ("In Progress" as MilestoneStatus),
        date: "06/15/2024",
      },
      {
        name: "Closing",
        status: loan.status === "Active" ? ("Complete" as MilestoneStatus) : ("To Do" as MilestoneStatus),
        date: "06/30/2024",
      },
      {
        name: "Booked",
        status: loan.status === "Active" ? ("Complete" as MilestoneStatus) : ("To Do" as MilestoneStatus),
        date: "07/05/2024",
      },
      {
        name: "Complete",
        status: loan.status === "Active" ? ("Complete" as MilestoneStatus) : ("To Do" as MilestoneStatus),
        date: "07/15/2024",
      },
    ]
    setLoanMilestones(initialMilestones)
  }, [loan])

// Function to handle milestone status change
  const handleMilestoneStatusChange = useCallback((milestoneName: string, newStatus: MilestoneStatus) => {
    // Update the milestone status
    setLoanMilestones((prevMilestones) => {
      const updatedMilestones = prevMilestones.map((milestone) => {
        if (milestone.name === milestoneName) {
          return { ...milestone, status: newStatus }
        }

// If marking a milestone as complete, also mark all previous milestones as complete
        const currentIndex = prevMilestones.findIndex((m) => m.name === milestoneName)
        const milestoneIndex = prevMilestones.findIndex((m) => m.name === milestone.name)

if (newStatus === "Complete" && milestoneIndex < currentIndex && milestone.status !== "Complete") {
          return { ...milestone, status: "Complete" }
        }

// If marking a milestone as in progress, ensure all previous are complete
        if (newStatus === "In Progress" && milestoneIndex < currentIndex && milestone.status !== "Complete") {
          return { ...milestone, status: "Complete" }
        }

// If marking a milestone as to do, ensure all later ones are also to do
        if (
          (newStatus === "To Do" || newStatus === "In Progress") &&
          milestoneIndex > currentIndex &&
          milestone.status !== "To Do"
        ) {
          return { ...milestone, status: "To Do" }
        }

return milestone
      })

return updatedMilestones
    })

// Show toast notification
    toast({
      title: "Milestone updated",
      description: `${milestoneName} status changed to ${newStatus}`,
    })

// Close the dialog if open
    setMilestoneDialogOpen(false)
  }, [])

// Function to open milestone dialog
  const openMilestoneDialog = useCallback((milestone: Milestone) => {
    setSelectedMilestone(milestone)
    setMilestoneDialogOpen(true)
  }, [])

const getStatusIcon = useCallback((status: string) => {
    switch (status) {
      case "Complete":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "In Progress":
        return <Clock className="h-5 w-5 text-blue-500" />
      case "To Do":
        return <Clock className="h-5 w-5 text-gray-500" />
      case "Exception":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "Waived":
        return <CheckCircle className="h-5 w-5 text-gray-400" />
      default:
        return <CheckCircle className="h-5 w-5 text-gray-400" />
    }
  }, [])

// Sample documents for this loan
  const loanDocuments = [
    { name: "Loan Agreement", status: "Complete", date: "05/15/2024", owner: "Olivia Benson" },
    { name: "Promissory Note", status: "Complete", date: "05/18/2024", owner: "Larry Owens" },
    { name: "Collateral Documentation", status: "In Progress", date: "05/20/2024", owner: "Whitney Wright" },
    { name: "Insurance Verification", status: "To Do", date: "05/25/2024", owner: "Olivia Benson" },
    { name: "Property Appraisal", status: "Complete", date: "05/22/2024", owner: "Larry Owens" },
  ]

// Sample notes for this loan
  const loanNotes = [
    {
      title: "Initial loan review",
      content: "Reviewed loan application and supporting documents. Applicant meets initial criteria for approval.",
      author: "Olivia Benson",
      date: "05/15/2024",
      time: "10:30 AM",
    },
    {
      title: "Collateral assessment",
      content: "Collateral value appears sufficient based on preliminary appraisal. Formal appraisal pending.",
      author: "Larry Owens",
      date: "05/18/2024",
      time: "2:15 PM",
    },
    {
      title: "Rate discussion",
      content: "Discussed interest rate options with client. Client prefers fixed rate over the full term.",
      author: "Whitney Wright",
      date: "05/22/2024",
      time: "11:00 AM",
    },
  ]

// Add sample data for credit resources
  const creditResources = [
    {
      name: "Credit Report - Experian",
      type: "Credit Report",
      date: "05/15/2024",
      status: "Complete",
      source: "Experian",
    },
    {
      name: "Credit Report - TransUnion",
      type: "Credit Report",
      date: "05/15/2024",
      status: "Complete",
      source: "TransUnion",
    },
    {
      name: "Credit Report - Equifax",
      type: "Credit Report",
      date: "05/15/2024",
      status: "Complete",
      source: "Equifax",
    },
    {
      name: "Financial Statement Analysis",
      type: "Financial Analysis",
      date: "05/18/2024",
      status: "Complete",
      source: "Internal",
    },
    {
      name: "Cash Flow Projection",
      type: "Financial Analysis",
      date: "05/20/2024",
      status: "In Progress",
      source: "Internal",
    },
  ]

// Render loading state
  if (loading) {
    return <div className="flex-1 p-4">Loading loan details...</div>
  }

// Render not found state
  if (!loan) {
    return (
      <div className="flex-1 p-8 text-center">
        <div className="mb-4 text-4xl">🔍</div>
        <h2 className="text-2xl font-bold mb-2">Loan Not Found</h2>
        <p className="text-gray-600 mb-6">The loan with ID "{id}" could not be found.</p>
        <Button onClick={() => router.back()}>Go Back</Button>
      </div>
    )
  }

// Sample payment history
  const paymentHistory = [
    {
      date: "06/01/2024",
      amount: loan.paymentAmount,
      status: "Paid",
      method: "Auto-debit",
      confirmationNumber: "PMT-123456",
    },
    {
      date: "05/01/2024",
      amount: loan.paymentAmount,
      status: "Paid",
      method: "Auto-debit",
      confirmationNumber: "PMT-123455",
    },
    {
      date: "04/01/2024",
      amount: loan.paymentAmount,
      status: "Paid",
      method: "Auto-debit",
      confirmationNumber: "PMT-123454",
    },
    {
      date: "03/01/2024",
      amount: loan.paymentAmount,
      status: "Paid",
      method: "Auto-debit",
      confirmationNumber: "PMT-123453",
    },
    {
      date: "02/01/2024",
      amount: loan.paymentAmount,
      status: "Paid",
      method: "Auto-debit",
      confirmationNumber: "PMT-123452",
    },
  ]

// Sample team members for this loan
  const loanTeam = [
    {
      name: "Olivia Benson",
      role: "Loan Officer",
      email: "olivia.benson@example.com",
      phone: "(555) 123-4567",
    },
    { name: "Larry Owens", role: "Credit Analyst", email: "larry.owens@example.com", phone: "(555) 234-5678" },
    {
      name: "Whitney Wright",
      role: "Relationship Manager",
      email: "whitney.wright@example.com",
      phone: "(555) 345-6789",
    },
  ]

// Create breadcrumbs with deal if available
  const breadcrumbs = [
    { label: "Relationships", href: "/relationships" },
    { label: relationship?.name || "Relationship", href: `/relationships/${loan.relationshipId}` },
  ]

// Add deal to breadcrumbs if it exists
  if (deal) {
    breadcrumbs.push({ label: deal.name, href: `/deals/${deal.id}` })
  }

// Add current loan as final breadcrumb
  breadcrumbs.push({ label: loan.name })

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Loan Header */}
      <PageHeader
        title={loan.name}
        subtitle={`${loan.loanType} • ${loan.status} • ${loan.amount} • ${loan.interestRate}`}
        icon={CreditCard}
        breadcrumbs={breadcrumbs}
        secondaryActions={
          <>
            <Button variant="outline">
              <Plus className="h-4 w-4 mr-1" />
              Add Payment
            </Button>
            <Button variant="outline">Add Document</Button>
            <Button variant="outline">Add Note</Button>
            <Button className="bg-blue-900">
              <Edit className="h-4 w-4 mr-1" />
              Edit Loan
            </Button>
          </>
        }
      />

{/* Add this after the PageHeader component and before the Key Metrics section */}
      {!loan.relationshipId && (
        <div className="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-4">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg
                className="h-5 w-5 text-yellow-500"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fillRule="evenodd"
                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="ml-3">
              <p className="text-sm text-yellow-700">
                This loan is not associated with any relationship. Please edit the loan to add a relationship.
              </p>
              <div className="mt-2">
                <Button size="sm" variant="outline" onClick={() => router.push(`/loans/${id}/edit`)}>
                  Fix Relationship
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

{/* Key Metrics */}
      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-teal-500 p-1 rounded">
                <DollarSign className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loan.amount}</span>
            </div>
            <div className="text-sm text-gray-500">Loan Amount</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-blue-500 p-1 rounded">
                <Calendar className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loan.interestRate}</span>
            </div>
            <div className="text-sm text-gray-500">Interest Rate</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-purple-500 p-1 rounded">
                <Calendar className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loan.term}</span>
            </div>
            <div className="text-sm text-gray-500">Term</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-pink-500 p-1 rounded">
                <Calendar className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">{loan.maturityDate}</span>
            </div>
            <div className="text-sm text-gray-500">Maturity Date</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <Building className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">
                <StatusBadge status={loan.status} />
              </span>
            </div>
            <div className="text-sm text-gray-500">Status</div>
          </CardContent>
        </Card>
      </div>

{/* Main Tabs */}
      <LoanTabManager
        loan={loan}
        relationship={relationship}
        deal={deal}
        loanMilestones={loanMilestones}
        loanProgressOpen={loanProgressOpen}
        setLoanProgressOpen={setLoanProgressOpen}
        onMilestoneStatusChange={handleMilestoneStatusChange}
        onOpenMilestoneDialog={openMilestoneDialog}
        paymentHistory={paymentHistory}
        loanDocuments={loanDocuments}
        loanTasks={loanTasks}
        loanNotes={loanNotes}
        loanTeam={loanTeam}
        creditResources={creditResources}
        getStatusIcon={getStatusIcon}
        activeTab={activeTab}
        setActiveTab={setActiveTab}
      />

{/* Milestone Dialog */}
      <Dialog open={milestoneDialogOpen} onOpenChange={setMilestoneDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>{selectedMilestone?.name}</DialogTitle>
            <DialogDescription>Update the status of this milestone.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <label htmlFor="status" className="text-right">
                Status
              </label>
              <select
                id="status"
                defaultValue={selectedMilestone?.status}
                className="col-span-3 rounded-md border shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                onChange={(e) => {
                  if (selectedMilestone) {
                    handleMilestoneStatusChange(selectedMilestone.name, e.target.value as MilestoneStatus)
                  }
                }}
              >
                <option value="To Do">To Do</option>
                <option value="In Progress">In Progress</option>
                <option value="Complete">Complete</option>
              </select>
            </div>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setMilestoneDialogOpen(false)}>
              Cancel
            </Button>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/deal-credit-resources-tab.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { CardFooter } from "@/components/ui/card"

import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Plus, Building, FileText, Briefcase, PieChart, Users, Edit, ChevronDown, Trash2 } from "lucide-react"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import Link from "next/link"
import { StatusBadge } from "@/app/components/status-badge"
import type { MilestoneStatus, Milestone } from "./deal-overview-tab"

export interface DealCreditResourcesTabProps {
  deal: any
  relationship: any
  dealMilestones: Milestone[]
  dealProgressOpen: boolean
  setDealProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneId: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
}

export function DealCreditResourcesTab({
  deal,
  relationship,
  dealMilestones,
  dealProgressOpen,
  setDealProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
}: DealCreditResourcesTabProps) {
  const router = useRouter()

return (
    <div className="flex flex-col md:flex-row gap-6">
      {/* Left Column - 1/3 width - Same as Overview tab */}
      <div className="md:w-1/3 space-y-6">
        {/* Deal Summary */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Deal Summary</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <p className="text-sm text-gray-700">
              This {deal.type.toLowerCase()} for {deal.amount} is currently in the {deal.stage.toLowerCase()} stage with
              a {deal.probability} probability of closing. The deal is for {deal.relationship}, a{" "}
              {relationship?.type.toLowerCase()} in the {deal.industry} industry. The expected closing date is{" "}
              {deal.closingDate}.
            </p>
            <div className="text-xs text-gray-500 mt-2">
              This content was generated using AI.{" "}
              <Link href="#" className="text-blue-600">
                Learn more
              </Link>
            </div>
          </CardContent>
        </Card>

{/* Deal Details */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Briefcase className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Deal Details</CardTitle>
            </div>
            <Button variant="ghost" size="sm">
              <Edit className="h-4 w-4 mr-1" />
              Edit
            </Button>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <div className="field-label">Deal Name</div>
                <p className="font-medium">{deal.name}</p>
              </div>
              <div>
                <div className="field-label">Amount</div>
                <p className="font-medium">{deal.amount}</p>
              </div>
              <div>
                <div className="field-label">Type</div>
                <p className="font-medium">{deal.type}</p>
              </div>
              <div>
                <div className="field-label">Status</div>
                <p className="font-medium">{deal.status}</p>
              </div>
              <div>
                <div className="field-label">Stage</div>
                <p className="font-medium">{deal.stage}</p>
              </div>
              <div>
                <div className="field-label">Probability</div>
                <p className="font-medium">{deal.probability}</p>
              </div>
              <div>
                <div className="field-label">Priority</div>
                <p className="font-medium">{deal.priority}</p>
              </div>
              <div>
                <div className="field-label">Creation Date</div>
                <p className="font-medium">{deal.dateCreated}</p>
              </div>
              <div>
                <div className="field-label">Closing Date</div>
                <p className="font-medium">{deal.closingDate}</p>
              </div>
              <div>
                <div className="field-label">Owner</div>
                <p className="font-medium">{deal.owner}</p>
              </div>
              <div>
                <div className="field-label">Industry</div>
                <p className="font-medium">{deal.industry}</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Relationship Information */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <Building className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Relationship</CardTitle>
            </div>
            <Button variant="ghost" size="sm" onClick={() => router.push(`/relationships/${deal.relationshipId}`)}>
              View
            </Button>
          </CardHeader>
          <CardContent>
            {relationship ? (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <div className="field-label">Relationship Name</div>
                  <p
                    className="font-medium text-blue-900 hover:underline cursor-pointer"
                    onClick={() => router.push(`/relationships/${deal.relationshipId}`)}
                  >
                    {relationship.name}
                  </p>
                </div>
                <div>
                  <div className="field-label">Type</div>
                  <p className="font-medium">{relationship.type}</p>
                </div>
                <div>
                  <div className="field-label">Status</div>
                  <p className="font-medium">{relationship.status}</p>
                </div>
                <div>
                  <div className="field-label">Risk Status</div>
                  <p className="font-medium">{relationship.riskStatus}</p>
                </div>
                <div>
                  <div className="field-label">Primary Contact</div>
                  <p className="font-medium">{relationship.primaryContact}</p>
                </div>
                <div>
                  <div className="field-label">Contact Email</div>
                  <p className="font-medium">{relationship.primaryContactEmail}</p>
                </div>
                <div>
                  <div className="field-label">Contact Phone</div>
                  <p className="font-medium">{relationship.primaryContactPhone}</p>
                </div>
              </div>
            ) : (
              <p className="text-sm text-gray-500">Relationship information not available.</p>
            )}
          </CardContent>
        </Card>

<div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                  <span className="font-medium text-blue-800">WW</span>
                </div>
                <div>
                  <p className="font-medium text-gray-900">Whitney Wright</p>
                  <p className="text-xs text-gray-500">Credit Analyst</p>
                </div>
              </div>
            </div>
          </CardContent>

{/* Right Column - 2/3 width */}
      <div className="md:w-2/3 space-y-6">
        {/* Credit Score Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <CardTitle className="text-lg">Credit Score</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-lg font-medium">Current FICO Score:</span>
                  <span className="text-2xl font-bold">{relationship?.ficoScore || "780"}</span>
                </div>
                <div className="w-full bg-gray-200 rounded-full h-2.5">
                  <div
                    className={`h-2.5 rounded-full ${
                      Number(relationship?.ficoScore || 780) >= 740
                        ? "bg-green-500"
                        : Number(relationship?.ficoScore || 780) >= 670
                          ? "bg-yellow-500"
                          : "bg-red-500"
                    }`}
                    style={{ width: `${(Number(relationship?.ficoScore || 780) / 850) * 100}%` }}
                  ></div>
                </div>
                <div className="flex justify-between text-xs">
                  <span>Poor</span>
                  <span>Fair</span>
                  <span>Good</span>
                  <span>Very Good</span>
                  <span>Excellent</span>
                </div>
                <div className="space-y-2 mt-4">
                  <div className="flex justify-between items-center">
                    <span>Previous Score:</span>
                    <span className="font-medium">760 (6 months ago)</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Score Change:</span>
                    <span className="font-medium text-yellow-600">+20</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Last Updated:</span>
                    <span className="font-medium">05/01/2024</span>
                  </div>
                </div>
              </div>
              <div className="space-y-4">
                <div className="p-4 border rounded-lg">
                  <div className="field-label">Key Factors Affecting Score</div>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                      <span>Long credit history (18 years)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                      <span>No missed payments in last 24 months</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-yellow-500 mt-1.5 mr-2"></div>
                      <span>Credit utilization (42% of available credit)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-yellow-500 mt-1.5 mr-2"></div>
                      <span>Recent credit inquiries (2 in last 6 months)</span>
                    </li>
                  </ul>
                </div>
                <Button className="w-full">Run New Credit Check</Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Collateral Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg">Collateral</CardTitle>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Collateral
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Value</TableHead>
                  <TableHead>LTV</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                  <TableHead className="w-[120px] text-right">More</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Office Building - 123 Main St</TableCell>
                  <TableCell>Commercial Real Estate</TableCell>
                  <TableCell>$3,500,000</TableCell>
                  <TableCell>65%</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Edit</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500 hover:text-red-600">
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">Delete</span>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Manufacturing Equipment</TableCell>
                  <TableCell>Equipment</TableCell>
                  <TableCell>$750,000</TableCell>
                  <TableCell>70%</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Edit</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500 hover:text-red-600">
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">Delete</span>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

{/* Covenants Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg">Covenants</CardTitle>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Covenant
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Requirement</TableHead>
                  <TableHead>Actual</TableHead>
                  <TableHead>Compliance</TableHead>
                  <TableHead>Next Review</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                  <TableHead className="w-[120px] text-right">More</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Debt Service Coverage Ratio</TableCell>
                  <TableCell>Min 1.25x</TableCell>
                  <TableCell>1.12x</TableCell>
                  <TableCell>
                    <StatusBadge status="Non-Compliant" />
                  </TableCell>
                  <TableCell>06/30/2024</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      Details
                    </Button>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Edit</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500 hover:text-red-600">
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">Delete</span>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Current Ratio</TableCell>
                  <TableCell>Min 1.2x</TableCell>
                  <TableCell>1.43x</TableCell>
                  <TableCell>
                    <StatusBadge status="Compliant" />
                  </TableCell>
                  <TableCell>06/30/2024</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      Details
                    </Button>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Edit</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500 hover:text-red-600">
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">Delete</span>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

{/* Policy Exceptions Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg">Policy Exceptions</CardTitle>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Exception
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Exception Type</TableHead>
                  <TableHead>Description</TableHead>
                  <TableHead>Approval Level</TableHead>
                  <TableHead>Approved By</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                  <TableHead className="w-[120px] text-right">More</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell>LTV Exception</TableCell>
                  <TableCell className="font-medium">
                    LTV exception of 80% vs policy of 75% for office building
                  </TableCell>
                  <TableCell>Credit Committee</TableCell>
                  <TableCell>John Smith</TableCell>
                  <TableCell>04/15/2024</TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end space-x-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Edit className="h-4 w-4" />
                        <span className="sr-only">Edit</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8 text-red-500 hover:text-red-600">
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">Delete</span>
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-tab-manager.tsx" isMerged="true"
"use client"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { LoanOverviewTab, type MilestoneStatus, type Milestone } from "./loan-overview-tab"
import { LoanPaymentsTab } from "./loan-payments-tab"
import { LoanDocumentsTab } from "./loan-documents-tab"
import { LoanTasksTab } from "./loan-tasks-tab"
import { LoanNotesTab } from "./loan-notes-tab"
import { LoanCreditResourcesTab } from "./loan-credit-resources-tab"
import { LoanGlobalAnalysisTab } from "./loan-global-analysis-tab"
import type { JSX } from "react"

export interface LoanTabManagerProps {
  loan: any
  relationship: any
  deal: any | null
  loanMilestones: Milestone[]
  loanProgressOpen: boolean
  setLoanProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneName: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
  paymentHistory: any[]
  loanDocuments: any[]
  loanTasks: any[]
  loanNotes: any[]
  loanTeam: any[]
  creditResources: any[]
  getStatusIcon: (status: string) => JSX.Element
  activeTab: string
  setActiveTab: (tab: string) => void
}

export function LoanTabManager({
  loan,
  relationship,
  deal,
  loanMilestones = [],
  loanProgressOpen,
  setLoanProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
  paymentHistory = [],
  loanDocuments = [],
  loanTasks = [],
  loanNotes = [],
  loanTeam = [],
  creditResources = [],
  getStatusIcon,
  activeTab,
  setActiveTab,
}: LoanTabManagerProps) {
  return (
    <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab} className="w-full bg-background px-4 py-3 rounded">
      <TabsList className="border-b w-full justify-start rounded-none bg-transparent p-0">
        <TabsTrigger
          value="overview"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Overview
        </TabsTrigger>
        <TabsTrigger
          value="credit-resources"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Credit Resources
        </TabsTrigger>
        <TabsTrigger
          value="payments"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Payments
        </TabsTrigger>
        <TabsTrigger
          value="documents"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Documents ({loanDocuments.filter((d) => d.status === "Complete").length}/{loanDocuments.length})
        </TabsTrigger>
        <TabsTrigger
          value="tasks"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Tasks ({loanTasks.filter((t) => t.status === "Complete").length}/{loanTasks.length})
        </TabsTrigger>
        <TabsTrigger
          value="notes"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Notes ({loanNotes.length})
        </TabsTrigger>
        <TabsTrigger
          value="global-analysis"
          className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
        >
          Global Analysis
        </TabsTrigger>
      </TabsList>

{/* Tab Content */}
      <TabsContent value="overview" className="mt-6">
        <LoanOverviewTab
          loan={loan}
          relationship={relationship}
          deal={deal}
          loanMilestones={loanMilestones}
          loanProgressOpen={loanProgressOpen}
          setLoanProgressOpen={setLoanProgressOpen}
          onMilestoneStatusChange={onMilestoneStatusChange}
          onOpenMilestoneDialog={onOpenMilestoneDialog}
          paymentHistory={paymentHistory}
          loanDocuments={loanDocuments}
          loanTasks={loanTasks}
          loanNotes={loanNotes}
          loanTeam={loanTeam}
          creditResources={creditResources}
          getStatusIcon={getStatusIcon}
        />
      </TabsContent>

{/* Credit Resources Tab Content */}
      <TabsContent value="credit-resources" className="mt-6">
        <LoanCreditResourcesTab
          loan={loan}
          relationship={relationship}
          deal={deal}
          loanMilestones={loanMilestones}
          loanProgressOpen={loanProgressOpen}
          setLoanProgressOpen={setLoanProgressOpen}
          onMilestoneStatusChange={onMilestoneStatusChange}
          onOpenMilestoneDialog={onOpenMilestoneDialog}
          loanTeam={loanTeam}
          loanNotes={loanNotes}
          creditResources={creditResources}
        />
      </TabsContent>

{/* Payments Tab Content */}
      <TabsContent value="payments" className="mt-6">
        <LoanPaymentsTab loan={loan} paymentHistory={paymentHistory} />
      </TabsContent>

{/* Documents Tab Content */}
      <TabsContent value="documents" className="mt-6">
        <LoanDocumentsTab loanDocuments={loanDocuments} getStatusIcon={getStatusIcon} />
      </TabsContent>

{/* Tasks Tab Content */}
      <TabsContent value="tasks" className="mt-6">
        <LoanTasksTab loanId={loan.id} />
      </TabsContent>

{/* Notes Tab Content */}
      <TabsContent value="notes" className="mt-6">
        <LoanNotesTab loanNotes={loanNotes} />
      </TabsContent>

{/* Global Analysis Tab Content */}
      <TabsContent value="global-analysis" className="mt-6">
        <LoanGlobalAnalysisTab loan={loan} relationship={relationship} deal={deal} />
      </TabsContent>
    </Tabs>
  )
}
[V0_FILE]png:file="public/images/nsight-financial-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Screenshot%202025-07-09%20at%203.58.41%E2%80%AFPM-DbW7scPyPDrEx9MZjn0ur9hfZFU33I.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/components/header.tsx" isQuickEdit="true" isMerged="true"
"use client"
import { usePathname } from "next/navigation"
import Link from "next/link"
import { Search, Home, ChevronDown, Plus, Bell, Settings, Clock, User } from "lucide-react"
import Image from "next/image"

export default function Header() {
  const pathname = usePathname()

const isActive = (path: string) => {
    if (path === "/" && pathname === "/") return true
    if (path !== "/" && pathname.startsWith(path)) return true
    return false
  }

return (
    <>
      {/* Header */}
      <header className="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
        <div className="flex items-center">
          <div className="h-12 flex items-center">
            <Image
              src="/images/nsight-financial-logo.png"
              alt="nSight Financial Logo"
              width={140}
              height={40}
              priority
              className="mt-1"
            />
          </div>
        </div>

{/* Main Navigation */}
      <nav className="bg-white border-b border-gray-200">
        <div className="flex items-center px-4">
          <button className="p-4">
            <div className="flex items-center justify-center w-6 h-6 text-gray-400">
              <div className="grid grid-cols-3 gap-0.5">
                {[...Array(9)].map((_, i) => (
                  <div key={i} className="w-1 h-1 bg-gray-400 rounded-full"></div>
                ))}
              </div>
            </div>
          </button>
          <div className="text-lg font-semibold text-gray-800 mr-8">nCino</div>
          <ul className="flex">
            <li>
              <Link
                href="/"
                className={`px-4 py-4 font-medium inline-block ${isActive("/") ? "text-blue-900 border-b-2 border-blue-900" : "text-gray-600 hover:text-gray-800"}`}
              >
                Home
              </Link>
            </li>
            <li>
              <Link
                href="/relationships"
                className={`px-4 py-4 font-medium inline-block ${isActive("/relationships") ? "text-blue-900 border-b-2 border-blue-900" : "text-gray-600 hover:text-gray-800"}`}
              >
                Relationships
              </Link>
            </li>
            <li>
              <Link
                href="/deals"
                className={`px-4 py-4 font-medium inline-block ${isActive("/deals") ? "text-blue-900 border-b-2 border-blue-900" : "text-gray-600 hover:text-gray-800"}`}
              >
                Deals
              </Link>
            </li>
            <li>
              <Link
                href="/loans"
                className={`px-4 py-4 font-medium inline-block ${isActive("/loans") ? "text-blue-900 border-b-2 border-blue-900" : "text-gray-600 hover:text-gray-800"}`}
              >
                Loans
              </Link>
            </li>
            <li>
              <Link
                href="/reports"
                className={`px-4 py-4 font-medium inline-block ${isActive("/reports") ? "text-blue-900 border-b-2 border-blue-900" : "text-gray-600 hover:text-gray-800"}`}
              >
                Reports
              </Link>
            </li>
          </ul>
        </div>
      </nav>
    </>
  )
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "geist": "^1.3.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.25",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "9.8.0",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "react-chartjs-2": "5.3.0",
    "chart.js": "4.5.0",
    "uuid": "13.0.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8.5",
    "tailwindcss": "^3.4.17",
    "typescript": "5.7.3"
  }
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-global-analysis-tab.tsx" isQuickEdit="true" isMerged="true"
"use client"

import React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Badge } from "@/components/ui/badge"
import { Plus, Printer, Save, ChevronDown, Check, Search, X, Building2 } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface LoanGlobalAnalysisTabProps {
  loan: any
  relationship: any
  deal: any | null
}

export function LoanGlobalAnalysisTab({ loan, relationship, deal }: LoanGlobalAnalysisTabProps) {
  const [entities, setEntities] = useState([
    {
      name: "Mountain View Medical",
      type: "Primary Borrower",
      statements: {
        "2022": "2022, CPA Audit, 12 Months",
        "2023": "2023, CPA Audit, 12 Months",
        "2024": "2024, CPA Audit, 12 Months",
        "2025": "2025 CPA Audit, 12 Months",
      },
      ownership: { "2022": "80%", "2023": "80%", "2024": "80%", "2025": "80%" },
      cashAvailable: { "2022": 100000, "2023": 100000, "2024": 100000, "2025": 100000 },
      totalDebtService: { "2022": 200000, "2023": 200000, "2024": 200000, "2025": 200000 },
      manualAdjustment: { "2022": 0, "2023": 0, "2024": 0, "2025": 0 },
      excessCashflow: { "2022": 800000, "2023": 800000, "2024": 800000, "2025": 800000 },
      cashflowCoverage: { "2022": "1.25", "2023": "1.25", "2024": "1.25", "2025": "1.25" },
    },
    {
      name: "Sarah Chen",
      type: "Co-Borrower",
      statements: {
        "2022": "2022, CPA Audit, 12 Months",
        "2023": "2023, CPA Audit, 12 Months",
        "2024": "2024, CPA Audit, 12 Months",
        "2025": "2025, CPA Audit, 12 Months",
      },
      ownership: { "2022": "80%", "2023": "80%", "2024": "80%", "2025": "80%" },
      cashAvailable: { "2022": 100000, "2023": 100000, "2024": 100000, "2025": 100000 },
      totalDebtService: { "2022": 200000, "2023": 200000, "2024": 200000, "2025": 200000 },
      manualAdjustment: { "2022": 0, "2023": 0, "2024": 0, "2025": 0 },
      excessCashflow: { "2022": 800000, "2023": 800000, "2024": 800000, "2025": 800000 },
      cashflowCoverage: { "2022": "40%", "2023": "40%", "2024": "40%", "2025": "40%" },
    },
    {
      name: "Pine Valley Tech",
      type: "Guarantor",
      statements: {
        "2022": "2022, CPA Audit, 12 Months",
        "2023": "2023, CPA Audit, 12 Months",
        "2024": "2024, CPA Audit, 12 Months",
        "2025": "2025, CPA Audit, 12 Months",
      },
      ownership: { "2022": "80%", "2023": "80%", "2024": "80%", "2025": "80%" },
      cashAvailable: { "2022": 100000, "2023": 100000, "2024": 100000, "2025": 100000 },
      totalDebtService: { "2022": 200000, "2023": 200000, "2024": 200000, "2025": 200000 },
      manualAdjustment: { "2022": 0, "2023": 0, "2024": 0, "2025": 0 },
      excessCashflow: { "2022": 800000, "2023": 800000, "2024": 800000, "2025": 800000 },
      cashflowCoverage: { "2022": "1.25", "2023": "1.25", "2024": "1.25", "2025": "1.25" },
    },
    {
      name: "123 Market St. Raleigh NC",
      type: "Property",
      statements: {
        "2022": "2022, NOI, 12 Months",
        "2023": "2023 NOI, 12 Months",
        "2024": "2024, NOI, 12 Months",
        "2025": "2025, NOI, 12 Months",
      },
      ownership: { "2022": "80%", "2023": "80%", "2024": "80%", "2025": "80%" },
      cashAvailable: { "2022": 100000, "2023": 100000, "2024": 100000, "2025": 100000 },
      totalDebtService: { "2022": 200000, "2023": 200000, "2024": 200000, "2025": 200000 },
      manualAdjustment: { "2022": 0, "2023": 0, "2024": 0, "2025": 0 },
      excessCashflow: { "2022": 800000, "2023": 800000, "2024": 800000, "2025": 800000 },
      cashflowCoverage: { "2022": "1.25", "2023": "1.25", "2024": "1.25", "2025": "1.25" },
    },
  ])

const [analysisType, setAnalysisType] = useState("Global Analysis")
  const [isAddEntityModalOpen, setIsAddEntityModalOpen] = useState(false)
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedEntities, setSelectedEntities] = useState<any[]>([])
  const [entityVisibility, setEntityVisibility] = useState({
    "Mountain View Medical": true,
    "Sarah Chen": true,
    "Pine Valley Tech": true,
    "123 Market St. Raleigh NC": true,
  })
  const [periodVisibility, setPeriodVisibility] = useState({
    Annual: true,
    "2025": true,
    "2024": true,
    "2023": true,
    "2022": false,
    Interim: false,
  })

const [lastSavedTime, setLastSavedTime] = useState<string | null>(null)
  const periods = ["2022", "2023", "2024", "2025"]

// Available entities for search
  const [availableEntities, setAvailableEntities] = useState([
    { name: "Valley Imaging LLC", type: "Non-related Entity" },
    { name: "Tech Solutions LLC", type: "Guarantor" },
    { name: "John Smith", type: "Co-Borrower" },
    { name: "ABC Holdings", type: "Guarantor" },
  ])

const statementOptions = [
    "None Selected",
    "2022, CPA Audit, 12 Months",
    "2023, CPA Audit, 12 Months",
    "2024, CPA Audit, 12 Months",
    "2025, CPA Audit, 12 Months",
    "2022, NOI, 12 Months",
    "2023, NOI, 12 Months",
    "2024, NOI, 12 Months",
    "2025, NOI, 12 Months",
  ]

const toggleEntityVisibility = (entityName: string) => {
    setEntityVisibility((prev) => ({
      ...prev,
      [entityName]: !prev[entityName],
    }))
  }

const togglePeriodVisibility = (period: string) => {
    setPeriodVisibility((prev) => ({
      ...prev,
      [period]: !prev[period],
    }))
  }

const handleSave = () => {
    const now = new Date()
    const formattedDate = now.toLocaleDateString("en-US", {
      month: "2-digit",
      day: "2-digit",
      year: "numeric",
    })
    const formattedTime = now
      .toLocaleTimeString("en-US", {
        hour: "numeric",
        minute: "2-digit",
        hour12: true,
      })
      .toLowerCase()
    setLastSavedTime(`${formattedDate} ${formattedTime}`)
  }

// Filter entities based on search query
  const filteredEntities = availableEntities.filter(
    (entity) =>
      (entity.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        entity.type.toLowerCase().includes(searchQuery.toLowerCase())) &&
      !selectedEntities.some((selected) => selected.name === entity.name),
  )

const handleSelectEntity = (entity: any) => {
    setSelectedEntities([...selectedEntities, entity])
    setSearchQuery("")
  }

const handleRemoveSelectedEntity = (entityToRemove: any) => {
    setSelectedEntities(selectedEntities.filter((entity) => entity.name !== entityToRemove.name))
  }

const handleAddEntities = () => {
    const newEntities = selectedEntities.map((entity) => ({
      name: entity.name,
      type: entity.type,
      statements: {
        "2022": "2022, CPA Audit, 12 Months",
        "2023": "2023, CPA Audit, 12 Months",
        "2024": "2024, CPA Audit, 12 Months",
        "2025": "2025, CPA Audit, 12 Months",
      },
      ownership: { "2022": "80%", "2023": "80%", "2024": "80%", "2025": "80%" },
      cashAvailable: { "2022": 100000, "2023": 100000, "2024": 100000, "2025": 100000 },
      totalDebtService: { "2022": 200000, "2023": 200000, "2024": 200000, "2025": 200000 },
      manualAdjustment: { "2022": 0, "2023": 0, "2024": 0, "2025": 0 },
      excessCashflow: { "2022": 800000, "2023": 800000, "2024": 800000, "2025": 800000 },
      cashflowCoverage: { "2022": "1.25", "2023": "1.25", "2024": "1.25", "2025": "1.25" },
    }))

setEntities([...entities, ...newEntities])

const newVisibility = { ...entityVisibility }
    selectedEntities.forEach((entity) => {
      newVisibility[entity.name] = true
    })
    setEntityVisibility(newVisibility)

setSelectedEntities([])
    setSearchQuery("")
    setIsAddEntityModalOpen(false)
  }

const handleCancelAddEntity = () => {
    setSelectedEntities([])
    setSearchQuery("")
    setIsAddEntityModalOpen(false)
  }

const entityGroups = {
    Borrowers: entities.filter((e) => e.type === "Primary Borrower" || e.type === "Co-Borrower"),
    Guarantors: entities.filter((e) => e.type === "Guarantor"),
    "Real Estate": entities.filter((e) => e.type === "Property"),
    "Non-Related Entities": entities.filter((e) => e.type === "Non-related Entity"),
  }

const [groupVisibility, setGroupVisibility] = useState({
    Borrowers: true,
    Guarantors: true,
    "Real Estate": true,
    "Non-Related Entities": true,
  })

const toggleGroupVisibility = (groupName: string) => {
    const newGroupVisibility = !groupVisibility[groupName]
    setGroupVisibility((prev) => ({
      ...prev,
      [groupName]: newGroupVisibility,
    }))

// Update all entities in this group
    const groupEntities = entityGroups[groupName]
    const updatedEntityVisibility = { ...entityVisibility }
    groupEntities.forEach((entity) => {
      updatedEntityVisibility[entity.name] = newGroupVisibility
    })
    setEntityVisibility(updatedEntityVisibility)
  }

return (
    <div className="bg-white">
      {/* Analysis View Header */}
      <div className="mb-6">
        <h2 className="text-lg font-medium text-gray-900 mb-4">Analysis View</h2>

{/* Controls Row */}
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Select value={analysisType} onValueChange={setAnalysisType}>
              <SelectTrigger className="w-48 h-9 bg-white border-gray-300">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="Global Analysis">Global Analysis</SelectItem>
                <SelectItem value="Global Leverage">Global Leverage</SelectItem>
              </SelectContent>
            </Select>

<Button
              variant="outline"
              size="sm"
              onClick={() => setIsAddEntityModalOpen(true)}
              className="h-9 px-4 bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
            >
              <Plus className="h-4 w-4 mr-2" />
              Add Entity
            </Button>

<Popover>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-9 px-4 bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
                >
                  Entity Visibility <ChevronDown className="h-4 w-4 ml-2" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-80 p-0" align="start">
                <div className="py-2">
                  {Object.entries(entityGroups).map(
                    ([groupName, groupEntities]) =>
                      groupEntities.length > 0 && (
                        <div key={groupName}>
                          {/* Group Header */}
                          <button
                            onClick={() => toggleGroupVisibility(groupName)}
                            className="w-full flex items-center px-4 py-3 text-left hover:bg-gray-50 transition-colors border-b border-gray-100"
                          >
                            <div className="flex items-center justify-center w-5 h-5 mr-3 rounded bg-[rgba(16,54,86,1)] flex-shrink-0">
                              {groupVisibility[groupName] && <Check className="h-3 w-3 text-white" />}
                            </div>
                            <span className="text-base font-semibold text-gray-900">{groupName}</span>
                          </button>

{/* Group Entities */}
                          {groupEntities.map((entity) => (
                            <button
                              key={entity.name}
                              onClick={() => toggleEntityVisibility(entity.name)}
                              className="w-full flex items-center px-4 py-3 pl-12 text-left hover:bg-gray-50 transition-colors"
                            >
                              <div className="flex items-center justify-center w-5 h-5 mr-3 rounded bg-[rgba(16,54,86,1)] flex-shrink-0">
                                {entityVisibility[entity.name] && <Check className="h-3 w-3 text-white" />}
                              </div>
                              <span className="text-base text-gray-900">
                                {entity.name} ({entity.type})
                              </span>
                            </button>
                          ))}
                        </div>
                      ),
                  )}
                </div>
              </PopoverContent>
            </Popover>

<Popover>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  size="sm"
                  className="h-9 px-4 bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
                >
                  Period Visibility <ChevronDown className="h-4 w-4 ml-2" />
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-48 p-0" align="start">
                <div className="py-2">
                  {["Annual", "2025", "2024", "2023", "2022", "Interim"].map((period) => (
                    <button
                      key={period}
                      onClick={() => togglePeriodVisibility(period)}
                      className="w-full flex items-center px-4 py-3 text-left hover:bg-gray-50 transition-colors"
                    >
                      <div className="flex items-center justify-center w-5 h-5 mr-3 rounded bg-[rgba(16,54,86,1)] flex-shrink-0">
                        {periodVisibility[period] && <Check className="h-3 w-3 text-white" />}
                      </div>
                      <span className="text-base text-gray-900">{period}</span>
                    </button>
                  ))}

{/* Expandable sections with chevrons */}
                  {["2025", "2024", "2023"].map((period) => (
                    <button
                      key={`expand-${period}`}
                      className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 transition-colors"
                    >
                      <div className="flex items-center">
                        <div className="flex items-center justify-center w-5 h-5 mr-3 rounded border-2 border-gray-300 flex-shrink-0">
                          {/* Empty checkbox for expandable sections */}
                        </div>
                        <span className="text-base text-gray-900">{period}</span>
                      </div>
                      <ChevronDown className="h-4 w-4 text-gray-400 rotate-270" />
                    </button>
                  ))}
                </div>
              </PopoverContent>
            </Popover>
          </div>

<div className="flex items-center gap-2">
            {lastSavedTime && <span className="text-sm text-gray-600 mr-4">Autosaved {lastSavedTime}</span>}
            <Button
              variant="outline"
              size="sm"
              className="h-9 px-4 bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
            >
              <Printer className="h-4 w-4 mr-2" />
              Print
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={handleSave}
              className="h-9 px-4 bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
            >
              <Save className="h-4 w-4 mr-2" />
              Save
            </Button>
          </div>
        </div>
      </div>

{/* Financial Analysis Table */}
      <div className="bg-white border border-gray-200 rounded-lg overflow-hidden">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="bg-gray-100 border-b border-gray-200">
                <th className="text-left py-2 px-4 font-medium text-gray-900 w-80 bg-primary-foreground"></th>
                <th
                  className="py-2 px-4 font-medium text-gray-900 bg-primary-foreground text-left"
                  colSpan={periods.filter((period) => periodVisibility[period]).length}
                >
                  Annual
                </th>
              </tr>
              <tr className="bg-gray-50 border-b border-gray-200">
                <th className="text-left py-3 px-4 font-medium text-gray-900 w-80"></th>
                {periods
                  .filter((period) => periodVisibility[period])
                  .map((period) => (
                    <th key={period} className="text-center py-3 px-4 font-medium text-gray-900 min-w-32">
                      {period}
                    </th>
                  ))}
              </tr>
            </thead>
            <tbody>
              {Object.entries(entityGroups).map(
                ([groupName, groupEntities]) =>
                  groupVisibility[groupName] && (
                    <React.Fragment key={groupName}>
                      {groupEntities.map((entity, entityIndex) => (
                        <React.Fragment key={entity.name}>
                          {/* Entity Header Row */}
                          <tr className="border-b border-gray-200">
                            <td className="py-3 px-4 font-semibold text-gray-900 bg-gray-50">
                              {entity.name} ({entity.type})
                            </td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-3 px-4 bg-background">
                                  <Select
                                    value={entity.statements[period]}
                                    onValueChange={(value) => {
                                      const updatedEntities = entities.map((e) =>
                                        e.name === entity.name
                                          ? { ...e, statements: { ...e.statements, [period]: value } }
                                          : e,
                                      )
                                      setEntities(updatedEntities)
                                    }}
                                  >
                                    <SelectTrigger className="w-full h-8 text-xs bg-white border-gray-300">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      {statementOptions.map((option) => (
                                        <SelectItem key={option} value={option} className="text-xs">
                                          {option}
                                        </SelectItem>
                                      ))}
                                    </SelectContent>
                                  </Select>
                                </td>
                              ))}
                          </tr>

{/* Ownership % Row */}
                          <tr className="border-b border-gray-100">
                            <td className="py-2 px-4 pl-8 text-sm font-medium text-gray-900 bg-gray-50">Ownership %</td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-2 px-4 text-center text-sm">
                                  {entity.ownership[period]}
                                </td>
                              ))}
                          </tr>

{/* Cash Available to Service Debt Row */}
                          <tr className="border-b border-gray-100">
                            <td className="py-2 px-4 pl-8 text-sm font-medium text-gray-900 bg-gray-50">
                              Cash Available to Service Debt (NOI)
                            </td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-2 px-4 text-center text-sm">
                                  {entity.cashAvailable[period]?.toLocaleString() || "--"}
                                </td>
                              ))}
                          </tr>

{/* Total Debt Service Row */}
                          <tr className="border-b border-gray-100">
                            <td className="py-2 px-4 pl-8 text-sm font-medium text-gray-900 bg-gray-50">
                              Total Debt Service
                            </td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-2 px-4 text-center text-sm">
                                  {entity.totalDebtService[period]?.toLocaleString() || "--"}
                                </td>
                              ))}
                          </tr>

{/* Manual Adjustment Row */}
                          <tr className="border-b border-gray-100">
                            <td className="py-2 px-4 pl-8 text-sm font-medium text-gray-900 bg-gray-50">
                              Manual Adjustment
                            </td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-2 px-4 text-center text-sm">
                                  --
                                </td>
                              ))}
                          </tr>

{/* Excess Cashflow Row */}
                          <tr className="border-b border-gray-100">
                            <td className="py-2 px-4 pl-8 text-sm font-medium text-gray-900 bg-gray-50">
                              Excess Cashflow
                            </td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-2 px-4 text-center text-sm">
                                  {entity.excessCashflow[period]?.toLocaleString() || "--"}
                                </td>
                              ))}
                          </tr>

{/* Cashflow Coverage Row */}
                          <tr className="border-b border-gray-200">
                            <td className="py-2 px-4 pl-8 text-sm font-medium text-gray-900 bg-gray-50">
                              Cashflow Coverage {entity.type === "Co-Borrower" ? "(DTI)" : ""}
                            </td>
                            {periods
                              .filter((period) => periodVisibility[period])
                              .map((period) => (
                                <td key={period} className="py-2 px-4 text-center text-sm">
                                  {entity.cashflowCoverage[period]}
                                </td>
                              ))}
                          </tr>
                        </React.Fragment>
                      ))}
                    </React.Fragment>
                  ),
              )}

{/* Total Combined Cash Row */}
              <tr className="border-b border-gray-100 bg-blue-50">
                <td className="py-2 px-4 text-sm font-semibold text-gray-900">Total Combined Cash</td>
                {periods
                  .filter((period) => periodVisibility[period])
                  .map((period) => (
                    <td key={period} className="py-2 px-4 text-center text-sm font-medium">
                      1,600,000
                    </td>
                  ))}
              </tr>

{/* Total Combined Debt Row */}
              <tr className="border-b border-gray-100 bg-blue-50">
                <td className="py-2 px-4 text-sm font-semibold text-gray-900">Total Combined Debt</td>
                {periods
                  .filter((period) => periodVisibility[period])
                  .map((period) => (
                    <td key={period} className="py-2 px-4 text-center text-sm font-medium">
                      400,000
                    </td>
                  ))}
              </tr>

{/* Global Excess Cash Flow Row */}
              <tr className="border-b border-gray-100 bg-blue-50">
                <td className="py-2 px-4 text-sm font-semibold text-gray-900">Global Excess Cash Flow</td>
                {periods
                  .filter((period) => periodVisibility[period])
                  .map((period) => (
                    <td key={period} className="py-2 px-4 text-center text-sm font-medium">
                      1,200,000
                    </td>
                  ))}
              </tr>

{/* Global Cashflow Coverage (DSCR) Row */}
              <tr className="border-b border-gray-100 bg-blue-50">
                <td className="py-2 px-4 text-sm font-semibold text-gray-900">Global Cashflow Coverage (DSCR)</td>
                {periods
                  .filter((period) => periodVisibility[period])
                  .map((period) => (
                    <td key={period} className="py-2 px-4 text-center text-sm font-medium">
                      1.25
                    </td>
                  ))}
              </tr>

{/* Global Coverage (DTI) Row */}
              <tr className="bg-blue-50">
                <td className="py-2 px-4 text-sm font-semibold text-gray-900">Global Coverage (DTI)</td>
                {periods
                  .filter((period) => periodVisibility[period])
                  .map((period) => (
                    <td key={period} className="py-2 px-4 text-center text-sm font-medium">
                      40%
                    </td>
                  ))}
              </tr>
            </tbody>
          </table>
        </div>
      </div>

{/* Add Entity Modal */}
      <Dialog open={isAddEntityModalOpen} onOpenChange={setIsAddEntityModalOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle className="text-center text-xl font-normal">Add Entities</DialogTitle>
          </DialogHeader>
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <label htmlFor="entity-search" className="text-sm font-medium">
                Entity
              </label>
              <div className="relative">
                <Input
                  id="entity-search"
                  placeholder=""
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  className="pr-10"
                />
                <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
              </div>

{/* Selected Entities as Chips */}
              {selectedEntities.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-3">
                  {selectedEntities.map((entity) => (
                    <Badge
                      key={entity.name}
                      variant="default"
                      className="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 flex items-center gap-2"
                    >
                      <Building2 className="h-3 w-3" />
                      {entity.name}
                      <button
                        onClick={() => handleRemoveSelectedEntity(entity)}
                        className="ml-1 hover:bg-blue-800 rounded-full p-0.5"
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                </div>
              )}

{/* Search Results */}
              {searchQuery && (
                <div className="border rounded-md max-h-40 overflow-y-auto">
                  {filteredEntities.length > 0 ? (
                    filteredEntities.map((entity) => (
                      <button
                        key={entity.name}
                        onClick={() => handleSelectEntity(entity)}
                        className="w-full text-left px-3 py-2 hover:bg-gray-50 border-b last:border-b-0"
                      >
                        <div className="font-medium">{entity.name}</div>
                      </button>
                    ))
                  ) : (
                    <div className="px-3 py-2 text-gray-500">No entities found</div>
                  )}
                </div>
              )}
            </div>
          </div>
          <DialogFooter className="flex justify-end gap-2">
            <Button variant="outline" onClick={handleCancelAddEntity}>
              Cancel
            </Button>
            <Button onClick={handleAddEntities} disabled={selectedEntities.length === 0}>
              Save
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescript:file="scripts/add-summit-property-group.ts" isMerged="true"
// Script to add Summit Property Group relationship
import { addRelationship, type Relationship } from "@/lib/relationship-store"

// Create the Summit Property Group relationship
const summitPropertyGroup: Relationship = {
  id: "summit-property-group-001",
  name: "Summit Property Group",
  type: "Business",
  status: "Customer", // Making it a customer so it appears in Active tab
  riskStatus: "Low Risk",
  caseOwner: "Whitney Wright",
  lastUpdated: new Date().toLocaleDateString(),
  dateCreated: new Date().toLocaleDateString(),
  industry: "Real Estate",
  yearEstablished: "2018",
  employeeCount: "25-50",
  location: "Charlotte, NC",
  primaryContact: "Michael Thompson",
  primaryContactEmail: "mthompson@summitpropertygroup.com",
  primaryContactPhone: "(704) 555-0123",
  productPackageName: "Commercial Real Estate Package",
  totalExposure: "$2,500,000",
  riskGrade: "A-",
  annualRevenue: "$5,200,000",
  totalDeposits: "$850,000",
  ficoScore: "N/A",
  nextMeetingDate: "2025-01-15",
  activeProducts: ["Commercial Real Estate Package", "Business Banking"],
  hasActiveProducts: true,
  onboardingComplete: true,
  verificationStatus: "Verified",
}

// Add the relationship to the store
console.log("Adding Summit Property Group to relationships...")
addRelationship(summitPropertyGroup)
console.log("Summit Property Group has been successfully added!")
console.log("- Added to Active relationships tab")
console.log("- Added to Onboarding tab with Completed status")
console.log("- Relationship ID:", summitPropertyGroup.id)
[V0_FILE]typescript:file="lib/relationship-store.ts" isQuickEdit="true" isMerged="true"
// Create a relationships store using localStorage for persistence
import { initialRelationships } from "@/app/data/relationships"
import { initialOnboardingData } from "@/app/data/onboarding"

// Define the Relationship type based on the initialRelationships structure
export type Relationship = {
  id: string
  name: string
  type: "Business" | "Individual"
  status: "Prospect" | "Customer" | "Lead" | "Former Customer"
  riskStatus: string
  caseOwner: string
  lastUpdated: string
  dateCreated: string
  industry: string
  yearEstablished: string
  employeeCount: string
  location: string
  primaryContact: string
  primaryContactEmail: string
  primaryContactPhone: string
  productPackageName: string
  totalExposure: string
  riskGrade: string
  annualRevenue: string
  totalDeposits: string
  ficoScore: string
  nextMeetingDate: string
  occupation?: string
  dateOfBirth?: string
  activeProducts?: string[]
  hasActiveProducts?: boolean // Flag to indicate if relationship has active products
  onboardingComplete?: boolean // Flag to indicate if onboarding is complete
  parentRelationshipId?: string
  ownershipPercentage?: string
  relationshipRole?: string
  verificationStatus?: "Pending" | "Verified" | "Review" | "Rejected"
  relatedParties?: RelatedPartyInfo[] // Array of related parties
}

// Add the RelatedPartyInfo type after the Relationship type
export type RelatedPartyInfo = {
  id: string
  name: string
  role: string
  ownershipPercentage: number
  type: "Business" | "Individual"
}

// Define the OnboardingItem type based on the initialOnboardingData structure
export type OnboardingItem = {
  id: string
  name: string
  status: "Not Started" | "In Progress" | "Completed"
  type: string
  progress: number
  startDate: string
  owner: string
  verification: "Pending" | "Waiting" | "Review" | "Verified" | "Rejected"
  image?: string
}

// Get all relationships (including newly created ones)
export function getRelationships(): Relationship[] {
  if (typeof window === "undefined") {
    return initialRelationships.map((rel) => ({
      ...rel,
      hasActiveProducts: rel.productPackageName !== "None" && rel.productPackageName !== "",
      onboardingComplete: rel.status === "Customer",
      activeProducts: rel.productPackageName ? [rel.productPackageName] : [],
    }))
  }

const storedRelationships = localStorage.getItem("relationships")
  if (!storedRelationships) {
    // First time - initialize with default data
    const enhancedRelationships = initialRelationships.map((rel) => ({
      ...rel,
      hasActiveProducts: rel.productPackageName !== "None" && rel.productPackageName !== "",
      onboardingComplete: rel.status === "Customer",
      activeProducts: rel.productPackageName ? [rel.productPackageName] : [],
    }))
    localStorage.setItem("relationships", JSON.stringify(enhancedRelationships))
    return enhancedRelationships
  }

try {
    return JSON.parse(storedRelationships)
  } catch (error) {
    console.error("Failed to parse stored relationships:", error)
    return initialRelationships.map((rel) => ({
      ...rel,
      hasActiveProducts: rel.productPackageName !== "None" && rel.productPackageName !== "",
      onboardingComplete: rel.status === "Customer",
      activeProducts: rel.productPackageName ? [rel.productPackageName] : [],
    }))
  }
}

// Get all onboarding items (including newly created ones)
export function getOnboardingItems(): OnboardingItem[] {
  if (typeof window === "undefined") {
    return initialOnboardingData
  }

const storedOnboardingItems = localStorage.getItem("onboardingItems")
  if (!storedOnboardingItems) {
    // First time - initialize with default data
    localStorage.setItem("onboardingItems", JSON.stringify(initialOnboardingData))
    return initialOnboardingData
  }

try {
    return JSON.parse(storedOnboardingItems)
  } catch (error) {
    console.error("Failed to parse stored onboarding items:", error)
    return initialOnboardingData
  }
}

// Get a single relationship by ID
export function getRelationshipById(id: string): Relationship | undefined {
  if (typeof window === "undefined") {
    // When running on the server, return the relationship from the initial data
    const relationship = initialRelationships.find((relationship) => relationship.id === id)
    if (relationship) {
      return {
        ...relationship,
        hasActiveProducts: relationship.productPackageName !== "None" && relationship.productPackageName !== "",
        onboardingComplete: relationship.status === "Customer",
        activeProducts: relationship.productPackageName ? [relationship.productPackageName] : [],
      }
    }
    return undefined
  }

try {
    const relationships = getRelationships()
    const relationship = relationships.find((relationship) => relationship.id === id)

if (!relationship) {
      console.error(`Relationship with ID ${id} not found in the data store`)
    }

return relationship
  } catch (error) {
    console.error(`Error fetching relationship with ID ${id}:`, error)
    return undefined
  }
}

// Add a new relationship
export function addRelationship(relationship: Relationship): void {
  if (typeof window === "undefined") return

// Ensure the new relationship has the required flags
  const enhancedRelationship = {
    ...relationship,
    hasActiveProducts: false, // New relationships start with no active products
    onboardingComplete: false, // New relationships start with onboarding incomplete
    activeProducts: [],
    verificationStatus: "Pending",
  }

// Add to relationships store
  const relationships = getRelationships()
  const updatedRelationships = [enhancedRelationship, ...relationships]
  localStorage.setItem("relationships", JSON.stringify(updatedRelationships))

// Also add to onboarding items
  const onboardingItems = getOnboardingItems()
  const newOnboardingItem: OnboardingItem = {
    id: relationship.id,
    name: relationship.name,
    status: "Not Started",
    type: relationship.type,
    progress: 0,
    startDate: new Date().toLocaleDateString(),
    owner: relationship.caseOwner,
    verification: "Pending",
  }
  const updatedOnboardingItems = [newOnboardingItem, ...onboardingItems]
  localStorage.setItem("onboardingItems", JSON.stringify(updatedOnboardingItems))
}

export function addSummitPropertyGroup(): void {
  if (typeof window === "undefined") return

const summitPropertyGroup: Relationship = {
    id: "summit-property-group-001",
    name: "Summit Property Group",
    type: "Business",
    status: "Customer",
    riskStatus: "Low Risk",
    caseOwner: "Whitney Wright",
    lastUpdated: "09/22/2024 2:15 PM",
    dateCreated: "09/22/2024",
    industry: "Real Estate",
    yearEstablished: "2018",
    employeeCount: "25-50",
    location: "Denver, CO",
    primaryContact: "Michael Thompson",
    primaryContactEmail: "mthompson@summitpropertygroup.com",
    primaryContactPhone: "(303) 555-0199",
    productPackageName: "Commercial Real Estate Package",
    totalExposure: "$2,500,000",
    riskGrade: "A-",
    annualRevenue: "$15,000,000",
    totalDeposits: "$850,000",
    ficoScore: "N/A",
    nextMeetingDate: "10/15/2024",
    activeProducts: ["Commercial Real Estate Package", "Business Banking"],
    hasActiveProducts: true,
    onboardingComplete: true,
    verificationStatus: "Verified",
  }

// Check if Summit Property Group already exists
  const relationships = getRelationships()
  const existingSummit = relationships.find((r) => r.id === summitPropertyGroup.id)

if (!existingSummit) {
    // Add to relationships store
    const updatedRelationships = [summitPropertyGroup, ...relationships]
    localStorage.setItem("relationships", JSON.stringify(updatedRelationships))

// Also add to onboarding items as completed
    const onboardingItems = getOnboardingItems()
    const summitOnboardingItem: OnboardingItem = {
      id: summitPropertyGroup.id,
      name: summitPropertyGroup.name,
      status: "Completed",
      type: summitPropertyGroup.type,
      progress: 100,
      startDate: "09/22/2024",
      owner: summitPropertyGroup.caseOwner,
      verification: "Verified",
    }
    const updatedOnboardingItems = [summitOnboardingItem, ...onboardingItems]
    localStorage.setItem("onboardingItems", JSON.stringify(updatedOnboardingItems))
  }
}

// Update an existing relationship
export function updateRelationship(id: string, data: any) {
  const relationships = getRelationships()
  const index = relationships.findIndex((r) => r.id === id)

if (index !== -1) {
    relationships[index] = {
      ...relationships[index],
      ...data,
      updatedAt: new Date().toISOString(),
    }

localStorage.setItem("relationships", JSON.stringify(relationships))
    return relationships[index]
  }

return null
}

// Update an existing relationship
// export function updateRelationship(id: string, updates: Partial<Relationship>): void {
//   if (typeof window === "undefined") return

//   const relationships = getRelationships()
//   const relationship = relationships.find((r) => r.id === id)

//   if (!relationship) return

//   // Check if we're adding active products for the first time
//   const isAddingFirstProduct =
//     !relationship.hasActiveProducts &&
//     (updates.hasActiveProducts || (updates.activeProducts && updates.activeProducts.length > 0))

//   // Check if we're completing onboarding
//   const isCompletingOnboarding = !relationship.onboardingComplete && updates.onboardingComplete

//   const updatedRelationships = relationships.map((relationship) =>
//     relationship.id === id ? { ...relationship, ...updates } : relationship,
//   )
//   localStorage.setItem("relationships", JSON.stringify(updatedRelationships))

//   // Also update the corresponding onboarding item if it exists
//   const onboardingItems = getOnboardingItems()
//   const onboardingItem = onboardingItems.find((item) => item.id === id)

//   if (onboardingItem) {
//     let updatedOnboardingItems = onboardingItems

//     // If we're adding first product or completing onboarding, mark onboarding as completed
//     if (isAddingFirstProduct || isCompletingOnboarding) {
//       updatedOnboardingItems = onboardingItems.map((item) =>
//         item.id === id
//           ? {
//               ...item,
//               name: updates.name || item.name,
//               type: updates.type || item.type,
//               owner: updates.caseOwner || item.owner,
//               status: "Completed",
//               progress: 100,
//               verification: updates.verificationStatus || item.verification,
//             }
//           : item,
//       )
//     } else {
//       updatedOnboardingItems = onboardingItems.map((item) =>
//         item.id === id
//           ? {
//               ...item,
//               name: updates.name || item.name,
//               type: updates.type || item.type,
//               owner: updates.caseOwner || item.owner,
//               verification: updates.verificationStatus || item.verification,
//             }
//           : item,
//       )
//     }

//     localStorage.setItem("onboardingItems", JSON.stringify(updatedOnboardingItems))
//   }
// }

// Update an onboarding item
export function updateOnboardingItem(id: string, updates: Partial<OnboardingItem>): void {
  if (typeof window === "undefined") return

const onboardingItems = getOnboardingItems()
  const updatedOnboardingItems = onboardingItems.map((item) => (item.id === id ? { ...item, ...updates } : item))
  localStorage.setItem("onboardingItems", JSON.stringify(updatedOnboardingItems))

// If onboarding is completed, also update the relationship
  if (updates.status === "Completed") {
    const relationships = getRelationships()
    const relationship = relationships.find((r) => r.id === id)

if (relationship) {
      updateRelationship(id, {
        onboardingComplete: true,
        verificationStatus: (updates.verification as any) || relationship.verificationStatus,
      })
    }
  }
}

// Add a product to a relationship
export function addProductToRelationship(id: string, productName: string): void {
  if (typeof window === "undefined") return

const relationships = getRelationships()
  const relationship = relationships.find((r) => r.id === id)

if (!relationship) return

const activeProducts = [...(relationship.activeProducts || []), productName]

updateRelationship(id, {
    activeProducts,
    hasActiveProducts: true,
    onboardingComplete: true,
    status: "Customer", // Upgrade to customer when adding a product
  })
}

// Complete onboarding for a relationship
export function completeOnboarding(id: string): void {
  if (typeof window === "undefined") return

updateRelationship(id, {
    onboardingComplete: true,
  })

updateOnboardingItem(id, {
    status: "Completed",
    progress: 100,
  })
}

// Delete a relationship
export function deleteRelationship(id: string): void {
  if (typeof window === "undefined") return

// Remove from relationships store
  const relationships = getRelationships()
  const updatedRelationships = relationships.filter((r) => r.id !== id)
  localStorage.setItem("relationships", JSON.stringify(updatedRelationships))

// Also remove from onboarding items
  const onboardingItems = getOnboardingItems()
  const updatedOnboardingItems = onboardingItems.filter((item) => item.id !== id)
  localStorage.setItem("onboardingItems", JSON.stringify(updatedOnboardingItems))
}
[V0_FILE]typescriptreact:file="app/relationships/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useMemo } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import {
  Search,
  Users,
  MoreVertical,
  Plus,
  Filter,
  X,
  Building,
  AlertTriangle,
  UserCheck,
  Package,
  CheckCircle,
  Trash2,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import PageHeader from "@/app/components/page-header"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Badge } from "@/components/ui/badge"
import { DataTable, type ColumnDef } from "@/app/components/data-table"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

// Add the import for StatusBadge at the top of the file with other imports
import { StatusBadge } from "@/app/components/status-badge"

// Import the relationship store functions
import {
  getRelationships,
  getOnboardingItems,
  deleteRelationship,
  addSummitPropertyGroup,
} from "@/lib/relationship-store"

type Relationship = ReturnType<typeof getRelationships>[0]
type OnboardingItem = ReturnType<typeof getOnboardingItems>[0]

// Get unique values for filter options
const getUniqueValues = (field: keyof Relationship, relationships: Relationship[]) => {
  const values = relationships.map((item) => item[field])
  return [...new Set(values)]
}

// Helper function to get profile image URL based on relationship
const getProfileImage = (relationship: Relationship) => {
  // Special case for Kristin Watson - always use a woman's photo
  if (relationship.name === "Kristin Watson") {
    return "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
  }

if (relationship.type === "Business") {
    // For businesses, use building/company themed images
    const businessImages = [
      "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y29ycG9yYXRlJTIwYnVpbGRpbmd8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1560179707-b413da4baf72?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8Y29tcGFueXxlbnwwfHwwfHx8MA%3D%3D",
      "https://images.unsplash.com/photo-1556761175-b413da4baf72?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGNvbXBhbnl8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1554469384-e58fac16e23a?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGNvbXBhbnl8ZW58MHx8MHx8fDA%3D",
    ]

// Use the ID to consistently select the same image for the same business
    const index = relationship.id.charCodeAt(0) % businessImages.length
    return businessImages[index]
  } else {
    // For individuals, use person-themed images
    // Separate male and female images
    const femaleImages = [
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D",
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
    ]

const maleImages = [
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
    ]

// Simple gender detection based on common names
    // This is a simplified approach - in a real app, you'd have gender data
    const femaleNames = [
      "Kristin",
      "Darlene",
      "Sarah",
      "Emma",
      "Olivia",
      "Ava",
      "Isabella",
      "Sophia",
      "Charlotte",
      "Amelia",
    ]
    const firstName = relationship.name.split(" ")[0]
    const isFemale = femaleNames.some((name) => firstName.includes(name))

const imageArray = isFemale ? femaleImages : maleImages
    const index = relationship.id.charCodeAt(0) % imageArray.length
    return imageArray[index]
  }
}

// Helper function to get initials from name
const getInitials = (name: string) => {
  return name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .substring(0, 2)
    .toUpperCase()
}

// Helper function to get a consistent color based on ID
const getAvatarColor = (id: string) => {
  const colors = [
    "bg-blue-500",
    "bg-green-500",
    "bg-purple-500",
    "bg-yellow-500",
    "bg-pink-500",
    "bg-indigo-500",
    "bg-red-500",
    "bg-teal-500",
  ]

// Use the last character of the ID to determine the color
  const lastChar = id.charCodeAt(id.length - 1)
  return colors[lastChar % colors.length]
}

export default function RelationshipsPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const defaultTab = searchParams.get("tab") || "active"

const [activeTab, setActiveTab] = useState(defaultTab)
  const [relationships, setRelationships] = useState<Relationship[]>([])
  const [filteredRelationships, setFilteredRelationships] = useState<Relationship[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [onboardingSearchTerm, setOnboardingSearchTerm] = useState("")
  const [onboardingData, setOnboardingData] = useState<OnboardingItem[]>([])
  const [filteredOnboardingData, setFilteredOnboardingData] = useState<OnboardingItem[]>([])
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [itemToDelete, setItemToDelete] = useState<{ id: string; name: string } | null>(null)

// Load data from store
  useEffect(() => {
    addSummitPropertyGroup()
    setRelationships(getRelationships())
    setOnboardingData(getOnboardingItems())
  }, [])

// Filter relationships based on active products for the Active tab
  useEffect(() => {
    if (relationships.length > 0) {
      // For Active tab, show relationships with active products
      const activeRelationships = relationships.filter((r) => r.hasActiveProducts)
      setFilteredRelationships(activeRelationships)
    }
  }, [relationships])

// Filter states
  const [filters, setFilters] = useState({
    riskStatus: "",
    status: "",
    type: "",
    caseOwner: "",
  })

// Get unique values for filter dropdowns
  const riskStatusOptions = getUniqueValues("riskStatus", relationships)
  const statusOptions = getUniqueValues("status", relationships)
  const typeOptions = getUniqueValues("type", relationships)
  const caseOwnerOptions = getUniqueValues("caseOwner", relationships)

// Count active filters
  const activeFilterCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)

// Calculate relationship statistics
  const relationshipStats = useMemo(() => {
    // Only count relationships with active products for the Active tab stats
    const activeRelationships = relationships.filter((r) => r.hasActiveProducts)

const customerCount = activeRelationships.filter((r) => r.status === "Customer").length
    const prospectCount = activeRelationships.filter((r) => r.status === "Prospect").length
    const businessCount = activeRelationships.filter((r) => r.type === "Business").length
    const individualCount = activeRelationships.filter((r) => r.type === "Individual").length
    const highRiskCount = activeRelationships.filter(
      (r) => r.riskStatus === "High Risk" || r.riskStatus === "Very High Risk",
    ).length

return {
      total: activeRelationships.length,
      customers: customerCount,
      prospects: prospectCount,
      business: businessCount,
      individual: individualCount,
      highRisk: highRiskCount,
    }
  }, [relationships])

// Calculate onboarding statistics
  const onboardingStats = useMemo(() => {
    const completedCount = onboardingData.filter((item) => item.status === "Completed").length
    const inProgressCount = onboardingData.filter((item) => item.status === "In Progress").length
    const notStartedCount = onboardingData.filter((item) => item.status === "Not Started").length

return {
      completed: completedCount,
      inProgress: inProgressCount,
      notStarted: notStartedCount,
      total: onboardingData.length,
    }
  }, [onboardingData])

const handleNewRelationship = () => {
    // Navigate to the new relationship page
    router.push(`/relationships/new`)
  }

// Handle filter changes
  const handleFilterChange = (field: string, value: string) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Clear all filters
  const clearFilters = () => {
    setFilters({
      riskStatus: "",
      status: "",
      type: "",
      caseOwner: "",
    })
    setSearchTerm("")
  }

// Navigate to relationship detail
  const handleRelationshipClick = (relationship: Relationship) => {
    router.push(`/relationships/${relationship.id}`)
  }

// Handle tab change
  const handleTabChange = (value: string) => {
    setActiveTab(value)
    router.push(`/relationships?tab=${value}`, { scroll: false })
  }

// Handle delete confirmation
  const handleDeleteConfirm = () => {
    if (itemToDelete) {
      deleteRelationship(itemToDelete.id)
      // Refresh the relationships and onboarding data
      setRelationships(getRelationships())
      setOnboardingData(getOnboardingItems())
      setDeleteDialogOpen(false)
      setItemToDelete(null)
    }
  }

// Apply filters for active relationships
  useEffect(() => {
    // Start with relationships that have active products
    let result = relationships.filter((r) => r.hasActiveProducts)

// Apply search term filter
    if (searchTerm) {
      result = result.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()))
    }

setFilteredRelationships(result)
  }, [searchTerm, filters, relationships])

// Apply filters for onboarding data
  useEffect(() => {
    let result = [...onboardingData]

// Apply search term filter
    if (onboardingSearchTerm) {
      result = result.filter(
        (item) =>
          item.name.toLowerCase().includes(onboardingSearchTerm.toLowerCase()) ||
          item.owner.toLowerCase().includes(onboardingSearchTerm.toLowerCase()),
      )
    }

setFilteredOnboardingData(result)
  }, [onboardingSearchTerm, onboardingData])

const columns: ColumnDef<Relationship>[] = [
    {
      id: "name",
      header: "Relationship Name",
      accessorKey: "name",
      className: "font-bold text-blue-900 hover:underline cursor-pointer",
      cell: (item) => (
        <div className="flex items-center gap-2">
          <Avatar className="h-8 w-8">
            <AvatarImage src={getProfileImage(item) || "/placeholder.svg"} alt={item.name} className="object-cover" />
            <AvatarFallback className={getAvatarColor(item.id)}>{getInitials(item.name)}</AvatarFallback>
          </Avatar>
          <span>{item.name}</span>
        </div>
      ),
      onClick: handleRelationshipClick,
    },
    {
      id: "riskStatus",
      header: "Risk Status",
      accessorKey: "riskStatus",
      cell: (item) => <StatusBadge status={item.riskStatus} />,
    },
    {
      id: "status",
      header: "Status",
      accessorKey: "status",
      cell: (item) => <StatusBadge status={item.status} />,
    },
    {
      id: "type",
      header: "Type",
      accessorKey: "type",
    },
    {
      id: "activeProducts",
      header: "Active Products",
      accessorKey: "activeProducts",
      cell: (item) => (
        <div className="flex flex-wrap gap-1">
          {item.activeProducts && item.activeProducts.length > 0 ? (
            item.activeProducts.map((product, index) => (
              <Badge key={index} variant="outline" className="bg-blue-50 text-blue-800 border-blue-200">
                <Package className="h-3 w-3 mr-1" />
                {product}
              </Badge>
            ))
          ) : (
            <span className="text-gray-500 text-sm">None</span>
          )}
        </div>
      ),
    },
    {
      id: "lastUpdated",
      header: "Last Updated",
      accessorKey: "lastUpdated",
      className: "font-semibold",
    },
    {
      id: "caseOwner",
      header: "Case Owner",
      accessorKey: "caseOwner",
    },
    {
      id: "actions",
      header: "",
      accessorKey: "name",
      sortable: false,
      cell: (item) => {
        const handleDelete = () => {
          setItemToDelete({ id: item.id, name: item.name })
          setDeleteDialogOpen(true)
        }

return (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon" data-prevent-row-click="true">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={handleDelete} className="text-red-600 focus:text-red-600">
                <Trash2 className="h-4 w-4 mr-2" />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )
      },
    },
  ]

// Onboarding columns
  const onboardingColumns: ColumnDef<OnboardingItem>[] = [
    {
      id: "name",
      header: "Name",
      accessorKey: "name",
      className: "font-bold text-blue-900 hover:underline cursor-pointer",
      cell: (item) => {
        // Find the corresponding relationship to get the image
        const relationship = relationships.find((r) => r.id === item.id)
        return (
          <div className="flex items-center gap-2">
            <Avatar className="h-8 w-8">
              <AvatarImage
                src={relationship ? getProfileImage(relationship) : `/placeholder.svg?height=32&width=32`}
                alt={item.name}
                className="object-cover"
              />
              <AvatarFallback className={getAvatarColor(item.id)}>{getInitials(item.name)}</AvatarFallback>
            </Avatar>
            <span>{item.name}</span>
          </div>
        )
      },
      onClick: (item) => router.push(`/relationships/${item.id}`),
    },
    {
      id: "status",
      header: "Status",
      accessorKey: "status",
      cell: (item) => <StatusBadge status={item.status} />,
    },
    {
      id: "type",
      header: "Type",
      accessorKey: "type",
    },
    {
      id: "progress",
      header: "Progress",
      accessorKey: "progress",
      cell: (item) => (
        <div className="w-full bg-gray-200 rounded-full h-2.5">
          <div
            className={`h-2.5 rounded-full ${item.status === "Completed" ? "bg-green-600" : "bg-blue-600"}`}
            style={{ width: `${item.progress}%` }}
          ></div>
        </div>
      ),
    },
    {
      id: "startDate",
      header: "Start Date",
      accessorKey: "startDate",
    },
    {
      id: "owner",
      header: "Owner",
      accessorKey: "owner",
    },
    {
      id: "verification",
      header: "Verification",
      accessorKey: "verification",
      cell: (item) => {
        const getVerificationBadge = (status: string) => {
          switch (status) {
            case "Verified":
              return (
                <div className="flex items-center">
                  <CheckCircle className="h-4 w-4 mr-1 text-green-600" />
                  <span className="text-green-600 font-medium">Verified</span>
                </div>
              )
            case "Pending":
              return <StatusBadge status="Pending" />
            case "Waiting":
              return <StatusBadge status="Waiting" />
            case "Review":
              return (
                <div className="flex items-center">
                  <AlertTriangle className="h-4 w-4 mr-1 text-amber-600" />
                  <span className="text-amber-600 font-medium">Review</span>
                </div>
              )
            case "Rejected":
              return (
                <div className="flex items-center">
                  <X className="h-4 w-4 mr-1 text-red-600" />
                  <span className="text-red-600 font-medium">Rejected</span>
                </div>
              )
            default:
              return <StatusBadge status={status} />
          }
        }

return getVerificationBadge(item.verification)
      },
    },
    {
      id: "actions",
      header: "",
      accessorKey: "name",
      sortable: false,
      cell: (item) => {
        const handleDelete = () => {
          setItemToDelete({ id: item.id, name: item.name })
          setDeleteDialogOpen(true)
        }

const breadcrumbs = [{ label: "Relationships", href: "/relationships" }, { label: "All Relationships" }]

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Using the updated PageHeader component with relationship stats */}
      <PageHeader
        title="Relationships"
        subtitle="Manage your business relationships"
        icon={Building}
        actionLabel="Add New Relationship"
        actionIcon={Plus}
        breadcrumbs={breadcrumbs}
        onAction={handleNewRelationship}
      />

{/* Sub-navigation Tabs */}
      <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
        <TabsList className="bg-transparent border-b w-full justify-start">
          <TabsTrigger
            value="onboarding"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Onboarding
          </TabsTrigger>
          <TabsTrigger
            value="active"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Active
          </TabsTrigger>
        </TabsList>

{/* Active Relationships Tab Content */}
        <TabsContent value="active" className="mt-4 space-y-4">
          {/* Stats Cards */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-green-500 p-1 rounded">
                    <UserCheck className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{relationshipStats.customers}</span>
                </div>
                <div className="text-sm text-gray-500">Customers</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-purple-500 p-1 rounded">
                    <Users className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{relationshipStats.prospects}</span>
                </div>
                <div className="text-sm text-gray-500">Prospects</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-blue-500 p-1 rounded">
                    <Building className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{relationshipStats.business}</span>
                </div>
                <div className="text-sm text-gray-500">Business</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-red-500 p-1 rounded">
                    <AlertTriangle className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{relationshipStats.highRisk}</span>
                </div>
                <div className="text-sm text-gray-500">High Risk</div>
              </CardContent>
            </Card>
          </div>

{/* Table Section */}
          <Card>
            <CardContent className="p-6">
              <div className="space-y-4">
                {/* Search and Filter Section */}
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div className="flex flex-wrap items-center gap-3">
                    <div className="relative flex-1 max-w-sm">
                      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                      <Input
                        placeholder="Search by name..."
                        className="pl-9"
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                      />
                    </div>

<Popover>
                      <PopoverTrigger asChild>
                        <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                          <Filter className="h-4 w-4" />
                          Filters
                          {activeFilterCount > 0 && <Badge className="ml-1 bg-blue-900">{activeFilterCount}</Badge>}
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-80">
                        <div className="space-y-4">
                          <h3 className="font-medium">Filter Relationships</h3>

<div className="space-y-2">
                            <label className="text-sm font-medium">Risk Status</label>
                            <Select
                              value={filters.riskStatus}
                              onValueChange={(value) => handleFilterChange("riskStatus", value === "all" ? "" : value)}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select risk status" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                {riskStatusOptions.map((option) => (
                                  <SelectItem key={option} value={option}>
                                    {option}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <label className="text-sm font-medium">Status</label>
                            <Select
                              value={filters.status}
                              onValueChange={(value) => handleFilterChange("status", value === "all" ? "" : value)}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select status" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                {statusOptions.map((option) => (
                                  <SelectItem key={option} value={option}>
                                    {option}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <label className="text-sm font-medium">Type</label>
                            <Select
                              value={filters.type}
                              onValueChange={(value) => handleFilterChange("type", value === "all" ? "" : value)}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select type" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                {typeOptions.map((option) => (
                                  <SelectItem key={option} value={option}>
                                    {option}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <label className="text-sm font-medium">Case Owner</label>
                            <Select
                              value={filters.caseOwner}
                              onValueChange={(value) => handleFilterChange("caseOwner", value === "all" ? "" : value)}
                            >
                              <SelectTrigger>
                                <SelectValue placeholder="Select case owner" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                {caseOwnerOptions.map((option) => (
                                  <SelectItem key={option} value={option}>
                                    {option}
                                  </SelectItem>
                                ))}
                              </SelectContent>
                            </Select>
                          </div>

<div className="flex justify-between pt-2">
                            <Button variant="outline" size="sm" onClick={clearFilters}>
                              Clear Filters
                            </Button>
                            <Button size="sm" className="bg-blue-900">
                              Apply Filters
                            </Button>
                          </div>
                        </div>
                      </PopoverContent>
                    </Popover>

{activeFilterCount > 0 && (
                      <Button variant="ghost" size="sm" onClick={clearFilters} className="text-gray-500">
                        <X className="h-4 w-4 mr-1" />
                        Clear All
                      </Button>
                    )}
                  </div>

{/* Results count - now aligned to the right */}
                  <div className="text-sm text-gray-500">
                    Showing {filteredRelationships.length} of {relationships.filter((r) => r.hasActiveProducts).length}{" "}
                    active relationships
                  </div>
                </div>

{/* Active filter badges */}
                {activeFilterCount > 0 && (
                  <div className="flex flex-wrap gap-2 mt-2 w-full">
                    {searchTerm && (
                      <Badge variant="outline" className="flex items-center gap-1">
                        Name: {searchTerm}
                        <X className="h-3 w-3 ml-1 cursor-pointer" onClick={() => setSearchTerm("")} />
                      </Badge>
                    )}

{Object.entries(filters).map(([key, value]) => {
                      if (!value) return null
                      return (
                        <Badge key={key} variant="outline" className="flex items-center gap-1">
                          {key.replace(/([A-Z])/g, " $1").trim()}: {value}
                          <X className="h-3 w-3 ml-1 cursor-pointer" onClick={() => handleFilterChange(key, "")} />
                        </Badge>
                      )
                    })}
                  </div>
                )}

{/* Data Table */}
                <DataTable
                  data={filteredRelationships}
                  columns={columns}
                  initialSortField="name"
                  noResultsMessage="No active relationships match your filters. Try adjusting your criteria."
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

{/* Onboarding Tab Content */}
        <TabsContent value="onboarding" className="mt-4 space-y-4">
          {/* Onboarding stats */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-green-500 p-1 rounded">
                    <CheckCircle className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{onboardingStats.completed}</span>
                </div>
                <div className="text-sm text-gray-500">Completed</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-blue-500 p-1 rounded">
                    <Users className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{onboardingStats.inProgress}</span>
                </div>
                <div className="text-sm text-gray-500">In Progress</div>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="p-4">
                <div className="flex items-center space-x-2 mb-2">
                  <div className="bg-yellow-500 p-1 rounded">
                    <AlertTriangle className="h-4 w-4 text-white" />
                  </div>
                  <span className="text-2xl font-bold">{onboardingStats.notStarted}</span>
                </div>
                <div className="text-sm text-gray-500">Not Started</div>
              </CardContent>
            </Card>
          </div>
          <Card>
            <CardContent className="p-6">
              <div className="space-y-4">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div className="flex flex-wrap items-center gap-3">
                    <div className="relative flex-1 max-w-sm">
                      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                      <Input
                        placeholder="Search by name..."
                        className="pl-9"
                        value={onboardingSearchTerm}
                        onChange={(e) => setOnboardingSearchTerm(e.target.value)}
                      />
                    </div>
                    <Popover>
                      <PopoverTrigger asChild>
                        <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                          <Filter className="h-4 w-4" />
                          Filters
                        </Button>
                      </PopoverTrigger>
                      <PopoverContent className="w-80">
                        <div className="space-y-4">
                          <h3 className="font-medium">Filter Onboarding</h3>

<div className="space-y-2">
                            <label className="text-sm font-medium">Status</label>
                            <Select>
                              <SelectTrigger>
                                <SelectValue placeholder="Select status" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                <SelectItem value="completed">Completed</SelectItem>
                                <SelectItem value="in-progress">In Progress</SelectItem>
                                <SelectItem value="not-started">Not Started</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <label className="text-sm font-medium">Type</label>
                            <Select>
                              <SelectTrigger>
                                <SelectValue placeholder="Select type" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                <SelectItem value="business">Business</SelectItem>
                                <SelectItem value="individual">Individual</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

<div className="space-y-2">
                            <label className="text-sm font-medium">Owner</label>
                            <Select>
                              <SelectTrigger>
                                <SelectValue placeholder="Select owner" />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="all">All</SelectItem>
                                <SelectItem value="whitney-wright">Whitney Wright</SelectItem>
                                <SelectItem value="larry-owens">Larry Owens</SelectItem>
                                <SelectItem value="olivia-benson">Olivia Benson</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>

<div className="flex justify-between pt-2">
                            <Button variant="outline" size="sm">
                              Clear Filters
                            </Button>
                            <Button size="sm" className="bg-blue-900">
                              Apply Filters
                            </Button>
                          </div>
                        </div>
                      </PopoverContent>
                    </Popover>
                  </div>

<div className="text-sm text-gray-500">
                    Showing {filteredOnboardingData.length} of {onboardingData.length} onboarding processes
                  </div>
                </div>

{/* Onboarding Data Table */}
                <DataTable
                  data={filteredOnboardingData}
                  columns={onboardingColumns}
                  initialSortField="name"
                  noResultsMessage="No onboarding processes found."
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

{/* Delete Confirmation Dialog */}
      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Relationship</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete {itemToDelete?.name}? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeleteConfirm}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/property-selection.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Checkbox } from "@/components/ui/checkbox"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Search } from "lucide-react"

interface Property {
  id: string
  address: string
  subType: string
  rentRollDate: string
  isPledged: boolean
  associatedLoans: { name: string; status: "Booked" | "Proposed" }[]
  status: "Booked" | "Proposed"
  bookedDate: string
  maturityDate: string
}

interface PropertySelectionProps {
  onBack: () => void
  onContinue: (selectedProperties: string[], selectedLoans: string[]) => void
}

export function PropertySelection({ onBack, onContinue }: PropertySelectionProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedProperties, setSelectedProperties] = useState<string[]>([])
  const [loanInclusions, setLoanInclusions] = useState<Record<string, boolean>>({})

const properties: Property[] = [
    {
      id: "4800-parker-farm",
      address: "4800 Parker Farm Lane Wilmington, NC",
      subType: "Commercial",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [
        { name: "Building Expansion Loan", status: "Booked" },
        { name: "CRE Loan #245", status: "Booked" },
      ],
      status: "Booked",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
    {
      id: "222-market-street",
      address: "222 Market Street, Wilmington, NC",
      subType: "Commercial",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [
        { name: "Construction Loan #2", status: "Booked" },
        { name: "CRE Loan #245", status: "Booked" },
      ],
      status: "Booked",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
    {
      id: "456-greenville-rd",
      address: "456 Greenville Rd, Wilmington, NC",
      subType: "Retail",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [{ name: "Retail Space Construction", status: "Proposed" }],
      status: "Proposed",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
    {
      id: "123-ocean-drive",
      address: "123 Ocean Drive, Charleston, SC",
      subType: "Commercial",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [
        { name: "Line of Credit #123", status: "Booked" },
        { name: "CRE Loan #890-01", status: "Booked" },
      ],
      status: "Booked",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
    {
      id: "321-broad-street",
      address: "321 Broad Street, Columbia SC",
      subType: "Mixed Use",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [{ name: "Building Expansion Loan", status: "Proposed" }],
      status: "Proposed",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
    {
      id: "7755-river-street",
      address: "7755 River Street, Savannah, GA",
      subType: "Commercial",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [{ name: "CRE Loan #8844", status: "Proposed" }],
      status: "Proposed",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
    {
      id: "345-broadway-street",
      address: "345 Broadway Street, Nashville, TN",
      subType: "Commercial",
      rentRollDate: "01/20/2025",
      isPledged: true,
      associatedLoans: [{ name: "CRE Loan #1991", status: "Proposed" }],
      status: "Proposed",
      bookedDate: "01/20/2025",
      maturityDate: "01/20/2030",
    },
  ]

const filteredProperties = properties.filter((property) =>
    property.address.toLowerCase().includes(searchQuery.toLowerCase()),
  )

const handlePropertyToggle = (propertyId: string) => {
    setSelectedProperties((prev) => {
      const isCurrentlySelected = prev.includes(propertyId)

if (isCurrentlySelected) {
        const property = properties.find((p) => p.id === propertyId)
        if (property) {
          setLoanInclusions((prevLoans) => {
            const updatedLoans = { ...prevLoans }
            property.associatedLoans.forEach((loan) => {
              const loanKey = `${propertyId}-${loan.name}`
              updatedLoans[loanKey] = false
            })
            return updatedLoans
          })
        }
        return prev.filter((id) => id !== propertyId)
      } else {
        const property = properties.find((p) => p.id === propertyId)
        if (property) {
          setLoanInclusions((prevLoans) => {
            const updatedLoans = { ...prevLoans }
            property.associatedLoans.forEach((loan) => {
              const loanKey = `${propertyId}-${loan.name}`
              updatedLoans[loanKey] = true
            })
            return updatedLoans
          })
        }
        return [...prev, propertyId]
      }
    })
  }

const handleLoanToggle = (loanKey: string) => {
    setLoanInclusions((prev) => ({
      ...prev,
      [loanKey]: !prev[loanKey],
    }))
  }

const selectedCount = selectedProperties.length
  const totalLoans = properties
    .filter((p) => selectedProperties.includes(p.id))
    .reduce((acc, p) => acc + p.associatedLoans.length, 0)

const handleContinue = () => {
    const selectedLoans = properties
      .filter((p) => selectedProperties.includes(p.id))
      .flatMap((p) => p.associatedLoans.map((loan) => loan.name))
    onContinue(selectedProperties, selectedLoans)
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-semibold">CRE Cashflow Analysis</h2>
          <p className="text-gray-600 mt-1">Select properties and loans for analysis</p>
        </div>
        <div className="flex gap-3">
          <Button variant="outline" onClick={onBack}>
            Back
          </Button>
          <Button onClick={handleContinue} disabled={selectedCount === 0} className="bg-blue-900 hover:bg-blue-800">
            Continue
          </Button>
        </div>
      </div>

{/* Selection Summary */}
      <div className="text-sm text-gray-600">
        {selectedCount} properties selected | {totalLoans} loans selected
      </div>

{/* Search */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
        <Input
          placeholder="Search query"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="pl-10"
        />
      </div>

{/* Properties Table */}
      <Card>
        <CardContent className="p-0">
          <div className="overflow-x-auto">
            <table className="w-full min-w-[1400px]">
              <thead className="bg-gray-50 border-b">
                <tr>
                  <th className="text-left p-4 font-medium text-gray-700 w-12"></th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[250px]">Property Address</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[120px]">Sub Type</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[130px]">Rent Roll Date</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[100px]">Is Pledged</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[200px]">Associated Loans</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[120px]">Booked Date</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[130px]">Maturity Date</th>
                  <th className="text-left p-4 font-medium text-gray-700 min-w-[130px]">Loan Included</th>
                </tr>
              </thead>
              <tbody>
                {filteredProperties.map((property) => (
                  <tr key={property.id} className="border-b hover:bg-gray-50">
                    <td className="p-4">
                      <Checkbox
                        checked={selectedProperties.includes(property.id)}
                        onCheckedChange={() => handlePropertyToggle(property.id)}
                      />
                    </td>
                    <td className="p-4 font-medium">{property.address}</td>
                    <td className="p-4">{property.subType}</td>
                    <td className="p-4">{property.rentRollDate}</td>
                    <td className="p-4">{property.isPledged ? "Yes" : "No"}</td>
                    <td className="p-4">
                      <div className="space-y-1">
                        {property.associatedLoans.map((loan, index) => (
                          <div key={index} className="flex items-center gap-2 text-sm">
                            <span className="text-blue-600 hover:underline cursor-pointer">{loan.name}</span>
                            <Badge variant="secondary" className="text-xs">
                              {loan.status}
                            </Badge>
                          </div>
                        ))}
                      </div>
                    </td>
                    <td className="p-4">{property.bookedDate}</td>
                    <td className="p-4">{property.maturityDate}</td>
                    <td className="p-4">
                      <div className="space-y-2">
                        {property.associatedLoans.map((loan, index) => {
                          const loanKey = `${property.id}-${loan.name}`
                          return (
                            <div key={index} className="flex items-center gap-2">
                              <Switch
                                checked={loanInclusions[loanKey] || false}
                                onCheckedChange={() => handleLoanToggle(loanKey)}
                                className="data-[state=checked]:bg-blue-600"
                              />
                              <span className="text-xs text-gray-600">Loan Included</span>
                            </div>
                          )
                        })}
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

{/* Pagination */}
          <div className="flex items-center justify-between p-4 border-t bg-gray-50">
            <div className="text-sm text-gray-600">1-7 of 7</div>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" disabled>
                Previous
              </Button>
              <span className="text-sm">1 of 1</span>
              <Button variant="outline" size="sm" disabled>
                Next
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]jpg:file="public/images/design-mode/44.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/44-gI9CVwQ9UZLcLMAlMvDfcE8P7sAAR0.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/32.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/32-g6g2YZOVpBRfCNNwrYXeZzRYVNNTnz.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/68.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/68-ryFknTE9uobdO4bGvwdx3oRbMzMEtO.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/79.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/79-sJLOoihflDrDTkx9VN8Vnk81CVEGhn.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/17.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/17-PImMYTpjr3ql0MtWX1Phg74WMRyMP2.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/44(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/44%281%29-YE9ul57ga0OJkqTRdOmWVoFXuFSF5R.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/32(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/32%281%29-ehaYliMZA9ES1Ax16WKlOLWIlqeYbB.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/68(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/68%281%29-djAWBua8huFjsgTq3OWdhcHIjfRL9N.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/79(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/79%281%29-5YRORGbfgoW1C1EuvJ3l8bkLGhZJdU.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/17(1).jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/17%281%29-CHf6p2tW84jLLdhuA7Zt5IkpdGzQ2t.jpg" isMerged="true"
[V0_FILE]jpg:file="public/images/design-mode/54.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/design-mode-images/54-wszpsv5YxFpOYGvKBUmoGp2sN6zORA.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/components/file-browser-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { FileText, Folder, ChevronRight } from "lucide-react"

interface FileBrowserModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onFileSelect: (fileName: string) => void
}

export function FileBrowserModal({ open, onOpenChange, onFileSelect }: FileBrowserModalProps) {
  const [selectedFile, setSelectedFile] = useState<string | null>(null)

const handleFileClick = (fileName: string) => {
    setSelectedFile(fileName)
  }

const handleOpen = () => {
    if (selectedFile) {
      onFileSelect(selectedFile)
      onOpenChange(false)
      setSelectedFile(null)
    }
  }

const handleCancel = () => {
    onOpenChange(false)
    setSelectedFile(null)
  }

return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl">
        <DialogHeader>
          <DialogTitle>Select File</DialogTitle>
        </DialogHeader>

<div className="space-y-4">
          {/* Breadcrumb */}
          <div className="flex items-center gap-1 text-sm text-gray-600 bg-gray-50 px-3 py-2 rounded">
            <Folder className="h-4 w-4" />
            <span>Documents</span>
            <ChevronRight className="h-4 w-4" />
            <span>Tenancy Schedules</span>
          </div>

{/* File List */}
          <div className="border rounded-md">
            {/* Header */}
            <div className="grid grid-cols-3 gap-4 px-4 py-2 bg-gray-50 border-b text-sm font-medium text-gray-700">
              <div>Name</div>
              <div>Date Modified</div>
              <div>Type</div>
            </div>

{/* File Row */}
            <div
              className={`grid grid-cols-3 gap-4 px-4 py-3 cursor-pointer hover:bg-gray-50 transition-colors ${
                selectedFile === "TenancySchedule2025.csv" ? "bg-blue-50 hover:bg-blue-50" : ""
              }`}
              onClick={() => handleFileClick("TenancySchedule2025.csv")}
            >
              <div className="flex items-center gap-2">
                <FileText className="h-4 w-4 text-gray-600" />
                <span className="text-sm">TenancySchedule2025.csv</span>
              </div>
              <div className="text-sm text-gray-600">Today, 2:30 PM</div>
              <div className="text-sm text-gray-600">CSV File</div>
            </div>
          </div>

{/* Actions */}
          <div className="flex justify-end gap-2 pt-4">
            <Button variant="outline" onClick={handleCancel}>
              Cancel
            </Button>
            <Button className="bg-[#032d60] hover:bg-[#032d60]/90" onClick={handleOpen} disabled={!selectedFile}>
              Select
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/components/tenancy-schedule-upload.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useCallback, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Upload, Sparkles, FileText, Trash2, Eye, Settings } from "lucide-react"
import { FileBrowserModal } from "./file-browser-modal"
import { Progress } from "@/components/ui/progress"

interface TenancyScheduleUploadProps {
  onBack: () => void
  onComplete?: () => void
}

export function TenancyScheduleUpload({ onBack, onComplete }: TenancyScheduleUploadProps) {
  const [isDragging, setIsDragging] = useState(false)
  const [uploadedFile, setUploadedFile] = useState<File | null>(null)
  const [showFileBrowser, setShowFileBrowser] = useState(false)
  const [isExtracting, setIsExtracting] = useState(false)
  const [extractionProgress, setExtractionProgress] = useState(0)
  const [isComplete, setIsComplete] = useState(false)

const handleDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }, [])

const handleDragLeave = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
  }, [])

const handleDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)

const files = e.dataTransfer.files
    if (files.length > 0) {
      setUploadedFile(files[0])
    }
  }, [])

const handleUploadClick = useCallback(() => {
    setShowFileBrowser(true)
  }, [])

const handleFileSelect = useCallback((fileName: string) => {
    // Create a mock File object for the selected file
    const mockFile = new File([""], fileName, { type: "text/csv" })
    setUploadedFile(mockFile)
    setIsExtracting(true)
    setExtractionProgress(0)
    setIsComplete(false)
  }, [])

useEffect(() => {
    if (isExtracting && extractionProgress < 100) {
      const timer = setTimeout(() => {
        setExtractionProgress((prev) => {
          const next = prev + 2 // Increment by 2% every 100ms = 5 seconds total
          if (next >= 100) {
            setIsExtracting(false)
            setIsComplete(true)
            return 100
          }
          return next
        })
      }, 100)
      return () => clearTimeout(timer)
    }
  }, [isExtracting, extractionProgress])

const handleReupload = useCallback(() => {
    setUploadedFile(null)
    setIsComplete(false)
    setExtractionProgress(0)
    setShowFileBrowser(true)
  }, [])

const handleDelete = useCallback(() => {
    setUploadedFile(null)
    setIsComplete(false)
    setExtractionProgress(0)
  }, [])

const handleReviewData = useCallback(() => {
    if (onComplete) {
      onComplete()
    }
  }, [onComplete])

{/* Upload Section */}
      <div className="max-w-3xl mx-auto space-y-6 py-8">
        <div className="text-center space-y-2">
          <h3 className="text-xl font-medium">Upload a recent tenancy schedule</h3>
          <p className="text-gray-600">
            Once the file has been uploaded, the system will begin extracting tenancy record data.
            <br />
            Review tenancy record information for accuracy before saving it to nCino.
          </p>
        </div>

{isExtracting && uploadedFile && (
          <div className="space-y-4">
            <h4 className="font-medium">Upload Tenancy Schedule</h4>
            <Card className="p-6">
              <div className="space-y-4">
                <div className="flex items-center gap-3">
                  <Settings className="h-5 w-5 animate-spin" />
                  <span className="font-medium">Tenancy schedule data is being extracted</span>
                </div>
                <div className="space-y-2">
                  <p className="text-sm text-gray-600">Reviewing uploaded documents...</p>
                  <Progress value={extractionProgress} className="h-2" />
                </div>
                <p className="text-xs text-gray-500">Full AI summary may take 2-3 minutes to generate.</p>
              </div>
            </Card>
          </div>
        )}

{isComplete && uploadedFile && (
          <div className="space-y-4">
            <h4 className="font-medium">Upload Tenancy Schedule</h4>
            <Card className="p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <FileText className="h-5 w-5 text-gray-600" />
                  <span className="font-medium">{uploadedFile.name}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Button variant="ghost" size="sm" onClick={handleReupload}>
                    Reupload
                  </Button>
                  <Button variant="ghost" size="sm">
                    <Eye className="h-4 w-4" />
                    View
                  </Button>
                  <Button variant="ghost" size="sm" onClick={handleDelete}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </Card>
            <div className="flex justify-center">
              <Button className="bg-[#032d60] hover:bg-[#032d60]/90" onClick={handleReviewData}>
                Review Extracted Data
              </Button>
            </div>
          </div>
        )}

{!uploadedFile && (
          <div className="space-y-4">
            <h4 className="font-medium">Upload Tenancy Schedule</h4>

<Card
              className={`border-2 border-dashed transition-colors ${
                isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300 bg-white"
              }`}
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
              onDrop={handleDrop}
            >
              <div className="p-12 flex flex-col items-center justify-center space-y-4">
                <Button className="bg-[#032d60] hover:bg-[#032d60]/90" onClick={handleUploadClick}>
                  <Upload className="h-4 w-4 mr-2" />
                  Upload
                </Button>
                <p className="text-gray-600">or drop them here</p>
              </div>
            </Card>
          </div>
        )}

{/* AI Notice */}
        {!isComplete && (
          <div className="flex items-center justify-center gap-2 text-sm text-gray-600">
            <Sparkles className="h-4 w-4" />
            <span>AI will be used to extract and reconcile tenancy data from the document</span>
          </div>
        )}
      </div>

<FileBrowserModal open={showFileBrowser} onOpenChange={setShowFileBrowser} onFileSelect={handleFileSelect} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/cashflow-analysis-tab.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { CashflowAnalysisList } from "@/app/components/cashflow-analysis-list"
import { PropertySelection } from "@/app/components/property-selection"
import { CashflowDashboard } from "@/app/components/cashflow-dashboard"
import { BarChart4, TableIcon, Edit, FileText } from "lucide-react"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

interface CashflowAnalysisTabProps {
  relationshipId: string
  relationship?: any
  refreshRelationship?: () => void
}

type ViewState = "list" | "property-selection" | "analysis"

interface ExpenseData {
  [key: string]: {
    [year: string]: number
  }
}

export function CashflowAnalysisTab({ relationshipId }: CashflowAnalysisTabProps) {
  const [viewState, setViewState] = useState<ViewState>("list")
  const [cashflowView, setCashflowView] = useState("projections")
  const [isTableEditable, setIsTableEditable] = useState(false)
  const [activeScenario, setActiveScenario] = useState("actual")

const [expenseData, setExpenseData] = useState<ExpenseData>({
    operatingExpenses: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    repairsMaintenance: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    generalAdmin: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    insurance: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    propertyTaxes: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    utilities: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    managementFees: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    payrollBenefits: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    otherRecurring: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    otherNonRecurring: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    capitalExpenses: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    capitalExpenditures: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
    extraCapitalExpenses: {
      "2025": 0,
      "2026": 0,
      "2027": 0,
      "2028": 0,
      "2029": 0,
      "2030": 0,
    },
  })

const handleExpenseChange = (expenseType: string, year: string, value: string) => {
    const numValue = Number.parseFloat(value) || 0
    setExpenseData((prev) => ({
      ...prev,
      [expenseType]: {
        ...prev[expenseType],
        [year]: numValue,
      },
    }))
  }

const renderEditableCell = (expenseType: string, year: string, value: number) => {
    if (isTableEditable) {
      return (
        <Input
          type="number"
          value={value}
          onChange={(e) => handleExpenseChange(expenseType, year, e.target.value)}
          className="w-full text-right border-0 bg-transparent p-0 h-auto focus:ring-1 focus:ring-blue-500"
        />
      )
    }
    return value === 0 ? "" : value.toLocaleString()
  }

const handleCreateNewAnalysis = () => {
    setViewState("property-selection")
  }

const handleBackToList = () => {
    setViewState("list")
  }

const handleContinueToAnalysis = (selectedProperties: string[], selectedLoans: string[]) => {
    console.log("[v0] Selected properties:", selectedProperties)
    console.log("[v0] Selected loans:", selectedLoans)
    setViewState("analysis")
  }

const handleViewExistingAnalysis = (analysisId: string) => {
    console.log("[v0] Loading analysis:", analysisId)
    setViewState("analysis")
  }

const handleSaveChanges = () => {
    setIsTableEditable(false)
    alert("Changes saved successfully!")
  }

if (viewState === "list") {
    return (
      <CashflowAnalysisList
        relationshipId={relationshipId}
        onCreateNew={handleCreateNewAnalysis}
        onViewAnalysis={handleViewExistingAnalysis}
      />
    )
  }

if (viewState === "property-selection") {
    return <PropertySelection onBack={handleBackToList} onContinue={handleContinueToAnalysis} />
  }

return (
    <div className="space-y-6">
      {/* Header with back button and actions */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <Button variant="outline" onClick={handleBackToList}>
            Back
          </Button>
          <div>
            <h2 className="text-xl font-semibold">Cashflow Analysis</h2>
            <p className="text-sm text-gray-500">Property cashflow projections</p>
          </div>
        </div>
        <div className="inline-flex items-center rounded-md border border-gray-200 overflow-hidden">
          <Button
            variant="ghost"
            size="sm"
            className={`rounded-none border-0 ${
              cashflowView === "dashboard" ? "bg-blue-600 text-white hover:bg-blue-700" : "hover:bg-gray-100"
            }`}
            onClick={() => setCashflowView("dashboard")}
            aria-label="Dashboard View"
            title="Dashboard View"
          >
            <BarChart4 className="h-4 w-4" />
          </Button>
          <div className="h-5 w-px bg-gray-200"></div>
          <Button
            variant="ghost"
            size="sm"
            className={`rounded-none border-0 ${
              cashflowView === "projections" ? "bg-blue-600 text-white hover:bg-blue-700" : "hover:bg-gray-100"
            }`}
            onClick={() => setCashflowView("projections")}
            aria-label="Projections View"
            title="Projections View"
          >
            <TableIcon className="h-4 w-4" />
          </Button>
        </div>
      </div>

{/* Properties Section Header with Edit Button */}
      <div className="space-y-4 mb-3">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-medium">Properties</h3>
          <Button
            variant="outline"
            size="sm"
            onClick={() => (isTableEditable ? handleSaveChanges() : setIsTableEditable(true))}
          >
            <Edit className="h-4 w-4 mr-2" />
            {isTableEditable ? "Save Changes" : "Edit Properties"}
          </Button>
        </div>
      </div>

{/* Properties Section */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <Card className="shadow-sm">
          <CardContent className="p-4">
            <h4 className="font-semibold text-lg mb-2">4800 Parker Farm Ln, Wilmington, NC 28401</h4>
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <p className="text-gray-600">Type</p>
                <p className="font-medium">Commercial Office</p>
              </div>
              <div>
                <p className="text-gray-600">Last Valuation Date</p>
                <p className="font-medium">03/25/2023</p>
              </div>
              <div>
                <p className="text-gray-600">Total Floor Area</p>
                <p className="font-medium">10,000 sqft</p>
              </div>
              <div>
                <p className="text-gray-600">Associated Loans</p>
                <p className="font-medium">Building Expansion ($200k outstanding) +1 more</p>
              </div>
            </div>
          </CardContent>
        </Card>
        <Card className="shadow-sm">
          <CardContent className="p-4">
            <h4 className="font-semibold text-lg mb-2">222 Market Street Wilmington, NC 28401</h4>
            <div className="grid grid-cols-2 gap-4 text-sm">
              <div>
                <p className="text-gray-600">Type</p>
                <p className="font-medium">Commercial Office</p>
              </div>
              <div>
                <p className="text-gray-600">Last Valuation Date</p>
                <p className="font-medium">03/25/2023</p>
              </div>
              <div>
                <p className="text-gray-600">Total Floor Area</p>
                <p className="font-medium">10,000 sqft</p>
              </div>
              <div>
                <p className="text-gray-600">Associated Loans</p>
                <p className="font-medium">Building Expansion ($200k outstanding) +2 more</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Scenario Tabs */}
      <div className="border-b mb-6">
        <div className="flex space-x-2">
          <button
            onClick={() => setActiveScenario("actual")}
            className={`px-4 py-2 text-sm font-medium transition-colors relative ${
              activeScenario === "actual" ? "text-blue-900" : "text-gray-500 hover:text-gray-900"
            }`}
          >
            Actual Scenario
            {activeScenario === "actual" && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-900" />}
          </button>
          <button
            onClick={() => setActiveScenario("custom")}
            className={`px-4 py-2 text-sm font-medium transition-colors relative ${
              activeScenario === "custom" ? "text-blue-900" : "text-gray-500 hover:text-gray-900"
            }`}
          >
            Custom Scenario
            {activeScenario === "custom" && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-900" />}
          </button>
        </div>
      </div>

{cashflowView === "dashboard" ? (
        <CashflowDashboard />
      ) : (
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg">Cashflow Insights</CardTitle>
              <div className="flex items-center space-x-2">
                <Button variant="outline" size="sm">
                  Recalculate
                </Button>
                <Button variant="outline" size="sm">
                  <FileText className="h-4 w-4 mr-2" />
                  Export
                </Button>
                {isTableEditable ? (
                  <Button size="sm" onClick={handleSaveChanges}>
                    Save Changes
                  </Button>
                ) : (
                  <Button variant="outline" size="sm" onClick={() => setIsTableEditable(true)}>
                    <Edit className="h-4 w-4 mr-2" />
                    Edit
                  </Button>
                )}
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="flex space-x-6 mb-4 border-b">
              <button className="pb-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600">Properties</button>
              <button className="pb-2 text-sm font-medium text-gray-500 hover:text-gray-700">Tenancies</button>
              <button className="pb-2 text-sm font-medium text-gray-500 hover:text-gray-700">Debt</button>
            </div>

<p className="text-sm text-gray-600 mb-4">All figures in USD ($)</p>

<div className="overflow-x-auto">
              <table className="w-full border-collapse text-sm">{/* ... existing table code ... */}</table>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/data/global-tasks.ts" isQuickEdit="true" isMerged="true"
import type { Task, TaskStatus } from "@/app/components/task-table"

export interface GlobalTask extends Task {
  entityType: "Relationship" | "Deal" | "Loan"
  entityName: string
  entityId: string
}

export const globalTasks: GlobalTask[] = [
  {
    id: "task-001",
    name: "Collect Financial Statements",
    type: "Document",
    status: "To Do" as TaskStatus,
    assignedTo: "Olivia Benson",
    dueDate: "04/25/2025",
    entityType: "Relationship",
    entityName: "NexaSphere Limited Liability",
    entityId: "rel-001",
  },
  {
    id: "task-002",
    name: "Credit Analysis Review",
    type: "Credit",
    status: "In Progress" as TaskStatus,
    assignedTo: "Whitney Wright",
    dueDate: "04/22/2025",
    entityType: "Deal",
    entityName: "Commercial Real Estate Loan",
    entityId: "deal-001",
  },
  {
    id: "task-003",
    name: "Verify Collateral Documentation",
    type: "Legal",
    status: "Pending" as TaskStatus,
    assignedTo: "Larry Owens",
    dueDate: "04/23/2025",
    entityType: "Loan",
    entityName: "Business Expansion Loan",
    entityId: "loan-001",
  },
  {
    id: "task-004",
    name: "Obtain Tax Returns (2023-2024)",
    type: "Document",
    status: "Missing" as TaskStatus,
    assignedTo: "Olivia Benson",
    dueDate: "04/21/2025",
    entityType: "Relationship",
    entityName: "Zenith Grove Limited Liability",
    entityId: "rel-002",
  },
  {
    id: "task-005",
    name: "Prepare Loan Agreement",
    type: "Legal",
    status: "To Do" as TaskStatus,
    assignedTo: "Larry Owens",
    dueDate: "04/28/2025",
    entityType: "Deal",
    entityName: "Equipment Financing",
    entityId: "deal-002",
  },
  {
    id: "task-006",
    name: "Schedule Client Meeting",
    type: "Meeting",
    status: "Complete" as TaskStatus,
    assignedTo: "Olivia Benson",
    dueDate: "04/18/2025",
    entityType: "Relationship",
    entityName: "Pivot Pulse Co.",
    entityId: "rel-003",
  },
  {
    id: "task-007",
    name: "Update Risk Assessment",
    type: "Risk",
    status: "To Do" as TaskStatus,
    assignedTo: "Whitney Wright",
    dueDate: "04/26/2025",
    entityType: "Loan",
    entityName: "Equipment Purchase",
    entityId: "loan-002",
  },
  {
    id: "task-008",
    name: "Finalize Approval Package",
    type: "Approval",
    status: "In Progress" as TaskStatus,
    assignedTo: "Larry Owens",
    dueDate: "04/24/2025",
    entityType: "Deal",
    entityName: "Working Capital Line",
    entityId: "deal-003",
  },
]
[V0_FILE]typescriptreact:file="app/components/banking-advisor-chat-window.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import Link from "next/link"
import {
  Send,
  X,
  Minimize2,
  Maximize2,
  Sparkles,
  Bell,
  MessageSquare,
  Clock,
  ChevronRight,
  ThumbsUp,
  ThumbsDown,
  MoreVertical,
  ChevronDown,
  AlertTriangle,
  Calendar,
  FileText,
  User,
  DollarSign,
  Home,
  Car,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { EmailWindow } from "./email-window"

interface Message {
  id: string
  content: string
  sender: "user" | "ai"
  timestamp: Date
}

interface SuggestedAction {
  id: string
  business: string
  applicationType: string
  issue: string
  description: string
  timestamp: Date
  icon?: React.ReactNode
  relationshipId?: string
}

interface BankingAdvisorChatWindowProps {
  onClose: () => void
}

export function BankingAdvisorChatWindow({ onClose }: BankingAdvisorChatWindowProps) {
  const [activeTab, setActiveTab] = useState<TabType>("chat")
  const [expandedSections, setExpandedSections] = useState<AccordionSection[]>(["suggested"])
  const [showRiskSources, setShowRiskSources] = useState(false)
  const [showActionSources, setShowActionSources] = useState<Record<string, boolean>>({
    "action-1": false,
    "action-2": false,
    "action-3": false,
    "verify-1": false,
    "verify-2": false,
    "verify-3": false,
  })
  const [cardsVisible, setCardsVisible] = useState(false)
  const [activeWindow, setActiveWindow] = useState<WindowType>("chat")
  const [selectedAction, setSelectedAction] = useState<SuggestedAction | null>(null)

const [messages, setMessages] = useState<Message[]>([
    {
      id: "welcome",
      content: "Welcome! How can I assist you with your banking needs today?",
      sender: "ai",
      timestamp: new Date(),
    },
  ])

const [suggestedActions, setSuggestedActions] = useState<SuggestedAction[]>([
    {
      id: "action-1",
      business: "Kristin Watson",
      applicationType: "Unsecured Term Loan",
      issue: "SSN Format Issue",
      description:
        'The provided SSN (666001234) starts with "666", which is not a valid SSN prefix. Valid SSNs do not start with 666.',
      timestamp: new Date(),
      icon: <User className="h-5 w-5 text-red-500" />,
      relationshipId: "kristin-watson-456",
    },
    {
      id: "action-2",
      business: "Kristin Watson",
      applicationType: "Unsecured Term Loan",
      issue: "Low Income Concern",
      description:
        "The reported annual income of $10,800.00 is very low for the requested loan amount of $6,000.23. This may affect the applicant's ability to repay the loan.",
      timestamp: new Date(),
      icon: <DollarSign className="h-5 w-5 text-yellow-500" />,
      relationshipId: "kristin-watson-456",
    },
    {
      id: "action-3",
      business: "Kristin Watson",
      applicationType: "Unsecured Term Loan",
      issue: "Potential Loan Stacking",
      description:
        'There are two entries for "Consumer - Unsecured" loans with identical amounts ($6,000) and monthly payments ($89.49). This could be a duplicate entry or an attempt at loan stacking.',
      timestamp: new Date(),
      icon: <FileText className="h-5 w-5 text-orange-500" />,
      relationshipId: "kristin-watson-456",
    },
  ])

const [verifyActions, setVerifyActions] = useState<SuggestedAction[]>([
    {
      id: "verify-1",
      business: "Kristin Watson",
      applicationType: "Unsecured Term Loan",
      issue: "Age Verification Required",
      description:
        "The applicant's birthdate is listed as 12/12/2005, making them only 19 years old as of the current date (04/08/2025). This is unusually young for a loan applicant and may require additional verification.",
      timestamp: new Date(),
      icon: <Calendar className="h-5 w-5 text-blue-500" />,
      relationshipId: "kristin-watson-456",
    },
    {
      id: "verify-2",
      business: "Port City Coffee",
      applicationType: "Unsecured Term Loan",
      issue: "Address Verification Required",
      description:
        'The mailing and other addresses both list "Fantasy Island" as the city, which is not a real place. This raises concerns about the accuracy of the provided address information.',
      timestamp: new Date(),
      icon: <Home className="h-5 w-5 text-purple-500" />,
      relationshipId: "port-city-coffee-123",
    },
    {
      id: "verify-3",
      business: "NexaSphere Limited Liability",
      applicationType: "Unsecured Term Loan",
      issue: "Collateral Valuation Date Issue",
      description:
        "The collateral (Honda Civic) has an appraisal date of 04/01/2025, which is in the future relative to the current date (04/08/2025). This suggests a data entry error or an invalid appraisal date.",
      timestamp: new Date(),
      icon: <Car className="h-5 w-5 text-green-500" />,
      relationshipId: "nexasphere-limited-liability-123",
    },
  ])

const [inputValue, setInputValue] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const [isMinimized, setIsMinimized] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const inputRef = useRef<HTMLInputElement>(null)

// Auto-scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

// Focus input when component mounts or tab changes to chat
  useEffect(() => {
    if (!isMinimized && activeTab === "chat") {
      inputRef.current?.focus()
    }
  }, [isMinimized, activeTab])

// Handle tab change animation
  useEffect(() => {
    if (activeTab === "alerts") {
      // Start with cards invisible
      setCardsVisible(false)

// Trigger fade-in after a tiny delay to ensure DOM update
      setTimeout(() => {
        setCardsVisible(true)
      }, 50)
    } else {
      // Hide cards when switching away from alerts tab
      setCardsVisible(false)
    }
  }, [activeTab])

const handleTabChange = (tab: TabType) => {
    setActiveTab(tab)
  }

const handleSendMessage = () => {
    if (!inputValue.trim()) return

// Add user message
    const userMessage: Message = {
      id: `user-${Date.now()}`,
      content: inputValue,
      sender: "user",
      timestamp: new Date(),
    }
    setMessages((prev) => [...prev, userMessage])
    setInputValue("")

// Simulate AI typing
    setIsTyping(true)

// Simulate AI response after a delay
    setTimeout(() => {
      const aiResponses = [
        "I can help you with that loan application. Let me check the details.",
        "Based on the application data, there are several issues that need your attention.",
        "I notice there are some verification issues with the applicant's information.",
        "The system has flagged potential concerns with this loan application that you should review.",
        "Would you like me to generate an email to request additional documentation from the applicant?",
      ]

const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)]

const aiMessage: Message = {
        id: `ai-${Date.now()}`,
        content: randomResponse,
        sender: "ai",
        timestamp: new Date(),
      }

setIsTyping(false)
      setMessages((prev) => [...prev, aiMessage])
    }, 1500)
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

const toggleMinimize = () => {
    setIsMinimized(!isMinimized)
  }

const toggleAccordionSection = (section: AccordionSection) => {
    if (expandedSections.includes(section)) {
      setExpandedSections(expandedSections.filter((s) => s !== section))
    } else {
      setExpandedSections([...expandedSections, section])
    }
  }

const toggleActionSources = (actionId: string) => {
    setShowActionSources({
      ...showActionSources,
      [actionId]: !showActionSources[actionId],
    })
  }

const handleGenerateEmail = (action: SuggestedAction) => {
    setSelectedAction(action)
    setActiveWindow("email")
  }

const handleCloseEmail = () => {
    setActiveWindow("chat")
    setSelectedAction(null)
  }

const renderActionItems = (actions: SuggestedAction[], type: "suggested" | "verify") => {
    return actions.map((action, index) => (
      <div key={action.id} className="mb-6">
        <div className="flex items-center justify-between mb-1">
          <div className="flex items-center">
            <p className="text-sm text-gray-500">Today at 10:37 AM</p>
            <Sparkles className="h-4 w-4 text-blue-500 ml-2" />
          </div>
        </div>

<div className="flex items-center justify-between mb-1">
          <Link
            href={action.relationshipId ? `/relationships/${action.relationshipId}` : "#"}
            className="text-blue-500 font-medium hover:underline"
          >
            {action.business}
          </Link>
          <span className="bg-gray-200 text-gray-700 text-xs font-medium px-2.5 py-1 rounded">
            {action.applicationType}
          </span>
        </div>

<div className="flex items-start mb-1">
          <div className="mr-2 mt-0.5">{action.icon || <AlertTriangle className="h-5 w-5 text-yellow-500" />}</div>
          <h4 className="font-medium text-gray-900">{action.issue}</h4>
        </div>
        <p className="text-sm text-gray-600 mb-3">{action.description}</p>

<div className="flex justify-between items-center">
          <div className="flex space-x-3">
            {type === "suggested" ? (
              <>
                <Button className="bg-blue-500 hover:bg-blue-600" onClick={() => handleGenerateEmail(action)}>
                  Generate an Email
                </Button>
                <Button variant="outline">Log a Call</Button>
              </>
            ) : (
              <>
                <Button className="bg-blue-500 hover:bg-blue-600">Verify Now</Button>
                <Button variant="outline" onClick={() => handleGenerateEmail(action)}>
                  Request Documents
                </Button>
              </>
            )}
          </div>

<div className="mt-2">
          <Button
            variant="ghost"
            className="text-gray-600 p-0 h-auto flex items-center"
            onClick={() => toggleActionSources(action.id)}
          >
            <ChevronRight
              className={`h-4 w-4 mr-1 transition-transform ${showActionSources[action.id] ? "rotate-90" : ""}`}
            />
            <span>Sources (3)</span>
          </Button>

{showActionSources[action.id] && (
            <div className="mt-2 ml-5">
              <ul className="text-sm text-gray-600 space-y-2">
                <li>• Application Form (ID: a1KOt000006DbcbMAC)</li>
                <li>• Customer Records Database</li>
                <li>• Regulatory Compliance System</li>
              </ul>
            </div>
          )}
        </div>

{index < actions.length - 1 && <div className="border-b border-gray-200 my-4"></div>}
      </div>
    ))
  }

// Generate email content based on the selected action
  const generateEmailContent = (action: SuggestedAction) => {
    if (!action) return ""

let content = ""

if (action.issue.includes("SSN Format")) {
      content = `<p>Dear ${action.business},</p>
      <p>We noticed an issue with the Social Security Number provided in your recent loan application. The SSN format appears to be invalid.</p>
      <p>Please provide a valid Social Security Number at your earliest convenience so we can continue processing your application.</p>
      <p>If you have any questions, please don't hesitate to contact us.</p>
      <p>Best regards,<br>John Doe<br>Commercial Bank</p>`
    } else if (action.issue.includes("Low Income")) {
      content = `<p>Dear ${action.business},</p>
      <p>We're reviewing your loan application and have noticed that the reported annual income may be insufficient for the requested loan amount.</p>
      <p>To proceed with your application, we may need additional income verification or to discuss alternative loan options that better align with your financial situation.</p>
      <p>Please contact us at your earliest convenience to discuss this matter further.</p>
      <p>Best regards,<br>John Doe<br>Commercial Bank</p>`
    } else if (action.issue.includes("Age Verification")) {
      content = `<p>Dear ${action.business},</p>
      <p>We're processing your loan application and need to verify your date of birth as our records indicate you may be under 21 years of age.</p>
      <p>Please provide a copy of a government-issued ID (driver's license, passport, etc.) to confirm your date of birth.</p>
      <p>Thank you for your cooperation.</p>
      <p>Best regards,<br>John Doe<br>Commercial Bank</p>`
    } else {
      content = `<p>Dear ${action.business},</p>
      <p>We're reviewing your recent loan application and need additional information regarding the ${action.issue.toLowerCase()}.</p>
      <p>${action.description}</p>
      <p>Please provide the necessary documentation or clarification at your earliest convenience so we can continue processing your application.</p>
      <p>Best regards,<br>John Doe<br>Commercial Bank</p>`
    }

return content
  }

// If email window is active, show it instead of chat window
  if (activeWindow === "email" && selectedAction) {
    return (
      <EmailWindow
        onClose={handleCloseEmail}
        recipientName={selectedAction.business}
        recipientEmail={`${selectedAction.business.toLowerCase().replace(/\s+/g, ".")}@example.com`}
        subject={`Action Required: ${selectedAction.issue} - Loan Application`}
        defaultContent={generateEmailContent(selectedAction)}
      />
    )
  }

return (
    <div
      className={`fixed z-50 bg-white rounded-lg shadow-xl border border-gray-200 transition-all duration-300 w-[700px] ${
        isMinimized ? "h-14" : "h-[75vh]"
      } bottom-20 right-8 flex flex-col`}
      style={{ maxHeight: "calc(100vh - 120px)" }}
    >
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200">
        <div className="flex items-center space-x-3">
          <div className="bg-blue-100 p-1 rounded-full">
            <div className="h-6 w-6 bg-blue-500 rounded-full flex items-center justify-center">
              <Sparkles className="h-4 w-4 text-white" />
            </div>
          </div>
          <h5 className="font-medium text-base">Banking Advisor</h5>
        </div>
        <div className="flex items-center space-x-2">
          <Button variant="ghost" size="icon" onClick={toggleMinimize} className="h-8 w-8">
            {isMinimized ? <Maximize2 className="h-4 w-4" /> : <Minimize2 className="h-4 w-4" />}
          </Button>
          <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
            <X className="h-4 w-4" />
          </Button>
        </div>
      </div>

{!isMinimized && (
        <>
          {/* Tab Navigation */}
          <div className="flex border-b border-gray-200">
            <button
              className={`flex-1 py-2 px-4 text-sm font-medium ${
                activeTab === "chat" ? "text-blue-600 border-b-2 border-blue-600" : "text-gray-500 hover:text-gray-700"
              } flex items-center justify-center space-x-2`}
              onClick={() => handleTabChange("chat")}
            >
              <MessageSquare className="h-4 w-4" />
              <span>Chat</span>
            </button>
            <button
              className={`flex-1 py-2 px-4 text-sm font-medium relative ${
                activeTab === "alerts"
                  ? "text-blue-600 border-b-2 border-blue-600"
                  : "text-gray-500 hover:text-gray-700"
              } flex items-center justify-center space-x-2`}
              onClick={() => handleTabChange("alerts")}
            >
              <Bell className="h-4 w-4" />
              <span>Intelligent Alerts</span>
              <span className="absolute top-1 right-16 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                6
              </span>
            </button>
          </div>

{/* Tab Content */}
          {activeTab === "chat" ? (
            <>
              {/* Chat Messages */}
              <div className="flex-1 overflow-y-auto p-4 space-y-4">
                {messages.map((message) => (
                  <div
                    key={message.id}
                    className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
                  >
                    <div
                      className={`max-w-[80%] rounded-lg p-3 ${
                        message.sender === "user"
                          ? "bg-blue-500 text-white rounded-br-none"
                          : "bg-gray-100 text-gray-800 rounded-bl-none"
                      }`}
                    >
                      {message.sender === "ai" && (
                        <div className="flex items-center mb-1 space-x-1">
                          <Sparkles className="h-3 w-3 text-blue-500" />
                          <span className="text-xs font-medium text-blue-500">Banking Advisor</span>
                        </div>
                      )}
                      {message.content}
                    </div>
                  </div>
                ))}
                {isTyping && (
                  <div className="flex justify-start">
                    <div className="bg-gray-100 text-gray-800 rounded-lg rounded-bl-none p-3 max-w-[80%]">
                      <div className="flex space-x-1">
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
                        <div
                          className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
                          style={{ animationDelay: "0.2s" }}
                        />
                        <div
                          className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
                          style={{ animationDelay: "0.4s" }}
                        />
                      </div>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>

{/* Chat Input */}
              <div className="border-t border-gray-200 p-4">
                <div className="flex items-center space-x-2">
                  <input
                    ref={inputRef}
                    type="text"
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="Type your message..."
                    className="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  />
                  <Button
                    onClick={handleSendMessage}
                    disabled={!inputValue.trim()}
                    className="rounded-full h-10 w-10 p-0 flex items-center justify-center"
                  >
                    <Send className="h-5 w-5" />
                  </Button>
                </div>
              </div>
            </>
          ) : (
            <>
              {/* Intelligent Alerts */}
              <div className="flex-1 overflow-y-auto p-4">
                <div className="space-y-4">
                  {/* Daily Risk Assessment Card */}
                  <div
                    className="transition-opacity duration-500 ease-in-out"
                    style={{ opacity: cardsVisible ? 1 : 0, transitionDelay: "0ms" }}
                  >
                    <Card className="border border-gray-100 shadow-none bg-white rounded-[16px]">
                      <CardHeader className="pb-2 pt-4 px-4">
                        <CardTitle className="text-xl text-[#03234d]">Daily Risk Assessment</CardTitle>
                        <p className="text-sm text-gray-500">Today at 10:37 AM</p>
                      </CardHeader>
                      <CardContent className="pb-2 px-4">
                        <p className="text-gray-700">Your Daily Risk Assessment is ready to view.</p>
                        <div className="flex space-x-3 mt-4">
                          <Button className="bg-blue-500 hover:bg-blue-600">View Now</Button>
                          <Button variant="outline" className="flex items-center space-x-2 bg-transparent">
                            <Clock className="h-4 w-4" />
                            <span>Snooze</span>
                          </Button>
                        </div>
                      </CardContent>
                      <CardFooter className="flex justify-between pt-2 px-4 border-t-0">
                        <Button
                          variant="ghost"
                          className="text-gray-600 p-0 h-auto flex items-center"
                          onClick={() => setShowRiskSources(!showRiskSources)}
                        >
                          <ChevronRight
                            className={`h-4 w-4 mr-1 transition-transform ${showRiskSources ? "rotate-90" : ""}`}
                          />
                          <span>Sources (3)</span>
                        </Button>
                        <div className="flex items-center space-x-2">
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <ThumbsUp className="h-4 w-4 text-gray-500" />
                          </Button>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <ThumbsDown className="h-4 w-4 text-gray-500" />
                          </Button>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <MoreVertical className="h-4 w-4 text-gray-500" />
                          </Button>
                        </div>
                      </CardFooter>
                      {showRiskSources && (
                        <div className="px-6 pb-4">
                          <ul className="text-sm text-gray-600 space-y-2">
                            <li>• Loan Application System</li>
                            <li>• Credit Bureau Report</li>
                            <li>• Fraud Detection System</li>
                          </ul>
                        </div>
                      )}
                    </Card>
                  </div>

{/* Suggested Actions Card */}
                  <div
                    className="transition-opacity duration-500 ease-in-out"
                    style={{
                      opacity: cardsVisible ? 1 : 0,
                      transitionDelay: "200ms",
                      transform: cardsVisible ? "translateY(0)" : "translateY(10px)",
                      transition: "opacity 500ms ease-in-out, transform 500ms ease-in-out",
                    }}
                  >
                    <Card className="border border-gray-100 shadow-none bg-white rounded-[16px]">
                      <CardHeader className="pb-2 pt-4 px-4">
                        <CardTitle className="text-xl text-[#03234d]">Actions</CardTitle>
                      </CardHeader>
                      <CardContent className="p-0">
                        {/* Accordion Sections */}
                        <div className="border-t border-gray-200">
                          {/* Suggested Section */}
                          <div className="border-b border-gray-200">
                            <button
                              className="w-full flex items-center justify-between p-4 text-left"
                              onClick={() => toggleAccordionSection("suggested")}
                            >
                              <div className="flex items-center">
                                {expandedSections.includes("suggested") ? (
                                  <ChevronDown className="h-5 w-5 mr-2 transition-transform" />
                                ) : (
                                  <ChevronRight className="h-5 w-5 mr-2 transition-transform" />
                                )}
                                <span className="font-medium text-lg">Suggested</span>
                              </div>
                              <span className="bg-pink-100 text-pink-800 text-xs font-medium px-2.5 py-0.5 rounded">
                                3 Total
                              </span>
                            </button>

{expandedSections.includes("suggested") && (
                              <div className="px-4 pb-4">{renderActionItems(suggestedActions, "suggested")}</div>
                            )}
                          </div>

{/* Verify Section */}
                          <div className="border-b border-gray-200">
                            <button
                              className="w-full flex items-center justify-between p-4 text-left"
                              onClick={() => toggleAccordionSection("verify")}
                            >
                              <div className="flex items-center">
                                {expandedSections.includes("verify") ? (
                                  <ChevronDown className="h-5 w-5 mr-2 transition-transform" />
                                ) : (
                                  <ChevronRight className="h-5 w-5 mr-2 transition-transform" />
                                )}
                                <span className="font-medium text-lg">Verify</span>
                              </div>
                              <span className="bg-amber-100 text-amber-800 text-xs font-medium px-2.5 py-0.5 rounded">
                                3 Total
                              </span>
                            </button>

{expandedSections.includes("verify") && (
                              <div className="px-4 pb-4">{renderActionItems(verifyActions, "verify")}</div>
                            )}
                          </div>

{/* Completed Section */}
                          <div>
                            <button
                              className="w-full flex items-center justify-between p-4 text-left"
                              onClick={() => toggleAccordionSection("completed")}
                            >
                              <div className="flex items-center">
                                {expandedSections.includes("completed") ? (
                                  <ChevronDown className="h-5 w-5 mr-2 transition-transform" />
                                ) : (
                                  <ChevronRight className="h-5 w-5 mr-2 transition-transform" />
                                )}
                                <span className="font-medium text-lg">Completed</span>
                              </div>
                              <span className="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">
                                3 Total
                              </span>
                            </button>

{expandedSections.includes("completed") && (
                              <div className="px-4 pb-4">
                                <p className="text-gray-500">Completed items will appear here.</p>
                              </div>
                            )}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </div>
              </div>
            </>
          )}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescript:file="app/data/relationships.ts" isQuickEdit="true" isMerged="true"
// Sample data for relationships
export const initialRelationships = [
  {
    id: "nexasphere-limited-liability-123",
    name: "NexaSphere Limited Liability",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Business",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Technology",
    yearEstablished: "2018",
    employeeCount: "156",
    location: "San Francisco, CA",
    primaryContact: "John Smith",
    primaryContactEmail: "john.smith@nexasphere.com",
    primaryContactPhone: "(415) 555-1234",
    productPackageName: "Enterprise Package",
    totalExposure: "$1,250,000.00",
    riskGrade: "2",
    annualRevenue: "$8,750,000",
    totalDeposits: "$2,500,000",
    ficoScore: "780",
    nextMeetingDate: "06/15/2024",
  },
  {
    id: "kristin-watson-456",
    name: "Kristin Watson",
    riskStatus: "High Risk",
    status: "Prospect",
    type: "Individual",
    lastUpdated: "09/22/2024 9:44 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Healthcare",
    yearEstablished: "2020",
    employeeCount: "1",
    location: "Chicago, IL",
    primaryContact: "Kristin Watson",
    primaryContactEmail: "kristin.watson@example.com",
    primaryContactPhone: "(312) 555-6789",
    productPackageName: "Personal Banking",
    totalExposure: "$125,000.00",
    riskGrade: "4",
    annualRevenue: "$175,000",
    totalDeposits: "$45,000",
    ficoScore: "650",
    nextMeetingDate: "06/10/2024",
  },
  {
    id: "port-city-coffee-123",
    name: "Port City Coffee",
    riskStatus: "Low Risk",
    status: "Open",
    type: "Business",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "05/25/2024",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2015",
    employeeCount: "42",
    location: "Portland, OR",
    primaryContact: "Lilliana Jacobs",
    primaryContactEmail: "lilliana.jacobs@portcitycoffee.com",
    primaryContactPhone: "(208) 555-0125",
    productPackageName: "Port City Coffee Deal",
    totalExposure: "$792,000.00",
    riskGrade: "3",
    annualRevenue: "$4,275,212",
    totalDeposits: "$1,000,000",
    ficoScore: "810",
    nextMeetingDate: "05/25/2024",
  },
  {
    id: "darlene-robertson-789",
    name: "Darlene Robertson",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Individual",
    lastUpdated: "09/22/2024 3:33 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Education",
    yearEstablished: "2019",
    employeeCount: "1",
    location: "Boston, MA",
    primaryContact: "Darlene Robertson",
    primaryContactEmail: "darlene.robertson@example.com",
    primaryContactPhone: "(617) 555-4321",
    productPackageName: "Premium Banking",
    totalExposure: "$350,000.00",
    riskGrade: "2",
    annualRevenue: "$210,000",
    totalDeposits: "$125,000",
    ficoScore: "790",
    nextMeetingDate: "07/05/2024",
  },
  {
    id: "pivot-pulse-co-101",
    name: "Pivot Pulse Co.",
    riskStatus: "Low Risk",
    status: "Prospect",
    type: "Business",
    lastUpdated: "09/22/2024 1:45 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Fitness",
    yearEstablished: "2021",
    employeeCount: "28",
    location: "Denver, CO",
    primaryContact: "Michael Johnson",
    primaryContactEmail: "michael@pivotpulse.com",
    primaryContactPhone: "(303) 555-8765",
    productPackageName: "Small Business Package",
    totalExposure: "$450,000.00",
    riskGrade: "3",
    annualRevenue: "$1,200,000",
    totalDeposits: "$350,000",
    ficoScore: "720",
    nextMeetingDate: "06/20/2024",
  },
  {
    id: "albert-flores-102",
    name: "Albert Flores",
    riskStatus: "Very High Risk",
    status: "Prospect",
    type: "Individual",
    lastUpdated: "09/22/2024 1:24 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Consulting",
    yearEstablished: "2022",
    employeeCount: "1",
    location: "Miami, FL",
    primaryContact: "Albert Flores",
    primaryContactEmail: "albert.flores@example.com",
    primaryContactPhone: "(305) 555-9876",
    productPackageName: "Basic Banking",
    totalExposure: "$75,000.00",
    riskGrade: "5",
    annualRevenue: "$90,000",
    totalDeposits: "$15,000",
    ficoScore: "580",
    nextMeetingDate: "06/25/2024",
  },
  {
    id: "zenith-grove-limited-liability-103",
    name: "Zenith Grove Limited Liability",
    riskStatus: "Very High Risk",
    status: "Customer",
    type: "Business",
    lastUpdated: "09/22/2024 4:23 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Agriculture",
    yearEstablished: "2017",
    employeeCount: "85",
    location: "Austin, TX",
    primaryContact: "Sarah Williams",
    primaryContactEmail: "sarah@zenithgrove.com",
    primaryContactPhone: "(512) 555-2345",
    productPackageName: "Corporate Package",
    totalExposure: "$2,100,000.00",
    riskGrade: "4",
    annualRevenue: "$5,800,000",
    totalDeposits: "$1,200,000",
    ficoScore: "620",
    nextMeetingDate: "07/10/2024",
  },
  {
    id: "guy-hawkins-104",
    name: "Guy Hawkins",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Individual",
    lastUpdated: "09/22/2024 10:22 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Real Estate",
    yearEstablished: "2016",
    employeeCount: "1",
    location: "Seattle, WA",
    primaryContact: "Guy Hawkins",
    primaryContactEmail: "guy.hawkins@example.com",
    primaryContactPhone: "(206) 555-3456",
    productPackageName: "Wealth Management",
    totalExposure: "$950,000.00",
    riskGrade: "1",
    annualRevenue: "$425,000",
    totalDeposits: "$750,000",
    ficoScore: "820",
    nextMeetingDate: "06/30/2024",
  },
  {
    id: "lilliana-jacobs-201",
    name: "Lilliana Jacobs",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Individual",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2023",
    employeeCount: "1",
    location: "Portland, OR",
    primaryContact: "Lilliana Jacobs",
    primaryContactEmail: "lilliana.jacobs@portcitycoffee.com",
    primaryContactPhone: "(208) 555-0126",
    productPackageName: "Individual Banking",
    totalExposure: "$0.00",
    riskGrade: "2",
    annualRevenue: "$175,000",
    totalDeposits: "$45,000",
    ficoScore: "785",
    nextMeetingDate: "05/30/2024",
    occupation: "CEO",
    dateOfBirth: "05/12/1985",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "45%",
    relationshipRole: "Primary Contact, Beneficial Owner",
  },
  {
    id: "stan-lee-202",
    name: "Stan Lee",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Individual",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2023",
    employeeCount: "1",
    location: "Portland, OR",
    primaryContact: "Stan Lee",
    primaryContactEmail: "stan.lee@portcitycoffee.com",
    primaryContactPhone: "(208) 555-0127",
    productPackageName: "Individual Banking",
    totalExposure: "$0.00",
    riskGrade: "2",
    annualRevenue: "$120,000",
    totalDeposits: "$35,000",
    ficoScore: "760",
    nextMeetingDate: "06/05/2024",
    occupation: "CFO",
    dateOfBirth: "08/22/1980",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "25%",
    relationshipRole: "Beneficial Owner",
  },
  {
    id: "smiths-bakery-203",
    name: "Smith's Bakery",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Business",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2010",
    employeeCount: "15",
    location: "Portland, OR",
    primaryContact: "Jack Smith",
    primaryContactEmail: "jack.smith@smithsbakery.com",
    primaryContactPhone: "(208) 555-0128",
    productPackageName: "Small Business Banking",
    totalExposure: "$150,000.00",
    riskGrade: "3",
    annualRevenue: "$850,000",
    totalDeposits: "$125,000",
    ficoScore: "N/A",
    nextMeetingDate: "06/10/2024",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "10%",
    relationshipRole: "Beneficial Owner",
  },
  {
    id: "mindy-baker-204",
    name: "Mindy Baker",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Individual",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2023",
    employeeCount: "1",
    location: "Portland, OR",
    primaryContact: "Mindy Baker",
    primaryContactEmail: "mindy.baker@smithsbakery.com",
    primaryContactPhone: "(208) 555-0129",
    productPackageName: "Individual Banking",
    totalExposure: "$0.00",
    riskGrade: "2",
    annualRevenue: "$95,000",
    totalDeposits: "$28,000",
    ficoScore: "745",
    nextMeetingDate: "06/15/2024",
    occupation: "COO",
    dateOfBirth: "11/05/1982",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "5%",
    relationshipRole: "Beneficial Owner",
  },
  {
    id: "craving-confectionary-205",
    name: "Craving Confectionary",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Business",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2015",
    employeeCount: "12",
    location: "Portland, OR",
    primaryContact: "Demi Moore",
    primaryContactEmail: "demi.moore@cravingconfectionary.com",
    primaryContactPhone: "(208) 555-0130",
    productPackageName: "Small Business Banking",
    totalExposure: "$125,000.00",
    riskGrade: "2",
    annualRevenue: "$750,000",
    totalDeposits: "$95,000",
    ficoScore: "N/A",
    nextMeetingDate: "06/20/2024",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "8%",
    relationshipRole: "Beneficial Owner",
  },
  {
    id: "jack-smith-206",
    name: "Jack Smith",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Individual",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2023",
    employeeCount: "1",
    location: "Portland, OR",
    primaryContact: "Jack Smith",
    primaryContactEmail: "jack.smith@smithsbakery.com",
    primaryContactPhone: "(208) 555-0131",
    productPackageName: "Individual Banking",
    totalExposure: "$0.00",
    riskGrade: "3",
    annualRevenue: "$110,000",
    totalDeposits: "$32,000",
    ficoScore: "730",
    nextMeetingDate: "06/25/2024",
    occupation: "Owner",
    dateOfBirth: "03/15/1975",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "5%",
    relationshipRole: "Beneficial Owner",
  },
  {
    id: "demi-moore-207",
    name: "Demi Moore",
    riskStatus: "Low Risk",
    status: "In Progress",
    type: "Individual",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
    industry: "Food & Beverage",
    yearEstablished: "2023",
    employeeCount: "1",
    location: "Portland, OR",
    primaryContact: "Demi Moore",
    primaryContactEmail: "demi.moore@cravingconfectionary.com",
    primaryContactPhone: "(208) 555-0132",
    productPackageName: "Individual Banking",
    totalExposure: "$0.00",
    riskGrade: "2",
    annualRevenue: "$105,000",
    totalDeposits: "$30,000",
    ficoScore: "755",
    nextMeetingDate: "06/30/2024",
    occupation: "Owner",
    dateOfBirth: "07/25/1978",
    parentRelationshipId: "port-city-coffee-123",
    ownershipPercentage: "2%",
    relationshipRole: "Beneficial Owner",
  },
]

// Sample data for documents, team meetings, etc.
export const relationshipExtendedData = {
  documents: [
    {
      name: "Financial Statements",
      clientName: "Bob Smith",
      assignedTo: "Bob Smith",
      dueDate: "05/10/2024",
      status: "Complete",
    },
    {
      name: "Tax Returns",
      clientName: "Alice Johnson",
      assignedTo: "Catherine Lee",
      dueDate: "07/05/2024",
      status: "Waived",
    },
    {
      name: "Credit Report",
      clientName: "Bob Smith",
      assignedTo: "David Brown",
      dueDate: "01/12/2024",
      status: "To Do",
    },
    {
      name: "Proof of Income",
      clientName: "Charlie Brown",
      assignedTo: "Eva White",
      dueDate: "09/20/2024",
      status: "Complete",
    },
    {
      name: "Personal Identification",
      clientName: "Diana Prince",
      assignedTo: "Frank Green",
      dueDate: "10/25/2024",
      status: "Exception",
    },
    {
      name: "Collateral Documents",
      clientName: "Ethan Hunt",
      assignedTo: "Grace Hall",
      dueDate: "04/30/2024",
      status: "Waived",
    },
    {
      name: "Business License",
      clientName: "Fiona Gallagher",
      assignedTo: "Henry King",
      dueDate: "06/14/2024",
      status: "In Progress",
    },
    {
      name: "Lease Agreement",
      clientName: "George Costanza",
      assignedTo: "Isabella Scott",
      dueDate: "08/22/2024",
      status: "To Do",
    },
    {
      name: "Insurance Policy",
      clientName: "Hannah Montana",
      assignedTo: "Jack Turner",
      dueDate: "11/18/2024",
      status: "Exception",
    },
  ],
  teamMeetings: [
    { type: "Loan Application Review", date: "4/15/24", time: "10:30am", person: "John Smith", status: "completed" },
    { type: "Loan Application Review", date: "4/15/24", time: "10:30am", person: "John Smith", status: "completed" },
    {
      type: "Approval Meeting",
      date: "4/15/24",
      time: "10:30am",
      person: "Jane Doe",
      status: "scheduled",
      details: "Conference Room A, 123 Finance St, Moneytown",
    },
    {
      type: "Loan Application Update",
      date: "4/15/24",
      time: "10:30am",
      person: "John Smith",
      status: "completed",
      details: "Application has been successfully submitted",
    },
    {
      type: "Follow-up Task",
      date: "4/15/24",
      time: "10:30am",
      person: "John Smith",
      status: "created",
      details: "Please check in on the status of the loan application",
    },
  ],
  onboardingSummary: [
    {
      name: "Port City Coffee",
      progress: "Completed",
      verification: "Verified",
      role: "Primary Contact",
      type: "Business",
    },
    {
      name: "Lilliana Jacobs",
      progress: "In progress",
      verification: "Review",
      role: "Primary Contact, Beneficial Owner",
      type: "Individual",
    },
    {
      name: "Stan Lee",
      progress: "In progress",
      verification: "Verified",
      role: "Beneficial Owner",
      type: "Individual",
    },
    {
      name: "Smith's Bakery",
      progress: "In progress",
      verification: "Waiting",
      role: "Beneficial Owner",
      type: "Business",
    },
    {
      name: "Mindy Baker",
      progress: "In progress",
      verification: "Waiting",
      role: "Beneficial Owner",
      type: "Individual",
    },
    {
      name: "Craving Confectionary",
      progress: "Completed",
      verification: "Verified",
      role: "Beneficial Owner",
      type: "Business",
    },
    { name: "Jack Smith", progress: "Completed", verification: "Review", role: "Beneficial Owner", type: "Individual" },
    {
      name: "Demi Moore",
      progress: "In progress",
      verification: "Waiting",
      role: "Beneficial Owner",
      type: "Individual",
    },
  ],
  deals: [
    { name: "Deal Name", label: "Label" },
    { name: "Deal Name", label: "Label" },
  ],
  loans: [
    {
      id: "loan-001",
      name: "Commercial Real Estate Loan",
      amount: "$2,500,000",
      interestRate: "5.25%",
      term: "20 years",
      status: "Active",
      maturityDate: "12/15/2028",
      paymentAmount: "$8,125.45",
      nextPaymentDate: "07/01/2024",
      loanType: "Commercial Mortgage",
      collateral: "Office Building",
      originationDate: "06/15/2024",
      relationshipId: "nexasphere-limited-liability-123",
      relationship: "NexaSphere Limited Liability",
    },
    {
      id: "loan-002",
      name: "Equipment Financing",
      amount: "$750,000",
      interestRate: "4.75%",
      term: "7 years",
      status: "Active",
      maturityDate: "06/30/2026",
      paymentAmount: "$4,892.33",
      nextPaymentDate: "07/01/2024",
      loanType: "Equipment Loan",
      collateral: "Manufacturing Equipment",
      originationDate: "06/01/2024",
      relationshipId: "zenith-grove-limited-liability-103",
      relationship: "Zenith Grove Limited Liability",
    },
    {
      id: "loan-003",
      name: "Working Capital Line",
      amount: "$500,000",
      interestRate: "6.50%",
      term: "Revolving",
      status: "Active",
      maturityDate: "05/15/2025",
      paymentAmount: "Interest Only",
      nextPaymentDate: "07/15/2024",
      loanType: "Line of Credit",
      collateral: "Accounts Receivable",
      originationDate: "05/15/2024",
      relationshipId: "port-city-coffee-123",
      relationship: "Port City Coffee",
    },
    {
      id: "loan-004",
      name: "Business Expansion Loan",
      amount: "$750,000",
      interestRate: "5.75%",
      term: "10 years",
      status: "Pending Closing",
      maturityDate: "07/30/2034",
      paymentAmount: "$8,238.86",
      nextPaymentDate: "09/01/2024",
      loanType: "Term Loan",
      collateral: "Business Assets",
      originationDate: "Pending",
      relationshipId: "zenith-grove-limited-liability-103",
      relationship: "Zenith Grove Limited Liability",
    },
    {
      id: "loan-005",
      name: "Home Mortgage",
      amount: "$425,000",
      interestRate: "3.875%",
      term: "30 years",
      status: "Active",
      maturityDate: "04/01/2054",
      paymentAmount: "$1,998.25",
      nextPaymentDate: "07/01/2024",
      loanType: "Residential Mortgage",
      collateral: "Primary Residence",
      originationDate: "04/01/2024",
      relationshipId: "guy-hawkins-104",
      relationship: "Guy Hawkins",
    },
    {
      id: "loan-006",
      name: "Personal Loan",
      amount: "$35,000",
      interestRate: "7.25%",
      term: "5 years",
      status: "Active",
      maturityDate: "03/15/2029",
      paymentAmount: "$695.33",
      nextPaymentDate: "07/15/2024",
      loanType: "Unsecured Personal Loan",
      collateral: "None",
      originationDate: "03/15/2024",
      relationshipId: "darlene-robertson-789",
      relationship: "Darlene Robertson",
    },
    {
      id: "loan-007",
      name: "Auto Loan",
      amount: "$42,500",
      interestRate: "4.25%",
      term: "6 years",
      status: "Active",
      maturityDate: "05/10/2030",
      paymentAmount: "$675.18",
      nextPaymentDate: "07/10/2024",
      loanType: "Auto Loan",
      collateral: "2024 Tesla Model Y",
      originationDate: "05/10/2024",
      relationshipId: "darlene-robertson-789",
      relationship: "Darlene Robertson",
    },
    {
      id: "loan-008",
      name: "Commercial Property Development",
      amount: "$3,500,000",
      interestRate: "5.15%",
      term: "15 years",
      status: "Active",
      maturityDate: "07/15/2039",
      paymentAmount: "$27,845.62",
      nextPaymentDate: "07/15/2024",
      loanType: "Commercial Loan",
      collateral: "Commercial Property",
      originationDate: "07/15/2024",
      relationshipId: "nexasphere-limited-liability-123",
      relationship: "NexaSphere Limited Liability",
    },
    {
      id: "loan-009",
      name: "Small Business Expansion",
      amount: "$250,000",
      interestRate: "6.75%",
      term: "5 years",
      status: "Active",
      maturityDate: "06/01/2029",
      paymentAmount: "$4,912.45",
      nextPaymentDate: "07/01/2024",
      loanType: "Small Business Loan",
      collateral: "Business Assets",
      originationDate: "06/01/2024",
      relationshipId: "port-city-coffee-123",
      relationship: "Port City Coffee",
    },
    {
      id: "loan-010",
      name: "Commercial Mortgage",
      amount: "$1,750,000",
      interestRate: "4.95%",
      term: "25 years",
      status: "Pending Closing",
      maturityDate: "08/01/2049",
      paymentAmount: "$10,234.78",
      nextPaymentDate: "09/01/2024",
      loanType: "Mortgage",
      collateral: "Office Building",
      originationDate: "Pending",
      relationshipId: "zenith-grove-limited-liability-103",
      relationship: "Zenith Grove Limited Liability",
    },
  ],
  deposits: [
    { name: "Standard Business Checking Account", status: "Active" },
    { name: "Standard Business Savings Account", status: "Active" },
  ],
  treasuryServices: [{ name: "Treasury Services", status: "Pending" }],
}
[V0_FILE]typescriptreact:file="app/onboarding/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { Search, Users, MoreVertical, Plus, Filter, X, Clock, AlertTriangle, UserCheck, Trash2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import PageHeader from "@/app/components/page-header"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Badge } from "@/components/ui/badge"
import { DataTable, type ColumnDef } from "@/app/components/data-table"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { deleteRelationship } from "@/lib/relationship-store"
import { useRouter } from "next/navigation"

// Sample data
const initialCases = [
  {
    name: "NexaSphere Limited Liability",
    progress: "In progress",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Business",
    lastUpdated: "09/22/2024 11:23 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Kristin Watson",
    progress: "In progress",
    riskStatus: "High Risk",
    status: "Prospect",
    type: "Individual",
    lastUpdated: "09/22/2024 9:44 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Darlene Robertson",
    progress: "In progress",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Individual",
    lastUpdated: "09/22/2024 3:33 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Pivot Pulse Co.",
    progress: "In progress",
    riskStatus: "Low Risk",
    status: "Prospect",
    type: "Business",
    lastUpdated: "09/22/2024 1:45 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Albert Flores",
    progress: "In progress",
    riskStatus: "Very High Risk",
    status: "Prospect",
    type: "Individual",
    lastUpdated: "09/22/2024 1:24 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Zenith Grove Limited Liability",
    progress: "In progress",
    riskStatus: "Very High Risk",
    status: "Customer",
    type: "Business",
    lastUpdated: "09/22/2024 4:23 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Guy Hawkins",
    progress: "In progress",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Individual",
    lastUpdated: "09/22/2024 10:22 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Cascade Nexus Ltd.",
    progress: "In progress",
    riskStatus: "High Risk",
    status: "Customer",
    type: "Business",
    lastUpdated: "09/22/2024 8:24 AM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
  {
    name: "Lumora Ventures Ltd",
    progress: "In progress",
    riskStatus: "Low Risk",
    status: "Customer",
    type: "Business",
    lastUpdated: "09/22/2024 3:00 PM",
    dateCreated: "09/22/2024 11:23 AM",
    caseOwner: "Naomi Vu",
  },
]

// Helper function to get profile image URL based on relationship
const getProfileImage = (relationship: any) => {
  // Special case for Kristin Watson - always use a woman's photo
  if (relationship.name === "Kristin Watson") {
    return "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D"
  }

// Use the name to consistently select the same image for the same business
    const index = relationship.name.charCodeAt(0) % businessImages.length
    return businessImages[index]
  } else {
    // For individuals, use person-themed images
    // Separate male and female images
    const femaleImages = [
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZXxlbnwwfHwwfHx8MA%3D%3D",
      "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
    ]

const maleImages = [
      "https://images.unsplash.com/photo-1500648767791-0a1dd7228f2d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTJ8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHByb2ZpbGV8ZW58MHx8MHx8fDA%3D",
    ]

const imageArray = isFemale ? femaleImages : maleImages
    const index = relationship.name.charCodeAt(0) % imageArray.length
    return imageArray[index]
  }
}

// Helper function to get initials from name
const getInitials = (name: string) => {
  return name
    .split(" ")
    .map((part) => part[0])
    .join("")
    .substring(0, 2)
    .toUpperCase()
}

// Helper function to get a consistent color based on name
const getAvatarColor = (name: string) => {
  const colors = [
    "bg-blue-500",
    "bg-green-500",
    "bg-purple-500",
    "bg-yellow-500",
    "bg-pink-500",
    "bg-indigo-500",
    "bg-red-500",
    "bg-teal-500",
  ]

// Use the first character of the name as a simple hash
  const index = name.charCodeAt(0) % colors.length
  return colors[index]
}

type Case = (typeof initialCases)[0]

// Get unique values for filter options
const getUniqueValues = (field: keyof Case) => {
  const values = initialCases.map((item) => item[field])
  return [...new Set(values)]
}

export default function OnboardingPage() {
  const [cases, setCases] = useState(initialCases)
  const [filteredCases, setFilteredCases] = useState(initialCases)
  const [searchTerm, setSearchTerm] = useState("")
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [relationshipToDelete, setRelationshipToDelete] = useState<string | null>(null)
  const router = useRouter()

// Filter states
  const [filters, setFilters] = useState({
    riskStatus: "",
    status: "",
    type: "",
    caseOwner: "",
  })

// Get unique values for filter dropdowns
  const riskStatusOptions = getUniqueValues("riskStatus")
  const statusOptions = getUniqueValues("status")
  const typeOptions = getUniqueValues("type")
  const caseOwnerOptions = getUniqueValues("caseOwner")

// Count active filters
  const activeFilterCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)

// Calculate case statistics
  const inProgressCount = initialCases.filter((c) => c.progress === "In progress").length
  const customerCount = initialCases.filter((c) => c.status === "Customer").length
  const prospectCount = initialCases.filter((c) => c.status === "Prospect").length
  const highRiskCount = initialCases.filter(
    (c) => c.riskStatus === "High Risk" || c.riskStatus === "Very High Risk",
  ).length

const handleNewCustomer = () => {
    // Handle new customer action
    console.log("Onboard new customer clicked")
  }

// Handle filter changes
  const handleFilterChange = (field: string, value: string) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Clear all filters
  const clearFilters = () => {
    setFilters({
      riskStatus: "",
      status: "",
      type: "",
      caseOwner: "",
    })
    setSearchTerm("")
  }

const handleDeleteClick = (id: string, e: React.MouseEvent) => {
    e.stopPropagation()
    setRelationshipToDelete(id)
    setIsDeleteDialogOpen(true)
  }

const confirmDelete = () => {
    if (relationshipToDelete) {
      deleteRelationship(relationshipToDelete)
      setIsDeleteDialogOpen(false)
      setRelationshipToDelete(null)

// Update the cases list
      const updatedCases = cases.filter((c) => c.name !== relationshipToDelete)
      setCases(updatedCases)
      setFilteredCases(filteredCases.filter((c) => c.name !== relationshipToDelete))

// Refresh the page to show updated data
      router.refresh()
    }
  }

// Apply filters
  useEffect(() => {
    let result = [...initialCases]

// Apply search term filter
    if (searchTerm) {
      result = result.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()))
    }

setFilteredCases(result)
  }, [searchTerm, filters])

const columns: ColumnDef<Case>[] = [
    {
      id: "name",
      header: "Relationship Name",
      accessorKey: "name",
      cell: (item) => {
        return (
          <div className="flex items-center gap-3">
            <Avatar className="h-8 w-8">
              <AvatarImage src={getProfileImage(item) || "/placeholder.svg"} alt={item.name} className="object-cover" />
              <AvatarFallback className={getAvatarColor(item.name)}>{getInitials(item.name)}</AvatarFallback>
            </Avatar>
            <span className="font-bold text-blue-900">{item.name}</span>
          </div>
        )
      },
      className: "font-bold text-blue-900",
    },
    {
      id: "progress",
      header: "Progress",
      accessorKey: "progress",
      cell: (item) => (
        <div className="flex items-center space-x-2">
          <div className="h-2 w-2 rounded-full border-2 border-gray-300" />
          <span>{item.progress}</span>
        </div>
      ),
    },
    {
      id: "riskStatus",
      header: "Risk Status",
      accessorKey: "riskStatus",
      cell: (item) => (
        <span
          className={`px-2 py-1 rounded text-sm ${
            item.riskStatus === "Low Risk"
              ? "bg-green-100 text-green-800"
              : item.riskStatus === "High Risk"
                ? "bg-yellow-100 text-yellow-800"
                : "bg-red-100 text-red-800"
          }`}
        >
          {item.riskStatus}
        </span>
      ),
    },
    {
      id: "status",
      header: "Status",
      accessorKey: "status",
    },
    {
      id: "type",
      header: "Type",
      accessorKey: "type",
    },
    {
      id: "lastUpdated",
      header: "Last Updated",
      accessorKey: "lastUpdated",
      className: "font-semibold",
    },
    {
      id: "dateCreated",
      header: "Date Created",
      accessorKey: "dateCreated",
      className: "font-semibold",
    },
    {
      id: "caseOwner",
      header: "Case Owner",
      accessorKey: "caseOwner",
    },
    {
      id: "actions",
      header: "",
      accessorKey: "name",
      sortable: false,
      cell: (item) => (
        <div onClick={(e) => e.stopPropagation()} data-prevent-row-click="true">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem
                onClick={(e) => handleDeleteClick(item.name, e)}
                className="text-red-600 focus:text-red-600"
              >
                <Trash2 className="h-4 w-4 mr-2" />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      ),
    },
  ]

const breadcrumbs = [{ label: "Onboarding", href: "/onboarding" }, { label: "All Cases" }]

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Using the updated PageHeader component */}
      <PageHeader
        title="Onboarding Cases Summary"
        subtitle={`${initialCases.length} Total Cases • ${customerCount} Customers, ${prospectCount} Prospects`}
        icon={Users}
        actionLabel="Onboard New Customer"
        actionIcon={Plus}
        onAction={handleNewCustomer}
        breadcrumbs={breadcrumbs}
      />

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-blue-500 p-1 rounded">
                <Clock className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{inProgressCount}</span>
            </div>
            <div className="text-sm text-gray-500">In Progress</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <UserCheck className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{customerCount}</span>
            </div>
            <div className="text-sm text-gray-500">Customers</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-purple-500 p-1 rounded">
                <Users className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{prospectCount}</span>
            </div>
            <div className="text-sm text-gray-500">Prospects</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-red-500 p-1 rounded">
                <AlertTriangle className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{highRiskCount}</span>
            </div>
            <div className="text-sm text-gray-500">High Risk</div>
          </CardContent>
        </Card>
      </div>

{/* Table Section */}
      <Card>
        <CardContent className="p-6">
          <div className="space-y-4">
            {/* Search and Filter Section */}
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div className="flex flex-wrap items-center gap-3">
                <div className="relative flex-1 max-w-sm">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                  <Input
                    placeholder="Search by name..."
                    className="pl-9"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>

<Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" className="flex items-center gap-2 bg-transparent">
                      <Filter className="h-4 w-4" />
                      Filters
                      {activeFilterCount > 0 && <Badge className="ml-1 bg-blue-900">{activeFilterCount}</Badge>}
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-80">
                    <div className="space-y-4">
                      <h3 className="font-medium">Filter Cases</h3>

{/* Filter options */}
                    </div>
                  </PopoverContent>
                </Popover>

{/* Results count - now aligned to the right */}
              <div className="text-sm text-gray-500">
                Showing {filteredCases.length} of {initialCases.length} cases
              </div>
            </div>

{/* Active filter badges */}
            {activeFilterCount > 0 && <div className="flex flex-wrap gap-2 mt-2 w-full">{/* Filter badges */}</div>}

{/* Data Table */}
            <DataTable
              data={filteredCases}
              columns={columns}
              initialSortField="name"
              noResultsMessage="No cases match your filters. Try adjusting your criteria."
            />
          </div>
        </CardContent>
      </Card>
      {/* Delete Confirmation Dialog */}
      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete this relationship and all associated data. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={confirmDelete} className="bg-red-600 hover:bg-red-700">
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
[V0_FILE]typescript:file="app/data/deals.ts" isQuickEdit="true" isMerged="true"
export const initialDeals = [
  {
    id: "deal-001",
    name: "Commercial Real Estate Loan",
    amount: "$2,500,000",
    status: "In Progress",
    stage: "Underwriting",
    type: "Commercial Loan",
    relationship: "NexaSphere Limited Liability",
    relationshipId: "nexasphere-limited-liability-123",
    owner: "Olivia Benson",
    dateCreated: "05/15/2024",
    closingDate: "07/30/2024",
    probability: "75%",
    priority: "High",
    industry: "Technology",
    associatedLoans: ["loan-cib-001", "loan-com-010", "loan-mtg-006", "loan-bc-001"], // Subordinated Debt, Non-Profit Facility, Commercial Property Mortgage, Business Credit Card
  },
  {
    id: "deal-002",
    name: "Equipment Financing",
    amount: "$750,000",
    status: "Approved",
    stage: "Closing",
    type: "Equipment Loan",
    relationship: "Zenith Grove Limited Liability",
    relationshipId: "zenith-grove-limited-liability-103",
    owner: "Larry Owens",
    dateCreated: "04/22/2024",
    closingDate: "06/15/2024",
    probability: "90%",
    priority: "Medium",
    industry: "Agriculture",
    associatedLoans: ["loan-cib-002", "loan-com-004", "loan-com-008", "loan-com-012", "loan-eld-001", "loan-mtg-008"], // Mezzanine Financing, Standby Letter of Credit, Import Letter of Credit, Construction Bridge Loan, Manufacturing Equipment Lease, Affordable Housing Development
  },
  {
    id: "deal-003",
    name: "Working Capital Line",
    amount: "$500,000",
    status: "Pending Approval",
    stage: "Credit Review",
    type: "Line of Credit",
    relationship: "Pivot Pulse Co.",
    relationshipId: "pivot-pulse-co-101",
    owner: "Whitney Wright",
    dateCreated: "05/03/2024",
    closingDate: "06/30/2024",
    probability: "65%",
    priority: "Medium",
    industry: "Fitness",
    associatedLoans: [
      "loan-cib-003",
      "loan-com-009",
      "loan-lf-002",
      "loan-mtg-010",
      "loan-sba-002",
      "loan-sb-002",
      "loan-sb-004",
    ], // Interest Rate Swap, Working Capital Line, Invoice Factoring, Raw Land Loan, SBA 504 Real Estate Loan, Small Business A/R Financing, Small Business Line of Credit
  },
  {
    id: "deal-004",
    name: "Business Acquisition",
    amount: "$3,750,000",
    status: "In Progress",
    stage: "Due Diligence",
    type: "Term Loan",
    relationship: "Cascade Nexus Ltd.",
    relationshipId: "cascade-nexus-ltd-123",
    owner: "Olivia Benson",
    dateCreated: "04/10/2024",
    closingDate: "08/15/2024",
    probability: "60%",
    priority: "High",
    industry: "Business",
    associatedLoans: [], // Will add new loans in the loan store
  },
  {
    id: "deal-005",
    name: "Expansion Project",
    amount: "$1,200,000",
    status: "Approved",
    stage: "Documentation",
    type: "Commercial Loan",
    relationship: "Port City Coffee",
    relationshipId: "port-city-coffee-123",
    owner: "Larry Owens",
    dateCreated: "03/28/2024",
    closingDate: "06/10/2024",
    probability: "95%",
    priority: "High",
    industry: "Food & Beverage",
    associatedLoans: [
      "loan-com-001",
      "loan-com-006",
      "loan-com-011",
      "loan-lf-001",
      "loan-mtg-009",
      "loan-sba-001",
      "loan-sba-003",
      "loan-sb-001",
      "loan-sb-003",
      "loan-sb-005",
    ], // Business Expansion Term Loan, Inventory & Receivables Financing, Office Building Mortgage, Heavy Equipment Loan, Land Development Loan, SBA 7(a) Business Loan, SBA Express Loan, Small Business Term Loan, Small Business Equipment Loan, Small Business Working Capital
  },
  {
    id: "deal-006",
    name: "Mortgage Refinance",
    amount: "$425,000",
    status: "Closed",
    stage: "Funded",
    type: "Mortgage",
    relationship: "Guy Hawkins",
    relationshipId: "guy-hawkins-104",
    owner: "Whitney Wright",
    dateCreated: "02/15/2024",
    closingDate: "05/01/2024",
    probability: "100%",
    priority: "Low",
    industry: "Real Estate",
    associatedLoans: ["loan-com-003", "loan-com-007"], // Securities Backed Credit Line, Trust Financing
  },
  {
    id: "deal-007",
    name: "Inventory Financing",
    amount: "$350,000",
    status: "In Progress",
    stage: "Underwriting",
    type: "Line of Credit",
    relationship: "Lumora Ventures Ltd",
    relationshipId: "lumora-ventures-ltd-123",
    owner: "Olivia Benson",
    dateCreated: "05/08/2024",
    closingDate: "07/15/2024",
    probability: "70%",
    priority: "Medium",
    industry: "Business",
    associatedLoans: [], // Will add new loans in the loan store
  },
  {
    id: "deal-008",
    name: "Equipment Upgrade",
    amount: "$275,000",
    status: "Pending Approval",
    stage: "Credit Review",
    type: "Equipment Loan",
    relationship: "NexaSphere Limited Liability",
    relationshipId: "nexasphere-limited-liability-123",
    owner: "Larry Owens",
    dateCreated: "04/30/2024",
    closingDate: "06/25/2024",
    probability: "80%",
    priority: "Medium",
    industry: "Technology",
    associatedLoans: ["loan-com-002"], // Municipal Development Loan
  },
  {
    id: "deal-009",
    name: "Commercial Property Purchase",
    amount: "$1,850,000",
    status: "In Progress",
    stage: "Underwriting",
    type: "Commercial Loan",
    relationship: "Cascade Nexus Ltd.",
    relationshipId: "cascade-nexus-ltd-123",
    owner: "Whitney Wright",
    dateCreated: "04/05/2024",
    closingDate: "07/20/2024",
    probability: "65%",
    priority: "High",
    industry: "Business",
    associatedLoans: [], // Will add new loans in the loan store
  },
  {
    id: "deal-010",
    name: "Business Vehicle Fleet",
    amount: "$320,000",
    status: "Approved",
    stage: "Documentation",
    type: "Auto Loan",
    relationship: "Pivot Pulse Co.",
    relationshipId: "pivot-pulse-co-101",
    owner: "Olivia Benson",
    dateCreated: "04/18/2024",
    closingDate: "06/05/2024",
    probability: "90%",
    priority: "Low",
    industry: "Fitness",
    associatedLoans: ["loan-com-005"], // Unsecured Business Loan
  },
]

// Deal statistics
export const dealStats = {
  totalValue: "$11,920,000",
  avgDealSize: "$1,192,000",
  totalDeals: 10,
  inProgress: 4,
  approved: 3,
  pendingApproval: 2,
  closed: 1,
  highPriority: 4,
  mediumPriority: 4,
  lowPriority: 2,
}
[V0_FILE]typescript:file="lib/loan-store.ts" isQuickEdit="true" isMerged="true"
import { v4 as uuidv4 } from "uuid"

export interface Loan {
  id: string
  name: string
  amount: string
  interestRate: string
  relationshipId: string
  relationship?: string
  status: string
  loanType: string
  maturityDate: string
  nextPaymentDate: string
  collateralType: string
  collateralValue: string
  term: string
  paymentFrequency: string
  amortization: string
  purpose: string
  prepaymentPenalty: boolean
  dealId?: string
  loanCategory: string
  selectedDocuments: string[]
  createdAt: string
  updatedAt: string
}

// Initial loans data - one for each loan type
const initialLoans: Loan[] = [
  // Business Card
  {
    id: "loan-bc-001",
    name: "NexaSphere Business Credit Card",
    amount: "$50,000",
    interestRate: "18.99%",
    relationshipId: "nexasphere-limited-liability-123",
    relationship: "NexaSphere Limited Liability",
    status: "Active",
    loanType: "Business Credit Card",
    maturityDate: "Revolving",
    nextPaymentDate: "2023-07-15",
    collateralType: "unsecured",
    collateralValue: "$0",
    term: "Revolving",
    paymentFrequency: "Monthly",
    amortization: "Revolving",
    purpose: "Business Expenses",
    prepaymentPenalty: false,
    dealId: "deal-001", // Associated with Commercial Real Estate Loan deal
    loanCategory: "business-card",
    selectedDocuments: [],
    createdAt: "2023-01-15T10:30:00Z",
    updatedAt: "2023-01-15T10:30:00Z",
  },

// CIB (Corporate & Investment Banking)
  {
    id: "loan-cib-001",
    name: "Subordinated Debt Financing",
    amount: "$5,000,000",
    interestRate: "8.75%",
    relationshipId: "nexasphere-limited-liability-123",
    relationship: "NexaSphere Limited Liability",
    status: "Active",
    loanType: "Subordinated Debt",
    maturityDate: "2033-06-15",
    nextPaymentDate: "2023-07-01",
    collateralType: "business-assets",
    collateralValue: "$7,500,000",
    term: "120",
    paymentFrequency: "Quarterly",
    amortization: "Interest-Only with Balloon",
    purpose: "Expansion Capital",
    prepaymentPenalty: true,
    dealId: "deal-001", // Associated with Commercial Real Estate Loan deal
    loanCategory: "cib",
    selectedDocuments: [],
    createdAt: "2023-01-20T11:30:00Z",
    updatedAt: "2023-01-20T11:30:00Z",
  },
  {
    id: "loan-cib-002",
    name: "Mezzanine Financing Package",
    amount: "$3,500,000",
    interestRate: "9.25%",
    relationshipId: "zenith-grove-limited-liability-103",
    relationship: "Zenith Grove Limited Liability",
    status: "Active",
    loanType: "Mezzanine Financing",
    maturityDate: "2030-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "equity-interest",
    collateralValue: "$5,000,000",
    term: "84",
    paymentFrequency: "Quarterly",
    amortization: "Interest-Only with Equity Conversion Option",
    purpose: "Acquisition Financing",
    prepaymentPenalty: true,
    dealId: "deal-002", // Associated with Equipment Financing deal
    loanCategory: "cib",
    selectedDocuments: [],
    createdAt: "2023-02-05T09:15:00Z",
    updatedAt: "2023-02-05T09:15:00Z",
  },
  {
    id: "loan-cib-003",
    name: "Interest Rate Swap",
    amount: "$2,000,000",
    interestRate: "Variable to Fixed 4.5%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Customer Derivatives and Hedging",
    maturityDate: "2028-05-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "cash-secured",
    collateralValue: "$200,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "N/A - Derivative Product",
    purpose: "Interest Rate Risk Management",
    prepaymentPenalty: true,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "cib",
    selectedDocuments: [],
    createdAt: "2023-02-15T14:20:00Z",
    updatedAt: "2023-02-15T14:20:00Z",
  },
  // New CIB loan for deal-004
  {
    id: "loan-cib-004",
    name: "Acquisition Financing",
    amount: "$3,000,000",
    interestRate: "7.25%",
    relationshipId: "cascade-nexus-ltd-123",
    relationship: "Cascade Nexus Ltd.",
    status: "Active",
    loanType: "Subordinated Debt",
    maturityDate: "2034-06-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "business-assets",
    collateralValue: "$4,500,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Business Acquisition",
    prepaymentPenalty: true,
    dealId: "deal-004", // Associated with Business Acquisition deal
    loanCategory: "cib",
    selectedDocuments: [],
    createdAt: "2023-03-15T10:30:00Z",
    updatedAt: "2023-03-15T10:30:00Z",
  },

// Commercial
  {
    id: "loan-com-001",
    name: "Business Expansion Term Loan",
    amount: "$1,500,000",
    interestRate: "5.75%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Term Loan",
    maturityDate: "2033-03-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "business-assets",
    collateralValue: "$2,000,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Business Expansion",
    prepaymentPenalty: true,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-03-10T10:45:00Z",
    updatedAt: "2023-03-10T10:45:00Z",
  },
  {
    id: "loan-com-002",
    name: "Municipal Development Loan",
    amount: "$4,500,000",
    interestRate: "4.25%",
    relationshipId: "nexasphere-limited-liability-123",
    relationship: "NexaSphere Limited Liability",
    status: "Active",
    loanType: "Governmental Lending",
    maturityDate: "2043-05-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "government-guarantee",
    collateralValue: "$4,500,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Municipal Infrastructure Development",
    prepaymentPenalty: false,
    dealId: "deal-008", // Associated with Equipment Upgrade deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-03-20T11:30:00Z",
    updatedAt: "2023-03-20T11:30:00Z",
  },
  {
    id: "loan-com-003",
    name: "Securities Backed Credit Line",
    amount: "$1,000,000",
    interestRate: "3.95%",
    relationshipId: "guy-hawkins-104",
    relationship: "Guy Hawkins",
    status: "Active",
    loanType: "Securities Backed Loan",
    maturityDate: "2028-06-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "securities",
    collateralValue: "$2,000,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only",
    purpose: "Investment Opportunity",
    prepaymentPenalty: false,
    dealId: "deal-006", // Associated with Mortgage Refinance deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-03-25T09:20:00Z",
    updatedAt: "2023-03-25T09:20:00Z",
  },
  {
    id: "loan-com-004",
    name: "Standby Letter of Credit",
    amount: "$750,000",
    interestRate: "2.50%",
    relationshipId: "zenith-grove-limited-liability-103",
    relationship: "Zenith Grove Limited Liability",
    status: "Active",
    loanType: "Standby Letter of Credit Backed",
    maturityDate: "2024-08-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "cash-secured",
    collateralValue: "$775,000",
    term: "12",
    paymentFrequency: "Quarterly",
    amortization: "N/A - Fee Based",
    purpose: "Contract Performance Guarantee",
    prepaymentPenalty: false,
    dealId: "deal-002", // Associated with Equipment Financing deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-04-10T14:15:00Z",
    updatedAt: "2023-04-10T14:15:00Z",
  },
  {
    id: "loan-com-005",
    name: "Unsecured Business Loan",
    amount: "$350,000",
    interestRate: "7.25%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Unsecured Commercial",
    maturityDate: "2028-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "unsecured",
    collateralValue: "$0",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Working Capital",
    prepaymentPenalty: true,
    dealId: "deal-010", // Associated with Business Vehicle Fleet deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-04-15T10:30:00Z",
    updatedAt: "2023-04-15T10:30:00Z",
  },
  {
    id: "loan-com-006",
    name: "Inventory & Receivables Financing",
    amount: "$850,000",
    interestRate: "6.50%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Accounts Receivable & Inventory Financing",
    maturityDate: "2025-10-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "accounts-receivable-inventory",
    collateralValue: "$1,200,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Revolving with Minimum Payments",
    purpose: "Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-04-20T11:45:00Z",
    updatedAt: "2023-04-20T11:45:00Z",
  },
  {
    id: "loan-com-007",
    name: "Trust Financing",
    amount: "$1,200,000",
    interestRate: "5.15%",
    relationshipId: "guy-hawkins-104",
    relationship: "Guy Hawkins",
    status: "Active",
    loanType: "Loans to Trusts",
    maturityDate: "2033-11-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "trust-assets",
    collateralValue: "$2,500,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Estate Planning",
    prepaymentPenalty: true,
    dealId: "deal-006", // Associated with Mortgage Refinance deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-04-25T09:30:00Z",
    updatedAt: "2023-04-25T09:30:00Z",
  },
  {
    id: "loan-com-008",
    name: "Import Letter of Credit",
    amount: "$500,000",
    interestRate: "3.75%",
    relationshipId: "zenith-grove-limited-liability-103",
    relationship: "Zenith Grove Limited Liability",
    status: "Active",
    loanType: "Commercial Letter of Credit",
    maturityDate: "2024-05-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "cash-secured",
    collateralValue: "$525,000",
    term: "12",
    paymentFrequency: "At Maturity",
    amortization: "N/A - Fee Based",
    purpose: "International Trade Financing",
    prepaymentPenalty: false,
    dealId: "deal-002", // Associated with Equipment Financing deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-05-10T14:20:00Z",
    updatedAt: "2023-05-10T14:20:00Z",
  },
  {
    id: "loan-com-009",
    name: "Working Capital Line",
    amount: "$650,000",
    interestRate: "6.25%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Working Capital",
    maturityDate: "2025-06-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "business-assets",
    collateralValue: "$800,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only with Annual Cleanup",
    purpose: "Seasonal Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-05-15T10:45:00Z",
    updatedAt: "2023-05-15T10:45:00Z",
  },
  {
    id: "loan-com-010",
    name: "Non-Profit Facility Loan",
    amount: "$2,500,000",
    interestRate: "4.50%",
    relationshipId: "nexasphere-limited-liability-123",
    relationship: "NexaSphere Limited Liability",
    status: "Active",
    loanType: "Not-for-Profit Organization",
    maturityDate: "2043-07-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "real-estate",
    collateralValue: "$3,500,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Facility Construction",
    prepaymentPenalty: false,
    dealId: "deal-001", // Associated with Commercial Real Estate Loan deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-05-20T11:30:00Z",
    updatedAt: "2023-05-20T11:30:00Z",
  },
  {
    id: "loan-com-011",
    name: "Office Building Mortgage",
    amount: "$3,200,000",
    interestRate: "4.95%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Commercial Real Estate Mortgage",
    maturityDate: "2043-08-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$4,000,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Property Acquisition",
    prepaymentPenalty: true,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-05-25T09:45:00Z",
    updatedAt: "2023-05-25T09:45:00Z",
  },
  {
    id: "loan-com-012",
    name: "Construction Bridge Loan",
    amount: "$1,800,000",
    interestRate: "6.75%",
    relationshipId: "zenith-grove-limited-liability-103",
    relationship: "Zenith Grove Limited Liability",
    status: "Active",
    loanType: "Construction & Bridge Loan",
    maturityDate: "2025-09-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "real-estate",
    collateralValue: "$2,500,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only with Balloon",
    purpose: "Property Development",
    prepaymentPenalty: true,
    dealId: "deal-002", // Associated with Equipment Financing deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-06-10T14:30:00Z",
    updatedAt: "2023-06-10T14:30:00Z",
  },
  // New commercial loan for deal-007
  {
    id: "loan-com-013",
    name: "Inventory Line of Credit",
    amount: "$350,000",
    interestRate: "6.50%",
    relationshipId: "lumora-ventures-ltd-123",
    relationship: "Lumora Ventures Ltd",
    status: "Active",
    loanType: "Accounts Receivable & Inventory Financing",
    maturityDate: "2026-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "inventory",
    collateralValue: "$500,000",
    term: "36",
    paymentFrequency: "Monthly",
    amortization: "Revolving with Minimum Payments",
    purpose: "Inventory Financing",
    prepaymentPenalty: false,
    dealId: "deal-007", // Associated with Inventory Financing deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-06-15T10:30:00Z",
    updatedAt: "2023-06-15T10:30:00Z",
  },
  // New commercial loan for deal-009
  {
    id: "loan-com-014",
    name: "Commercial Property Acquisition Loan",
    amount: "$1,850,000",
    interestRate: "5.25%",
    relationshipId: "cascade-nexus-ltd-123",
    relationship: "Cascade Nexus Ltd.",
    status: "Active",
    loanType: "Commercial Real Estate Mortgage",
    maturityDate: "2043-07-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "real-estate",
    collateralValue: "$2,300,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Commercial Property Purchase",
    prepaymentPenalty: true,
    dealId: "deal-009", // Associated with Commercial Property Purchase deal
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2023-06-20T11:45:00Z",
    updatedAt: "2023-06-20T11:45:00Z",
  },
  // New Medical Center CRE loan
  {
    id: "loan-com-015",
    name: "Medical Center CRE",
    amount: "$4,200,000",
    interestRate: "4.85%",
    relationshipId: "nexasphere-limited-liability-123",
    relationship: "NexaSphere Limited Liability",
    status: "Active",
    loanType: "Commercial Real Estate Mortgage",
    maturityDate: "2044-01-15",
    nextPaymentDate: "2023-08-15",
    collateralType: "real-estate",
    collateralValue: "$5,250,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Medical Center Acquisition",
    prepaymentPenalty: true,
    loanCategory: "commercial",
    selectedDocuments: [],
    createdAt: "2024-01-15T09:30:00Z",
    updatedAt: "2024-01-15T09:30:00Z",
  },

// Consumer - No deal associations for consumer loans
  {
    id: "loan-con-001",
    name: "Auto Loan",
    amount: "$45,000",
    interestRate: "4.25%",
    relationshipId: "kristin-watson-456",
    relationship: "Kristin Watson",
    status: "Active",
    loanType: "Automobile Financing",
    maturityDate: "2028-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "vehicle",
    collateralValue: "$50,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Vehicle Purchase",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-06-15T10:30:00Z",
    updatedAt: "2023-06-15T10:30:00Z",
  },
  {
    id: "loan-con-002",
    name: "Home Equity Loan",
    amount: "$150,000",
    interestRate: "5.50%",
    relationshipId: "darlene-robertson-789",
    relationship: "Darlene Robertson",
    status: "Active",
    loanType: "Home Equity Loan",
    maturityDate: "2033-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "real-estate",
    collateralValue: "$500,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Home Improvement",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-06-20T11:45:00Z",
    updatedAt: "2023-06-20T11:45:00Z",
  },
  {
    id: "loan-con-003",
    name: "Home Equity Line of Credit",
    amount: "$100,000",
    interestRate: "6.25%",
    relationshipId: "guy-hawkins-104",
    relationship: "Guy Hawkins",
    status: "Active",
    loanType: "Home Equity Line of Credit",
    maturityDate: "2033-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$450,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only Draw Period, then Amortizing",
    purpose: "Debt Consolidation",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-06-25T09:30:00Z",
    updatedAt: "2023-06-25T09:30:00Z",
  },
  {
    id: "loan-con-004",
    name: "Life Insurance Policy Loan",
    amount: "$75,000",
    interestRate: "5.00%",
    relationshipId: "albert-flores-102",
    relationship: "Albert Flores",
    status: "Active",
    loanType: "Life Insurance Loan",
    maturityDate: "2028-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "insurance-policy",
    collateralValue: "$150,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only with Balloon",
    purpose: "Education Expenses",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-07-10T14:15:00Z",
    updatedAt: "2023-07-10T14:15:00Z",
  },
  {
    id: "loan-con-005",
    name: "Overdraft Protection",
    amount: "$5,000",
    interestRate: "12.99%",
    relationshipId: "kristin-watson-456",
    relationship: "Kristin Watson",
    status: "Active",
    loanType: "Overdraft Line of Credit",
    maturityDate: "2024-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "unsecured",
    collateralValue: "$0",
    term: "12",
    paymentFrequency: "Monthly",
    amortization: "Revolving",
    purpose: "Overdraft Protection",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-07-15T10:45:00Z",
    updatedAt: "2023-07-15T10:45:00Z",
  },
  {
    id: "loan-con-006",
    name: "Personal Loan",
    amount: "$25,000",
    interestRate: "9.75%",
    relationshipId: "darlene-robertson-789",
    relationship: "Darlene Robertson",
    status: "Active",
    loanType: "Unsecured Personal Loan",
    maturityDate: "2026-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "unsecured",
    collateralValue: "$0",
    term: "36",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Debt Consolidation",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-07-20T11:30:00Z",
    updatedAt: "2023-07-20T11:30:00Z",
  },
  {
    id: "loan-con-007",
    name: "CD-Secured Loan",
    amount: "$30,000",
    interestRate: "3.25%",
    relationshipId: "guy-hawkins-104",
    relationship: "Guy Hawkins",
    status: "Active",
    loanType: "CD-Secured Loan",
    maturityDate: "2025-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "certificate-of-deposit",
    collateralValue: "$35,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Investment Opportunity",
    prepaymentPenalty: true,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-07-25T09:45:00Z",
    updatedAt: "2023-07-25T09:45:00Z",
  },
  {
    id: "loan-con-008",
    name: "Boat Loan",
    amount: "$85,000",
    interestRate: "6.50%",
    relationshipId: "albert-flores-102",
    relationship: "Albert Flores",
    status: "Active",
    loanType: "Recreational Secured Loan",
    maturityDate: "2030-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "recreational-vehicle",
    collateralValue: "$95,000",
    term: "84",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Boat Purchase",
    prepaymentPenalty: false,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-08-10T14:30:00Z",
    updatedAt: "2023-08-10T14:30:00Z",
  },
  {
    id: "loan-con-009",
    name: "Residential Lot Loan",
    amount: "$120,000",
    interestRate: "5.75%",
    relationshipId: "kristin-watson-456",
    relationship: "Kristin Watson",
    status: "Active",
    loanType: "Residential Lot Loan",
    maturityDate: "2033-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "land",
    collateralValue: "$150,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Land Purchase",
    prepaymentPenalty: true,
    loanCategory: "consumer",
    selectedDocuments: [],
    createdAt: "2023-08-15T10:30:00Z",
    updatedAt: "2023-08-15T10:30:00Z",
  },

// Equipment Leasing - Direct
  {
    id: "loan-eld-001",
    name: "Manufacturing Equipment Lease",
    amount: "$350,000",
    interestRate: "5.50%",
    relationshipId: "zenith-grove-limited-liability-103",
    relationship: "Zenith Grove Limited Liability",
    status: "Active",
    loanType: "Direct Equipment Lease",
    maturityDate: "2028-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "equipment",
    collateralValue: "$400,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Lease with Purchase Option",
    purpose: "Equipment Acquisition",
    prepaymentPenalty: true,
    dealId: "deal-002", // Associated with Equipment Financing deal
    loanCategory: "equipment-leasing-direct",
    selectedDocuments: [],
    createdAt: "2023-08-20T11:45:00Z",
    updatedAt: "2023-08-20T11:45:00Z",
  },

// Leasing and Finance
  {
    id: "loan-lf-001",
    name: "Heavy Equipment Loan",
    amount: "$275,000",
    interestRate: "5.25%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Equipment Term Loan",
    maturityDate: "2028-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "equipment",
    collateralValue: "$325,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Equipment Purchase",
    prepaymentPenalty: true,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "leasing-finance",
    selectedDocuments: [],
    createdAt: "2023-08-25T09:30:00Z",
    updatedAt: "2023-08-25T09:30:00Z",
  },
  {
    id: "loan-lf-002",
    name: "Invoice Factoring Facility",
    amount: "$400,000",
    interestRate: "7.50%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Factoring/Invoice Finance",
    maturityDate: "2024-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "accounts-receivable",
    collateralValue: "$500,000",
    term: "12",
    paymentFrequency: "As Invoices Collected",
    amortization: "Revolving",
    purpose: "Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "leasing-finance",
    selectedDocuments: [],
    createdAt: "2023-09-10T14:15:00Z",
    updatedAt: "2023-09-10T14:15:00Z",
  },
  // New leasing and finance loan for deal-007
  {
    id: "loan-lf-003",
    name: "Inventory Financing Facility",
    amount: "$300,000",
    interestRate: "6.75%",
    relationshipId: "lumora-ventures-ltd-123",
    relationship: "Lumora Ventures Ltd",
    status: "Active",
    loanType: "Factoring/Invoice Finance",
    maturityDate: "2025-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "inventory",
    collateralValue: "$400,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Revolving",
    purpose: "Inventory Financing",
    prepaymentPenalty: false,
    dealId: "deal-007", // Associated with Inventory Financing deal
    loanCategory: "leasing-finance",
    selectedDocuments: [],
    createdAt: "2023-09-15T10:30:00Z",
    updatedAt: "2023-09-15T10:30:00Z",
  },
  // New leasing and finance loan for deal-004
  {
    id: "loan-lf-004",
    name: "Business Acquisition Equipment Financing",
    amount: "$750,000",
    interestRate: "5.50%",
    relationshipId: "cascade-nexus-ltd-123",
    relationship: "Cascade Nexus Ltd.",
    status: "Active",
    loanType: "Equipment Term Loan",
    maturityDate: "2029-09-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "equipment",
    collateralValue: "$900,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Equipment Acquisition",
    prepaymentPenalty: true,
    dealId: "deal-004", // Associated with Business Acquisition deal
    loanCategory: "leasing-finance",
    selectedDocuments: [],
    createdAt: "2023-09-20T11:45:00Z",
    updatedAt: "2023-09-20T11:45:00Z",
  },
  // New leasing and finance loan for deal-009
  {
    id: "loan-lf-005",
    name: "Property Equipment Financing",
    amount: "$500,000",
    interestRate: "5.25%",
    relationshipId: "cascade-nexus-ltd-123",
    relationship: "Cascade Nexus Ltd.",
    status: "Active",
    loanType: "Equipment Term Loan",
    maturityDate: "2028-09-25",
    nextPaymentDate: "2023-07-25",
    collateralType: "equipment",
    collateralValue: "$600,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Property Equipment",
    prepaymentPenalty: true,
    dealId: "deal-009", // Associated with Commercial Property Purchase deal
    loanCategory: "leasing-finance",
    selectedDocuments: [],
    createdAt: "2023-09-25T09:30:00Z",
    updatedAt: "2023-09-25T09:30:00Z",
  },

// Mortgage - Only associate commercial mortgages with deals
  {
    id: "loan-mtg-001",
    name: "Primary Residence Mortgage",
    amount: "$450,000",
    interestRate: "4.125%",
    relationshipId: "darlene-robertson-789",
    relationship: "Darlene Robertson",
    status: "Active",
    loanType: "Primary Residence Mortgage",
    maturityDate: "2053-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$550,000",
    term: "360",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Home Purchase",
    prepaymentPenalty: false,
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-09-15T10:45:00Z",
    updatedAt: "2023-09-15T10:45:00Z",
  },
  {
    id: "loan-mtg-002",
    name: "Vacation Home Mortgage",
    amount: "$350,000",
    interestRate: "4.75%",
    relationshipId: "guy-hawkins-104",
    relationship: "Guy Hawkins",
    status: "Active",
    loanType: "Second Home Mortgage",
    maturityDate: "2053-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "real-estate",
    collateralValue: "$425,000",
    term: "360",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Second Home Purchase",
    prepaymentPenalty: false,
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-09-20T11:30:00Z",
    updatedAt: "2023-09-20T11:30:00Z",
  },
  {
    id: "loan-mtg-003",
    name: "Private Banking Mortgage",
    amount: "$1,200,000",
    interestRate: "3.875%",
    relationshipId: "albert-flores-102",
    relationship: "Albert Flores",
    status: "Active",
    loanType: "Private Banking Client Mortgage",
    maturityDate: "2053-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$1,600,000",
    term: "360",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only for 10 years, then Standard",
    purpose: "Luxury Home Purchase",
    prepaymentPenalty: false,
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-09-25T09:45:00Z",
    updatedAt: "2023-09-25T09:45:00Z",
  },
  {
    id: "loan-mtg-004",
    name: "Wealth Management Mortgage",
    amount: "$2,500,000",
    interestRate: "3.625%",
    relationshipId: "kristin-watson-456",
    relationship: "Kristin Watson",
    status: "Active",
    loanType: "Wealth Banking Client Mortgage",
    maturityDate: "2053-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "real-estate",
    collateralValue: "$3,500,000",
    term: "360",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only",
    purpose: "Estate Purchase",
    prepaymentPenalty: false,
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-10-10T14:30:00Z",
    updatedAt: "2023-10-10T14:30:00Z",
  },
  {
    id: "loan-mtg-005",
    name: "Investment Property Mortgage",
    amount: "$650,000",
    interestRate: "5.25%",
    relationshipId: "darlene-robertson-789",
    relationship: "Darlene Robertson",
    status: "Active",
    loanType: "Residential Investment Property",
    maturityDate: "2053-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$800,000",
    term: "360",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Investment Property Purchase",
    prepaymentPenalty: true,
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-10-15T10:30:00Z",
    updatedAt: "2023-10-15T10:30:00Z",
  },
  {
    id: "loan-mtg-006",
    name: "Commercial Property Mortgage",
    amount: "$3,800,000",
    interestRate: "4.95%",
    relationshipId: "nexasphere-limited-liability-123",
    relationship: "NexaSphere Limited Liability",
    status: "Active",
    loanType: "Commercial Real Estate",
    maturityDate: "2043-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "real-estate",
    collateralValue: "$5,000,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "25-year amortization with 10-year balloon",
    purpose: "Office Building Purchase",
    prepaymentPenalty: true,
    dealId: "deal-001", // Associated with Commercial Real Estate Loan deal
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-10-20T11:45:00Z",
    updatedAt: "2023-10-20T11:45:00Z",
  },
  {
    id: "loan-mtg-007",
    name: "Custom Home Construction",
    amount: "$850,000",
    interestRate: "5.50%",
    relationshipId: "guy-hawkins-104",
    relationship: "Guy Hawkins",
    status: "Active",
    loanType: "Construction Loan to Individual",
    maturityDate: "2025-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$1,100,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only During Construction",
    purpose: "Custom Home Construction",
    prepaymentPenalty: false,
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-10-25T09:30:00Z",
    updatedAt: "2023-10-25T09:30:00Z",
  },
  {
    id: "loan-mtg-008",
    name: "Affordable Housing Development",
    amount: "$5,500,000",
    interestRate: "4.25%",
    relationshipId: "zenith-grove-limited-liability-103",
    relationship: "Zenith Grove Limited Liability",
    status: "Active",
    loanType: "Affordable Housing & Economic Development",
    maturityDate: "2043-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "real-estate",
    collateralValue: "$7,000,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Affordable Housing Development",
    prepaymentPenalty: false,
    dealId: "deal-002", // Associated with Equipment Financing deal
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-11-10T14:15:00Z",
    updatedAt: "2023-11-10T14:15:00Z",
  },
  {
    id: "loan-mtg-009",
    name: "Land Development Loan",
    amount: "$2,200,000",
    interestRate: "6.25%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Land Acquisition & Development",
    maturityDate: "2028-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "land",
    collateralValue: "$3,000,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only with Balloon",
    purpose: "Land Development",
    prepaymentPenalty: true,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-11-15T10:45:00Z",
    updatedAt: "2023-11-15T10:45:00Z",
  },
  {
    id: "loan-mtg-010",
    name: "Raw Land Loan",
    amount: "$950,000",
    interestRate: "6.75%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Unimproved Land Loan",
    maturityDate: "2033-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "land",
    collateralValue: "$1,250,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Land Investment",
    prepaymentPenalty: true,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "mortgage",
    selectedDocuments: [],
    createdAt: "2023-11-20T11:30:00Z",
    updatedAt: "2023-11-20T11:30:00Z",
  },

// Personal Card - No deal associations for personal cards
  {
    id: "loan-pc-001",
    name: "Platinum Credit Card",
    amount: "$25,000",
    interestRate: "16.99%",
    relationshipId: "darlene-robertson-789",
    relationship: "Darlene Robertson",
    status: "Active",
    loanType: "Personal Credit Card",
    maturityDate: "Revolving",
    nextPaymentDate: "2023-07-15",
    collateralType: "unsecured",
    collateralValue: "$0",
    term: "Revolving",
    paymentFrequency: "Monthly",
    amortization: "Revolving",
    purpose: "Personal Expenses",
    prepaymentPenalty: false,
    loanCategory: "personal-card",
    selectedDocuments: [],
    createdAt: "2023-11-25T09:45:00Z",
    updatedAt: "2023-11-25T09:45:00Z",
  },

// SBA (Small Business Administration)
  {
    id: "loan-sba-001",
    name: "SBA 7(a) Business Loan",
    amount: "$1,250,000",
    interestRate: "6.25%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "SBA 7(a) Loan",
    maturityDate: "2033-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "business-assets",
    collateralValue: "$1,500,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Business Expansion",
    prepaymentPenalty: false,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "sba",
    selectedDocuments: [],
    createdAt: "2023-12-10T14:30:00Z",
    updatedAt: "2023-12-10T14:30:00Z",
  },
  {
    id: "loan-sba-002",
    name: "SBA 504 Real Estate Loan",
    amount: "$2,000,000",
    interestRate: "5.50%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "SBA 504 Loan",
    maturityDate: "2043-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "real-estate",
    collateralValue: "$2,500,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Commercial Real Estate Purchase",
    prepaymentPenalty: false,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "sba",
    selectedDocuments: [],
    createdAt: "2023-12-15T10:30:00Z",
    updatedAt: "2023-12-15T10:30:00Z",
  },
  {
    id: "loan-sba-003",
    name: "SBA Express Loan",
    amount: "$350,000",
    interestRate: "7.25%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "SBA Express Loan",
    maturityDate: "2030-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "business-assets",
    collateralValue: "$400,000",
    term: "84",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "sba",
    selectedDocuments: [],
    createdAt: "2023-12-20T11:45:00Z",
    updatedAt: "2023-12-20T11:45:00Z",
  },
  // New SBA loan for deal-004
  {
    id: "loan-sba-004",
    name: "SBA 7(a) Acquisition Loan",
    amount: "$2,000,000",
    interestRate: "6.00%",
    relationshipId: "cascade-nexus-ltd-123",
    relationship: "Cascade Nexus Ltd.",
    status: "Active",
    loanType: "SBA 7(a) Loan",
    maturityDate: "2033-12-25",
    nextPaymentDate: "2023-07-25",
    collateralType: "business-assets",
    collateralValue: "$2,500,000",
    term: "120",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Business Acquisition",
    prepaymentPenalty: false,
    dealId: "deal-004", // Associated with Business Acquisition deal
    loanCategory: "sba",
    selectedDocuments: [],
    createdAt: "2023-12-25T09:30:00Z",
    updatedAt: "2023-12-25T09:30:00Z",
  },
  // New SBA loan for deal-009
  {
    id: "loan-sba-005",
    name: "SBA 504 Commercial Property Loan",
    amount: "$1,500,000",
    interestRate: "5.25%",
    relationshipId: "cascade-nexus-ltd-123",
    relationship: "Cascade Nexus Ltd.",
    status: "Active",
    loanType: "SBA 504 Loan",
    maturityDate: "2043-12-30",
    nextPaymentDate: "2023-07-30",
    collateralType: "real-estate",
    collateralValue: "$1,850,000",
    term: "240",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Commercial Property Purchase",
    prepaymentPenalty: false,
    dealId: "deal-009", // Associated with Commercial Property Purchase deal
    loanCategory: "sba",
    selectedDocuments: [],
    createdAt: "2023-12-30T11:45:00Z",
    updatedAt: "2023-12-30T11:45:00Z",
  },

// Small Business
  {
    id: "loan-sb-001",
    name: "Small Business Term Loan",
    amount: "$450,000",
    interestRate: "6.75%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Small Business Loan",
    maturityDate: "2028-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "business-assets",
    collateralValue: "$550,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Business Expansion",
    prepaymentPenalty: true,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2023-12-25T09:30:00Z",
    updatedAt: "2023-12-25T09:30:00Z",
  },
  {
    id: "loan-sb-002",
    name: "Small Business A/R Financing",
    amount: "$250,000",
    interestRate: "7.50%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Small Business A/R Financing",
    maturityDate: "2025-10-10",
    nextPaymentDate: "2023-07-10",
    collateralType: "accounts-receivable",
    collateralValue: "$350,000",
    term: "24",
    paymentFrequency: "Monthly",
    amortization: "Revolving",
    purpose: "Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2024-01-10T14:15:00Z",
    updatedAt: "2024-01-10T14:15:00Z",
  },
  {
    id: "loan-sb-003",
    name: "Small Business Equipment Loan",
    amount: "$175,000",
    interestRate: "5.95%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Small Business Equipment Loan",
    maturityDate: "2029-07-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "equipment",
    collateralValue: "$200,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Equipment Purchase",
    prepaymentPenalty: true,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2024-01-15T10:45:00Z",
    updatedAt: "2024-01-15T10:45:00Z",
  },
  {
    id: "loan-sb-004",
    name: "Small Business Line of Credit",
    amount: "$150,000",
    interestRate: "7.25%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Small Business Line of Credit",
    maturityDate: "2026-08-20",
    nextPaymentDate: "2023-07-20",
    collateralType: "business-assets",
    collateralValue: "$200,000",
    term: "36",
    paymentFrequency: "Monthly",
    amortization: "Interest-Only with Annual Cleanup",
    purpose: "Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-003", // Associated with Working Capital Line deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2024-01-20T11:30:00Z",
    updatedAt: "2024-01-20T11:30:00Z",
  },
  {
    id: "loan-sb-005",
    name: "Small Business Working Capital",
    amount: "$125,000",
    interestRate: "6.95%",
    relationshipId: "port-city-coffee-123",
    relationship: "Port City Coffee",
    status: "Active",
    loanType: "Small Business Working Capital",
    maturityDate: "2027-09-15",
    nextPaymentDate: "2023-07-15",
    collateralType: "business-assets",
    collateralValue: "$150,000",
    term: "48",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Working Capital",
    prepaymentPenalty: false,
    dealId: "deal-005", // Associated with Expansion Project deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2024-01-25T09:45:00Z",
    updatedAt: "2024-01-25T09:45:00Z",
  },
  // New small business loan for deal-007
  {
    id: "loan-sb-006",
    name: "Inventory Financing Line",
    amount: "$200,000",
    interestRate: "7.25%",
    relationshipId: "lumora-ventures-ltd-123",
    relationship: "Lumora Ventures Ltd",
    status: "Active",
    loanType: "Small Business A/R Financing",
    maturityDate: "2026-01-30",
    nextPaymentDate: "2023-07-30",
    collateralType: "inventory",
    collateralValue: "$250,000",
    term: "36",
    paymentFrequency: "Monthly",
    amortization: "Revolving",
    purpose: "Inventory Financing",
    prepaymentPenalty: false,
    dealId: "deal-007", // Associated with Inventory Financing deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2024-01-30T14:15:00Z",
    updatedAt: "2024-01-30T14:15:00Z",
  },
  // New small business loan for deal-010
  {
    id: "loan-sb-007",
    name: "Vehicle Fleet Financing",
    amount: "$320,000",
    interestRate: "6.50%",
    relationshipId: "pivot-pulse-co-101",
    relationship: "Pivot Pulse Co.",
    status: "Active",
    loanType: "Small Business Equipment Loan",
    maturityDate: "2029-02-05",
    nextPaymentDate: "2023-07-05",
    collateralType: "vehicles",
    collateralValue: "$400,000",
    term: "60",
    paymentFrequency: "Monthly",
    amortization: "Standard",
    purpose: "Vehicle Fleet Purchase",
    prepaymentPenalty: true,
    dealId: "deal-010", // Associated with Business Vehicle Fleet deal
    loanCategory: "small-business",
    selectedDocuments: [],
    createdAt: "2024-02-05T10:30:00Z",
    updatedAt: "2024-02-05T10:30:00Z",
  },
]

// Get loans from localStorage or use initial data
export const getLoans = (): Loan[] => {
  if (typeof window === "undefined") {
    return initialLoans
  }

const storedLoans = localStorage.getItem("loans")
  if (!storedLoans) {
    localStorage.setItem("loans", JSON.stringify(initialLoans))
    return initialLoans
  }

const parsedLoans = JSON.parse(storedLoans)

// Check if Medical Center CRE loan exists, if not add it
  const medicalCenterLoanExists = parsedLoans.some((loan: Loan) => loan.id === "loan-com-015")

if (!medicalCenterLoanExists) {
    const medicalCenterLoan: Loan = {
      id: "loan-com-015",
      name: "Medical Center CRE",
      amount: "$4,200,000",
      interestRate: "4.85%",
      relationshipId: "nexasphere-limited-liability-123",
      relationship: "NexaSphere Limited Liability",
      status: "Active",
      loanType: "Commercial Real Estate Mortgage",
      maturityDate: "2044-01-15",
      nextPaymentDate: "2023-08-15",
      collateralType: "real-estate",
      collateralValue: "$5,250,000",
      term: "240",
      paymentFrequency: "Monthly",
      amortization: "Standard",
      purpose: "Medical Center Acquisition",
      prepaymentPenalty: true,
      loanCategory: "commercial",
      selectedDocuments: [],
      createdAt: "2024-01-15T09:30:00Z",
      updatedAt: "2024-01-15T09:30:00Z",
    }

parsedLoans.push(medicalCenterLoan)
    localStorage.setItem("loans", JSON.stringify(parsedLoans))
  }

return parsedLoans
}

// Get a single loan by ID
export const getLoanById = (id: string): Loan | undefined => {
  const loans = getLoans()
  return loans.find((loan) => loan.id === id)
}

// Add a new loan
export const addLoan = (loanData: Partial<Loan>): Loan => {
  const loans = getLoans()

if (!loanData.relationshipId) {
    throw new Error("A loan must be associated with a relationship")
  }

const newLoan: Loan = {
    id: `loan-${uuidv4()}`,
    name: loanData.name || "New Loan",
    amount: loanData.amount || "$0",
    interestRate: loanData.interestRate || "",
    relationshipId: loanData.relationshipId,
    relationship: loanData.relationship || "",
    status: loanData.status || "Pending",
    loanType: loanData.loanType || "",
    maturityDate: loanData.maturityDate || "",
    nextPaymentDate: loanData.nextPaymentDate || "",
    collateralType: loanData.collateralType || "",
    collateralValue: loanData.collateralValue || "$0",
    term: loanData.term || "",
    paymentFrequency: loanData.paymentFrequency || "Monthly",
    amortization: loanData.amortization || "Standard",
    purpose: loanData.purpose || "",
    prepaymentPenalty: loanData.prepaymentPenalty || false,
    dealId: loanData.dealId || "",
    loanCategory: loanData.loanCategory || "",
    selectedDocuments: loanData.selectedDocuments || [],
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  }

const updatedLoans = [...loans, newLoan]

if (typeof window !== "undefined") {
    localStorage.setItem("loans", JSON.stringify(updatedLoans))
  }

return newLoan
}

// Update an existing loan
export const updateLoan = (id: string, loanData: Partial<Loan>): Loan | undefined => {
  const loans = getLoans()
  const loanIndex = loans.findIndex((loan) => loan.id === id)

if (loanIndex === -1) {
    return undefined
  }

const updatedLoan = {
    ...loans[loanIndex],
    ...loanData,
    updatedAt: new Date().toISOString(),
  }

loans[loanIndex] = updatedLoan

if (typeof window !== "undefined") {
    localStorage.setItem("loans", JSON.stringify(loans))
  }

return updatedLoan
}

// Delete a loan
export const deleteLoan = (id: string): boolean => {
  const loans = getLoans()
  const filteredLoans = loans.filter((loan) => loan.id !== id)

if (filteredLoans.length === loans.length) {
    return false
  }

if (typeof window !== "undefined") {
    localStorage.setItem("loans", JSON.stringify(filteredLoans))
  }

return true
}

// Get loans by relationship ID
export const getLoansByRelationship = (relationshipId: string): Loan[] => {
  const loans = getLoans()
  return loans.filter((loan) => loan.relationshipId === relationshipId)
}

// Get loans by deal ID
export const getLoansByDeal = (dealId: string): Loan[] => {
  const loans = getLoans()
  return loans.filter((loan) => loan.dealId === dealId)
}

// Add a function to get loans by deal ID
export const getLoansByDealId = (dealId: string) => {
  const loans = getLoans()
  return loans.filter((loan) => loan.dealId === dealId)
}
[V0_FILE]typescriptreact:file="app/components/document-drawer.tsx" isMerged="true"
"use client"

import { Badge } from "@/components/ui/badge"

import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"
import { CheckCircle, Clock, AlertCircle, Download, Edit, Trash, FileText } from "lucide-react"
import { StatusBadge } from "@/app/components/status-badge"

interface DocumentDrawerProps {
  isOpen: boolean
  onClose: () => void
  document: {
    name: string
    clientName: string
    assignedTo: string
    dueDate: string
    status: string
    type?: string
    uploadDate?: string
    fileSize?: string
    lastModified?: string
    version?: string
    tags?: string[]
    description?: string
  } | null
}

export function DocumentDrawer({ isOpen, onClose, document }: DocumentDrawerProps) {
  const getStatusIcon = (status: string) => {
    switch (status) {
      case "Complete":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "In Progress":
        return <Clock className="h-5 w-5 text-blue-500" />
      case "To Do":
        return <Clock className="h-5 w-5 text-gray-500" />
      case "Exception":
        return <AlertCircle className="h-5 w-5 text-red-500" />
      case "Waived":
        return <CheckCircle className="h-5 w-5 text-gray-400" />
      default:
        return <CheckCircle className="h-5 w-5 text-gray-400" />
    }
  }

const getDocumentDetails = (document) => {
    if (document.name === "Financial Statements") {
      return {
        type: "PDF Document",
        fileSize: "3.2 MB",
        uploadDate: "04/15/2024",
        lastModified: "04/15/2024, 10:45 AM",
        version: "1.0",
        tags: ["Financial", "Annual", "2023", "Audit"],
        description:
          "Annual financial statements including income statement, balance sheet, and cash flow statement for the fiscal year 2023. Prepared in accordance with GAAP standards and reviewed by external auditors.",
      }
    }
    return {}
  }

if (!document) return null

const customDetails = getDocumentDetails(document)

return (
    <Sheet open={isOpen} onOpenChange={onClose}>
      <SheetContent
        side="right"
        className="lg:max-w-[700px] w-[90vw] p-0 flex flex-col border-l shadow-xl"
        overlayProps={{ className: "hidden" }}
      >
        <SheetHeader className="p-6 border-b">
          <SheetTitle className="text-xl">{document.name}</SheetTitle>
          <SheetDescription className="flex items-center mt-2">
            {getStatusIcon(document.status)}
            <span className="ml-2">{document.status}</span>
          </SheetDescription>
        </SheetHeader>

<div className="flex-1 overflow-auto">
          <div className="p-6 border-b">
            <h4 className="text-lg font-semibold mb-4">Preview</h4>
            {document.name === "Financial Statements" ? (
              <div className="bg-white border rounded-md shadow-sm overflow-hidden">
                <div className="bg-gray-100 p-3 border-b flex justify-between items-center">
                  <div className="flex items-center">
                    <FileText className="h-5 w-5 text-red-500 mr-2" />
                    <span className="text-sm font-medium">Financial_Statements_2024.pdf</span>
                  </div>
                  <span className="text-xs text-gray-500">2 of 8</span>
                </div>

<div className="p-6 bg-white">
                  <div className="text-center mb-6">
                    <h5 className="text-xl font-bold mb-1">NexaSphere Limited Liability</h5>
                    <h6 className="text-lg font-semibold mb-3">Financial Statements</h6>
                    <p className="text-sm text-gray-600">For the Year Ended December 31, 2023</p>
                  </div>

<div className="mb-6">
                    <h6 className="text-base font-semibold mb-2 border-b pb-1">Income Statement</h6>
                    <div className="grid grid-cols-2 gap-1 text-sm">
                      <div>Revenue</div>
                      <div className="text-right">$8,750,000</div>
                      <div>Cost of Goods Sold</div>
                      <div className="text-right">$5,250,000</div>
                      <div className="font-medium">Gross Profit</div>
                      <div className="text-right font-medium">$3,500,000</div>
                      <div>Operating Expenses</div>
                      <div className="text-right">$2,450,000</div>
                      <div className="font-medium">Operating Income</div>
                      <div className="text-right font-medium">$1,050,000</div>
                      <div>Other Income/Expenses</div>
                      <div className="text-right">($150,000)</div>
                      <div>Income Tax</div>
                      <div className="text-right">$225,000</div>
                      <div className="font-bold border-t pt-1">Net Income</div>
                      <div className="text-right font-bold border-t pt-1">$675,000</div>
                    </div>
                  </div>

<div>
                    <h6 className="text-base font-semibold mb-2 border-b pb-1">Key Financial Ratios</h6>
                    <div className="grid grid-cols-2 gap-1 text-sm">
                      <div>Current Ratio</div>
                      <div className="text-right">1.43</div>
                      <div>Debt to Equity</div>
                      <div className="text-right">3.8</div>
                      <div>Return on Assets</div>
                      <div className="text-right">8.2%</div>
                      <div>Profit Margin</div>
                      <div className="text-right">7.7%</div>
                    </div>
                  </div>
                </div>
              </div>
            ) : (
              <div className="bg-gray-50 border rounded-md flex items-center justify-center py-8">
                <div className="text-center p-6">
                  <FileText className="h-16 w-16 text-gray-400 mx-auto mb-4" />
                  <h4 className="text-lg font-medium mb-2">{document.name}</h4>
                  <p className="text-sm text-gray-500 mb-4">
                    {document.type || "PDF Document"} • {document.fileSize || "2.4 MB"}
                  </p>
                  <Button variant="outline" size="sm" className="mx-auto bg-transparent">
                    <Download className="h-4 w-4 mr-2" />
                    Download
                  </Button>
                </div>
              </div>
            )}
          </div>

<div className="p-6 border-b">
            <h4 className="text-lg font-semibold mb-4">Details</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <div className="field-label">Document Name</div>
                <p className="font-medium">{document.name}</p>
              </div>
              <div>
                <div className="field-label">Client</div>
                <p className="font-medium">{document.clientName}</p>
              </div>
              <div>
                <div className="field-label">Status</div>
                <div>
                  <StatusBadge status={document.status} />
                </div>
              </div>
              <div>
                <div className="field-label">Assigned To</div>
                <p className="font-medium">{document.assignedTo}</p>
              </div>
              <div>
                <div className="field-label">Due Date</div>
                <p className="font-medium">{document.dueDate}</p>
              </div>
              <div>
                <div className="field-label">Document Type</div>
                <p className="font-medium">{customDetails.type || document.type || "PDF Document"}</p>
              </div>
              <div>
                <div className="field-label">Upload Date</div>
                <p className="font-medium">{customDetails.uploadDate || document.uploadDate || "05/15/2024"}</p>
              </div>
              <div>
                <div className="field-label">File Size</div>
                <p className="font-medium">{customDetails.fileSize || document.fileSize || "2.4 MB"}</p>
              </div>
              <div>
                <div className="field-label">Last Modified</div>
                <p className="font-medium">
                  {customDetails.lastModified || document.lastModified || "05/15/2024, 2:30 PM"}
                </p>
              </div>
              <div>
                <div className="field-label">Version</div>
                <p className="font-medium">{customDetails.version || document.version || "1.0"}</p>
              </div>
              <div className="col-span-2">
                <div className="field-label">Tags</div>
                <div className="flex flex-wrap gap-2 mt-1">
                  {(customDetails.tags || document.tags || ["Financial", "Tax", "2024"]).map((tag, index) => (
                    <Badge key={index} variant="outline">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </div>
              <div className="col-span-2">
                <div className="field-label">Description</div>
                <p className="font-medium text-sm text-gray-600">
                  {customDetails.description ||
                    document.description ||
                    "This document contains important financial information required for the annual review process."}
                </p>
              </div>
            </div>
          </div>

<div className="p-6">
            <h4 className="text-lg font-semibold mb-4">History</h4>
            <div className="space-y-0 relative">
              <div className="absolute left-[7px] top-[24px] w-0.5 h-[calc(100%-48px)] bg-gray-200"></div>

<div className="relative pl-4">
                <div className="absolute w-3 h-3 bg-blue-500 rounded-full -left-[3px] top-1.5 z-10"></div>
                <p className="text-sm font-medium">Document uploaded</p>
                <p className="text-xs text-gray-500">05/15/2024, 2:30 PM • Whitney Wright</p>
              </div>

<div className="relative pl-4 pt-6">
                <div className="absolute w-3 h-3 bg-gray-300 rounded-full -left-[3px] top-8 z-10"></div>
                <p className="text-sm font-medium">Document reviewed</p>
                <p className="text-xs text-gray-500">05/16/2024, 10:15 AM • Larry Owens</p>
              </div>

<div className="relative pl-4 pt-6">
                <div className="absolute w-3 h-3 bg-gray-300 rounded-full -left-[3px] top-8 z-10"></div>
                <p className="text-sm font-medium">Status changed to "In Progress"</p>
                <p className="text-xs text-gray-500">05/16/2024, 10:20 AM • Larry Owens</p>
              </div>

<div className="relative pl-4 pt-6">
                <div className="absolute w-3 h-3 bg-gray-300 rounded-full -left-[3px] top-8 z-10"></div>
                <p className="text-sm font-medium">Comment added</p>
                <p className="text-xs text-gray-500">05/17/2024, 3:45 PM • Whitney Wright</p>
                <div className="mt-2 p-3 bg-gray-50 rounded-md text-sm">
                  "Please review section 3.2 for compliance with updated regulations."
                </div>
              </div>

<div className="relative pl-4 pt-6">
                <div className="absolute w-3 h-3 bg-gray-300 rounded-full -left-[3px] top-8 z-10"></div>
                <p className="text-sm font-medium">Status changed to "Complete"</p>
                <p className="text-xs text-gray-500">05/20/2024, 11:30 AM • Larry Owens</p>
              </div>
            </div>
          </div>
        </div>

<SheetFooter className="p-4 border-t mt-auto">
          <div className="flex justify-between w-full">
            <Button variant="outline" size="sm">
              <Download className="h-4 w-4 mr-2" />
              Download
            </Button>
            <div className="space-x-2">
              <Button variant="outline" size="sm">
                <Edit className="h-4 w-4 mr-2" />
                Edit
              </Button>
              <Button variant="destructive" size="sm">
                <Trash className="h-4 w-4 mr-2" />
                Delete
              </Button>
            </div>
          </div>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}
[V0_FILE]typescriptreact:file="app/components/data-loader.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { addSummitPropertyGroup, getRelationships } from "@/lib/relationship-store"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { CheckCircle2, Building2 } from "lucide-react"

export function DataLoader() {
  const [isLoaded, setIsLoaded] = useState(false)
  const [summitExists, setSummitExists] = useState(false)

useEffect(() => {
    // Check if Summit Property Group already exists
    const relationships = getRelationships()
    const exists = relationships.some((r) => r.id === "summit-property-group-001")
    setSummitExists(exists)
    setIsLoaded(true)
  }, [])

const handleContinue = () => {
    addSummitPropertyGroup()
    setSummitExists(true)
    // Refresh the page to show the new data
    window.location.reload()
  }

if (!isLoaded) return null

if (summitExists) {
    return (
      <Card className="bg-green-50 border-green-200">
        <CardContent className="pt-6">
          <div className="flex items-center gap-2 text-green-700">
            <CheckCircle2 className="h-5 w-5" />
            <span className="font-medium">Properties loaded successfully!</span>
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card className="bg-white border-gray-200">
      <CardContent className="pt-8 pb-8 px-6">
        <div className="flex flex-col items-center text-center space-y-6">
          {/* Icon */}
          <div className="relative">
            <div className="w-24 h-24 rounded-full border-4 border-gray-900 flex items-center justify-center">
              <CheckCircle2 className="h-12 w-12 text-[#103656] fill-[#103656]" />
            </div>
            <div className="absolute -bottom-2 -right-2 w-12 h-12 bg-white border-4 border-gray-900 rounded-lg flex items-center justify-center transform rotate-12">
              <div className="w-8 h-1 bg-gray-900 rounded" />
              <div className="w-8 h-1 bg-gray-900 rounded absolute top-1/2 -translate-y-1/2" />
              <div className="w-1 h-8 bg-gray-900 rounded absolute left-1/2 -translate-x-1/2" />
            </div>
          </div>

{/* Heading */}
          <h2 className="text-2xl font-bold text-gray-900">3 properties detected</h2>

{/* Property List */}
          <div className="w-full space-y-3">
            <div className="flex items-center gap-3 text-left">
              <Building2 className="h-5 w-5 text-gray-600 flex-shrink-0" />
              <span className="text-gray-900">4800 Parker Farm Lane, Wilmington NC, 28403</span>
            </div>
            <div className="flex items-center gap-3 text-left">
              <Building2 className="h-5 w-5 text-gray-600 flex-shrink-0" />
              <span className="text-gray-900">222 Market Street, Wilmington NC, 28403</span>
            </div>
            <div className="flex items-center gap-3 text-left">
              <Building2 className="h-5 w-5 text-gray-600 flex-shrink-0" />
              <span className="text-gray-900">456 Greenville Rd, Wilmington NC, 28403</span>
            </div>
          </div>

{/* Continue Button */}
          <Button
            onClick={handleContinue}
            className="w-full max-w-xs bg-[#103656] hover:bg-[#0d2a43] text-white font-medium py-6 text-base"
          >
            Continue
          </Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/cashflow-analysis-list.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Building, FileText } from "lucide-react"
import { TenancyScheduleUpload } from "./tenancy-schedule-upload"
import { TenancyDocumentReview } from "./tenancy-document-review"

interface CashflowAnalysis {
  id: string
  name: string
  properties: string[]
  loans: string[]
  createdBy: string
  createdDate: string
  lastModified: string
  status: "completed" | "draft"
}

interface CashflowAnalysisListProps {
  relationshipId: string
  onCreateNew: () => void
  onViewAnalysis: (analysisId: string) => void
}

type UploadViewState = "list" | "upload" | "review"

export function CashflowAnalysisList({ relationshipId, onCreateNew, onViewAnalysis }: CashflowAnalysisListProps) {
  const [viewState, setViewState] = useState<UploadViewState>("list")

const [analyses] = useState<CashflowAnalysis[]>([
    {
      id: "analysis-1",
      name: "Cashflow Analysis 07/21/2024",
      properties: [
        "4800 Parker Farm Ln Wilmington NC",
        "222 Market Street, Wilmington NC, 28403",
        "456 Greenville Rd, Wilmington NC, 28403",
      ],
      loans: ["CRE Expansion Loan 0424", "CRE Loan 0524"],
      createdBy: "Whitney Wright",
      createdDate: "10/21/2024 10:00am",
      lastModified: "10/21/2024 10:00am",
      status: "completed",
    },
  ])

const handleUploadComplete = () => {
    setViewState("review")
  }

const handleReviewComplete = () => {
    setViewState("list")
  }

if (viewState === "upload") {
    return <TenancyScheduleUpload onBack={() => setViewState("list")} onComplete={handleUploadComplete} />
  }

if (viewState === "review") {
    return <TenancyDocumentReview onBack={() => setViewState("list")} onContinue={handleReviewComplete} />
  }

if (analyses.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-16 px-4">
        <div className="max-w-md w-full text-center space-y-6">
          <h2 className="text-2xl font-semibold text-gray-900">No analyses have been created</h2>
          <p className="text-gray-600 text-base">
            Create a new analysis to start cashflow forecasting. Once saved, your analysis history will appear here.
          </p>
          <div className="flex flex-col gap-3 pt-4">
            <Button onClick={onCreateNew} className="bg-[#03234d] hover:bg-[#03234d]/90 text-white">
              Create Analysis
            </Button>
            <Button
              variant="outline"
              className="border-gray-300 bg-transparent hover:bg-gray-50"
              onClick={() => setViewState("upload")}
            >
              Import Tenancy Schedule
            </Button>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="space-y-6">
      {/* Header with action buttons */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h2 className="text-xl font-semibold">CRE Cashflow Analyses ({analyses.length})</h2>
        </div>
        <div className="flex gap-2">
          <Button
            variant="outline"
            className="border-gray-300 bg-white hover:bg-gray-50"
            onClick={() => setViewState("upload")}
          >
            Import Tenancy Schedule
          </Button>
          <Button onClick={onCreateNew} className="bg-[#103656] hover:bg-[#103656]/90 text-white">
            Create Analysis
          </Button>
        </div>
      </div>

{/* Analysis History List */}
      <div className="space-y-4">
        {analyses.map((analysis) => (
          <Card key={analysis.id} className="border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
            <CardContent className="p-6">
              <div className="flex items-start justify-between gap-4">
                <div className="space-y-4 flex-1">
                  {/* Analysis Title */}
                  <h3 className="text-lg font-medium text-gray-900">{analysis.name}</h3>

{/* Properties */}
                  <div className="flex items-start gap-2">
                    <Building className="h-4 w-4 text-gray-500 mt-0.5 flex-shrink-0" />
                    <div className="text-sm text-gray-700">{analysis.properties.join("  ")}</div>
                  </div>

{/* Loans */}
                  <div className="flex items-start gap-2">
                    <FileText className="h-4 w-4 text-gray-500 mt-0.5 flex-shrink-0" />
                    <div className="text-sm text-gray-700">{analysis.loans.join("  ")}</div>
                  </div>

{/* Created and Modified Info */}
                  <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 text-sm text-gray-500">
                    <div>
                      Created By: {analysis.createdBy} on {analysis.createdDate}
                    </div>
                    <div>
                      Last Modified By: {analysis.createdBy} on {analysis.lastModified}
                    </div>
                  </div>
                </div>

{/* View Button */}
                <Button
                  variant="outline"
                  onClick={() => onViewAnalysis(analysis.id)}
                  className="ml-4 border-gray-300 flex-shrink-0"
                >
                  View
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-[16px] border-none bg-white text-card-foreground shadow-[0_4px_20px_rgba(0,0,0,0.08)] overflow-hidden",
      className,
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h4 ref={ref} className={cn("text-[1.625rem] font-serif font-normal leading-none", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("flex items-center justify-center p-4 bg-gray-50 border-t border-gray-100", className)}
      {...props}
    />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { ChevronDown, ChevronRight, MoreVertical, Users, User, MessageSquare, Mail, ArrowUp } from "lucide-react"
import { Briefcase, Calendar, Phone, FileText, Plus, UserPlus } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, ResponsiveContainer, Tooltip, Legend } from "recharts"
import Image from "next/image"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Button } from "@/components/ui/button"
import { initialRelationships } from "@/app/data/relationships"
import { initialDeals } from "@/app/data/deals"
import { GlobalTasksCard } from "@/app/components/global-tasks-card"
import { getLoans } from "@/lib/loan-store"
import { getAllTasks } from "@/app/data/tasks"
import { DataLoader } from "@/app/components/data-loader"

// Pipeline data
const pipelineData = {
  labels: [
    "Qualification",
    "Proposal",
    "Credit Underwriting",
    "Approval",
    "Processing",
    "Doc Prep",
    "Closing",
    "Compliance",
    "Booked",
  ],
  datasets: [
    {
      data: [1400, 800, 600, 400, 300, 200, 200, 200, 100],
      backgroundColor: [
        "#3B82F6", // blue
        "#60A5FA",
        "#818CF8", // indigo
        "#A78BFA", // purple
        "#34D399", // emerald
        "#2DD4BF", // teal
        "#FB923C", // orange
        "#FBBF24", // amber
        "#F87171", // red
      ],
      borderWidth: 0,
      cutout: "75%",
    },
  ],
}

const pipelineOptions = {
  plugins: {
    legend: {
      display: false,
    },
    tooltip: {
      callbacks: {
        title: (tooltipItems) => {
          return tooltipItems[0].label
        },
        label: (context) => {
          const value = context.raw
          return `$${value}M`
        },
      },
      displayColors: true,
      backgroundColor: "rgba(0, 0, 0, 0.8)",
      padding: 10,
      titleFont: {
        size: 14,
        weight: "bold",
      },
      bodyFont: {
        size: 13,
      },
    },
  },
  responsive: true,
  maintainAspectRatio: false,
}

// Loan type data
const loanTypeData = [
  { name: "Mortgage", value: 450 },
  { name: "Commercial", value: 380 },
  { name: "Consumer", value: 320 },
  { name: "Leasing and Finance", value: 280 },
  { name: "Small Business", value: 220 },
  { name: "SBA", value: 180 },
  { name: "CIB", value: 120 },
  { name: "Equipment Leasing", value: 80 },
]

const loanTypeColors = ["#3B82F6", "#646464", "#E94FD8", "#A78BFA", "#34D399", "#2DD4BF", "#FB923C", "#F87171"]

// Helper function to get status color
const getStatusColor = (status: string) => {
  switch (status) {
    case "Active":
      return "green-100"
    case "Pending Approval":
      return "yellow-100"
    case "In Review":
      return "blue-100"
    case "Documentation":
      return "orange-100"
    default:
      return "gray-100"
  }
}

// Helper function to get status text color
const getStatusTextColor = (status: string) => {
  switch (status) {
    case "Active":
      return "green-800"
    case "Pending Approval":
      return "yellow-800"
    case "In Review":
      return "blue-800"
    case "Documentation":
      return "orange-800"
    default:
      return "gray-800"
  }
}

export default function HomePage() {
  const router = useRouter()

useEffect(() => {
    router.push("/relationships/nexasphere-limited-liability-123?tab=cashflow-analysis")
  }, [router])

// Chart data
  const data = {
    labels: ["Lead 1", "Lead 2", "Lead 3", "Lead 4"],
    datasets: [
      {
        data: [25, 30, 15, 30],
        backgroundColor: ["#4285F4", "#646464", "#E94FD8", "#00A19C"],
        borderWidth: 0,
        cutout: "70%",
      },
    ],
  }

const chartOptions = {
    plugins: {
      legend: {
        display: false,
      },
    },
    responsive: true,
    maintainAspectRatio: true,
  }

// Get total counts
  const totalRelationships = initialRelationships.length
  const activeDeals = initialDeals.filter(
    (deal) => deal.status === "In Progress" || deal.status === "Pending Approval",
  ).length

return (
    <div className="flex-1 flex flex-col md:flex-row p-4 gap-4 overflow-y-auto">
      {/* Left Sidebar */}
      <div className="w-full md:w-[350px] flex flex-col gap-4">
        {/* DataLoader component */}
        <DataLoader />

{/* Quick Actions Card */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <CardTitle className="text-base">Quick Actions</CardTitle>
          </CardHeader>
          <CardContent className="px-4 pb-4 pt-0">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <div className="cursor-pointer group" onClick={() => router.push("/relationships")}>
                  <div className="flex items-center gap-2 mb-2">
                    <div className="bg-blue-500 p-1 rounded">
                      <Users className="h-4 w-4 text-white" />
                    </div>
                    <span className="text-2xl font-bold group-hover:text-blue-600 transition-colors">
                      {totalRelationships}
                    </span>
                  </div>
                  <div className="text-sm text-gray-500 mb-3 group-hover:text-blue-600 transition-colors">
                    Total Relationships
                  </div>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full bg-transparent"
                  onClick={() => router.push("/relationships/new")}
                >
                  <UserPlus className="h-3.5 w-3.5 mr-2" />
                  New Relationship
                </Button>
              </div>
              <div>
                <div className="cursor-pointer group" onClick={() => router.push("/deals")}>
                  <div className="flex items-center gap-2 mb-2">
                    <div className="bg-teal-500 p-1 rounded">
                      <Briefcase className="h-4 w-4 text-white" />
                    </div>
                    <span className="text-2xl font-bold group-hover:text-blue-600 transition-colors">
                      {activeDeals}
                    </span>
                  </div>
                  <div className="text-sm text-gray-500 mb-3 group-hover:text-blue-600 transition-colors">
                    Active Deals
                  </div>
                </div>
                <Button
                  variant="outline"
                  size="sm"
                  className="w-full bg-transparent"
                  onClick={() => router.push("/deals/new")}
                >
                  <Plus className="h-3.5 w-3.5 mr-2" />
                  New Deal
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Portfolio Analytics Summary */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <CardTitle className="text-base">Portfolio Analytics</CardTitle>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>
          <CardContent className="px-4 pb-4 pt-0">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <div className="text-sm text-gray-500 mb-1">Avg. LTV</div>
                <div className="text-xl font-semibold">81.68%</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Avg. Credit Score</div>
                <div className="text-xl font-semibold">721</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Avg. Rate</div>
                <div className="text-xl font-semibold">10.54%</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Delinquency Ratio</div>
                <div className="text-xl font-semibold">.67%</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Net Charge-off</div>
                <div className="text-xl font-semibold">.02%</div>
              </div>
              <div>
                <div className="text-sm text-gray-500 mb-1">Top Region</div>
                <div className="text-xl font-semibold">TX (22.3%)</div>
              </div>
            </div>
            <div className="mt-4">
              <Button
                variant="outline"
                size="sm"
                className="w-full bg-transparent"
                onClick={() => router.push("/reports")}
              >
                View Portfolio Advisor
              </Button>
            </div>
          </CardContent>
        </Card>

{/* Notes Section */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <MessageSquare className="h-4 w-4" />
              <CardTitle className="text-base">Notes</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
            {/* Finn's Ice Tea Deal */}
            <div className="mb-2">
              <div className="flex items-start justify-between mb-2">
                <div className="flex items-center">
                  <span className="font-medium text-gray-800">Finn's Ice Tea Deal</span>
                </div>
                <div className="flex items-center space-x-1 bg-purple-100 px-2 py-0.5 rounded text-xs text-purple-700">
                  <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                  <span>Summarised</span>
                </div>
              </div>

<div className="text-sm text-gray-600 mb-3">
                <p>
                  Amount: $5,000,000, Relationship: Finn's Ice Tea, Company: Finn Smith, Product: Term Loan, Product
                  Type: CRE Loan
                </p>
              </div>

<div className="flex justify-between items-center">
                <button className="text-blue-600 text-sm">View Original Note</button>
                <span className="text-xs text-gray-500">09/16/24 12:49 PM</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Follow-up Call */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <Phone className="h-4 w-4" />
              <CardTitle className="text-base">Follow-up Call</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>
          <CardContent className="px-4 pb-4 pt-0">
            <div className="flex items-center">
              <span className="text-sm text-gray-600">Scheduled for tomorrow at 10:00 AM</span>
            </div>
          </CardContent>
        </Card>

{/* Recommend Next Action */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <MessageSquare className="h-4 w-4" />
              <CardTitle className="text-base">Recommend Next Action</CardTitle>
            </div>
          </CardHeader>

<CardContent className="px-4 pb-4 pt-0 space-y-4">
            <div className="flex items-start space-x-3">
              <Checkbox id="financial-docs" />
              <div>
                <label htmlFor="financial-docs" className="font-medium text-gray-800 block">
                  Collect Financial Documents
                </label>
                <span className="text-sm text-gray-600">Tax documents 2023-2024</span>
              </div>
            </div>

<div className="flex items-start space-x-3">
              <Checkbox id="tax-docs" />
              <div>
                <label htmlFor="tax-docs" className="font-medium text-gray-800 block">
                  Collect Tax Documents
                </label>
                <span className="text-sm text-gray-600">Financial Documents</span>
              </div>
            </div>

<div className="flex items-start space-x-3">
              <Checkbox id="hand-deal" />
              <div>
                <label htmlFor="hand-deal" className="font-medium text-gray-800 block">
                  Hand Deal Over to Loan Officer
                </label>
                <span className="text-sm text-gray-600">Elliott Stabler</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Team Section */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <Users className="h-4 w-4" />
              <CardTitle className="text-base">Team</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-4 pb-2 pt-0 space-y-3">
            <div className="flex items-center space-x-3">
              <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
                <Image
                  src="/images/design-mode/44(1).jpg"
                  alt="Olivia Benson"
                  width={32}
                  height={32}
                  className="object-cover"
                />
              </div>
              <div>
                <p className="font-medium text-gray-900">Olivia Benson</p>
                <p className="text-xs text-gray-500">Relationship Manager</p>
              </div>
            </div>

<div className="flex items-center space-x-3">
              <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
                <Image
                  src="/images/design-mode/32(1).jpg"
                  alt="Larry Owens"
                  width={32}
                  height={32}
                  className="object-cover"
                />
              </div>
              <div>
                <p className="font-medium text-gray-900">Larry Owens</p>
                <p className="text-xs text-gray-500">Loan Officer</p>
              </div>
            </div>

<div className="flex items-center space-x-3">
              <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
                <Image
                  src="/images/design-mode/68(1).jpg"
                  alt="Whitney Wright"
                  width={32}
                  height={32}
                  className="object-cover"
                />
              </div>
              <div>
                <p className="font-medium text-gray-900">Whitney Wright</p>
                <p className="text-xs text-gray-500">Credit Analyst</p>
              </div>
            </div>
          </CardContent>

{/* Center Content */}
      <div className="flex-1 flex flex-col gap-4">
        {/* New Analytics Cards */}
        <div className="grid grid-cols-1 gap-4">
          {/* First row - 2 cards side by side */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {/* Open Loan Pipeline */}
            <Card className="col-span-1">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 pt-3">
                <CardTitle className="text-base">Open Loan Pipeline</CardTitle>
                <Button variant="ghost" size="icon">
                  <MoreVertical className="h-4 w-4" />
                </Button>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] relative">
                  <div className="absolute inset-0 flex items-center justify-center flex-col">
                    <span className="text-3xl font-bold">$4.2B</span>
                    <span className="text-sm text-gray-500">Total Pipeline</span>
                  </div>
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={pipelineData.datasets[0].data.map((value, index) => ({
                          name: pipelineData.labels[index],
                          value,
                        }))}
                        cx={150}
                        cy={150}
                        outerRadius={80}
                        fill="#8884d8"
                      >
                        {pipelineData.datasets[0].data.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={pipelineData.datasets[0].backgroundColor[index]} />
                        ))}
                      </Pie>
                    </PieChart>
                  </ResponsiveContainer>
                </div>
                <div className="mt-2">
                  <Link href="/reports/pipeline" className="text-sm text-blue-600 hover:text-blue-800">
                    View Pipeline Report
                  </Link>
                </div>
              </CardContent>
            </Card>

{/* 30 Day Past Due */}
            <Card className="col-span-1">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 pt-3">
                <CardTitle className="text-base">> 30 Day Past Due</CardTitle>
                <Button variant="ghost" size="icon">
                  <MoreVertical className="h-4 w-4" />
                </Button>
              </CardHeader>
              <CardContent>
                <div className="h-[300px] flex items-center justify-center">
                  <div className="text-center">
                    <div className="text-5xl font-bold text-red-600">$249M</div>
                    <div className="mt-4 space-y-2">
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-500">Commercial</span>
                        <span className="text-sm font-medium">$142M</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-500">Consumer</span>
                        <span className="text-sm font-medium">$67M</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-gray-500">Small Business</span>
                        <span className="text-sm font-medium">$40M</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-2">
                  <Link href="/reports/past-due" className="text-sm text-blue-600 hover:text-blue-800">
                    View Past Due Report
                  </Link>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Second row - Pipeline by Product */}
          <Card className="col-span-1">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 pt-3">
              <CardTitle className="text-base">Pipeline by Product</CardTitle>
              <Button variant="ghost" size="icon">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </CardHeader>
            <CardContent>
              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={loanTypeData}>
                    <XAxis dataKey="name" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Bar dataKey="value" fill="#8884d8">
                      {loanTypeData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={loanTypeColors[index]} />
                      ))}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
              <div className="mt-2">
                <Link href="/reports/pipeline-product" className="text-sm text-blue-600 hover:text-blue-800">
                  View Product Report
                </Link>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Global Tasks Card - Add this new card */}
        <GlobalTasksCard
          tasks={getAllTasks()
            .slice(0, 5)
            .map((task) => ({
              id: task.id,
              name: task.name,
              type: task.type,
              status: task.status,
              assignedTo: task.assignedTo,
              dueDate: task.dueDate,
              entityId: task.relationshipId || task.dealId || task.loanId || "",
              entityType: task.relationshipId ? "Relationship" : task.dealId ? "Deal" : "Loan",
              entityName: task.relationshipId
                ? "Relationship " + task.relationshipId
                : task.dealId
                  ? "Deal " + task.dealId
                  : "Loan " + task.loanId,
            }))}
          limit={5}
        />

{/* Active Deals */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <Briefcase className="h-4 w-4" />
              <CardTitle className="text-base">Active Deals</CardTitle>
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="outline"
                size="sm"
                className="h-8 bg-transparent"
                onClick={() => router.push("/deals/new")}
              >
                <Plus className="h-3.5 w-3.5 mr-1" />
                New Deal
              </Button>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </div>
          </CardHeader>

<CardContent className="px-4 pb-0 pt-0">
            <Table>
              <TableHeader>
                <TableRow className="border-b border-gray-200">
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Deal Name</TableHead>
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Amount</TableHead>
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Status</TableHead>
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Relationship</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow
                  className="hover:bg-gray-50 cursor-pointer border-b border-gray-100"
                  onClick={() => router.push("/deals/deal-001")}
                >
                  <TableCell className="py-3 px-4 font-medium text-gray-900">Commercial Real Estate Loan</TableCell>
                  <TableCell className="py-3 px-4">$2,500,000</TableCell>
                  <TableCell className="py-3 px-4">
                    <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">In Progress</span>
                  </TableCell>
                  <TableCell className="py-3 px-4 text-gray-500">NexaSphere Limited Liability</TableCell>
                </TableRow>
                <TableRow
                  className="hover:bg-gray-50 cursor-pointer border-b border-gray-100"
                  onClick={() => router.push("/deals/deal-002")}
                >
                  <TableCell className="py-3 px-4 font-medium text-gray-900">Equipment Financing</TableCell>
                  <TableCell className="py-3 px-4">$750,000</TableCell>
                  <TableCell className="py-3 px-4">
                    <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Approved</span>
                  </TableCell>
                  <TableCell className="py-3 px-4 text-gray-500">Zenith Grove Limited Liability</TableCell>
                </TableRow>
                <TableRow
                  className="hover:bg-gray-50 cursor-pointer border-b border-gray-100"
                  onClick={() => router.push("/deals/deal-003")}
                >
                  <TableCell className="py-3 px-4 font-medium text-gray-900">Working Capital Line</TableCell>
                  <TableCell className="py-3 px-4">$500,000</TableCell>
                  <TableCell className="py-3 px-4">
                    <span className="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Pending Approval</span>
                  </TableCell>
                  <TableCell className="py-3 px-4 text-gray-500">Pivot Pulse Co.</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>

<CardFooter className="px-4 py-2 border-t border-gray-100">
            <Link href="/deals" className="text-blue-600 text-sm hover:text-blue-800">
              View All Deals
            </Link>
          </CardFooter>
        </Card>

{/* Active Loan Applications */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-4 w-4" />
              <CardTitle className="text-base">Active Loan Applications</CardTitle>
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="outline"
                size="sm"
                className="h-8 bg-transparent"
                onClick={() => router.push("/loans/new")}
              >
                <Plus className="h-3.5 w-3.5 mr-1" />
                New Loan
              </Button>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </div>
          </CardHeader>

<CardContent className="px-4 pb-0 pt-0">
            <Table>
              <TableHeader>
                <TableRow className="border-b border-gray-200">
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Application Name</TableHead>
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Type</TableHead>
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Status</TableHead>
                  <TableHead className="py-3 px-4 text-left font-medium text-gray-700">Applicant</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {getLoans()
                  .filter(
                    (loan) =>
                      loan.status === "Active" ||
                      loan.status === "Pending Approval" ||
                      loan.status === "In Review" ||
                      loan.status === "Documentation",
                  )
                  .slice(0, 3)
                  .map((loan) => (
                    <TableRow
                      key={loan.id}
                      className="hover:bg-gray-50 cursor-pointer border-b border-gray-100"
                      onClick={() => router.push(`/loans/${loan.id}`)}
                    >
                      <TableCell className="py-3 px-4 font-medium text-gray-900">{loan.name}</TableCell>
                      <TableCell className="py-3 px-4">{loan.loanType}</TableCell>
                      <TableCell className="py-3 px-4">
                        <span
                          className={`bg-${getStatusColor(loan.status)} text-${getStatusTextColor(loan.status)} text-xs px-2 py-1 rounded`}
                        >
                          {loan.status}
                        </span>
                      </TableCell>
                      <TableCell className="py-3 px-4 text-gray-500">{loan.relationship}</TableCell>
                    </TableRow>
                  ))}
              </TableBody>
            </Table>
          </CardContent>

<CardFooter className="px-4 py-2 border-t border-gray-100">
            <Link href="/loans" className="text-blue-600 text-sm hover:text-blue-800">
              View All Applications
            </Link>
          </CardFooter>
        </Card>

{/* Upcoming and Overdue */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <Calendar className="h-4 w-4" />
              <CardTitle className="text-base">Upcoming and Overdue</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-0 py-0">
            {/* Email Item 1 */}
            <div className="px-4 py-3 border-t border-gray-100">
              <div className="flex items-start">
                <ChevronRight className="h-5 w-5 text-gray-500 mr-2 mt-1" />
                <div className="flex-shrink-0 mr-3 mt-1">
                  <Mail className="h-5 w-5 text-gray-400" />
                </div>
                <div className="flex-1">
                  <p className="font-medium text-gray-800">Re: Mobile conversation on Monday with the global team</p>
                  <p className="text-sm text-gray-600 mt-1">
                    You <span className="text-gray-400">emailed</span> <span className="text-gray-800">Name</span>
                  </p>
                </div>
                <div className="flex items-center space-x-2 text-xs text-gray-500">
                  <div className="flex items-center space-x-1">
                    <Users className="h-3 w-3" />
                    <Mail className="h-3 w-3" />
                  </div>
                  <span>9:00am | 3/20/24</span>
                  <span className="bg-gray-200 rounded-full w-5 h-5 flex items-center justify-center text-gray-600">
                    4
                  </span>
                </div>
              </div>
            </div>

{/* Email Item 2 */}
            <div className="px-4 py-3 border-t border-gray-100">
              <div className="flex items-start">
                <ChevronRight className="h-5 w-5 text-gray-500 mr-2 mt-1" />
                <div className="flex-shrink-0 mr-3 mt-1">
                  <Mail className="h-5 w-5 text-gray-400" />
                </div>
                <div className="flex-1">
                  <p className="font-medium text-gray-800">Re: Mobile conversation on Monday with the global team</p>
                  <p className="text-sm text-gray-600 mt-1">
                    You <span className="text-gray-400">emailed</span> <span className="text-gray-800">Name</span>
                  </p>
                </div>
                <div className="flex items-center space-x-2 text-xs text-gray-500">
                  <div className="flex items-center space-x-1">
                    <Users className="h-3 w-3" />
                    <Mail className="h-3 w-3" />
                  </div>
                  <span>9:00am | 3/20/24</span>
                  <span className="bg-gray-200 rounded-full w-5 h-5 flex items-center justify-center text-gray-600">
                    4
                  </span>
                </div>
              </div>
            </div>

{/* Order Item */}
            <div className="px-4 py-3 border-t border-gray-100">
              <div className="flex items-start">
                <ChevronRight className="h-5 w-5 text-gray-500 mr-2 mt-1" />
                <div className="flex-shrink-0 mr-3 mt-1">
                  <MessageSquare className="h-4 w-4" />
                </div>
                <div className="flex-1">
                  <p className="font-medium text-gray-800">Order #53722 placed</p>
                  <p className="text-sm text-gray-600 mt-1">
                    You <span className="text-gray-400">emailed</span> <span className="text-gray-800">Name</span>
                  </p>
                </div>
                <div className="flex items-center space-x-2 text-xs text-gray-500">
                  <span>9:00am | 3/20/24</span>
                  <ChevronDown className="h-4 w-4 text-gray-500" />
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Right Sidebar */}
      <div className="w-full md:w-[350px] flex flex-col gap-4">
        {/* Compensation Card - Moved to top of right sidebar */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 pt-3">
            <CardTitle className="text-base">Compensation</CardTitle>
            <Button variant="ghost" size="icon">
              <MoreVertical className="h-4 w-4" />
            </Button>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col items-center md:flex-col md:items-start">
              <div className="mb-4">
                <div className="text-sm text-gray-500 mb-1">Mar 1 - Mar 15, 2025</div>
                <div className="text-4xl font-bold">$12,450</div>
                <div className="flex items-center mt-2">
                  <div className="flex items-center text-green-600 mr-2">
                    <ArrowUp className="h-4 w-4 mr-1" />
                    <span className="text-sm font-medium">8.2%</span>
                  </div>
                  <span className="text-sm text-gray-500">vs previous period</span>
                </div>
              </div>

<div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-gray-500 mb-1">Base Salary</div>
                  <div className="text-xl font-semibold">$9,200</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Bonus</div>
                  <div className="text-xl font-semibold">$3,250</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">YTD Total</div>
                  <div className="text-xl font-semibold">$87,350</div>
                </div>
                <div>
                  <div className="text-sm text-gray-500 mb-1">Last Period</div>
                  <div className="text-xl font-semibold">$11,500</div>
                </div>
              </div>
            </div>

<div className="mt-6">
              <Link href="/compensation/snapshot" className="text-sm text-blue-600 hover:text-blue-800">
                View Compensation Report
              </Link>
            </div>
          </CardContent>
        </Card>

{/* Contacts Section */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <CardTitle className="text-base">Contacts (3)</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-4 pb-4 pt-0 space-y-3">
            <div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
              <div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
                  <Image
                    src="/images/design-mode/79(1).jpg"
                    alt="Kristen Jones"
                    width={32}
                    height={32}
                    className="object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium text-gray-900">Kristen Jones</p>
                  <div className="grid grid-cols-[auto,1fr] gap-x-2 text-xs">
                    <span className="text-gray-500">Title:</span>
                    <span className="text-gray-900">VP of Sales</span>
                    <span className="text-gray-500">Role:</span>
                    <span className="text-gray-900">Decision Maker</span>
                  </div>
                </div>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </div>

<div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
              <div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
                  <Image
                    src="/images/design-mode/17(1).jpg"
                    alt="Lauren Bailey"
                    width={32}
                    height={32}
                    className="object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium text-gray-900">Lauren Bailey</p>
                  <div className="grid grid-cols-[auto,1fr] gap-x-2 text-xs">
                    <span className="text-gray-500">Title:</span>
                    <span className="text-gray-900">VP of Sales</span>
                    <span className="text-gray-500">Role:</span>
                    <span className="text-gray-900">Decision Maker</span>
                  </div>
                </div>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </div>

<div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
              <div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden">
                  <Image
                    src="/images/design-mode/54.jpg"
                    alt="Steve Handler"
                    width={32}
                    height={32}
                    className="object-cover"
                  />
                </div>
                <div>
                  <p className="font-medium text-gray-900">Steve Handler</p>
                  <div className="grid grid-cols-[auto,1fr] gap-x-2 text-xs">
                    <span className="text-gray-500">Title:</span>
                    <span className="text-gray-900">VP of Sales</span>
                    <span className="text-gray-500">Role:</span>
                    <span className="text-gray-900">Decision Maker</span>
                  </div>
                </div>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </div>
          </CardContent>
        </Card>

{/* Opportunities Section */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <Briefcase className="h-4 w-4" />
              <CardTitle className="text-base">Opportunities</CardTitle>
            </div>
            <MoreVertical className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
            {/* Opportunity Stages */}
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="text-sm text-gray-800">Qualifying</span>
                <div className="w-32 h-5 bg-orange-300 rounded"></div>
              </div>

<div className="flex items-center justify-between">
                <span className="text-sm text-gray-800">Proposal</span>
                <div className="w-32 h-5 bg-orange-200 rounded flex items-center justify-end px-2">
                  <span className="text-xs">$</span>
                </div>
              </div>

<div className="flex items-center justify-between">
                <span className="text-sm text-gray-800">Negotiation</span>
                <div className="w-32 h-5 bg-orange-200 rounded flex items-center justify-end px-2">
                  <span className="text-xs">$25k</span>
                </div>
              </div>

<div className="flex items-center justify-between">
                <span className="text-sm text-gray-800">Closed Won</span>
                <div className="w-32 h-5 bg-orange-200 rounded flex items-center justify-end px-2">
                  <span className="text-xs">$15k</span>
                </div>
              </div>
            </div>
          </CardContent>

{/* Cases Section */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <User className="h-4 w-4" />
              <CardTitle className="text-base">Cases (0)</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 flex flex-col items-center justify-center">
              <button className="mb-3 flex items-center space-x-2 border border-gray-300 rounded px-3 py-1 text-sm">
                <span>Label</span>
              </button>
              <p className="text-sm text-gray-500">or drop image</p>
            </div>
          </CardContent>
        </Card>

{/* Upload Documents Section */}
        <Card>
          <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0 pt-3">
            <div className="flex items-center space-x-2">
              <FileText className="h-4 w-4" />
              <CardTitle className="text-base">Upload Documents</CardTitle>
            </div>
            <ChevronDown className="h-4 w-4 text-gray-500" />
          </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
            {/* Drag & Drop Area */}
            <div className="border-2 border-dashed border-blue-300 rounded-lg p-6 flex flex-col items-center justify-center hover:border-blue-400 transition-colors cursor-pointer bg-blue-50/50">
              <FileText className="h-8 w-8 text-blue-500 mb-2" />
              <p className="text-sm font-medium text-gray-700 mb-1">Drop files here</p>
              <p className="text-xs text-gray-500 mb-3">PDF, DOC, XLS up to 10MB</p>
              <Button
                variant="outline"
                size="sm"
                className="text-blue-600 border-blue-300 hover:bg-blue-50 bg-transparent"
              >
                Browse Files
              </Button>
            </div>

{/* Recent Uploads */}
            <div className="mt-4">
              <div className="flex items-center justify-between mb-2">
                <span className="text-xs font-medium text-gray-700">Recent Uploads</span>
                <span className="text-xs text-gray-500">12 this month</span>
              </div>
              <div className="space-y-2">
                <div className="flex items-center justify-between text-xs">
                  <span className="text-gray-700">Financial_Statement.pdf</span>
                  <span className="text-gray-500">2h ago</span>
                </div>
                <div className="flex items-center justify-between text-xs">
                  <span className="text-gray-700">Tax_Return_2024.pdf</span>
                  <span className="text-gray-500">1d ago</span>
                </div>
                <div className="flex items-center justify-between text-xs">
                  <span className="text-gray-700">Bank_Statement.pdf</span>
                  <span className="text-gray-500">3d ago</span>
                </div>
              </div>
            </div>
          </CardContent>

<CardFooter className="px-4 py-2">
            <button className="text-blue-600 text-sm hover:text-blue-800">View All Documents</button>
          </CardFooter>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="financial-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  Search,
  Home,
  ChevronDown,
  Plus,
  Bell,
  Settings,
  Clock,
  User,
  ChevronRight,
  MoreVertical,
  Phone,
  Mail,
  Calendar,
  CheckSquare,
  MessageSquare,
  Users,
} from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts"

export default function FinancialDashboard() {
  const [showActivities, setShowActivities] = useState(true)

const data = [
    { name: "Lead 1", value: 25, color: "#4285F4" },
    { name: "Lead 2", value: 30, color: "#646464" },
    { name: "Lead 3", value: 15, color: "#E94FD8" },
    { name: "Lead 4", value: 30, color: "#00A19C" },
  ]

return (
    <div className="flex flex-col h-screen bg-gray-100">
      {/* Header */}
      <header className="bg-white border-b border-gray-200 px-4 py-2 flex items-center justify-between">
        <div className="flex items-center">
          <div className="h-9 flex items-center">
            <span className="text-lg font-bold text-gray-800">nsight</span>
            <span className="text-lg font-bold text-white bg-blue-900 px-2 py-1 rounded-sm">financial</span>
          </div>
        </div>

{/* Main Content */}
      <div className="flex-1 flex overflow-hidden p-4 gap-4">
        {/* Left Sidebar */}
        <div className="w-[350px] overflow-y-auto flex flex-col gap-4">
          {/* Notes Section */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <div className="flex items-center space-x-2">
                <div className="bg-blue-500 rounded-md p-1">
                  <MessageSquare className="h-4 w-4 text-white" />
                </div>
                <CardTitle className="text-base">Notes</CardTitle>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
              {/* Finn's Ice Tea Deal */}
              <div className="mb-2">
                <div className="flex items-start justify-between mb-2">
                  <div className="flex items-center">
                    <ChevronDown className="h-5 w-5 text-gray-500 mr-2" />
                    <div className="font-medium text-gray-800">Finn's Ice Tea Deal</div>
                  </div>
                  <div className="flex items-center space-x-1 bg-purple-100 px-2 py-0.5 rounded text-xs text-purple-700">
                    <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                    <span>Summarised</span>
                  </div>
                </div>

<div className="pl-7 text-sm text-gray-600 mb-3">
                  <p>
                    Amount: $5,000,000, Relationship: Finn's Ice Tea, Company: Finn Smith, Product: Term Loan, Product
                    Type: CRE Loan
                  </p>
                </div>

<div className="pl-7 flex justify-between items-center">
                  <button className="text-blue-600 text-sm">View Original Note</button>
                  <span className="text-xs text-gray-500">09/16/24 12:49 PM</span>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Follow-up Call */}
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <ChevronRight className="h-5 w-5 text-gray-500 mr-2" />
                  <span className="font-medium text-gray-800">Follow-up Call</span>
                </div>
                <ChevronDown className="h-4 w-4 text-gray-500" />
              </div>
            </CardContent>
          </Card>

{/* Recommend Next Action */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <div className="flex items-center space-x-2">
                <div className="bg-blue-500 rounded-md p-1">
                  <MessageSquare className="h-4 w-4 text-white" />
                </div>
                <CardTitle className="text-base">Recommend Next Action</CardTitle>
              </div>
            </CardHeader>

<CardContent className="px-4 pb-4 pt-0 space-y-4">
              <div className="flex items-start space-x-3">
                <Checkbox id="financial-docs" />
                <div>
                  <label htmlFor="financial-docs" className="font-medium text-gray-800 block">
                    Collect Financial Documents
                  </label>
                  <span className="text-sm text-gray-600">Tax documents 2023-2024</span>
                </div>
              </div>

<div className="flex items-start space-x-3">
                <Checkbox id="tax-docs" />
                <div>
                  <label htmlFor="tax-docs" className="font-medium text-gray-800 block">
                    Collect Tax Documents
                  </label>
                  <span className="text-sm text-gray-600">Financial Documents</span>
                </div>
              </div>

<div className="flex items-start space-x-3">
                <Checkbox id="hand-deal" />
                <div>
                  <label htmlFor="hand-deal" className="font-medium text-gray-800 block">
                    Hand Deal Over to Loan Officer
                  </label>
                  <span className="text-sm text-gray-600">Elliott Stabler</span>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Team Section */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <div className="flex items-center space-x-2">
                <div className="bg-blue-500 rounded-md p-1">
                  <Users className="h-4 w-4 text-white" />
                </div>
                <CardTitle className="text-base">Team</CardTitle>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </CardHeader>

<CardContent className="px-4 pb-2 pt-0 space-y-3">
              <div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold">
                  AB
                </div>
                <div>
                  <p className="font-medium text-blue-600">Olivia Benson</p>
                  <p className="text-xs text-gray-600">Relationship Manager</p>
                </div>
              </div>

<div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold">
                  AB
                </div>
                <div>
                  <p className="font-medium text-blue-600">Larry Owens</p>
                  <p className="text-xs text-gray-600">Loan Officer</p>
                </div>
              </div>

<div className="flex items-center space-x-3">
                <div className="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-800 font-semibold">
                  AB
                </div>
                <div>
                  <p className="font-medium text-blue-600">Whitney Wright</p>
                  <p className="text-xs text-gray-600">Credit Analyst</p>
                </div>
              </div>
            </CardContent>

{/* Center Content */}
        <div className="flex-1 overflow-y-auto flex flex-col gap-4">
          {/* Leads Section */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-xl">Leads</CardTitle>
              <MoreVertical className="h-5 w-5 text-gray-500" />
            </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
              <div className="flex justify-center py-4">
                <ResponsiveContainer width={256} height={256}>
                  <PieChart>
                    <Pie
                      data={data}
                      cx="50%"
                      cy="50%"
                      innerRadius={90}
                      outerRadius={120}
                      paddingAngle={0}
                      dataKey="value"
                    >
                      {data.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                    </Pie>
                  </PieChart>
                </ResponsiveContainer>
              </div>

{/* Action Buttons */}
          <Card>
            <CardContent className="p-4">
              <div className="flex space-x-2">
                <div className="relative">
                  <button className="flex items-center space-x-2 bg-white border border-gray-300 rounded px-3 py-2 text-sm">
                    <Phone className="h-4 w-4 text-teal-500" />
                    <span>Log a Call</span>
                  </button>
                  <button className="absolute right-0 top-0 h-full flex items-center px-2 border-l border-gray-300">
                    <ChevronDown className="h-4 w-4 text-gray-500" />
                  </button>
                </div>

<div className="relative">
                  <button className="flex items-center space-x-2 bg-white border border-gray-300 rounded px-3 py-2 text-sm">
                    <Mail className="h-4 w-4 text-blue-500" />
                    <span>Email</span>
                  </button>
                  <button className="absolute right-0 top-0 h-full flex items-center px-2 border-l border-gray-300">
                    <ChevronDown className="h-4 w-4 text-gray-500" />
                  </button>
                </div>

<div className="relative">
                  <button className="flex items-center space-x-2 bg-white border border-gray-300 rounded px-3 py-2 text-sm">
                    <Calendar className="h-4 w-4 text-pink-500" />
                    <span>New Event</span>
                  </button>
                  <button className="absolute right-0 top-0 h-full flex items-center px-2 border-l border-gray-300">
                    <ChevronDown className="h-4 w-4 text-gray-500" />
                  </button>
                </div>

<div className="flex items-center justify-between mt-4">
                <div className="flex items-center space-x-3">
                  <div className="flex items-center space-x-2">
                    <Checkbox
                      id="show-activities"
                      checked={showActivities}
                      onCheckedChange={() => setShowActivities(!showActivities)}
                    />
                    <label htmlFor="show-activities" className="text-sm text-gray-600">
                      Only show activities with insights
                    </label>
                  </div>
                </div>

<div className="flex flex-wrap items-center gap-1 text-xs text-gray-500 mt-4">
                <span>Filters: All time</span>
                <span>•</span>
                <span>All Activities</span>
                <span>•</span>
                <span>Logged calls, Email, Events, List email, and Tasks</span>
              </div>

<div className="flex items-center justify-end gap-2 mt-3 text-sm">
                <button className="text-gray-600">Refresh</button>
                <span>•</span>
                <button className="text-gray-600">Expand All</button>
                <span>•</span>
                <button className="text-gray-600">View All</button>
              </div>
            </CardContent>
          </Card>

{/* Upcoming and Overdue */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <div className="flex items-center">
                <ChevronDown className="h-5 w-5 text-gray-500 mr-2" />
                <CardTitle className="text-base">Upcoming and Overdue</CardTitle>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </CardHeader>

<CardContent className="px-0 py-0">
              {/* Email Item 1 */}
              <div className="px-4 py-3 border-t border-gray-100">
                <div className="flex items-start">
                  <ChevronRight className="h-5 w-5 text-gray-500 mr-2 mt-1" />
                  <div className="flex-shrink-0 mr-3 mt-1">
                    <Mail className="h-5 w-5 text-gray-400" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-gray-800">Re: Mobile conversation on Monday with the global team</p>
                    <p className="text-sm text-gray-600 mt-1">
                      You <span className="text-gray-400">emailed</span> <span className="text-gray-800">Name</span>
                    </p>
                  </div>
                  <div className="flex items-center space-x-2 text-xs text-gray-500">
                    <div className="flex items-center space-x-1">
                      <Users className="h-3 w-3" />
                      <Mail className="h-3 w-3" />
                    </div>
                    <span>9:00am | 3/20/24</span>
                    <span className="bg-gray-200 rounded-full w-5 h-5 flex items-center justify-center text-gray-600">
                      4
                    </span>
                  </div>
                </div>
              </div>

{/* Email Item 2 */}
              <div className="px-4 py-3 border-t border-gray-100">
                <div className="flex items-start">
                  <ChevronRight className="h-5 w-5 text-gray-500 mr-2 mt-1" />
                  <div className="flex-shrink-0 mr-3 mt-1">
                    <Mail className="h-5 w-5 text-gray-400" />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-gray-800">Re: Mobile conversation on Monday with the global team</p>
                    <p className="text-sm text-gray-600 mt-1">
                      You <span className="text-gray-400">emailed</span> <span className="text-gray-800">Name</span>
                    </p>
                  </div>
                  <div className="flex items-center space-x-2 text-xs text-gray-500">
                    <div className="flex items-center space-x-1">
                      <Users className="h-3 w-3" />
                      <Mail className="h-3 w-3" />
                    </div>
                    <span>9:00am | 3/20/24</span>
                    <span className="bg-gray-200 rounded-full w-5 h-5 flex items-center justify-center text-gray-600">
                      4
                    </span>
                  </div>
                </div>
              </div>

{/* Order Item */}
              <div className="px-4 py-3 border-t border-gray-100">
                <div className="flex items-start">
                  <ChevronRight className="h-5 w-5 text-gray-500 mr-2 mt-1" />
                  <div className="flex-shrink-0 mr-3 mt-1">
                    <div className="bg-blue-500 rounded-md p-0.5">
                      <MessageSquare className="h-4 w-4 text-white" />
                    </div>
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-gray-800">Order #53722 placed</p>
                    <p className="text-sm text-gray-600 mt-1">
                      You <span className="text-gray-400">emailed</span> <span className="text-gray-800">Name</span>
                    </p>
                  </div>
                  <div className="flex items-center space-x-2 text-xs text-gray-500">
                    <span>9:00am | 3/20/24</span>
                    <ChevronDown className="h-4 w-4 text-gray-500" />
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

{/* Right Sidebar */}
        <div className="w-[350px] overflow-y-auto flex flex-col gap-4">
          {/* Contacts Section */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <div className="flex items-center space-x-2">
                <div className="bg-blue-500 rounded-md p-1">
                  <User className="h-4 w-4 text-white" />
                </div>
                <CardTitle className="text-base">Contacts (3)</CardTitle>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </CardHeader>

<CardContent className="px-4 pb-4 pt-0 space-y-3">
              {/* Contact 1 */}
              <div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                <div className="flex items-center space-x-3">
                  <div className="flex-shrink-0 w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-semibold">
                    KJ
                  </div>
                  <div>
                    <p className="font-medium text-gray-800">Kristen Jones</p>
                    <div className="grid grid-cols-2 gap-x-4 text-xs">
                      <span className="text-gray-500">Title:</span>
                      <span className="text-gray-800">VP of Sales</span>
                      <span className="text-gray-500">Role:</span>
                      <span className="text-gray-800">Decision Maker</span>
                    </div>
                  </div>
                </div>
                <ChevronDown className="h-4 w-4 text-gray-500" />
              </div>

{/* Contact 2 */}
              <div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                <div className="flex items-center space-x-3">
                  <div className="flex-shrink-0 w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-semibold">
                    KJ
                  </div>
                  <div>
                    <p className="font-medium text-gray-800">Kristen Jones</p>
                    <div className="grid grid-cols-2 gap-x-4 text-xs">
                      <span className="text-gray-500">Title:</span>
                      <span className="text-gray-800">VP of Sales</span>
                      <span className="text-gray-500">Role:</span>
                      <span className="text-gray-800">Decision Maker</span>
                    </div>
                  </div>
                </div>
                <ChevronDown className="h-4 w-4 text-gray-500" />
              </div>

{/* Contact 3 */}
              <div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                <div className="flex items-center space-x-3">
                  <div className="flex-shrink-0 w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-semibold">
                    LB
                  </div>
                  <div>
                    <p className="font-medium text-gray-800">Lauren Bailey</p>
                    <div className="grid grid-cols-2 gap-x-4 text-xs">
                      <span className="text-gray-500">Title:</span>
                      <span className="text-gray-800">VP of Sales</span>
                      <span className="text-gray-500">Role:</span>
                      <span className="text-gray-800">Decision Maker</span>
                    </div>
                  </div>
                </div>
                <ChevronDown className="h-4 w-4 text-gray-500" />
              </div>

{/* Contact 4 */}
              <div className="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                <div className="flex items-center space-x-3">
                  <div className="flex-shrink-0 w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center text-white font-semibold">
                    SH
                  </div>
                  <div>
                    <p className="font-medium text-gray-800">Steve Handler</p>
                    <div className="grid grid-cols-2 gap-x-4 text-xs">
                      <span className="text-gray-500">Title:</span>
                      <span className="text-gray-800">VP of Sales</span>
                      <span className="text-gray-500">Role:</span>
                      <span className="text-gray-800">Decision Maker</span>
                    </div>
                  </div>
                </div>
                <ChevronDown className="h-4 w-4 text-gray-500" />
              </div>
            </CardContent>
          </Card>

{/* Opportunities Section */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <CardTitle className="text-base">Opportunities</CardTitle>
              <MoreVertical className="h-4 w-4 text-gray-500" />
            </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
              {/* Opportunity Stages */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <span className="text-sm text-gray-800">Qualifying</span>
                  <div className="w-32 h-5 bg-orange-300 rounded"></div>
                </div>

<div className="flex items-center justify-between">
                  <span className="text-sm text-gray-800">Proposal</span>
                  <div className="w-32 h-5 bg-orange-200 rounded flex items-center justify-end px-2">
                    <span className="text-xs">$</span>
                  </div>
                </div>

<div className="flex items-center justify-between">
                  <span className="text-sm text-gray-800">Negotiation</span>
                  <div className="w-32 h-5 bg-orange-200 rounded flex items-center justify-end px-2">
                    <span className="text-xs">$25k</span>
                  </div>
                </div>

<div className="flex items-center justify-between">
                  <span className="text-sm text-gray-800">Closed Won</span>
                  <div className="w-32 h-5 bg-orange-200 rounded flex items-center justify-end px-2">
                    <span className="text-xs">$15k</span>
                  </div>
                </div>
              </div>
            </CardContent>

{/* Cases Section */}
          <Card>
            <CardHeader className="px-4 py-3 flex flex-row items-center justify-between space-y-0">
              <div className="flex items-center space-x-2">
                <div className="bg-blue-500 rounded-md p-1">
                  <User className="h-4 w-4 text-white" />
                </div>
                <CardTitle className="text-base">Cases (0)</CardTitle>
              </div>
              <ChevronDown className="h-4 w-4 text-gray-500" />
            </CardHeader>

<CardContent className="px-4 pb-4 pt-0">
              <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 flex flex-col items-center justify-center">
                <button className="mb-3 flex items-center space-x-2 border border-gray-300 rounded px-3 py-1 text-sm">
                  <span>Label</span>
                </button>
                <p className="text-sm text-gray-500">or drop image</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

{/* Footer Actions */}
      <footer className="bg-white border-t border-gray-200 py-3 px-4">
        <div className="flex items-center space-x-8">
          <div className="flex items-center space-x-2">
            <div className="p-1">
              <div className="h-5 w-5 bg-gray-100 rounded flex items-center justify-center">
                <ChevronDown className="h-3 w-3 text-gray-600" />
              </div>
            </div>
            <span className="text-sm font-medium text-gray-600">Banking Advisor</span>
          </div>

<div className="flex items-center space-x-2">
            <div className="p-1">
              <div className="h-5 w-5 bg-gray-100 rounded flex items-center justify-center">
                <ChevronDown className="h-3 w-3 text-gray-600" />
              </div>
            </div>
            <span className="text-sm font-medium text-gray-600">Priority Manager</span>
          </div>

interface RelationshipDashboardProps {
  relationshipId: string
  relationship: any
}

export function RelationshipDashboard({ relationshipId, relationship }: RelationshipDashboardProps) {
  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">Relationship Dashboard</h2>

{/* Other dashboard content */}
      <div className="grid grid-cols-2 gap-6">{/* Additional dashboard widgets */}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/relationship-tabs.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRouter, useSearchParams } from "next/navigation"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface RelationshipTabsProps {
  relationshipId: string
  relationship: any
  refreshRelationship: () => void
  hideKeyMetrics?: boolean
}

export function RelationshipTabs({
  relationshipId,
  relationship,
  refreshRelationship,
  hideKeyMetrics = false,
}: RelationshipTabsProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const currentTab = searchParams.get("tab") || "overview"

const handleTabChange = (value: string) => {
    router.push(`/relationships/${relationshipId}?tab=${value}`)
  }

return (
    <>
      <Tabs defaultValue={currentTab} value={currentTab} onValueChange={handleTabChange} className="w-full">
        <TabsList className="border-b w-full justify-start rounded-none bg-transparent p-0">
          <TabsTrigger
            value="overview"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Overview
          </TabsTrigger>
          <TabsTrigger
            value="credit-resources"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Credit Resources
          </TabsTrigger>
          <TabsTrigger
            value="priority-manager"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Tasks
          </TabsTrigger>
          <TabsTrigger
            value="documents"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Documents
          </TabsTrigger>
          <TabsTrigger
            value="spreads"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Spreads
          </TabsTrigger>
          <TabsTrigger
            value="credit-monitoring"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Credit Monitoring
          </TabsTrigger>
          <TabsTrigger
            value="cashflow-analysis"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Cashflow Analysis
          </TabsTrigger>
          <TabsTrigger
            value="exposure"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Exposure
          </TabsTrigger>
          <TabsTrigger
            value="profitability"
            className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
          >
            Profitability
          </TabsTrigger>
        </TabsList>
      </Tabs>

{/* Key Metrics - Only show if hideKeyMetrics is false */}
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/cashflow-dashboard.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import {
  BarChart,
  Bar,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  PieChart,
  Pie,
  AreaChart,
  Area,
} from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { Info, Sparkles } from "lucide-react"

// Property exposure data
const exposureData = [
  { name: "222 Market Street", value: 2100000, color: "#0088FE" },
  { name: "4800 Parker Farm Ln", value: 1850000, color: "#00C49F" },
  { name: "456 Greenville Rd", value: 1500000, color: "#FFBB28" },
]

// LTV projection vs actual data
const ltvData = [
  { year: "2025", projected: 68.2, actual: 67.5 },
  { year: "2026", projected: 66.8, actual: 66.0 },
  { year: "2027", projected: 65.3, actual: 64.8 },
  { year: "2028", projected: 63.9, actual: 63.2 },
  { year: "2029", projected: 62.4, actual: null },
  { year: "2030", projected: 61.0, actual: null },
]

// Sample data - in a real application, this would come from your API or props
const tenantConcentrationData = [
  { name: "Tenant A", value: 40 },
  { name: "Tenant B", value: 30 },
  { name: "Tenant C", value: 15 },
  { name: "Tenant D", value: 10 },
  { name: "Other Tenants", value: 5 },
]

const leaseRolloverData = [
  { year: "2025", "222Market": 5, "4800Parker": 7, "456Greenville": 3 },
  { year: "2026", "222Market": 10, "4800Parker": 8, "456Greenville": 7 },
  { year: "2027", "222Market": 3, "4800Parker": 2, "456Greenville": 5 },
  { year: "2028", "222Market": 12, "4800Parker": 15, "456Greenville": 8 },
  { year: "2029", "222Market": 2, "4800Parker": 1, "456Greenville": 2 },
  { year: "2030", "222Market": 8, "4800Parker": 2, "456Greenville": 0 },
]

const noiData = [
  { year: "2025", "222Market": 100000, "4800Parker": 120000, "456Greenville": 80000 },
  { year: "2026", "222Market": 105000, "4800Parker": 125000, "456Greenville": 80000 },
  { year: "2027", "222Market": 110000, "4800Parker": 130000, "456Greenville": 85000 },
  { year: "2028", "222Market": 115000, "4800Parker": 135000, "456Greenville": 90000 },
  { year: "2029", "222Market": 120000, "4800Parker": 140000, "456Greenville": 100000 },
  { year: "2030", "222Market": 125000, "4800Parker": 145000, "456Greenville": 110000 },
]

// Consistent color palette for properties
const propertyColors = {
  "222Market": {
    main: "#4361EE", // Vibrant blue
    light: "rgba(67, 97, 238, 0.2)",
  },
  "4800Parker": {
    main: "#3A0CA3", // Deep purple
    light: "rgba(58, 12, 163, 0.2)",
  },
  "456Greenville": {
    main: "#7209B7", // Rich magenta
    light: "rgba(114, 9, 183, 0.2)",
  },
}

export function CashflowDashboard() {
  return (
    <div className="space-y-6 mt-6">
      {/* New layout with Banking Advisor on the left spanning two rows */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Banking Advisor Card - spans 2 rows */}
        <Card className="border-gray-200 md:col-span-1 md:row-span-2 flex flex-col">
          <CardHeader className="pb-2 flex flex-row items-center justify-between">
            <div className="flex items-center gap-2">
              <Sparkles className="h-6 w-6 text-gray-500" />
              <CardTitle className="text-xl">Banking Advisor</CardTitle>
            </div>
            <Info className="h-5 w-5 text-gray-400" />
          </CardHeader>
          <CardContent className="pt-2 flex-grow">
            <div className="space-y-4 h-full flex flex-col">
              <div>
                <h5 className="font-medium text-base mb-1">Key Highlights:</h5>
                <ul className="list-disc pl-5 space-y-2">
                  <li>
                    Diversified Tenant Base: Retail (55%), Office (30%), Service/Flex (15%) – mitigates sector-specific
                    risk.
                  </li>
                  <li>
                    Occupancy Stability: Current occupancy at 92%; adverse scenario projects vacancy increase to 80%,
                    reducing NOI by 15-18%.
                  </li>
                  <li>
                    Projected NOI: $4.2M annually, with stress-tested downside NOI of $3.4M under adverse conditions.
                  </li>
                </ul>
              </div>

<div>
                <h5 className="font-medium text-base mb-1">Opportunities:</h5>
                <ul className="list-disc pl-5 space-y-2">
                  <li>
                    Lease-Up Potential: Current vacancies represent 8% of GLA, with upside to increase NOI by 10% upon
                    stabilization.
                  </li>
                  <li>Rent Growth: Incremental lease renewals at 3-5% above in-place rents in resilient submarkets.</li>
                </ul>
              </div>

<div>
                <h5 className="font-medium text-base mb-1">Risk Mitigation:</h5>
                <ul className="list-disc pl-5 space-y-2">
                  <li>
                    Tenant Rollover Sensitivity: Upcoming expirations represent 12% of GLA over 18 months; adverse
                    scenario assumes 25% non-renewal, impacting revenue by $600K annually.
                  </li>
                  <li>
                    Market Volatility: Portfolio stress-tested against 200bps interest rate increase; DSCR remains above
                    1.2x.
                  </li>
                  <li>
                    Capital Reserves: Maintaining 6-month operating expense reserve to buffer against unexpected
                    vacancies.
                  </li>
                </ul>
              </div>

<div className="mt-auto">
                <h5 className="font-medium text-base mb-1">Recommendations:</h5>
                <ul className="list-disc pl-5 space-y-2">
                  <li>
                    Initiate early renewal discussions with tenants expiring in next 12 months to secure occupancy.
                  </li>
                  <li>Consider fixed-rate refinancing options to lock in current favorable rates.</li>
                </ul>
              </div>

<div className="text-xs text-gray-400 pt-2 border-t border-gray-100 mt-auto">
                This content was generated using AI.
              </div>
            </div>
          </CardContent>
        </Card>

{/* Right side content - 2 columns */}
        <div className="md:col-span-2 space-y-6">
          {/* Top row - Tenant Concentration and Lease Rollover */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Tenant Concentration Card */}
            <Card>
              <CardHeader>
                <CardTitle>Tenant Concentration</CardTitle>
                <CardDescription>By annual lease value</CardDescription>
              </CardHeader>
              <CardContent className="p-0 pb-4">
                <ChartContainer
                  config={{
                    value: {
                      label: "Tenant %",
                      color: "hsl(var(--chart-1))",
                    },
                  }}
                  className="h-[250px] w-full px-2"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart margin={{ top: 0, right: 0, bottom: 0, left: 0 }}>
                      <Pie
                        data={tenantConcentrationData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
                      >
                        {tenantConcentrationData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={exposureData[index % exposureData.length].color} />
                        ))}
                      </Pie>
                      <ChartTooltip content={<ChartTooltipContent />} />
                    </PieChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>

{/* Lease Rollover Card */}
            <Card>
              <CardHeader>
                <CardTitle>Lease Rollover</CardTitle>
                <CardDescription>Percentage of leases expiring by year</CardDescription>
              </CardHeader>
              <CardContent className="p-0 pb-4">
                <ChartContainer
                  config={{
                    "222Market": {
                      label: "222 Market Street",
                      color: propertyColors["222Market"].main,
                    },
                    "4800Parker": {
                      label: "4800 Parker Farm Ln",
                      color: propertyColors["4800Parker"].main,
                    },
                    "456Greenville": {
                      label: "456 Greenville Rd",
                      color: propertyColors["456Greenville"].main,
                    },
                  }}
                  className="h-[250px] w-full px-2"
                >
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart data={leaseRolloverData} margin={{ top: 10, right: 10, left: 0, bottom: 20 }}>
                      <CartesianGrid strokeDasharray="3 3" />
                      <XAxis dataKey="year" />
                      <YAxis tickFormatter={(value) => `${value}%`} />
                      <ChartTooltip content={<ChartTooltipContent />} />
                      <Legend wrapperStyle={{ bottom: 0 }} />
                      <Bar
                        dataKey="222Market"
                        name="222 Market Street"
                        stackId="a"
                        fill={propertyColors["222Market"].main}
                        radius={[4, 4, 0, 0]}
                      />
                      <Bar
                        dataKey="4800Parker"
                        name="4800 Parker Farm Ln"
                        stackId="a"
                        fill={propertyColors["4800Parker"].main}
                        radius={[0, 0, 0, 0]}
                      />
                      <Bar
                        dataKey="456Greenville"
                        name="456 Greenville Rd"
                        stackId="a"
                        fill={propertyColors["456Greenville"].main}
                        radius={[0, 0, 0, 0]}
                      />
                    </BarChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </CardContent>
            </Card>
          </div>

{/* NOI Card */}
          <Card>
            <CardHeader>
              <CardTitle>Net Operating Income (NOI)</CardTitle>
              <CardDescription>Projected NOI across all properties</CardDescription>
            </CardHeader>
            <CardContent className="p-0 pb-4">
              <ChartContainer
                config={{
                  "222Market": {
                    label: "222 Market Street",
                    color: propertyColors["222Market"].main,
                  },
                  "4800Parker": {
                    label: "4800 Parker Farm Ln",
                    color: propertyColors["4800Parker"].main,
                  },
                  "456Greenville": {
                    label: "456 Greenville Rd",
                    color: propertyColors["456Greenville"].main,
                  },
                }}
                className="h-[300px] w-full px-4"
              >
                <ResponsiveContainer width="100%" height="100%">
                  <AreaChart data={noiData} margin={{ top: 10, right: 10, left: 0, bottom: 20 }}>
                    <defs>
                      <linearGradient id="color222Market" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={propertyColors["222Market"].main} stopOpacity={0.8} />
                        <stop offset="95%" stopColor={propertyColors["222Market"].main} stopOpacity={0.2} />
                      </linearGradient>
                      <linearGradient id="color4800Parker" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={propertyColors["4800Parker"].main} stopOpacity={0.8} />
                        <stop offset="95%" stopColor={propertyColors["4800Parker"].main} stopOpacity={0.2} />
                      </linearGradient>
                      <linearGradient id="color456Greenville" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="5%" stopColor={propertyColors["456Greenville"].main} stopOpacity={0.8} />
                        <stop offset="95%" stopColor={propertyColors["456Greenville"].main} stopOpacity={0.2} />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="year" />
                    <YAxis tickFormatter={(value) => `$${(value / 1000).toFixed(0)}k`} />
                    <ChartTooltip content={<ChartTooltipContent />} />
                    <Legend wrapperStyle={{ bottom: 0 }} />
                    <Area
                      type="monotone"
                      dataKey="222Market"
                      name="222 Market Street"
                      stroke={propertyColors["222Market"].main}
                      strokeWidth={2}
                      fillOpacity={0.6}
                      fill="url(#color222Market)"
                      stackId="1"
                    />
                    <Area
                      type="monotone"
                      dataKey="4800Parker"
                      name="4800 Parker Farm Ln"
                      stroke={propertyColors["4800Parker"].main}
                      strokeWidth={2}
                      fillOpacity={0.6}
                      fill="url(#color4800Parker)"
                      stackId="1"
                    />
                    <Area
                      type="monotone"
                      dataKey="456Greenville"
                      name="456 Greenville Rd"
                      stroke={propertyColors["456Greenville"].main}
                      strokeWidth={2}
                      fillOpacity={0.6}
                      fill="url(#color456Greenville)"
                      stackId="1"
                    />
                  </AreaChart>
                </ResponsiveContainer>
              </ChartContainer>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tenancy-document-review.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { CheckIcon, ExternalLink, Settings, Building2, Search, Plus, RefreshCw, AlertTriangle, X } from "lucide-react"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"

interface TenancyDocumentReviewProps {
  onBack: () => void
  onContinue: () => void
}

const nCinoProperties = {
  "456-greenville-1": {
    name: "456 Greenville Rd",
    address: "456 Greenville Rd Wilmington NC 28403",
    value: "$10,000,000",
    unitCount: "N/A",
    tenantNames: "N/A",
  },
  "456-greenville-2": {
    name: "456 Greenville Rd",
    address: "456 Greenville Rd Wilmington NC 28403",
    value: "$5,000,000",
    unitCount: "N/A",
    tenantNames: "N/A",
  },
}

const mockTenants = [
  "Barnes and Noble",
  "Burney's",
  "Chili's",
  "Sephora",
  "Blue Ridge Coffee Co",
  "Coastal Dental Group",
  "Atlantic Law Partners",
  "Fitness First Studio",
  "Harbor Insurance Agency",
  "TechStart Solutions",
  "Bright Horizons Consulting",
  "Carolina Medical Supplies",
  "Summit Financial Advisors",
  "Magnolia Spa & Wellness",
  "Artisan Bakery",
  "Riverside Accounting Group",
  "Pediatric Care Associates",
  "Creative Design Studio",
  "Coastal Realty Group",
]

const previewData = [
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "101",
    tenantName: "Sepora", // Changed from "Sephora" to "Sepora" to match manual selection
    leaseType: "Retail",
    leaseStart: "1/2/25",
    leaseEnd: "1/2/35",
    breakDate: "1/2/30",
    vacatedDate: "",
    monthlyRent: "2000",
    serviceCharge: "350",
    unitArea: "1200",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "102",
    tenantName: "Blue Ridge Coffee Co",
    leaseType: "Food & Beverage",
    leaseStart: "3/15/24",
    leaseEnd: "3/15/34",
    breakDate: "3/15/29",
    vacatedDate: "",
    monthlyRent: "1850",
    serviceCharge: "300",
    unitArea: "950",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "103",
    tenantName: "Coastal Dental Group", // Fixed undetected tenant name
    leaseType: "Medical Office",
    leaseStart: "6/1/23",
    leaseEnd: "5/31/33",
    breakDate: "6/1/28",
    vacatedDate: "",
    monthlyRent: "2200",
    serviceCharge: "400",
    unitArea: "1350",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "201",
    tenantName: "Atlantic Law Partners",
    leaseType: "Professional Office",
    leaseStart: "9/1/24",
    leaseEnd: "8/31/29",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1650",
    serviceCharge: "275",
    unitArea: "850",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "202",
    tenantName: "Fitness First Studio", // Fixed undetected tenant name
    leaseType: "Fitness",
    leaseStart: "11/15/23",
    leaseEnd: "11/14/28",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1900",
    serviceCharge: "325",
    unitArea: "1100",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "203",
    tenantName: "Harbor Insurance Agency",
    leaseType: "Professional Office",
    leaseStart: "1/1/25",
    leaseEnd: "12/31/29",
    breakDate: "", // Fixed undetected break date
    vacatedDate: "", // Fixed undetected vacated date
    monthlyRent: "1550",
    serviceCharge: "250",
    unitArea: "800",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "A-100",
    tenantName: "TechStart Solutions",
    leaseType: "Office",
    leaseStart: "2/1/24",
    leaseEnd: "1/31/34",
    breakDate: "2/1/29",
    vacatedDate: "",
    monthlyRent: "3200",
    serviceCharge: "500",
    unitArea: "2100",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "A-150",
    tenantName: "Bright Horizons Consulting",
    leaseType: "Office",
    leaseStart: "4/15/23",
    leaseEnd: "4/14/33",
    breakDate: "4/15/28",
    vacatedDate: "",
    monthlyRent: "2800",
    serviceCharge: "450",
    unitArea: "1850",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "B-100",
    tenantName: "Carolina Medical Supplies",
    leaseType: "Warehouse",
    leaseStart: "7/1/24",
    leaseEnd: "6/30/34",
    breakDate: "7/1/29",
    vacatedDate: "",
    monthlyRent: "2400",
    serviceCharge: "375",
    unitArea: "1600",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "B-200",
    tenantName: "Summit Financial Advisors",
    leaseType: "Office",
    leaseStart: "10/1/23",
    leaseEnd: "9/30/28",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "2100",
    serviceCharge: "325",
    unitArea: "1400",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 1A",
    tenantName: "Magnolia Spa & Wellness",
    leaseType: "Retail",
    leaseStart: "1/15/24",
    leaseEnd: "1/14/34",
    breakDate: "1/15/29",
    vacatedDate: "",
    monthlyRent: "2250",
    serviceCharge: "400",
    unitArea: "1450",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 1B",
    tenantName: "Artisan Bakery",
    leaseType: "Food & Beverage",
    leaseStart: "3/1/23",
    leaseEnd: "2/28/33",
    breakDate: "3/1/28",
    vacatedDate: "",
    monthlyRent: "1975",
    serviceCharge: "350",
    unitArea: "1150",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 2A",
    tenantName: "Riverside Accounting Group",
    leaseType: "Professional Office",
    leaseStart: "5/15/24",
    leaseEnd: "5/14/29",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1825",
    serviceCharge: "300",
    unitArea: "1050",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 2B",
    tenantName: "Pediatric Care Associates",
    leaseType: "Medical Office",
    leaseStart: "8/1/23",
    leaseEnd: "7/31/33",
    breakDate: "8/1/28",
    vacatedDate: "",
    monthlyRent: "2400",
    serviceCharge: "425",
    unitArea: "1550",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 3A",
    tenantName: "Creative Design Studio",
    leaseType: "Office",
    leaseStart: "12/1/24",
    leaseEnd: "11/30/29",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1650",
    serviceCharge: "275",
    unitArea: "900",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 3B",
    tenantName: "Coastal Realty Group",
    leaseType: "Professional Office",
    leaseStart: "2/1/24",
    leaseEnd: "1/31/34",
    breakDate: "2/1/29",
    vacatedDate: "",
    monthlyRent: "2150",
    serviceCharge: "375",
    unitArea: "1350",
    frequency: "Monthly",
  },
]

const csvData = [
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "101",
    tenantName: "Sepora", // Changed from "Sephora" to "Sepora" to match manual selection
    leaseType: "Retail",
    leaseStart: "1/2/25",
    leaseEnd: "1/2/35",
    breakDate: "1/2/30",
    vacatedDate: "",
    monthlyRent: "2000",
    serviceCharge: "350",
    unitArea: "1200",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "102",
    tenantName: "Blue Ridge Coffee Co",
    leaseType: "Food & Beverage",
    leaseStart: "3/15/24",
    leaseEnd: "3/15/34",
    breakDate: "3/15/29",
    vacatedDate: "",
    monthlyRent: "1850",
    serviceCharge: "300",
    unitArea: "950",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "103",
    tenantName: "Coastal Dental Group", // Fixed undetected tenant name
    leaseType: "Medical Office",
    leaseStart: "6/1/23",
    leaseEnd: "5/31/33",
    breakDate: "6/1/28",
    vacatedDate: "",
    monthlyRent: "2200",
    serviceCharge: "400",
    unitArea: "1350",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "201",
    tenantName: "Atlantic Law Partners",
    leaseType: "Professional Office",
    leaseStart: "9/1/24",
    leaseEnd: "8/31/29",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1650",
    serviceCharge: "275",
    unitArea: "850",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "202",
    tenantName: "Fitness First Studio", // Fixed undetected tenant name
    leaseType: "Fitness",
    leaseStart: "11/15/23",
    leaseEnd: "11/14/28",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1900",
    serviceCharge: "325",
    unitArea: "1100",
    frequency: "Monthly",
  },
  {
    property: "222 Market St Wilmington NC 28403",
    unit: "203",
    tenantName: "Harbor Insurance Agency",
    leaseType: "Professional Office",
    leaseStart: "1/1/25",
    leaseEnd: "12/31/29",
    breakDate: "", // Fixed undetected break date
    vacatedDate: "", // Fixed undetected vacated date
    monthlyRent: "1550",
    serviceCharge: "250",
    unitArea: "800",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "A-100",
    tenantName: "TechStart Solutions",
    leaseType: "Office",
    leaseStart: "2/1/24",
    leaseEnd: "1/31/34",
    breakDate: "2/1/29",
    vacatedDate: "",
    monthlyRent: "3200",
    serviceCharge: "500",
    unitArea: "2100",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "A-150",
    tenantName: "Bright Horizons Consulting",
    leaseType: "Office",
    leaseStart: "4/15/23",
    leaseEnd: "4/14/33",
    breakDate: "4/15/28",
    vacatedDate: "",
    monthlyRent: "2800",
    serviceCharge: "450",
    unitArea: "1850",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "B-100",
    tenantName: "Carolina Medical Supplies",
    leaseType: "Warehouse",
    leaseStart: "7/1/24",
    leaseEnd: "6/30/34",
    breakDate: "7/1/29",
    vacatedDate: "",
    monthlyRent: "2400",
    serviceCharge: "375",
    unitArea: "1600",
    frequency: "Monthly",
  },
  {
    property: "4800 Parker Farm Ln Wilmington NC 28403",
    unit: "B-200",
    tenantName: "Summit Financial Advisors",
    leaseType: "Office",
    leaseStart: "10/1/23",
    leaseEnd: "9/30/28",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "2100",
    serviceCharge: "325",
    unitArea: "1400",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 1A",
    tenantName: "Magnolia Spa & Wellness",
    leaseType: "Retail",
    leaseStart: "1/15/24",
    leaseEnd: "1/14/34",
    breakDate: "1/15/29",
    vacatedDate: "",
    monthlyRent: "2250",
    serviceCharge: "400",
    unitArea: "1450",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 1B",
    tenantName: "Artisan Bakery",
    leaseType: "Food & Beverage",
    leaseStart: "3/1/23",
    leaseEnd: "2/28/33",
    breakDate: "3/1/28",
    vacatedDate: "",
    monthlyRent: "1975",
    serviceCharge: "350",
    unitArea: "1150",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 2A",
    tenantName: "Riverside Accounting Group",
    leaseType: "Professional Office",
    leaseStart: "5/15/24",
    leaseEnd: "5/14/29",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1825",
    serviceCharge: "300",
    unitArea: "1050",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 2B",
    tenantName: "Pediatric Care Associates",
    leaseType: "Medical Office",
    leaseStart: "8/1/23",
    leaseEnd: "7/31/33",
    breakDate: "8/1/28",
    vacatedDate: "",
    monthlyRent: "2400",
    serviceCharge: "425",
    unitArea: "1550",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 3A",
    tenantName: "Creative Design Studio",
    leaseType: "Office",
    leaseStart: "12/1/24",
    leaseEnd: "11/30/29",
    breakDate: "",
    vacatedDate: "",
    monthlyRent: "1650",
    serviceCharge: "275",
    unitArea: "900",
    frequency: "Monthly",
  },
  {
    property: "456 Greenville Rd Wilmington NC 28403",
    unit: "Suite 3B",
    tenantName: "Coastal Realty Group",
    leaseType: "Professional Office",
    leaseStart: "2/1/24",
    leaseEnd: "1/31/34",
    breakDate: "2/1/29",
    vacatedDate: "",
    monthlyRent: "2150",
    serviceCharge: "375",
    unitArea: "1350",
    frequency: "Monthly",
  },
]

export function TenancyDocumentReview({ onBack, onContinue }: TenancyDocumentReviewProps) {
  const [currentStep, setCurrentStep] = useState<1 | 2 | 3>(1)
  const [activeTab, setActiveTab] = useState<"unmatched" | "matched">("unmatched")
  const [selectedProperties, setSelectedProperties] = useState<string[]>([])
  const [isOpen, setIsOpen] = useState(false)

const [activePropertyTab, setActivePropertyTab] = useState<"222-market" | "4800-parker">("222-market")
  const [manualSelection, setManualSelection] = useState<string>("")
  const [autoSelection1, setAutoSelection1] = useState<"document" | "ncino">("document")
  const [autoSelection2, setAutoSelection2] = useState<"document" | "ncino">("document")
  const [autoSelection3, setAutoSelection3] = useState<"document" | "ncino">("document")
  const [showStep2DocumentPreview, setShowStep2DocumentPreview] = useState(true)

const propertyOptions = [
    { id: "456-greenville-1", label: "456 Greenville Rd Wilmington NC 28403" },
    { id: "456-greenville-2", label: "456 Greenville Rd Wilmington NC 28403" },
    { id: "none", label: "None", subtitle: "Select if unable to match" },
  ]

const toggleProperty = (propertyId: string) => {
    setSelectedProperties((prev) => {
      if (prev.includes(propertyId)) {
        return prev.filter((id) => id !== propertyId)
      } else {
        return [...prev, propertyId]
      }
    })
  }

const selectedNonNoneProperties = selectedProperties.filter((id) => id !== "none")

const handleContinue = () => {
    if (currentStep === 2) {
      if (!manualSelection) {
        alert("Please complete all manual selections before continuing")
        return
      }
    }

if (currentStep < 3) {
      setCurrentStep((currentStep + 1) as 1 | 2 | 3)
    } else {
      onContinue()
    }
  }

const [showDocumentPreview, setShowDocumentPreview] = useState(true)
  const [editableData, setEditableData] = useState(csvData)
  const [highlightedCell, setHighlightedCell] = useState<{ row: number; col: string } | null>(null)
  const [showErrorModal, setShowErrorModal] = useState(false)
  const [editingCell, setEditingCell] = useState<{ row: number; col: string } | null>(null)
  const [tenantSearchQuery, setTenantSearchQuery] = useState("")
  const [showAddTenantInput, setShowAddTenantInput] = useState(false)
  const [newTenantName, setNewTenantName] = useState("")
  const [activeEditCell, setActiveEditCell] = useState<{ row: number; col: string } | null>(null)

const manualSelectionsRef = useRef<HTMLDivElement>(null)

const scrollToManualSelections = () => {
    if (manualSelectionsRef.current) {
      manualSelectionsRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
    }
  }

const editableTableRef = useRef<HTMLDivElement>(null)

const undetectedCount = editableData.reduce((count, row) => {
    return count + Object.values(row).filter((value) => value === "UNDETECTED").length
  }, 0)

const handleCellEdit = (rowIndex: number, field: string, value: string) => {
    setEditableData((prev) => prev.map((row, idx) => (idx === rowIndex ? { ...row, [field]: value } : row)))
  }

const handleUndetectedClick = (rowIndex: number, field: string) => {
    setHighlightedCell({ row: rowIndex, col: field })
    setEditingCell({ row: rowIndex, col: field })
    setTimeout(() => setHighlightedCell(null), 2000)
  }

const handleCompleteImport = () => {
    if (undetectedCount > 0) {
      setShowErrorModal(true)
    } else {
      onContinue()
    }
  }

const filteredTenants = mockTenants.filter((tenant) => tenant.toLowerCase().includes(tenantSearchQuery.toLowerCase()))

const handleAddNewTenant = () => {
    if (newTenantName.trim() && editingCell) {
      handleCellEdit(editingCell.row, editingCell.col, newTenantName.trim())
      setNewTenantName("")
      setShowAddTenantInput(false)
      setEditingCell(null)
    }
  }

const scrollToFirstUndetected = () => {
    // Find the first row with an undetected field
    for (let rowIdx = 0; rowIdx < editableData.length; rowIdx++) {
      const row = editableData[rowIdx]
      // Check each field in order
      const fields = [
        "property",
        "unit",
        "tenantName",
        "leaseType",
        "leaseStart",
        "leaseEnd",
        "breakDate",
        "vacatedDate",
        "monthlyRent",
        "frequency",
        "serviceCharge",
        "unitArea",
      ]

for (const field of fields) {
        if (row[field as keyof typeof row] === "UNDETECTED") {
          // Set this cell as active
          setActiveEditCell({ row: rowIdx, col: field })

// Scroll to the editable table
          if (editableTableRef.current) {
            editableTableRef.current.scrollIntoView({ behavior: "smooth", block: "center" })
          }

return
        }
      }
    }
  }

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-semibold">Import Tenancy Schedule</h2>
        <div className="flex items-center gap-2">
          {currentStep === 2 && showStep2DocumentPreview && (
            <Button variant="outline" onClick={() => setShowStep2DocumentPreview(false)}>
              <X className="h-4 w-4 mr-2" />
              Close Document Preview
            </Button>
          )}
          {currentStep === 3 && showDocumentPreview && (
            <Button variant="outline" onClick={() => setShowDocumentPreview(false)}>
              <X className="h-4 w-4 mr-2" />
              Close Document Preview
            </Button>
          )}
          {currentStep === 1 && (
            <Button variant="outline" onClick={() => setShowDocumentPreview(true)}>
              <ExternalLink className="h-4 w-4 mr-2" />
              Open Document Preview
            </Button>
          )}
          <Button variant="outline" onClick={onBack}>
            Save and Close
          </Button>
          {currentStep === 3 ? (
            <Button className="bg-[#032d60] hover:bg-[#032d60]/90" onClick={handleCompleteImport}>
              Complete Import
            </Button>
          ) : currentStep === 2 ? (
            <Button className="bg-[#032d60] hover:bg-[#032d60]/90" onClick={handleContinue}>
              Continue
            </Button>
          ) : currentStep !== 2 ? (
            <Button className="bg-[#032d60] hover:bg-[#032d60]/90" onClick={handleContinue}>
              Continue
            </Button>
          ) : null}
        </div>
      </div>

{/* Progress Indicator */}
      <div className="w-full -mx-6 px-6 py-3">
        <div className="flex items-start justify-between gap-4">
          {/* Step 1: Properties */}
          <div className="flex-1 flex flex-col items-start text-left">
            <div className="w-full flex items-center">
              <div
                className={`rounded-full flex items-center justify-center flex-shrink-0 leading-3 h-6 w-6 ${
                  currentStep > 1
                    ? "bg-[#1B8754]"
                    : currentStep === 1
                      ? "bg-[#BDCDDC]"
                      : "bg-white border-2 border-[#BDCDDC]"
                }`}
              >
                {currentStep > 1 ? (
                  <CheckIcon className="w-4 h-4 text-white" />
                ) : currentStep === 1 ? (
                  <div className="rounded-full bg-[#103656] w-2.5 h-2.5" />
                ) : (
                  <Settings className="w-3 h-3 text-[#BDCDDC]" />
                )}
              </div>
              <div className={`flex-1 h-0.5 ${currentStep > 1 ? "bg-[#1B8754]" : "bg-[#BDCDDC]"}`} />
            </div>
            <div className="mt-3 text-center">
              <div className="font-semibold text-left" style={{ color: "#1f1f1f" }}>
                Property Review
              </div>
              <div className="text-sm text-gray-600">0 item needs review</div>
            </div>
          </div>

{/* Step 2: Tenancies */}
          <div className="flex-1 flex flex-col items-center">
            <div className="w-full flex items-center">
              <div className={`flex-1 h-0.5 ${currentStep > 1 ? "bg-[#1B8754]" : "bg-[#BDCDDC]"}`} />
              <div
                className={`rounded-full flex items-center justify-center flex-shrink-0 mx-2 w-6 h-6 ${
                  currentStep === 2
                    ? "bg-[#BDCDDC]"
                    : currentStep > 2
                      ? "bg-[#1B8754]"
                      : "bg-white border-2 border-[#BDCDDC]"
                }`}
              >
                {currentStep === 2 ? (
                  <div className="rounded-full bg-[#103656] w-2.5 h-2.5" />
                ) : currentStep > 2 ? (
                  <CheckIcon className="w-4 h-4 text-white" />
                ) : (
                  <Settings className="w-3 h-3 text-[#BDCDDC]" />
                )}
              </div>
              <div className={`flex-1 h-0.5 ${currentStep > 2 ? "bg-[#1B8754]" : "bg-[#BDCDDC]"}`} />
            </div>
            <div className="mt-3 text-center">
              <div className="font-semibold" style={{ color: "#1f1f1f" }}>
                Tenancies
              </div>
              <div className="text-sm text-gray-600">4 items need review</div>
            </div>
          </div>

{/* Step 3: All Data */}
          <div className="flex-1 flex flex-col items-end">
            <div className="w-full flex items-center">
              <div className={`flex-1 h-0.5 mx-2 ${currentStep > 2 ? "bg-[#1B8754]" : "bg-[#BDCDDC]"}`} />
              <div
                className={`rounded-full flex items-center justify-center flex-shrink-0 w-6 h-6 ${
                  currentStep === 3 ? "bg-[#BDCDDC]" : "bg-white border-2 border-[#BDCDDC]"
                }`}
              >
                {currentStep === 3 ? (
                  <div className="rounded-full bg-[#103656] w-2.5 h-2.5" />
                ) : (
                  <Settings className="w-3 h-3 text-[#BDCDDC]" />
                )}
              </div>
            </div>
            <div className="mt-3 text-right">
              <div className="font-semibold" style={{ color: "#1f1f1f" }}>
                All Data
              </div>
              <div className="text-sm text-gray-600">4 items need review</div>
            </div>
          </div>
        </div>
      </div>

{currentStep === 1 && (
        <>
          <Card className="p-12">
            <div className="flex flex-col items-center justify-center space-y-6">
              {/* Success Icon */}
              <div className="relative">
                <Search className="h-16 w-16 text-gray-400" />
                <div className="absolute -bottom-1 -right-1 bg-white rounded-full p-1">
                  <div className="bg-[#103656] rounded-full p-2">
                    <CheckIcon className="h-6 w-6 text-white" />
                  </div>
                </div>
              </div>

{/* Heading */}
              <h3 className="text-2xl font-semibold" style={{ color: "#1f1f1f" }}>
                3 properties detected
              </h3>

{/* Property List */}
              <div className="space-y-3 w-full max-w-md">
                <div className="flex items-center gap-3 text-gray-900">
                  <Building2 className="h-5 w-5 text-gray-600 flex-shrink-0" />
                  <span>4800 Parker Farm Lane, Wilmington NC, 28403</span>
                </div>
                <div className="flex items-center gap-3 text-gray-900">
                  <Building2 className="h-5 w-5 text-gray-600 flex-shrink-0" />
                  <span>222 Market Street, Wilmington NC, 28403</span>
                </div>
                <div className="flex items-center gap-3 text-gray-900">
                  <Building2 className="h-5 w-5 text-gray-600 flex-shrink-0" />
                  <span>456 Greenville Rd, Wilmington NC, 28403</span>
                </div>
              </div>

{/* Continue Button */}
              <Button className="bg-[#103656] hover:bg-[#103656]/90 px-8" onClick={handleContinue}>
                Continue
              </Button>
            </div>
          </Card>
        </>
      )}

{currentStep === 2 && (
        <div className="space-y-4">
          {/* Alert Banner */}
          <div className="bg-[#fef1e6] border border-[#f5b77f] rounded-lg px-4 py-3 flex items-center gap-3">
            <Badge
              variant="secondary"
              className="bg-[#f5b77f] text-[#1f1f1f] hover:bg-[#f5b77f]/90 cursor-pointer"
              onClick={scrollToManualSelections}
            >
              4 updates
            </Badge>
            <span className="text-sm text-[#1f1f1f]">
              The system has detected updates to tenancy data since the previous upload. Please review what's changed
              and make selections as needed.
            </span>
          </div>

{/* Document Preview Table */}
          {showStep2DocumentPreview && (
            <Card className="p-4" style={{ height: "400px" }}>
              <div className="flex items-center justify-between mb-3">
                <div>
                  <div className="font-semibold">Document preview: TenancySchedule.csv (read only)</div>
                  <div className="text-sm text-gray-500">Uploaded by Whitney Wright 08/31/2025</div>
                </div>
                <div className="flex items-center gap-2">
                  <Select defaultValue="fit">
                    <SelectTrigger className="w-[100px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="fit">Fit</SelectItem>
                      <SelectItem value="100">100%</SelectItem>
                      <SelectItem value="75">75%</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button variant="ghost" size="icon">
                    <RefreshCw className="h-4 w-4" />
                  </Button>
                </div>
              </div>
              <div className="overflow-auto" style={{ height: "calc(100% - 60px)" }}>
                <table className="w-full border-collapse text-xs">
                  <thead>
                    <tr className="bg-gray-100">
                      <th className="border border-gray-300 px-2 py-1 text-center w-8 bg-gray-200 sticky left-0">#</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Property</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Unit</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Tenant Name</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Lease Type</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Lease Start</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Lease End</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Break Date</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Vacated Date</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Monthly Rent</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Service Charge</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Unit Area (sq ft)</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Frequency</th>
                    </tr>
                  </thead>
                  <tbody>
                    {previewData.map((row, idx) => (
                      <tr key={idx} className="hover:bg-gray-50">
                        <td className="border border-gray-300 px-2 py-1 text-center bg-gray-100 font-medium sticky left-0">
                          {idx + 1}
                        </td>
                        <td className="border border-gray-300 px-2 py-1">{row.property}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.unit}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.tenantName}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.leaseType}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.leaseStart}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.leaseEnd}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.breakDate}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.vacatedDate}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.monthlyRent}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.serviceCharge}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.unitArea}</td>
                        <td className="border border-gray-300 px-2 py-1">{row.frequency}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

{/* Property Tabs */}
          <div className="flex gap-2 border-b">
            <button
              className={`px-4 py-2 font-medium border-b-2 transition-colors leading-7 text-base ${
                activePropertyTab === "222-market"
                  ? "border-[#103656] text-[#103656]"
                  : "border-transparent text-gray-600 hover:text-gray-900"
              }`}
              onClick={() => setActivePropertyTab("222-market")}
            >
              222 Market St (4)
            </button>
          </div>

{/* Manual Selections Section */}
          <div ref={manualSelectionsRef} className="space-y-4">
            <h3 className="font-semibold text-lg">Manual Selections (1)</h3>

<Card className="p-6">
              <h4 className="font-semibold mb-4">Tenant Name Variation Detected</h4>
              <div className="grid grid-cols-2 gap-6">
                {/* Left Side - Document Details */}
                <div>
                  <h5 className="font-medium mb-2">Document Tenant Details:</h5>
                  <p className="text-sm text-gray-600 mb-4">
                    These are key fields extracted from the tenancy schedule. It needs to be matched to a tenant in
                    nCino.
                  </p>
                  <div className="space-y-2">
                    <div>
                      <span className="font-medium">Tenant Name:</span> Sepora
                    </div>
                    <div className="text-sm text-gray-600">Document Value</div>
                  </div>
                </div>

{/* Right Side - nCino Selection */}
                <div>
                  <h5 className="font-medium mb-2">
                    Select Available Tenants in nCino <span className="text-red-500">(Required)</span>
                  </h5>
                  <p className="text-sm text-gray-600 mb-4">
                    In nCino, multiple properties match 'Sepora'. Select which tenant the document refers to.
                  </p>
                  <Select value={manualSelection} onValueChange={setManualSelection}>
                    <SelectTrigger className={!manualSelection ? "border-red-300" : ""}>
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="sephora">Sephora</SelectItem>
                      <SelectItem value="sephora-west">Sephora (West)</SelectItem>
                    </SelectContent>
                  </Select>

<div className="mt-4">
                    <h6 className="font-medium mb-2">Selected Tenant Details:</h6>
                    <div className="space-y-1 text-sm">
                      <div>
                        <span className="text-gray-600">Collateral Name(s):</span>{" "}
                        {manualSelection ? "222 Market St" : "--"}
                      </div>
                      <div>
                        <span className="text-gray-600">Type:</span> {manualSelection ? "Retail" : "--"}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>

{/* Auto-suggested Selections Section */}
          <div className="space-y-4">
            <h3 className="font-semibold text-lg">Auto-suggested selections (3)</h3>

{/* Auto Selection 1 - Tenant Name Variation */}
            <Card className="p-6">
              <h4 className="font-semibold mb-4">Tenant Name Variation Detected</h4>
              <RadioGroup
                value={autoSelection1}
                onValueChange={(value) => setAutoSelection1(value as "document" | "ncino")}
              >
                <div className="grid grid-cols-2 gap-4">
                  <div
                    className={`flex items-start space-x-3 p-4 rounded-lg ${autoSelection1 === "document" ? "bg-gray-50" : ""}`}
                  >
                    <RadioGroupItem value="document" id="auto1-document" className="mt-1" />
                    <Label htmlFor="auto1-document" className="cursor-pointer flex-1">
                      <div className="font-medium">Tenant Name: Blue Ridge Coffee Co</div>
                      <div className="text-sm text-gray-600 mt-1">Update to document value (recommended)</div>
                    </Label>
                  </div>
                  <div
                    className={`flex items-start space-x-3 p-4 rounded-lg ${autoSelection1 === "ncino" ? "bg-gray-50" : ""}`}
                  >
                    <RadioGroupItem value="ncino" id="auto1-ncino" className="mt-1" />
                    <Label htmlFor="auto1-ncino" className="cursor-pointer flex-1">
                      <div className="font-medium">Tenant Name: Blue Ridge Coffee</div>
                      <div className="text-sm text-gray-600 mt-1">Keep current nCino value</div>
                    </Label>
                  </div>
                </div>
              </RadioGroup>
            </Card>

{/* Auto Selection 2 - Tenancy Variation */}
            <Card className="p-6">
              <h4 className="font-semibold mb-4">Tenancy Variation Detected</h4>
              <RadioGroup
                value={autoSelection2}
                onValueChange={(value) => setAutoSelection2(value as "document" | "ncino")}
              >
                <div className="grid grid-cols-2 gap-4">
                  <div
                    className={`flex items-start space-x-3 p-4 rounded-lg ${autoSelection2 === "document" ? "bg-gray-50" : ""}`}
                  >
                    <RadioGroupItem value="document" id="auto2-document" className="mt-1" />
                    <Label htmlFor="auto2-document" className="cursor-pointer flex-1">
                      <div className="space-y-1">
                        <div className="font-medium">Tenant Name: Fitness First Studio</div>
                        <div className="text-sm text-gray-600">Unit: 202</div>
                        <div className="text-sm text-gray-600">Lease Start Date: 11/1/25</div>
                        <div className="text-sm text-gray-600">Lease End Date: 11/14/28</div>
                        <div className="text-sm text-gray-600">Rent Amount: $2500</div>
                        <div className="text-sm text-gray-600 mt-2">Update to document value (recommended)</div>
                      </div>
                    </Label>
                  </div>
                  <div
                    className={`flex items-start space-x-3 p-4 rounded-lg ${autoSelection2 === "ncino" ? "bg-gray-50" : ""}`}
                  >
                    <RadioGroupItem value="ncino" id="auto2-ncino" className="mt-1" />
                    <Label htmlFor="auto2-ncino" className="cursor-pointer flex-1">
                      <div className="space-y-1">
                        <div className="font-medium">Tenant Name: Orange Theory</div>
                        <div className="text-sm text-gray-600">Unit: 202</div>
                        <div className="text-sm text-gray-600">Lease Start Date: 10/01/20</div>
                        <div className="text-sm text-gray-600">Lease End Date: 10/01/25</div>
                        <div className="text-sm text-gray-600">Rent Amount: $2600</div>
                        <div className="text-sm text-gray-600 mt-2">Keep current nCino value</div>
                      </div>
                    </Label>
                  </div>
                </div>
              </RadioGroup>
            </Card>

{/* Auto Selection 3 - Unit Name Variation */}
            <Card className="p-6">
              <h4 className="font-semibold mb-4">Unit Name Variation Detected</h4>
              <RadioGroup
                value={autoSelection3}
                onValueChange={(value) => setAutoSelection3(value as "document" | "ncino")}
              >
                <div className="grid grid-cols-2 gap-4">
                  <div
                    className={`flex items-start space-x-3 p-4 rounded-lg ${autoSelection3 === "document" ? "bg-gray-50" : ""}`}
                  >
                    <RadioGroupItem value="document" id="auto3-document" className="mt-1" />
                    <Label htmlFor="auto3-document" className="cursor-pointer flex-1">
                      <div className="font-medium">Unit: A-100</div>
                      <div className="text-sm text-gray-600 mt-1">Update to document value (recommended)</div>
                    </Label>
                  </div>
                  <div
                    className={`flex items-start space-x-3 p-4 rounded-lg ${autoSelection3 === "ncino" ? "bg-gray-50" : ""}`}
                  >
                    <RadioGroupItem value="ncino" id="auto3-ncino" className="mt-1" />
                    <Label htmlFor="auto3-ncino" className="cursor-pointer flex-1">
                      <div className="font-medium">Unit Name: A100</div>
                      <div className="text-sm text-gray-600 mt-1">Keep current nCino value</div>
                    </Label>
                  </div>
                </div>
              </RadioGroup>
            </Card>
          </div>
        </div>
      )}

{currentStep === 3 && (
        <div className="space-y-4">
          {/* Alert Banner */}
          <div className="bg-[#f0f5fa] border border-[#e5ccff] rounded-lg px-4 py-3 flex items-center gap-3">
            <div className="flex items-center gap-2 text-sm">
              <span className="font-semibold text-[#1f1f1f]">{undetectedCount} undetected fields</span>
              <span className="text-[#6d6d6d]">Review and make any changes to tenancy records to be imported</span>
            </div>
          </div>

{/* Document Preview Table */}
          {showDocumentPreview && (
            <Card className="p-4" style={{ height: "400px" }}>
              <div className="flex items-center justify-between mb-3">
                <div>
                  <div className="font-semibold">Document Preview: TenancySchedule.csv (read only) </div>
                  <div className="text-sm text-gray-500">Uploaded by Whitney Wright 08/31/2025</div>
                </div>
                <div className="flex items-center gap-2">
                  <Select defaultValue="fit">
                    <SelectTrigger className="w-[100px]">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="fit">Fit</SelectItem>
                      <SelectItem value="100">100%</SelectItem>
                      <SelectItem value="75">75%</SelectItem>
                    </SelectContent>
                  </Select>
                  <Button variant="ghost" size="icon">
                    <RefreshCw className="h-4 w-4" />
                  </Button>
                </div>
              </div>
              <div className="overflow-auto" style={{ height: "calc(100% - 60px)" }}>
                <table className="w-full border-collapse text-xs">
                  <thead>
                    <tr className="bg-gray-100">
                      <th className="border border-gray-300 px-2 py-1 text-center w-8 bg-gray-200 sticky left-0">#</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Property</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Unit</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Tenant Name</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Lease Type</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Lease Start</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Lease End</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Break Date</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Vacated Date</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Monthly Rent</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Service Charge</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Unit Area (sq ft)</th>
                      <th className="border border-gray-300 px-2 py-1 text-left font-semibold">Frequency</th>
                    </tr>
                  </thead>
                  <tbody>
                    {previewData.map((row, idx) => (
                      <tr key={idx} className="hover:bg-gray-50">
                        <td className="border border-gray-300 px-2 py-1 text-center bg-gray-100 font-medium sticky left-0">
                          {idx + 1}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "property" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.property}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "unit" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.unit}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "tenantName" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.tenantName}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "leaseType" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.leaseType}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "leaseStart" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.leaseStart}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "leaseEnd" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.leaseEnd}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "breakDate" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.breakDate}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "vacatedDate"
                              ? "bg-yellow-100"
                              : ""
                          }`}
                        >
                          {row.vacatedDate}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "monthlyRent"
                              ? "bg-yellow-100"
                              : ""
                          }`}
                        >
                          {row.monthlyRent}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "serviceCharge"
                              ? "bg-yellow-100"
                              : ""
                          }`}
                        >
                          {row.serviceCharge}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "unitArea" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.unitArea}
                        </td>
                        <td
                          className={`border border-gray-300 px-2 py-1 ${
                            highlightedCell?.row === idx && highlightedCell?.col === "frequency" ? "bg-yellow-100" : ""
                          }`}
                        >
                          {row.frequency}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>
          )}

{/* Editable Table */}
          <Card ref={editableTableRef} className="p-4" style={{ height: "400px" }}>
            <div className="flex items-center justify-between mb-3">
              <div>
                <div className="font-semibold">Tenancy records to be imported</div>
              </div>
            </div>
            <div className="overflow-x-auto overflow-y-auto" style={{ height: "calc(100% - 60px)" }}>
              <table className="w-full text-sm border-collapse">
                <thead className="sticky top-0 bg-white">
                  <tr className="border-b">
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[200px]">Property</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[80px]">Unit</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[180px]">Tenant Name</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[150px]">Lease Type</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[150px]">Lease Start</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[150px]">Lease End</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[150px]">Break Date</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[150px]">Vacated Date</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[100px]">Income*</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[180px]">Frequency (Derived)*</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[140px]">Service Charge*</th>
                    <th className="text-left font-semibold py-2 px-3 text-xs min-w-[100px]">Unit Area</th>
                  </tr>
                </thead>
                <tbody>
                  {editableData.map((row, rowIdx) => (
                    <tr key={rowIdx} className="border-b h-8">
                      {/* Property Cell */}
                      <td className="px-3 h-8 min-w-[200px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "property" ? (
                          <Select
                            value={row.property}
                            onValueChange={(value) => {
                              handleCellEdit(rowIdx, "property", value)
                              setActiveEditCell(null)
                            }}
                            onOpenChange={(open) => {
                              if (!open) setActiveEditCell(null)
                            }}
                          >
                            <SelectTrigger className="h-7 text-xs border-blue-500">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="222 Market St Wilmington NC 28403">
                                222 Market St Wilmington NC 28403
                              </SelectItem>
                              <SelectItem value="4800 Parker Farm Ln Wilmington NC 28403">
                                4800 Parker Farm Ln Wilmington NC 28403
                              </SelectItem>
                              <SelectItem value="456 Greenville Rd Wilmington NC 28403">
                                456 Greenville Rd Wilmington NC 28403
                              </SelectItem>
                            </SelectContent>
                          </Select>
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "property" })}
                          >
                            {row.property}
                          </div>
                        )}
                      </td>

{/* Unit Cell */}
                      <td className="px-3 h-8 min-w-[80px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "unit" ? (
                          <Input
                            value={row.unit}
                            onChange={(e) => handleCellEdit(rowIdx, "unit", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "unit" })}
                          >
                            {row.unit}
                          </div>
                        )}
                      </td>

{/* Tenant Name Cell */}
                      <td className="px-3 h-8 min-w-[180px]">
                        {row.tenantName === "UNDETECTED" ? (
                          <Popover
                            open={editingCell?.row === rowIdx && editingCell?.col === "tenantName"}
                            onOpenChange={(open) => {
                              if (open) {
                                setEditingCell({ row: rowIdx, col: "tenantName" })
                                setShowAddTenantInput(false)
                                setTenantSearchQuery("")
                                handleUndetectedClick(rowIdx, "tenantName")
                              } else {
                                setEditingCell(null)
                                setShowAddTenantInput(false)
                                setTenantSearchQuery("")
                              }
                            }}
                          >
                            <PopoverTrigger asChild>
                              <button className="flex items-center gap-1 text-orange-600 hover:text-orange-700 h-7 text-xs">
                                <AlertTriangle className="h-3 w-3" />
                                Undetected
                              </button>
                            </PopoverTrigger>
                            <PopoverContent className="w-80 p-0" align="start">
                              <div className="p-3">
                                <div className="relative">
                                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                                  <Input
                                    placeholder="Search tenants..."
                                    value={tenantSearchQuery}
                                    onChange={(e) => setTenantSearchQuery(e.target.value)}
                                    className="pl-9"
                                    autoFocus
                                  />
                                </div>
                              </div>
                              {tenantSearchQuery.trim() !== "" && (
                                <div className="max-h-[200px] overflow-auto border-t">
                                  {filteredTenants.length > 0 ? (
                                    <>
                                      {filteredTenants.map((tenant) => (
                                        <button
                                          key={tenant}
                                          className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm"
                                          onClick={() => {
                                            handleCellEdit(rowIdx, "tenantName", tenant)
                                            setEditingCell(null)
                                            setTenantSearchQuery("")
                                          }}
                                        >
                                          {tenant}
                                        </button>
                                      ))}
                                    </>
                                  ) : (
                                    <>
                                      <div className="px-4 py-2 text-sm text-gray-500 italic">No results</div>
                                      {!showAddTenantInput ? (
                                        <button
                                          className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm flex items-center gap-2 border-t"
                                          onClick={() => {
                                            setShowAddTenantInput(true)
                                            setNewTenantName(tenantSearchQuery)
                                          }}
                                        >
                                          <Plus className="h-4 w-4" />
                                          Add New Tenant
                                        </button>
                                      ) : (
                                        <div className="p-3 flex items-center gap-2 border-t">
                                          <Input
                                            placeholder="Enter tenant name..."
                                            value={newTenantName}
                                            onChange={(e) => setNewTenantName(e.target.value)}
                                            onKeyDown={(e) => {
                                              if (e.key === "Enter") {
                                                handleAddNewTenant()
                                                setTenantSearchQuery("")
                                              }
                                            }}
                                            autoFocus
                                          />
                                          <Button
                                            size="sm"
                                            onClick={() => {
                                              handleAddNewTenant()
                                              setTenantSearchQuery("")
                                            }}
                                          >
                                            Add
                                          </Button>
                                        </div>
                                      )}
                                    </>
                                  )}
                                </div>
                              )}
                            </PopoverContent>
                          </Popover>
                        ) : activeEditCell?.row === rowIdx && activeEditCell?.col === "tenantName" ? (
                          <Popover
                            open={true}
                            onOpenChange={(open) => {
                              if (!open) {
                                setActiveEditCell(null)
                                setShowAddTenantInput(false)
                                setTenantSearchQuery("")
                              }
                            }}
                          >
                            <PopoverTrigger asChild>
                              <div className="h-7 flex items-center cursor-pointer border border-blue-500 bg-white px-2 rounded text-xs">
                                {row.tenantName}
                              </div>
                            </PopoverTrigger>
                            <PopoverContent className="w-80 p-0" align="start">
                              <div className="p-3">
                                <div className="relative">
                                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
                                  <Input
                                    placeholder="Search tenants..."
                                    value={tenantSearchQuery}
                                    onChange={(e) => setTenantSearchQuery(e.target.value)}
                                    className="pl-9"
                                    autoFocus
                                  />
                                </div>
                              </div>
                              {tenantSearchQuery.trim() !== "" && (
                                <div className="max-h-[200px] overflow-auto border-t">
                                  {filteredTenants.length > 0 ? (
                                    <>
                                      {filteredTenants.map((tenant) => (
                                        <button
                                          key={tenant}
                                          className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm"
                                          onClick={() => {
                                            handleCellEdit(rowIdx, "tenantName", tenant)
                                            setActiveEditCell(null)
                                            setTenantSearchQuery("")
                                          }}
                                        >
                                          {tenant}
                                        </button>
                                      ))}
                                    </>
                                  ) : (
                                    <>
                                      <div className="px-4 py-2 text-sm text-gray-500 italic">No results</div>
                                      {!showAddTenantInput ? (
                                        <button
                                          className="w-full text-left px-4 py-2 hover:bg-gray-100 text-sm flex items-center gap-2 border-t"
                                          onClick={() => {
                                            setShowAddTenantInput(true)
                                            setNewTenantName(tenantSearchQuery)
                                          }}
                                        >
                                          <Plus className="h-4 w-4" />
                                          Add New Tenant
                                        </button>
                                      ) : (
                                        <div className="p-3 flex items-center gap-2 border-t">
                                          <Input
                                            placeholder="Enter tenant name..."
                                            value={newTenantName}
                                            onChange={(e) => setNewTenantName(e.target.value)}
                                            onKeyDown={(e) => {
                                              if (e.key === "Enter") {
                                                handleAddNewTenant()
                                                setActiveEditCell(null)
                                                setTenantSearchQuery("")
                                              }
                                            }}
                                            autoFocus
                                          />
                                          <Button
                                            size="sm"
                                            onClick={() => {
                                              handleAddNewTenant()
                                              setActiveEditCell(null)
                                              setTenantSearchQuery("")
                                            }}
                                          >
                                            Add
                                          </Button>
                                        </div>
                                      )}
                                    </>
                                  )}
                                </div>
                              )}
                            </PopoverContent>
                          </Popover>
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "tenantName" })}
                          >
                            {row.tenantName}
                          </div>
                        )}
                      </td>

{/* Lease Type Cell */}
                      <td className="px-3 h-8 min-w-[150px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "leaseType" ? (
                          <Select
                            value={row.leaseType}
                            onValueChange={(value) => {
                              handleCellEdit(rowIdx, "leaseType", value)
                              setActiveEditCell(null)
                            }}
                            onOpenChange={(open) => {
                              if (!open) setActiveEditCell(null)
                            }}
                          >
                            <SelectTrigger className="h-7 text-xs border-blue-500">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Retail">Retail</SelectItem>
                              <SelectItem value="Office">Office</SelectItem>
                              <SelectItem value="Medical Office">Medical Office</SelectItem>
                              <SelectItem value="Professional Office">Professional Office</SelectItem>
                              <SelectItem value="Food & Beverage">Food & Beverage</SelectItem>
                              <SelectItem value="Fitness">Fitness</SelectItem>
                              <SelectItem value="Warehouse">Warehouse</SelectItem>
                            </SelectContent>
                          </Select>
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "leaseType" })}
                          >
                            {row.leaseType}
                          </div>
                        )}
                      </td>

{/* Lease Start Cell */}
                      <td className="px-3 h-8 min-w-[150px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "leaseStart" ? (
                          <Input
                            type="date"
                            value={row.leaseStart}
                            onChange={(e) => handleCellEdit(rowIdx, "leaseStart", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "leaseStart" })}
                          >
                            {row.leaseStart}
                          </div>
                        )}
                      </td>

{/* Lease End Cell */}
                      <td className="px-3 h-8 min-w-[150px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "leaseEnd" ? (
                          <Input
                            type="date"
                            value={row.leaseEnd}
                            onChange={(e) => handleCellEdit(rowIdx, "leaseEnd", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "leaseEnd" })}
                          >
                            {row.leaseEnd}
                          </div>
                        )}
                      </td>

{/* Break Date Cell */}
                      <td className="px-3 h-8 min-w-[150px]">
                        {row.breakDate === "UNDETECTED" ? (
                          <button
                            className="flex items-center gap-1 text-orange-600 hover:text-orange-700 h-7 text-xs"
                            onClick={() => {
                              handleUndetectedClick(rowIdx, "breakDate")
                              handleCellEdit(rowIdx, "breakDate", "")
                              setActiveEditCell({ row: rowIdx, col: "breakDate" })
                            }}
                          >
                            <AlertTriangle className="h-3 w-3" />
                            Undetected
                          </button>
                        ) : activeEditCell?.row === rowIdx && activeEditCell?.col === "breakDate" ? (
                          <Input
                            type="date"
                            value={row.breakDate}
                            onChange={(e) => handleCellEdit(rowIdx, "breakDate", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "breakDate" })}
                          >
                            {row.breakDate || "-"}
                          </div>
                        )}
                      </td>

{/* Vacated Date Cell */}
                      <td className="px-3 h-8 min-w-[150px]">
                        {row.vacatedDate === "UNDETECTED" ? (
                          <button
                            className="flex items-center gap-1 text-orange-600 hover:text-orange-700 h-7 text-xs"
                            onClick={() => {
                              handleUndetectedClick(rowIdx, "vacatedDate")
                              handleCellEdit(rowIdx, "vacatedDate", "")
                              setActiveEditCell({ row: rowIdx, col: "vacatedDate" })
                            }}
                          >
                            <AlertTriangle className="h-3 w-3" />
                            Undetected
                          </button>
                        ) : activeEditCell?.row === rowIdx && activeEditCell?.col === "vacatedDate" ? (
                          <Input
                            type="date"
                            value={row.vacatedDate}
                            onChange={(e) => handleCellEdit(rowIdx, "vacatedDate", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "vacatedDate" })}
                          >
                            {row.vacatedDate || "-"}
                          </div>
                        )}
                      </td>

{/* Income Cell */}
                      <td className="px-3 h-8 min-w-[100px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "monthlyRent" ? (
                          <Input
                            type="number"
                            value={row.monthlyRent}
                            onChange={(e) => handleCellEdit(rowIdx, "monthlyRent", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "monthlyRent" })}
                          >
                            {row.monthlyRent}
                          </div>
                        )}
                      </td>

{/* Frequency Cell */}
                      <td className="px-3 h-8 min-w-[180px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "frequency" ? (
                          <Select
                            value={row.frequency}
                            onValueChange={(value) => {
                              handleCellEdit(rowIdx, "frequency", value)
                              setActiveEditCell(null)
                            }}
                            onOpenChange={(open) => {
                              if (!open) setActiveEditCell(null)
                            }}
                          >
                            <SelectTrigger className="h-7 text-xs border-blue-500">
                              <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="Monthly">Monthly</SelectItem>
                              <SelectItem value="Quarterly">Quarterly</SelectItem>
                              <SelectItem value="Annually">Annually</SelectItem>
                            </SelectContent>
                          </Select>
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "frequency" })}
                          >
                            {row.frequency}
                          </div>
                        )}
                      </td>

{/* Service Charge Cell */}
                      <td className="px-3 h-8 min-w-[140px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "serviceCharge" ? (
                          <Input
                            type="number"
                            value={row.serviceCharge}
                            onChange={(e) => handleCellEdit(rowIdx, "serviceCharge", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "serviceCharge" })}
                          >
                            {row.serviceCharge}
                          </div>
                        )}
                      </td>

{/* Unit Area Cell */}
                      <td className="px-3 h-8 min-w-[100px]">
                        {activeEditCell?.row === rowIdx && activeEditCell?.col === "unitArea" ? (
                          <Input
                            type="number"
                            value={row.unitArea}
                            onChange={(e) => handleCellEdit(rowIdx, "unitArea", e.target.value)}
                            onBlur={() => setActiveEditCell(null)}
                            className="h-7 text-xs border-blue-500"
                            autoFocus
                          />
                        ) : (
                          <div
                            className="h-7 flex items-center cursor-pointer hover:bg-gray-50 px-2 rounded text-xs"
                            onClick={() => setActiveEditCell({ row: rowIdx, col: "unitArea" })}
                          >
                            {row.unitArea}
                          </div>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Card>
        </div>
      )}

{/* Error Modal */}
      <Dialog open={showErrorModal} onOpenChange={setShowErrorModal}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-orange-600" />
              Undetected Fields Remaining
            </DialogTitle>
            <DialogDescription>
              There are still {undetectedCount} undetected field{undetectedCount !== 1 ? "s" : ""} in the tenancy data.
              Please correct all undetected fields before completing the import.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button onClick={() => setShowErrorModal(false)}>OK</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}119:T12d5ef,[V0_FILE]typescriptreact:file="chart-config.ts" isMerged="true"
// Add the Chart.js type declarations to make TypeScript happy
declare module "chart.js"
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import "./globals.css"
import type React from "react"
import Header from "./components/header"
import Footer from "./components/footer"
import { openSans, sourceSerifPro } from "./fonts"
import { ScrollToTop } from "./components/scroll-to-top"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${openSans.variable} ${sourceSerifPro.variable}`}>
      <body className={`bg-gray-100 ${openSans.variable} font-sans`}>
        <div className="flex flex-col h-screen">
          <ScrollToTop />
          <div className="sticky top-0 z-50">
            <Header />
          </div>
          <div className="flex-1 overflow-y-auto pb-16">
            {/* Page Content */}
            {children}
          </div>
          <Footer />
        </div>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="app/deals/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import {
  Search,
  BarChart,
  MoreVertical,
  Plus,
  Filter,
  X,
  DollarSign,
  Clock,
  CheckCircle,
  AlertTriangle,
  Briefcase,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import PageHeader from "@/app/components/page-header"
import { DataTable, type ColumnDef } from "@/app/components/data-table"
import { initialDeals, dealStats } from "../data/deals"
import { StatusBadge } from "@/app/components/status-badge"

type Deal = (typeof initialDeals)[0]

// Get unique values for filter options
const getUniqueValues = (field: keyof Deal) => {
  const values = initialDeals.map((item) => item[field])
  return [...new Set(values)]
}

export default function DealsPage() {
  const router = useRouter()
  const [deals, setDeals] = useState(initialDeals)
  const [filteredDeals, setFilteredDeals] = useState(initialDeals)
  const [searchTerm, setSearchTerm] = useState("")

// Filter states
  const [filters, setFilters] = useState({
    status: "",
    stage: "",
    type: "",
    owner: "",
    priority: "",
  })

// Get unique values for filter dropdowns
  const statusOptions = getUniqueValues("status")
  const stageOptions = getUniqueValues("stage")
  const typeOptions = getUniqueValues("type")
  const ownerOptions = getUniqueValues("owner")
  const priorityOptions = getUniqueValues("priority")

// Count active filters
  const activeFilterCount = Object.values(filters).filter(Boolean).length + (searchTerm ? 1 : 0)

const handleNewDeal = () => {
    // Navigate to new deal page
    router.push("/deals/new")
  }

// Handle filter changes
  const handleFilterChange = (field: string, value: string) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

// Clear all filters
  const clearFilters = () => {
    setFilters({
      status: "",
      stage: "",
      type: "",
      owner: "",
      priority: "",
    })
    setSearchTerm("")
  }

// Navigate to deal detail
  const handleDealClick = (deal: Deal) => {
    router.push(`/deals/${deal.id}`)
  }

// Apply filters
  useEffect(() => {
    let result = [...initialDeals]

// Apply search term filter
    if (searchTerm) {
      result = result.filter(
        (item) =>
          item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          item.relationship.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    }

setFilteredDeals(result)
  }, [searchTerm, filters])

const columns: ColumnDef<Deal>[] = [
    {
      id: "name",
      header: "Deal Name",
      accessorKey: "name",
      className: "font-bold text-blue-900 hover:underline cursor-pointer",
      onClick: handleDealClick,
      cell: (item) => (
        <div className="flex items-center gap-3">
          <div className="flex items-center justify-center bg-gray-100 rounded-full h-7 w-7">
            <Briefcase className="h-4 w-4 text-gray-500" />
          </div>
          <span>{item.name}</span>
        </div>
      ),
    },
    {
      id: "amount",
      header: "Amount",
      accessorKey: "amount",
      className: "font-semibold",
    },
    {
      id: "status",
      header: "Status",
      accessorKey: "status",
      cell: (item) => <StatusBadge status={item.status} />,
    },
    {
      id: "stage",
      header: "Stage",
      accessorKey: "stage",
    },
    {
      id: "type",
      header: "Type",
      accessorKey: "type",
    },
    {
      id: "relationship",
      header: "Relationship",
      accessorKey: "relationship",
      className: "text-blue-900 hover:underline cursor-pointer",
      cell: (item) => (
        <span
          className="text-blue-900 hover:underline cursor-pointer"
          onClick={(e) => {
            e.stopPropagation()
            router.push(`/relationships/${item.relationshipId}`)
          }}
        >
          {item.relationship}
        </span>
      ),
    },
    {
      id: "owner",
      header: "Owner",
      accessorKey: "owner",
    },
    {
      id: "closingDate",
      header: "Closing Date",
      accessorKey: "closingDate",
    },
    {
      id: "priority",
      header: "Priority",
      accessorKey: "priority",
      cell: (item) => <StatusBadge status={item.priority} />,
    },
    {
      id: "actions",
      header: "",
      accessorKey: "id",
      sortable: false,
      cell: () => (
        <Button variant="ghost" size="icon">
          <MoreVertical className="h-4 w-4" />
        </Button>
      ),
    },
  ]

const breadcrumbs = [{ label: "Deals", href: "/deals" }, { label: "All Deals" }]

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Page Header */}
      <PageHeader
        title={`Deals`}
        subtitle={`Total Value: ${dealStats.totalValue} • Average Deal Size: ${dealStats.avgDealSize}`}
        icon={BarChart}
        actionLabel="New Deal"
        actionIcon={Plus}
        onAction={handleNewDeal}
        breadcrumbs={breadcrumbs}
      />

{/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-blue-500 p-1 rounded">
                <Clock className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{dealStats.inProgress}</span>
            </div>
            <div className="text-sm text-gray-500">In Progress</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-yellow-500 p-1 rounded">
                <AlertTriangle className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{dealStats.pendingApproval}</span>
            </div>
            <div className="text-sm text-gray-500">Pending Approval</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <CheckCircle className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{dealStats.approved}</span>
            </div>
            <div className="text-sm text-gray-500">Approved</div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-teal-500 p-1 rounded">
                <DollarSign className="h-4 w-4 text-white" />
              </div>
              <span className="text-2xl font-bold">{dealStats.closed}</span>
            </div>
            <div className="text-sm text-gray-500">Closed</div>
          </CardContent>
        </Card>
      </div>

{/* Table Section */}
      <Card>
        <CardContent className="p-6">
          <div className="space-y-4">
            {/* Search and Filter Section */}
            <div className="flex flex-wrap items-center justify-between gap-3">
              <div className="flex flex-wrap items-center gap-3">
                <div className="relative flex-1 max-w-sm">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
                  <Input
                    placeholder="Search deals..."
                    className="pl-9"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>

<div className="space-y-2">
                        <label className="text-sm font-medium">Stage</label>
                        <Select
                          value={filters.stage}
                          onValueChange={(value) => handleFilterChange("stage", value === "all" ? "" : value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select stage" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">All</SelectItem>
                            {stageOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium">Type</label>
                        <Select
                          value={filters.type}
                          onValueChange={(value) => handleFilterChange("type", value === "all" ? "" : value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select type" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">All</SelectItem>
                            {typeOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium">Owner</label>
                        <Select
                          value={filters.owner}
                          onValueChange={(value) => handleFilterChange("owner", value === "all" ? "" : value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select owner" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">All</SelectItem>
                            {ownerOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

<div className="space-y-2">
                        <label className="text-sm font-medium">Priority</label>
                        <Select
                          value={filters.priority}
                          onValueChange={(value) => handleFilterChange("priority", value === "all" ? "" : value)}
                        >
                          <SelectTrigger>
                            <SelectValue placeholder="Select priority" />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="all">All</SelectItem>
                            {priorityOptions.map((option) => (
                              <SelectItem key={option} value={option}>
                                {option}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>

{/* Results count */}
              <div className="text-sm text-gray-500">
                Showing {filteredDeals.length} of {initialDeals.length} deals
              </div>
            </div>

{/* Data Table */}
            <DataTable
              data={filteredDeals}
              columns={columns}
              initialSortField="name"
              noResultsMessage="No deals match your filters. Try adjusting your criteria."
              onRowClick={handleDealClick}
            />
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/reports/page.tsx" isMerged="true"
"use client"
import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import PageHeader from "@/app/components/page-header"
import { PieChartIcon, MoreVertical, MoreHorizontal } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  ResponsiveContainer,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  Bar,
  Area,
  Pie,
  Cell,
  BarChart,
  AreaChart,
  PieChart,
} from "recharts"

export default function ReportsPage() {
  const breadcrumbs = [{ label: "Reports", href: "/reports" }, { label: "Portfolio Advisor" }]
  const [period, setPeriod] = useState("2/28/25")

// Sample data for charts
  const pdData = [
    { name: "Consumer Auto", value: 0.72 },
    { name: "Consumer Other", value: 0.58 },
    { name: "Residential Mortgage", value: 3.65 },
    { name: "Home Equity", value: 3.85 },
    { name: "Small Business", value: 1.45 },
    { name: "Business Other", value: 0.65 },
    { name: "Commercial RE", value: 2.05 },
    { name: "Commercial Other", value: 0.68 },
    { name: "Construction", value: 9.75 },
    { name: "Not Reported", value: 0.95 },
  ]

const interestRateData = [
    { name: "A+ (>800)", value: 4.75 },
    { name: "A (750-799)", value: 5.15 },
    { name: "B+ (700-749)", value: 6.25 },
    { name: "B (650-699)", value: 7.85 },
    { name: "C+ (600-649)", value: 10.25 },
    { name: "C (550-599)", value: 11.85 },
    { name: "D+ (500-549)", value: 13.65 },
    { name: "D (<500)", value: 8.95 },
    { name: "Not Reported", value: 5.95 },
  ]

const regionData = [
    { name: "CA", value: 28.15 },
    { name: "FL", value: 17.75 },
    { name: "TX", value: 22.25 },
    { name: "NY", value: 15.95 },
    { name: "Other", value: 15.9 },
  ]

const concentrationData = [
    { name: "Residential Real Estate", value: 1642.5 },
    { name: "Consumer Lending", value: 1701.8 },
    { name: "Commercial Real Estate", value: 3236.9 },
    { name: "Business Lending", value: 845.7 },
    { name: "Not Reported", value: 342.8 },
  ]

const trendsData = [
    {
      quarter: "Q2 2022",
      "Residential Real Estate": 1000,
      "Consumer Lending": 800,
      "Commercial Real Estate": 1200,
      "Business Lending": 500,
      "Not Reported": 200,
      Total: 3700,
    },
    {
      quarter: "Q3 2022",
      "Residential Real Estate": 1050,
      "Consumer Lending": 850,
      "Commercial Real Estate": 1250,
      "Business Lending": 520,
      "Not Reported": 210,
      Total: 3880,
    },
    {
      quarter: "Q4 2022",
      "Residential Real Estate": 1100,
      "Consumer Lending": 900,
      "Commercial Real Estate": 1300,
      "Business Lending": 540,
      "Not Reported": 220,
      Total: 4060,
    },
    {
      quarter: "Q1 2023",
      "Residential Real Estate": 1150,
      "Consumer Lending": 950,
      "Commercial Real Estate": 1350,
      "Business Lending": 560,
      "Not Reported": 230,
      Total: 4240,
    },
    {
      quarter: "Q2 2023",
      "Residential Real Estate": 1200,
      "Consumer Lending": 1000,
      "Commercial Real Estate": 1400,
      "Business Lending": 580,
      "Not Reported": 240,
      Total: 4420,
    },
    {
      quarter: "Q3 2023",
      "Residential Real Estate": 1300,
      "Consumer Lending": 1100,
      "Commercial Real Estate": 1600,
      "Business Lending": 650,
      "Not Reported": 260,
      Total: 4910,
    },
  ]

// Colors for charts
  const colors = [
    "#0088FE",
    "#00C49F",
    "#FFBB28",
    "#FF8042",
    "#8884D8",
    "#82ca9d",
    "#ffc658",
    "#8dd1e1",
    "#a4de6c",
    "#d0ed57",
  ]
  const regionColors = ["#00C49F", "#FFBB28", "#0088FE", "#8884D8", "#FF8042"]

return (
    <div className="flex-1 p-4 space-y-4">
      <PageHeader title="Portfolio Advisor" subtitle="Reports" icon={PieChartIcon} breadcrumbs={breadcrumbs} />

<div className="flex justify-end mb-4">
        <div className="w-56">
          <div className="flex items-center space-x-2">
            <span className="text-sm font-medium">Period:</span>
            <Select value={period} onValueChange={setPeriod}>
              <SelectTrigger className="h-9">
                <SelectValue placeholder="Select period" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="2/28/25">2/28/25</SelectItem>
                <SelectItem value="1/31/25">1/31/25</SelectItem>
                <SelectItem value="12/31/24">12/31/24</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>
      </div>

{/* Summary Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
        {/* KEY STATS */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-lg font-medium">Key Stat</CardTitle>
            <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-sm">Avg. LTV</span>
                <span className="text-sm font-medium text-blue-600">81.68%</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Avg. Credit Score</span>
                <span className="text-sm font-medium text-blue-600">721</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Avg. Rate</span>
                <span className="text-sm font-medium text-blue-600">10.54%</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* DELINQUENCY SUMMARY */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-lg font-medium">Delinquency Summary</CardTitle>
            <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-sm">Delinquency Ratio</span>
                <span className="text-sm font-medium text-blue-600">.67%</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Delinquent Count</span>
                <span className="text-sm font-medium text-blue-600">491</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Delinquent Balance</span>
                <span className="text-sm font-medium text-blue-600">$15,059,379</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* CHARGE-OFF SUMMARY */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <CardTitle className="text-lg font-medium">Charge-off Summary</CardTitle>
            <MoreHorizontal className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <span className="text-sm">Net Charge-off Count - Lookback 1 Month</span>
                <span className="text-sm font-medium text-blue-600">604</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Net Charge-off Ratio - Lookback 1 Month</span>
                <span className="text-sm font-medium text-blue-600">.02%</span>
              </div>
              <div className="flex justify-between items-center">
                <span className="text-sm">Net Charge-off Balance - Lookback 1 Month</span>
                <span className="text-sm font-medium text-blue-600">$420,290</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Top Row */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* PD by subcategory */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <p className="text-sm text-muted-foreground">Loans</p>
              <CardTitle className="text-lg font-medium">PD by subcategory</CardTitle>
            </div>
            <MoreVertical className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent className="p-0 px-2 pb-4">
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={pdData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis dataKey="name" angle={-45} textAnchor="end" height={70} tick={{ fontSize: 10 }} />
                  <YAxis tickFormatter={(value) => `${value}%`} tick={{ fontSize: 10 }} />
                  <Tooltip formatter={(value) => [`${value}%`, "PD"]} contentStyle={{ fontSize: 12 }} />
                  <Bar dataKey="value" fill="#0088FE" name="PD" radius={[2, 2, 0, 0]}>
                    {pdData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

{/* Interest rate by credit score */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <p className="text-sm text-muted-foreground">Loans</p>
              <CardTitle className="text-lg font-medium">Interest rate by credit score</CardTitle>
            </div>
            <MoreVertical className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent className="p-0 px-2 pb-4">
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={interestRateData} margin={{ top: 20, right: 30, left: 20, bottom: 70 }}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis dataKey="name" angle={-45} textAnchor="end" height={70} tick={{ fontSize: 10 }} />
                  <YAxis tickFormatter={(value) => `${value}%`} tick={{ fontSize: 10 }} />
                  <Tooltip formatter={(value) => [`${value}%`, "Interest Rate"]} contentStyle={{ fontSize: 12 }} />
                  <Bar dataKey="value" fill="#0088FE" name="Interest Rate" radius={[2, 2, 0, 0]}>
                    {interestRateData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                    ))}
                  </Bar>
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

{/* Balance % by region */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <p className="text-sm text-muted-foreground">Loans</p>
              <CardTitle className="text-lg font-medium">Balance % by region</CardTitle>
            </div>
            <MoreVertical className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent className="p-0 px-2 pb-4">
            <div className="h-[300px]">
              <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                  <Pie
                    data={regionData}
                    cx="50%"
                    cy="50%"
                    labelLine={true}
                    outerRadius={80}
                    fill="#8884d8"
                    dataKey="value"
                    nameKey="name"
                    label={({ name, value }) => `${name}: ${value}%`}
                  >
                    {regionData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={regionColors[index % regionColors.length]} />
                    ))}
                  </Pie>
                  <Tooltip formatter={(value) => [`${value}%`, "Balance"]} />
                  <Legend layout="horizontal" verticalAlign="bottom" align="center" />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Concentrations */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <div>
            <p className="text-sm text-muted-foreground">Loans</p>
            <CardTitle className="text-lg font-medium">Concentrations</CardTitle>
          </div>
          <MoreVertical className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent className="p-0 px-2 pb-4">
          <div className="h-[200px]">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart
                data={concentrationData}
                layout="vertical"
                margin={{ top: 20, right: 30, left: 150, bottom: 20 }}
              >
                <CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
                <XAxis type="number" tickFormatter={(value) => `$${value}M`} tick={{ fontSize: 10 }} />
                <YAxis type="category" dataKey="name" tick={{ fontSize: 10 }} width={140} />
                <Tooltip formatter={(value) => [`$${value}M`, "Amount"]} contentStyle={{ fontSize: 12 }} />
                <Bar dataKey="value" name="Amount" radius={[0, 2, 2, 0]}>
                  {concentrationData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                  ))}
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

{/* Trends */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2">
          <div>
            <p className="text-sm text-muted-foreground">Loans</p>
            <CardTitle className="text-lg font-medium">Trends</CardTitle>
          </div>
          <MoreVertical className="h-4 w-4 text-muted-foreground" />
        </CardHeader>
        <CardContent className="p-0 px-2 pb-4">
          <div className="h-[300px]">
            <ResponsiveContainer width="100%" height="100%">
              <AreaChart data={trendsData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="quarter" tick={{ fontSize: 10 }} />
                <YAxis tickFormatter={(value) => `$${value}M`} tick={{ fontSize: 10 }} />
                <Tooltip formatter={(value) => [`$${value}M`, ""]} contentStyle={{ fontSize: 12 }} />
                <Legend layout="horizontal" verticalAlign="bottom" align="center" />
                <Area type="monotone" dataKey="Residential Real Estate" stackId="1" stroke="#0088FE" fill="#0088FE" />
                <Area type="monotone" dataKey="Consumer Lending" stackId="1" stroke="#00C49F" fill="#00C49F" />
                <Area type="monotone" dataKey="Commercial Real Estate" stackId="1" stroke="#FFBB28" fill="#FFBB28" />
                <Area type="monotone" dataKey="Business Lending" stackId="1" stroke="#FF8042" fill="#FF8042" />
                <Area type="monotone" dataKey="Not Reported" stackId="1" stroke="#8884D8" fill="#8884D8" />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </CardContent>
      </Card>

{/* Bottom Row */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {/* DQ ratios by sub-category */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <p className="text-sm text-muted-foreground">Loans</p>
              <CardTitle className="text-lg font-medium">DQ ratios by sub-category</CardTitle>
            </div>
            <MoreVertical className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent className="flex items-center justify-center h-[300px] bg-muted/20">
            <p className="text-muted-foreground">PA element content</p>
          </CardContent>
        </Card>

{/* DQ ratios by original credit score */}
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2">
            <div>
              <p className="text-sm text-muted-foreground">Loans</p>
              <CardTitle className="text-lg font-medium">DQ ratios by original credit score</CardTitle>
            </div>
            <MoreVertical className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent className="flex items-center justify-center h-[300px] bg-muted/20">
            <p className="text-muted-foreground">PA element content</p>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/onboarding/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/components/breadcrumb.tsx" isMerged="true"
import Link from "next/link"
import { ChevronRight } from "lucide-react"

export interface BreadcrumbItem {
  label: string
  href?: string
}

interface BreadcrumbProps {
  items: BreadcrumbItem[]
}

export default function Breadcrumb({ items }: BreadcrumbProps) {
  return (
    <nav aria-label="Breadcrumb" className="flex items-center text-sm text-gray-600">
      {items.map((item, index) => (
        <div key={item.label} className="flex items-center">
          {index > 0 && <ChevronRight className="h-4 w-4 mx-1 text-gray-400" />}
          {item.href ? (
            <Link href={item.href} className="hover:text-blue-900 hover:underline transition-colors">
              {item.label}
            </Link>
          ) : (
            <span className="text-gray-800">{item.label}</span>
          )}
        </div>
      ))}
    </nav>
  )
}
[V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true"
import type * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/popover.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "@/lib/utils"

const Popover = PopoverPrimitive.Root

const PopoverTrigger = PopoverPrimitive.Trigger

const PopoverContent = React.forwardRef<
  React.ElementRef<typeof PopoverPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content
      ref={ref}
      align={align}
      sideOffset={sideOffset}
      className={cn(
        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        className,
      )}
      {...props}
    />
  </PopoverPrimitive.Portal>
))
PopoverContent.displayName = PopoverPrimitive.Content.displayName

export { Popover, PopoverTrigger, PopoverContent }
[V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"
import { cn } from "@/lib/utils"

const Select = SelectPrimitive.Root

const SelectGroup = SelectPrimitive.Group

const SelectValue = SelectPrimitive.Value

const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Trigger
    ref={ref}
    className={cn(
      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
      className,
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronDown className="h-4 w-4 opacity-50" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
))
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName

const SelectScrollUpButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollUpButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronUp className="h-4 w-4" />
  </SelectPrimitive.ScrollUpButton>
))
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName

const SelectScrollDownButton = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.ScrollDownButton
    ref={ref}
    className={cn("flex cursor-default items-center justify-center py-1", className)}
    {...props}
  >
    <ChevronDown className="h-4 w-4" />
  </SelectPrimitive.ScrollDownButton>
))
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName

const SelectContent = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
  <SelectPrimitive.Portal>
    <SelectPrimitive.Content
      ref={ref}
      className={cn(
        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
        position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
        className,
      )}
      position={position}
      {...props}
    >
      <SelectScrollUpButton />
      <SelectPrimitive.Viewport
        className={cn(
          "p-1",
          position === "popper" &&
            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
        )}
      >
        {children}
      </SelectPrimitive.Viewport>
      <SelectScrollDownButton />
    </SelectPrimitive.Content>
  </SelectPrimitive.Portal>
))
SelectContent.displayName = SelectPrimitive.Content.displayName

const SelectLabel = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
))
SelectLabel.displayName = SelectPrimitive.Label.displayName

const SelectItem = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
  <SelectPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
      className,
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <SelectPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </SelectPrimitive.ItemIndicator>
    </span>

<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
  </SelectPrimitive.Item>
))
SelectItem.displayName = SelectPrimitive.Item.displayName

const SelectSeparator = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
))
SelectSeparator.displayName = SelectPrimitive.Separator.displayName

export {
  Select,
  SelectGroup,
  SelectValue,
  SelectTrigger,
  SelectContent,
  SelectLabel,
  SelectItem,
  SelectSeparator,
  SelectScrollUpButton,
  SelectScrollDownButton,
}
[V0_FILE]typescriptreact:file="lib/utils.ts" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Generate a URL-friendly slug from a string
export function slugify(text: string): string {
  return text
    .toString()
    .toLowerCase()
    .replace(/\s+/g, "-") // Replace spaces with -
    .replace(/[^\w-]+/g, "") // Remove all non-word chars
    .replace(/--+/g, "-") // Replace multiple - with single -
    .replace(/^-+/, "") // Trim - from start of text
    .replace(/-+$/, "") // Trim - from end of text
}

// Generate a unique ID from a name and additional string
export function generateId(name: string, suffix = ""): string {
  const timestamp = Date.now().toString(36)
  const randomStr = Math.random().toString(36).substring(2, 8)
  const nameSlug = slugify(name).substring(0, 20)
  return `${nameSlug}-${timestamp}${suffix ? `-${suffix}` : ""}-${randomStr}`
}
[V0_FILE]typescriptreact:file="app/relationships/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/relationships/[id]/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescript:file="app/fonts.ts" isMerged="true"
import localFont from "next/font/local"
import { Open_Sans, Source_Serif_4 as Source_Serif_Pro } from "next/font/google"

export const sfPro = localFont({
  src: [
    {
      path: "../public/fonts/SF-Pro-Display-Regular.otf",
      weight: "400",
      style: "normal",
    },
    {
      path: "../public/fonts/SF-Pro-Display-Medium.otf",
      weight: "500",
      style: "normal",
    },
    {
      path: "../public/fonts/SF-Pro-Display-Semibold.otf",
      weight: "600",
      style: "normal",
    },
    {
      path: "../public/fonts/SF-Pro-Display-Bold.otf",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-sf-pro",
  display: "swap",
})

export const openSans = Open_Sans({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  variable: "--font-open-sans",
  display: "swap",
})

export const sourceSerifPro = Source_Serif_Pro({
  subsets: ["latin"],
  weight: ["400", "600", "700"],
  variable: "--font-source-serif-pro",
  display: "swap",
})

export const avenir = localFont({
  src: [
    {
      path: "../public/fonts/Avenir-Roman.woff2",
      weight: "400",
      style: "normal",
    },
    {
      path: "../public/fonts/Avenir-Medium.woff2",
      weight: "500",
      style: "normal",
    },
    {
      path: "../public/fonts/Avenir-Heavy.woff2",
      weight: "600",
      style: "normal",
    },
    {
      path: "../public/fonts/Avenir-Black.woff2",
      weight: "700",
      style: "normal",
    },
  ],
  variable: "--font-avenir",
  display: "swap",
})
[V0_FILE]typescriptreact:file="public/fonts/README.md" isMerged="true"
# SF Pro Fonts

Place the following SF Pro font files in this directory:
- SF-Pro-Display-Regular.otf
- SF-Pro-Display-Medium.otf
- SF-Pro-Display-Semibold.otf
- SF-Pro-Display-Bold.otf

Note: SF Pro is a licensed font from Apple. You need to download it from Apple's developer website or use it according to Apple's licensing terms.
[V0_FILE]typescriptreact:file="app/deals/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/deals/[id]/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/loans/[id]/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/loans/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
  ({ className, ...props }, ref) => (
    <div className="w-full overflow-auto">
      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
    </div>
  ),
)
Table.displayName = "Table"

const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <thead ref={ref} className={cn("", className)} {...props} />,
)
TableHeader.displayName = "TableHeader"

const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => <tbody ref={ref} className={cn("", className)} {...props} />,
)
TableBody.displayName = "TableBody"

const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
  ({ className, ...props }, ref) => (
    <tfoot ref={ref} className={cn("border-t bg-gray-50/50 font-medium", className)} {...props} />
  ),
)
TableFooter.displayName = "TableFooter"

const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
  ({ className, ...props }, ref) => (
    <tr ref={ref} className={cn("border-b transition-colors hover:bg-gray-50/50", className)} {...props} />
  ),
)
TableRow.displayName = "TableRow"

// Modify the TableHead component to match the reduced padding
const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <th ref={ref} className={cn("h-10 px-4 text-left align-middle font-normal text-gray-600", className)} {...props} />
  ),
)
TableHead.displayName = "TableHead"

// Modify the TableCell component to support centered content for checkboxes
const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => <td ref={ref} className={cn("p-2 align-middle", className)} {...props} />,
)
TableCell.displayName = "TableCell"

// Add a centered variant of TableCell specifically for checkboxes
const TableCellCenter = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
  ({ className, ...props }, ref) => (
    <td ref={ref} className={cn("p-2 align-middle text-center", className)} {...props} />
  ),
)
TableCellCenter.displayName = "TableCellCenter"

const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
  ({ className, ...props }, ref) => (
    <caption ref={ref} className={cn("mt-4 text-sm text-gray-500", className)} {...props} />
  ),
)
TableCaption.displayName = "TableCaption"

// Update the exports to include the new TableCellCenter component
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCellCenter, TableCaption }
[V0_FILE]typescriptreact:file="app/components/deal-resources.tsx" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import { TableCard, SimpleTable } from "@/app/components/table-card"
import { CheckCircle, Clock, AlertCircle } from "lucide-react"
import { useRouter } from "next/navigation"
import { StatusBadge } from "@/app/components/status-badge"

interface DealLoan {
  id: string
  name: string
  amount: string
  interestRate: string
  status: string
  maturityDate: string
  loanType: string
}

interface DealTask {
  name: string
  status: string
  dueDate: string
  assignee: string
}

interface DealDocument {
  name: string
  status: string
  date: string
  owner: string
}

interface DealResourcesProps {
  dealLoans: DealLoan[]
  dealTasks: DealTask[]
  dealDocuments: DealDocument[]
  showLoans?: boolean
  showTasks?: boolean
  showDocuments?: boolean
}

export function DealResources({
  dealLoans,
  dealTasks,
  dealDocuments,
  showLoans = true,
  showTasks = true,
  showDocuments = true,
}: DealResourcesProps) {
  const router = useRouter()

return (
    <div className="space-y-6">
      {/* Loans */}
      {showLoans && (
        <TableCard
          title="Loans"
          actionLabel="Add Loan"
          onAction={() => {}}
          footerContent={
            <Button variant="ghost" size="sm">
              View All Loans
            </Button>
          }
        >
          <SimpleTable
            data={dealLoans}
            columns={[
              {
                key: "name" as keyof DealLoan,
                header: "Loan Name",
                cell: (loan) => (
                  <span
                    className="font-medium text-blue-900 hover:underline cursor-pointer"
                    onClick={() => {
                      console.log(`Navigating to loan: ${loan.id}`)
                      router.push(`/loans/${loan.id}`)
                    }}
                  >
                    {loan.name}
                  </span>
                ),
              },
              { key: "amount" as keyof DealLoan, header: "Amount" },
              { key: "interestRate" as keyof DealLoan, header: "Interest Rate" },
              {
                key: "status" as keyof DealLoan,
                header: "Status",
                cell: (loan) => <StatusBadge status={loan.status} />,
              },
              { key: "maturityDate" as keyof DealLoan, header: "Maturity Date" },
              { key: "loanType" as keyof DealLoan, header: "Type" },
            ]}
            showCheckbox={true}
            noResultsMessage="No loans found for this deal."
          />
        </TableCard>
      )}

{/* Tasks */}
      {showTasks && (
        <TableCard
          title="Tasks"
          actionLabel="Add Task"
          onAction={() => {}}
          footerContent={
            <Button variant="ghost" size="sm">
              View All Tasks
            </Button>
          }
        >
          <SimpleTable
            data={dealTasks}
            columns={[
              {
                key: "name" as keyof DealTask,
                header: "Task Name",
                cell: (task) => <span className="font-medium">{task.name}</span>,
              },
              {
                key: "status" as keyof DealTask,
                header: "Status",
                cell: (task) => <StatusBadge status={task.status} />,
              },
              { key: "dueDate" as keyof DealTask, header: "Due Date" },
              { key: "assignee" as keyof DealTask, header: "Assignee" },
            ]}
            showCheckbox={true}
          />
        </TableCard>
      )}

{/* Documents */}
      {showDocuments && (
        <TableCard
          title="Documents"
          actionLabel="Add Document"
          onAction={() => {}}
          footerContent={
            <Button variant="ghost" size="sm">
              View All Documents
            </Button>
          }
        >
          <SimpleTable
            data={dealDocuments}
            columns={[
              {
                key: "name" as keyof DealDocument,
                header: "Document Name",
                cell: (doc) => <span className="font-medium">{doc.name}</span>,
              },
              {
                key: "status" as keyof DealDocument,
                header: "Status",
                cell: (doc) => <StatusBadge status={doc.status} />,
              },
              { key: "date" as keyof DealDocument, header: "Date" },
              { key: "owner" as keyof DealDocument, header: "Owner" },
            ]}
            showCheckbox={false}
          />
        </TableCard>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = AvatarPrimitive.Root.displayName

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
))
AvatarImage.displayName = AvatarPrimitive.Image.displayName

const AvatarFallback = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Fallback>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Fallback
    ref={ref}
    className={cn(
      "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground",
      className,
    )}
    {...props}
  />
))
AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="app/components/deal-detail-left-column.tsx" isMerged="true"
"use client"
import { useRouter } from "next/navigation"
import Link from "next/link"
import {
  Building,
  FileText,
  Briefcase,
  PieChart,
  Users,
  Edit,
  ChevronDown,
  MoreHorizontal,
  Check,
  Clock,
  Calendar,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { toast } from "@/hooks/use-toast"

// Define milestone status type
export type MilestoneStatus = "Complete" | "In Progress" | "To Do"

// Define milestone type
export interface Milestone {
  id: string
  name: string
  description: string
  status: MilestoneStatus
  date: string
}

export interface DealDetailLeftColumnProps {
  deal: any
  relationship: any
  dealMilestones: Milestone[]
  dealProgressOpen: boolean
  setDealProgressOpen: (open: boolean) => void
  onMilestoneStatusChange: (milestoneId: string, newStatus: MilestoneStatus) => void
  onOpenMilestoneDialog: (milestone: Milestone) => void
}

export function DealDetailLeftColumn({
  deal,
  relationship,
  dealMilestones,
  dealProgressOpen,
  setDealProgressOpen,
  onMilestoneStatusChange,
  onOpenMilestoneDialog,
}: DealDetailLeftColumnProps) {
  const router = useRouter()

return (
    <div className="md:w-1/3 space-y-6">
      {/* Deal Summary */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <FileText className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Deal Summary</CardTitle>
          </div>
          <Button variant="ghost" size="sm">
            <Edit className="h-4 w-4 mr-1" />
            Edit
          </Button>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-gray-700">
            This {deal.type.toLowerCase()} for {deal.amount} is currently in the {deal.stage.toLowerCase()} stage with a{" "}
            {deal.probability} probability of closing. The deal is for {deal.relationship}, a{" "}
            {relationship?.type.toLowerCase()} in the {deal.industry} industry. The expected closing date is{" "}
            {deal.closingDate}.
          </p>
          <div className="text-xs text-gray-500 mt-2">
            This content was generated using AI.{" "}
            <Link href="#" className="text-blue-600">
              Learn more
            </Link>
          </div>
        </CardContent>
      </Card>

{/* Deal Progress */}
      <Collapsible open={dealProgressOpen} onOpenChange={setDealProgressOpen} className="space-y-2">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
            <div className="flex items-center space-x-2">
              <PieChart className="h-5 w-5 text-gray-500" />
              <CardTitle className="text-lg">Deal Progress</CardTitle>
            </div>
            <div className="flex items-center space-x-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => {
                  // Find the first incomplete milestone
                  const nextMilestone = dealMilestones.find((m) => m.status !== "Complete")
                  if (nextMilestone) {
                    onMilestoneStatusChange(nextMilestone.id, "Complete")
                    toast({
                      title: "Progress updated",
                      description: `${nextMilestone.name} marked as complete`,
                    })
                  } else {
                    toast({
                      title: "All milestones complete",
                      description: "The deal has reached the final stage",
                    })
                  }
                }}
              >
                Update Progress
              </Button>
              <CollapsibleTrigger asChild>
                <Button variant="ghost" size="sm">
                  <ChevronDown className={`h-4 w-4 transition-transform ${dealProgressOpen ? "" : "rotate-180"}`} />
                </Button>
              </CollapsibleTrigger>
            </div>
          </CardHeader>
          <CollapsibleContent>
            <CardContent>
              <div className="space-y-2">
                {/* Vertical Progress Stepper */}
                <div className="relative">
                  {/* Continuous vertical line that runs through all steps */}
                  <div
                    className="absolute left-4 top-4 bottom-4 w-[2px] bg-gray-200"
                    style={{ transform: "translateX(-50%)" }}
                  />
                  {dealMilestones.map((milestone, index) => {
                    const isComplete = milestone.status === "Complete"
                    const isInProgress = milestone.status === "In Progress"
                    // If this milestone is complete, color the line up to the next milestone
                    const showColoredLine = isComplete || isInProgress

return (
                      <div key={milestone.id} className="flex items-start mb-6 last:mb-0 relative">
                        {/* Colored line segment for completed steps */}
                        {showColoredLine && index < dealMilestones.length - 1 && (
                          <div
                            className="absolute left-4 top-4 w-[2px] bg-blue-600 h-[calc(100%+1.5rem)]"
                            style={{ transform: "translateX(-50%)" }}
                          />
                        )}

{/* Circle indicator */}
                        <div
                          className={`relative z-10 flex items-center justify-center w-8 h-8 rounded-full border-2 cursor-pointer transition-colors ${
                            isComplete
                              ? "bg-blue-600 border-blue-600"
                              : isInProgress
                                ? "bg-white border-blue-600"
                                : "bg-white border-gray-300"
                          }`}
                          onClick={() => onOpenMilestoneDialog(milestone)}
                          role="button"
                          tabIndex={0}
                          aria-label={`Update ${milestone.name} status`}
                        >
                          {isComplete ? (
                            <Check className="h-4 w-4 text-white" />
                          ) : isInProgress ? (
                            <div className="h-2 w-2 rounded-full bg-blue-600" />
                          ) : (
                            <div className="h-2 w-2 rounded-full bg-gray-300" />
                          )}
                        </div>

{/* Content */}
                        <div
                          className="flex-1 ml-4 cursor-pointer group"
                          onClick={() => onOpenMilestoneDialog(milestone)}
                        >
                          <div className="flex justify-between items-start">
                            <div className="flex flex-col">
                              <span
                                className={`text-sm font-medium group-hover:text-blue-600 transition-colors ${
                                  isComplete || isInProgress ? "text-gray-900" : "text-gray-500"
                                }`}
                              >
                                {milestone.name}
                              </span>
                              <p className="text-xs text-gray-500 mt-1">{milestone.description}</p>
                              <div className="flex items-center mt-1">
                                <Calendar className="h-3 w-3 text-gray-400 mr-1" />
                                <span className="text-xs text-gray-400">{milestone.date}</span>
                              </div>
                            </div>
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                                  <MoreHorizontal className="h-4 w-4" />
                                  <span className="sr-only">Open menu</span>
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem
                                  onClick={(e) => {
                                    e.stopPropagation()
                                    onMilestoneStatusChange(milestone.id, "Complete")
                                  }}
                                >
                                  <Check className="mr-2 h-4 w-4" />
                                  <span>Mark as Complete</span>
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                  onClick={(e) => {
                                    e.stopPropagation()
                                    onMilestoneStatusChange(milestone.id, "In Progress")
                                  }}
                                >
                                  <Clock className="mr-2 h-4 w-4" />
                                  <span>Mark as In Progress</span>
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                  onClick={(e) => {
                                    e.stopPropagation()
                                    onMilestoneStatusChange(milestone.id, "To Do")
                                  }}
                                >
                                  <span className="mr-2 h-4 w-4 flex items-center justify-center">○</span>
                                  <span>Mark as To Do</span>
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </div>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </div>
            </CardContent>
          </CollapsibleContent>
        </Card>
      </Collapsible>

{/* Deal Details */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <Briefcase className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Deal Details</CardTitle>
          </div>
          <Button variant="ghost" size="sm">
            <Edit className="h-4 w-4 mr-1" />
            Edit
          </Button>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <div className="field-label">Deal Name</div>
              <p className="font-medium">{deal.name}</p>
            </div>
            <div>
              <div className="field-label">Amount</div>
              <p className="font-medium">{deal.amount}</p>
            </div>
            <div>
              <div className="field-label">Type</div>
              <p className="font-medium">{deal.type}</p>
            </div>
            <div>
              <div className="field-label">Status</div>
              <p className="font-medium">{deal.status}</p>
            </div>
            <div>
              <div className="field-label">Stage</div>
              <p className="font-medium">{deal.stage}</p>
            </div>
            <div>
              <div className="field-label">Probability</div>
              <p className="font-medium">{deal.probability}</p>
            </div>
            <div>
              <div className="field-label">Priority</div>
              <p className="font-medium">{deal.priority}</p>
            </div>
            <div>
              <div className="field-label">Creation Date</div>
              <p className="font-medium">{deal.dateCreated}</p>
            </div>
            <div>
              <div className="field-label">Closing Date</div>
              <p className="font-medium">{deal.closingDate}</p>
            </div>
            <div>
              <div className="field-label">Owner</div>
              <p className="font-medium">{deal.owner}</p>
            </div>
            <div>
              <div className="field-label">Industry</div>
              <p className="font-medium">{deal.industry}</p>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Relationship Information */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <Building className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Relationship</CardTitle>
          </div>
          <Button variant="ghost" size="sm" onClick={() => router.push(`/relationships/${deal.relationshipId}`)}>
            View
          </Button>
        </CardHeader>
        <CardContent>
          {relationship ? (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <div className="field-label">Relationship Name</div>
                <p
                  className="font-medium text-blue-900 hover:underline cursor-pointer"
                  onClick={() => router.push(`/relationships/${deal.relationshipId}`)}
                >
                  {relationship.name}
                </p>
              </div>
              <div>
                <div className="field-label">Type</div>
                <p className="font-medium">{relationship.type}</p>
              </div>
              <div>
                <div className="field-label">Status</div>
                <p className="font-medium">{relationship.status}</p>
              </div>
              <div>
                <div className="field-label">Risk Status</div>
                <p className="font-medium">{relationship.riskStatus}</p>
              </div>
              <div>
                <div className="field-label">Primary Contact</div>
                <p className="font-medium">{relationship.primaryContact}</p>
              </div>
              <div>
                <div className="field-label">Contact Email</div>
                <p className="font-medium">{relationship.primaryContactEmail}</p>
              </div>
              <div>
                <div className="field-label">Contact Phone</div>
                <p className="font-medium">{relationship.primaryContactPhone}</p>
              </div>
            </div>
          ) : (
            <p className="text-sm text-gray-500">Relationship information not available.</p>
          )}
        </CardContent>
      </Card>

{/* Team Section */}
      <Card>
        <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
          <div className="flex items-center space-x-2">
            <Users className="h-5 w-5 text-gray-500" />
            <CardTitle className="text-lg">Team</CardTitle>
          </div>
          <Button variant="ghost" size="sm">
            <Edit className="h-4 w-4 mr-1" />
            Edit
          </Button>
        </CardHeader>

<CardContent>
          <div className="space-y-3">
            <div className="flex items-center space-x-3">
              <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                <span className="font-medium text-blue-800">OB</span>
              </div>
              <div>
                <p className="font-medium text-gray-900">Olivia Benson</p>
                <p className="text-xs text-gray-500">Relationship Manager</p>
              </div>
            </div>

<div className="flex items-center space-x-3">
              <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                <span className="font-medium text-blue-800">LO</span>
              </div>
              <div>
                <p className="font-medium text-gray-900">Larry Owens</p>
                <p className="text-xs text-gray-500">Loan Officer</p>
              </div>
            </div>

<div className="flex items-center space-x-3">
              <div className="flex-shrink-0 w-8 h-8 rounded-full overflow-hidden bg-blue-100 flex items-center justify-center">
                <span className="font-medium text-blue-800">WW</span>
              </div>
              <div>
                <p className="font-medium text-gray-900">Whitney Wright</p>
                <p className="text-xs text-gray-500">Credit Analyst</p>
              </div>
            </div>
          </div>
        </CardContent>

<CardFooter className="border-t pt-4">
          <Button variant="ghost" size="sm" className="text-gray-600">
            View All
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/compensation/snapshot/page.tsx" isMerged="true"
"use client"

import { CreditCard, ChevronDown, DollarSign, BarChart2, Hash, Clock, LineChart } from "lucide-react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import PageHeader from "@/app/components/page-header"
import { DataTable } from "@/app/components/data-table"
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"

export default function CompensationSnapshotPage() {
  // Breadcrumb items
  const breadcrumbs = [
    { label: "Home", href: "/" },
    { label: "Compensation", href: "/compensation" },
    { label: "Compensation Snapshot" },
  ]

// Sample data for daily compensation over the pay period
  const dailyPayData = [
    { day: "Feb 1", amount: 1200 },
    { day: "Feb 2", amount: 0 },
    { day: "Feb 3", amount: 0 },
    { day: "Feb 4", amount: 1500 },
    { day: "Feb 5", amount: 800 },
    { day: "Feb 6", amount: 0 },
    { day: "Feb 7", amount: 2100 },
    { day: "Feb 8", amount: 0 },
    { day: "Feb 9", amount: 0 },
    { day: "Feb 10", amount: 1800 },
    { day: "Feb 11", amount: 0 },
    { day: "Feb 12", amount: 1300 },
    { day: "Feb 13", amount: 0 },
    { day: "Feb 14", amount: 0 },
    { day: "Feb 15", amount: 2200 },
    { day: "Feb 16", amount: 0 },
    { day: "Feb 17", amount: 1700 },
    { day: "Feb 18", amount: 0 },
    { day: "Feb 19", amount: 0 },
    { day: "Feb 20", amount: 1400 },
    { day: "Feb 21", amount: 900 },
    { day: "Feb 22", amount: 0 },
    { day: "Feb 23", amount: 0 },
    { day: "Feb 24", amount: 1600 },
    { day: "Feb 25", amount: 0 },
    { day: "Feb 26", amount: 1835.23 },
    { day: "Feb 27", amount: 0 },
    { day: "Feb 28", amount: 0 },
  ]

const borrowers = [
    {
      name: "Iljeski",
      loan: "42532991",
      amount: "$454,000",
      bps: "165",
      pay: "$7,491.00",
    },
    {
      name: "Rivera",
      loan: "42532991",
      amount: "$661,500",
      bps: "165",
      pay: "$10,914.75",
    },
    {
      name: "Garcia-Roman",
      loan: "42532991",
      amount: "$508,750",
      bps: "165",
      pay: "$8,394.38",
    },
    {
      name: "White",
      loan: "42532991",
      amount: "$253,000",
      bps: "165",
      pay: "$4,174.50",
    },
    {
      name: "Crenshaw",
      loan: "42532991",
      amount: "$321,750",
      bps: "165",
      pay: "$5,308.88",
    },
  ]

const columns = [
    { id: "name", header: "Borrower", accessorKey: "name" },
    { id: "loan", header: "Loan", accessorKey: "loan" },
    { id: "amount", header: "Loan Amount", accessorKey: "amount" },
    { id: "bps", header: "BPS", accessorKey: "bps" },
    { id: "pay", header: "Pay", accessorKey: "pay" },
  ]

return (
    <div className="space-y-6 p-6">
      <PageHeader
        title={`Compensation Snapshot`}
        subtitle={`Compensation`}
        icon={CreditCard}
        breadcrumbs={breadcrumbs}
      />

<div className="flex items-center justify-between">
        <div className="flex gap-4">
          <Select defaultValue="wasatch">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select Region" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="wasatch">Wasatch Front</SelectItem>
            </SelectContent>
          </Select>

<Select defaultValue="jim">
            <SelectTrigger className="w-[180px]">
              <SelectValue placeholder="Select Employee" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="jim">Jim Carey</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="flex items-center gap-2">
          <Button variant="outline">Past Pay</Button>
          <Button variant="default">This Pay</Button>
          <Button variant="outline">Future Pay</Button>
          <Button variant="outline">2/1/2025</Button>
          <Button variant="outline">2/28/2025</Button>
        </div>
      </div>

<div className="grid grid-cols-5 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-teal-500 p-1 rounded">
                <DollarSign className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">$0.00</span>
            </div>
            <div className="text-sm text-gray-500">Draw Balance</div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-blue-500 p-1 rounded">
                <BarChart2 className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">$2,199,000</span>
            </div>
            <div className="text-sm text-gray-500">Total Volume</div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-purple-500 p-1 rounded">
                <Hash className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">5</span>
            </div>
            <div className="text-sm text-gray-500">Total Units</div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-amber-500 p-1 rounded">
                <Clock className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">$0.00</span>
            </div>
            <div className="text-sm text-gray-500">Held Balance</div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-4">
            <div className="flex items-center space-x-2 mb-2">
              <div className="bg-green-500 p-1 rounded">
                <LineChart className="h-4 w-4 text-white" />
              </div>
              <span className="text-xl font-bold">$43,305.00</span>
            </div>
            <div className="text-sm text-gray-500">Marketing Balance</div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-3 gap-6">
        <div className="col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <div className="flex justify-between items-center">
                <div>
                  <CardTitle>My Compensation</CardTitle>
                  <CardDescription>Daily pay for Feb 1 - Feb 28, 2025</CardDescription>
                </div>
                <div className="text-3xl font-bold">$18,335.23</div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="h-[300px]">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart data={dailyPayData} margin={{ top: 20, right: 30, left: 20, bottom: 60 }}>
                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
                    <XAxis
                      dataKey="day"
                      angle={-45}
                      textAnchor="end"
                      height={60}
                      tick={{ fontSize: 12 }}
                      tickFormatter={(value) => {
                        // Only show every 4th label to avoid crowding
                        const index = dailyPayData.findIndex((item) => item.day === value)
                        return index % 4 === 0 ? value : ""
                      }}
                    />
                    <YAxis tickFormatter={(value) => `$${value}`} />
                    <Tooltip
                      formatter={(value) => [`$${value.toFixed(2)}`, "Amount"]}
                      labelFormatter={(label) => `Date: ${label}`}
                    />
                    <Bar dataKey="amount" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                  </BarChart>
                </ResponsiveContainer>
              </div>
              <div className="mt-6 flex items-center justify-between text-sm">
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-primary"></div>
                  <span>Commissions</span>
                  <span className="font-bold">$36,283.51</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-muted"></div>
                  <span>Adjustments</span>
                  <span className="font-bold">$15,263.24</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="h-3 w-3 rounded-full bg-secondary"></div>
                  <span>Draws</span>
                  <span className="font-bold">$2,685.04</span>
                </div>
              </div>
            </CardContent>
          </Card>

<div className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Draw Balance</CardTitle>
              <div className="flex justify-between text-sm">
                <span>Previous Balance</span>
                <span>$16,643.28</span>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <Button variant="ghost" className="w-full justify-between p-2">
                    <span>Recaptured Draws</span>
                    <div className="flex items-center gap-2">
                      <span>$17,948.28</span>
                      <ChevronDown className="h-4 w-4" />
                    </div>
                  </Button>
                </div>
                <div>
                  <Button variant="ghost" className="w-full justify-between p-2">
                    <span>Non-recoverable Draws</span>
                    <div className="flex items-center gap-2">
                      <span>$0.00</span>
                      <ChevronDown className="h-4 w-4" />
                    </div>
                  </Button>
                </div>
                <div>
                  <Button variant="ghost" className="w-full justify-between p-2">
                    <span>Recoverable Draws</span>
                    <div className="flex items-center gap-2">
                      <span>$1,305.00</span>
                      <ChevronDown className="h-4 w-4" />
                    </div>
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Held Balance</CardTitle>
              <div className="flex justify-between text-sm">
                <span>Previous Balance</span>
                <span>$0.00</span>
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-center py-4 text-muted-foreground">No held balance details</div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Marketing Balance</CardTitle>
              <div className="flex justify-between text-sm">
                <span>Previous Balance</span>
                <span>$42,000.00</span>
              </div>
            </CardHeader>
            <CardContent>
              <Button variant="ghost" className="w-full justify-between p-2">
                <span>Marketing Account Base</span>
                <div className="flex items-center gap-2">
                  <span>$43,305.00</span>
                  <ChevronDown className="h-4 w-4" />
                </div>
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/task-status-badge.tsx" isMerged="true"
// This file should be completely removed since we're now using StatusBadge everywhere
// We've already updated the task-table.tsx to use the StatusBadge component
[V0_FILE]typescriptreact:file="app/requirements/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { toast } from "@/hooks/use-toast"
import { sampleTasks } from "@/app/data/tasks"
import { TaskTable, type Task } from "@/app/components/task-table"
import PageHeader from "@/app/components/page-header"
import { FileText } from "lucide-react"

export default function RequirementsPage() {
  const router = useRouter()
  const [tasks, setTasks] = useState<Task[]>(sampleTasks)

const handleTaskAction = (task: Task, action: string) => {
    switch (action) {
      case "View":
        toast({
          title: "Viewing document",
          description: `Viewing ${task.requirement}`,
        })
        // In a real app, you might navigate to a document view page or open a modal
        break
      case "Update":
        toast({
          title: "Update document",
          description: `Opening ${task.requirement} for update`,
        })
        // Navigate to update form
        break
      case "Request":
        toast({
          title: "Request sent",
          description: `Requesting ${task.requirement} from client`,
        })
        // Send request logic
        break
      default:
        break
    }
  }

const handleAddTask = () => {
    toast({
      title: "Add Requirement",
      description: "Opening form to add a new requirement",
    })
    // In a real app, you would navigate to a form or open a modal
  }

// Breadcrumbs for the requirements page
  const breadcrumbs = [{ label: "Requirements", href: "/requirements" }]

return (
    <div className="flex-1 p-4 space-y-4">
      <PageHeader
        title="Requirements"
        subtitle="Manage requirements and documents for clients"
        icon={FileText}
        breadcrumbs={breadcrumbs}
      />

<TaskTable
        title="Priority Manager"
        subtitle="Track and manage your client's requirements"
        tasks={tasks}
        onTaskAction={handleTaskAction}
        onAddTask={handleAddTask}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/examples/relationship-requirements.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { TaskTable, type Task } from "@/app/components/task-table"
import { sampleTasks } from "@/app/data/tasks"

interface RelationshipRequirementsProps {
  relationshipId: string
}

export function RelationshipRequirements({ relationshipId }: RelationshipRequirementsProps) {
  const [tasks, setTasks] = useState<Task[]>([])

// In a real app, you would fetch tasks for this specific relationship
  useEffect(() => {
    // This is just a simulation - in a real app you'd fetch from your API
    const filteredTasks = sampleTasks.filter((_, index) => index < 8) // Just show fewer tasks as an example
    setTasks(filteredTasks)
  }, [relationshipId])

const handleTaskAction = (task: Task, action: string) => {
    console.log(`Action ${action} on task ${task.id} for relationship ${relationshipId}`)
    // Handle the action based on your app's requirements
  }

const handleAddTask = () => {
    console.log(`Add new task for relationship ${relationshipId}`)
    // Open a form to add a new task
  }

return (
    <TaskTable
      title="Relationship Requirements"
      subtitle="Documents and verifications needed for this relationship"
      tasks={tasks}
      onTaskAction={handleTaskAction}
      onAddTask={handleAddTask}
      relationshipId={relationshipId}
    />
  )
}
[V0_FILE]typescriptreact:file="app/components/status-badge.tsx" isMerged="true"
import { cn } from "@/lib/utils"

interface StatusBadgeProps {
  status: StatusType
  className?: string
}

export function StatusBadge({ status, className }: StatusBadgeProps) {
  // Define color mapping for different status types
  const getStatusColor = (status: StatusType) => {
    switch (status) {
      // Relationship statuses
      case "Customer":
        return "bg-green-100 text-green-800"
      case "Prospect":
        return "bg-blue-100 text-blue-800"
      case "Lead":
        return "bg-purple-100 text-purple-800"
      case "Former Customer":
        return "bg-gray-100 text-gray-800"

// Deal statuses
      case "In Progress":
        return "bg-blue-100 text-blue-800"
      case "Approved":
        return "bg-green-100 text-green-800"
      case "Pending Approval":
        return "bg-yellow-100 text-yellow-800"
      case "Closed":
        return "bg-gray-100 text-gray-800"

// Loan statuses
      case "Active":
        return "bg-green-100 text-green-800"
      case "Pending Closing":
        return "bg-yellow-100 text-yellow-800"
      case "Past Due":
        return "bg-red-100 text-red-800"
      case "Paid Off":
        return "bg-blue-100 text-blue-800"

// Task statuses
      case "Complete":
        return "bg-green-100 text-green-800"
      case "To Do":
        return "bg-gray-100 text-gray-800"
      case "Missing":
        return "bg-red-100 text-red-800"
      case "Exception":
        return "bg-red-100 text-red-800"
      case "Waived":
        return "bg-gray-100 text-gray-800"

// Onboarding statuses
      case "Completed":
        return "bg-green-100 text-green-800"
      case "Not Started":
        return "bg-yellow-100 text-yellow-800"

// Default for any other status
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <span className={cn("px-2 py-1 rounded text-xs font-medium inline-block", getStatusColor(status), className)}>
      {status}
    </span>
  )
}
[V0_FILE]typescriptreact:file="components/status-badge.tsx" isMerged="true"
import { cn } from "@/lib/utils"

interface StatusBadgeProps {
  status: StatusType
  className?: string
}

// Onboarding statuses
      case "Completed":
        return "bg-green-100 text-green-800"
      case "Not Started":
        return "bg-yellow-100 text-yellow-800"

// Default for any other status
      default:
        return "bg-gray-100 text-gray-800"
    }
  }

return (
    <span className={cn("px-2 py-1 rounded text-xs font-medium inline-block", getStatusColor(status), className)}>
      {status}
    </span>
  )
}
[V0_FILE]typescriptreact:file="app/components/stepper.tsx" isMerged="true"
"use client"

import { Check } from "lucide-react"
import { cn } from "@/lib/utils"

export interface StepItem {
  id: string
  title: string
  description?: string
}

interface StepperProps {
  steps: StepItem[]
  currentStep: number
  onStepClick?: (stepIndex: number) => void
}

export function Stepper({ steps, currentStep, onStepClick }: StepperProps) {
  return (
    <div className="space-y-4">
      {steps.map((step, index) => {
        const isCompleted = index < currentStep
        const isCurrent = index === currentStep
        const isClickable = onStepClick && (isCompleted || index === currentStep || index === currentStep + 1)

return (
          <div
            key={step.id}
            className={cn(
              "flex items-start space-x-3 p-3 rounded-md transition-colors",
              isCurrent && "bg-blue-50",
              isClickable && "cursor-pointer hover:bg-gray-50",
            )}
            onClick={() => isClickable && onStepClick(index)}
          >
            <div
              className={cn(
                "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium",
                isCompleted && "border-blue-900 bg-blue-900 text-white",
                isCurrent && "border-blue-900 text-blue-900",
                !isCompleted && !isCurrent && "border-gray-300 text-gray-500",
              )}
            >
              {isCompleted ? <Check className="h-4 w-4" /> : index + 1}
            </div>
            <div className="space-y-0.5">
              <div
                className={cn(
                  "font-medium",
                  isCurrent && "text-blue-900",
                  !isCompleted && !isCurrent && "text-gray-500",
                )}
              >
                {step.title}
              </div>
              {step.description && <div className="text-sm text-gray-500">{step.description}</div>}
            </div>
          </div>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
  return (
    <input
      type={type}
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      ref={ref}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")

const Label = React.forwardRef<
  React.ElementRef<typeof LabelPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
))
Label.displayName = LabelPrimitive.Root.displayName

export { Label }
[V0_FILE]typescriptreact:file="components/ui/radio-group.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => {
  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
})
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ className, ...props }, ref) => {
  return (
    <RadioGroupPrimitive.Item
      ref={ref}
      className={cn(
        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    >
      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
        <Circle className="h-2.5 w-2.5 fill-current text-current" />
      </RadioGroupPrimitive.Indicator>
    </RadioGroupPrimitive.Item>
  )
})
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

export { RadioGroup, RadioGroupItem }
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = DialogPrimitive.Root

const DialogTrigger = DialogPrimitive.Trigger

const DialogPortal = DialogPrimitive.Portal

const DialogClose = DialogPrimitive.Close

const DialogOverlay = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Overlay>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
      className,
    )}
    {...props}
  />
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className,
      )}
      {...props}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
)
DialogHeader.displayName = "DialogHeader"

const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
)
DialogFooter.displayName = "DialogFooter"

const DialogTitle = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Title>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Title
    ref={ref}
    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
    {...props}
  />
))
DialogTitle.displayName = DialogPrimitive.Title.displayName

const DialogDescription = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Description>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
))
DialogDescription.displayName = DialogPrimitive.Description.displayName

export {
  Dialog,
  DialogPortal,
  DialogOverlay,
  DialogClose,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogFooter,
  DialogTitle,
  DialogDescription,
}
[V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true"
import type * as React from "react"

import { cn } from "@/lib/utils"

export interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  config: Record<string, { label: string; color: string }>
}

export function ChartContainer({ className, config, children }: ChartContainerProps) {
  return <div className={cn("relative", className)}>{children}</div>
}

export interface ChartTooltipProps {
  children: React.ReactNode
}

export function ChartTooltip({ children }: ChartTooltipProps) {
  return <>{children}</>
}

export function ChartTooltipContent() {
  return (
    <ul className="list-none p-2 bg-popover text-popover-foreground rounded-md shadow-md">
      <li className="text-sm">
        <span className="font-semibold"></span>
      </li>
    </ul>
  )
}

export {
  BarChart,
  AreaChart,
  PieChart,
} from "recharts"
[V0_FILE]typescriptreact:file="app/components/scroll-to-top.tsx" isMerged="true"
"use client"

import { useEffect } from "react"
import { usePathname, useSearchParams } from "next/navigation"

export function ScrollToTop() {
  const pathname = usePathname()
  const searchParams = useSearchParams()

useEffect(() => {
    // Scroll to top when the route changes
    if (typeof window !== "undefined") {
      // Add a small delay to ensure DOM is updated
      setTimeout(() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "instant",
        })
      }, 0)
    }
  }, [pathname, searchParams])

return null
}
[V0_FILE]typescriptreact:file="app/components/banking-advisor-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Sparkles, Copy, ThumbsUp, ThumbsDown } from "lucide-react"
import { Button } from "@/components/ui/button"

export function BankingAdvisorCard() {
  const [activePage, setActivePage] = useState(0)
  const [expanded, setExpanded] = useState(false)

const pages = [
    {
      title: "Relationship Summary",
      content:
        "The borrower is currently 15 days past due and has breached 1 financial covenants, signaling potential ongoing financial stress. Key indicators include a Risk Rating of 10/15, a low Debt Service Coverage Ratio (DSCR) of 1.23, and a high Debt to Worth ratio of 5.5, alongside a Loan to Value of 77%, all of which reflect significant financial strain. Additionally, the estimated Loss Given Default stands at $75 million, substantially higher than the available $3.5 million in collateral, further highlighting the elevated risk profile.",
    },
    {
      title: "Five C's of Credit",
      content: (
        <div className="bg-gray-50 p-4 rounded-md">
          <h4 className="font-semibold text-lg mb-2">Character</h4>
          <p>
            Edge Communications has a strong reputation in the industry, with over 10 years in operation and good
            standing among vendors. Their credit report shows consistent on-time payments and a solid business credit
            score, making them a reliable applicant.
          </p>
          <div className="flex justify-end mt-4 space-x-2">
            <Button variant="ghost" size="icon">
              <Copy className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon">
              <ThumbsUp className="h-4 w-4" />
            </Button>
            <Button variant="ghost" size="icon">
              <ThumbsDown className="h-4 w-4" />
            </Button>
          </div>
        </div>
      ),
    },
    {
      title: "Capacity",
      content:
        "Edge Communications demonstrates strong cash flow with a historical DSCR of 1.8x, though recent quarters show a decline to 1.23x. Their revenue has grown 12% year-over-year, but operating expenses have increased by 18%, putting pressure on margins.",
    },
    {
      title: "Capital",
      content:
        "The company has $12M in equity against $66M in debt, resulting in a high leverage ratio of 5.5x. This is significantly above the industry average of 3.2x and represents a concerning trend as it has increased from 4.2x last year.",
    },
    {
      title: "Collateral",
      content:
        "Current collateral value is estimated at $3.5M, covering only 4.7% of the total exposure. The primary collateral consists of equipment (60%) and accounts receivable (40%), with liquidation value estimated at 65% of book value.",
    },
  ]

const handlePageChange = (index: number) => {
    setActivePage(index)
  }

return (
    <Card className={`border-gray-200 ${expanded ? "col-span-full" : ""}`}>
      <CardHeader className="pb-2 flex flex-row items-center justify-between">
        <div className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-gray-500" />
          <CardTitle className="text-lg">Banking Advisor</CardTitle>
        </div>
        <Button
          variant="ghost"
          className="text-blue-500 hover:text-blue-700 p-0 h-auto"
          onClick={() => setExpanded(!expanded)}
        >
          {expanded ? "Collapse" : "Expand"}
        </Button>
      </CardHeader>
      <CardContent className="pt-2">
        <div className="space-y-4">
          <div>
            <h3 className="font-semibold text-lg mb-2">{pages[activePage].title}</h3>
            <div className="text-sm text-gray-700">
              {typeof pages[activePage].content === "string" ? (
                <p>{pages[activePage].content}</p>
              ) : (
                pages[activePage].content
              )}
            </div>
            {typeof pages[activePage].content === "string" && (
              <div className="flex justify-end mt-4 space-x-2">
                <Button variant="ghost" size="icon">
                  <Copy className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon">
                  <ThumbsUp className="h-4 w-4" />
                </Button>
                <Button variant="ghost" size="icon">
                  <ThumbsDown className="h-4 w-4" />
                </Button>
              </div>
            )}
          </div>

<div className="flex justify-center space-x-2 pt-2">
            {pages.map((_, index) => (
              <button
                key={index}
                className={`w-4 h-4 rounded-full ${index === activePage ? "bg-blue-500" : "bg-gray-200"}`}
                onClick={() => handlePageChange(index)}
                aria-label={`Go to page ${index + 1}`}
              />
            ))}
          </div>

<div className="text-xs text-gray-400 flex items-center gap-1 pt-2">
            <Sparkles className="h-3 w-3" />
            <span>This content was generated using AI.</span>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/credit-monitoring.tsx" isMerged="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { BankingAdvisorCard } from "./banking-advisor-card"

export function CreditMonitoring() {
  return (
    <div className="space-y-6 mt-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Days Past Due Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Days Past Due</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">15 days</div>
            <div className="text-sm text-muted-foreground mt-1">Last payment: 05/15/2024</div>
            <div className="mt-4 space-y-2">
              <div className="flex justify-between text-sm">
                <span>Current</span>
                <span>30+ days</span>
                <span>60+ days</span>
                <span>90+ days</span>
              </div>
              <div className="h-2 w-full bg-gray-100 rounded-full overflow-hidden">
                <div className="bg-yellow-500 h-2 rounded-full" style={{ width: "25%" }}></div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* DSCR Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Debt Service Coverage Ratio</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold">1.23x</div>
            <div className="text-sm text-muted-foreground mt-1">Minimum required: 1.25x</div>
            <div className="h-1 w-full bg-gray-200 mt-4 rounded-full">
              <div className="bg-yellow-500 h-1 rounded-full" style={{ width: "65%" }}></div>
            </div>
            <div className="flex justify-between text-xs mt-1">
              <span>1.0x</span>
              <span>1.5x</span>
              <span>2.0x</span>
            </div>
          </CardContent>
        </Card>

{/* Banking Advisor Card */}
        <BankingAdvisorCard />
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/credit-monitoring/page.tsx" isMerged="true"
"use client"

import { CreditMonitoring } from "@/app/components/credit-monitoring"
import PageHeader from "@/app/components/page-header"
import { AlertTriangle } from "lucide-react"

export default function CreditMonitoringPage() {
  return (
    <div className="flex-1 p-4 space-y-4">
      <PageHeader
        title="Credit Monitoring"
        subtitle="Track and analyze credit performance"
        icon={AlertTriangle}
        breadcrumbs={[{ label: "Credit Monitoring", href: "/credit-monitoring" }]}
      />

<CreditMonitoring />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/credit-monitoring/loading.tsx" isMerged="true"
import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="flex-1 p-4 space-y-4">
      <div className="space-y-2">
        <Skeleton className="h-10 w-[250px]" />
        <Skeleton className="h-4 w-[300px]" />
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        {[...Array(3)].map((_, i) => (
          <Skeleton key={i} className="h-[200px] w-full rounded-lg" />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/loan-resources.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { TableCard, SimpleTable } from "@/app/components/table-card"
import { CheckCircle, Clock, AlertCircle } from "lucide-react"
import { useRouter } from "next/navigation"
import { StatusBadge } from "@/app/components/status-badge"

interface LoanDocument {
  name: string
  status: string
  date: string
  owner: string
}

interface LoanTask {
  name: string
  status: string
  dueDate: string
  assignee: string
}

interface LoanTeamMember {
  name: string
  role: string
  email: string
  phone: string
}

interface LoanResourcesProps {
  loanDocuments: LoanDocument[]
  loanTasks: LoanTask[]
  loanTeam: LoanTeamMember[]
}

export function LoanResources({ loanDocuments, loanTasks, loanTeam }: LoanResourcesProps) {
  const router = useRouter()

return (
    <div className="space-y-6">
      {/* Documents */}
      <TableCard
        title="Documents"
        actionLabel="Add Document"
        onAction={() => {}}
        footerContent={
          <Button variant="ghost" size="sm">
            View All Documents
          </Button>
        }
      >
        <SimpleTable
          data={loanDocuments}
          columns={[
            {
              key: "name" as keyof LoanDocument,
              header: "Document Name",
              cell: (doc) => <span className="font-medium">{doc.name}</span>,
            },
            {
              key: "status" as keyof LoanDocument,
              header: "Status",
              cell: (doc) => <StatusBadge status={doc.status} />,
            },
            { key: "date" as keyof LoanDocument, header: "Date" },
            { key: "owner" as keyof LoanDocument, header: "Owner" },
          ]}
          showCheckbox={false}
        />
      </TableCard>

{/* Tasks */}
      <TableCard
        title="Tasks"
        actionLabel="Add Task"
        onAction={() => {}}
        footerContent={
          <Button variant="ghost" size="sm">
            View All Tasks
          </Button>
        }
      >
        <SimpleTable
          data={loanTasks}
          columns={[
            {
              key: "name" as keyof LoanTask,
              header: "Task Name",
              cell: (task) => <span className="font-medium">{task.name}</span>,
            },
            {
              key: "status" as keyof LoanTask,
              header: "Status",
              cell: (task) => <StatusBadge status={task.status} />,
            },
            { key: "dueDate" as keyof LoanTask, header: "Due Date" },
            { key: "assignee" as keyof LoanTask, header: "Assignee" },
          ]}
          showCheckbox={true}
        />
      </TableCard>

{/* Team */}
      <TableCard
        title="Team"
        actionLabel="Add Team Member"
        onAction={() => {}}
        footerContent={
          <Button variant="ghost" size="sm">
            View All Team Members
          </Button>
        }
      >
        <SimpleTable
          data={loanTeam}
          columns={[
            {
              key: "name" as keyof LoanTeamMember,
              header: "Name",
              cell: (member) => <span className="font-medium">{member.name}</span>,
            },
            { key: "role" as keyof LoanTeamMember, header: "Role" },
            { key: "email" as keyof LoanTeamMember, header: "Email" },
            { key: "phone" as keyof LoanTeamMember, header: "Phone" },
          ]}
          showCheckbox={false}
        />
      </TableCard>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/spreads-tab.tsx" isMerged="true"
"use client"

import { FileText, Edit, Plus } from "lucide-react"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

interface SpreadsTabProps {
  relationshipId: string
}

export function SpreadsTab({ relationshipId }: SpreadsTabProps) {
  return (
    <div className="space-y-6">
      {/* Header with actions */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
          <h2 className="text-xl font-semibold">Financial Spreads</h2>
          <p className="text-sm text-gray-500">Annual financial data</p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm">
            <FileText className="h-4 w-4 mr-2" />
            Export
          </Button>
          <Button variant="outline" size="sm">
            <Edit className="h-4 w-4 mr-2" />
            Edit
          </Button>
          <Button size="sm">
            <Plus className="h-4 w-4 mr-2" />
            New Spread
          </Button>
        </div>
      </div>

{/* Period selector */}
      <Card>
        <CardHeader className="pb-2 pt-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-base font-semibold">Period Selection</CardTitle>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm">
                Annual
              </Button>
              <Button variant="ghost" size="sm">
                Quarterly
              </Button>
              <Button variant="ghost" size="sm">
                TTM
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">2024</Badge>
            <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">2023</Badge>
            <Badge className="bg-blue-100 text-blue-800 hover:bg-blue-100">2022</Badge>
            <Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100">2021</Badge>
            <Badge className="bg-gray-100 text-gray-800 hover:bg-gray-100">2020</Badge>
          </div>
        </CardContent>
      </Card>

{/* Financial Ratios */}
      <Card>
        <CardHeader className="pb-2 pt-3">
          <CardTitle className="text-base font-semibold">Key Financial Ratios</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div className="p-4 border rounded-lg">
              <div className="field-label">Debt Service Coverage Ratio</div>
              <div className="text-2xl font-bold mt-1">1.12x</div>
              <div className="flex items-center mt-1 text-sm">
                <span className="text-red-600">↓ 0.23x from 2023</span>
              </div>
            </div>

<div className="p-4 border rounded-lg">
              <div className="field-label">Current Ratio</div>
              <div className="text-2xl font-bold mt-1">1.43x</div>
              <div className="flex items-center mt-1 text-sm">
                <span className="text-green-600">↑ 0.15x from 2023</span>
              </div>
            </div>

<div className="p-4 border rounded-lg">
              <div className="field-label">Debt to Worth</div>
              <div className="text-2xl font-bold mt-1">3.8x</div>
              <div className="flex items-center mt-1 text-sm">
                <span className="text-red-600">↑ 0.7x from 2023</span>
              </div>
            </div>

<div className="p-4 border rounded-lg">
              <div className="field-label">Return on Assets</div>
              <div className="text-2xl font-bold mt-1">8.2%</div>
              <div className="flex items-center mt-1 text-sm">
                <span className="text-green-600">↑ 1.4% from 2023</span>
              </div>
            </div>

<div className="p-4 border rounded-lg">
              <div className="field-label">Return on Equity</div>
              <div className="text-2xl font-bold mt-1">18.5%</div>
              <div className="flex items-center mt-1 text-sm">
                <span className="text-green-600">↑ 2.3% from 2023</span>
              </div>
            </div>

<div className="p-4 border rounded-lg">
              <div className="field-label">Inventory Turnover</div>
              <div className="text-2xl font-bold mt-1">5.8x</div>
              <div className="flex items-center mt-1 text-sm">
                <span className="text-green-600">↑ 0.3x from 2023</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Profit & Loss Statement */}
      <Card>
        <CardHeader className="pb-2 pt-3">
          <CardTitle className="text-base font-semibold">Profit & Loss Statement</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full border-collapse">
              <thead>
                <tr className="bg-gray-50 border-b">
                  <th className="text-left p-2 font-medium text-gray-500">Line Item</th>
                  <th className="text-right p-2 font-medium text-gray-500">2024</th>
                  <th className="text-right p-2 font-medium text-gray-500">2023</th>
                  <th className="text-right p-2 font-medium text-gray-500">2022</th>
                  <th className="text-right p-2 font-medium text-gray-500">% Change (YoY)</th>
                </tr>
              </thead>
              <tbody>
                <tr className="border-b">
                  <td className="p-2 font-medium">Revenue</td>
                  <td className="text-right p-2">$8,750,000</td>
                  <td className="text-right p-2">$7,850,000</td>
                  <td className="text-right p-2">$6,950,000</td>
                  <td className="text-right p-2 text-green-600">+11.5%</td>
                </tr>
                <tr className="border-b">
                  <td className="p-2">Cost of Goods Sold</td>
                  <td className="text-right p-2">$5,250,000</td>
                  <td className="text-right p-2">$4,710,000</td>
                  <td className="text-right p-2">$4,170,000</td>
                  <td className="text-right p-2 text-red-600">+11.5%</td>
                </tr>
                <tr className="border-b bg-gray-50 font-medium">
                  <td className="p-2">Gross Profit</td>
                  <td className="text-right p-2">$3,500,000</td>
                  <td className="text-right p-2">$3,140,000</td>
                  <td className="text-right p-2">$2,780,000</td>
                  <td className="text-right p-2 text-green-600">+11.5%</td>
                </tr>
                <tr className="border-b">
                  <td className="p-2">Operating Expenses</td>
                  <td className="text-right p-2">$2,100,000</td>
                  <td className="text-right p-2">$1,960,000</td>
                  <td className="text-right p-2">$1,805,000</td>
                  <td className="text-right p-2 text-red-600">+7.1%</td>
                </tr>
                <tr className="border-b">
                  <td className="p-2">Depreciation & Amortization</td>
                  <td className="text-right p-2">$350,000</td>
                  <td className="text-right p-2">$325,000</td>
                  <td className="text-right p-2">$300,000</td>
                  <td className="text-right p-2 text-red-600">+7.7%</td>
                </tr>
                <tr className="border-b bg-gray-50 font-medium">
                  <td className="p-2">Operating Income</td>
                  <td className="text-right p-2">$1,050,000</td>
                  <td className="text-right p-2">$855,000</td>
                  <td className="text-right p-2">$675,000</td>
                  <td className="text-right p-2 text-green-600">+22.8%</td>
                </tr>
                <tr className="border-b">
                  <td className="p-2">Interest Expense</td>
                  <td className="text-right p-2">$175,000</td>
                  <td className="text-right p-2">$157,000</td>
                  <td className="text-right p-2">$139,000</td>
                  <td className="text-right p-2 text-red-600">+11.5%</td>
                </tr>
                <tr className="border-b">
                  <td className="p-2">Other Income/Expenses</td>
                  <td className="text-right p-2">$25,000</td>
                  <td className="text-right p-2">$22,000</td>
                  <td className="text-right p-2">$18,000</td>
                  <td className="text-right p-2 text-green-600">+13.6%</td>
                </tr>
                <tr className="border-b bg-gray-50 font-medium">
                  <td className="p-2">Income Before Taxes</td>
                  <td className="text-right p-2">$900,000</td>
                  <td className="text-right p-2">$720,000</td>
                  <td className="text-right p-2">$554,000</td>
                  <td className="text-right p-2 text-green-600">+25.0%</td>
                </tr>
                <tr className="border-b">
                  <td className="p-2">Income Taxes</td>
                  <td className="text-right p-2">$225,000</td>
                  <td className="text-right p-2">$180,000</td>
                  <td className="text-right p-2">$138,500</td>
                  <td className="text-right p-2 text-red-600">+25.0%</td>
                </tr>
                <tr className="bg-blue-50 font-bold">
                  <td className="p-2">Net Income</td>
                  <td className="text-right p-2">$675,000</td>
                  <td className="text-right p-2">$540,000</td>
                  <td className="text-right p-2">$415,500</td>
                  <td className="text-right p-2 text-green-600">+25.0%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/credit-monitoring-tab.tsx" isMerged="true"
"use client"

import { AlertCircle, BarChart4, CheckCircle, FileText } from "lucide-react"
import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { StatusBadge } from "@/components/status-badge"
import { Badge } from "@/components/ui/badge"

interface CreditMonitoringTabProps {
  relationshipId: string
}

export function CreditMonitoringTab({ relationshipId }: CreditMonitoringTabProps) {
  return (
    <>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
        {/* Days Past Due Card */}
        <Card className="relative">
          <CardHeader>
            <CardTitle className="text-lg font-medium">Days Past Due</CardTitle>
            <CardDescription>Current past due status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-between items-start">
              <div>
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-red-600">32</span>
                </div>
                <div className="text-sm text-muted-foreground">Current Past Due Days</div>

<div className="mt-3 flex justify-between text-xs">
                  <span>Historical Average</span>
                  <span>12 days</span>
                </div>
              </div>
              <div className="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center">
                <AlertCircle className="h-4 w-4 text-red-600" />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Covenants Card */}
        <Card className="relative">
          <CardHeader>
            <CardTitle className="text-lg font-medium">Covenants</CardTitle>
            <CardDescription>Covenant compliance status</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-between items-start">
              <div>
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-yellow-600">2</span>
                </div>
                <div className="text-sm text-muted-foreground">Covenants Breached</div>

<div className="mt-3 space-y-1">
                  <div className="flex items-center text-sm">
                    <div className="w-2 h-2 rounded-full bg-red-500 mt-1.5 mr-2"></div>
                    <span>Minimum DSCR of 1.25x</span>
                    <StatusBadge status="Breached" />
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="w-2 h-2 rounded-full bg-red-500 mt-1.5 mr-2"></div>
                    <span>Maximum Debt to Worth of 3.0x</span>
                    <StatusBadge status="Breached" />
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                    <span>Minimum Liquidity Ratio of 1.2x</span>
                    <StatusBadge status="Compliant" />
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                    <span>Annual Financial Statements</span>
                    <StatusBadge status="Compliant" />
                  </div>
                </div>
              </div>
              <div className="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center">
                <AlertCircle className="h-4 w-4 text-yellow-600" />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Risk Rating Card */}
        <Card className="relative">
          <CardHeader>
            <CardTitle className="text-lg font-medium">Risk Rating</CardTitle>
            <CardDescription>Current risk assessment</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-between items-start">
              <div className="w-full">
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-yellow-600">4</span>
                </div>
                <div className="text-sm text-muted-foreground">Current Risk Grade (1-7)</div>

<div className="mt-3 space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>Previous Rating:</span>
                    <span>3 (12 months ago)</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Rating Trend:</span>
                    <span className="text-red-600">Deteriorating</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Next Review:</span>
                    <span>June 15, 2025</span>
                  </div>
                </div>
              </div>
              <div className="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center">
                <BarChart4 className="h-4 w-4 text-yellow-600" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Debt Service Coverage Ratio Card */}
        <Card className="relative">
          <CardHeader>
            <CardTitle className="text-lg font-medium">Debt Service Coverage Ratio</CardTitle>
            <CardDescription>Ability to service debt obligations</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-between items-start">
              <div className="w-full">
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-red-600">1.12x</span>
                </div>
                <div className="text-sm text-muted-foreground">Current DSCR</div>

<div className="mt-3 space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>Required Minimum:</span>
                    <span>1.2x</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Industry Average:</span>
                    <span>1.5x</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Trend (12 mo):</span>
                    <span className="text-green-600">+0.15x</span>
                  </div>
                </div>
              </div>
              <div className="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center">
                <AlertCircle className="h-4 w-4 text-red-600" />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Liquidity Ratio Card */}
        <Card className="relative">
          <CardHeader>
            <CardTitle className="text-lg font-medium">Liquidity Ratio</CardTitle>
            <CardDescription>Short-term financial health</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-between items-start">
              <div className="w-full">
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-green-600">1.43x</span>
                </div>
                <div className="text-sm text-muted-foreground">Current Ratio</div>

<div className="mt-3 space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>Required Minimum:</span>
                    <span>1.2x</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Industry Average:</span>
                    <span>1.35x</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Trend (12 mo):</span>
                    <span className="text-green-600">+0.15x</span>
                  </div>
                </div>
              </div>
              <div className="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
                <CheckCircle className="h-4 w-4 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>

{/* Debt to Worth Ratio Card */}
        <Card className="relative">
          <CardHeader>
            <CardTitle className="text-lg font-medium">Debt to Worth Ratio</CardTitle>
            <CardDescription>Leverage and long-term solvency</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex justify-between items-start">
              <div className="w-full">
                <div className="flex items-baseline">
                  <span className="text-3xl font-bold text-red-600">3.8x</span>
                </div>
                <div className="text-sm text-muted-foreground">Current Ratio</div>

<div className="mt-3 space-y-1">
                  <div className="flex justify-between text-sm">
                    <span>Maximum Allowed:</span>
                    <span>3.0x</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Industry Average:</span>
                    <span>2.5x</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span>Trend (12 mo):</span>
                    <span className="text-red-600">+0.7x</span>
                  </div>
                </div>
              </div>
              <div className="h-8 w-8 rounded-full bg-red-100 flex items-center justify-center">
                <AlertCircle className="h-4 w-4 text-red-600" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card className="mt-6">
        <CardHeader className="pb-2 pt-3">
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg">Credit History</CardTitle>
            <Button variant="outline" size="sm">
              <FileText className="h-4 w-4 mr-2" />
              Export Report
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Date</TableHead>
                <TableHead>Description</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Amount</TableHead>
                <TableHead>Impact</TableHead>
                <TableHead className="w-[100px]">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableCell>05/10/2024</TableCell>
                <TableCell className="font-medium">DSCR Covenant Breach</TableCell>
                <TableCell>
                  <StatusBadge status="Non-Compliant" />
                </TableCell>
                <TableCell>-</TableCell>
                <TableCell>
                  <span className="text-red-600">High</span>
                </TableCell>
                <TableCell>
                  <Button variant="ghost" size="sm">
                    View
                  </Button>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>04/15/2024</TableCell>
                <TableCell className="font-medium">Past Due Payment</TableCell>
                <TableCell>
                  <Badge className="bg-red-100 text-red-800 hover:bg-red-100">30+ Days Late</Badge>
                </TableCell>
                <TableCell>$125,000</TableCell>
                <TableCell>
                  <span className="text-red-600">High</span>
                </TableCell>
                <TableCell>
                  <Button variant="ghost" size="sm">
                    View
                  </Button>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>03/31/2024</TableCell>
                <TableCell className="font-medium">Annual Financial Statements</TableCell>
                <TableCell>
                  <StatusBadge status="Completed" />
                </TableCell>
                <TableCell>-</TableCell>
                <TableCell>
                  <span className="text-gray-600">Low</span>
                </TableCell>
                <TableCell>
                  <Button variant="ghost" size="sm">
                    View
                  </Button>
                </TableCell>
              </TableRow>
              <TableRow>
                <TableCell>02/28/2024</TableCell>
                <TableCell className="font-medium">Credit Inquiry</TableCell>
                <TableCell>
                  <StatusBadge status="Flagged" />
                </TableCell>
                <TableCell>-</TableCell>
                <TableCell>
                  <span className="text-yellow-600">Medium</span>
                </TableCell>
                <TableCell>
                  <Button variant="ghost" size="sm">
                    View
                  </Button>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/profitability-tab.tsx" isMerged="true"
"use client"

import { Building, Filter, ArrowUpDown, ChevronDown } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import type { initialRelationships } from "@/app/data/relationships"

interface ProfitabilityTabProps {
  relationship: (typeof initialRelationships)[0]
}

export function ProfitabilityTab({ relationship }: ProfitabilityTabProps) {
  // Sample loan data for the profitability table
  const loanProfitabilityData = [
    {
      name: "Port City Coffee Equipment Loan",
      maturityDate: "Sep 30, 2026",
      loanTerm: 60,
      currentLTV: "0%",
      allInRate: "-",
      raroc: 20.96,
    },
    {
      name: "Port City Coffee CRE 3",
      maturityDate: "Sep 30, 2026",
      loanTerm: 60,
      currentLTV: "22.57%",
      allInRate: "-",
      raroc: 22.98,
    },
    {
      name: "Port City Coffee Working Capital",
      maturityDate: "Mar 15, 2027",
      loanTerm: 36,
      currentLTV: "18.35%",
      allInRate: "-",
      raroc: 19.75,
    },
    {
      name: "Port City Coffee Equipment Loan 2",
      maturityDate: "Dec 10, 2028",
      loanTerm: 48,
      currentLTV: "15.22%",
      allInRate: "-",
      raroc: 21.45,
    },
  ]

return (
    <div className="space-y-6">
      {/* Main Profitability Cards */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Overall Profitability Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-lg">Profitability Card</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 gap-6">
              <div>
                <div className="flex items-center justify-between mb-4">
                  <span className="font-medium text-gray-700">RAROC</span>
                  <span className="text-xl font-bold">23.23%</span>
                </div>
                <div className="space-y-2">
                  <div className="text-base font-medium">Profitability Calculations</div>
                  <div className="flex justify-between">
                    <span>EVA</span>
                    <span className="font-medium">$197,354.12</span>
                  </div>
                  <div className="flex justify-between">
                    <span>NIM</span>
                    <span className="font-medium">2.94%</span>
                  </div>
                  <div className="flex justify-between">
                    <span>ROA</span>
                    <span className="font-medium">3.23%</span>
                  </div>
                  <div className="flex justify-between">
                    <span>ROE</span>
                    <span className="font-medium">13.25%</span>
                  </div>
                  <div className="flex justify-between">
                    <span>SVA</span>
                    <span className="font-medium">$197,536.57</span>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Port City Coffee Comparison Card */}
        <Card>
          <CardHeader className="pb-2 flex flex-row items-center">
            <div className="h-8 w-8 mr-2 bg-blue-600 rounded flex items-center justify-center">
              <Building className="h-4 w-4 text-white" />
            </div>
            <div>
              <CardTitle className="text-base">Port City Coffee</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-2 text-sm">
              <div>
                <span className="text-gray-500">Relationship Record Type</span>
              </div>
              <div className="text-right">
                <span>Business</span>
              </div>
              <div>
                <span className="text-gray-500">Shipping City</span>
              </div>
              <div className="text-right">
                <span>—</span>
              </div>
            </div>

<div className="border-t pt-3">
              <div className="grid grid-cols-3 gap-2 text-sm">
                <div></div>
                <div className="text-center text-gray-500">Actual</div>
                <div className="text-center text-gray-500">Proforma</div>

<div className="font-medium">RAROC</div>
                <div className="text-center">6.94%</div>
                <div className="text-center text-green-600 flex items-center justify-center">
                  18.74%
                  <div className="ml-1 bg-green-100 rounded-full p-0.5">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="h-3 w-3 text-green-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </div>
                </div>

<div className="text-right text-xs text-gray-500 pt-2">March 21, 2025 at 10:29 AM</div>
          </CardContent>
        </Card>

{/* Christa Shelton Household Comparison Card */}
        <Card>
          <CardHeader className="pb-2 flex flex-row items-center">
            <div className="h-8 w-8 mr-2 bg-purple-600 rounded flex items-center justify-center">
              <Building className="h-4 w-4 text-white" />
            </div>
            <div>
              <CardTitle className="text-base">Christa Shelton Household</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid grid-cols-2 gap-2 text-sm">
              <div>
                <span className="text-gray-500">Relationship Record Type</span>
              </div>
              <div className="text-right">
                <span>Household</span>
              </div>
              <div>
                <span className="text-gray-500">Shipping City</span>
              </div>
              <div className="text-right">
                <span>—</span>
              </div>
            </div>

<div className="font-medium">RAROC</div>
                <div className="text-center">10.08%</div>
                <div className="text-center text-red-600 flex items-center justify-center">
                  12.07%
                  <div className="ml-1 text-red-600">
                    <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                      <path
                        fillRule="evenodd"
                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </div>
                </div>

<div className="text-right text-xs text-gray-500 pt-2">March 21, 2025 at 10:29 AM</div>
          </CardContent>
        </Card>
      </div>

{/* Business Line Profitability Cards */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* Loans Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Loans</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="font-medium text-gray-700">RAROC</span>
              <span className="text-lg font-bold">21.83%</span>
            </div>
            <div className="space-y-2">
              <div className="text-sm font-medium">Income</div>
              <div className="flex justify-between text-sm">
                <span>Total Assets for Loans</span>
                <span className="font-medium">$3,300,000.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Net Income</span>
                <span className="font-medium">$249,635.40</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Operating Loan Income</span>
                <span className="font-medium">$1,054,472.60</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Risk Adjusted Income</span>
                <span className="font-medium">$204,784.45</span>
              </div>
            </div>
            <div className="space-y-2">
              <div className="text-sm font-medium">Capital</div>
              <div className="flex justify-between text-sm">
                <span>Capital Allocated for Loans</span>
                <span className="font-medium">$938,005.47</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Cost of Loan Capital</span>
                <span className="font-medium">$56,280.33</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Deposits Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Deposits</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="font-medium text-gray-700">RAROC</span>
              <span className="text-lg font-bold">25.04%</span>
            </div>
            <div className="space-y-2">
              <div className="text-sm font-medium">Income</div>
              <div className="flex justify-between text-sm">
                <span>Total Liabilities for Deposits</span>
                <span className="font-medium">$5,000,000.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Deposit Revenue</span>
                <span className="font-medium">$225,000.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Operating Deposit Income</span>
                <span className="font-medium">$84,600.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Risk Adjusted Net Deposit Income</span>
                <span className="font-medium">$62,604.00</span>
              </div>
            </div>
            <div className="space-y-2">
              <div className="text-sm font-medium">Capital</div>
              <div className="flex justify-between text-sm">
                <span>Capital Allocated for Deposits</span>
                <span className="font-medium">$250,000.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Cost of Deposit Capital</span>
                <span className="font-medium">$25,000.00</span>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Treasury Services Card */}
        <Card>
          <CardHeader className="pb-2">
            <CardTitle className="text-base">Treasury Services</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between">
              <span className="font-medium text-gray-700">RAROC</span>
              <span className="text-lg font-bold">58.83%</span>
            </div>
            <div className="space-y-2">
              <div className="text-sm font-medium">Income</div>
              <div className="flex justify-between text-sm">
                <span>Total Assets for Treasury</span>
                <span className="font-medium">$400,000.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Operating Treasury Income</span>
                <span className="font-medium">$23,800.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Risk Adjusted Net Treasury Income</span>
                <span className="font-medium">$11,760.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Treasury EVA</span>
                <span className="font-medium">$9,760.00</span>
              </div>
            </div>
            <div className="space-y-2">
              <div className="text-sm font-medium">Capital</div>
              <div className="flex justify-between text-sm">
                <span>Capital Allocated for Treasury</span>
                <span className="font-medium">$20,000.00</span>
              </div>
              <div className="flex justify-between text-sm">
                <span>Cost of Treasury Capital</span>
                <span className="font-medium">$2,000.00</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Loan Profitability Table */}
      <Card>
        <CardHeader className="pb-2">
          <div className="flex items-center justify-between">
            <CardTitle className="text-lg">Loan Profitability Table</CardTitle>
            <div className="flex items-center space-x-2">
              <Button variant="outline" size="sm">
                <Filter className="h-4 w-4 mr-2" />
                Filter
              </Button>
              <Button variant="outline" size="sm">
                <ArrowUpDown className="h-4 w-4 mr-2" />
                Sort
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Loan Name</TableHead>
                <TableHead>Maturity Date</TableHead>
                <TableHead>Loan Term (Months)</TableHead>
                <TableHead>Current LTV</TableHead>
                <TableHead>All-in Rate</TableHead>
                <TableHead className="text-right">
                  RAROC
                  <Button variant="ghost" size="icon" className="ml-1 h-4 w-4">
                    <ChevronDown className="h-3 w-3" />
                  </Button>
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loanProfitabilityData.map((loan, index) => (
                <TableRow key={index}>
                  <TableCell className="font-medium">{loan.name}</TableCell>
                  <TableCell>{loan.maturityDate}</TableCell>
                  <TableCell>{loan.loanTerm}</TableCell>
                  <TableCell>{loan.currentLTV}</TableCell>
                  <TableCell>{loan.allInRate}</TableCell>
                  <TableCell className="text-right">
                    <div className="flex items-center justify-end">
                      <Badge
                        className={`${
                          loan.raroc > 22
                            ? "bg-green-100 text-green-800"
                            : loan.raroc > 20
                              ? "bg-blue-100 text-blue-800"
                              : "bg-yellow-100 text-yellow-800"
                        }`}
                      >
                        {loan.raroc.toFixed(2)}%
                      </Badge>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
        <CardFooter className="flex justify-between">
          <div className="text-sm text-gray-500">Showing 4 of 4 loans</div>
          <Button variant="outline" size="sm">
            Export Data
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/key-metrics-cards.tsx" isMerged="true"
"use client"

import { useRouter } from "next/navigation"
import { Card, CardContent } from "@/components/ui/card"
import { DollarSign, BarChart4, CreditCard } from "lucide-react"

interface KeyMetricsCardsProps {
  relationshipId: string
  relationship: any
}

export function KeyMetricsCards({ relationshipId, relationship }: KeyMetricsCardsProps) {
  const router = useRouter()

return (
    <div className="grid grid-cols-1 md:grid-cols-6 gap-4 mt-4">
      <Card
        className="cursor-pointer hover:shadow-md transition-shadow"
        onClick={() => router.push(`/relationships/${relationshipId}?tab=exposure`)}
      >
        <CardContent className="p-4">
          <div className="flex items-center space-x-2 mb-2">
            <div className="bg-teal-500 p-1 rounded">
              <DollarSign className="h-4 w-4 text-white" />
            </div>
            <span className="text-xl font-bold">{relationship.totalExposure}</span>
          </div>
          <div className="text-sm text-gray-500">Total Exposure</div>
        </CardContent>
      </Card>
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center space-x-2 mb-2">
            <div className="bg-yellow-500 p-1 rounded">
              <BarChart4 className="h-4 w-4 text-white" />
            </div>
            <span className="text-xl font-bold text-yellow-600">{relationship.riskGrade}</span>
          </div>
          <div className="text-sm text-gray-500">Risk Grade (1-7)</div>
        </CardContent>
      </Card>
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center space-x-2 mb-2">
            <div className="bg-blue-500 p-1 rounded">
              <BarChart4 className="h-4 w-4 text-white" />
            </div>
            <span className="text-xl font-bold">{relationship.annualRevenue}</span>
          </div>
          <div className="text-sm text-gray-500">Annual Revenue</div>
        </CardContent>
      </Card>
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center space-x-2 mb-2">
            <div className="bg-teal-500 p-1 rounded">
              <DollarSign className="h-4 w-4 text-white" />
            </div>
            <span className="text-xl font-bold">{relationship.totalDeposits}</span>
          </div>
          <div className="text-sm text-gray-500">Total Deposits</div>
        </CardContent>
      </Card>
      <Card>
        <CardContent className="p-4">
          <div className="flex items-center space-x-2 mb-2">
            <div className="bg-pink-500 p-1 rounded">
              <CreditCard className="h-4 w-4 text-white" />
            </div>
            <span className="text-xl font-bold">{relationship.ficoScore}</span>
          </div>
          <div className="text-sm text-gray-500">FICO Score</div>
        </CardContent>
      </Card>
      <Card
        className="cursor-pointer hover:shadow-md transition-shadow"
        onClick={() => router.push(`/relationships/${relationshipId}?tab=profitability`)}
      >
        <CardContent className="p-4">
          <div className="flex items-center space-x-2 mb-2">
            <div className="bg-purple-500 p-1 rounded">
              <BarChart4 className="h-4 w-4 text-white" />
            </div>
            <span className="text-xl font-bold">26.57%</span>
          </div>
          <div className="text-sm text-gray-500">Profitability (RAROC)</div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/exposure-tab.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { TableCard, SimpleTable } from "@/app/components/table-card"
import { ChartContainer } from "@/components/ui/chart"
import { BarChart, Bar, PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
import type { initialRelationships as RelationshipType } from "@/app/data/relationships"

// Sample data for exposure breakdown
const exposureData = {
  direct: [
    {
      id: "loan-001",
      name: "Commercial Real Estate Loan",
      type: "Term Loan",
      amount: "$1,250,000",
      maturityDate: "06/15/2044",
      status: "Active",
      loanType: "Long Term",
    },
    {
      id: "loan-002",
      name: "Equipment Financing",
      type: "Equipment Loan",
      amount: "$350,000",
      maturityDate: "08/01/2031",
      status: "Active",
      loanType: "Long Term",
    },
    {
      id: "loan-008",
      name: "Commercial Property Development",
      type: "Commercial Loan",
      amount: "$3,500,000",
      maturityDate: "07/15/2039",
      status: "Active",
      loanType: "Long Term",
    },
    {
      id: "loan-011",
      name: "Working Capital Line",
      type: "Line of Credit",
      amount: "$500,000",
      maturityDate: "05/15/2025",
      status: "Active",
      loanType: "Revolving",
    },
    {
      id: "loan-012",
      name: "Inventory Financing",
      type: "Short Term Loan",
      amount: "$250,000",
      maturityDate: "03/30/2025",
      status: "Active",
      loanType: "Short Term",
    },
  ],
  indirect: [
    {
      id: "ind-001",
      name: "Subsidiary Loan Guarantee",
      type: "Guarantee",
      amount: "$750,000",
      maturityDate: "03/22/2026",
      status: "Active",
      loanType: "Long Term",
    },
    {
      id: "ind-002",
      name: "Partner Company Credit Line",
      type: "Line of Credit",
      amount: "$500,000",
      maturityDate: "11/30/2025",
      status: "Active",
      loanType: "Revolving",
    },
  ],
  affirmed: [
    {
      id: "aff-001",
      name: "Letter of Credit - International Trade",
      type: "Letter of Credit",
      amount: "$1,200,000",
      maturityDate: "09/15/2025",
      status: "Active",
      loanType: "Short Term",
    },
    {
      id: "aff-002",
      name: "Performance Bond - Construction Project",
      type: "Bond",
      amount: "$850,000",
      maturityDate: "12/31/2026",
      status: "Active",
      loanType: "Long Term",
    },
  ],
  affiliated: [
    {
      id: "afl-001",
      name: "Sister Company Loan",
      type: "Term Loan",
      amount: "$1,500,000",
      maturityDate: "06/30/2030",
      status: "Active",
      loanType: "Long Term",
    },
    {
      id: "afl-002",
      name: "Parent Company Credit Line",
      type: "Line of Credit",
      amount: "$750,000",
      maturityDate: "04/15/2026",
      status: "Active",
      loanType: "Revolving",
    },
  ],
}

interface ExposureTabProps {
  relationship: RelationshipType[0]
}

export function ExposureTab({ relationship }: ExposureTabProps) {
  const [activeTab, setActiveTab] = useState("all")

// Calculate totals
  const directTotal = exposureData.direct.reduce(
    (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")),
    0,
  )
  const indirectTotal = exposureData.indirect.reduce(
    (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")),
    0,
  )
  const affirmedTotal = exposureData.affirmed.reduce(
    (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")),
    0,
  )
  const affiliatedTotal = exposureData.affiliated.reduce(
    (sum, item) => sum + Number.parseFloat(item.amount.replace(/[^0-9.-]+/g, "")),
    0,
  )
  const grandTotal = directTotal + indirectTotal + affirmedTotal
  const totalWithAffiliated = grandTotal + affiliatedTotal

// Define exposure cap and calculate remaining exposure
  const exposureCap = 15000000
  const remainingExposure = exposureCap - totalWithAffiliated

// Prepare data for charts
  const exposureBreakdownData = [
    { name: "Direct", value: directTotal, color: "#3b82f6" },
    { name: "Indirect", value: indirectTotal, color: "#10b981" },
    { name: "Affirmed", value: affirmedTotal, color: "#f59e0b" },
    { name: "Affiliated", value: affiliatedTotal, color: "#8b5cf6" },
  ]

const exposureCapData = [
    { name: "Used", value: totalWithAffiliated, color: "#3b82f6" },
    { name: "Remaining", value: remainingExposure, color: "#10b981" },
  ]

// Custom label for pie chart
  const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }) => {
    const RADIAN = Math.PI / 180
    const radius = innerRadius + (outerRadius - innerRadius) * 0.5
    const x = cx + radius * Math.cos(-midAngle * RADIAN)
    const y = cy + radius * Math.sin(-midAngle * RADIAN)

return (
      <text
        x={x}
        y={y}
        fill="white"
        textAnchor={x > cx ? "start" : "end"}
        dominantBaseline="central"
        fontSize={14}
        fontWeight="bold"
      >
        {`${name} ${(percent * 100).toFixed(0)}%`}
      </text>
    )
  }

return (
    <div className="space-y-6">
      {/* Exposure Content */}
      <div className="space-y-6">
        <Card>
          <CardHeader className="pb-2 pt-3">
            <CardTitle className="text-lg">Exposure Summary</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
              {/* Column 1: Main Exposure Metrics - Takes 2/5 of the space */}
              <div className="lg:col-span-2">
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span className="text-lg font-medium">Total Exposure:</span>
                    <span className="text-2xl font-bold">${grandTotal.toLocaleString()}</span>
                  </div>
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <span>Direct Debt:</span>
                      <span className="font-medium">${directTotal.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span>Indirect Debt:</span>
                      <span className="font-medium">${indirectTotal.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between items-center">
                      <span>Affirmed Debt:</span>
                      <span className="font-medium">${affirmedTotal.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between items-center border-t pt-2 mt-2">
                      <span>Affiliated Exposure:</span>
                      <span className="font-medium">${affiliatedTotal.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between items-center font-medium">
                      <span>Total with Affiliated:</span>
                      <span>${totalWithAffiliated.toLocaleString()}</span>
                    </div>
                  </div>
                  <div className="pt-4 border-t">
                    <div className="flex justify-between items-center">
                      <span className="text-sm">Exposure Cap:</span>
                      <span className="text-sm font-medium">${exposureCap.toLocaleString()}</span>
                    </div>
                    <div className="mt-2">
                      <ChartContainer className="h-8">
                        <ResponsiveContainer width="100%" height="100%">
                          <BarChart
                            layout="vertical"
                            data={[{ used: totalWithAffiliated, remaining: remainingExposure }]}
                            stackOffset="expand"
                            barSize={16}
                          >
                            <Tooltip
                              formatter={(value) => [`$${Number(value).toLocaleString()}`, ""]}
                              labelFormatter={() => "Exposure"}
                            />
                            <Bar dataKey="used" fill="#3b82f6" stackId="stack" name="Used" radius={[4, 0, 0, 4]} />
                            <Bar
                              dataKey="remaining"
                              fill="#10b981"
                              stackId="stack"
                              name="Remaining"
                              radius={[0, 4, 4, 0]}
                            />
                          </BarChart>
                        </ResponsiveContainer>
                      </ChartContainer>
                    </div>
                    <div className="flex justify-between items-center mt-2">
                      <span className="text-sm">Remaining Exposure:</span>
                      <span className="text-sm font-medium text-green-600">${remainingExposure.toLocaleString()}</span>
                    </div>
                  </div>
                </div>
              </div>

{/* Column 2: Exposure Breakdown Chart - Takes 3/5 of the space */}
              <div className="lg:col-span-3">
                <ChartContainer className="h-[350px]">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={exposureBreakdownData}
                        cx="50%"
                        cy="50%"
                        innerRadius={80}
                        outerRadius={140}
                        paddingAngle={3}
                        dataKey="value"
                        nameKey="name"
                        label={renderCustomizedLabel}
                        labelLine={false}
                      >
                        {exposureBreakdownData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                      <Tooltip
                        formatter={(value) => [`$${Number(value).toLocaleString()}`, ""]}
                        contentStyle={{ backgroundColor: "white", borderRadius: "4px", border: "1px solid #e2e8f0" }}
                      />
                      <Legend
                        layout="horizontal"
                        verticalAlign="bottom"
                        align="center"
                        formatter={(value, entry, index) => (
                          <span style={{ color: "#333", fontSize: "14px" }}>{value}</span>
                        )}
                      />
                    </PieChart>
                  </ResponsiveContainer>
                </ChartContainer>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Tabs for different exposure types */}
        <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="border-b w-full justify-start rounded-none bg-transparent p-0">
            <TabsTrigger
              value="all"
              className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >
              All Exposure
            </TabsTrigger>
            <TabsTrigger
              value="direct"
              className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >
              Direct Debt (${directTotal.toLocaleString()})
            </TabsTrigger>
            <TabsTrigger
              value="indirect"
              className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >
              Indirect Debt (${indirectTotal.toLocaleString()})
            </TabsTrigger>
            <TabsTrigger
              value="affirmed"
              className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >
              Affirmed Debt (${affirmedTotal.toLocaleString()})
            </TabsTrigger>
            <TabsTrigger
              value="affiliated"
              className="rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-blue-900 data-[state=active]:bg-transparent data-[state=active]:shadow-none"
            >
              Affiliated (${affiliatedTotal.toLocaleString()})
            </TabsTrigger>
          </TabsList>

{/* All Exposure Tab */}
          <TabsContent value="all" className="mt-6 space-y-6">
            {/* Direct Debt */}
            <TableCard
              title="Direct Debt"
              subtitle={`Total: $${directTotal.toLocaleString()}`}
              actionLabel="Add Direct Debt"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.direct}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.direct)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.direct)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.direct)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.direct)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.direct)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.direct)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>

{/* Indirect Debt */}
            <TableCard
              title="Indirect Debt"
              subtitle={`Total: $${indirectTotal.toLocaleString()}`}
              actionLabel="Add Indirect Debt"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.indirect}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.indirect)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.indirect)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.indirect)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.indirect)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.indirect)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.indirect)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>

{/* Affirmed Debt */}
            <TableCard
              title="Affirmed Debt"
              subtitle={`Total: $${affirmedTotal.toLocaleString()}`}
              actionLabel="Add Affirmed Debt"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.affirmed}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.affirmed)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.affirmed)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.affirmed)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.affirmed)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.affirmed)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.affirmed)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>

{/* Affiliated Exposure */}
            <TableCard
              title="Affiliated Exposure"
              subtitle={`Total: $${affiliatedTotal.toLocaleString()}`}
              actionLabel="Add Affiliated Exposure"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.affiliated}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.affiliated)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.affiliated)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.affiliated)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.affiliated)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.affiliated)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.affiliated)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>
          </TabsContent>

{/* Direct Debt Tab */}
          <TabsContent value="direct" className="mt-6">
            <TableCard
              title="Direct Debt"
              subtitle={`Total: $${directTotal.toLocaleString()}`}
              actionLabel="Add Direct Debt"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.direct}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.direct)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.direct)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.direct)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.direct)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.direct)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.direct)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>
          </TabsContent>

{/* Indirect Debt Tab */}
          <TabsContent value="indirect" className="mt-6">
            <TableCard
              title="Indirect Debt"
              subtitle={`Total: $${indirectTotal.toLocaleString()}`}
              actionLabel="Add Indirect Debt"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.indirect}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.indirect)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.indirect)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.indirect)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.indirect)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.indirect)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.indirect)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>
          </TabsContent>

{/* Affirmed Debt Tab */}
          <TabsContent value="affirmed" className="mt-6">
            <TableCard
              title="Affirmed Debt"
              subtitle={`Total: $${affirmedTotal.toLocaleString()}`}
              actionLabel="Add Affirmed Debt"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.affirmed}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.affirmed)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.affirmed)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.affirmed)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.affirmed)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.affirmed)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.affirmed)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>
          </TabsContent>

{/* Affiliated Exposure Tab */}
          <TabsContent value="affiliated" className="mt-6">
            <TableCard
              title="Affiliated Exposure"
              subtitle={`Total: $${affiliatedTotal.toLocaleString()}`}
              actionLabel="Add Affiliated Exposure"
              onAction={() => {}}
            >
              <SimpleTable
                data={exposureData.affiliated}
                columns={[
                  {
                    key: "name" as keyof (typeof exposureData.affiliated)[0],
                    header: "Name",
                    cell: (item) => (
                      <span className="font-medium text-blue-900 hover:underline cursor-pointer">{item.name}</span>
                    ),
                  },
                  { key: "type" as keyof (typeof exposureData.affiliated)[0], header: "Type" },
                  { key: "amount" as keyof (typeof exposureData.affiliated)[0], header: "Amount" },
                  { key: "maturityDate" as keyof (typeof exposureData.affiliated)[0], header: "Maturity Date" },
                  { key: "loanType" as keyof (typeof exposureData.affiliated)[0], header: "Loan Type" },
                  {
                    key: "status" as keyof (typeof exposureData.affiliated)[0],
                    header: "Status",
                    cell: (item) => (
                      <Badge className="bg-green-100 text-green-800 hover:bg-green-100">{item.status}</Badge>
                    ),
                  },
                ]}
              />
            </TableCard>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-payments-tab.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Filter, Download, Plus, MoreHorizontal, DollarSign, Calendar, CreditCard } from "lucide-react"
import { StatusBadge } from "@/app/components/status-badge"

export interface LoanPaymentsTabProps {
  loan: any
  paymentHistory: any[]
}

export function LoanPaymentsTab({ loan, paymentHistory }: LoanPaymentsTabProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
        <div className="flex items-center space-x-2">
          <DollarSign className="h-5 w-5 text-gray-500" />
          <CardTitle className="text-lg">Payment History</CardTitle>
        </div>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm">
            <Filter className="h-4 w-4 mr-1" />
            Filter
          </Button>
          <Button variant="outline" size="sm">
            <Download className="h-4 w-4 mr-1" />
            Export
          </Button>
          <Button className="bg-blue-900">
            <Plus className="h-4 w-4 mr-1" />
            Add Payment
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2 mb-2">
                <div className="bg-blue-500 p-1 rounded">
                  <DollarSign className="h-4 w-4 text-white" />
                </div>
                <span className="text-xl font-bold">{loan.paymentAmount}</span>
              </div>
              <div className="text-sm text-gray-500">Monthly Payment</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2 mb-2">
                <div className="bg-green-500 p-1 rounded">
                  <Calendar className="h-4 w-4 text-white" />
                </div>
                <span className="text-xl font-bold">{loan.nextPaymentDate}</span>
              </div>
              <div className="text-sm text-gray-500">Next Payment Due</div>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-4">
              <div className="flex items-center space-x-2 mb-2">
                <div className="bg-purple-500 p-1 rounded">
                  <CreditCard className="h-4 w-4 text-white" />
                </div>
                <span className="text-xl font-bold">Auto-debit</span>
              </div>
              <div className="text-sm text-gray-500">Payment Method</div>
            </CardContent>
          </Card>
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Date</TableHead>
              <TableHead>Amount</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Method</TableHead>
              <TableHead>Confirmation</TableHead>
              <TableHead className="text-right">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {paymentHistory.map((payment, index) => (
              <TableRow key={index}>
                <TableCell>{payment.date}</TableCell>
                <TableCell>{payment.amount}</TableCell>
                <TableCell>
                  <StatusBadge status={payment.status} />
                </TableCell>
                <TableCell>{payment.method}</TableCell>
                <TableCell>{payment.confirmationNumber}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Open menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem>View Details</DropdownMenuItem>
                      <DropdownMenuItem>Download Receipt</DropdownMenuItem>
                      <DropdownMenuItem>Report Issue</DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/loan-notes-tab.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Filter, Search, Plus, MoreHorizontal, MessageSquare } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

export interface LoanNotesTabProps {
  loanNotes: any[]
}

export function LoanNotesTab({ loanNotes }: LoanNotesTabProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2 pt-3">
        <div className="flex items-center space-x-2">
          <MessageSquare className="h-5 w-5 text-gray-500" />
          <CardTitle className="text-lg">Loan Notes</CardTitle>
        </div>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm">
            <Filter className="h-4 w-4 mr-1" />
            Filter
          </Button>
          <Button variant="outline" size="sm">
            <Search className="h-4 w-4 mr-1" />
            Search
          </Button>
          <Button className="bg-blue-900">
            <Plus className="h-4 w-4 mr-1" />
            Add Note
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {loanNotes.map((note, index) => (
            <Card key={index}>
              <CardContent className="p-4">
                <div className="flex justify-between items-center mb-2">
                  <div className="font-medium text-lg">{note.title}</div>
                  <div className="flex items-center space-x-2">
                    <span className="text-sm text-gray-500">
                      {note.date} {note.time}
                    </span>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                          <MoreHorizontal className="h-4 w-4" />
                          <span className="sr-only">Open menu</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>Edit</DropdownMenuItem>
                        <DropdownMenuItem>Delete</DropdownMenuItem>
                        <DropdownMenuItem>Share</DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </div>
                <p className="text-gray-700 mb-4">{note.content}</p>
                <div className="flex justify-between items-center">
                  <div className="flex items-center">
                    <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 mr-2">
                      {note.author
                        .split(" ")
                        .map((n) => n[0])
                        .join("")}
                    </div>
                    <span className="text-sm">{note.author}</span>
                  </div>
                  <div className="flex space-x-2">
                    <Button variant="ghost" size="sm">
                      <MessageSquare className="h-4 w-4 mr-1" />
                      Reply
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-documents.tsx" isMerged="true"
import { FileText, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptyDocuments() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Documents Yet</CardTitle>
        <CardDescription>Documents for this relationship will appear here once they are uploaded.</CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <FileText className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Upload Document
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-tasks.tsx" isMerged="true"
import { CheckSquare, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptyTasks() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Tasks Yet</CardTitle>
        <CardDescription>Tasks for this relationship will appear here once they are created.</CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <CheckSquare className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Create Task
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-spreads.tsx" isMerged="true"
import { BarChart2, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptySpreads() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Spreads Yet</CardTitle>
        <CardDescription>
          Financial spreads for this relationship will appear here once they are created.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <BarChart2 className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Create Spread
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-credit-monitoring.tsx" isMerged="true"
import { LineChart, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptyCreditMonitoring() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Credit Monitoring Data Yet</CardTitle>
        <CardDescription>
          Credit monitoring data for this relationship will appear here once it's available.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <LineChart className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Set Up Credit Monitoring
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-cashflow.tsx" isMerged="true"
import { TrendingUp, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptyCashflow() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Cashflow Data Yet</CardTitle>
        <CardDescription>
          Cashflow analysis data for this relationship will appear here once it's available.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <TrendingUp className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Set Up Cashflow Analysis
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-exposure.tsx" isMerged="true"
import { PieChart, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptyExposure() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Exposure Data Yet</CardTitle>
        <CardDescription>Exposure data for this relationship will appear here once it's available.</CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <PieChart className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Add Exposure Data
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-profitability.tsx" isMerged="true"
import { DollarSign, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

export function EmptyProfitability() {
  return (
    <Card className="border-dashed border-2 border-gray-200">
      <CardHeader className="text-center">
        <CardTitle className="text-xl">No Profitability Data Yet</CardTitle>
        <CardDescription>
          Profitability data for this relationship will appear here once it's available.
        </CardDescription>
      </CardHeader>
      <CardContent className="flex justify-center pb-2">
        <DollarSign className="h-16 w-16 text-gray-300" />
      </CardContent>
      <CardFooter className="flex justify-center pt-0">
        <Button className="bg-blue-900">
          <Plus className="h-4 w-4 mr-2" />
          Add Profitability Data
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/relationships/[id]/page.tsx" isMerged="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { useRouter, useParams } from "next/navigation"
import { Building, Plus, CheckCircle, Clock, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"

import PageHeader from "@/app/components/page-header"
import { type initialRelationships, relationshipExtendedData } from "@/app/data/relationships"
import { initialDeals } from "@/app/data/deals"
import { getRelationshipById } from "@/lib/relationship-store"
import { RelationshipTabs } from "@/app/components/relationship-tabs"
import { RelationshipTabManager } from "@/app/components/tabs/relationship-tab-manager"

// Sample data for charts based on the projection table
const leaseRolloverData = [
  {
    year: "2025",
    "222 Market Street": 5,
    "4800 Parker Farm Ln": 8,
    "456 Greenville Rd": 2,
    total: 15,
  },
  {
    year: "2026",
    "222 Market Street": 10,
    "4800 Parker Farm Ln": 5,
    "456 Greenville Rd": 10,
    total: 25,
  },
  {
    year: "2027",
    "222 Market Street": 3,
    "4800 Parker Farm Ln": 2,
    "456 Greenville Rd": 5,
    total: 10,
  },
  {
    year: "2028",
    "222 Market Street": 15,
    "4800 Parker Farm Ln": 12,
    "456 Greenville Rd": 8,
    total: 35,
  },
  {
    year: "2029",
    "222 Market Street": 2,
    "4800 Parker Farm Ln": 1,
    "456 Greenville Rd": 2,
    total: 5,
  },
  {
    year: "2030",
    "222 Market Street": 3,
    "4800 Parker Farm Ln": 4,
    "456 Greenville Rd": 3,
    total: 10,
  },
]

// NOI data from the projection table
const noiData = [
  {
    year: "2025",
    "222 Market Street": 55000,
    "4800 Parker Farm Ln": 107500,
    "456 Greenville Rd": 69375,
    total: 231875,
  },
  {
    year: "2026",
    "222 Market Street": 61950,
    "4800 Parker Farm Ln": 101175,
    "456 Greenville Rd": 82056,
    total: 245181,
  },
  {
    year: "2027",
    "222 Market Street": 53958,
    "4800 Parker Farm Ln": 119961,
    "456 Greenville Rd": 69818,
    total: 243737,
  },
  {
    year: "2028",
    "222 Market Street": 66028,
    "4800 Parker Farm Ln": 113859,
    "456 Greenville Rd": 82663,
    total: 262550,
  },
  {
    year: "2029",
    "222 Market Street": 63158,
    "4800 Parker Farm Ln": 122875,
    "456 Greenville Rd": 80593,
    total: 266626,
  },
  {
    year: "2030",
    "222 Market Street": 70352,
    "4800 Parker Farm Ln": 117011,
    "456 Greenville Rd": 93610,
    total: 280973,
  },
]

// Tenant concentration data based on the properties
const tenantConcentrationData = [
  { name: "Coastal Medical Group (222 Market)", value: 25 },
  { name: "Tech Solutions Inc. (Parker Farm)", value: 22 },
  { name: "Wilmington Law Firm (Greenville)", value: 18 },
  { name: "Regional Bank (Parker Farm)", value: 15 },
  { name: "Coffee Chain (222 Market)", value: 10 },
  { name: "Other Tenants", value: 10 },
]

// DSCR data from the projection table
const dscrData = [
  { year: "2025", value: 1.43 },
  { year: "2026", value: 1.51 },
  { year: "2027", value: 1.5 },
  { year: "2028", value: 1.62 },
  { year: "2029", value: 1.65 },
  { year: "2030", value: 1.73 },
]

const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d"]

export default function RelationshipDetailPage() {
  const router = useRouter()
  const params = useParams()
  const id = params.id as string

const [priorityTab, setPriorityTab] = useState("tasks")
  const [spreadsTab, setSpreadsTab] = useState("financial")
  const [monitoringTab, setMonitoringTab] = useState("alerts")
  const [documentsTab, setDocumentsTab] = useState("documents")
  const [relationship, setRelationship] = useState<(typeof initialRelationships)[0] | null>(null)
  const [loading, setLoading] = useState(true)
  const [selectedDocument, setSelectedDocument] = useState<(typeof relationshipExtendedData.documents)[0] | null>(null)
  const [isDocumentDrawerOpen, setIsDocumentDrawerOpen] = useState(false)
  const [cashflowView, setCashflowView] = useState("dashboard")
  const [isTableEditable, setIsTableEditable] = useState(false)
  const [activeScenario, setActiveScenario] = useState("actual")

// Find the relationship data based on the ID from the URL
  useEffect(() => {
    // In a real app, this would be an API call
    const foundRelationship = getRelationshipById(id)

if (foundRelationship) {
      setRelationship(foundRelationship)
    } else {
      // If not found, show an error message
      console.error(`Relationship with ID ${id} not found`)
      // Keep relationship as null so we can show an error state
    }

setLoading(false)
  }, [id])

// Add this after the useEffect hook
  const refreshRelationship = useCallback(() => {
    const updatedRelationship = getRelationshipById(id)
    if (updatedRelationship) {
      setRelationship(updatedRelationship)
    }
  }, [id])

// Filter deals for this relationship
  const relationshipDeals = initialDeals.filter((deal) => deal.relationshipId === id)

// Filter loans for this relationship
  const relationshipLoans = relationshipExtendedData.loans.filter((loan) => loan.relationshipId === id)

// If loading, show loading state
  if (loading) {
    return <div className="flex-1 p-4">Loading relationship details...</div>
  }

// If relationship not found, show error state
  if (!relationship) {
    return (
      <div className="flex-1 p-4 space-y-4">
        <PageHeader
          title="Relationship Not Found"
          subtitle={`We couldn't find a relationship with ID: ${id}`}
          icon={Building}
          breadcrumbs={[{ label: "Relationships", href: "/relationships" }, { label: "Not Found" }]}
        />
        <Card>
          <CardContent className="flex flex-col items-center justify-center p-6 space-y-4">
            <div className="rounded-full bg-gray-100 p-3">
              <Building className="h-8 w-8 text-gray-500" />
            </div>
            <h2 className="text-xl font-semibold">Relationship Not Found</h2>
            <p className="text-gray-500 text-center max-w-md">
              The relationship you're looking for doesn't exist or may have been removed.
            </p>
            <Button onClick={() => router.push("/relationships")}>Return to Relationships</Button>
          </CardContent>
        </Card>
      </div>
    )
  }

// Calculate relationship statistics
  const completedDocuments = relationshipExtendedData.documents.filter((doc) => doc.status === "Complete").length
  const pendingDocuments = relationshipExtendedData.documents.filter(
    (doc) => doc.status === "To Do" || doc.status === "In Progress",
  ).length
  const totalContacts = relationshipExtendedData.onboardingSummary.length
  const totalDeals = relationshipDeals.length
  const totalLoans = relationshipLoans.length

const handleSaveChanges = () => {
    setIsTableEditable(false)
    // In a real app, you would save the changes to the database here
    alert("Changes saved successfully!")
  }

return (
    <div className="flex-1 p-4 space-y-4">
      {/* Relationship Header - Now using the relationship name from the data */}
      <PageHeader
        title={relationship.name}
        subtitle={`${relationship.type} • ${relationship.status} • ${relationship.riskStatus} • Est. ${relationship.yearEstablished}`}
        icon={Building}
        breadcrumbs={[{ label: "Relationships", href: "/relationships" }, { label: relationship.name }]}
        secondaryActions={
          <>
            <Button variant="outline">
              <Plus className="h-4 w-4 mr-1" />
              Follow
            </Button>
            <Button variant="outline">New Spread</Button>
            <Button variant="outline">New Deposit</Button>
            
          </>
        }
      />

{/* Navigation Tabs */}
      <RelationshipTabs relationshipId={id} relationship={relationship} refreshRelationship={refreshRelationship} />

{/* Tab Content */}
      <RelationshipTabManager
        relationshipId={id}
        relationship={relationship}
        refreshRelationship={refreshRelationship}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/tabs/credit-resources-tab.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { StatusBadge } from "@/components/status-badge"
import { RelationshipSidebar } from "@/app/components/relationship-sidebar"
import { Plus, FileText, Shield, Briefcase } from "lucide-react"
import { EmptyCreditResources } from "../empty-states/empty-credit-resources"

interface CreditResourcesTabProps {
  relationshipId: string
  relationship: any
  refreshRelationship: () => void
}

export function CreditResourcesTab({ relationshipId, relationship, refreshRelationship }: CreditResourcesTabProps) {
  // Debug log to check if relationship data is being received
  console.log("CreditResourcesTab - relationship:", relationship)

// If relationship is undefined or null, show a loading state
  if (!relationship) {
    return <div>Loading relationship data...</div>
  }

// Check if this is a new relationship (created less than 24 hours ago)
  const isNewRelationship = relationship?.dateCreated
    ? new Date().getTime() - new Date(relationship.dateCreated).getTime() < 86400000
    : false

// Show empty state for new relationships
  if (isNewRelationship) {
    return <EmptyCreditResources />
  }

{/* Right Column - 2/3 width */}
      <div className="md:w-2/3 space-y-6">
        {/* Credit Score Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <CardTitle className="text-lg">Credit Score</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-4">
                <div className="flex justify-between items-center">
                  <span className="text-lg font-medium">Current FICO Score:</span>
                  <span className="text-2xl font-bold">{relationship?.ficoScore || "N/A"}</span>
                </div>
                {relationship?.ficoScore ? (
                  <>
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div
                        className={`h-2.5 rounded-full ${
                          Number(relationship.ficoScore) >= 740
                            ? "bg-green-500"
                            : Number(relationship.ficoScore) >= 670
                              ? "bg-yellow-500"
                              : "bg-red-500"
                        }`}
                        style={{ width: `${(Number(relationship.ficoScore) / 850) * 100}%` }}
                      ></div>
                    </div>
                    <div className="flex justify-between text-xs">
                      <span>Poor</span>
                      <span>Fair</span>
                      <span>Good</span>
                      <span>Very Good</span>
                      <span>Excellent</span>
                    </div>
                  </>
                ) : (
                  <div className="text-sm text-gray-500 italic">No credit score data available</div>
                )}
                <div className="space-y-2 mt-4">
                  <div className="flex justify-between items-center">
                    <span>Previous Score:</span>
                    <span className="font-medium">760 (6 months ago)</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Score Change:</span>
                    <span className="font-medium text-yellow-600">-20</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Last Updated:</span>
                    <span className="font-medium">05/01/2024</span>
                  </div>
                </div>
              </div>
              <div className="space-y-4">
                <div className="p-4 border rounded-lg">
                  <div className="font-medium mb-2">Key Factors Affecting Score</div>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-red-500 mt-1.5 mr-2"></div>
                      <span>High credit utilization (68% of available credit)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-red-500 mt-1.5 mr-2"></div>
                      <span>Recent credit inquiries (3 in last 6 months)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                      <span>Long credit history (18 years)</span>
                    </li>
                    <li className="flex items-start">
                      <div className="w-2 h-2 rounded-full bg-green-500 mt-1.5 mr-2"></div>
                      <span>No missed payments in last 24 months</span>
                    </li>
                  </ul>
                </div>
                <Button className="w-full">Run New Credit Check</Button>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Collateral Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg flex items-center">
                <Shield className="h-5 w-5 mr-2 text-muted-foreground" />
                Collateral
              </CardTitle>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Collateral
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Value</TableHead>
                  <TableHead>LTV</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Office Building - 123 Main St</TableCell>
                  <TableCell>Commercial Real Estate</TableCell>
                  <TableCell>$3,500,000</TableCell>
                  <TableCell>65%</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Manufacturing Equipment</TableCell>
                  <TableCell>Equipment</TableCell>
                  <TableCell>$750,000</TableCell>
                  <TableCell>70%</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Accounts Receivable</TableCell>
                  <TableCell>AR</TableCell>
                  <TableCell>$1,250,000</TableCell>
                  <TableCell>75%</TableCell>
                  <TableCell>
                    <StatusBadge status="Pending Review" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

{/* Covenants Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg flex items-center">
                <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
                Covenants
              </CardTitle>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Covenant
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Threshold</TableHead>
                  <TableHead>Current Value</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Debt Service Coverage Ratio</TableCell>
                  <TableCell>Financial</TableCell>
                  <TableCell>≥ 1.25x</TableCell>
                  <TableCell>1.35x</TableCell>
                  <TableCell>
                    <StatusBadge status="Compliant" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Debt to EBITDA Ratio</TableCell>
                  <TableCell>Financial</TableCell>
                  <TableCell>≤ 3.5x</TableCell>
                  <TableCell>3.2x</TableCell>
                  <TableCell>
                    <StatusBadge status="Compliant" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Current Ratio</TableCell>
                  <TableCell>Financial</TableCell>
                  <TableCell>≥ 1.2x</TableCell>
                  <TableCell>1.1x</TableCell>
                  <TableCell>
                    <StatusBadge status="Non-Compliant" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Annual Financial Statements</TableCell>
                  <TableCell>Reporting</TableCell>
                  <TableCell>Annual</TableCell>
                  <TableCell>Submitted 03/15/2024</TableCell>
                  <TableCell>
                    <StatusBadge status="Compliant" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>

{/* Policy Exceptions Section */}
        <Card>
          <CardHeader className="pb-2 pt-3">
            <div className="flex items-center justify-between">
              <CardTitle className="text-lg flex items-center">
                <Briefcase className="h-5 w-5 mr-2 text-muted-foreground" />
                Policy Exceptions
              </CardTitle>
              <Button variant="outline" size="sm">
                <Plus className="h-4 w-4 mr-2" />
                Add Exception
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Description</TableHead>
                  <TableHead>Reason</TableHead>
                  <TableHead>Approval Date</TableHead>
                  <TableHead>Expiration Date</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[100px]">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">LTV Exception</TableCell>
                  <TableCell>Strong cash flow and deposit relationship</TableCell>
                  <TableCell>01/15/2024</TableCell>
                  <TableCell>01/15/2025</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Debt to Income Ratio</TableCell>
                  <TableCell>Significant liquid assets</TableCell>
                  <TableCell>03/22/2024</TableCell>
                  <TableCell>03/22/2025</TableCell>
                  <TableCell>
                    <StatusBadge status="Active" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Collateral Exception</TableCell>
                  <TableCell>Strong guarantor support</TableCell>
                  <TableCell>11/05/2023</TableCell>
                  <TableCell>11/05/2024</TableCell>
                  <TableCell>
                    <StatusBadge status="Pending Renewal" />
                  </TableCell>
                  <TableCell>
                    <Button variant="ghost" size="sm">
                      View
                    </Button>
                  </TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/empty-states/empty-credit-resources.tsx" isMerged="true"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { FileText, Plus, Shield, Briefcase } from "lucide-react"

interface EmptyCreditResourcesProps {
  relationshipId?: string
}

export function EmptyCreditResources({ relationshipId }: EmptyCreditResourcesProps) {
  return (
    <div className="space-y-6">
      {/* Credit Score Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
            Credit Score
          </CardTitle>
          <CardDescription>Track and monitor credit scores for this relationship</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <FileText className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Credit Score Data Available</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Run a credit check to view the credit score and related information for this relationship.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Run Credit Check
          </Button>
        </CardFooter>
      </Card>

{/* Collateral Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Shield className="h-5 w-5 mr-2 text-muted-foreground" />
            Collateral
          </CardTitle>
          <CardDescription>Track assets used as collateral for loans</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <Shield className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Collateral Added</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Add collateral assets to track their values, loan-to-value ratios, and status.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Collateral
          </Button>
        </CardFooter>
      </Card>

{/* Policy Exceptions Section */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center">
            <Briefcase className="h-5 w-5 mr-2 text-muted-foreground" />
            Policy Exceptions
          </CardTitle>
          <CardDescription>Track exceptions to standard lending policies</CardDescription>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-8">
          <div className="rounded-full bg-gray-100 p-3 mb-4">
            <Briefcase className="h-8 w-8 text-gray-500" />
          </div>
          <h3 className="text-lg font-medium mb-2">No Policy Exceptions</h3>
          <p className="text-gray-500 text-center max-w-md mb-4">
            Add policy exceptions to track approvals and expirations for non-standard terms.
          </p>
        </CardContent>
        <CardFooter className="flex justify-center border-t pt-4">
          <Button>
            <Plus className="h-4 w-4 mr-2" />
            Add Exception
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/components/banking-advisor-chat.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Send, X, Sparkles } from "lucide-react"
import { Button } from "@/components/ui/button"

interface Message {
  id: string
  content: string
  sender: "user" | "assistant"
  timestamp: Date
}

interface BankingAdvisorChatProps {
  onClose: () => void
}

export function BankingAdvisorChat({ onClose }: BankingAdvisorChatProps) {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: "1",
      content: "Hello! I'm your Banking Advisor. How can I help you today?",
      sender: "assistant",
      timestamp: new Date(),
    },
  ])
  const [inputValue, setInputValue] = useState("")
  const [isTyping, setIsTyping] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }

useEffect(() => {
    scrollToBottom()
  }, [messages])

const handleSendMessage = () => {
    if (inputValue.trim() === "") return

const newUserMessage: Message = {
      id: `user-${Date.now()}`,
      content: inputValue,
      sender: "user",
      timestamp: new Date(),
    }

setMessages((prev) => [...prev, newUserMessage])
    setInputValue("")
    setIsTyping(true)

// Simulate AI response after a delay
    setTimeout(() => {
      const responses = [
        "I can help you analyze the financial health of this relationship.",
        "Based on the current data, I recommend reviewing the covenant compliance.",
        "Would you like me to prepare a summary of key risk indicators?",
        "I notice this relationship has some potential cash flow issues. Would you like me to analyze them further?",
        "Let me know if you need any specific financial analysis for this relationship.",
      ]

const randomResponse = responses[Math.floor(Math.random() * responses.length)]

const newAssistantMessage: Message = {
        id: `assistant-${Date.now()}`,
        content: randomResponse,
        sender: "assistant",
        timestamp: new Date(),
      }

setMessages((prev) => [...prev, newAssistantMessage])
      setIsTyping(false)
    }, 1500)
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSendMessage()
    }
  }

return (
    <div className="flex flex-col h-[400px] bg-white rounded-lg overflow-hidden">
      <div className="flex items-center justify-between p-3 border-b">
        <div className="flex items-center space-x-2">
          <Sparkles className="h-5 w-5 text-blue-500" />
          <h3 className="font-medium">Banking Advisor</h3>
        </div>
        <Button variant="ghost" size="icon" onClick={onClose}>
          <X className="h-4 w-4" />
        </Button>
      </div>

<div className="flex-1 overflow-y-auto p-3 space-y-3">
        {messages.map((message) => (
          <div key={message.id} className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}>
            <div
              className={`max-w-[80%] rounded-lg p-3 ${
                message.sender === "user" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-800"
              }`}
            >
              {message.sender === "assistant" && (
                <div className="flex items-center mb-1 space-x-1">
                  <Sparkles className="h-3 w-3 text-blue-500" />
                  <span className="text-xs font-medium text-blue-500">Banking Advisor</span>
                </div>
              )}
              <p className="text-sm">{message.content}</p>
              <p className="text-xs mt-1 opacity-70">
                {message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
              </p>
            </div>
          </div>
        ))}
        {isTyping && (
          <div className="flex justify-start">
            <div className="bg-gray-100 text-gray-800 rounded-lg p-3 max-w-[80%]">
              <div className="flex items-center space-x-1">
                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "0ms" }} />
                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "150ms" }} />
                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: "300ms" }} />
              </div>
            </div>
          </div>
        )}
        <div ref={messagesEndRef} />
      </div>

<div className="p-3 border-t">
        <div className="flex items-center space-x-2">
          <textarea
            className="flex-1 border rounded-md p-2 resize-none focus:outline-none focus:ring-1 focus:ring-blue-500"
            placeholder="Type your message..."
            rows={1}
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            onKeyDown={handleKeyDown}
          />
          <Button size="icon" onClick={handleSendMessage} disabled={inputValue.trim() === ""}>
            <Send className="h-4 w-4" />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]javascript:file="tailwind.config.js" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    fontSize: {
      xs: ["0.75rem", { lineHeight: "1rem" }],
      sm: ["0.875rem", { lineHeight: "1.25rem" }],
      base: ["1rem", { lineHeight: "1.5rem" }],
      lg: ["1.125rem", { lineHeight: "1.75rem" }],
      xl: ["1.25rem", { lineHeight: "1.75rem" }],
      "2xl": ["1.5rem", { lineHeight: "2rem" }],
      "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
      "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
      "5xl": ["3rem", { lineHeight: "1" }],
      "6xl": ["3.75rem", { lineHeight: "1" }],
      "7xl": ["4.5rem", { lineHeight: "1" }],
      "8xl": ["6rem", { lineHeight: "1" }],
      "9xl": ["8rem", { lineHeight: "1" }],
    },
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: [
          "var(--font-open-sans)",
          "-apple-system",
          "BlinkMacSystemFont",
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          "Arial",
          "sans-serif",
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol",
        ],
        serif: ["var(--font-avenir)", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
        xl: "16px",
      },
      boxShadow: {
        card: "0 4px 20px rgba(0,0,0,0.08)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
[V0_FILE]typescriptreact:file="app/components/email-window.tsx" isMerged="true"
"use client"