[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Report Configuration", description: "Configure your report settings", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { 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))", hover: "#003db8", 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))", }, hover: "#eaf0fc", }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ui/switch.tsx" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } [V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isEdit="true" 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]typescript:file="types/peer-comparison.ts" isEdit="true" isMerged="true" export const peersList = [ "Divi's Laboratories", "GranulEs India Ltd.", "Laurus Labs ltd.", "Strides Pharma Science Ltd", "Jubilant Life Sciences Ltd.", "Sun Pharmaceutical Industries Ltd.", "Cipla Ltd.", "Dr. Reddy's Laboratories", "Aurobindo Pharma Ltd.", "Torrent Pharmaceuticals Ltd.", ] [V0_FILE]typescript:file="app/types/peer-comparison.ts" isEdit="true" isMerged="true" export const peersList = [ "Divi's Laboratories", "GranulEs India Ltd.", "Laurus Labs ltd.", "Strides Pharma Science Ltd", "Jubilant Life Sciences Ltd.", "Neuland Laboratories Ltd.", "Solara Active Pharma Sciences Ltd.", "Suven Pharmaceuticals Ltd.", "Ipca Laboratories Ltd.", "Marksans Pharma Ltd.", "Dishman Carbogen Amcis Ltd.", "Alembic Pharmaceuticals Ltd.", "Hikal Ltd.", "Sequent Scientific Ltd.", "IOL Chemicals & Pharmaceuticals Ltd.", ] [V0_FILE]typescriptreact:file="components/header.tsx" isQuickEdit="true" isEdit="true" isMerged="true" import Image from "next/image" export default function Header() { return (

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/select-company/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { ChevronDown, Search } from "lucide-react" import Header from "@/components/header" import { useRouter } from "next/navigation" export default function SelectCompany() { const router = useRouter() const [company, setCompany] = useState("Renew Energy") const [companySearch, setCompanySearch] = useState("") const [reportType, setReportType] = useState("Credit Memo assesment report") const [currency, setCurrency] = useState("INR") const [unit, setUnit] = useState("Crore") const [decimal, setDecimal] = useState("0.0") const [isCompanyOpen, setIsCompanyOpen] = useState(false) const [isReportTypeOpen, setIsReportTypeOpen] = useState(false) const [isCurrencyOpen, setIsCurrencyOpen] = useState(false) const [isUnitOpen, setIsUnitOpen] = useState(false) const [isDecimalOpen, setIsDecimalOpen] = useState(false) const companies = ["Renew Energy", "Aarti Drugs", "Samvardhana Motherson"] const reportTypes = ["Credit Memo assesment report"] const currencies = ["USD", "INR"] const decimals = ["0.0", "0.00", "0.000"] // Reference for clicking outside const companySearchRef = useRef(null) // Handle currency change to set default unit useEffect(() => { if (currency === "USD") { setUnit("Million") } else if (currency === "INR" && unit !== "Crore" && unit !== "Lakh" && unit !== "Thousand") { setUnit("Crore") } }, [currency, unit]) // Get units based on currency const getUnits = () => { if (currency === "USD") { return ["Billion", "Million", "Thousand"] } else if (currency === "INR") { return ["Crore", "Lakh", "Thousand"] } return ["Million", "Thousand"] } const units = getUnits() // Handle clicking outside the company search useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (companySearchRef.current && !companySearchRef.current.contains(event.target as Node)) { setIsCompanyOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Filter companies based on search const filteredCompanies = companies.filter((item) => item.toLowerCase().includes(companySearch.toLowerCase())) const handleNext = () => { router.push("/customize-report") } return (

Select company

{/* Company Search Input */}

{ setCompanySearch(e.target.value) setIsCompanyOpen(true) }} onFocus={() => setIsCompanyOpen(true)} placeholder="Search company" className="w-full p-2.5 pl-10 border border-[#EAF0FC] rounded-lg text-[#101828]" />

{isCompanyOpen && (

{filteredCompanies.length > 0 ? ( filteredCompanies.map((item) => (

{ setCompany(item) setCompanySearch(item) setIsCompanyOpen(false) }} > {item}

)) ) : (

No companies found

)}

{/* Report Type */}

Report type

setIsReportTypeOpen(!isReportTypeOpen)} > {reportType}

{isReportTypeOpen && (

{reportTypes.map((item) => (

{ setReportType(item) setIsReportTypeOpen(false) }} > {item}

))}

)}

{/* Currency, Unit, Decimal Row */}

{/* Currency */}

Currency

setIsCurrencyOpen(!isCurrencyOpen)} > {currency}

{isCurrencyOpen && (

{currencies.map((item) => (

{ setCurrency(item) setIsCurrencyOpen(false) }} > {item}

))}

)}

{/* Unit */}

Unit

setIsUnitOpen(!isUnitOpen)} > {unit}

{isUnitOpen && (

{units.map((item) => (

{ setUnit(item) setIsUnitOpen(false) }} > {item}

))}

)}

{/* Decimal */}

Decimal

setIsDecimalOpen(!isDecimalOpen)} > {decimal}

{isDecimalOpen && (

{decimals.map((item) => (

{ setDecimal(item) setIsDecimalOpen(false) }} > {item}

))}

)}

{/* Next Button - Now outside the white container and centered */}

) } [V0_FILE]typescriptreact:file="app/select-company/loading.tsx" isFixed="true" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="package.json" isQuickEdit="true" isEdit="true" 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", "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", "framer-motion": "^10.16.4", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "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", "zustand": "^4.5.0" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Image from "next/image" import { motion } from "framer-motion" export default function LandingPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const handleCreateReport = () => { setIsLoading(true) setTimeout(() => { router.push("/select-company") }, 600) } return (

{/* Animated background elements */}

{/* Floating shapes */}

{/* Content */}

{/* Logo */} Bynd Logo

{/* Heading */} Create Insightful Financial Reports {/* Subheading */} Generate comprehensive credit memo reports with customizable sections, charts, and AI-powered insights. {/* Create Report Button */} {/* Features */}

Customizable

Tailor your reports with flexible sections and components

Customisable charts

Visualize financial data with insightful charts

AI Commentary

Get intelligent insights and analysis of financial data

) } [V0_FILE]typescriptreact:file="hooks/use-delayed-hover.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" export function useDelayedHover(delay = 600) { const [isHovering, setIsHovering] = useState(false) const [shouldShow, setShouldShow] = useState(false) const timerRef = useRef(null) const handleMouseEnter = () => { setIsHovering(true) timerRef.current = setTimeout(() => { setShouldShow(true) }, delay) } const handleMouseLeave = () => { setIsHovering(false) setShouldShow(false) if (timerRef.current) { clearTimeout(timerRef.current) timerRef.current = null } } useEffect(() => { return () => { if (timerRef.current) { clearTimeout(timerRef.current) } } }, []) return { isHovering, shouldShow, handlers: { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, }, } } [V0_FILE]typescriptreact:file="components/add-custom-chart-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { X } from "lucide-react" import Image from "next/image" import { Checkbox } from "@/components/ui/checkbox" import ChartPreview from "./chart-preview" import ChartElementMapping from "./chart-element-mapping" import CAGRToggle from "./cagr-toggle" // Define chart types export type ChartType = // 1 variable charts | "line" | "bar" | "horizontal-bar" // 2+ variable charts | "multi-line" | "stacked-bar" | "horizontal-stacked-bar" | "grouped-bar" | "horizontal-grouped-bar" | "combo-bar-line" | "combo-stacked-bar-line" // Define variable count categories export type VariableCount = 1 | 2 | 3 | 4 | 5 export type ChartOption = { id: string chartType: ChartType variableCount: VariableCount enabled: boolean } export type CustomChartData = { id: string chartType: ChartType variables: string[] name: string elementMappings?: Record showCAGR?: boolean } type AddCustomChartModalProps = { isOpen: boolean onClose: () => void onAddChart: (chartData: CustomChartData) => void sectionId: string subSectionId: string } // List of available ratios/variables const availableRatios = [ "Revenue Growth (YoY)", "EBITDA Margin", "Return on Equity (ROE)", "Debt-to-Equity Ratio", "Current Ratio", "Quick Ratio", "Cash Ratio", "Working Capital Ratio", "Gross Profit Margin", "Operating Profit Margin", "Net Profit Margin", "Return on Assets", "Return on Capital Employed", "Debt to Assets", "Equity Ratio", "Interest Coverage", "Asset Turnover", "Inventory Turnover", "Receivables Turnover", "Payables Turnover", "Working Capital Turnover", "Cash Conversion Cycle", "Earnings Per Share", "Book Value Per Share", "Price to Earnings Ratio", ] export default function AddCustomChartModal({ isOpen, onClose, onAddChart, sectionId, subSectionId, }: AddCustomChartModalProps) { const [elementMappings, setElementMappings] = useState>({}) const [showCAGR, setShowCAGR] = useState(false) const [searchQuery, setSearchQuery] = useState("") const [selectedRatios, setSelectedRatios] = useState([]) const [selectedChartType, setSelectedChartType] = useState("line") const [isRatioDropdownOpen, setIsRatioDropdownOpen] = useState(false) const [showAllRatios, setShowAllRatios] = useState(false) // Refs for click outside detection const dropdownRef = useRef(null) const searchInputRef = useRef(null) // Add a new state for custom chart name const [customChartName, setCustomChartName] = useState("") // Reset state when modal is opened useEffect(() => { if (isOpen) { setSearchQuery("") setSelectedRatios([]) setSelectedChartType("line") setIsRatioDropdownOpen(false) setShowAllRatios(false) setElementMappings({}) setShowCAGR(false) setCustomChartName("") } }, [isOpen]) // Handle click outside for ratio dropdown useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && !dropdownRef.current.contains(event.target as Node) && searchInputRef.current && !searchInputRef.current.contains(event.target as Node) ) { setIsRatioDropdownOpen(false) } } document.addEventListener("mousedown", handleClickOutside) return () => { document.removeEventListener("mousedown", handleClickOutside) } }, []) // Get available chart types based on variable count const getAvailableChartTypes = (variableCount: number): { type: ChartType; icon: string }[] => { if (variableCount === 1) { return [ { type: "line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/line-chart-32px-42mfRMoMowPlwJSDd29Syim9cWDgwE.svg", }, { type: "bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bar-chart-32px-CPjA4dKmYqkhWFG9iFP93LBiot8VlD.svg", }, { type: "horizontal-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-bar-chart-32px-wQhVc1uHmqP3HmFSWJB00x8rQHoAYE.svg", }, ] } else if (variableCount === 2) { return [ { type: "multi-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/multi-line-chart-32px-9q9UDzonVF2dAgR1kLIigtLovh3q9w.svg", }, { type: "stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stacked-bar-chart-32px-IfQ6J1kVTGeYf3WEBJ0LTREXKDbcKs.svg", }, { type: "horizontal-stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-stacked-bar-32px-e7L5rkfX2LaiHhfqWBUlIHE4P902Dt.svg", }, { type: "grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/grouped-bar-chart-32px-A9bmhVQyaM1yk1e5aEBTMSBTbiQ63D.svg", }, { type: "horizontal-grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-grouped-bar-32px-JL7o2zQFwBhWB4u8dRdsxBoVb50eZR.svg", }, { type: "combo-bar-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/combo-chart-bar-line-32px-LD6PotdxPh8qEMYzfgCI6WsS8nGSYr.svg", }, ] } else if (variableCount === 3) { return [ { type: "multi-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/multi-line-chart-32px-9q9UDzonVF2dAgR1kLIigtLovh3q9w.svg", }, { type: "stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stacked-bar-chart-32px-IfQ6J1kVTGeYf3WEBJ0LTREXKDbcKs.svg", }, { type: "horizontal-stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-stacked-bar-32px-e7L5rkfX2LaiHhfqWBUlIHE4P902Dt.svg", }, { type: "grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/grouped-bar-chart-32px-A9bmhVQyaM1yk1e5aEBTMSBTbiQ63D.svg", }, { type: "horizontal-grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-grouped-bar-32px-JL7o2zQFwBhWB4u8dRdsxBoVb50eZR.svg", }, { type: "combo-stacked-bar-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/combo-chart-stacked-bar-line-32px-KuaF5NJzxm0KqBxpthXbOjeUVMTQeB.svg", }, ] } else { // 4 or more variables return [ { type: "multi-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/multi-line-chart-32px-9q9UDzonVF2dAgR1kLIigtLovh3q9w.svg", }, { type: "stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stacked-bar-chart-32px-IfQ6J1kVTGeYf3WEBJ0LTREXKDbcKs.svg", }, { type: "horizontal-stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-stacked-bar-32px-e7L5rkfX2LaiHhfqWBUlIHE4P902Dt.svg", }, { type: "combo-stacked-bar-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/combo-chart-stacked-bar-line-32px-KuaF5NJzxm0KqBxpthXbOjeUVMTQeB.svg", }, ] } } // Generate chart name based on selected ratios and chart type const generateChartName = (ratios: string[], chartType: ChartType): string => { if (ratios.length === 0) return "Custom Chart" // For single ratio charts if (ratios.length === 1) { // Add chart type descriptor for clarity const chartTypeDescriptor = getChartTypeDescriptor(chartType) return `${ratios[0]} ${chartTypeDescriptor}` } // For two ratios if (ratios.length === 2) { // Use different connectors based on chart type if (chartType.includes("stacked") || chartType === "grouped-bar" || chartType === "horizontal-grouped-bar") { return `${ratios[0]} and ${ratios[1]} Comparison` } else if (chartType === "combo-bar-line") { return `${ratios[0]} vs ${ratios[1]} Trend` } else { return `${ratios[0]} vs ${ratios[1]}` } } // For 3 or more ratios if (chartType.includes("stacked")) { return `${ratios[0]}, ${ratios[1]} & Others Breakdown` } else if (chartType === "multi-line") { return `${ratios[0]}, ${ratios[1]} & Others Trend Analysis` } else if (chartType === "combo-stacked-bar-line") { return `${ratios[0]}, ${ratios[1]} & Others Combined Analysis` } else { return `${ratios[0]}, ${ratios[1]} & ${ratios.length - 2} More Metrics` } } // Helper function to get chart type descriptor const getChartTypeDescriptor = (chartType: ChartType): string => { switch (chartType) { case "line": return "Trend" case "bar": return "Analysis" case "horizontal-bar": return "Comparison" case "multi-line": return "Trend Comparison" case "stacked-bar": case "horizontal-stacked-bar": return "Breakdown" case "grouped-bar": case "horizontal-grouped-bar": return "Group Comparison" case "combo-bar-line": case "combo-stacked-bar-line": return "Combined Analysis" default: return "Chart" } } // Update the custom chart name whenever selected ratios or chart type changes useEffect(() => { setCustomChartName(generateChartName(selectedRatios, selectedChartType)) }, [selectedRatios, selectedChartType]) // Toggle ratio selection const toggleRatio = (ratio: string) => { if (selectedRatios.includes(ratio)) { setSelectedRatios(selectedRatios.filter((r) => r !== ratio)) } else { // Check if we've reached the maximum of 5 variables if (selectedRatios.length < 5) { setSelectedRatios([...selectedRatios, ratio]) } } } // Handle element mappings change const handleElementMappingsChange = (mappings: Record) => { setElementMappings(mappings) } // Handle CAGR toggle const handleCAGRToggle = (enabled: boolean) => { setShowCAGR(enabled) } // Remove a selected ratio const removeRatio = (ratio: string) => { setSelectedRatios(selectedRatios.filter((r) => r !== ratio)) } // Handle chart type selection const handleChartTypeSelect = (chartType: ChartType) => { setSelectedChartType(chartType) // Reset element mappings when chart type changes to ensure proper defaults setElementMappings({}) } // Handle add chart button click const handleAddChart = () => { if (selectedRatios.length === 0) return const chartData: CustomChartData = { id: `custom-chart-${Date.now()}`, chartType: selectedChartType, variables: selectedRatios, name: customChartName, elementMappings: elementMappings, showCAGR: showCAGR, } onAddChart(chartData) onClose() } // Filter ratios based on search query const filteredRatios = availableRatios.filter((ratio) => ratio.toLowerCase().includes(searchQuery.toLowerCase())) // Get available chart types based on the number of selected ratios const availableChartTypes = getAvailableChartTypes(selectedRatios.length || 1) // If no chart type is selected or the selected type is not available for the current number of variables, // select the first available chart type useEffect(() => { const chartTypeExists = availableChartTypes.some((ct) => ct.type === selectedChartType) if (!chartTypeExists && availableChartTypes.length > 0) { setSelectedChartType(availableChartTypes[0].type) } }, [selectedRatios, availableChartTypes, selectedChartType]) if (!isOpen) return null return (

{/* Header - Fixed */}

Add custom chart

{/* Content - Scrollable */}

{/* Ratio Selection */}

Select ratio for charts

{/* Search input */}

setSearchQuery(e.target.value)} onFocus={() => setIsRatioDropdownOpen(true)} /> {/* Selected ratios tags */}

{selectedRatios.map((ratio) => (

{ratio}

))}

{/* Ratio dropdown */} {(isRatioDropdownOpen || showAllRatios) && (

{filteredRatios.map((ratio) => { const isSelected = selectedRatios.includes(ratio) const isDisabled = selectedRatios.length >= 5 && !isSelected return (

{ e.stopPropagation() if (!isDisabled) toggleRatio(ratio) }} > !isDisabled && toggleRatio(ratio)} disabled={isDisabled} className="data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6] mr-2" /> {ratio}

) })}

)}

{selectedRatios.length >= 5 && (

Maximum of 5 variables reached

)}

{/* Chart Type Selection */}

Select Chart type

{availableChartTypes.map((chartTypeOption) => ( ))}

{/* Preview and Customization - Side by Side */}

{/* Chart Preview - Left Side */}

Preview

0 ? customChartName : "Select ratios to generate a chart"} elementMappings={elementMappings} showCAGR={showCAGR} />

{/* Chart Customization - Right Side */}

{/* Chart Element Mapping */} {selectedRatios.length > 0 && (

)} {/* CAGR Toggle for single variable line/bar charts */} {selectedRatios.length === 1 && (selectedChartType === "line" || selectedChartType === "bar" || selectedChartType === "horizontal-bar") && ( )}

{/* Footer - Fixed */}

) } [V0_FILE]typescriptreact:file="components/chart-element-mapping.tsx" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronDown } from "lucide-react" import type { ChartType } from "./add-custom-chart-modal" type ChartElementMappingProps = { chartType: ChartType variables: string[] onChange: (mappings: Record) => void initialMappings?: Record } // Chart element colors const chartColors = { line: "#34A853", // Green line1: "#4285F4", // Blue line2: "#EA4335", // Red line3: "#34A853", // Green line4: "#FBBC05", // Yellow line5: "#8430CE", // Purple bar: "#4285F4", // Blue stacked1: "#4285F4", // Blue stacked2: "#EA4335", // Red stacked3: "#34A853", // Green stacked4: "#FBBC05", // Yellow stacked5: "#8430CE", // Purple group1: "#4285F4", // Blue group2: "#EA4335", // Red group3: "#34A853", // Green group4: "#FBBC05", // Yellow group5: "#8430CE", // Purple } export default function ChartElementMapping({ chartType, variables, onChange, initialMappings = {}, }: ChartElementMappingProps) { const [mappings, setMappings] = useState>(initialMappings) const [openDropdown, setOpenDropdown] = useState(null) // Generate default mappings if none provided useEffect(() => { if (Object.keys(initialMappings).length === 0 && variables.length > 0) { const defaultMappings: Record = {} // Auto-assign variables to chart elements based on chart type and variable count if (chartType === "line" || chartType === "bar" || chartType === "horizontal-bar") { // Single variable charts if (variables.length === 1) { defaultMappings["primary"] = variables[0] } } else if (chartType === "multi-line") { // Multi-line charts - each variable gets its own line variables.forEach((variable, index) => { if (index < 5) { // Maximum 5 lines defaultMappings[`line${index + 1}`] = variable } }) } else if (chartType.includes("stacked") && !chartType.includes("combo")) { // Pure stacked charts - each variable gets its own stack variables.forEach((variable, index) => { if (index < 5) { // Maximum 5 stacks defaultMappings[`stacked${index + 1}`] = variable } }) } else if (chartType === "combo-bar-line") { // Combo chart (1 bar, 1 line) - first variable to bar, second to line if (variables.length >= 1) defaultMappings["bar"] = variables[0] if (variables.length >= 2) defaultMappings["line"] = variables[1] } else if (chartType === "combo-stacked-bar-line") { // Complex combo chart (stacked bars + line) // CRITICAL LOGIC: Exactly ONE metric for line, remaining for stacked bars // Last variable as line (by default) if (variables.length > 0) { defaultMappings["line"] = variables[variables.length - 1] // Assign all but last variable to stacked bars variables.slice(0, -1).forEach((variable, index) => { if (index < 4) { // Maximum 4 stacks (since we need 1 for line) defaultMappings[`stacked${index + 1}`] = variable } }) } } else if (chartType === "grouped-bar" || chartType === "horizontal-grouped-bar") { // Grouped bar charts - each variable gets its own group variables.forEach((variable, index) => { if (index < 5) { // Maximum 5 groups defaultMappings[`group${index + 1}`] = variable } }) } setMappings(defaultMappings) onChange(defaultMappings) } }, [chartType, variables, initialMappings, onChange]) // Update parent when mappings change useEffect(() => { onChange(mappings) }, [mappings, onChange]) // Handle dropdown toggle const toggleDropdown = (elementKey: string) => { setOpenDropdown(openDropdown === elementKey ? null : elementKey) } // Handle selection change const handleSelect = (elementKey: string, variable: string) => { // Check if this variable is already assigned to another element const existingElement = Object.entries(mappings).find(([key, val]) => val === variable && key !== elementKey) // Create new mappings const newMappings = { ...mappings } // If variable is already assigned elsewhere, swap them if (existingElement) { const [otherElementKey] = existingElement newMappings[otherElementKey] = newMappings[elementKey] || "" } // Assign the new variable to this element newMappings[elementKey] = variable setMappings(newMappings) setOpenDropdown(null) } // Generate element configurations based on chart type and variable count const getElementConfigs = () => { const configs: { key: string; label: string; color: string }[] = [] if (chartType === "line" || chartType === "bar" || chartType === "horizontal-bar") { if (variables.length === 1) { // Single variable charts don't need mapping UI return [] } } else if (chartType === "multi-line") { // Multi-line charts - one line per variable variables.forEach((_, index) => { if (index < 5) { // Maximum 5 lines configs.push({ key: `line${index + 1}`, label: `Line ${index + 1}`, color: chartColors[`line${index + 1}` as keyof typeof chartColors] || "#808080", }) } }) } else if (chartType.includes("stacked") && !chartType.includes("combo")) { // Pure stacked charts - one stack per variable variables.forEach((_, index) => { if (index < 5) { // Maximum 5 stacks configs.push({ key: `stacked${index + 1}`, label: `Stacked ${index + 1}`, color: chartColors[`stacked${index + 1}` as keyof typeof chartColors] || "#808080", }) } }) } else if (chartType === "combo-bar-line") { // Simple combo chart (bar + line) configs.push({ key: "bar", label: "Bar", color: chartColors.bar }) configs.push({ key: "line", label: "Line", color: chartColors.line }) } else if (chartType === "combo-stacked-bar-line") { // Complex combo chart (stacked bars + line) // CRITICAL LOGIC: Exactly ONE metric for line, remaining for stacked bars // Always add one line element configs.push({ key: "line", label: "Line", color: chartColors.line }) // Add stacked bar elements for remaining variables (total - 1) const stackedBarCount = Math.max(0, variables.length - 1) for (let i = 0; i < stackedBarCount; i++) { configs.push({ key: `stacked${i + 1}`, label: `Stacked ${i + 1}`, color: chartColors[`stacked${i + 1}` as keyof typeof chartColors] || "#808080", }) } } else if (chartType === "grouped-bar" || chartType === "horizontal-grouped-bar") { // Grouped bar charts - one group per variable variables.forEach((_, index) => { if (index < 5) { // Maximum 5 groups configs.push({ key: `group${index + 1}`, label: `Group ${index + 1}`, color: chartColors[`group${index + 1}` as keyof typeof chartColors] || "#808080", }) } }) } return configs } const elementConfigs = getElementConfigs() // Don't render anything for single-variable charts or no variables if (elementConfigs.length === 0 || variables.length === 0) { return null } return (

Assign metrics to chart elements

{elementConfigs.map((config) => (

{config.label}

{openDropdown === config.key && (

{variables.map((variable) => (

handleSelect(config.key, variable)} > {variable} {mappings[config.key] === variable && ✓}

))}

)}

))}

) } [V0_FILE]typescriptreact:file="components/cagr-toggle.tsx" isEdit="true" isMerged="true" "use client" import { Switch } from "@/components/ui/switch" type CAGRToggleProps = { enabled: boolean onChange: (enabled: boolean) => void } export default function CAGRToggle({ enabled, onChange }: CAGRToggleProps) { return (

CAGR

Show Compound Annual Growth Rate on chart

) } [V0_FILE]typescript:file="types/report-types.ts" isEdit="true" isMerged="true" // Define all shared types in a central location /** * Chart type definitions */ export type ChartType = // 1 variable charts | "line" | "bar" | "horizontal-bar" // 2+ variable charts | "multi-line" | "stacked-bar" | "horizontal-stacked-bar" | "grouped-bar" | "horizontal-grouped-bar" | "combo-bar-line" | "combo-stacked-bar-line" /** * Variable count for charts */ export type VariableCount = 1 | 2 | 3 | 4 | 5 /** * Chart option configuration */ export interface ChartOption { enabled: boolean chartType: ChartType variableCount: VariableCount name?: string elementMappings?: Record showCAGR?: boolean } /** * Custom chart data structure */ export interface CustomChartData { id: string chartType: ChartType variables: string[] name: string elementMappings?: Record showCAGR?: boolean } /** * Subsection customization options */ export interface SectionCustomization { years?: Record showAICommentary?: boolean chartOptions?: Record ratios?: { selectedRatios: string[] years: Record } peerComparison?: { selectedPeers: string[] selectedRatios: string[] } } /** * Subsection structure */ export interface SubSection { id: string title: string enabled: boolean toggleable: boolean customization?: SectionCustomization } /** * Section structure */ export interface Section { id: string title: string isHeader: boolean subSections?: SubSection[] } [V0_FILE]typescript:file="utils/section-utils.ts" isEdit="true" isMerged="true" import type { Section, SubSection } from "@/types/report-types" /** * Updates a section or subsection in the sections array * @param sections - The current sections array * @param sectionId - The ID of the section to update * @param subSectionId - Optional ID of the subsection to update * @param updateFn - Function that returns the updated section/subsection * @returns Updated sections array */ export function updateSection( sections: Section[], sectionId: string, subSectionId: string | null, updateFn: (item: Section | SubSection) => Section | SubSection, ): Section[] { return sections.map((section) => { if (section.id === sectionId) { if (!subSectionId) { // Update the section itself return updateFn(section) as Section } else if (section.subSections) { // Update a specific subsection return { ...section, subSections: section.subSections.map((subSection) => { if (subSection.id === subSectionId) { return updateFn(subSection) as SubSection } return subSection }), } } } return section }) } /** * Checks if a subsection has customization options * @param subSectionId - The ID of the subsection to check * @returns Boolean indicating if the subsection has customization */ export function hasCustomization(subSectionId: string): boolean { const financialStatementIds = ["balance_sheet", "income_statement", "cash_flow", "summary-financials"] const financialAnalysisIds = [ "revenue", "profitability", "cash-flow", "efficiency-working-capital", "capital-structure-leverage", "return-metrics", ] const creditAnalysisIds = ["balance-sheet-analysis", "income-statement-analysis"] const annexureIds = ["industry-analysis", "ratio-table"] const benchmarkingIds = ["peer-comparison"] return ( financialStatementIds.includes(subSectionId) || financialAnalysisIds.includes(subSectionId) || creditAnalysisIds.includes(subSectionId) || annexureIds.includes(subSectionId) || benchmarkingIds.includes(subSectionId) ) } /** * Checks if a subsection has chart options * @param subSectionId - The ID of the subsection to check * @returns Boolean indicating if the subsection has chart options */ export function hasChartOptions(subSectionId: string): boolean { const financialAnalysisIds = [ "revenue", "profitability", "cash-flow", "efficiency-working-capital", "capital-structure-leverage", "return-metrics", ] return financialAnalysisIds.includes(subSectionId) } /** * Gets the label for a chart option * @param sections - The sections array * @param sectionId - The ID of the section * @param subSectionId - The ID of the subsection * @param optionId - The ID of the chart option * @returns The label for the chart option */ export function getChartOptionLabel( sections: Section[], sectionId: string, subSectionId: string, optionId: string, ): string { // Find the chart option in the sections data const section = sections.find((s) => s.id === sectionId) if (section?.subSections) { const subSection = section.subSections.find((ss) => ss.id === subSectionId) if (subSection?.customization?.chartOptions?.[optionId]?.name) { return subSection.customization.chartOptions[optionId].name! } } // Fallback to predefined labels if no name is found const labels: Record = { // Profitability "profit-over-years": "Profit over years", "gross-ebitda-margin": "Gross margin vs EBITDA margin", "net-income-margin": "Net income margin", // Revenue "revenue-trend": "Revenue trend", // Cash Flow "operating-cash-flow": "Operating cash flow", "ebitda-vs-operating-cash-flow": "EBITDA vs Operating cash flow", "profitability-metric-comparison": "Profitability metric comparison", "operating-cash-flow-vs-ebita": "Operating cash flow vs EBITA", "free-cash-flow-vs-ebita-vs-net-income": "Free cash flow vs EBITA vs Net income", "capex-vs-depreciation": "Capex vs Depreciation", // Efficiency and Working Capital "working-capital": "Working capital", "cash-conversion-cycle": "Cash conversion cycle", // Capital Structure & Leverage "debt-vs-ebita": "Debt vs EBITA", "interest-coverage": "Interest coverage", "debt-to-equity": "Debt to Equity", // Return Metrics "return-on-assets": "Return on assets", "return-on-metrics-comparison": "Return on metrics comparison", } // For custom charts, if not found in the predefined labels if (!labels[optionId] && optionId.startsWith("custom-chart-")) { return "Custom Chart" } return labels[optionId] || optionId } [V0_FILE]typescript:file="constants/report-constants.ts" isEdit="true" isMerged="true" import type { ChartType } from "@/types/report-types" /** * Default years for financial statements */ export const DEFAULT_YEARS = { "2024": true, "2023": true, "2022": true, "2021": true, "2020": true, } /** * List of available financial ratios */ export const RATIOS_LIST = [ "Revenue Growth (YoY)", "EBITDA Margin", "Return on Equity (ROE)", "Debt-to-Equity Ratio", "Current Ratio", "Quick Ratio", "Cash Ratio", "Working Capital Ratio", "Gross Profit Margin", "Operating Profit Margin", "Net Profit Margin", "Return on Assets", "Return on Capital Employed", "Debt to Assets", "Equity Ratio", "Interest Coverage", "Asset Turnover", "Inventory Turnover", "Receivables Turnover", "Payables Turnover", "Working Capital Turnover", "Earnings Per Share", "Book Value Per Share", "Price to Earnings Ratio", ] /** * Chart colors for different chart elements */ export const CHART_COLORS = { primary: "#4285F4", line: "#34A853", line1: "#4285F4", line2: "#EA4335", line3: "#34A853", line4: "#FBBC05", line5: "#8430CE", bar: "#4285F4", stacked1: "#4285F4", stacked2: "#EA4335", stacked3: "#34A853", stacked4: "#FBBC05", stacked5: "#8430CE", group1: "#4285F4", group2: "#EA4335", group3: "#34A853", group4: "#FBBC05", group5: "#8430CE", } /** * Get available chart types based on variable count * @param variableCount - Number of variables * @returns Array of available chart types with their icons */ export function getAvailableChartTypes(variableCount: number): { type: ChartType; icon: string }[] { if (variableCount === 1) { return [ { type: "line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/line-chart-32px-42mfRMoMowPlwJSDd29Syim9cWDgwE.svg", }, { type: "bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/bar-chart-32px-CPjA4dKmYqkhWFG9iFP93LBiot8VlD.svg", }, { type: "horizontal-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-bar-chart-32px-wQhVc1uHmqP3HmFSWJB00x8rQHoAYE.svg", }, ] } else if (variableCount === 2) { return [ { type: "multi-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/multi-line-chart-32px-9q9UDzonVF2dAgR1kLIigtLovh3q9w.svg", }, { type: "stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stacked-bar-chart-32px-IfQ6J1kVTGeYf3WEBJ0LTREXKDbcKs.svg", }, { type: "horizontal-stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-stacked-bar-32px-e7L5rkfX2LaiHhfqWBUlIHE4P902Dt.svg", }, { type: "grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/grouped-bar-chart-32px-A9bmhVQyaM1yk1e5aEBTMSBTbiQ63D.svg", }, { type: "horizontal-grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-grouped-bar-32px-JL7o2zQFwBhWB4u8dRdsxBoVb50eZR.svg", }, { type: "combo-bar-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/combo-chart-bar-line-32px-LD6PotdxPh8qEMYzfgCI6WsS8nGSYr.svg", }, ] } else if (variableCount === 3) { return [ { type: "multi-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/multi-line-chart-32px-9q9UDzonVF2dAgR1kLIigtLovh3q9w.svg", }, { type: "stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stacked-bar-chart-32px-IfQ6J1kVTGeYf3WEBJ0LTREXKDbcKs.svg", }, { type: "horizontal-stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-stacked-bar-32px-e7L5rkfX2LaiHhfqWBUlIHE4P902Dt.svg", }, { type: "grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/grouped-bar-chart-32px-A9bmhVQyaM1yk1e5aEBTMSBTbiQ63D.svg", }, { type: "horizontal-grouped-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-grouped-bar-32px-JL7o2zQFwBhWB4u8dRdsxBoVb50eZR.svg", }, { type: "combo-stacked-bar-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/combo-chart-stacked-bar-line-32px-KuaF5NJzxm0KqBxpthXbOjeUVMTQeB.svg", }, ] } else { // 4 or more variables return [ { type: "multi-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/multi-line-chart-32px-9q9UDzonVF2dAgR1kLIigtLovh3q9w.svg", }, { type: "stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/stacked-bar-chart-32px-IfQ6J1kVTGeYf3WEBJ0LTREXKDbcKs.svg", }, { type: "horizontal-stacked-bar", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/horizontal-stacked-bar-32px-e7L5rkfX2LaiHhfqWBUlIHE4P902Dt.svg", }, { type: "combo-stacked-bar-line", icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/combo-chart-stacked-bar-line-32px-KuaF5NJzxm0KqBxpthXbOjeUVMTQeB.svg", }, ] } } [V0_FILE]typescript:file="components/years-selection.tsx" isEdit="true" isMerged="true" "use client" import { Checkbox } from "@/components/ui/checkbox" interface YearsSelectionProps { years: Record subSectionId: string onToggleYear: (year: string) => void } /** * Component for selecting years */ export function YearsSelection({ years, subSectionId, onToggleYear }: YearsSelectionProps) { if (!years) return null return (

Years

{Object.keys(years).map((year) => (

onToggleYear(year)} className="data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]" /> {year}

))}

) } [V0_FILE]typescript:file="components/ai-commentary-toggle.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import { Switch } from "@/components/ui/switch" interface AICommentaryToggleProps { enabled: boolean onToggle: () => void } /** * Component for toggling AI commentary */ export function AICommentaryToggle({ enabled, onToggle }: AICommentaryToggleProps) { return (

AI commentary

) } [V0_FILE]typescript:file="components/subsection-header.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Switch } from "@/components/ui/switch" interface SubsectionHeaderProps { title: string enabled: boolean toggleable: boolean onToggle: () => void onEdit: (title: string) => void } /** * Component for subsection headers with edit and toggle functionality */ export function SubsectionHeader({ title, enabled, toggleable, onToggle, onEdit }: SubsectionHeaderProps) { const [isEditing, setIsEditing] = useState(false) const [editedTitle, setEditedTitle] = useState(title) const handleSave = () => { if (editedTitle.trim() === "") return onEdit(editedTitle) setIsEditing(false) } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter") { handleSave() } else if (e.key === "Escape") { setIsEditing(false) setEditedTitle(title) } } return (

{isEditing ? (

setEditedTitle(e.target.value)} className="text-[#101828] text-base border border-[#EAF0FC] rounded px-2 py-1 mr-2 focus:outline-none focus:ring-1 focus:ring-[#004ce6]" autoFocus onKeyDown={handleKeyDown} />

) : ( <> {title} {!toggleable && ( Required )} )}

) } [V0_FILE]typescript:file="data/initial-sections.ts" isEdit="true" isMerged="true" import type { Section } from "@/types/report-types" import { DEFAULT_YEARS } from "@/constants/report-constants" /** * Initial data structure for report sections */ export const initialSectionsData: Section[] = [ { id: "company", title: "Company", isHeader: true, subSections: [ { id: "company-overview", title: "Company Overview", enabled: true, toggleable: false }, { id: "company-timeline", title: "Timeline", enabled: true, toggleable: true }, { id: "product-services", title: "Product & Services", enabled: true, toggleable: false }, ], }, { id: "financial-analysis", title: "Financial Analysis", isHeader: true, subSections: [ { id: "summary-financials", title: "Financial summary", enabled: true, toggleable: false, customization: { years: { ...DEFAULT_YEARS }, showAICommentary: true, }, }, { id: "revenue", title: "Revenue", enabled: true, toggleable: false, customization: { chartOptions: { "revenue-trend": { enabled: true, chartType: "line", variableCount: 1, name: "Revenue Trend", }, }, showAICommentary: true, }, }, { id: "profitability", title: "Profitability", enabled: true, toggleable: false, customization: { chartOptions: { "profit-over-years": { enabled: true, chartType: "bar", variableCount: 1, name: "Profit Over Years", }, "gross-ebitda-margin": { enabled: true, chartType: "multi-line", variableCount: 2, name: "Gross Margin vs EBITDA Margin", }, "net-income-margin": { enabled: true, chartType: "line", variableCount: 1, name: "Net Income Margin", }, }, showAICommentary: true, }, }, { id: "cash-flow", title: "Cash Flow", enabled: true, toggleable: false, customization: { chartOptions: { "operating-cash-flow": { enabled: true, chartType: "line", variableCount: 1, name: "Operating Cash Flow", }, "ebitda-vs-operating-cash-flow": { enabled: true, chartType: "multi-line", variableCount: 2, name: "EBITDA vs Operating Cash Flow", }, "profitability-metric-comparison": { enabled: true, chartType: "stacked-bar", variableCount: 3, name: "Profitability Metric Comparison", }, "capex-vs-depreciation": { enabled: true, chartType: "grouped-bar", variableCount: 2, name: "Capex vs Depreciation", }, }, showAICommentary: true, }, }, { id: "efficiency-working-capital", title: "Efficiency and Working Capital", enabled: true, toggleable: false, customization: { chartOptions: { "working-capital": { enabled: true, chartType: "stacked-bar", variableCount: 3, name: "Working Capital", }, "cash-conversion-cycle": { enabled: true, chartType: "line", variableCount: 1, name: "Cash Conversion Cycle", }, }, showAICommentary: true, }, }, { id: "capital-structure-leverage", title: "Capital Structure & Leverage", enabled: true, toggleable: false, customization: { chartOptions: { "debt-vs-ebita": { enabled: true, chartType: "bar", variableCount: 1, name: "Debt vs EBITA", }, "interest-coverage": { enabled: true, chartType: "line", variableCount: 1, name: "Interest Coverage", }, "debt-to-equity": { enabled: true, chartType: "multi-line", variableCount: 2, name: "Debt to Equity", }, }, showAICommentary: true, }, }, { id: "return-metrics", title: "Return Metrics", enabled: true, toggleable: false, customization: { chartOptions: { "return-on-assets": { enabled: true, chartType: "line", variableCount: 1, name: "Return on Assets", }, "return-on-metrics-comparison": { enabled: true, chartType: "multi-line", variableCount: 2, name: "Return on Metrics Comparison", }, }, showAICommentary: true, }, }, ], }, { id: "deal-summary", title: "Deal Summary", isHeader: true, subSections: [{ id: "deal-summary-details", title: "Deal Summary", enabled: true, toggleable: false }], }, { id: "corporate-structure", title: "Corporate Structure", isHeader: true, subSections: [ { id: "management", title: "Management", enabled: true, toggleable: false }, { id: "fundraising", title: "Fundraising", enabled: false, toggleable: true }, ], }, { id: "credit-analysis", title: "Credit Analysis", isHeader: true, subSections: [ { id: "balance-sheet-analysis", title: "Balance Sheet analysis", enabled: true, toggleable: false, customization: { showAICommentary: true, }, }, { id: "income-statement-analysis", title: "Income Statement analysis", enabled: true, toggleable: false, customization: { showAICommentary: true, }, }, ], }, { id: "benchmarking", title: "Benchmarking", isHeader: true, subSections: [ { id: "peer-comparison", title: "Peer Comparison", enabled: true, toggleable: true, customization: { peerComparison: { selectedPeers: [ "Divi's Laboratories", "GranulEs India Ltd.", "Laurus Labs ltd.", "Strides Pharma Science Ltd", "Jubilant Life Sciences Ltd.", ], selectedRatios: ["Revenue Growth (YoY)", "EBITDA Margin", "Return on Equity (ROE)", "Debt-to-Equity Ratio"], }, }, }, { id: "diligence-checklist", title: "Diligence Check-list", enabled: true, toggleable: true }, ], }, { id: "annexure", title: "Annexure", isHeader: true, subSections: [ { id: "balance_sheet", title: "Balance sheet", enabled: true, toggleable: false, customization: { years: { ...DEFAULT_YEARS }, showAICommentary: true, }, }, { id: "income_statement", title: "Income statement", enabled: true, toggleable: false, customization: { years: { ...DEFAULT_YEARS }, showAICommentary: true, }, }, { id: "cash_flow", title: "Cash flow statement", enabled: true, toggleable: false, customization: { years: { ...DEFAULT_YEARS }, showAICommentary: true, }, }, { id: "ratio-table", title: "Ratios", enabled: true, toggleable: false, customization: { years: { ...DEFAULT_YEARS }, ratios: { selectedRatios: [ "Earnings Per Share", "Current Ratio", "Gross Profit Margin", "Operating Profit Margin", "Asset Turnover", "Inventory Turnover", ], years: { ...DEFAULT_YEARS }, }, }, }, ], }, ] [V0_FILE]typescriptreact:file="constants/ratio-categories.ts" isEdit="true" isMerged="true" /** * Categorized financial ratios */ export const RATIO_CATEGORIES = { liquidity: { title: "Liquidity ratio", ratios: ["Current Ratio", "Quick Ratio", "Cash Ratio", "Working Capital Ratio"], }, profitability: { title: "Profitability ratio", ratios: [ "Gross Profit Margin", "Operating Profit Margin", "Net Profit Margin", "Return on Assets", "Return on Equity (ROE)", "Return on Capital Employed", ], }, solvency: { title: "Solvency ratio", ratios: ["Debt-to-Equity Ratio", "Debt to Assets", "Equity Ratio", "Interest Coverage"], }, efficiency: { title: "Efficiency ratio", ratios: [ "Asset Turnover", "Inventory Turnover", "Receivables Turnover", "Payables Turnover", "Working Capital Turnover", "Cash Conversion Cycle", ], }, marketValue: { title: "Market value ratio", ratios: ["Earnings Per Share", "Book Value Per Share", "Price to Earnings Ratio"], }, operatingMetrics: { title: "Operating metric", ratios: [], // Empty by default, will be populated with custom metrics }, } /** * Get the category key from the title */ export function getCategoryKeyFromTitle(title: string): string | null { for (const [key, category] of Object.entries(RATIO_CATEGORIES)) { if (category.title === title) { return key } } return null } /** * Get all category keys */ export function getAllCategoryKeys(): string[] { return Object.keys(RATIO_CATEGORIES) } /** * Get all category titles */ export function getAllCategoryTitles(): string[] { return Object.values(RATIO_CATEGORIES).map((category) => category.title) } [V0_FILE]typescriptreact:file="components/view-all-ratios-button.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { ViewAllRatiosModal } from "@/components/view-all-ratios-modal" interface ViewAllRatiosButtonProps { selectedRatios: string[] onToggleRatio?: (ratio: string) => void } /** * Button component that opens the View All Ratios modal */ export function ViewAllRatiosButton({ selectedRatios, onToggleRatio }: ViewAllRatiosButtonProps) { const [isModalOpen, setIsModalOpen] = useState(false) return ( <> setIsModalOpen(false)} selectedRatios={selectedRatios} onToggleRatio={onToggleRatio} /> ) } [V0_FILE]typescriptreact:file="hooks/use-sections.ts" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import type { Section, SubSection, ChartType, CustomChartData } from "@/types/report-types" import { updateSection } from "@/utils/section-utils" import { initialSectionsData } from "@/data/initial-sections" import { useRatioStore } from "@/store/ratio-store" /** * Custom hook for managing sections state and operations */ export function useSections() { const [sections, setSections] = useState(initialSectionsData) // Get custom metrics from store to sync with sections const customMetrics = useRatioStore((state) => state.customMetrics) // Sync custom metrics with sections when they change useEffect(() => { // This effect ensures that when custom metrics are added or removed, // they are properly reflected in any section that uses ratios // This is a simplified implementation - in a real app, you might want // to handle this more efficiently }, [customMetrics]) // Toggle subsection enabled state const toggleSubSection = (sectionId: string, subSectionId: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { if ((subSection as SubSection).toggleable) { return { ...subSection, enabled: !(subSection as SubSection).enabled, } as SubSection } return subSection }), ) } // Toggle year selection const toggleYear = (sectionId: string, subSectionId: string, year: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization) { const newYearValue = !sub.customization.years?.[year] return { ...sub, customization: { ...sub.customization, years: sub.customization.years ? { ...sub.customization.years, [year]: newYearValue, } : undefined, // Also update ratio years if they exist ratios: sub.customization.ratios ? { ...sub.customization.ratios, years: { ...sub.customization.ratios.years, [year]: newYearValue, }, } : undefined, }, } } return sub }), ) } // Set chart type const setChartType = (sectionId: string, subSectionId: string, optionId: string, chartType: ChartType) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization?.chartOptions) { return { ...sub, customization: { ...sub.customization, chartOptions: { ...sub.customization.chartOptions, [optionId]: { ...sub.customization.chartOptions[optionId], chartType, }, }, }, } } return sub }), ) } // Toggle chart option const toggleChartOption = (sectionId: string, subSectionId: string, optionId: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization?.chartOptions) { return { ...sub, customization: { ...sub.customization, chartOptions: { ...sub.customization.chartOptions, [optionId]: { ...sub.customization.chartOptions[optionId], enabled: !sub.customization.chartOptions[optionId].enabled, }, }, }, } } return sub }), ) } // Add custom chart const addCustomChart = (chartData: CustomChartData, sectionId: string, subSectionId: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization) { return { ...sub, customization: { ...sub.customization, chartOptions: { ...sub.customization.chartOptions, [chartData.id]: { enabled: true, chartType: chartData.chartType, variableCount: chartData.variables.length as 1 | 2 | 3 | 4 | 5, name: chartData.name, elementMappings: chartData.elementMappings, showCAGR: chartData.showCAGR, }, }, }, } } return sub }), ) } // Toggle AI commentary const toggleAICommentary = (sectionId: string, subSectionId: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization) { return { ...sub, customization: { ...sub.customization, showAICommentary: !sub.customization.showAICommentary, }, } } return sub }), ) } // Toggle ratio const toggleRatio = (sectionId: string, subSectionId: string, ratio: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization?.ratios) { const isSelected = sub.customization.ratios.selectedRatios.includes(ratio) return { ...sub, customization: { ...sub.customization, ratios: { ...sub.customization.ratios, selectedRatios: isSelected ? sub.customization.ratios.selectedRatios.filter((r) => r !== ratio) : [...sub.customization.ratios.selectedRatios, ratio], }, }, } } return sub }), ) } // Toggle peer const togglePeer = (sectionId: string, subSectionId: string, peer: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization?.peerComparison) { const isSelected = sub.customization.peerComparison.selectedPeers.includes(peer) return { ...sub, customization: { ...sub.customization, peerComparison: { ...sub.customization.peerComparison, selectedPeers: isSelected ? sub.customization.peerComparison.selectedPeers.filter((p) => p !== peer) : [...sub.customization.peerComparison.selectedPeers, peer], }, }, } } return sub }), ) } // Toggle peer comparison ratio const togglePeerComparisonRatio = (sectionId: string, subSectionId: string, ratio: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { const sub = subSection as SubSection if (sub.customization?.peerComparison) { const isSelected = sub.customization.peerComparison.selectedRatios.includes(ratio) return { ...sub, customization: { ...sub.customization, peerComparison: { ...sub.customization.peerComparison, selectedRatios: isSelected ? sub.customization.peerComparison.selectedRatios.filter((r) => r !== ratio) : [...sub.customization.peerComparison.selectedRatios, ratio], }, }, } } return sub }), ) } // Edit subsection title const editSubsectionTitle = (sectionId: string, subSectionId: string, newTitle: string) => { setSections( updateSection(sections, sectionId, subSectionId, (subSection) => { return { ...subSection, title: newTitle, } }), ) } return { sections, toggleSubSection, toggleYear, setChartType, toggleChartOption, addCustomChart, toggleAICommentary, toggleRatio, togglePeer, togglePeerComparisonRatio, editSubsectionTitle, } } [V0_FILE]typescriptreact:file="store/ratio-store.ts" isEdit="true" isMerged="true" import { create } from "zustand" import { persist } from "zustand/middleware" import { RATIO_CATEGORIES } from "@/constants/ratio-categories" export interface CustomMetric { id: string name: string description: string createdAt: number } export interface RatioState { // All standard ratios from categories standardRatios: Record // Custom metrics (operating metrics) customMetrics: CustomMetric[] // Actions addCustomMetric: (name: string, description: string) => void removeCustomMetric: (id: string) => void // Helper methods getAllRatios: () => string[] getRatiosByCategory: (category: string) => string[] getCategoryForRatio: (ratio: string) => string | null } export const useRatioStore = create()( persist( (set, get) => ({ // Initialize with standard ratios from categories standardRatios: { liquidity: [...RATIO_CATEGORIES.liquidity.ratios], profitability: [...RATIO_CATEGORIES.profitability.ratios], solvency: [...RATIO_CATEGORIES.solvency.ratios], efficiency: [...RATIO_CATEGORIES.efficiency.ratios], marketValue: [...RATIO_CATEGORIES.marketValue.ratios], operatingMetrics: [], // Start with empty operating metrics }, customMetrics: [], addCustomMetric: (name: string, description: string) => { const newMetric: CustomMetric = { id: `custom-metric-${Date.now()}`, name, description, createdAt: Date.now(), } set((state) => ({ customMetrics: [...state.customMetrics, newMetric], })) }, removeCustomMetric: (id: string) => { set((state) => ({ customMetrics: state.customMetrics.filter((metric) => metric.id !== id), })) }, getAllRatios: () => { const { standardRatios, customMetrics } = get() const standardRatiosList = Object.values(standardRatios).flat() const customMetricsList = customMetrics.map((metric) => metric.name) return [...standardRatiosList, ...customMetricsList] }, getRatiosByCategory: (category: string) => { const { standardRatios, customMetrics } = get() if (category === "operatingMetrics") { return customMetrics.map((metric) => metric.name) } return standardRatios[category] || [] }, getCategoryForRatio: (ratio: string) => { const { standardRatios, customMetrics } = get() // Check standard ratios for (const [category, ratios] of Object.entries(standardRatios)) { if (ratios.includes(ratio)) { return category } } // Check custom metrics if (customMetrics.some((metric) => metric.name === ratio)) { return "operatingMetrics" } return null }, }), { name: "ratio-store", }, ), ) [V0_FILE]typescriptreact:file="components/add-custom-metric-modal.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { X } from "lucide-react" import { useRatioStore } from "@/store/ratio-store" interface AddCustomMetricModalProps { isOpen: boolean onClose: () => void } export function AddCustomMetricModal({ isOpen, onClose }: AddCustomMetricModalProps) { const [metricName, setMetricName] = useState("") const [metricDescription, setMetricDescription] = useState("") const modalRef = useRef(null) const nameInputRef = useRef(null) const addCustomMetric = useRatioStore((state) => state.addCustomMetric) // Focus on name input when modal opens useEffect(() => { if (isOpen && nameInputRef.current) { nameInputRef.current.focus() } }, [isOpen]) // Handle click outside to close modal useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (modalRef.current && !modalRef.current.contains(event.target as Node)) { onClose() } } if (isOpen) { document.addEventListener("mousedown", handleClickOutside) } return () => { document.removeEventListener("mousedown", handleClickOutside) } }, [isOpen, onClose]) const handleSubmit = () => { if (metricName.trim() === "") return addCustomMetric(metricName.trim(), metricDescription.trim()) setMetricName("") setMetricDescription("") onClose() } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault() handleSubmit() } else if (e.key === "Escape") { onClose() } } if (!isOpen) return null return (

Add custom metric

Metric name setMetricName(e.target.value)} onKeyDown={handleKeyDown} placeholder="Enter metric name" className="w-full p-2.5 border border-[#EAF0FC] rounded-lg text-[#101828] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6]" />

AI description

This description helps AI understand the metric for generating insights.

setMetricDescription(e.target.value)}
            onKeyDown={(e) => e.key === "Escape" && onClose()}
            placeholder="Describe how this metric is calculated and what it measures"
            className="w-full p-2.5 border border-[#EAF0FC] rounded-lg text-[#101828] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6] min-h-[80px]"
          />
        </div>

<div className="flex justify-end gap-3 mt-4">
          <button
            onClick={onClose}
            className="px-4 py-2 border border-[#EAF0FC] rounded-lg text-[#344054] text-sm font-medium hover:bg-[#F2F6FE] transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={handleSubmit}
            disabled={!metricName.trim()}
            className={`px-4 py-2 bg-[#004ce6] text-white rounded-lg text-sm font-medium transition-colors ${
              !metricName.trim() ? "opacity-50 cursor-not-allowed" : "hover:bg-[#003db8]"
            }`}
          >
            Add metric
          </button>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Inter", sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

/* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

/* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

/* Ensure chart previews remain visible */
  .chart-preview-container {
    pointer-events: auto;
    z-index: 50;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="components/report-index.tsx" isQuickEdit="true" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { ChevronUp, ChevronDown } from "lucide-react"

type Section = {
  id: string
  title: string
  isHeader: boolean
  subSections?: {
    id: string
    title: string
    enabled: boolean
    toggleable: boolean
  }[]
}

type ReportIndexProps = {
  sections: Section[]
  onNavigate: (sectionId: string, subSectionId?: string) => void
  activeSection: string | null
  activeSubSection: string | null
}

export default function ReportIndex({ sections, onNavigate, activeSection, activeSubSection }: ReportIndexProps) {
  // Track expanded sections
  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({})

// Initialize all sections as expanded
  useEffect(() => {
    const initialExpanded: Record<string, boolean> = {}
    sections.forEach((section) => {
      initialExpanded[section.id] = true
    })
    setExpandedSections(initialExpanded)
  }, [sections])

// Toggle section expansion
  const toggleSection = (sectionId: string, e: React.MouseEvent) => {
    e.stopPropagation()
    setExpandedSections((prev) => ({
      ...prev,
      [sectionId]: !prev[sectionId],
    }))
  }

return (
    <div className="w-full h-full overflow-y-auto scrollbar-hide">
      <div className="p-4">
        <h3 className="text-[#344054] text-sm font-medium mb-4">Report Sections</h3>
        <div className="space-y-1">
          {sections.map((section) => (
            <div key={section.id} className="mb-2">
              {/* Header */}
              <div
                className={`flex items-center justify-between py-2 px-3 rounded-md cursor-pointer hover:bg-[#F2F6FE] ${
                  activeSection === section.id && !activeSubSection
                    ? "bg-[#F2F6FE] text-[#004ce6] font-medium"
                    : "text-[#344054]"
                }`}
                onClick={() => onNavigate(section.id)}
              >
                <span className="text-[15px]">{section.title}</span>
                {section.subSections && section.subSections.length > 0 && (
                  <button onClick={(e) => toggleSection(section.id, e)} className="text-[#667085] hover:text-[#344054]">
                    {expandedSections[section.id] ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
                  </button>
                )}
              </div>

{/* Subheaders */}
              {section.subSections && expandedSections[section.id] && (
                <div className="ml-3 mt-1 space-y-1 border-l border-[#EAF0FC] pl-3">
                  {section.subSections.map((subSection) => (
                    <div
                      key={subSection.id}
                      className={`py-1.5 px-2 rounded-md cursor-pointer text-[14px] ${
                        activeSubSection === subSection.id
                          ? "text-[#004ce6] font-medium"
                          : "text-[#667085] hover:text-[#344054]"
                      }`}
                      onClick={() => onNavigate(section.id, subSection.id)}
                    >
                      {subSection.title}
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/customize-report/page.tsx" isQuickEdit="true" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { useRouter } from "next/navigation"
import Header from "@/components/header"
import ReportIndex from "@/components/report-index"
import { SubsectionHeader } from "@/components/subsection-header"
import { SubsectionContent } from "@/components/subsection-content"
import AddCustomChartModal from "@/components/add-custom-chart-modal"
import { useSections } from "@/hooks/use-sections"
import type { ChartType } from "@/components/add-custom-chart-modal"

// Define variable count categories
type VariableCount = 1 | 2 | 3 | 4 | 5

// Define the structure for report sections
type SubSection = {
  id: string
  title: string
  enabled: boolean
  toggleable: boolean
  customization?: {
    years?: {
      [key: string]: boolean
    }
    showAICommentary?: boolean
    chartOptions?: {
      [key: string]: {
        enabled: boolean
        chartType: ChartType
        variableCount: VariableCount
        name?: string
        elementMappings?: Record<string, string>
        showCAGR?: boolean
      }
    }
    ratios?: {
      selectedRatios: string[]
      years: {
        [key: string]: boolean
      }
    }
    peerComparison?: {
      selectedPeers: string[]
      selectedRatios: string[]
    }
  }
}

// Add ratiosList constant
const ratiosList = [
  "Revenue Growth (YoY)",
  "EBITDA Margin",
  "Return on Equity (ROE)",
  "Debt-to-Equity Ratio",
  "Current Ratio",
  "Quick Ratio",
  "Cash Ratio",
  "Working Capital Ratio",
  "Gross Profit Margin",
  "Operating Profit Margin",
  "Net Profit Margin",
  "Return on Assets",
  "Return on Capital Employed",
  "Debt to Assets",
  "Equity Ratio",
  "Interest Coverage",
  "Asset Turnover",
  "Inventory Turnover",
  "Receivables Turnover",
  "Payables Turnover",
  "Working Capital Turnover",
  "Earnings Per Share",
  "Book Value Per Share",
  "Price to Earnings Ratio",
]

type Section = {
  id: string
  title: string
  isHeader: boolean
  subSections?: SubSection[]
}

/**
 * Main page component for customizing reports
 */
export default function CustomizeReport() {
  const router = useRouter()
  const containerRef = useRef<HTMLDivElement>(null)
  const [containerHeight, setContainerHeight] = useState<number>(0)
  const [isGenerating, setIsGenerating] = useState(false)

// Custom chart modal state
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [currentSectionId, setCurrentSectionId] = useState<string>("")
  const [currentSubSectionId, setCurrentSubSectionId] = useState<string>("")

// Active section tracking
  const [activeSection, setActiveSection] = useState<string | null>(null)
  const [activeSubSection, setActiveSubSection] = useState<string | null>(null)

// Use the sections hook
  const {
    sections,
    toggleSubSection,
    toggleYear,
    setChartType,
    toggleChartOption,
    addCustomChart,
    toggleAICommentary,
    toggleRatio,
    togglePeer,
    togglePeerComparisonRatio,
    editSubsectionTitle,
  } = useSections()

// Calculate available height for the scrollable container
  useEffect(() => {
    const calculateHeight = () => {
      if (containerRef.current) {
        const headerHeight = 80 // Approximate height of header area including margin
        const windowHeight = window.innerHeight
        setContainerHeight(windowHeight - headerHeight)
      }
    }

calculateHeight()
    window.addEventListener("resize", calculateHeight)

return () => {
      window.removeEventListener("resize", calculateHeight)
    }
  }, [])

// Track active section based on scroll position
  const handleScroll = () => {
    // Get all section and subsection elements
    const sectionElements = sections.map((section) => ({
      id: section.id,
      element: document.getElementById(section.id),
      subSections:
        section.subSections?.map((subSection) => ({
          id: subSection.id,
          element: document.getElementById(subSection.id),
        })) || [],
    }))

// Find the section or subsection that is currently in view
    let activeElement = null
    let activeSubElement = null

// Check if any subsection is in view
    for (const section of sectionElements) {
      for (const subSection of section.subSections) {
        if (subSection.element) {
          const rect = subSection.element.getBoundingClientRect()
          if (rect.top <= 150 && rect.bottom >= 150) {
            activeElement = section.id
            activeSubElement = subSection.id
            break
          }
        }
      }
      if (activeSubElement) break
    }

// If no subsection is in view, check if any section is in view
    if (!activeSubElement) {
      for (const section of sectionElements) {
        if (section.element) {
          const rect = section.element.getBoundingClientRect()
          if (rect.top <= 150 && rect.bottom >= 150) {
            activeElement = section.id
            break
          }
        }
      }
    }

// Update active section and subsection
    setActiveSection(activeElement)
    setActiveSubSection(activeSubElement)
  }

useEffect(() => {
    // Add scroll event listener
    const contentContainer = containerRef.current
    if (contentContainer) {
      contentContainer.addEventListener("scroll", handleScroll)
      // Initial check
      handleScroll()
    }

return () => {
      if (contentContainer) {
        contentContainer.removeEventListener("scroll", handleScroll)
      }
    }
  }, [sections])

// Open the custom chart modal
  const openCustomChartModal = (sectionId: string, subSectionId: string) => {
    setCurrentSectionId(sectionId)
    setCurrentSubSectionId(subSectionId)
    setIsModalOpen(true)
  }

// Handle custom chart addition
  const handleAddCustomChart = (chartData: any) => {
    addCustomChart(chartData, currentSectionId, currentSubSectionId)
    setIsModalOpen(false)
  }

// Handle navigation from the index
  const handleIndexNavigation = (sectionId: string, subSectionId?: string) => {
    setActiveSection(sectionId)
    setActiveSubSection(subSectionId || null)

// Find the element to scroll to
    const targetId = subSectionId || sectionId
    const element = document.getElementById(targetId)

if (element) {
      // Smooth scroll to the element
      element.scrollIntoView({ behavior: "smooth", block: "start" })
    }
  }

// Handle report generation
  const handleGenerateReport = () => {
    setIsGenerating(true)
    // Simulate report generation
    setTimeout(() => {
      setIsGenerating(false)
      // Here you would typically redirect to the generated report
      alert("Report generated successfully!")
    }, 2000)
  }

return (
    <main className="min-h-screen bg-[#fafcff] flex flex-col h-full">
      <div className="fixed inset-0 bg-[#fafcff] -z-10"></div>
      <Header />

<div className="container mx-auto px-4 pb-6 h-full" style={{ height: `calc(100vh - 80px)` }}>
        <div className="flex w-full">
          {/* Left sidebar with index */}
          <div className="w-64 flex-shrink-0 sticky top-[80px] self-start h-[calc(100vh-80px)]">
            <ReportIndex
              sections={sections}
              onNavigate={handleIndexNavigation}
              activeSection={activeSection}
              activeSubSection={activeSubSection}
            />
          </div>

{/* Main content - centered in the remaining space */}
          <div className="flex-1 flex justify-center">
            <div
              className="w-[700px] overflow-y-auto scrollbar-hide pb-20 px-4"
              ref={containerRef}
              style={{
                height: `${containerHeight}px`,
                scrollbarWidth: "none", // Firefox
                msOverflowStyle: "none", // IE/Edge
                position: "relative", // Ensure proper stacking context
              }}
            >
              <div className="mx-auto">
                {sections.map((section) => (
                  <div key={section.id} className="mb-8 last:mb-0" id={section.id}>
                    {section.isHeader && (
                      <h2 className="text-[#001742] text-2xl font-medium text-center mb-6">{section.title}</h2>
                    )}

{section.subSections && section.subSections.length > 0 && (
                      <div className="space-y-3">
                        {section.subSections.map((subSection) => (
                          <div
                            key={subSection.id}
                            className="bg-white rounded-[8px] border border-[#EAF0FC]"
                            id={subSection.id}
                          >
                            {/* Subsection Header */}
                            <SubsectionHeader
                              title={subSection.title}
                              enabled={subSection.enabled}
                              toggleable={subSection.toggleable}
                              onToggle={() => toggleSubSection(section.id, subSection.id)}
                              onEdit={(newTitle) => editSubsectionTitle(section.id, subSection.id, newTitle)}
                            />

{/* Subsection Content */}
                            {subSection.enabled && (
                              <SubsectionContent
                                section={section}
                                subSection={subSection}
                                onToggleYear={toggleYear}
                                onToggleAICommentary={toggleAICommentary}
                                onToggleChartOption={toggleChartOption}
                                onSetChartType={setChartType}
                                onOpenCustomChartModal={openCustomChartModal}
                                onToggleRatio={toggleRatio}
                                onTogglePeer={togglePeer}
                                onTogglePeerComparisonRatio={togglePeerComparisonRatio}
                              />
                            )}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Floating Buttons */}
      <div className="fixed bottom-6 left-0 right-0 flex justify-center pointer-events-none">
        <div className="pointer-events-auto flex gap-3 bg-transparent">
          <button
            onClick={() => router.push("/")}
            className="border border-[#d0d5dd] bg-white text-[#344054] px-6 py-2.5 rounded-lg hover:bg-[#f9fafb] transition-colors flex items-center justify-center"
          >
            Back
          </button>
          <button
            onClick={handleGenerateReport}
            disabled={isGenerating}
            className={`bg-[#004ce6] text-white px-6 py-2.5 rounded-lg hover:bg-[#003db8] transition-colors flex items-center justify-center min-w-[180px] ${
              isGenerating ? "opacity-70 cursor-not-allowed" : ""
            }`}
          >
            {isGenerating ? (
              <>
                <svg
                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path
                    className="opacity-75"
                    fill="currentColor"
                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                  ></path>
                </svg>
                Generating...
              </>
            ) : (
              "Generate Report"
            )}
          </button>
        </div>
      </div>

{/* Custom Chart Modal */}
      <AddCustomChartModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        onAddChart={handleAddCustomChart}
        sectionId={currentSectionId}
        subSectionId={currentSubSectionId}
      />
    </main>
  )
}

[V0_FILE]typescriptreact:file="components/ui/search-dropdown.tsx" isQuickEdit="true" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Checkbox } from "@/components/ui/checkbox"
import { useRatioStore } from "@/store/ratio-store"

interface SearchDropdownProps {
  items: string[]
  selectedItems: string[]
  onToggleItem: (item: string) => void
  placeholder: string
  maxItems?: number
  className?: string
  useRatioStore?: boolean
}

/**
 * Reusable search dropdown component with checkbox selection
 */
export function SearchDropdown({
  items,
  selectedItems,
  onToggleItem,
  placeholder,
  maxItems = Number.POSITIVE_INFINITY,
  className = "",
  useRatioStore: useRatioStoreFlag = false,
}: SearchDropdownProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)

// Get all ratios from store if useRatioStore is true
  const getAllRatios = useRatioStore((state) => state.getAllRatios)
  const displayItems = useRatioStoreFlag ? getAllRatios() : items

// Filter items based on search query
  const filteredItems = displayItems.filter((item) => item.toLowerCase().includes(searchQuery.toLowerCase()))

// Handle click outside to close dropdown
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsDropdownOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [])

// Remove a selected item
  const removeItem = (item: string, e: React.MouseEvent) => {
    e.stopPropagation()
    onToggleItem(item)
  }

return (
    <div ref={dropdownRef} className={`relative ${className}`}>
      {/* Search input */}
      <div className="relative mb-3">
        <input
          type="text"
          placeholder={placeholder}
          className="w-full p-2.5 border border-[#EAF0FC] rounded-lg text-[#667085] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6]"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          onFocus={() => setIsDropdownOpen(true)}
        />

{/* Selected items tags */}
        <div className="flex flex-wrap gap-2 mt-2">
          {selectedItems.map((item) => (
            <div
              key={item}
              className="flex items-center gap-2 bg-[#F2F6FE] text-[#344054] px-3 py-1.5 rounded-lg text-sm font-medium"
            >
              <span>{item}</span>
              <button onClick={(e) => removeItem(item, e)} className="hover:text-[#344054] text-lg leading-none">
                ×
              </button>
            </div>
          ))}
        </div>

{/* Dropdown */}
        {isDropdownOpen && (
          <div className="absolute z-10 w-full mt-1 bg-white border border-[#EAF0FC] rounded-lg shadow-sm max-h-[300px] overflow-y-auto scrollbar-hide">
            {filteredItems.length > 0 ? (
              filteredItems.map((item) => {
                const isSelected = selectedItems.includes(item)
                const isDisabled = selectedItems.length >= maxItems && !isSelected

return (
                  <div
                    key={item}
                    className={`flex items-center p-2.5 hover:bg-[#eaf0fc] cursor-pointer ${
                      isDisabled ? "opacity-50" : ""
                    }`}
                    onClick={(e) => {
                      e.stopPropagation()
                      if (!isDisabled) onToggleItem(item)
                    }}
                  >
                    <Checkbox
                      id={`item_${item}`}
                      checked={isSelected}
                      onCheckedChange={() => !isDisabled && onToggleItem(item)}
                      disabled={isDisabled}
                      className="data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6] mr-2"
                    />
                    <label
                      htmlFor={`item_${item}`}
                      className={`text-[#101828] cursor-pointer ${isDisabled ? "cursor-not-allowed" : ""}`}
                    >
                      {item}
                    </label>
                  </div>
                )
              })
            ) : (
              <div className="p-2.5 text-[#667085]">No items found</div>
            )}
          </div>
        )}
      </div>

{selectedItems.length >= maxItems && maxItems !== Number.POSITIVE_INFINITY && (
        <p className="text-xs text-[#667085] mt-1">Maximum of {maxItems} items reached</p>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/view-all-ratios-modal.tsx" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useEffect, useRef } from "react"
import { X, Search, Plus } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { RATIO_CATEGORIES } from "@/constants/ratio-categories"
import { useRatioStore, type CustomMetric } from "@/store/ratio-store"
import { AddCustomMetricPopup } from "@/components/add-custom-metric-popup"

interface ViewAllRatiosModalProps {
  isOpen: boolean
  onClose: () => void
  selectedRatios: string[]
  onToggleRatio?: (ratio: string) => void
}

/**
 * Modal component for viewing and selecting ratios categorized by type
 */
export function ViewAllRatiosModal({ isOpen, onClose, selectedRatios, onToggleRatio }: ViewAllRatiosModalProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const modalRef = useRef<HTMLDivElement>(null)
  const [tempSelectedRatios, setTempSelectedRatios] = useState<string[]>([])
  const [isAddMetricPopupOpen, setIsAddMetricPopupOpen] = useState(false)

// Get ratios from store
  const standardRatios = useRatioStore((state) => state.standardRatios)
  const customMetrics = useRatioStore((state) => state.customMetrics)
  const getAllRatios = useRatioStore((state) => state.getAllRatios)

// Initialize temporary selection with current selection
  useEffect(() => {
    setTempSelectedRatios([...selectedRatios])
  }, [selectedRatios, isOpen])

// Handle click outside to close modal
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
        onClose()
      }
    }

if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside)
    }

return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [isOpen, onClose])

// Handle ratio selection
  const handleToggleRatio = (ratio: string) => {
    if (onToggleRatio) {
      onToggleRatio(ratio)
    } else {
      // Toggle in temporary state for visual feedback
      setTempSelectedRatios((prev) => (prev.includes(ratio) ? prev.filter((r) => r !== ratio) : [...prev, ratio]))
    }
  }

// Remove a selected ratio
  const handleRemoveRatio = (ratio: string, e: React.MouseEvent) => {
    e.stopPropagation()
    if (onToggleRatio) {
      onToggleRatio(ratio)
    } else {
      setTempSelectedRatios((prev) => prev.filter((r) => r !== ratio))
    }
  }

// Filter ratios based on search query
  const filterRatios = (ratios: string[]) => {
    if (!searchQuery) return ratios
    return ratios.filter((ratio) => ratio.toLowerCase().includes(searchQuery.toLowerCase()))
  }

// Filter custom metrics based on search query
  const filterCustomMetrics = (metrics: CustomMetric[]) => {
    if (!searchQuery) return metrics
    return metrics.filter(
      (metric) =>
        metric.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        metric.description.toLowerCase().includes(searchQuery.toLowerCase()),
    )
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div
        ref={modalRef}
        className="bg-white rounded-lg w-full max-w-5xl max-h-[90vh] flex flex-col shadow-lg border border-[#EAF0FC] relative"
      >
        {/* Header */}
        <div className="p-4 border-b border-[#EAF0FC] flex justify-between items-center">
          <h2 className="text-lg font-medium text-[#001742]">All ratios</h2>
          <button onClick={onClose} className="text-[#667085] hover:text-[#344054]">
            <X size={20} />
          </button>
        </div>

{/* Content */}
        <div className="p-4 overflow-y-auto scrollbar-hide">
          {/* Search input */}
          <div className="relative mb-4">
            <input
              type="text"
              placeholder="Search metrics"
              className="w-full p-2.5 pl-10 border border-[#EAF0FC] rounded-lg text-[#667085] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6]"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#667085]" size={18} />
          </div>

{/* Selected ratios */}
          {tempSelectedRatios.length > 0 && (
            <div className="flex flex-wrap gap-2 mb-4">
              {tempSelectedRatios.map((ratio) => (
                <div
                  key={ratio}
                  className="flex items-center gap-2 bg-[#F2F6FE] text-[#344054] px-3 py-1.5 rounded-lg text-sm font-medium"
                >
                  <span>{ratio}</span>
                  <button onClick={(e) => handleRemoveRatio(ratio, e)} className="hover:text-[#344054]">
                    <X size={14} />
                  </button>
                </div>
              ))}
            </div>
          )}

{/* Ratio categories */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {Object.entries(RATIO_CATEGORIES).map(([categoryKey, category]) => {
              let ratiosToDisplay: string[] = []
              let hasAddButton = false

if (categoryKey === "operatingMetrics") {
                // For operating metrics, display custom metrics
                ratiosToDisplay = customMetrics.map((metric) => metric.name)
                hasAddButton = true
              } else {
                // For standard categories, display standard ratios
                ratiosToDisplay = filterRatios(standardRatios[categoryKey] || [])
              }

if (ratiosToDisplay.length === 0 && searchQuery && !hasAddButton) return null

const filteredRatios = filterRatios(standardRatios[categoryKey] || [])

return (
                <div key={categoryKey} className="border border-[#EAF0FC] rounded-lg p-4 relative">
                  <h3 className="text-[#344054] font-medium mb-3">{category.title}</h3>
                  {categoryKey === "operatingMetrics" ? (
                    <>
                      <div className="space-y-3 max-h-[200px] overflow-y-auto scrollbar-hide">
                        {customMetrics.length > 0 ? (
                          customMetrics
                            .filter(
                              (metric) =>
                                !searchQuery ||
                                metric.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
                                metric.description.toLowerCase().includes(searchQuery.toLowerCase()),
                            )
                            .map((metric) => {
                              const isSelected = tempSelectedRatios.includes(metric.name)
                              return (
                                <div key={metric.id} className="flex items-start space-x-2 group">
                                  <Checkbox
                                    id={`metric_${metric.id}`}
                                    checked={isSelected}
                                    onCheckedChange={() => handleToggleRatio(metric.name)}
                                    className={`data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6] mt-1 ${
                                      isSelected ? "ring-1 ring-[#004ce6]" : ""
                                    }`}
                                  />
                                  <div className="flex-1">
                                    <div className="flex items-center">
                                      <label
                                        htmlFor={`metric_${metric.id}`}
                                        className={`text-[#101828] cursor-pointer ${isSelected ? "font-medium" : ""}`}
                                      >
                                        {metric.name}
                                      </label>
                                      <button
                                        onClick={(e) => {
                                          e.stopPropagation()
                                          e.preventDefault()

// If the metric is selected, toggle it off first
                                          if (isSelected) {
                                            handleToggleRatio(metric.name)
                                          }

// Then remove the metric
                                          useRatioStore.getState().removeCustomMetric(metric.id)
                                        }}
                                        className="ml-2 text-[#667085] hover:text-[#344054] opacity-0 group-hover:opacity-100 transition-opacity"
                                        aria-label="Remove metric"
                                      >
                                        <X size={14} />
                                      </button>
                                    </div>
                                    {metric.description && (
                                      <p className="text-xs text-[#667085] mt-1">{metric.description}</p>
                                    )}
                                  </div>
                                </div>
                              )
                            })
                        ) : (
                          <div className="text-[#667085] text-sm">No custom metrics added yet</div>
                        )}
                      </div>
                      <div className="sticky bottom-0 bg-white pt-2 border-t border-[#EAF0FC] mt-2">
                        <button
                          onClick={() => setIsAddMetricPopupOpen(true)}
                          className="flex items-center justify-center w-full py-2 text-[#004ce6] hover:bg-[#F2F6FE] rounded-md transition-colors"
                        >
                          <Plus size={16} className="mr-1" />
                          <span>Add metric</span>
                        </button>
                      </div>
                    </>
                  ) : (
                    <div className="space-y-3 max-h-[200px] overflow-y-auto scrollbar-hide">
                      {filteredRatios.map((ratio) => {
                        const isSelected = tempSelectedRatios.includes(ratio)
                        return (
                          <div key={ratio} className="flex items-center space-x-2">
                            <Checkbox
                              id={`ratio_${categoryKey}_${ratio}`}
                              checked={isSelected}
                              onCheckedChange={() => handleToggleRatio(ratio)}
                              className={`data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6] ${
                                isSelected ? "ring-1 ring-[#004ce6]" : ""
                              }`}
                            />
                            <label
                              htmlFor={`ratio_${categoryKey}_${ratio}`}
                              className="text-[#101828] cursor-pointer font-normal"
                            >
                              {ratio}
                            </label>
                          </div>
                        )
                      })}
                    </div>
                  )}
                </div>
              )
            })}
          </div>
        </div>

{/* Add Custom Metric Popup */}
        {isAddMetricPopupOpen && (
          <AddCustomMetricPopup
            onClose={() => setIsAddMetricPopupOpen(false)}
            onAddMetric={(name, description) => {
              useRatioStore.getState().addCustomMetric(name, description)
              setIsAddMetricPopupOpen(false)
            }}
          />
        )}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/add-custom-metric-popup.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState, useRef, useEffect } from "react"
import { X } from "lucide-react"

interface AddCustomMetricPopupProps {
  onClose: () => void
  onAddMetric: (name: string, description: string) => void
}

export function AddCustomMetricPopup({ onClose, onAddMetric }: AddCustomMetricPopupProps) {
  const [metricName, setMetricName] = useState("")
  const [metricDescription, setMetricDescription] = useState("")
  const nameInputRef = useRef<HTMLInputElement>(null)
  const popupRef = useRef<HTMLDivElement>(null)

// Focus on name input when popup opens
  useEffect(() => {
    if (nameInputRef.current) {
      nameInputRef.current.focus()
    }
  }, [])

// Handle click outside to close popup
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
        onClose()
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [onClose])

// Handle key press
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSubmit()
    } else if (e.key === "Escape") {
      onClose()
    }
  }

const handleSubmit = () => {
    if (metricName.trim() === "") return
    onAddMetric(metricName.trim(), metricDescription.trim())
  }

return (
    <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-[60]">
      <div ref={popupRef} className="bg-white rounded-lg shadow-lg w-full max-w-md overflow-hidden">
        <div className="h-1 w-full bg-[#004ce6]"></div>
        <div className="p-5">
          <div className="flex justify-between items-center mb-4">
            <h3 className="text-[#344054] font-medium text-lg">Add custom metric</h3>
            <button onClick={onClose} className="text-[#667085] hover:text-[#344054]">
              <X size={18} />
            </button>
          </div>

<div className="space-y-4">
            <div>
              <label htmlFor="metric-name" className="block text-sm text-[#344054] mb-1">
                Metric name
              </label>
              <input
                ref={nameInputRef}
                id="metric-name"
                type="text"
                value={metricName}
                onChange={(e) => setMetricName(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder="Enter metric name"
                className="w-full p-2.5 border border-[#EAF0FC] rounded-lg text-[#101828] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6]"
              />
            </div>

<div>
              <div className="flex items-center mb-1">
                <label htmlFor="metric-description" className="block text-sm text-[#344054]">
                  AI description
                </label>
                <div className="relative ml-1 group">
                  <span className="text-[#667085] cursor-help">?</span>
                  <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 p-2 bg-white border border-[#EAF0FC] rounded shadow-lg text-xs text-[#344054] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-opacity">
                    This description helps AI understand the metric for generating insights.
                  </div>
                </div>
              </div>
              <textarea
                id="metric-description"
                value={metricDescription}
                onChange={(e) => setMetricDescription(e.target.value)}
                onKeyDown={(e) => e.key === "Escape" && onClose()}
                placeholder="Describe how this metric is calculated and what it measures"
                className="w-full p-2.5 border border-[#EAF0FC] rounded-lg text-[#101828] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6] min-h-[80px]"
              />
            </div>

<div className="flex justify-end gap-3 mt-6">
              <button
                onClick={onClose}
                className="px-4 py-2 border border-[#EAF0FC] rounded-lg text-[#344054] text-sm font-medium hover:bg-[#F2F6FE] transition-colors"
              >
                Cancel
              </button>
              <button
                onClick={handleSubmit}
                disabled={!metricName.trim()}
                className={`px-4 py-2 bg-[#004ce6] text-white rounded-lg text-sm font-medium transition-colors ${
                  !metricName.trim() ? "opacity-50 cursor-not-allowed" : "hover:bg-[#003db8]"
                }`}
              >
                Add metric
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/view-all-peers-button.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { ViewAllPeersModal } from "@/components/view-all-peers-modal"

interface ViewAllPeersButtonProps {
  selectedPeers: string[]
  onTogglePeer?: (peer: string) => void
}

/**
 * Button component that opens the View All Peers modal
 */
export function ViewAllPeersButton({ selectedPeers, onTogglePeer }: ViewAllPeersButtonProps) {
  const [isModalOpen, setIsModalOpen] = useState(false)

return (
    <>
      <button
        onClick={() => setIsModalOpen(true)}
        className="text-[#004ce6] text-sm font-medium hover:text-[#003db8] transition-colors"
      >
        View all peers
      </button>

<ViewAllPeersModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        selectedPeers={selectedPeers}
        onTogglePeer={onTogglePeer}
      />
    </>
  )
}

[V0_FILE]typescriptreact:file="components/view-all-peers-modal.tsx" isFixed="true" isQuickEdit="true" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { X, Search, ChevronDown, ChevronUp, Plus, Check } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"

// Industry options
const industryOptions = [
  "Pharmaceuticals",
  "Biotechnology",
  "Healthcare",
  "Medical Devices",
  "Life Sciences",
  "Generic Drugs",
  "Specialty Pharmaceuticals",
]

// Geography options
const geographyOptions = ["India", "United States", "Europe", "Asia Pacific", "Middle East", "Latin America", "Africa"]

// Enhanced peer data with more companies and varied revenue/market cap values
const peerCompanies = [
  {
    id: "aarti",
    name: "Aarti Drugs",
    logo: "A",
    isPublic: true,
    isPrimary: true, // Primary company flag
    revenue: 550,
    marketCap: 650,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "nugen",
    name: "Nugen Pharma",
    logo: "N",
    isPublic: true,
    isPrimary: false,
    revenue: 512,
    marketCap: 680,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "sun",
    name: "Sun Pharma",
    logo: "S",
    isPublic: true,
    isPrimary: false,
    revenue: 625,
    marketCap: 720,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "cipla",
    name: "Cipla",
    logo: "C",
    isPublic: true,
    isPrimary: false,
    revenue: 498,
    marketCap: 610,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "drreddy",
    name: "Dr. Reddys",
    logo: "D",
    isPublic: true,
    isPrimary: false,
    revenue: 580,
    marketCap: 650,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "lupin",
    name: "Lupin",
    logo: "L",
    isPublic: true,
    isPrimary: false,
    revenue: 470,
    marketCap: 520,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "glenmark",
    name: "Glenmark",
    logo: "G",
    isPublic: true,
    isPrimary: false,
    revenue: 430,
    marketCap: 480,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "biocon",
    name: "Biocon",
    logo: "B",
    isPublic: true,
    isPrimary: false,
    revenue: 450,
    marketCap: 510,
    industry: "Biotechnology",
    geography: "India",
  },
  {
    id: "aurobindo",
    name: "Aurobindo Pharma",
    logo: "A",
    isPublic: true,
    isPrimary: false,
    revenue: 540,
    marketCap: 590,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "torrent",
    name: "Torrent Pharmaceuticals",
    logo: "T",
    isPublic: true,
    isPrimary: false,
    revenue: 460,
    marketCap: 530,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "jubilant",
    name: "Jubilant Life Sciences",
    logo: "J",
    isPublic: true,
    isPrimary: false,
    revenue: 420,
    marketCap: 470,
    industry: "Life Sciences",
    geography: "India",
  },
  {
    id: "strides",
    name: "Strides Pharma Science",
    logo: "S",
    isPublic: true,
    isPrimary: false,
    revenue: 410,
    marketCap: 450,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "laurus",
    name: "Laurus Labs",
    logo: "L",
    isPublic: true,
    isPrimary: false,
    revenue: 400,
    marketCap: 440,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "granules",
    name: "Granules India",
    logo: "G",
    isPublic: true,
    isPrimary: false,
    revenue: 390,
    marketCap: 430,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "divis",
    name: "Divi's Laboratories",
    logo: "D",
    isPublic: true,
    isPrimary: false,
    revenue: 620,
    marketCap: 700,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "pfizer",
    name: "Pfizer India",
    logo: "P",
    isPublic: true,
    isPrimary: false,
    revenue: 780,
    marketCap: 850,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "abbottindia",
    name: "Abbott India",
    logo: "A",
    isPublic: true,
    isPrimary: false,
    revenue: 650,
    marketCap: 720,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "gsk",
    name: "GSK Pharmaceuticals",
    logo: "G",
    isPublic: true,
    isPrimary: false,
    revenue: 590,
    marketCap: 670,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "novartis",
    name: "Novartis India",
    logo: "N",
    isPublic: true,
    isPrimary: false,
    revenue: 520,
    marketCap: 600,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "alkem",
    name: "Alkem Laboratories",
    logo: "A",
    isPublic: true,
    isPrimary: false,
    revenue: 480,
    marketCap: 550,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "ipca",
    name: "Ipca Laboratories",
    logo: "I",
    isPublic: true,
    isPrimary: false,
    revenue: 440,
    marketCap: 510,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "ajanta",
    name: "Ajanta Pharma",
    logo: "A",
    isPublic: false,
    isPrimary: false,
    revenue: 380,
    marketCap: 450,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "natco",
    name: "Natco Pharma",
    logo: "N",
    isPublic: false,
    isPrimary: false,
    revenue: 350,
    marketCap: 420,
    industry: "Pharmaceuticals",
    geography: "India",
  },
  {
    id: "wockhardt",
    name: "Wockhardt",
    logo: "W",
    isPublic: false,
    isPrimary: false,
    revenue: 320,
    marketCap: 380,
    industry: "Pharmaceuticals",
    geography: "United States",
  },
  {
    id: "jbchem",
    name: "JB Chemicals",
    logo: "J",
    isPublic: false,
    isPrimary: false,
    revenue: 300,
    marketCap: 360,
    industry: "Pharmaceuticals",
    geography: "United States",
  },
]

// Company details data
const companyDetails = {
  aarti: {
    name: "Aarti Drugs",
    logo: "A",
    relevanceSummary:
      "Aarti Drugs is a leading pharmaceutical company specializing in Active Pharmaceutical Ingredients (APIs) and pharmaceutical formulations. The company has a strong presence in the Indian market and exports to over 100 countries worldwide.",
    criteriaEvaluation:
      "This is the primary company for the report and serves as the reference point for peer comparison.",
    basicInfo: "Founded: 1984\nHeadquarters: Mumbai, India\nEmployees: 2,500+\nCEO: Adhish Patil",
    specialities:
      "Active Pharmaceutical Ingredients (APIs), Pharmaceutical Formulations, Custom Synthesis, Contract Manufacturing",
  },
  nugen: {
    name: "Nugen Pharma",
    logo: "N",
    relevanceSummary:
      "Nugen Pharma is a leading pharmaceutical company specializing in generic medications and innovative drug delivery systems. With a strong presence in emerging markets, Nugen focuses on affordable healthcare solutions.",
    criteriaEvaluation:
      "Matches 85% of search criteria with similar revenue range, market capitalization, and product portfolio.",
    basicInfo: "Founded: 1995\nHeadquarters: Mumbai, India\nEmployees: 12,000+\nCEO: Rajiv Mehta",
    specialities:
      "Generic pharmaceuticals, Biosimilars, Active Pharmaceutical Ingredients (APIs), Contract Manufacturing",
  },
  sun: {
    name: "Sun Pharma",
    logo: "S",
    relevanceSummary:
      "Sun Pharma is the world's fourth-largest speciality generic pharmaceutical company and No. 1 in India. We provide high-quality, affordable medicines trusted by customers and patients in over 100 countries. Sun Pharma's global presence is supported by more than 40 manufacturing facilities spread across 5 continents, R&D centres across the globe, and a multicultural workforce comprising over 50 nationalities. Sun Pharma fosters excellence through innovation supported by strong R&D capabilities comprising around 3,000 scientists and R&D investments of over 6-8% of annual revenues.",
    criteriaEvaluation:
      "Matches 92% of search criteria with similar revenue range, market capitalization, and product portfolio.",
    basicInfo: "Founded: 1983\nHeadquarters: Mumbai, India\nEmployees: 32,000+\nCEO: Dilip Shanghvi",
    specialities:
      "Specialty pharmaceuticals, Generic medications, Over-the-counter products, Active Pharmaceutical Ingredients",
  },
  cipla: {
    name: "Cipla",
    logo: "C",
    relevanceSummary:
      "Cipla is a global pharmaceutical company focused on agile and sustainable growth, complex generics, and deepening portfolio in India, South Africa, North America, and key regulated and emerging markets.",
    criteriaEvaluation:
      "Matches 88% of search criteria with similar revenue range, market capitalization, and product portfolio.",
    basicInfo: "Founded: 1935\nHeadquarters: Mumbai, India\nEmployees: 25,000+\nCEO: Umang Vohra",
    specialities: "Respiratory, HIV/AIDS treatment, Cardiovascular disease, Arthritis, Diabetes, Weight control",
  },
  drreddy: {
    name: "Dr. Reddys",
    logo: "D",
    relevanceSummary:
      "Dr. Reddy's Laboratories is an integrated pharmaceutical company committed to providing affordable and innovative medicines through its three core businesses: Pharmaceutical Services & Active Ingredients, Global Generics and Proprietary Products.",
    criteriaEvaluation:
      "Matches 90% of search criteria with similar revenue range, market capitalization, and product portfolio.",
    basicInfo: "Founded: 1984\nHeadquarters: Hyderabad, India\nEmployees: 22,000+\nCEO: G V Prasad",
    specialities: "Generic medications, Biosimilars, Custom Pharmaceutical Services, Active ingredients",
  },
  lupin: {
    name: "Lupin",
    logo: "L",
    relevanceSummary:
      "Lupin is a transnational pharmaceutical company based in Mumbai, India. It is one of the largest generic pharmaceutical companies by revenue globally.",
    criteriaEvaluation: "Matches 87% of search criteria with similar revenue range and product portfolio.",
    basicInfo: "Founded: 1968\nHeadquarters: Mumbai, India\nEmployees: 18,000+\nCEO: Vinita Gupta",
    specialities: "Cardiovascular, Diabetology, Asthma, Pediatrics, CNS, GI, Anti-Infectives",
  },
  glenmark: {
    name: "Glenmark",
    logo: "G",
    relevanceSummary:
      "Glenmark Pharmaceuticals is a global research-led pharmaceutical company with a presence across Specialty, Generics and OTC businesses with operations in over 50 countries.",
    criteriaEvaluation: "Matches 82% of search criteria with similar market focus and therapeutic areas.",
    basicInfo: "Founded: 1977\nHeadquarters: Mumbai, India\nEmployees: 14,000+\nCEO: Glenn Saldanha",
    specialities: "Dermatology, Respiratory, Oncology, Cardiology, Diabetes",
  },
  biocon: {
    name: "Biocon",
    logo: "B",
    relevanceSummary:
      "Biocon is an innovation-led global biopharmaceuticals company, committed to enhance affordable access to complex therapies for chronic conditions like diabetes, cancer and autoimmune diseases.",
    criteriaEvaluation: "Matches 78% of search criteria with focus on biopharmaceuticals and innovative therapies.",
    basicInfo: "Founded: 1978\nHeadquarters: Bangalore, India\nEmployees: 12,000+\nCEO: Kiran Mazumdar-Shaw",
    specialities: "Biologics, Biosimilars, Novel Molecules, Small Molecules, Branded Formulations",
  },
}

// Define the type for custom search criteria
type CustomCriteria = {
  id: string
  text: string
}

interface ViewAllPeersModalProps {
  isOpen: boolean
  onClose: () => void
  selectedPeers: string[]
  onTogglePeer?: (peer: string) => void
}

export function ViewAllPeersModal({ isOpen, onClose, selectedPeers, onTogglePeer }: ViewAllPeersModalProps) {
  const [searchQuery, setSearchQuery] = useState("")
  const [isPublic, setIsPublic] = useState(true)
  const [isPublicDropdownOpen, setIsPublicDropdownOpen] = useState(false)
  const [activeTab, setActiveTab] = useState<"search" | "details">("search")
  const [selectedCompany, setSelectedCompany] = useState<string>("aarti") // Default to Aarti Drugs
  const [tempSelectedPeers, setTempSelectedPeers] = useState<string[]>([])
  const [selectedIndustry, setSelectedIndustry] = useState<string | null>(null)
  const [isIndustryDropdownOpen, setIsIndustryDropdownOpen] = useState(false)
  const [selectedGeography, setSelectedGeography] = useState<string | null>(null)
  const [isGeographyDropdownOpen, setIsGeographyDropdownOpen] = useState(false)

// Revenue range state with min/max values
  const [revenueRange, setRevenueRange] = useState<[number, number]>([300, 800])
  const [isDraggingRevenueMin, setIsDraggingRevenueMin] = useState(false)
  const [isDraggingRevenueMax, setIsDraggingRevenueMax] = useState(false)

// Market cap range state with min/max values
  const [marketCapRange, setMarketCapRange] = useState<[number, number]>([350, 850])
  const [isDraggingMarketCapMin, setIsDraggingMarketCapMin] = useState(false)
  const [isDraggingMarketCapMax, setIsDraggingMarketCapMax] = useState(false)

// Company details expanded sections
  const [expandedSections, setExpandedSections] = useState({
    relevanceSummary: true,
    criteriaEvaluation: false,
    basicInfo: false,
    specialities: false,
  })

// Custom search criteria
  const [customCriteria, setCustomCriteria] = useState<CustomCriteria[]>([
    { id: "similar-products", text: "Offer similar products as Aarti Drugs" },
  ])
  const [isAddingCriteria, setIsAddingCriteria] = useState(false)
  const [newCriteriaText, setNewCriteriaText] = useState("")

const modalRef = useRef<HTMLDivElement>(null)
  const publicDropdownRef = useRef<HTMLDivElement>(null)
  const industryDropdownRef = useRef<HTMLDivElement>(null)
  const geographyDropdownRef = useRef<HTMLDivElement>(null)
  const revenueSliderRef = useRef<HTMLDivElement>(null)
  const marketCapSliderRef = useRef<HTMLDivElement>(null)
  const newCriteriaInputRef = useRef<HTMLInputElement>(null)

// Initialize temporary selection with current selection
  useEffect(() => {
    setTempSelectedPeers([...selectedPeers])
  }, [selectedPeers, isOpen])

if (isOpen) {
      document.addEventListener("mousedown", handleClickOutside)
    }

return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [isOpen, onClose])

// Handle click outside to close dropdowns
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        publicDropdownRef.current &&
        !publicDropdownRef.current.contains(event.target as Node) &&
        isPublicDropdownOpen
      ) {
        setIsPublicDropdownOpen(false)
      }

if (
        industryDropdownRef.current &&
        !industryDropdownRef.current.contains(event.target as Node) &&
        isIndustryDropdownOpen
      ) {
        setIsIndustryDropdownOpen(false)
      }

if (
        geographyDropdownRef.current &&
        !geographyDropdownRef.current.contains(event.target as Node) &&
        isGeographyDropdownOpen
      ) {
        setIsGeographyDropdownOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [isPublicDropdownOpen, isIndustryDropdownOpen, isGeographyDropdownOpen])

// Focus on new criteria input when adding
  useEffect(() => {
    if (isAddingCriteria && newCriteriaInputRef.current) {
      newCriteriaInputRef.current.focus()
    }
  }, [isAddingCriteria])

// Handle revenue slider drag
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (revenueSliderRef.current && (isDraggingRevenueMin || isDraggingRevenueMax)) {
        const rect = revenueSliderRef.current.getBoundingClientRect()
        const width = rect.width
        const offsetX = e.clientX - rect.left
        const percentage = Math.min(Math.max(offsetX / width, 0), 1)
        const value = Math.round(300 + percentage * 500) // Scale to 300-800 range

if (isDraggingRevenueMin) {
          setRevenueRange([Math.min(value, revenueRange[1] - 50), revenueRange[1]])
        } else if (isDraggingRevenueMax) {
          setRevenueRange([revenueRange[0], Math.max(value, revenueRange[0] + 50)])
        }
      }
    }

const handleMouseUp = () => {
      setIsDraggingRevenueMin(false)
      setIsDraggingRevenueMax(false)
    }

if (isDraggingRevenueMin || isDraggingRevenueMax) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDraggingRevenueMin, isDraggingRevenueMax, revenueRange])

// Handle market cap slider drag
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (marketCapSliderRef.current && (isDraggingMarketCapMin || isDraggingMarketCapMax)) {
        const rect = marketCapSliderRef.current.getBoundingClientRect()
        const width = rect.width
        const offsetX = e.clientX - rect.left
        const percentage = Math.min(Math.max(offsetX / width, 0), 1)
        const value = Math.round(350 + percentage * 500) // Scale to 350-850 range

if (isDraggingMarketCapMin) {
          setMarketCapRange([Math.min(value, marketCapRange[1] - 50), marketCapRange[1]])
        } else if (isDraggingMarketCapMax) {
          setMarketCapRange([marketCapRange[0], Math.max(value, marketCapRange[0] + 50)])
        }
      }
    }

const handleMouseUp = () => {
      setIsDraggingMarketCapMin(false)
      setIsDraggingMarketCapMax(false)
    }

if (isDraggingMarketCapMin || isDraggingMarketCapMax) {
      document.addEventListener("mousemove", handleMouseMove)
      document.addEventListener("mouseup", handleMouseUp)
    }

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.removeEventListener("mouseup", handleMouseUp)
    }
  }, [isDraggingMarketCapMin, isDraggingMarketCapMax, marketCapRange])

// Handle peer selection
  const handleTogglePeer = (peerName: string) => {
    if (onTogglePeer) {
      onTogglePeer(peerName)
    } else {
      // Toggle in temporary state for visual feedback
      setTempSelectedPeers((prev) =>
        prev.includes(peerName) ? prev.filter((p) => p !== peerName) : [...prev, peerName],
      )
    }
  }

// Handle company selection for details view
  const handleSelectCompany = (companyId: string) => {
    setSelectedCompany(companyId)
    setActiveTab("details")
  }

// Toggle section expansion in company details
  const toggleSection = (section: keyof typeof expandedSections) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

// Add new custom criteria
  const handleAddCriteria = () => {
    if (newCriteriaText.trim()) {
      setCustomCriteria((prev) => [...prev, { id: `custom-${Date.now()}`, text: newCriteriaText.trim() }])
      setNewCriteriaText("")
      setIsAddingCriteria(false)
    }
  }

// Remove custom criteria
  const handleRemoveCriteria = (id: string) => {
    setCustomCriteria((prev) => prev.filter((criteria) => criteria.id !== id))
  }

// Cancel adding new criteria
  const handleCancelAddCriteria = () => {
    setNewCriteriaText("")
    setIsAddingCriteria(false)
  }

// Handle key press in new criteria input
  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleAddCriteria()
    } else if (e.key === "Escape") {
      handleCancelAddCriteria()
    }
  }

// Filter companies based on all criteria
  const filteredCompanies = peerCompanies.filter((company) => {
    // Filter by search query
    const matchesSearch = company.name.toLowerCase().includes(searchQuery.toLowerCase())

// Filter by industry if selected
    const matchesIndustry = !selectedIndustry || company.industry === selectedIndustry

// Filter by geography if selected
    const matchesGeography = !selectedGeography || company.geography === selectedGeography

// Filter by revenue range
    const matchesRevenue = company.revenue >= revenueRange[0] && company.revenue <= revenueRange[1]

// Filter by market cap range
    const matchesMarketCap = company.marketCap >= marketCapRange[0] && company.marketCap <= marketCapRange[1]

// Filter by public/private status
    const matchesPublicStatus = company.isPublic === isPublic

return (
      matchesSearch && matchesIndustry && matchesGeography && matchesRevenue && matchesMarketCap && matchesPublicStatus
    )
  })

// Get company details for the selected company
  const getCompanyDetails = (companyId: string) => {
    return companyDetails[companyId as keyof typeof companyDetails] || companyDetails.aarti
  }

const currentCompanyDetails = getCompanyDetails(selectedCompany)

// Format currency values
  const formatCurrency = (value: number) => {
    return `$${value}M`
  }

// Handle search again
  const handleSearchAgain = () => {
    // Reset filters to default values
    setSearchQuery("")
    setSelectedIndustry(null)
    setSelectedGeography(null)
    setRevenueRange([300, 800])
    setMarketCapRange([350, 850])
    setActiveTab("search")
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div
        ref={modalRef}
        className="bg-white rounded-lg w-full max-w-[90vw] max-h-[90vh] flex flex-col shadow-lg border border-[#EAF0FC] overflow-hidden"
      >
        {/* Header */}
        <div className="p-4 border-b border-[#EAF0FC] flex justify-between items-center">
          <h2 className="text-lg font-medium text-[#001742]">All peers</h2>
          <button onClick={onClose} className="text-[#667085] hover:text-[#344054]">
            <X size={20} />
          </button>
        </div>

{/* Content */}
        <div className="flex flex-1 overflow-hidden">
          {/* Left side - Filters and company list */}
          <div className="w-2/3 border-r border-[#EAF0FC] overflow-y-auto p-4 scrollbar-hide">
            {/* Filters - Row 1 */}
            <div className="flex gap-4 mb-4">
              {/* Public/Private Dropdown */}
              <div ref={publicDropdownRef} className="w-1/3">
                <h3 className="text-[#344054] font-medium mb-3">Public or Private</h3>
                <div className="relative">
                  <div
                    className="w-full p-2.5 border border-[#EAF0FC] rounded-lg flex justify-between items-center cursor-pointer"
                    onClick={() => setIsPublicDropdownOpen(!isPublicDropdownOpen)}
                  >
                    <span className="text-[#101828]">{isPublic ? "Public" : "Private"}</span>
                    <ChevronDown className="text-[#667085]" size={20} />
                  </div>

{isPublicDropdownOpen && (
                    <div className="absolute z-10 mt-1 w-full bg-white border border-[#EAF0FC] rounded-lg shadow-sm">
                      <div
                        className="p-2.5 hover:bg-[#eaf0fc] cursor-pointer flex items-center justify-between"
                        onClick={() => {
                          setIsPublic(true)
                          setIsPublicDropdownOpen(false)
                        }}
                      >
                        <span className="text-[#101828]">Public</span>
                        {isPublic && <Check size={16} className="text-[#004ce6]" />}
                      </div>
                      <div
                        className="p-2.5 hover:bg-[#eaf0fc] cursor-pointer flex items-center justify-between"
                        onClick={() => {
                          setIsPublic(false)
                          setIsPublicDropdownOpen(false)
                        }}
                      >
                        <span className="text-[#101828]">Private</span>
                        {!isPublic && <Check size={16} className="text-[#004ce6]" />}
                      </div>
                    </div>
                  )}
                </div>
              </div>

{/* Industry Dropdown */}
              <div ref={industryDropdownRef} className="w-1/3">
                <h3 className="text-[#344054] font-medium mb-3">Industry</h3>
                <div className="relative">
                  <div
                    className="w-full p-2.5 border border-[#EAF0FC] rounded-lg flex justify-between items-center cursor-pointer"
                    onClick={() => setIsIndustryDropdownOpen(!isIndustryDropdownOpen)}
                  >
                    <span className={selectedIndustry ? "text-[#101828]" : "text-[#667085]"}>
                      {selectedIndustry || "Select industry"}
                    </span>
                    <ChevronDown className="text-[#667085]" size={20} />
                  </div>

{isIndustryDropdownOpen && (
                    <div className="absolute z-10 mt-1 w-full bg-white border border-[#EAF0FC] rounded-lg shadow-sm max-h-[200px] overflow-y-auto scrollbar-hide">
                      {industryOptions.map((industry) => (
                        <div
                          key={industry}
                          className="p-2.5 hover:bg-[#eaf0fc] cursor-pointer flex items-center justify-between"
                          onClick={() => {
                            setSelectedIndustry(industry)
                            setIsIndustryDropdownOpen(false)
                          }}
                        >
                          <span className="text-[#101828]">{industry}</span>
                          {selectedIndustry === industry && <Check size={16} className="text-[#004ce6]" />}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>

{/* Geography Dropdown */}
              <div ref={geographyDropdownRef} className="w-1/3">
                <h3 className="text-[#344054] font-medium mb-3">Geography</h3>
                <div className="relative">
                  <div
                    className="w-full p-2.5 border border-[#EAF0FC] rounded-lg flex justify-between items-center cursor-pointer"
                    onClick={() => setIsGeographyDropdownOpen(!isGeographyDropdownOpen)}
                  >
                    <span className={selectedGeography ? "text-[#101828]" : "text-[#667085]"}>
                      {selectedGeography || "Select geography"}
                    </span>
                    <ChevronDown className="text-[#667085]" size={20} />
                  </div>

{isGeographyDropdownOpen && (
                    <div className="absolute z-10 mt-1 w-full bg-white border border-[#EAF0FC] rounded-lg shadow-sm max-h-[200px] overflow-y-auto scrollbar-hide">
                      {geographyOptions.map((geography) => (
                        <div
                          key={geography}
                          className="p-2.5 hover:bg-[#eaf0fc] cursor-pointer flex items-center justify-between"
                          onClick={() => {
                            setSelectedGeography(geography)
                            setIsGeographyDropdownOpen(false)
                          }}
                        >
                          <span className="text-[#101828]">{geography}</span>
                          {selectedGeography === geography && <Check size={16} className="text-[#004ce6]" />}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>

{/* Filters - Row 2 */}
            <div className="flex gap-4 mb-6">
              {/* Revenue Range Slider */}
              <div className="w-1/2">
                <h3 className="text-[#344054] font-medium mb-3">Revenue range</h3>
                <div className="bg-[#F2F6FE] p-4 rounded-lg relative">
                  <div className="flex justify-between text-sm text-[#667085] mb-2">
                    <span>{formatCurrency(revenueRange[0])}</span>
                    <span>{formatCurrency(revenueRange[1])}</span>
                  </div>
                  <div ref={revenueSliderRef} className="h-1 bg-[#EAF0FC] rounded-full relative">
                    <div
                      className="absolute left-0 right-0 h-1 bg-[#004ce6] rounded-full"
                      style={{
                        left: `${((revenueRange[0] - 300) / 500) * 100}%`,
                        right: `${100 - ((revenueRange[1] - 300) / 500) * 100}%`,
                      }}
                    ></div>
                    <div
                      className="absolute w-4 h-4 bg-[#004ce6] rounded-full border-2 border-white shadow-md cursor-pointer"
                      style={{
                        left: `${((revenueRange[0] - 300) / 500) * 100}%`,
                        top: "-6px",
                      }}
                      onMouseDown={() => setIsDraggingRevenueMin(true)}
                    ></div>
                    <div
                      className="absolute w-4 h-4 bg-[#004ce6] rounded-full border-2 border-white shadow-md cursor-pointer"
                      style={{
                        left: `${((revenueRange[1] - 300) / 500) * 100}%`,
                        top: "-6px",
                      }}
                      onMouseDown={() => setIsDraggingRevenueMax(true)}
                    ></div>
                  </div>
                </div>
              </div>

{/* Market Capitalization Slider */}
              <div className="w-1/2">
                <h3 className="text-[#344054] font-medium mb-3">Market capitalization</h3>
                <div className="bg-[#F2F6FE] p-4 rounded-lg relative">
                  <div className="flex justify-between text-sm text-[#667085] mb-2">
                    <span>{formatCurrency(marketCapRange[0])}</span>
                    <span>{formatCurrency(marketCapRange[1])}</span>
                  </div>
                  <div ref={marketCapSliderRef} className="h-1 bg-[#EAF0FC] rounded-full relative">
                    <div
                      className="absolute left-0 right-0 h-1 bg-[#004ce6] rounded-full"
                      style={{
                        left: `${((marketCapRange[0] - 350) / 500) * 100}%`,
                        right: `${100 - ((marketCapRange[1] - 350) / 500) * 100}%`,
                      }}
                    ></div>
                    <div
                      className="absolute w-4 h-4 bg-[#004ce6] rounded-full border-2 border-white shadow-md cursor-pointer"
                      style={{
                        left: `${((marketCapRange[0] - 350) / 500) * 100}%`,
                        top: "-6px",
                      }}
                      onMouseDown={() => setIsDraggingMarketCapMin(true)}
                    ></div>
                    <div
                      className="absolute w-4 h-4 bg-[#004ce6] rounded-full border-2 border-white shadow-md cursor-pointer"
                      style={{
                        left: `${((marketCapRange[1] - 350) / 500) * 100}%`,
                        top: "-6px",
                      }}
                      onMouseDown={() => setIsDraggingMarketCapMax(true)}
                    ></div>
                  </div>
                </div>
              </div>
            </div>

{/* Search Input */}
            <div className="relative mb-6">
              <input
                type="text"
                placeholder="Search peers"
                className="w-full p-2.5 pl-10 border border-[#EAF0FC] rounded-lg text-[#667085] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6]"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              />
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[#667085]" size={18} />
            </div>

{/* Company List */}
            <div>
              <div className="grid grid-cols-4 gap-4 py-3 border-b border-[#EAF0FC] text-[#667085] text-sm font-medium">
                <div>Company</div>
                <div>Revenue range($ in M)</div>
                <div>Market capitalisation($ in M)</div>
                <div>Revenue range($ in M)</div>
              </div>

<div className="divide-y divide-[#EAF0FC] max-h-[calc(90vh-350px)] overflow-y-auto scrollbar-hide">
                {/* First render selected companies */}
                {filteredCompanies
                  .filter((company) => tempSelectedPeers.includes(company.name))
                  .map((company) => {
                    const isSelected = true // These are all selected
                    const isDetailsSelected = company.id === selectedCompany

return (
                      <div
                        key={company.id}
                        className={`grid grid-cols-4 gap-4 py-3 items-center ${
                          isDetailsSelected ? "bg-[#F9FAFF]" : "bg-[#F2F6FE]"
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Checkbox
                            id={`company_${company.id}_selected`}
                            checked={isSelected}
                            onCheckedChange={() => handleTogglePeer(company.name)}
                            className="data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
                          />
                          <div
                            className="flex items-center gap-2 cursor-pointer"
                            onClick={() => handleSelectCompany(company.id)}
                          >
                            <div className="w-8 h-8 rounded-full bg-[#E0E9FF] flex items-center justify-center text-[#004ce6] font-medium">
                              {company.logo}
                            </div>
                            <span className={`${isDetailsSelected ? "text-[#004ce6]" : "text-[#101828]"} font-medium`}>
                              {company.name}
                            </span>
                            {company.isPrimary && (
                              <span className="text-xs bg-[#004ce6] text-white px-1.5 py-0.5 rounded">P</span>
                            )}
                          </div>
                        </div>
                        <div className="text-[#101828]">{company.revenue}</div>
                        <div className="text-[#101828]">{company.marketCap}</div>
                        <div className="text-[#101828]">{company.revenue}</div>
                      </div>
                    )
                  })}

{/* Then render non-selected companies */}
                {filteredCompanies
                  .filter((company) => !tempSelectedPeers.includes(company.name))
                  .map((company) => {
                    const isSelected = false // These are not selected
                    const isDetailsSelected = company.id === selectedCompany

return (
                      <div
                        key={company.id}
                        className={`grid grid-cols-4 gap-4 py-3 items-center ${
                          isDetailsSelected ? "bg-[#F9FAFF]" : ""
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <Checkbox
                            id={`company_${company.id}_unselected`}
                            checked={isSelected}
                            onCheckedChange={() => handleTogglePeer(company.name)}
                            className="data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
                          />
                          <div
                            className="flex items-center gap-2 cursor-pointer"
                            onClick={() => handleSelectCompany(company.id)}
                          >
                            <div className="w-8 h-8 rounded-full bg-[#F2F6FE] flex items-center justify-center text-[#004ce6] font-medium">
                              {company.logo}
                            </div>
                            <span className={`${isDetailsSelected ? "text-[#004ce6]" : "text-[#101828]"}`}>
                              {company.name}
                            </span>
                            {company.isPrimary && (
                              <span className="text-xs bg-[#004ce6] text-white px-1.5 py-0.5 rounded">P</span>
                            )}
                          </div>
                        </div>
                        <div className="text-[#101828]">{company.revenue}</div>
                        <div className="text-[#101828]">{company.marketCap}</div>
                        <div className="text-[#101828]">{company.revenue}</div>
                      </div>
                    )
                  })}

{filteredCompanies.length === 0 && (
                  <div className="py-6 text-center text-[#667085]">No companies match your search criteria</div>
                )}
              </div>
            </div>
          </div>

{/* Right side - Details */}
          <div className="w-1/3 overflow-y-auto flex flex-col scrollbar-hide">
            {/* Tabs */}
            <div className="flex border-b border-[#EAF0FC]">
              <button
                className={`px-6 py-4 text-base font-medium ${
                  activeTab === "search" ? "text-[#004ce6] border-b-2 border-[#004ce6]" : "text-[#667085]"
                }`}
                onClick={() => setActiveTab("search")}
              >
                Search criteria
              </button>
              <button
                className={`px-6 py-4 text-base font-medium ${
                  activeTab === "details" ? "text-[#004ce6] border-b-2 border-[#004ce6]" : "text-[#667085]"
                }`}
                onClick={() => setActiveTab("details")}
              >
                Company details
              </button>
            </div>

{/* Tab Content */}
            <div className="p-6 flex-1 flex flex-col">
              {activeTab === "search" ? (
                <div className="space-y-4 flex-1 flex flex-col">
                  {/* Search Criteria Content */}
                  <div className="flex-1">
                    <div className="flex items-center justify-between bg-[#F2F6FE] p-3 rounded-lg mb-4">
                      <span className="text-[#344054]">
                        Revenue between {formatCurrency(revenueRange[0])} - {formatCurrency(revenueRange[1])}
                      </span>
                      <button className="text-[#667085]" onClick={() => setRevenueRange([300, 800])}>
                        <X size={16} />
                      </button>
                    </div>
                    <div className="flex items-center justify-between bg-[#F2F6FE] p-3 rounded-lg mb-4">
                      <span className="text-[#344054]">
                        Market capitalization between {formatCurrency(marketCapRange[0])} -{" "}
                        {formatCurrency(marketCapRange[1])}
                      </span>
                      <button className="text-[#667085]" onClick={() => setMarketCapRange([350, 850])}>
                        <X size={16} />
                      </button>
                    </div>
                    {selectedIndustry && (
                      <div className="flex items-center justify-between bg-[#F2F6FE] p-3 rounded-lg mb-4">
                        <span className="text-[#344054]">Industry: {selectedIndustry}</span>
                        <button className="text-[#667085]" onClick={() => setSelectedIndustry(null)}>
                          <X size={16} />
                        </button>
                      </div>
                    )}
                    {selectedGeography && (
                      <div className="flex items-center justify-between bg-[#F2F6FE] p-3 rounded-lg mb-4">
                        <span className="text-[#344054]">Geography: {selectedGeography}</span>
                        <button className="text-[#667085]" onClick={() => setSelectedGeography(null)}>
                          <X size={16} />
                        </button>
                      </div>
                    )}
                    {customCriteria.map((criteria) => (
                      <div
                        key={criteria.id}
                        className="flex items-center justify-between bg-[#F2F6FE] p-3 rounded-lg mb-4"
                      >
                        <span className="text-[#344054]">{criteria.text}</span>
                        <button className="text-[#667085]" onClick={() => handleRemoveCriteria(criteria.id)}>
                          <X size={16} />
                        </button>
                      </div>
                    ))}

{isAddingCriteria ? (
                      <div className="p-3 border border-[#EAF0FC] rounded-lg mb-4">
                        <input
                          ref={newCriteriaInputRef}
                          type="text"
                          value={newCriteriaText}
                          onChange={(e) => setNewCriteriaText(e.target.value)}
                          onKeyDown={handleKeyPress}
                          placeholder="Enter your criteria"
                          className="w-full p-2 border border-[#EAF0FC] rounded-lg text-[#101828] placeholder:text-[#667085] focus:outline-none focus:ring-1 focus:ring-[#004ce6] focus:border-[#004ce6] mb-2"
                        />
                        <div className="flex justify-end gap-2">
                          <button
                            onClick={handleCancelAddCriteria}
                            className="px-3 py-1 text-sm text-[#667085] hover:text-[#344054]"
                          >
                            Cancel
                          </button>
                          <button
                            onClick={handleAddCriteria}
                            disabled={!newCriteriaText.trim()}
                            className={`px-3 py-1 text-sm bg-[#004ce6] text-white rounded-md ${!newCriteriaText.trim() ? "opacity-50 cursor-not-allowed" : "hover:bg-[#003db8]"}`}
                          >
                            Add
                          </button>
                        </div>
                      </div>
                    ) : (
                      <div
                        className="flex items-center justify-between p-3 border border-dashed border-[#EAF0FC] rounded-lg mb-4 cursor-pointer hover:bg-[#F9FAFF]"
                        onClick={() => setIsAddingCriteria(true)}
                      >
                        <span className="text-[#667085]">Enter your criteria</span>
                        <Plus size={16} className="text-[#004ce6]" />
                      </div>
                    )}
                  </div>

{/* Search Again Button */}
                  <div className="mt-auto pt-4">
                    <button
                      onClick={handleSearchAgain}
                      className="w-full bg-[#004ce6] text-white py-2.5 rounded-lg hover:bg-[#003db8] transition-colors"
                    >
                      Search again
                    </button>
                  </div>
                </div>
              ) : (
                <div className="space-y-6">
                  {/* Company Details Content */}
                  <div className="flex items-center gap-3 mb-6">
                    <div className="w-10 h-10 rounded-full bg-[#F2F6FE] flex items-center justify-center text-[#004ce6] font-medium">
                      {currentCompanyDetails.logo}
                    </div>
                    <h2 className="text-xl font-medium text-[#101828]">{currentCompanyDetails.name}</h2>
                  </div>

{/* Relevance Summary */}
                  <div className="border border-[#EAF0FC] rounded-lg overflow-hidden">
                    <div
                      className="flex items-center justify-between p-3 bg-[#F9FAFF] cursor-pointer"
                      onClick={() => toggleSection("relevanceSummary")}
                    >
                      <h3 className="text-[#344054] font-medium">Relevance summary</h3>
                      {expandedSections.relevanceSummary ? (
                        <ChevronUp className="text-[#667085]" size={20} />
                      ) : (
                        <ChevronDown className="text-[#667085]" size={20} />
                      )}
                    </div>
                    {expandedSections.relevanceSummary && (
                      <div className="p-3">
                        <p className="text-[#667085] text-sm leading-relaxed">
                          {currentCompanyDetails.relevanceSummary}
                        </p>
                      </div>
                    )}
                  </div>

{/* Criteria Evaluation */}
                  <div className="border border-[#EAF0FC] rounded-lg overflow-hidden">
                    <div
                      className="flex items-center justify-between p-3 bg-[#F9FAFF] cursor-pointer"
                      onClick={() => toggleSection("criteriaEvaluation")}
                    >
                      <h3 className="text-[#344054] font-medium">Criteria evaluation</h3>
                      {expandedSections.criteriaEvaluation ? (
                        <ChevronUp className="text-[#667085]" size={20} />
                      ) : (
                        <ChevronDown className="text-[#667085]" size={20} />
                      )}
                    </div>
                    {expandedSections.criteriaEvaluation && (
                      <div className="p-3">
                        <p className="text-[#667085] text-sm leading-relaxed">
                          {currentCompanyDetails.criteriaEvaluation}
                        </p>
                      </div>
                    )}
                  </div>

{/* Basic Info */}
                  <div className="border border-[#EAF0FC] rounded-lg overflow-hidden">
                    <div
                      className="flex items-center justify-between p-3 bg-[#F9FAFF] cursor-pointer"
                      onClick={() => toggleSection("basicInfo")}
                    >
                      <h3 className="text-[#344054] font-medium">Basic info</h3>
                      {expandedSections.basicInfo ? (
                        <ChevronUp className="text-[#667085]" size={20} />
                      ) : (
                        <ChevronDown className="text-[#667085]" size={20} />
                      )}
                    </div>
                    {expandedSections.basicInfo && (
                      <div className="p-3">
                        <pre className="text-[#667085] text-sm whitespace-pre-line">
                          {currentCompanyDetails.basicInfo}
                        </pre>
                      </div>
                    )}
                  </div>

{/* Specialities */}
                  <div className="border border-[#EAF0FC] rounded-lg overflow-hidden">
                    <div
                      className="flex items-center justify-between p-3 bg-[#F9FAFF] cursor-pointer"
                      onClick={() => toggleSection("specialities")}
                    >
                      <h3 className="text-[#344054] font-medium">Specialities</h3>
                      {expandedSections.specialities ? (
                        <ChevronUp className="text-[#667085]" size={20} />
                      ) : (
                        <ChevronDown className="text-[#667085]" size={20} />
                      )}
                    </div>
                    {expandedSections.specialities && (
                      <div className="p-3">
                        <p className="text-[#667085] text-sm leading-relaxed">{currentCompanyDetails.specialities}</p>
                      </div>
                    )}
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/subsection-content.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type { Section, SubSection, ChartType } from "@/types/report-types"
import { hasCustomization } from "@/utils/section-utils"
import { YearsSelection } from "@/components/years-selection"
import { ChartOptionsSection } from "@/components/chart-options-section"
import { AICommentaryToggle } from "@/components/ai-commentary-toggle"
import { SearchDropdown } from "@/components/ui/search-dropdown"
import { ViewAllRatiosButton } from "@/components/view-all-ratios-button"
import { peersList } from "@/app/types/peer-comparison"
import { ViewAllPeersButton } from "@/components/view-all-peers-button"
import ChartCategoryPreview from "@/components/chart-category-preview"

interface SubsectionContentProps {
  section: Section
  subSection: SubSection
  onToggleYear: (sectionId: string, subSectionId: string, year: string) => void
  onToggleAICommentary: (sectionId: string, subSectionId: string) => void
  onToggleChartOption: (sectionId: string, subSectionId: string, optionId: string) => void
  onSetChartType: (sectionId: string, subSectionId: string, optionId: string, chartType: ChartType) => void
  onOpenCustomChartModal: (sectionId: string, subSectionId: string) => void
  onToggleRatio: (sectionId: string, subSectionId: string, ratio: string) => void
  onTogglePeer: (sectionId: string, subSectionId: string, peer: string) => void
  onTogglePeerComparisonRatio: (sectionId: string, subSectionId: string, ratio: string) => void
}

/**
 * Component for rendering subsection content based on its type
 */
export function SubsectionContent({
  section,
  subSection,
  onToggleYear,
  onToggleAICommentary,
  onToggleChartOption,
  onSetChartType,
  onOpenCustomChartModal,
  onToggleRatio,
  onTogglePeer,
  onTogglePeerComparisonRatio,
}: SubsectionContentProps) {
  if (!hasCustomization(subSection.id) || !subSection.customization) {
    return null
  }

return (
    <div className="p-4 border-t border-[#EAF0FC]">
      {/* Years selection */}
      {subSection.customization.years && (
        <YearsSelection
          years={subSection.customization.years}
          subSectionId={subSection.id}
          onToggleYear={(year) => onToggleYear(section.id, subSection.id, year)}
        />
      )}

{/* Chart options */}
      {subSection.customization.chartOptions && (
        <ChartCategoryPreview categoryId={subSection.id} categoryTitle={subSection.title}>
          <ChartOptionsSection
            sections={[section]}
            sectionId={section.id}
            subSectionId={subSection.id}
            onOpenCustomChartModal={onOpenCustomChartModal}
            onToggleChartOption={onToggleChartOption}
            onSetChartType={onSetChartType}
          />
        </ChartCategoryPreview>
      )}

{/* AI Commentary toggle */}
      {subSection.customization.showAICommentary !== undefined && (
        <AICommentaryToggle
          enabled={subSection.customization.showAICommentary}
          onToggle={() => onToggleAICommentary(section.id, subSection.id)}
        />
      )}

{/* Ratio selection */}
      {subSection.customization.ratios && (
        <div className="space-y-6 mt-4">
          <div className="flex justify-between items-center">
            <h3 className="text-[#344054] text-sm font-medium">Ratio</h3>
            <ViewAllRatiosButton
              selectedRatios={subSection.customization.ratios.selectedRatios}
              onToggleRatio={(ratio) => onToggleRatio(section.id, subSection.id, ratio)}
            />
          </div>
          <SearchDropdown
            items={[]}
            useRatioStore={true}
            selectedItems={subSection.customization.ratios.selectedRatios}
            onToggleItem={(ratio) => onToggleRatio(section.id, subSection.id, ratio)}
            placeholder="Search ratio"
          />
        </div>
      )}

{/* Peer comparison */}
      {subSection.customization.peerComparison && (
        <div className="space-y-6 mt-4">
          <div>
            <div className="flex justify-between items-center mb-3">
              <h3 className="text-[#344054] text-sm font-medium">Peers</h3>
              <ViewAllPeersButton
                selectedPeers={subSection.customization.peerComparison.selectedPeers}
                onTogglePeer={(peer) => onTogglePeer(section.id, subSection.id, peer)}
              />
            </div>
            <SearchDropdown
              items={peersList}
              selectedItems={subSection.customization.peerComparison.selectedPeers}
              onToggleItem={(peer) => onTogglePeer(section.id, subSection.id, peer)}
              placeholder="Search peers"
            />
          </div>

<div>
            <div className="flex justify-between items-center mb-3">
              <h3 className="text-[#344054] text-sm font-medium">Ratio</h3>
              <ViewAllRatiosButton
                selectedRatios={subSection.customization.peerComparison.selectedRatios}
                onToggleRatio={(ratio) => onTogglePeerComparisonRatio(section.id, subSection.id, ratio)}
              />
            </div>
            <SearchDropdown
              items={[]}
              useRatioStore={true}
              selectedItems={subSection.customization.peerComparison.selectedRatios}
              onToggleItem={(ratio) => onTogglePeerComparisonRatio(section.id, subSection.id, ratio)}
              placeholder="Search ratio"
            />
          </div>
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/chart-options-section.tsx" isEdit="true" isQuickEdit="true"
"use client"
import type { Section, ChartType } from "@/types/report-types"
import { getAvailableChartTypes } from "@/constants/report-constants"
import { getChartOptionLabel } from "@/utils/section-utils"
import ChartTypeButton from "@/components/chart-type-button"

interface ChartOptionsSectionProps {
  sections: Section[]
  sectionId: string
  subSectionId: string
  onOpenCustomChartModal: (sectionId: string, subSectionId: string) => void
  onToggleChartOption: (sectionId: string, subSectionId: string, optionId: string) => void
  onSetChartType: (sectionId: string, subSectionId: string, optionId: string, chartType: ChartType) => void
}

/**
 * Component for displaying and managing chart options
 */
export function ChartOptionsSection({
  sections,
  sectionId,
  subSectionId,
  onOpenCustomChartModal,
  onToggleChartOption,
  onSetChartType,
}: ChartOptionsSectionProps) {
  // Find the current section and subsection
  const section = sections.find((s) => s.id === sectionId)
  const subSection = section?.subSections?.find((ss) => ss.id === subSectionId)
  const chartOptions = subSection?.customization?.chartOptions || {}

if (!subSection?.customization?.chartOptions) {
    return null
  }

return (
    <div className="mb-6">
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-[#344054] text-sm font-medium">{subSection?.title || "Charts"} Charts</h3>
        <button
          className="text-[#004ce6] flex items-center text-sm"
          onClick={() => onOpenCustomChartModal(sectionId, subSectionId)}
        >
          <span className="mr-1">+</span> Add custom chart
        </button>
      </div>
      <div className="space-y-4">
        {Object.keys(chartOptions).map((optionId) => {
          const chartOption = chartOptions[optionId]
          if (!chartOption?.enabled) return null

const availableChartTypes = getAvailableChartTypes(chartOption.variableCount)
          const chartTitle = getChartOptionLabel(sections, sectionId, subSectionId, optionId)

return (
            <div key={optionId} className="border border-[#EAF0FC] rounded-lg p-4">
              <div className="flex items-center justify-between mb-3">
                <span className="text-[#101828] text-base">{chartTitle}</span>
                <button
                  className="text-[#667085] hover:text-[#344054]"
                  onClick={() => onToggleChartOption(sectionId, subSectionId, optionId)}
                  aria-label="Remove chart"
                >
                  ×
                </button>
              </div>

{/* Chart type selection based on variable count */}
              <div className="flex items-center gap-3 flex-wrap">
                {availableChartTypes.map((chartTypeOption) => (
                  <ChartTypeButton
                    key={chartTypeOption.type}
                    chartType={chartTypeOption.type}
                    icon={chartTypeOption.icon || "/placeholder.svg"}
                    isSelected={chartOption?.chartType === chartTypeOption.type}
                    onClick={() => onSetChartType(sectionId, subSectionId, optionId, chartTypeOption.type)}
                    title={chartTitle}
                  />
                ))}
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/chart-preview.tsx" isEdit="true" isQuickEdit="true"
"use client"
import {
  LineChart,
  Line,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ComposedChart,
  ResponsiveContainer,
  Tooltip,
  Legend,
  ReferenceLine,
} from "recharts"

// Sample data for preview charts with specific financial metrics
const sampleData = [
  {
    year: "FY20",
    value: 136,
    value2: 120,
    value3: 90,
    value4: 70,
    value5: 50,
    // Revenue metrics
    revenue: 1250,
    revenueGrowth: 8.5,
    // Profitability metrics
    profit: 225,
    grossMargin: 42,
    ebitdaMargin: 28,
    netIncomeMargin: 18,
    // Cash flow metrics
    operatingCashFlow: 280,
    ebitda: 310,
    freeCashFlow: 150,
    capex: 180,
    depreciation: 120,
    // Working capital metrics
    workingCapital: 420,
    inventory: 180,
    accountsReceivable: 240,
    accountsPayable: 160,
    cashConversionCycle: 45,
    // Leverage metrics
    debtToEbitda: 2.1,
    interestCoverage: 8.5,
    debtToEquity: 0.65,
    // Return metrics
    roa: 12.4,
    roe: 18.7,
  },
  {
    year: "FY21",
    value: 258,
    value2: 150,
    value3: 110,
    value4: 85,
    value5: 65,
    // Revenue metrics
    revenue: 1450,
    revenueGrowth: 16.0,
    // Profitability metrics
    profit: 290,
    grossMargin: 45,
    ebitdaMargin: 30,
    netIncomeMargin: 20,
    // Cash flow metrics
    operatingCashFlow: 340,
    ebitda: 380,
    freeCashFlow: 190,
    capex: 210,
    depreciation: 140,
    // Working capital metrics
    workingCapital: 460,
    inventory: 200,
    accountsReceivable: 260,
    accountsPayable: 180,
    cashConversionCycle: 42,
    // Leverage metrics
    debtToEbitda: 1.9,
    interestCoverage: 9.2,
    debtToEquity: 0.6,
    // Return metrics
    roa: 13.8,
    roe: 20.1,
  },
  {
    year: "FY22",
    value: 195,
    value2: 180,
    value3: 130,
    value4: 95,
    value5: 75,
    // Revenue metrics
    revenue: 1680,
    revenueGrowth: 15.9,
    // Profitability metrics
    profit: 370,
    grossMargin: 47,
    ebitdaMargin: 32,
    netIncomeMargin: 22,
    // Cash flow metrics
    operatingCashFlow: 390,
    ebitda: 420,
    freeCashFlow: 220,
    capex: 240,
    depreciation: 150,
    // Working capital metrics
    workingCapital: 510,
    inventory: 220,
    accountsReceivable: 290,
    accountsPayable: 200,
    cashConversionCycle: 38,
    // Leverage metrics
    debtToEbitda: 1.7,
    interestCoverage: 10.5,
    debtToEquity: 0.55,
    // Return metrics
    roa: 15.2,
    roe: 22.5,
  },
  {
    year: "FY23",
    value: 153,
    value2: 130,
    value3: 150,
    value4: 110,
    value5: 85,
    // Revenue metrics
    revenue: 1820,
    revenueGrowth: 8.3,
    // Profitability metrics
    profit: 382,
    grossMargin: 46,
    ebitdaMargin: 31,
    netIncomeMargin: 21,
    // Cash flow metrics
    operatingCashFlow: 420,
    ebitda: 450,
    freeCashFlow: 240,
    capex: 220,
    depreciation: 160,
    // Working capital metrics
    workingCapital: 540,
    inventory: 230,
    accountsReceivable: 310,
    accountsPayable: 210,
    cashConversionCycle: 36,
    // Leverage metrics
    debtToEbitda: 1.6,
    interestCoverage: 11.2,
    debtToEquity: 0.52,
    // Return metrics
    roa: 15.8,
    roe: 23.2,
  },
  {
    year: "FY24",
    value: 142,
    value2: 160,
    value3: 140,
    value4: 100,
    value5: 70,
    // Revenue metrics
    revenue: 2100,
    revenueGrowth: 15.4,
    // Profitability metrics
    profit: 483,
    grossMargin: 48,
    ebitdaMargin: 33,
    netIncomeMargin: 23,
    // Cash flow metrics
    operatingCashFlow: 480,
    ebitda: 520,
    freeCashFlow: 280,
    capex: 250,
    depreciation: 170,
    // Working capital metrics
    workingCapital: 580,
    inventory: 250,
    accountsReceivable: 330,
    accountsPayable: 230,
    cashConversionCycle: 34,
    // Leverage metrics
    debtToEbitda: 1.5,
    interestCoverage: 12.0,
    debtToEquity: 0.48,
    // Return metrics
    roa: 16.5,
    roe: 24.8,
  },
]

// Calculate CAGR for sample data
const cagrData = sampleData.map((item) => ({
  ...item,
  cagr: 120, // Simplified constant value for preview
}))

// Update the ChartPreviewProps to include new properties for advanced customization
type ChartPreviewProps = {
  chartType: string
  title?: string
  elementMappings?: Record<string, string>
  showCAGR?: boolean
}

export default function ChartPreview({
  chartType,
  title = "Preview",
  elementMappings = {},
  showCAGR = false,
}: ChartPreviewProps) {
  // Get variable names or use placeholders
  const getVariableName = (elementKey: string) => {
    return elementMappings[elementKey] || `Variable ${Object.keys(elementMappings).indexOf(elementKey) + 1}`
  }

// Map element keys to data keys
  const getDataKey = (elementKey: string) => {
    const index = Number.parseInt(elementKey.replace(/[^0-9]/g, "") || "1") - 1
    if (index === 0) return "value"
    if (index >= 1 && index <= 4) return `value${index + 1}`
    return "value"
  }

// Define chart colors based on element types
  const chartColors = {
    primary: "#4285F4",
    line: "#34A853",
    line1: "#4285F4",
    line2: "#EA4335",
    line3: "#34A853",
    line4: "#FBBC05",
    line5: "#8430CE",
    bar: "#4285F4",
    stacked1: "#4285F4",
    stacked2: "#EA4335",
    stacked3: "#34A853",
    stacked4: "#FBBC05",
    stacked5: "#8430CE",
    group1: "#4285F4",
    group2: "#EA4335",
    group3: "#34A853",
    group4: "#FBBC05",
    group5: "#8430CE",
  }

// Get data keys based on chart title and category
  const getChartDataKeys = (chartTitle: string) => {
    const lowerTitle = chartTitle.toLowerCase()

// Revenue charts
    if (lowerTitle.includes("revenue trend") || lowerTitle.includes("revenue growth")) {
      return { primary: "revenue" }
    }

// Profitability charts
    if (lowerTitle.includes("profit over years")) {
      return { primary: "profit" }
    }
    if (lowerTitle.includes("gross margin vs ebitda margin")) {
      return { line1: "grossMargin", line2: "ebitdaMargin" }
    }
    if (lowerTitle.includes("net income margin")) {
      return { primary: "netIncomeMargin" }
    }

// Cash flow charts
    if (lowerTitle.includes("operating cash flow") && !lowerTitle.includes("vs")) {
      return { primary: "operatingCashFlow" }
    }
    if (lowerTitle.includes("ebitda vs operating cash flow")) {
      return { line1: "ebitda", line2: "operatingCashFlow" }
    }
    if (lowerTitle.includes("profitability metric comparison")) {
      return { stacked1: "ebitda", stacked2: "operatingCashFlow", stacked3: "profit" }
    }
    if (lowerTitle.includes("capex vs depreciation")) {
      return { group1: "capex", group2: "depreciation" }
    }

// Working capital charts
    if (lowerTitle.includes("working capital") && !lowerTitle.includes("vs")) {
      return { stacked1: "inventory", stacked2: "accountsReceivable", stacked3: "accountsPayable" }
    }
    if (lowerTitle.includes("cash conversion cycle")) {
      return { primary: "cashConversionCycle" }
    }

// Leverage charts
    if (lowerTitle.includes("debt vs ebita")) {
      return { primary: "debtToEbitda" }
    }
    if (lowerTitle.includes("interest coverage")) {
      return { primary: "interestCoverage" }
    }
    if (lowerTitle.includes("debt to equity")) {
      return { line1: "debtToEquity", line2: "interestCoverage" }
    }

// Return metrics charts
    if (lowerTitle.includes("return on assets")) {
      return { primary: "roa" }
    }
    if (lowerTitle.includes("return on metrics comparison")) {
      return { line1: "roa", line2: "roe" }
    }

// Default fallback
    return { primary: "value" }
  }

// Render different chart types based on the chartType prop and element mappings
  const renderChart = () => {
    const data = showCAGR ? cagrData : sampleData
    const dataKeys = getChartDataKeys(title)

switch (chartType) {
      case "line":
        // Determine which data key to use based on the title
        const lineDataKey = dataKeys.primary || "value"
        const lineName = title.includes("vs") ? title.split("vs")[0].trim() : title

return (
          <LineChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Line
              type="monotone"
              dataKey={lineDataKey}
              stroke={chartColors.primary}
              strokeWidth={2}
              dot={{ r: 4 }}
              name={lineName}
            />
            {showCAGR && (
              <Line type="monotone" dataKey="cagr" stroke="#888888" strokeDasharray="5 5" dot={false} name="CAGR" />
            )}
          </LineChart>
        )

case "bar":
        // Determine which data key to use based on the title
        const barDataKey = dataKeys.primary || "value"
        const barName = title.includes("vs") ? title.split("vs")[0].trim() : title

return (
          <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Bar dataKey={barDataKey} fill={chartColors.primary} radius={[2, 2, 0, 0]} name={barName} />
            {showCAGR && (
              <ReferenceLine
                y={120}
                stroke="#888888"
                strokeDasharray="5 5"
                label={{ value: "CAGR", position: "right", fill: "#888888", fontSize: 12 }}
              />
            )}
          </BarChart>
        )

case "horizontal-bar":
        return (
          <BarChart layout="vertical" data={data} margin={{ top: 10, right: 30, left: 40, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis type="number" tick={{ fontSize: 12 }} />
            <YAxis dataKey="year" type="category" tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Bar dataKey={dataKeys.primary || "value"} fill={chartColors.primary} radius={[0, 2, 2, 0]} name={title} />
            {showCAGR && (
              <ReferenceLine
                x={120}
                stroke="#888888"
                strokeDasharray="5 5"
                label={{ value: "CAGR", position: "top", fill: "#888888", fontSize: 12 }}
              />
            )}
          </BarChart>
        )

case "multi-line":
        // Special handling for common financial charts
        if (title.toLowerCase().includes("gross margin vs ebitda margin")) {
          return (
            <LineChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="grossMargin"
                stroke={chartColors.line1}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Gross Margin"
              />
              <Line
                type="monotone"
                dataKey="ebitdaMargin"
                stroke={chartColors.line2}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="EBITDA Margin"
              />
            </LineChart>
          )
        } else if (title.toLowerCase().includes("ebitda vs operating cash flow")) {
          return (
            <LineChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="ebitda"
                stroke={chartColors.line1}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="EBITDA"
              />
              <Line
                type="monotone"
                dataKey="operatingCashFlow"
                stroke={chartColors.line2}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Operating Cash Flow"
              />
            </LineChart>
          )
        } else if (title.toLowerCase().includes("debt to equity")) {
          return (
            <LineChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="debtToEquity"
                stroke={chartColors.line1}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Debt to Equity"
              />
              <Line
                type="monotone"
                dataKey="interestCoverage"
                stroke={chartColors.line2}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Interest Coverage"
              />
            </LineChart>
          )
        } else if (title.toLowerCase().includes("return on metrics")) {
          return (
            <LineChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Line
                type="monotone"
                dataKey="roa"
                stroke={chartColors.line1}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Return on Assets"
              />
              <Line
                type="monotone"
                dataKey="roe"
                stroke={chartColors.line2}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Return on Equity"
              />
            </LineChart>
          )
        }

// Default multi-line chart rendering (for other cases)
        return (
          <LineChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            {Object.entries(dataKeys).map(([key, dataKey]) => (
              <Line
                key={key}
                type="monotone"
                dataKey={dataKey}
                stroke={chartColors[key as keyof typeof chartColors]}
                strokeWidth={2}
                dot={{ r: 4 }}
                name={key === "line1" ? "Metric 1" : key === "line2" ? "Metric 2" : key}
              />
            ))}
          </LineChart>
        )

case "stacked-bar":
        // Special handling for working capital
        if (title.toLowerCase().includes("working capital")) {
          return (
            <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Bar dataKey="inventory" stackId="a" fill={chartColors.stacked1} radius={[2, 2, 0, 0]} name="Inventory" />
              <Bar dataKey="accountsReceivable" stackId="a" fill={chartColors.stacked2} name="Accounts Receivable" />
              <Bar dataKey="accountsPayable" stackId="a" fill={chartColors.stacked3} name="Accounts Payable" />
            </BarChart>
          )
        } else if (title.toLowerCase().includes("profitability metric")) {
          return (
            <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Bar dataKey="ebitda" stackId="a" fill={chartColors.stacked1} radius={[2, 2, 0, 0]} name="EBITDA" />
              <Bar dataKey="operatingCashFlow" stackId="a" fill={chartColors.stacked2} name="Operating Cash Flow" />
              <Bar dataKey="profit" stackId="a" fill={chartColors.stacked3} name="Net Profit" />
            </BarChart>
          )
        }

// Default stacked bar chart
        return (
          <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            {Object.entries(dataKeys).map(([key, dataKey]) => (
              <Bar
                key={key}
                dataKey={dataKey}
                stackId="a"
                fill={chartColors[key as keyof typeof chartColors]}
                radius={key === "stacked1" ? [2, 2, 0, 0] : [0, 0, 0, 0]}
                name={key === "stacked1" ? "Metric 1" : key === "stacked2" ? "Metric 2" : "Metric 3"}
              />
            ))}
          </BarChart>
        )

case "horizontal-stacked-bar":
        return (
          <BarChart layout="vertical" data={data} margin={{ top: 10, right: 30, left: 40, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis type="number" tick={{ fontSize: 12 }} />
            <YAxis dataKey="year" type="category" tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            {Object.entries(dataKeys).map(([key, dataKey]) => (
              <Bar
                key={key}
                dataKey={dataKey}
                stackId="a"
                fill={chartColors[key as keyof typeof chartColors]}
                radius={key === "stacked1" ? [0, 2, 2, 0] : [0, 0, 0, 0]}
                name={key === "stacked1" ? "Metric 1" : key === "stacked2" ? "Metric 2" : "Metric 3"}
              />
            ))}
          </BarChart>
        )

case "grouped-bar":
        // Special handling for capex vs depreciation
        if (title.toLowerCase().includes("capex vs depreciation")) {
          return (
            <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
              <XAxis dataKey="year" tick={{ fontSize: 12 }} />
              <YAxis tick={{ fontSize: 12 }} />
              <Tooltip />
              <Legend />
              <Bar dataKey="capex" fill={chartColors.group1} radius={[2, 2, 0, 0]} name="Capex" />
              <Bar dataKey="depreciation" fill={chartColors.group2} radius={[2, 2, 0, 0]} name="Depreciation" />
            </BarChart>
          )
        }

// Default grouped bar chart rendering
        return (
          <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            {Object.entries(dataKeys).map(([key, dataKey]) => (
              <Bar
                key={key}
                dataKey={dataKey}
                fill={chartColors[key as keyof typeof chartColors]}
                radius={[2, 2, 0, 0]}
                name={key === "group1" ? "Metric 1" : "Metric 2"}
              />
            ))}
          </BarChart>
        )

case "horizontal-grouped-bar":
        return (
          <BarChart layout="vertical" data={data} margin={{ top: 10, right: 30, left: 40, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis type="number" tick={{ fontSize: 12 }} />
            <YAxis dataKey="year" type="category" tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            {Object.entries(dataKeys).map(([key, dataKey]) => (
              <Bar
                key={key}
                dataKey={dataKey}
                fill={chartColors[key as keyof typeof chartColors]}
                radius={[0, 2, 2, 0]}
                name={key === "group1" ? "Metric 1" : "Metric 2"}
              />
            ))}
          </BarChart>
        )

case "combo-bar-line":
        return (
          <ComposedChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Bar dataKey={dataKeys.bar || "value"} fill={chartColors.bar} radius={[2, 2, 0, 0]} name="Bar Metric" />
            <Line
              type="monotone"
              dataKey={dataKeys.line || "value2"}
              stroke={chartColors.line}
              strokeWidth={2}
              dot={{ r: 4 }}
              name="Line Metric"
            />
          </ComposedChart>
        )

case "combo-stacked-bar-line":
        return (
          <ComposedChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />

{/* Render stacked bars */}
            {Object.entries(dataKeys)
              .filter(([key]) => key.startsWith("stacked"))
              .map(([key, dataKey]) => (
                <Bar
                  key={key}
                  dataKey={dataKey}
                  stackId="a"
                  fill={chartColors[key as keyof typeof chartColors]}
                  radius={key === "stacked1" ? [2, 2, 0, 0] : [0, 0, 0, 0]}
                  name={key === "stacked1" ? "Bar 1" : key === "stacked2" ? "Bar 2" : "Bar 3"}
                />
              ))}

{/* Render line */}
            {dataKeys.line && (
              <Line
                type="monotone"
                dataKey={dataKeys.line}
                stroke={chartColors.line}
                strokeWidth={2}
                dot={{ r: 4 }}
                name="Line Metric"
              />
            )}
          </ComposedChart>
        )

default:
        return (
          <BarChart data={data} margin={{ top: 10, right: 30, left: 10, bottom: 10 }}>
            <CartesianGrid strokeDasharray="3 3" stroke="#eee" />
            <XAxis dataKey="year" tick={{ fontSize: 12 }} />
            <YAxis tick={{ fontSize: 12 }} />
            <Tooltip />
            <Legend />
            <Bar dataKey="value" fill="#4285F4" radius={[2, 2, 0, 0]} />
          </BarChart>
        )
    }
  }

return (
    <div className="chart-preview-container">
      <div className="bg-white rounded-lg p-4 w-[400px] border border-[#EAF0FC]">
        <h3 className="text-lg font-medium mb-2 text-[#344054]">{title}</h3>
        <div className="h-[280px]">
          <ResponsiveContainer width="100%" height="100%">
            {renderChart()}
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/chart-type-button.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useRef, useState, useEffect } from "react"
import Image from "next/image"
import { useDelayedHover } from "@/hooks/use-delayed-hover"
import ChartPreview from "./chart-preview"

type ChartTypeButtonProps = {
  chartType: string
  icon: string
  isSelected: boolean
  onClick: () => void
  title?: string
}

export default function ChartTypeButton({ chartType, icon, isSelected, onClick, title }: ChartTypeButtonProps) {
  const buttonRef = useRef<HTMLButtonElement>(null)
  const previewRef = useRef<HTMLDivElement>(null)
  const { shouldShow, handlers } = useDelayedHover(600)
  const [previewPosition, setPreviewPosition] = useState({ left: 0, top: 0 })

// Calculate position when shouldShow changes
  useEffect(() => {
    if (shouldShow && buttonRef.current) {
      const buttonRect = buttonRef.current.getBoundingClientRect()
      const previewWidth = 400 // Width of the preview container
      const previewHeight = 350 // Approximate height of preview

// Calculate left position to keep preview within viewport
      let left = buttonRect.left
      if (left + previewWidth > window.innerWidth) {
        left = window.innerWidth - previewWidth - 20 // 20px padding from edge
      }

// Ensure preview doesn't go off-screen to the left
      left = Math.max(20, left)

// Calculate top position
      let top = buttonRect.bottom + 8

// If preview would go off bottom of screen, position it above the button
      if (top + previewHeight > window.innerHeight) {
        top = buttonRect.top - previewHeight - 8
      }

// Ensure preview doesn't go off-screen to the top
      top = Math.max(20, top)

setPreviewPosition({
        left,
        top,
      })
    }
  }, [shouldShow])

return (
    <div className="relative">
      <button
        ref={buttonRef}
        className={`p-2 rounded-md transition-colors ${isSelected ? "bg-[#F2F6FE] border border-[#EAF0FC]" : "bg-white border border-[#EAF0FC] hover:bg-[#F9FAFF]"}`}
        onClick={onClick}
        {...handlers}
      >
        <Image src={icon || "/placeholder.svg"} alt={`${chartType} Chart`} width={32} height={32} />
      </button>

{shouldShow && (
        <div
          ref={previewRef}
          className="fixed z-[9999] border border-[#EAF0FC] rounded-lg shadow-lg"
          style={{
            left: previewPosition.left,
            top: previewPosition.top,
          }}
        >
          <ChartPreview
            chartType={chartType}
            title={title || `${chartType.charAt(0).toUpperCase() + chartType.slice(1)} Chart`}
          />
        </div>
      )}
    </div>
  )
}

[V0_FILE]typescriptreact:file="utils/chart-preview-utils.ts"
import type { ChartType } from "@/types/report-types"

/**
 * Maps category IDs to their representative chart types and titles
 */
export const getCategoryPreviewInfo = (categoryId: string): { chartType: ChartType; title: string } => {
  switch (categoryId) {
    case "revenue":
      return {
        chartType: "line",
        title: "Revenue Trend",
      }
    case "profitability":
      return {
        chartType: "multi-line",
        title: "Gross Margin vs EBITDA Margin",
      }
    case "cash-flow":
      return {
        chartType: "multi-line",
        title: "EBITDA vs Operating Cash Flow",
      }
    case "efficiency-working-capital":
      return {
        chartType: "stacked-bar",
        title: "Working Capital",
      }
    case "capital-structure-leverage":
      return {
        chartType: "multi-line",
        title: "Debt to Equity",
      }
    case "return-metrics":
      return {
        chartType: "multi-line",
        title: "Return on Metrics Comparison",
      }
    default:
      return {
        chartType: "bar",
        title: "Chart Preview",
      }
  }
}

/**
 * Determines if a chart preview should be memoized based on complexity
 */
export const shouldMemoizePreview = (chartType: ChartType): boolean => {
  // Complex chart types that benefit from memoization
  const complexChartTypes: ChartType[] = [
    "stacked-bar",
    "horizontal-stacked-bar",
    "combo-bar-line",
    "combo-stacked-bar-line",
  ]

return complexChartTypes.includes(chartType)
}

[V0_FILE]typescriptreact:file="components/chart-category-preview.tsx" isQuickEdit="true"
import type React from "react"
import { getCategoryPreviewInfo } from "@/utils/chart-preview-utils"

interface ChartCategoryPreviewProps {
  categoryId: string
}

const ChartCategoryPreview: React.FC<ChartCategoryPreviewProps> = ({ categoryId }) => {
  // Get the appropriate chart type and data based on category
  const previewInfo = getCategoryPreviewInfo(categoryId)

if (!previewInfo) {
    return <div>No preview available for this category.</div>
  }

const { chartType, data } = previewInfo

// Render the chart preview based on the chart type and data
  return (
    <div>
      {/* Placeholder for chart rendering logic */}
      {/* Replace this with actual chart rendering component based on chartType and data */}
      <p>Chart Preview: {chartType}</p>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  )
}

export default ChartCategoryPreview
</article></body></html>