a3:I[903690,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0ue-l2nq6d-fd.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1v75a5s2ght08.js","/chat-static/_next/static/immutable/chunks/0co2n6dpzagx8.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/1b-u_sfx8mzm1.js","/chat-static/_next/static/immutable/chunks/3u9s9vkfrso2e.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2zt5tn5xchhuv.js","/chat-static/_next/static/immutable/chunks/2bmcd4e54--3z.js","/chat-static/_next/static/immutable/chunks/3cp0_dcpi5nys.js","/chat-static/_next/static/immutable/chunks/1jl58vokn6m4h.js","/chat-static/_next/static/immutable/chunks/084jnw9w4j42a.js","/chat-static/_next/static/immutable/chunks/3u_pwb4zjh13r.js","/chat-static/_next/static/immutable/chunks/43h8xlics82_x.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/1pn7qt_86xck0.js","/chat-static/_next/static/immutable/chunks/3rrsqggx7bnww.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js","/chat-static/_next/static/immutable/chunks/3j5kknbxky-ne.js","/chat-static/_next/static/immutable/chunks/1k6e555flhe75.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/24dfitg5xukv4.js"],"ExplicitChatIdProvider"] a4:I[838238,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0ue-l2nq6d-fd.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1v75a5s2ght08.js","/chat-static/_next/static/immutable/chunks/0co2n6dpzagx8.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/1b-u_sfx8mzm1.js","/chat-static/_next/static/immutable/chunks/3u9s9vkfrso2e.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2zt5tn5xchhuv.js","/chat-static/_next/static/immutable/chunks/2bmcd4e54--3z.js","/chat-static/_next/static/immutable/chunks/3cp0_dcpi5nys.js","/chat-static/_next/static/immutable/chunks/1jl58vokn6m4h.js","/chat-static/_next/static/immutable/chunks/084jnw9w4j42a.js","/chat-static/_next/static/immutable/chunks/3u_pwb4zjh13r.js","/chat-static/_next/static/immutable/chunks/43h8xlics82_x.js","/chat-static/_next/static/immutable/chunks/01enxheexz0xq.js","/chat-static/_next/static/immutable/chunks/1pn7qt_86xck0.js","/chat-static/_next/static/immutable/chunks/3rrsqggx7bnww.js","/chat-static/_next/static/immutable/chunks/0ilzxtsq9fh87.js","/chat-static/_next/static/immutable/chunks/3j5kknbxky-ne.js","/chat-static/_next/static/immutable/chunks/1k6e555flhe75.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/24dfitg5xukv4.js"],"SWRDataProvider"] a6:[] a7:[["b_8g6nDiKEijL",null],["b_ckaTx4kOIvE",null],["b_IxGJprcw9rd",null]] a8:[["b_8g6nDiKEijL",{"templateVersionId":null,"templateCanonId":null}],["b_ckaTx4kOIvE",{"templateVersionId":null,"templateCanonId":null}],["b_IxGJprcw9rd",{"templateVersionId":null,"templateCanonId":null}]] a9:[["i3Ig4vAvTlm","$D2025-05-09T09:44:54.272Z"],["b_DXZwa5bfoVs","$D2025-05-09T09:49:25.018Z"],["b_yKHuoS7KYcs","$D2025-05-09T09:51:53.696Z"],["b_n4HUJlrChdB","$D2025-05-09T09:56:17.393Z"],["b_FKa5H386Fus","$D2025-05-09T09:58:03.561Z"],["b_rJWl8wJ2bKR","$D2025-05-09T10:26:16.068Z"],["b_r2TbLZDbfPx","$D2025-05-09T10:29:44.870Z"],["b_BTT725oqEa8","$D2025-05-09T10:33:02.606Z"],["b_qM7EvBKgpxZ","$D2025-05-09T10:35:30.836Z"],["b_pcCkc3rPme9","$D2025-05-09T10:42:25.970Z"],["b_L0tzurKKniv","$D2025-05-09T10:44:03.959Z"],["b_qNQCQTvEg2u","$D2025-05-09T10:46:02.361Z"],["b_UyKEj8yXJMi","$D2025-05-09T10:48:26.642Z"],["b_fisMZYNEyD6","$D2025-05-09T10:50:15.989Z"],["b_BJWhgkoG81M","$D2025-05-09T10:51:43.317Z"],["b_98yOD3Fa7CU","$D2025-05-09T10:53:27.519Z"],["b_xlsHzeTOVky","$D2025-05-09T10:55:40.833Z"],["b_hrHzLzVm7Dq","$D2025-05-09T11:05:54.235Z"],["b_e4NoUTjJvVV","$D2025-05-09T11:07:43.185Z"],["b_K23b37cS6lt","$D2025-05-09T11:10:54.496Z"],["b_VtwOBdfxc6m","$D2025-05-09T11:13:13.682Z"],["b_w0lL2VRNKkt","$D2025-05-09T11:15:48.966Z"],["b_S3hUpmR14Qv","$D2025-05-09T11:17:35.650Z"],["b_nF79Pkufikp","$D2025-05-09T11:28:20.457Z"],["b_nlRdHw47dxT","$D2025-05-09T11:32:21.128Z"],["b_8QWFoX8GE0U","$D2025-05-09T11:35:03.820Z"],["b_pzIqwqGZuX2","$D2025-05-09T11:39:33.973Z"],["b_TBgs7P3C05J","$D2025-05-09T11:42:15.747Z"],["b_kMLpK0PIaIZ","$D2025-05-09T11:43:51.377Z"],["b_BRgDC5W2iuN","$D2025-05-09T11:46:31.923Z"],["b_8bvE7Zbbj1b","$D2025-05-09T11:50:00.120Z"],["b_H5NqPpYQK2D","$D2025-05-09T11:56:36.487Z"],["b_8g6nDiKEijL","$D2025-05-09T12:00:05.994Z"],["b_3PKZxrxVPmD","$D2025-05-09T12:13:12.647Z"],["b_nNMFE3ah5eX","$D2025-05-09T12:16:30.347Z"],["b_ckaTx4kOIvE","$D2025-05-09T12:19:35.670Z"],["b_IxGJprcw9rd","$D2025-05-09T12:24:12.810Z"]] aa:[["b_8g6nDiKEijL",false],["b_ckaTx4kOIvE",false],["b_IxGJprcw9rd",false]] ab:[["b_8g6nDiKEijL","$undefined"],["b_ckaTx4kOIvE","$undefined"],["b_IxGJprcw9rd",{"git":{"ref":"v0/ishanpatel3416-2735-f25a8467","sha":"5dd70a60127a64c2c1722ad700ec1522224e7c64","type":"github","repoId":0,"repoName":"Investec-demo","ownerName":"Ishan73744","commitMessage":"Connected via create branch"}}]] ac:[["b_8g6nDiKEijL",null],["b_ckaTx4kOIvE",null],["b_IxGJprcw9rd",null]] ad:[["b_8g6nDiKEijL",true],["b_ckaTx4kOIvE",true],["b_IxGJprcw9rd",true]] ae:[["b_8g6nDiKEijL",true],["b_ckaTx4kOIvE",true],["b_IxGJprcw9rd",true]] af:[] b0:T8142c,[V0_FILE]typescriptreact:file="app/workflows/anomaly-detection/page.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, ArrowRight, Check, FileText, Upload } from "lucide-react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" const steps = [ { id: 1, title: "Upload Documents", description: "Upload or select previously tagged financial documents for analysis", }, { id: 2, title: "Content Standardization", description: "System breaks documents into structured elements", }, { id: 3, title: "Anomaly Detection", description: "Analysis for unusual patterns or outliers", }, { id: 4, title: "Matrix Analysis", description: "Comparison against historical statements or industry norms", }, { id: 5, title: "Anomaly Highlighting", description: "Potential anomalies highlighted with confidence scores", }, { id: 6, title: "Relevancy Assessment", description: "Context provided on why items appear unusual", }, { id: 7, title: "Source Suggestion", description: "Recommendations for additional documents to verify findings", }, { id: 8, title: "Investigation", description: "Investigate specific anomalies and add notes to the project", }, ] export default function AnomalyDetectionPage() { const [currentStep, setCurrentStep] = useState(1) const [uploadedFiles, setUploadedFiles] = useState([]) const handleFileUpload = () => { // Simulate file upload setUploadedFiles(["Q2_2023_Financial_Statement.pdf", "Q1_2023_Financial_Statement.pdf"]) } const handleNextStep = () => { if (currentStep < steps.length) { setCurrentStep(currentStep + 1) } } const handlePreviousStep = () => { if (currentStep > 1) { setCurrentStep(currentStep - 1) } } const progress = (currentStep / steps.length) * 100 return (

Financial Statement Anomaly Detection

{/* Steps sidebar */}

Workflow Progress Step {currentStep} of {steps.length}

{step.id < currentStep ? ( ) : ( {step.id} )}

{step.title}

{step.description}

{/* Main content */}

{steps[currentStep - 1].title} {steps[currentStep - 1].description} {currentStep === 1 && (

Upload New Documents Use Existing Documents

Upload Financial Statements

Drag and drop your financial documents here or click to browse

{uploadedFiles.length > 0 && (

Uploaded Files

{uploadedFiles.map((file, index) => (

{file}

))}

)}

Previously Uploaded Documents

Annual_Report_2022.pdf

Q4_2022_Financial_Statement.pdf

Q3_2022_Financial_Statement.pdf

)} {currentStep === 2 && (

Content Standardization in Progress

The system is currently processing your documents and breaking them down into structured elements for analysis.

Processing Files

{uploadedFiles.map((file, index) => (

{file}

65% complete

))}

)} {currentStep === 3 && (

Anomaly Detection in Progress

Our AI is analyzing the financial statements for unusual patterns or outliers that might indicate errors or areas requiring further investigation.

Analysis Areas

Revenue Recognition

Analyzing timing and classification patterns

Expense Categorization

Checking for unusual allocations

Asset Valuation

Reviewing for inconsistent valuations

Liability Recognition

Identifying potential omissions

)} {/* Additional step content would be implemented similarly */} {currentStep > 3 && (

Step {currentStep} content would be implemented here

)}

) } [V0_FILE]typescriptreact:file="app/workflows/ratio-analysis/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { ArrowLeft, BarChart4, ChevronDown, Clock, Download, FileText, LineChart, Loader2, Plus, Send, X, } from "lucide-react" import Link from "next/link" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Sample data for demonstration const companies = [ { id: "aapl", name: "Apple Inc.", ticker: "AAPL" }, { id: "msft", name: "Microsoft Corporation", ticker: "MSFT" }, { id: "amzn", name: "Amazon.com, Inc.", ticker: "AMZN" }, { id: "googl", name: "Alphabet Inc.", ticker: "GOOGL" }, { id: "meta", name: "Meta Platforms, Inc.", ticker: "META" }, { id: "tsla", name: "Tesla, Inc.", ticker: "TSLA" }, { id: "nvda", name: "NVIDIA Corporation", ticker: "NVDA" }, { id: "jpm", name: "JPMorgan Chase & Co.", ticker: "JPM" }, { id: "v", name: "Visa Inc.", ticker: "V" }, { id: "wmt", name: "Walmart Inc.", ticker: "WMT" }, ] const ratios = [ { id: "current", name: "Current Ratio", category: "Liquidity" }, { id: "quick", name: "Quick Ratio", category: "Liquidity" }, { id: "cash", name: "Cash Ratio", category: "Liquidity" }, { id: "debt-equity", name: "Debt-to-Equity Ratio", category: "Solvency" }, { id: "interest-coverage", name: "Interest Coverage Ratio", category: "Solvency" }, { id: "debt-assets", name: "Debt-to-Assets Ratio", category: "Solvency" }, { id: "roe", name: "Return on Equity (ROE)", category: "Profitability" }, { id: "roa", name: "Return on Assets (ROA)", category: "Profitability" }, { id: "gross-margin", name: "Gross Profit Margin", category: "Profitability" }, { id: "operating-margin", name: "Operating Profit Margin", category: "Profitability" }, { id: "net-margin", name: "Net Profit Margin", category: "Profitability" }, { id: "pe", name: "Price-to-Earnings (P/E) Ratio", category: "Valuation" }, { id: "pb", name: "Price-to-Book (P/B) Ratio", category: "Valuation" }, { id: "ps", name: "Price-to-Sales (P/S) Ratio", category: "Valuation" }, { id: "dividend-yield", name: "Dividend Yield", category: "Valuation" }, ] const timePeriods = [ { id: "1y", name: "Last 1 Year" }, { id: "2y", name: "Last 2 Years" }, { id: "3y", name: "Last 3 Years" }, { id: "5y", name: "Last 5 Years" }, { id: "10y", name: "Last 10 Years" }, { id: "custom", name: "Custom Date Range" }, ] // Sample chart data const chartData = { labels: ["Q1 2022", "Q2 2022", "Q3 2022", "Q4 2022", "Q1 2023", "Q2 2023"], datasets: [ { label: "Gross Profit Margin", data: [0.42, 0.43, 0.41, 0.43, 0.44, 0.45], borderColor: "hsl(221.2 83.2% 53.3%)", backgroundColor: "rgba(59, 130, 246, 0.1)", }, { label: "Net Profit Margin", data: [0.21, 0.22, 0.2, 0.23, 0.24, 0.25], borderColor: "hsl(262.1 83.3% 57.8%)", backgroundColor: "rgba(124, 58, 237, 0.1)", }, { label: "Operating Profit Margin", data: [0.28, 0.29, 0.27, 0.3, 0.31, 0.32], borderColor: "hsl(142.1 76.2% 36.3%)", backgroundColor: "rgba(16, 185, 129, 0.1)", }, ], } type Message = { id: string role: "system" | "user" | "loading" content: string | React.ReactNode timestamp: Date } export default function RatioAnalysisPage() { const [messages, setMessages] = useState([]) const [inputValue, setInputValue] = useState("") const [selectedCompany, setSelectedCompany] = useState<(typeof companies)[0] | null>(null) const [selectedRatios, setSelectedRatios] = useState([]) const [selectedTimePeriod, setSelectedTimePeriod] = useState<(typeof timePeriods)[0] | null>(null) const [isLoading, setIsLoading] = useState(false) const [currentStep, setCurrentStep] = useState(0) const [isAnalysisComplete, setIsAnalysisComplete] = useState(false) const [isStarted, setIsStarted] = useState(false) const messagesEndRef = useRef(null) // Initial welcome message useEffect(() => { setMessages([ { id: "welcome", role: "system", content: (

Financial Ratio Trend Analysis

Welcome to the Financial Ratio Trend Analysis workflow. This tool will automatically extract and analyze key financial ratios for a specified company across multiple quarters, providing trend visualization and insights without manual calculation or data gathering.

), timestamp: new Date(), }, ]) }, []) // Scroll to bottom when messages change useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [messages]) const handleStart = () => { setIsStarted(true) setCurrentStep(1) addMessage( "system",

Let's begin by selecting a company you'd like to analyze:

, ) } const handleCompanySelect = (company: (typeof companies)[0]) => { setSelectedCompany(company) setCurrentStep(2) // Add user message addMessage("user", `I want to analyze ${company.name} (${company.ticker})`) // Add system response setTimeout(() => { addMessage( "system",

Great! You've selected {company.name} ({company.ticker}).

Now, please select the financial ratios you'd like to analyze (you can select multiple):

{selectedRatios.length > 0 && (

{selectedRatios.map((ratio) => ( {ratio.name} ))}

)}

{selectedRatios.length > 0 && ( )}

, ) }, 500) } const handleRatioSelect = (ratio: (typeof ratios)[0]) => { if (!selectedRatios.some((r) => r.id === ratio.id)) { setSelectedRatios([...selectedRatios, ratio]) } } const handleRatioDeselect = (ratio: (typeof ratios)[0]) => { setSelectedRatios(selectedRatios.filter((r) => r.id !== ratio.id)) } const handleRatiosConfirm = () => { setCurrentStep(3) // Add user message showing selected ratios const ratioNames = selectedRatios.map((r) => r.name).join(", ") addMessage("user", `I want to analyze the following ratios: ${ratioNames}`) // Add system response for time period selection setTimeout(() => { addMessage( "system",

Please select the time period for analysis:

, ) }, 500) } const handleTimePeriodSelect = (period: (typeof timePeriods)[0]) => { setSelectedTimePeriod(period) setCurrentStep(4) // Add user message addMessage("user", `I want to analyze data for ${period.name}`) // Show loading state addLoadingMessage("Identifying available data sources...") // Simulate data source identification setTimeout(() => { updateLoadingMessage("Fetching financial data from multiple sources...") // Simulate data fetching setTimeout(() => { updateLoadingMessage("Extracting and normalizing financial elements...") // Simulate data processing setTimeout(() => { updateLoadingMessage("Calculating financial ratios for selected timeframes...") // Simulate ratio calculation setTimeout(() => { updateLoadingMessage("Generating visualizations of ratio trends...") // Simulate chart generation setTimeout(() => { removeLoadingMessage() // Show data sources addMessage( "system",

Data Sources Identified:

SEC Filings (10-K, 10-Q) - Primary Source
Company Annual Reports (2018-2023)
Industry Benchmark Data
Earnings Call Transcripts

, ) // Show visualization setTimeout(() => { addMessage( "system",

Ratio Trend Analysis:

Chart Data Table

r.name)} />

{selectedRatios.map((ratio) => ( ))} {chartData.labels.map((label, i) => ( {selectedRatios.map((ratio, j) => ( ))} ))}

Period	{ratio.name}
{label}	{chartData.datasets[j % chartData.datasets.length].data[i]}

, ) // Show analysis setTimeout(() => { setIsAnalysisComplete(true) addMessage( "system",

Analysis Insights:

Overall Trend: {selectedCompany?.name}'s profitability metrics have shown a positive trend over the analyzed period, with all selected ratios improving since Q1 2022.

{selectedRatios.map((ratio, i) => (

{ratio.name}: {getRandomInsight(ratio.name, selectedCompany?.name || "")}

))}

Industry Comparison: Compared to industry peers, {selectedCompany?.name} has maintained above-average profitability metrics, particularly in{" "} {selectedRatios[0]?.name || "Gross Profit Margin"}.

Key Factors: The improvement in profitability metrics coincides with the company's strategic initiatives announced in Q4 2022, including cost optimization and supply chain improvements.

Sources:

SEC Form 10-K (Annual Report) - Filed Feb 2023

SEC Form 10-Q (Quarterly Reports) - Q1-Q2 2023

Industry Benchmark Data - Financial Services Database

, ) }, 1000) }, 1000) }, 1500) }, 1500) }, 1500) }, 1500) }, 1500) } const addMessage = (role: "system" | "user", content: string | React.ReactNode) => { setMessages((prev) => [ ...prev, { id: Date.now().toString(), role, content, timestamp: new Date(), }, ]) } const addLoadingMessage = (content: string) => { setIsLoading(true) setMessages((prev) => [ ...prev, { id: "loading", role: "loading", content, timestamp: new Date(), }, ]) } const updateLoadingMessage = (content: string) => { setMessages((prev) => prev.map((msg) => (msg.id === "loading" ? { ...msg, content } : msg))) } const removeLoadingMessage = () => { setIsLoading(false) setMessages((prev) => prev.filter((msg) => msg.id !== "loading")) } const handleSendMessage = (e: React.FormEvent) => { e.preventDefault() if (!inputValue.trim()) return // Add user message addMessage("user", inputValue) setInputValue("") // Simulate response setTimeout(() => { addMessage( "system",

I'll help you with that. What specific aspect of the analysis would you like to explore further?

, ) }, 1000) } // Helper function to generate random insights const getRandomInsight = (ratioName: string, companyName: string) => { const insights = [ `${ratioName} has improved by 7.1% over the analyzed period, indicating stronger financial performance.`, `${ratioName} shows a steady upward trend, with a notable 3.2% increase in the most recent quarter.`, `${ratioName} has outperformed the industry average by 12% throughout the analyzed period.`, `${companyName}'s ${ratioName} demonstrates consistent improvement, reflecting effective management strategies.`, `${ratioName} experienced temporary volatility in Q3 2022 but recovered strongly in subsequent quarters.`, ] return insights[Math.floor(Math.random() * insights.length)] } return (

{/* Header */}

Financial Ratio Trend Analysis

{selectedCompany && (

{selectedCompany.ticker} {selectedRatios.length > 0 && ( <> | {selectedRatios.length} ratios selected )}

)}

{/* Chat container */}

{messages.map((message) => (

{message.role === "loading" ? (

{message.content}

) : ( message.content )}

))}

{/* Input area */}

) } // Company selector component function CompanySelector({ onSelect }: { onSelect: (company: (typeof companies)[0]) => void }) { const [open, setOpen] = useState(false) return ( No company found. {companies.map((company) => ( { onSelect(company) setOpen(false) }} > {company.name} ({company.ticker}) ))} ) } // Ratio selector component function RatioSelector({ selectedRatios, onSelectRatio, onDeselectRatio, }: { selectedRatios: typeof ratios onSelectRatio: (ratio: (typeof ratios)[0]) => void onDeselectRatio: (ratio: (typeof ratios)[0]) => void }) { const [open, setOpen] = useState(false) // Group ratios by category const ratiosByCategory = ratios.reduce( (acc, ratio) => { if (!acc[ratio.category]) { acc[ratio.category] = [] } acc[ratio.category].push(ratio) return acc }, {} as Record, ) return ( No ratio found. {Object.entries(ratiosByCategory).map(([category, categoryRatios]) => ( {categoryRatios.map((ratio) => { const isSelected = selectedRatios.some((r) => r.id === ratio.id) return ( { if (isSelected) { onDeselectRatio(ratio) } else { onSelectRatio(ratio) } }} >

{ratio.name}

) })} ))} ) } // Time period selector component function TimePeriodSelector({ onSelect }: { onSelect: (period: (typeof timePeriods)[0]) => void }) { const [open, setOpen] = useState(false) return ( {timePeriods.map((period) => ( { onSelect(period) setOpen(false) }} > {period.name} ))} ) } // Chart placeholder component function ChartPlaceholder({ ratios }: { ratios: string[] }) { return (

Financial Ratio Trends (Last 6 Quarters)

Chart showing trends for {ratios.join(", ")}

) } [V0_FILE]plaintext:file="public/mystical-forest-spirit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mystical-forest-spirit-OwmJQxP0kLJ1XTWLWHt15UYnBzBzX4.png" isMerged="true" [V0_FILE]plaintext:file="public/fynd-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-xQryR1gjpUOdyqKY6k1EnDJKukPmqm.png" isMerged="true" [V0_FILE]typescriptreact:file="app/workflows/market-industry-research/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/workflow/customization/industry-selector.tsx" isMerged="true" "use client" import { useState } from "react" import { Search } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import type { Industry } from "@/lib/workflow/types" interface IndustrySelectorProps { industries: Industry[] onSelect: (industry: Industry) => void } export function IndustrySelector({ industries, onSelect }: IndustrySelectorProps) { const [searchTerm, setSearchTerm] = useState("") // Filter industries based on search term const filteredIndustries = searchTerm ? industries.filter( (industry) => industry.name.toLowerCase().includes(searchTerm.toLowerCase()) || industry.macroSector.toLowerCase().includes(searchTerm.toLowerCase()) || industry.subSector.toLowerCase().includes(searchTerm.toLowerCase()), ) : industries // Get featured industries (for quick selection) const featuredIndustries = industries.filter((i) => ["quick-commerce", "tech", "healthcare", "finance"].includes(i.id), ) return (

setSearchTerm(e.target.value)} />

{featuredIndustries.map((industry) => ( onSelect(industry)} > {industry.name} ))}

) } [V0_FILE]typescriptreact:file="app/workflows/market-industry-research/refactored-page.tsx" isMerged="true" "use client" import { useState, useRef, useEffect } from "react" import { WorkflowLayout } from "@/components/workflow/workflow-layout" import { WorkflowHeader } from "@/components/workflow/workflow-header" import { ChatInterface } from "@/components/workflow/chat-interface" import { ChatInput } from "@/components/workflow/chat-input" import { CustomizationBox } from "@/components/workflow/customization-box" import { IndustrySelector } from "@/components/workflow/customization/industry-selector" import { DataSourceSelector } from "@/components/workflow/customization/data-source-selector" import { MetricsSelector } from "@/components/workflow/customization/metrics-selector" import { ChartSelector } from "@/components/workflow/customization/chart-selector" import { MarketReport } from "@/components/workflow/report/market-report" import { WorkflowEngine } from "@/lib/workflow/workflow-engine" import { industries, marketTrendData } from "@/lib/workflow/market-research-data" import type { MessageProps } from "@/components/workflow/chat-message" // Define the workflow configuration const workflowConfig = { id: "market-industry-research", title: "Market & Industry Research Workflow", description: "Research and analyze industry trends and market conditions", steps: [ { id: 1, title: "Select Industry", description: "Choose an industry to research", }, { id: 2, title: "Define Region", description: "Specify the geographic focus", }, { id: 3, title: "Select Data Sources", description: "Choose data sources for analysis", }, { id: 4, title: "Select Metrics", description: "Choose performance metrics to analyze", }, { id: 5, title: "Select Visualizations", description: "Choose chart types for data visualization", }, { id: 6, title: "Review Insights", description: "Review the final analysis and insights", }, ], initialMessage: (

What industry or market are you exploring today?

), } export default function MarketIndustryResearchPage() { // Initialize the workflow engine const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig)) // State management const [messages, setMessages] = useState([]) const [selectedIndustry, setSelectedIndustry] = useState<(typeof industries)[0] | null>(null) const [currentStep, setCurrentStep] = useState(1) const [isAnalysisComplete, setIsAnalysisComplete] = useState(false) const [activeCustomizationId, setActiveCustomizationId] = useState(null) const [isMounted, setIsMounted] = useState(false) const [selectedMetrics, setSelectedMetrics] = useState([ "Revenue CAGR", "Gross Margin", "Customer Retention", "Unit Economics", ]) const [selectedCharts, setSelectedCharts] = useState({ marketGrowth: true, marketShare: true, retentionRate: true, }) // References const contentContainerRef = useRef(null) // Initialize the workflow useEffect(() => { setIsMounted(true) const initialMessages = workflowEngine.initialize() setMessages(initialMessages) setActiveCustomizationId(workflowEngine.getActiveCustomizationId()) }, []) // Handle industry selection const handleIndustrySelect = (industry: (typeof industries)[0]) => { setSelectedIndustry(industry) setCurrentStep(3) // Skip to step 3 (data sources) // Add user message workflowEngine.addMessage("user", `I want to research the ${industry.name} industry`) // Go directly to data sources step setTimeout(() => { const newId = workflowEngine.addMessage( "system",

Select data sources for your analysis:

, true, ) setActiveCustomizationId(newId) setMessages(workflowEngine.getMessages()) }, 500) } // Handle data source selection const handleDataSourceSelection = () => { // Add user message with specific data sources workflowEngine.addMessage( "user", "I'll use DPIIT, MCA, NITI Aayog, Tracxn, Pitchbook, Statista, McKinsey, BCG, Redseer, and NSE/BSE Filings as data sources", ) // Show loading message workflowEngine.addLoadingMessage("Analyzing selected data sources...") setMessages(workflowEngine.getMessages()) // Simulate processing setTimeout(() => { workflowEngine.removeLoadingMessage() showKPISelection() setMessages(workflowEngine.getMessages()) }, 1500) } // Show KPI selection const showKPISelection = () => { setCurrentStep(4) workflowEngine.setCurrentStep(4) const newId = workflowEngine.addMessage( "system",

What performance metrics would you like to focus on?

, true, ) setActiveCustomizationId(newId) setMessages(workflowEngine.getMessages()) } // Handle metrics selection and generate visuals const generateVisuals = () => { setCurrentStep(5) workflowEngine.setCurrentStep(5) // Add user message with specific metrics workflowEngine.addMessage("user", `Let's continue with these metrics: ${selectedMetrics.join(", ")}`) // Show loading message workflowEngine.addLoadingMessage("Analyzing data for visualization options...") setMessages(workflowEngine.getMessages()) // Simulate processing setTimeout(() => { workflowEngine.removeLoadingMessage() const newId = workflowEngine.addMessage( "system",

What types of charts would you like to include in your analysis?

, true, ) setActiveCustomizationId(newId) setMessages(workflowEngine.getMessages()) }, 2000) } // Generate final insights const generateFinalInsights = () => { setCurrentStep(6) workflowEngine.setCurrentStep(6) // Create a list of selected chart names const selectedChartNames = [] if (selectedCharts.marketGrowth) selectedChartNames.push("Market Size Growth") if (selectedCharts.marketShare) selectedChartNames.push("Market Share") if (selectedCharts.retentionRate) selectedChartNames.push("Retention Rate") // Add user message with selected charts workflowEngine.addMessage("user", `I want to include these charts: ${selectedChartNames.join(", ")}`) // Show loading message workflowEngine.addLoadingMessage("Compiling final insights and recommendations...") setMessages(workflowEngine.getMessages()) // Simulate processing setTimeout(() => { workflowEngine.removeLoadingMessage() setIsAnalysisComplete(true) // Get market data for Quick Commerce const marketData = marketTrendData["quick-commerce"] workflowEngine.addMessage( "system", { // Reset the workflow const initialMessages = workflowEngine.initialize() setMessages(initialMessages) setActiveCustomizationId(workflowEngine.getActiveCustomizationId()) setCurrentStep(1) setIsAnalysisComplete(false) }} />, ) setMessages(workflowEngine.getMessages()) }, 2000) } // Handle editing a message const handleEditMessage = (messageId: string) => { workflowEngine.handleEditMessage(messageId) setMessages(workflowEngine.getMessages()) setActiveCustomizationId(workflowEngine.getActiveCustomizationId()) setCurrentStep(workflowEngine.getCurrentStep()) } // Handle chart selection const handleChartSelection = (chartType: string, selected: boolean) => { setSelectedCharts({ ...selectedCharts, [chartType]: selected, }) } // Handle metric selection/deselection const handleSelectMetric = (metric: string) => { if (!selectedMetrics.includes(metric)) { setSelectedMetrics([...selectedMetrics, metric]) } } const handleDeselectMetric = (metric: string) => { setSelectedMetrics(selectedMetrics.filter((m) => m !== metric)) } // Render customization content based on current step const renderCustomizationContent = () => { switch (currentStep) { case 1: return case 3: return case 4: return ( ) case 5: return ( ) default: return null } } // Add customization content to messages const messagesWithCustomization = messages.map((message) => { if (message.id === activeCustomizationId && message.showCustomization) { return { ...message, customization: {renderCustomizationContent()}, } } return message }) return ( {isMounted && ( <> {isAnalysisComplete && ( { // Handle follow-up questions here workflowEngine.addMessage("user", message) setMessages(workflowEngine.getMessages()) // Simulate response setTimeout(() => { workflowEngine.addMessage( "system",

I'll help you with that. What specific aspect of the analysis would you like to explore further?

, ) setMessages(workflowEngine.getMessages()) }, 1000) }} placeholder="Tell us more about how you want to customize this output" fixed={true} contentContainerRef={contentContainerRef} /> )} )} ) } [V0_FILE]typescriptreact:file="components/workflow/customization/document-uploader.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { FileText, Upload, X } from "lucide-react" import { Button } from "@/components/ui/button" interface DocumentUploaderProps { onUpload: (documentName: string) => void } export function DocumentUploader({ onUpload }: DocumentUploaderProps) { const [uploadedFile, setUploadedFile] = useState(null) const [isDragging, setIsDragging] = useState(false) const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = () => { setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) // Simulate file upload if (e.dataTransfer.files.length > 0) { const file = e.dataTransfer.files[0] if (file.type === "application/pdf" || file.name.endsWith(".pdf")) { setUploadedFile(file.name) } else { alert("Please upload a PDF file") } } } const handleFileChange = (e: React.ChangeEvent) => { // Simulate file upload if (e.target.files && e.target.files.length > 0) { const file = e.target.files[0] if (file.type === "application/pdf" || file.name.endsWith(".pdf")) { setUploadedFile(file.name) } else { alert("Please upload a PDF file") } } } const handleSimulatedUpload = () => { // Simulate a file upload with a predefined name setUploadedFile("Annual_Report_2022.pdf") } const handleRemoveFile = () => { setUploadedFile(null) } const handleContinue = () => { if (uploadedFile) { onUpload(uploadedFile) } } return (

{!uploadedFile ? (

document.getElementById("file-upload")?.click()} >

Drop your PDF file here or click to upload

Only PDF files containing financial statements

) : (

{uploadedFile}

)} {!uploadedFile && (

)} {uploadedFile && ( )}

) } [V0_FILE]typescriptreact:file="app/workflows/financial-statement-extraction/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/workflow/customization/chart-type-selector.tsx" isMerged="true" "use client" import { useState } from "react" import { BarChart, LineChart, PieChart, AreaChart } from "lucide-react" import { Button } from "@/components/ui/button" interface ChartTypeSelectorProps { onSelect: (chartType: string) => void detectedType: string } export function ChartTypeSelector({ onSelect, detectedType }: ChartTypeSelectorProps) { const [selectedType, setSelectedType] = useState(detectedType) const chartTypes = [ { id: "bar", name: "Bar Chart", icon: BarChart }, { id: "line", name: "Line Chart", icon: LineChart }, { id: "pie", name: "Pie Chart", icon: PieChart }, { id: "area", name: "Area Chart", icon: AreaChart }, ] const handleTypeSelect = (type: string) => { setSelectedType(type) } const handleContinue = () => { onSelect(selectedType) } return (

I've detected a {detectedType} chart in your screenshot. Please confirm or select a different chart type:

{chartTypes.map((type) => { const Icon = type.icon return (

handleTypeSelect(type.id)} > {type.name}

) })}

) } [V0_FILE]typescriptreact:file="components/workflow/customization/chart-customization.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" interface ChartCustomizationProps { options: { includeDataTable: boolean applyColorScheme: string addTrendlines: boolean } onSubmit: (options: { includeDataTable: boolean applyColorScheme: string addTrendlines: boolean }) => void } export function ChartCustomization({ options, onSubmit }: ChartCustomizationProps) { const [customOptions, setCustomOptions] = useState(options) const handleOptionChange = (option: string, value: any) => { setCustomOptions({ ...customOptions, [option]: value, }) } const handleSubmit = () => { onSubmit(customOptions) } return (

handleOptionChange("includeDataTable", checked)} className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]" /> Include data table with the chart

handleOptionChange("addTrendlines", checked)} className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]" /> Add trendlines to data series

Color scheme: handleOptionChange("applyColorScheme", value)} className="flex flex-col space-y-1" >

Default (match screenshot)

Office Theme

Monochrome

Colorful

) } [V0_FILE]typescriptreact:file="components/workflow/report/chart-conversion-result.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { Download, RefreshCw, FileSpreadsheet } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface ChartDataset { name: string data: number[] color: string } interface ChartData { type: string title: string labels: string[] datasets: ChartDataset[] } interface ChartConversionResultProps { chartData: ChartData chartType: string chartOptions: { includeDataTable: boolean applyColorScheme: string addTrendlines: boolean } screenshotName: string onRestart: () => void } export function ChartConversionResult({ chartData, chartType, chartOptions, screenshotName, onRestart, }: ChartConversionResultProps) { const handleDownload = () => { // In a real application, this would trigger the download of the Excel file alert("Downloading Excel chart...") } // Function to render a preview of the chart const renderChartPreview = () => { return (

) } return (

Converted Excel Chart

Successfully converted {screenshotName} to an editable Excel chart.

Chart Preview Data Table {/* Chart Preview Tab */} {renderChartPreview()} {/* Data Table Tab */}

{chartData.datasets.map((dataset) => ( ))} {chartData.labels.map((label, i) => ( {chartData.datasets.map((dataset) => ( ))} ))}

Period	{dataset.name}
{label}	{new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(dataset.data[i])}

Applied Enhancements:

Fully editable chart with source data
{chartOptions.applyColorScheme === "default" ? "Original color scheme preserved" : `Applied ${chartOptions.applyColorScheme} color scheme`}
Included data table with the chart
Added trendlines to visualize data patterns
Optimized for printing and presentation

) } [V0_FILE]typescriptreact:file="app/workflows/screenshot-chart/loading.tsx" isMerged="true" export default function Loading() { return null } [V0_FILE]plaintext:file="public/sales-performance-comparison.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/sales-performance-comparison-nJNviLw0K9DeUs8k4sWPppvwDk9p8B.png" isMerged="true" [V0_FILE]typescriptreact:file="components/workflow/customization/summary-customization.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Textarea } from "@/components/ui/textarea" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface SummaryCustomizationProps { documentSections: Array<{ id: string; title: string; selected: boolean }> customSections: Array<{ id: string; title: string; description: string }> summaryOptions: { length: string tone: string includeKeyQuotes: boolean includeVisualElements: boolean } onUpdateSections: (sections: Array<{ id: string; title: string; selected: boolean }>) => void onUpdateCustomSections: (sections: Array<{ id: string; title: string; description: string }>) => void onUpdateOptions: (options: { length: string tone: string includeKeyQuotes: boolean includeVisualElements: boolean }) => void onSubmit: ( sections: Array<{ id: string; title: string; selected: boolean }>, customSections: Array<{ id: string; title: string; description: string }>, options: { length: string tone: string includeKeyQuotes: boolean includeVisualElements: boolean }, ) => void } export function SummaryCustomization({ documentSections, customSections, summaryOptions, onUpdateSections, onUpdateCustomSections, onUpdateOptions, onSubmit, }: SummaryCustomizationProps) { const [newSectionTitle, setNewSectionTitle] = useState("") const [newSectionDescription, setNewSectionDescription] = useState("") const [activeTab, setActiveTab] = useState("sections") const handleSectionToggle = (id: string, checked: boolean) => { const updatedSections = documentSections.map((section) => section.id === id ? { ...section, selected: checked } : section, ) onUpdateSections(updatedSections) } const handleAddCustomSection = () => { if (newSectionTitle.trim()) { const newSection = { id: `custom-${Date.now()}`, title: newSectionTitle, description: newSectionDescription, } onUpdateCustomSections([...customSections, newSection]) setNewSectionTitle("") setNewSectionDescription("") } } const handleRemoveCustomSection = (id: string) => { const updatedSections = customSections.filter((section) => section.id !== id) onUpdateCustomSections(updatedSections) } const handleOptionChange = (option: string, value: any) => { onUpdateOptions({ ...summaryOptions, [option]: value, }) } const handleSubmit = () => { onSubmit(documentSections, customSections, summaryOptions) } return (

Document Sections Summary Options {/* Document Sections Tab */}

Select sections to include:

{documentSections.map((section) => (

handleSectionToggle(section.id, checked === true)} className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]" /> {section.title}

))}

Add custom sections:

setNewSectionTitle(e.target.value)} className="border-[#dee6f5] focus-visible:ring-[#004ce6]" />

setNewSectionDescription(e.target.value)}
                className="border-[#dee6f5] focus-visible:ring-[#004ce6] min-h-[80px]"
              />
              <Button
                onClick={handleAddCustomSection}
                disabled={!newSectionTitle.trim()}
                className="w-full gap-1 bg-[#eaf0fc] text-[#004ce6] hover:bg-[#d9e4f7] border-[#d9e4f7]"
              >
                <Plus className="h-4 w-4" />
                Add Custom Section
              </Button>
            </div>

{customSections.length > 0 && (
              <div className="space-y-2 mt-4">
                <h4 className="text-xs font-medium text-[#6e7b96]">Custom sections:</h4>
                {customSections.map((section) => (
                  <div
                    key={section.id}
                    className="flex items-center justify-between rounded-md border border-[#e1e8f6] bg-white p-2"
                  >
                    <div className="flex-1">
                      <div className="text-sm font-medium text-[#001742]">{section.title}</div>
                      {section.description && (
                        <div className="text-xs text-[#6e7b96] line-clamp-1">{section.description}</div>
                      )}
                    </div>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-6 w-6 text-[#8098c4] hover:text-[#004ce6] hover:bg-transparent"
                      onClick={() => handleRemoveCustomSection(section.id)}
                    >
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </TabsContent>

{/* Summary Options Tab */}
        <TabsContent value="options" className="pt-4 space-y-6">
          <div className="space-y-2">
            <Label className="text-sm font-medium text-[#001742]">Summary Length:</Label>
            <RadioGroup
              value={summaryOptions.length}
              onValueChange={(value) => handleOptionChange("length", value)}
              className="flex flex-col space-y-1"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="short" id="length-short" className="border-[#dee6f5] text-[#004ce6]" />
                <Label htmlFor="length-short" className="text-sm text-[#001742]">
                  Short (concise overview)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="medium" id="length-medium" className="border-[#dee6f5] text-[#004ce6]" />
                <Label htmlFor="length-medium" className="text-sm text-[#001742]">
                  Medium (balanced summary)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="detailed" id="length-detailed" className="border-[#dee6f5] text-[#004ce6]" />
                <Label htmlFor="length-detailed" className="text-sm text-[#001742]">
                  Detailed (comprehensive analysis)
                </Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label className="text-sm font-medium text-[#001742]">Tone:</Label>
            <RadioGroup
              value={summaryOptions.tone}
              onValueChange={(value) => handleOptionChange("tone", value)}
              className="flex flex-col space-y-1"
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem
                  value="professional"
                  id="tone-professional"
                  className="border-[#dee6f5] text-[#004ce6]"
                />
                <Label htmlFor="tone-professional" className="text-sm text-[#001742]">
                  Professional (formal, business-oriented)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="casual" id="tone-casual" className="border-[#dee6f5] text-[#004ce6]" />
                <Label htmlFor="tone-casual" className="text-sm text-[#001742]">
                  Casual (conversational, accessible)
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="academic" id="tone-academic" className="border-[#dee6f5] text-[#004ce6]" />
                <Label htmlFor="tone-academic" className="text-sm text-[#001742]">
                  Academic (scholarly, technical)
                </Label>
              </div>
            </RadioGroup>
          </div>

<div className="space-y-2">
            <Label className="text-sm font-medium text-[#001742]">Additional Features:</Label>
            <div className="space-y-2">
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="include-quotes"
                  checked={summaryOptions.includeKeyQuotes}
                  onCheckedChange={(checked) => handleOptionChange("includeKeyQuotes", checked === true)}
                  className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
                />
                <Label htmlFor="include-quotes" className="text-sm text-[#001742]">
                  Include key quotes from the document
                </Label>
              </div>
              <div className="flex items-center space-x-2">
                <Checkbox
                  id="include-visuals"
                  checked={summaryOptions.includeVisualElements}
                  onCheckedChange={(checked) => handleOptionChange("includeVisualElements", checked === true)}
                  className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
                />
                <Label htmlFor="include-visuals" className="text-sm text-[#001742]">
                  Include visual elements (charts, tables, etc.)
                </Label>
              </div>
            </div>
          </div>
        </TabsContent>
      </Tabs>

<Button
        onClick={handleSubmit}
        className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
      >
        Generate Summary
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/report/summary-result.tsx" isMerged="true"
"use client"

import { Download, RefreshCw, FileText, ExternalLink } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

interface SummaryResultProps {
  documentName: string
  sections: Array<{ id: string; title: string; selected?: boolean }>
  customSections: Array<{ id: string; title: string; description: string }>
  summaryOptions: {
    length: string
    tone: string
    includeKeyQuotes: boolean
    includeVisualElements: boolean
  }
  onRestart: () => void
}

export function SummaryResult({
  documentName,
  sections,
  customSections,
  summaryOptions,
  onRestart,
}: SummaryResultProps) {
  const handleDownload = () => {
    // In a real application, this would trigger the download of the PDF file
    alert("Downloading summary as PDF...")
  }

// Generate sample summary content based on the selected options
  const generateSampleContent = (sectionTitle: string) => {
    const lengthMultiplier = summaryOptions.length === "short" ? 1 : summaryOptions.length === "medium" ? 2 : 3
    const paragraphCount = lengthMultiplier * 2

const content = []

for (let i = 0; i < paragraphCount; i++) {
      content.push(
        <p key={i} className="mb-3 text-[#4e5971]">
          {getSampleParagraph(sectionTitle, summaryOptions.tone, i)}
        </p>,
      )
    }

if (summaryOptions.includeKeyQuotes && sectionTitle !== "Conclusion") {
      content.push(
        <blockquote key="quote" className="border-l-4 border-[#004ce6] pl-4 italic my-4 text-[#4e5971]">
          "{getRandomQuote(sectionTitle)}"
        </blockquote>,
      )
    }

if (
      summaryOptions.includeVisualElements &&
      (sectionTitle === "Key Findings" ||
        sectionTitle === "Market Analysis" ||
        sectionTitle === "Financial Projections")
    ) {
      content.push(
        <div key="visual" className="my-4 p-4 bg-[#f4f9ff] rounded-md border border-[#dee6f5] text-center">
          <p className="text-sm text-[#6e7b96]">[Visual element: {getVisualElementType(sectionTitle)}]</p>
        </div>,
      )
    }

return content
  }

// Helper function to get a sample paragraph
  const getSampleParagraph = (sectionTitle: string, tone: string, index: number) => {
    const toneAdjective = tone === "professional" ? "clear" : tone === "casual" ? "straightforward" : "comprehensive"
    const toneAdverb = tone === "professional" ? "effectively" : tone === "casual" ? "simply" : "thoroughly"

if (index === 0) {
      return `This ${toneAdjective} ${sectionTitle.toLowerCase()} provides a ${tone} overview of the key points discussed in the document. The analysis ${toneAdverb} demonstrates the main concepts and findings related to this section.`
    } else {
      return `Further examination reveals additional insights within this section. The document ${toneAdverb} explains how these findings contribute to the overall narrative and supports the main arguments with ${tone === "academic" ? "empirical evidence" : "relevant examples"}.`
    }
  }

// Helper function to get a random quote
  const getRandomQuote = (sectionTitle: string) => {
    const quotes = [
      "The data clearly indicates a significant trend toward increased market adoption in the coming fiscal year.",
      "Our analysis suggests that implementing these recommendations could result in a 15-20% improvement in operational efficiency.",
      "As noted in the research, 'the correlation between these variables presents a compelling case for strategic realignment'.",
      "The competitive landscape has evolved substantially, requiring a more agile approach to product development.",
    ]
    return quotes[Math.floor(Math.random() * quotes.length)]
  }

// Helper function to get visual element type
  const getVisualElementType = (sectionTitle: string) => {
    if (sectionTitle === "Key Findings") return "Comparison chart of main findings"
    if (sectionTitle === "Market Analysis") return "Market share pie chart"
    if (sectionTitle === "Financial Projections") return "Revenue forecast line graph"
    return "Relevant visualization"
  }

return (
    <div className="space-y-4">
      <Card className="border-[#e1e8f6]">
        <CardContent className="p-4">
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-[#001742]">Document Summary</h3>
              <div className="text-xs text-[#6e7b96] bg-[#f4f9ff] px-2 py-1 rounded">
                {summaryOptions.length} • {summaryOptions.tone}
              </div>
            </div>

<p className="text-[#4e5971]">
              Personalized summary of <span className="font-medium">{documentName}</span> with{" "}
              {sections.length + customSections.length} sections.
            </p>

<Tabs defaultValue="preview" className="mt-6">
              <TabsList className="grid w-full grid-cols-2 bg-[#f4f7ff]">
                <TabsTrigger
                  value="preview"
                  className="data-[state=active]:bg-white data-[state=active]:text-[#001742]"
                >
                  Summary Preview
                </TabsTrigger>
                <TabsTrigger
                  value="outline"
                  className="data-[state=active]:bg-white data-[state=active]:text-[#001742]"
                >
                  Document Outline
                </TabsTrigger>
              </TabsList>

{/* Summary Preview Tab */}
              <TabsContent value="preview" className="pt-4">
                <div className="border border-[#e1e8f6] rounded-md p-4 max-h-[500px] overflow-y-auto">
                  <div className="prose max-w-none">
                    <h1 className="text-xl font-bold text-[#001742] mb-4">Summary of {documentName}</h1>

{sections.map((section) => (
                      <div key={section.id} className="mb-6">
                        <h2 className="text-lg font-semibold text-[#001742] mb-2">{section.title}</h2>
                        {generateSampleContent(section.title)}
                      </div>
                    ))}

{customSections.map((section) => (
                      <div key={section.id} className="mb-6">
                        <h2 className="text-lg font-semibold text-[#001742] mb-2">{section.title}</h2>
                        <p className="mb-3 text-[#4e5971]">
                          {section.description || "Custom section content based on your specific requirements."}
                        </p>
                        {generateSampleContent(section.title)}
                      </div>
                    ))}
                  </div>
                </div>
              </TabsContent>

{/* Document Outline Tab */}
              <TabsContent value="outline" className="pt-4">
                <div className="border border-[#e1e8f6] rounded-md p-4">
                  <h3 className="text-sm font-medium text-[#001742] mb-3">Document Structure</h3>
                  <ul className="space-y-2">
                    {sections.map((section) => (
                      <li key={section.id} className="flex items-center gap-2">
                        <FileText className="h-4 w-4 text-[#8098c4]" />
                        <span className="text-sm text-[#4e5971]">{section.title}</span>
                      </li>
                    ))}
                    {customSections.map((section) => (
                      <li key={section.id} className="flex items-center gap-2">
                        <FileText className="h-4 w-4 text-[#004ce6]" />
                        <span className="text-sm text-[#004ce6]">{section.title} (Custom)</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </TabsContent>
            </Tabs>

<div className="mt-6 space-y-2">
              <h4 className="font-medium text-[#001742]">Summary Features:</h4>
              <ul className="space-y-1 text-sm text-[#4e5971]">
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>
                    {summaryOptions.length === "short"
                      ? "Concise overview focusing on key points"
                      : summaryOptions.length === "medium"
                        ? "Balanced summary with moderate detail"
                        : "Comprehensive analysis with extensive detail"}
                  </span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>
                    {summaryOptions.tone === "professional"
                      ? "Professional tone suitable for business contexts"
                      : summaryOptions.tone === "casual"
                        ? "Casual tone that's conversational and accessible"
                        : "Academic tone with scholarly language and technical precision"}
                  </span>
                </li>
                {summaryOptions.includeKeyQuotes && (
                  <li className="flex items-start gap-2">
                    <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                    <span>Key quotes extracted from the original document</span>
                  </li>
                )}
                {summaryOptions.includeVisualElements && (
                  <li className="flex items-start gap-2">
                    <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                    <span>Visual elements included for enhanced comprehension</span>
                  </li>
                )}
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Structured according to your selected sections</span>
                </li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="mt-6 flex flex-wrap gap-2">
        <Button
          size="sm"
          className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto"
          onClick={handleDownload}
        >
          <Download className="h-4 w-4" />
          Download PDF Summary
        </Button>
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
        >
          <ExternalLink className="h-4 w-4" />
          Open in PDF Viewer
        </Button>
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
          onClick={onRestart}
        >
          <RefreshCw className="h-4 w-4" />
          Summarize Another Document
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/document-summary/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/workflow/workflow-engine.tsx" isQuickEdit="true" isMerged="true"
import type { ReactNode } from "react"
import type { Message, WorkflowConfig } from "@/lib/workflow/types"

export class WorkflowEngine {
  private config: WorkflowConfig
  private currentStep = 1
  private messages: Message[] = []
  private activeCustomizationId: string | null = null

constructor(config: WorkflowConfig) {
    this.config = config
  }

public initialize(): Message[] {
    const welcomeId = "welcome-" + Date.now()
    this.activeCustomizationId = welcomeId

this.messages = [
      {
        id: welcomeId,
        role: "system",
        content: this.config.initialMessage,
        timestamp: new Date(),
        showCustomization: true,
        step: 1,
      },
    ]

return this.messages
  }

public getCurrentStep(): number {
    return this.currentStep
  }

public getMessages(): Message[] {
    return this.messages
  }

public getActiveCustomizationId(): string | null {
    return this.activeCustomizationId
  }

public addMessage(
    role: "system" | "user" | "loading",
    content: string | ReactNode,
    showCustomization = false,
  ): string {
    const newId = Date.now().toString()

// If this is a system message with customization, update the active customization ID
    if (role === "system" && showCustomization) {
      this.activeCustomizationId = newId
    }

this.messages = [
      ...this.messages,
      {
        id: newId,
        role,
        content,
        timestamp: new Date(),
        showCustomization,
        step: this.currentStep,
      },
    ]

return newId
  }

public setCurrentStep(step: number): void {
    this.currentStep = step
  }

public addLoadingMessage(content: string): void {
    this.messages = [
      ...this.messages,
      {
        id: "loading",
        role: "loading",
        content,
        timestamp: new Date(),
      },
    ]
  }

public updateLoadingMessage(content: string): void {
    this.messages = this.messages.map((msg) => (msg.id === "loading" ? { ...msg, content } : msg))
  }

public removeLoadingMessage(): void {
    this.messages = this.messages.filter((msg) => msg.id !== "loading")
  }

public handleEditMessage(messageId: string): void {
    // Find the message index
    const messageIndex = this.messages.findIndex((msg) => msg.id === messageId)
    if (messageIndex >= 0) {
      const message = this.messages[messageIndex]

// Remove all messages after this one
      this.messages = this.messages.slice(0, messageIndex + 1)

// Reset the current step based on the message
      if (message.step) {
        this.currentStep = message.step
      }

// Set this message as the active customization
      if (message.role === "user") {
        // Find the next system message after this user message
        const nextSystemMessage = this.messages.find((msg, idx) => idx > messageIndex && msg.role === "system")
        if (nextSystemMessage && nextSystemMessage.showCustomization) {
          this.activeCustomizationId = nextSystemMessage.id
        }
      }
    }
  }
}
[V0_FILE]typescriptreact:file="components/workflow/workflow-header.tsx" isQuickEdit="true" isMerged="true"
import React from "react"
import Link from "next/link"

interface WorkflowHeaderProps {
  title: string
  breadcrumbs?: { label: string; href: string }[]
}

export function WorkflowHeader({ title, breadcrumbs = [] }: WorkflowHeaderProps) {
  return (
    <div className="px-6 py-4">
      <div className="flex items-center justify-start">
        {breadcrumbs.length > 0 ? (
          <>
            {breadcrumbs.map((crumb, index) => (
              <React.Fragment key={index}>
                {index > 0 && <div className="mx-2 text-[#8098c4]">/</div>}
                <Link href={crumb.href} className="text-[#8098c4] hover:text-[#004ce6]">
                  {crumb.label}
                </Link>
              </React.Fragment>
            ))}
            <div className="mx-2 text-[#8098c4]">/</div>
          </>
        ) : (
          <>
            <Link href="/" className="text-[#8098c4] hover:text-[#004ce6]">
              Workflows
            </Link>
            <div className="mx-2 text-[#8098c4]">/</div>
          </>
        )}
        <h1 className="text-lg font-semibold text-[#001742]">{title}</h1>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/report/extraction-result.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { Download, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { useState } from "react"

interface FinancialStatement {
  title: string
  data: Array<Record<string, string | number>>
}

interface FinancialStatements {
  incomeStatement: FinancialStatement
  balanceSheet: FinancialStatement
  cashFlow: FinancialStatement
}

interface ExtractionResultProps {
  financialStatements: FinancialStatements
  extractionOption: "single" | "separate"
  documentName: string
  onRestart: () => void
}

export function ExtractionResult({
  financialStatements,
  extractionOption,
  documentName,
  onRestart,
}: ExtractionResultProps) {
  const [currency, setCurrency] = useState("USD")
  const [denomination, setDenomination] = useState("1")
  const [decimal, setDecimal] = useState("0")

const formatNumber = (value: number) => {
    // Apply denomination
    const denominatedValue = value / Number(denomination)

// Format with currency and decimals
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: currency,
      minimumFractionDigits: Number(decimal),
      maximumFractionDigits: Number(decimal),
    }).format(denominatedValue)
  }

const handleDownload = (statementType?: string) => {
    // In a real application, this would trigger the download of the Excel file
    if (statementType) {
      alert(`Downloading ${statementType} as Excel file...`)
    } else {
      alert("Downloading all financial statements as Excel file...")
    }
  }

return (
    <div className="space-y-4">
      <Card className="border-[#e1e8f6]">
        <CardContent className="p-4">
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-[#001742]">Extracted Financial Statements</h3>
            <p className="text-[#4e5971]">
              Successfully extracted {Object.keys(financialStatements).length} financial statements from{" "}
              <span className="font-medium">{documentName}</span>.
            </p>

<div className="flex flex-wrap gap-4 mb-4">
              <div className="flex flex-col gap-1">
                <label className="text-xs text-[#6e7b96]">Currency</label>
                <Select value={currency} onValueChange={setCurrency}>
                  <SelectTrigger className="w-[120px] h-8 text-sm">
                    <SelectValue placeholder="Currency" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="USD">USD ($)</SelectItem>
                    <SelectItem value="EUR">EUR (€)</SelectItem>
                    <SelectItem value="GBP">GBP (£)</SelectItem>
                    <SelectItem value="INR">INR (₹)</SelectItem>
                    <SelectItem value="JPY">JPY (¥)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="flex flex-col gap-1">
                <label className="text-xs text-[#6e7b96]">Denomination</label>
                <Select value={denomination} onValueChange={setDenomination}>
                  <SelectTrigger className="w-[120px] h-8 text-sm">
                    <SelectValue placeholder="Denomination" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1">Actual</SelectItem>
                    <SelectItem value="1000">Thousands</SelectItem>
                    <SelectItem value="1000000">Millions</SelectItem>
                    <SelectItem value="1000000000">Billions</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="flex flex-col gap-1">
                <label className="text-xs text-[#6e7b96]">Decimal Places</label>
                <Select value={decimal} onValueChange={setDecimal}>
                  <SelectTrigger className="w-[120px] h-8 text-sm">
                    <SelectValue placeholder="Decimals" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="0">0</SelectItem>
                    <SelectItem value="1">1</SelectItem>
                    <SelectItem value="2">2</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<Tabs defaultValue="income" className="mt-6">
              <TabsList className="grid w-full grid-cols-3 bg-[#f4f7ff]">
                <TabsTrigger value="income" className="data-[state=active]:bg-white data-[state=active]:text-[#001742]">
                  Income Statement
                </TabsTrigger>
                <TabsTrigger
                  value="balance"
                  className="data-[state=active]:bg-white data-[state=active]:text-[#001742]"
                >
                  Balance Sheet
                </TabsTrigger>
                <TabsTrigger
                  value="cashflow"
                  className="data-[state=active]:bg-white data-[state=active]:text-[#001742]"
                >
                  Cash Flow
                </TabsTrigger>
              </TabsList>

{/* Income Statement Tab */}
              <TabsContent value="income" className="pt-4">
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[500px] border-collapse rounded-md border border-[#e1e8f6]">
                    <thead>
                      <tr className="bg-[#f4f7ff]">
                        <th className="border-b border-[#e1e8f6] p-3 text-left text-sm font-medium text-[#001742]">
                          Item
                        </th>
                        {Object.keys(financialStatements.incomeStatement.data[0])
                          .filter((key) => key !== "item")
                          .map((year) => (
                            <th
                              key={year}
                              className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]"
                            >
                              {year}
                            </th>
                          ))}
                      </tr>
                    </thead>
                    <tbody>
                      {financialStatements.incomeStatement.data.map((row, index) => (
                        <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-[#f9fafc]"}>
                          <td className="border-b border-[#e1e8f6] p-3 text-sm text-[#001742]">{row.item}</td>
                          {Object.keys(row)
                            .filter((key) => key !== "item")
                            .map((year) => (
                              <td
                                key={year}
                                className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]"
                              >
                                {typeof row[year] === "number" ? formatNumber(row[year] as number) : row[year]}
                              </td>
                            ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                {extractionOption === "separate" && (
                  <div className="mt-4 flex justify-end">
                    <Button
                      size="sm"
                      className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto"
                      onClick={() => handleDownload("Income Statement")}
                    >
                      <Download className="h-4 w-4" />
                      Download Income Statement
                    </Button>
                  </div>
                )}
              </TabsContent>

{/* Balance Sheet Tab */}
              <TabsContent value="balance" className="pt-4">
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[500px] border-collapse rounded-md border border-[#e1e8f6]">
                    <thead>
                      <tr className="bg-[#f4f7ff]">
                        <th className="border-b border-[#e1e8f6] p-3 text-left text-sm font-medium text-[#001742]">
                          Item
                        </th>
                        {Object.keys(financialStatements.balanceSheet.data[0])
                          .filter((key) => key !== "item")
                          .map((year) => (
                            <th
                              key={year}
                              className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]"
                            >
                              {year}
                            </th>
                          ))}
                      </tr>
                    </thead>
                    <tbody>
                      {financialStatements.balanceSheet.data.map((row, index) => (
                        <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-[#f9fafc]"}>
                          <td className="border-b border-[#e1e8f6] p-3 text-sm text-[#001742]">{row.item}</td>
                          {Object.keys(row)
                            .filter((key) => key !== "item")
                            .map((year) => (
                              <td
                                key={year}
                                className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]"
                              >
                                {typeof row[year] === "number" ? formatNumber(row[year] as number) : row[year]}
                              </td>
                            ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                {extractionOption === "separate" && (
                  <div className="mt-4 flex justify-end">
                    <Button
                      size="sm"
                      className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto"
                      onClick={() => handleDownload("Balance Sheet")}
                    >
                      <Download className="h-4 w-4" />
                      Download Balance Sheet
                    </Button>
                  </div>
                )}
              </TabsContent>

{/* Cash Flow Tab */}
              <TabsContent value="cashflow" className="pt-4">
                <div className="overflow-x-auto">
                  <table className="w-full min-w-[500px] border-collapse rounded-md border border-[#e1e8f6]">
                    <thead>
                      <tr className="bg-[#f4f7ff]">
                        <th className="border-b border-[#e1e8f6] p-3 text-left text-sm font-medium text-[#001742]">
                          Item
                        </th>
                        {Object.keys(financialStatements.cashFlow.data[0])
                          .filter((key) => key !== "item")
                          .map((year) => (
                            <th
                              key={year}
                              className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]"
                            >
                              {year}
                            </th>
                          ))}
                      </tr>
                    </thead>
                    <tbody>
                      {financialStatements.cashFlow.data.map((row, index) => (
                        <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-[#f9fafc]"}>
                          <td className="border-b border-[#e1e8f6] p-3 text-sm text-[#001742]">{row.item}</td>
                          {Object.keys(row)
                            .filter((key) => key !== "item")
                            .map((year) => (
                              <td
                                key={year}
                                className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]"
                              >
                                {typeof row[year] === "number" ? formatNumber(row[year] as number) : row[year]}
                              </td>
                            ))}
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                {extractionOption === "separate" && (
                  <div className="mt-4 flex justify-end">
                    <Button
                      size="sm"
                      className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto"
                      onClick={() => handleDownload("Cash Flow Statement")}
                    >
                      <Download className="h-4 w-4" />
                      Download Cash Flow Statement
                    </Button>
                  </div>
                )}
              </TabsContent>
            </Tabs>

<div className="text-xs text-[#6e7b96] mt-2">
              {denomination !== "1" && (
                <p>
                  Note: Values shown in{" "}
                  {denomination === "1000" ? "thousands" : denomination === "1000000" ? "millions" : "billions"} of{" "}
                  {currency}
                </p>
              )}
            </div>

<div className="mt-6 space-y-2">
              <h4 className="font-medium text-[#001742]">Applied Formulas & Enhancements:</h4>
              <ul className="space-y-1 text-sm text-[#4e5971]">
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Automatic calculation of totals and subtotals</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Year-over-year growth percentages</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Common size analysis (percentage of revenue/total assets)</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Key financial ratios (profitability, liquidity, solvency)</span>
                </li>
                <li className="flex items-start gap-2">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Conditional formatting for significant changes</span>
                </li>
              </ul>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="mt-6 flex flex-wrap gap-2">
        {extractionOption === "single" && (
          <Button
            size="sm"
            className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto"
            onClick={() => handleDownload()}
          >
            <Download className="h-4 w-4" />
            Download Excel File
          </Button>
        )}
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
          onClick={onRestart}
        >
          <RefreshCw className="h-4 w-4" />
          Process Another Document
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/industry-sizing/loading.tsx" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/workflows/company-one-pager/loading.tsx" isMerged="true"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"

export default function Loading() {
  return (
    <WorkflowLayout>
      <WorkflowHeader
        title="Company One-Pagers – Strategic Summary Profiles"
        breadcrumbs={[{ label: "Workflows", href: "/" }]}
      />
      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-3xl mx-auto space-y-6">
          <div className="animate-pulse flex space-x-4">
            <div className="flex-1 space-y-6 py-1">
              <div className="h-6 bg-slate-200 rounded w-3/4"></div>
              <div className="space-y-3">
                <div className="h-4 bg-slate-200 rounded"></div>
                <div className="h-4 bg-slate-200 rounded w-5/6"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="lib/workflow/types.ts" isMerged="true"
import type { ReactNode } from "react"

export interface WorkflowStep {
  id: number
  title: string
  description: string
}

export interface WorkflowConfig {
  id: string
  title: string
  description: string
  steps: WorkflowStep[]
  initialMessage: string | ReactNode
}

export interface Industry {
  id: string
  name: string
  macroSector: string
  subSector: string
}

export interface ChartData {
  id: string
  title: string
  type: string
  data?: any[]
}

export interface MarketData {
  title?: string
  marketSize: string
  cagr: string
  keyDrivers?: string[]
  risks?: string[]
  charts?: ChartData[]
  benchmarks?: { metric: string; industry: string; market: string; topQuartile?: string }[]
  summary: string
  sources?: string[]
}

export interface Message {
  id: string
  role: "system" | "user" | "loading"
  content: string | ReactNode
  timestamp: Date
  showCustomization?: boolean
  step?: number
}
[V0_FILE]typescriptreact:file="components/workflow/report/market-report.tsx" isMerged="true"
"use client"

import { Download, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Chart } from "@/components/workflow/chart-component"
import type { MarketData } from "@/lib/workflow/types"

interface MarketReportProps {
  marketData: MarketData
  selectedCharts: {
    marketGrowth: boolean
    marketShare: boolean
    retentionRate: boolean
  }
  onRestart: () => void
}

export function MarketReport({ marketData, selectedCharts, onRestart }: MarketReportProps) {
  console.log("MarketReport rendering with data:", marketData)
  console.log("Selected charts:", selectedCharts)

// Ensure we have valid data to display
  if (!marketData) {
    console.error("No market data provided to MarketReport component")
    return (
      <div className="p-4 border border-red-300 bg-red-50 rounded-md">
        <p className="text-red-600">Error: No market data available for this report.</p>
        <Button onClick={onRestart} className="mt-4">
          Restart Analysis
        </Button>
      </div>
    )
  }

<div className="grid gap-4 md:grid-cols-2">
              <div className="rounded-md bg-[#f4f9ff] p-3">
                <div className="text-sm font-medium text-[#001742]">Market Size (2024)</div>
                <div className="text-lg font-semibold text-[#001742]">{marketData.marketSize || "N/A"}</div>
              </div>
              <div className="rounded-md bg-[#f4f9ff] p-3">
                <div className="text-sm font-medium text-[#001742]">CAGR</div>
                <div className="text-lg font-semibold text-[#001742]">{marketData.cagr || "N/A"}</div>
              </div>
            </div>

<div className="whitespace-pre-line text-[#001742]">{marketData.summary || "No summary available."}</div>

<div className="space-y-4 mt-4">
              {selectedCharts.marketGrowth && marketData.charts && marketData.charts[0] && (
                <div className="rounded-md border border-[#e1e8f6] p-4 bg-white">
                  <div className="h-[220px]">
                    <Chart
                      type={marketData.charts[0].type}
                      title={marketData.charts[0].title}
                      data={marketData.charts[0].data}
                    />
                  </div>
                </div>
              )}

{selectedCharts.marketShare && marketData.charts && marketData.charts[1] && (
                <div className="rounded-md border border-[#e1e8f6] p-4 bg-white">
                  <div className="h-[220px]">
                    <Chart
                      type={marketData.charts[1].type}
                      title={marketData.charts[1].title}
                      data={marketData.charts[1].data}
                    />
                  </div>
                </div>
              )}

{selectedCharts.retentionRate && marketData.charts && marketData.charts[2] && (
                <div className="rounded-md border border-[#e1e8f6] p-4 bg-white">
                  <div className="h-[220px]">
                    <Chart
                      type={marketData.charts[2].type}
                      title={marketData.charts[2].title}
                      data={marketData.charts[2].data}
                    />
                  </div>
                </div>
              )}
            </div>

<div className="mt-4">
              <h4 className="mb-2 font-medium text-[#001742]">Key Takeaways:</h4>
              <ul className="space-y-1">
                <li className="flex items-start gap-2 text-sm text-[#001742]">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Sector CAGR: {marketData.cagr || "N/A"}</span>
                </li>
                <li className="flex items-start gap-2 text-sm text-[#001742]">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Leading Players: Zepto, Blinkit, Swiggy Instamart</span>
                </li>
                <li className="flex items-start gap-2 text-sm text-[#001742]">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>
                    Risks:{" "}
                    {marketData.risks && marketData.risks.length > 0
                      ? marketData.risks.join(", ")
                      : "Various market risks"}
                  </span>
                </li>
                <li className="flex items-start gap-2 text-sm text-[#001742]">
                  <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                  <span>Opportunity: Private labels, subscription models</span>
                </li>
              </ul>
            </div>

<div className="overflow-x-auto">
              <table className="w-full min-w-[500px] border-collapse rounded-md border border-[#e1e8f6]">
                <thead>
                  <tr className="bg-[#f4f7ff]">
                    <th className="border-b border-[#e1e8f6] p-3 text-left text-sm font-medium text-[#001742]">
                      Metric
                    </th>
                    <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                      Industry Avg
                    </th>
                    <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                      Market Leaders
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {marketData.benchmarks && marketData.benchmarks.length > 0 ? (
                    marketData.benchmarks.map((benchmark, index) => (
                      <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-[#f9fafc]"}>
                        <td className="border-b border-[#e1e8f6] p-3 text-sm text-[#001742]">{benchmark.metric}</td>
                        <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                          {benchmark.industry}
                        </td>
                        <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                          {benchmark.market}
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={3} className="border-b border-[#e1e8f6] p-3 text-sm text-center text-[#6e7b96]">
                        No benchmark data available
                      </td>
                    </tr>
                  )}
                </tbody>
              </table>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="mt-6 flex flex-wrap gap-2">
        <Button size="sm" className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto">
          <Download className="h-4 w-4" />
          Download as PDF
        </Button>
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
          onClick={onRestart}
        >
          <RefreshCw className="h-4 w-4" />
          Restart Workflow
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/chart-component.tsx" isMerged="true"
"use client"

interface ChartProps {
  type: string
  title: string
  data?: any[]
}

export function Chart({ type, title, data }: ChartProps) {
  console.log("Chart component rendering:", { type, title, data })

// Fallback for when no data is provided
  if (!data || data.length === 0) {
    return (
      <div className="w-full h-full flex items-center justify-center">
        <p className="text-sm text-[#6e7b96]">No data available for this chart</p>
      </div>
    )
  }

return (
    <div className="w-full h-full">
      {type === "line" && (
        <div className="relative w-full h-full flex flex-col">
          <div className="text-sm font-medium text-[#001742] mb-2">{title}</div>
          <div className="flex-1 relative">
            <div className="absolute inset-0 flex flex-col">
              <div className="flex-1 flex items-end">
                {data &&
                  data.map((item, i) => {
                    // Calculate height percentage based on the maximum value in the data
                    const maxValue = Math.max(...data.map((d) => d.value || d.industry || 0))
                    const heightPercent = ((item.value || item.industry || 0) / maxValue) * 80

return (
                      <div key={i} className="flex-1 flex flex-col items-center">
                        <div className="relative h-full w-full flex items-end justify-center">
                          <div
                            className="w-[60%] bg-[#004ce6]/20 rounded-t-sm relative"
                            style={{ height: `${heightPercent}%` }}
                          >
                            <div
                              className="absolute bottom-0 left-0 right-0 bg-[#004ce6] rounded-t-sm"
                              style={{ height: "3px" }}
                            ></div>
                          </div>
                        </div>
                      </div>
                    )
                  })}
              </div>
              <div className="h-6 flex">
                {data &&
                  data.map((item, i) => (
                    <div key={i} className="flex-1 text-center">
                      <div className="text-xs text-[#6e7b96] mt-1 truncate w-full">{item.year || i + 2020}</div>
                    </div>
                  ))}
              </div>
            </div>
          </div>
        </div>
      )}

{type === "pie" && (
        <div className="w-full h-full flex flex-col">
          <div className="text-sm font-medium text-[#001742] mb-2">{title}</div>
          <div className="flex-1 flex items-center justify-center">
            <div className="relative w-32 h-32">
              <svg viewBox="0 0 100 100" className="w-full h-full">
                <circle cx="50" cy="50" r="45" fill="#eaf0fc" />
                <circle cx="50" cy="50" r="20" fill="white" />

{/* Zepto slice - 28% */}
                <path d="M50,50 L50,5 A45,45 0 0,1 93.3,71.7 Z" fill="#004ce6" />

{/* Swiggy Instamart slice - 25% */}
                <path d="M50,50 L93.3,71.7 A45,45 0 0,1 27.9,93.3 Z" fill="#21a265" />

{/* Blinkit slice - 22% */}
                <path d="M50,50 L27.9,93.3 A45,45 0 0,1 6.7,28.3 Z" fill="#f59e0b" />

{/* BigBasket Now slice - 13% */}
                <path d="M50,50 L6.7,28.3 A45,45 0 0,1 50,5 Z" fill="#8098c4" />
              </svg>
            </div>
          </div>
          <div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
            {data &&
              data.map((item, i) => (
                <div key={i} className="flex items-center gap-1">
                  <div
                    className="w-2 h-2 rounded-full"
                    style={{
                      backgroundColor: i === 0 ? "#004ce6" : i === 1 ? "#21a265" : i === 2 ? "#f59e0b" : "#8098c4",
                    }}
                  ></div>
                  <span className="text-xs text-[#001742]">
                    {item.company || `Category ${i + 1}`}: {item.share || item.capacity || 25 - i * 5}%
                  </span>
                </div>
              ))}
          </div>
        </div>
      )}

{type === "bar" && (
        <div className="w-full h-full flex flex-col">
          <div className="text-sm font-medium text-[#001742] mb-2">{title}</div>
          <div className="flex-1 flex items-end justify-around pt-4">
            {data &&
              data.map((item, i) => (
                <div key={i} className="flex flex-col items-center">
                  <div
                    className="w-16 bg-[#004ce6] rounded-t-sm"
                    style={{ height: `${Math.max(40, item.retention || 40 + i * 5)}px` }}
                  ></div>
                  <div className="text-xs text-[#6e7b96] mt-1">{item.delivery || `Group ${i + 1}`}</div>
                  <div className="text-xs font-medium text-[#001742] mt-0.5">{item.retention || 50 - i * 5}%</div>
                </div>
              ))}
          </div>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/workflow/market-research-data.ts" isMerged="true"
import type { Industry, MarketData } from "@/lib/workflow/types"

// Sample data for industries
export const industries: Industry[] = [
  { id: "tech", name: "Technology", macroSector: "Information Technology", subSector: "Software & Services" },
  { id: "healthcare", name: "Healthcare", macroSector: "Health", subSector: "Medical Devices & Equipment" },
  { id: "finance", name: "Financial Services", macroSector: "Finance", subSector: "Banking & Investment" },
  { id: "retail", name: "Retail", macroSector: "Consumer Discretionary", subSector: "E-commerce & Brick-and-Mortar" },
  { id: "energy", name: "Energy", macroSector: "Energy", subSector: "Renewable & Traditional" },
  {
    id: "telecom",
    name: "Telecommunications",
    macroSector: "Communication Services",
    subSector: "Wireless & Broadband",
  },
  { id: "manufacturing", name: "Manufacturing", macroSector: "Industrials", subSector: "Heavy Equipment & Machinery" },
  { id: "real-estate", name: "Real Estate", macroSector: "Real Estate", subSector: "Commercial & Residential" },
  { id: "quick-commerce", name: "Quick Commerce", macroSector: "Consumer Services", subSector: "On-Demand Delivery" },
  { id: "power", name: "Power Utilities", macroSector: "Energy", subSector: "Renewable & Transmission" },
]

// Sample market trend data
export const marketTrendData: Record<string, MarketData> = {
  "quick-commerce": {
    title: "Quick Commerce Market Segmentation Report",
    marketSize: "₹27,000 Crore",
    cagr: "32.4%",
    keyDrivers: ["Urbanization", "Convenience demand", "VC funding"],
    risks: ["Thin margins", "Logistics costs", "Retention challenges"],
    charts: [
      {
        id: "market-growth",
        title: "Market Growth Trajectory (2021-2027)",
        type: "line",
        data: [
          { year: 2021, value: 9500 },
          { year: 2022, value: 15000 },
          { year: 2023, value: 20500 },
          { year: 2024, value: 27000 },
          { year: 2025, value: 33000 },
          { year: 2026, value: 40000 },
          { year: 2027, value: 49000 },
        ],
      },
      {
        id: "market-share",
        title: "Top Players by Market Share (2024)",
        type: "pie",
        data: [
          { company: "Zepto", share: 28 },
          { company: "Swiggy Instamart", share: 25 },
          { company: "Blinkit", share: 22 },
          { company: "BigBasket Now", share: 13 },
          { company: "Others", share: 12 },
        ],
      },
      {
        id: "retention-speed",
        title: "Retention Rate vs. Delivery Speed",
        type: "bar",
        data: [
          { delivery: "10 mins", retention: 52 },
          { delivery: "20 mins", retention: 48 },
          { delivery: "30 mins", retention: 44 },
        ],
      },
    ],
    benchmarks: [
      { metric: "Average Order Value (AOV)", industry: "₹310", market: "₹580" },
      { metric: "Monthly Burn Rate", industry: "₹45 Cr", market: "₹18 Cr" },
      { metric: "Gross Margin", industry: "14%", market: "32%" },
      { metric: "Retention (3-Month)", industry: "48%", market: "59%" },
      { metric: "Last-Mile Cost per Order", industry: "₹23", market: "₹14" },
    ],
    summary:
      "India's Quick Commerce industry is witnessing rapid transformation, driven by urbanization, demand for hyper-convenience, and aggressive VC funding. After an intense expansion period between 2021-2023, players are now focusing on unit economics, retention, and logistics optimization.\n\nDespite operating on thinner margins than traditional e-commerce, leading players like Zepto, Blinkit, and Swiggy Instamart have increased their gross margin efficiency through backend automation and localized dark store models.",
    sources: [
      "DPIIT Annual Report 2024",
      "Bain India Retail Outlook",
      "Tracxn Private Markets Tracker (Q1 2024)",
      "Startup India Database",
      "Public domain filings (BSE/Startup dashboards)",
    ],
  },
  power: {
    title: "Power Utilities Market Analysis",
    marketSize: "₹4.3 Trillion",
    cagr: "7.8%",
    keyDrivers: ["Green energy push", "Infrastructure capex", "Government incentives"],
    risks: ["Policy delays", "DISCOM financial stress", "Land acquisition hurdles"],
    charts: [
      {
        id: "industry-gdp",
        title: "Industry CAGR vs. GDP",
        type: "line",
        data: [
          { year: 2019, industry: 5.2, gdp: 4.0 },
          { year: 2020, industry: 2.1, gdp: -7.3 },
          { year: 2021, industry: 6.8, gdp: 8.7 },
          { year: 2022, industry: 7.2, gdp: 7.2 },
          { year: 2023, industry: 7.5, gdp: 6.9 },
          { year: 2024, industry: 7.8, gdp: 6.5 },
        ],
      },
      {
        id: "renewable-growth",
        title: "Renewable vs. Non-Renewable Growth",
        type: "bar",
        data: [
          { year: 2020, renewable: 8.4, nonRenewable: 1.2 },
          { year: 2021, renewable: 12.6, nonRenewable: 2.1 },
          { year: 2022, renewable: 14.8, nonRenewable: 1.8 },
          { year: 2023, renewable: 16.2, nonRenewable: 1.5 },
          { year: 2024, renewable: 18.5, nonRenewable: 1.2 },
        ],
      },
      {
        id: "top-players",
        title: "Top 5 Players by Capacity",
        type: "pie",
        data: [
          { company: "NTPC", capacity: 28 },
          { company: "Adani Green", capacity: 22 },
          { company: "Tata Power", capacity: 18 },
          { company: "JSW Energy", capacity: 12 },
          { company: "Others", capacity: 20 },
        ],
      },
    ],
    benchmarks: [
      { metric: "EBITDA Margin", industry: "21.4%", topQuartile: "28.7%", market: "15.2%" },
      { metric: "ROCE", industry: "12.8%", topQuartile: "18.1%", market: "10.4%" },
      { metric: "EV/EBITDA", industry: "9.3x", topQuartile: "-", market: "7.1x" },
      { metric: "Debt/Equity", industry: "1.2", topQuartile: "-", market: "0.8" },
    ],
    summary:
      "The Indian power sector is undergoing a structural shift toward clean energy, backed by government incentives and global ESG capital flows. Despite regulatory challenges, renewable players continue to grow, supported by transmission infrastructure upgrades.\n\nLeading players like Tata Power, Adani Green, and NTPC are investing heavily in renewable capacity, while also modernizing grid infrastructure to support the transition.",
    sources: [
      "DPIIT Annual Report",
      "CEA Snapshot",
      "BSE filings",
      "Ministry of Power Annual Report",
      "IEA India Energy Outlook",
    ],
  },
}

// Default data for any industry not specifically defined
export const defaultMarketData: MarketData = {
  title: "Industry Analysis Report",
  marketSize: "Varies by region",
  cagr: "4-6% (estimated)",
  keyDrivers: ["Market-specific factors", "Economic conditions", "Technological advancements"],
  risks: ["Competitive pressures", "Regulatory changes", "Market volatility"],
  charts: [
    {
      id: "generic-growth",
      title: "Industry Growth Projection",
      type: "line",
      data: [
        { year: 2020, value: 100 },
        { year: 2021, value: 105 },
        { year: 2022, value: 110 },
        { year: 2023, value: 116 },
        { year: 2024, value: 122 },
        { year: 2025, value: 128 },
      ],
    },
    {
      id: "generic-market-share",
      title: "Market Share Distribution",
      type: "pie",
      data: [
        { company: "Leader", share: 30 },
        { company: "Second", share: 25 },
        { company: "Third", share: 20 },
        { company: "Fourth", share: 15 },
        { company: "Others", share: 10 },
      ],
    },
    {
      id: "generic-comparison",
      title: "Key Metrics Comparison",
      type: "bar",
      data: [
        { metric: "Revenue Growth", value: 8.5 },
        { metric: "Profit Margin", value: 12.3 },
        { metric: "Market Penetration", value: 15.7 },
      ],
    },
  ],
  benchmarks: [
    { metric: "Profit Margin", industry: "15.2%", market: "18.7%" },
    { metric: "Revenue Growth", industry: "7.5%", market: "9.2%" },
    { metric: "Customer Retention", industry: "68%", market: "75%" },
    { metric: "Market Share", industry: "Varies", market: "Varies" },
  ],
  summary:
    "This industry analysis provides a general overview based on available data. The sector shows moderate growth potential with opportunities for innovation and market expansion. Key success factors include operational efficiency, customer retention strategies, and adaptation to changing market conditions.",
  sources: ["Industry reports", "Market analysis", "Public financial data"],
}
[V0_FILE]typescriptreact:file="components/workflow/chat-interface.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useRef, useEffect } from "react"
import { ChatMessage, type MessageProps } from "@/components/workflow/chat-message"

interface ChatInterfaceProps {
  messages: MessageProps[]
  activeCustomizationId: string | null
  onEditMessage?: (id: string) => void
  children?: React.ReactNode
  contentContainerRef: React.RefObject<HTMLDivElement>
}

export function ChatInterface({
  messages,
  activeCustomizationId,
  onEditMessage,
  children,
  contentContainerRef,
}: ChatInterfaceProps) {
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

// Add console logs for debugging
  console.log("ChatInterface rendering with messages:", messages.length)
  console.log("Active customization ID:", activeCustomizationId)

// Log which message has customization
  messages.forEach((msg) => {
    if (msg.customization) {
      console.log(`Message ${msg.id} has customization and isActive: ${msg.id === activeCustomizationId}`)
    }
  })

return (
    <div className="flex-1 overflow-y-auto p-6 pb-32">
      <div className="max-w-3xl mx-auto space-y-6" ref={contentContainerRef}>
        {messages.map((message) => (
          <div key={message.id}>
            <ChatMessage
              {...message}
              onEdit={onEditMessage}
              isActiveCustomization={message.id === activeCustomizationId}
            />
            {/* Only render customization if this message is active AND has customization */}
            {message.id === activeCustomizationId && message.customization && (
              <div className="mt-4">{message.customization}</div>
            )}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      {children}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/market-industry-research/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { IndustrySelector } from "@/components/workflow/customization/industry-selector"
import { DataSourceSelector } from "@/components/workflow/customization/data-source-selector"
import { MetricsSelector } from "@/components/workflow/customization/metrics-selector"
import { ChartSelector } from "@/components/workflow/customization/chart-selector"
import { MarketReport } from "@/components/workflow/report/market-report"
import { WorkflowEngine } from "@/lib/workflow/workflow-engine"
import { industries, marketTrendData, defaultMarketData } from "@/lib/workflow/market-research-data"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "market-industry-research",
  title: "Market & Industry Research Workflow",
  description: "Research and analyze industry trends and market conditions",
  steps: [
    {
      id: 1,
      title: "Select Industry",
      description: "Choose an industry to research",
    },
    {
      id: 2,
      title: "Define Region",
      description: "Specify the geographic focus",
    },
    {
      id: 3,
      title: "Select Data Sources",
      description: "Choose data sources for analysis",
    },
    {
      id: 4,
      title: "Select Metrics",
      description: "Choose performance metrics to analyze",
    },
    {
      id: 5,
      title: "Select Visualizations",
      description: "Choose chart types for data visualization",
    },
    {
      id: 6,
      title: "Review Insights",
      description: "Review the final analysis and insights",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">What industry or market are you exploring today?</p>
    </div>
  ),
}

export default function MarketIndustryResearchPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [selectedIndustry, setSelectedIndustry] = useState<(typeof industries)[0] | null>(null)
  const [currentStep, setCurrentStep] = useState(1)
  const [isAnalysisComplete, setIsAnalysisComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)

const [selectedMetrics, setSelectedMetrics] = useState([
    "Revenue CAGR",
    "Gross Margin",
    "Customer Retention",
    "Unit Economics",
  ])

const [selectedCharts, setSelectedCharts] = useState({
    marketGrowth: true,
    marketShare: true,
    retentionRate: true,
  })

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Initialize the workflow
  useEffect(() => {
    setIsMounted(true)
    const initialMessages = workflowEngine.initialize()
    setMessages(initialMessages)
    setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
  }, [])

// Handle industry selection
  const handleIndustrySelect = (industry: (typeof industries)[0]) => {
    setSelectedIndustry(industry)
    setCurrentStep(3) // Skip to step 3 (data sources)

// Add user message
    workflowEngine.addMessage("user", `I want to research the ${industry.name} industry`)

// Go directly to data sources step
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">Select data sources for your analysis:</p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle data source selection
  const handleDataSourceSelection = () => {
    // Add user message with specific data sources
    workflowEngine.addMessage(
      "user",
      "I'll use DPIIT, MCA, NITI Aayog, Tracxn, Pitchbook, Statista, McKinsey, BCG, Redseer, and NSE/BSE Filings as data sources",
    )

// Show loading message
    workflowEngine.addLoadingMessage("Analyzing selected data sources...")
    setMessages(workflowEngine.getMessages())

// Simulate processing
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()
      showKPISelection()
      setMessages(workflowEngine.getMessages())
    }, 1500)
  }

// Show KPI selection
  const showKPISelection = () => {
    setCurrentStep(4)
    workflowEngine.setCurrentStep(4)

const newId = workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">What performance metrics would you like to focus on?</p>
      </div>,
      true,
    )

setActiveCustomizationId(newId)
    setMessages(workflowEngine.getMessages())
  }

// Handle metrics selection and generate visuals
  const generateVisuals = () => {
    setCurrentStep(5)
    workflowEngine.setCurrentStep(5)

// Add user message with specific metrics
    workflowEngine.addMessage("user", `Let's continue with these metrics: ${selectedMetrics.join(", ")}`)

// Show loading message
    workflowEngine.addLoadingMessage("Analyzing data for visualization options...")
    setMessages(workflowEngine.getMessages())

// Simulate processing
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()

const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">What types of charts would you like to include in your analysis?</p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 2000)
  }

// Generate final insights
  const generateFinalInsights = () => {
    setCurrentStep(6)
    workflowEngine.setCurrentStep(6)

// Create a list of selected chart names
    const selectedChartNames = []
    if (selectedCharts.marketGrowth) selectedChartNames.push("Market Size Growth")
    if (selectedCharts.marketShare) selectedChartNames.push("Market Share")
    if (selectedCharts.retentionRate) selectedChartNames.push("Retention Rate")

// Add user message with selected charts
    workflowEngine.addMessage("user", `I want to include these charts: ${selectedChartNames.join(", ")}`)

// Show loading message
    workflowEngine.addLoadingMessage("Compiling final insights and recommendations...")
    setMessages(workflowEngine.getMessages())

// Simulate processing
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()

// Clear active customization before showing the final report
      workflowEngine.clearActiveCustomization()
      setActiveCustomizationId(null)

// IMPORTANT: Set active customization ID to null to remove any customization boxes
      setActiveCustomizationId(null)

setIsAnalysisComplete(true)

// Get market data for the selected industry or default to quick-commerce
      const industryId = selectedIndustry?.id || "quick-commerce"
      const marketData = marketTrendData[industryId] || marketTrendData["quick-commerce"] || defaultMarketData

console.log("Generating final report with market data:", marketData)
      console.log("Selected charts:", selectedCharts)

// Add the final report message
      workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">Your industry pre-screen is ready!</p>
          <MarketReport
            marketData={marketData}
            selectedCharts={selectedCharts}
            onRestart={() => {
              // Reset the workflow
              const initialMessages = workflowEngine.initialize()
              setMessages(initialMessages)
              setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
              setCurrentStep(1)
              setIsAnalysisComplete(false)
              setSelectedIndustry(null)
            }}
          />
        </div>,
      )

setMessages(workflowEngine.getMessages())
    }, 2000)
  }

// Handle editing a message
  const handleEditMessage = (messageId: string) => {
    workflowEngine.handleEditMessage(messageId)
    setMessages(workflowEngine.getMessages())
    setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
    setCurrentStep(workflowEngine.getCurrentStep())
  }

// Handle chart selection
  const handleChartSelection = (chartType: string, selected: boolean) => {
    setSelectedCharts({
      ...selectedCharts,
      [chartType]: selected,
    })
  }

// Handle metric selection/deselection
  const handleSelectMetric = (metric: string) => {
    if (!selectedMetrics.includes(metric)) {
      setSelectedMetrics([...selectedMetrics, metric])
    }
  }

const handleDeselectMetric = (metric: string) => {
    setSelectedMetrics(selectedMetrics.filter((m) => m !== metric))
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <IndustrySelector industries={industries} onSelect={handleIndustrySelect} />
      case 3:
        return <DataSourceSelector onContinue={handleDataSourceSelection} />
      case 4:
        return (
          <MetricsSelector
            selectedMetrics={selectedMetrics}
            onSelectMetric={handleSelectMetric}
            onDeselectMetric={handleDeselectMetric}
            onContinue={generateVisuals}
          />
        )
      case 5:
        return (
          <ChartSelector
            selectedCharts={selectedCharts}
            onSelectChart={handleChartSelection}
            onContinue={generateFinalInsights}
          />
        )
      default:
        return null
    }
  }

// Add customization content to messages
  const messagesWithCustomization = messages.map((message) => {
    if (message.id === activeCustomizationId && message.showCustomization) {
      return {
        ...message,
        customization: <CustomizationBox>{renderCustomizationContent()}</CustomizationBox>,
      }
    }
    return message
  })

return (
    <WorkflowLayout>
      <WorkflowHeader title="Market & Industry Research Workflow" breadcrumbs={[{ label: "Workflows", href: "/" }]} />

{isMounted && (
        <>
          <ChatInterface
            messages={messagesWithCustomization}
            activeCustomizationId={activeCustomizationId}
            onEditMessage={handleEditMessage}
            contentContainerRef={contentContainerRef}
          />

{isAnalysisComplete && (
            <ChatInput
              onSend={(message) => {
                // Handle follow-up questions here
                workflowEngine.addMessage("user", message)
                setMessages(workflowEngine.getMessages())

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'll help you with that. What specific aspect of the analysis would you like to explore further?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Tell us more about how you want to customize this output"
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/document-summary/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { DocumentUploader } from "@/components/workflow/customization/document-uploader"
import { SummaryCustomization } from "@/components/workflow/customization/summary-customization"
import { SummaryResult } from "@/components/workflow/report/summary-result"
import { WorkflowEngine } from "@/components/workflow/workflow-engine"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "document-summary",
  title: "Personalized Document Summary Generator",
  description: "Generate customized summaries from uploaded documents",
  steps: [
    {
      id: 1,
      title: "Upload Document",
      description: "Upload a document you want to summarize",
    },
    {
      id: 2,
      title: "Customize Summary",
      description: "Select sections and customize summary options",
    },
    {
      id: 3,
      title: "Processing",
      description: "Analyzing document and generating summary",
    },
    {
      id: 4,
      title: "Review Results",
      description: "Review and download the generated summary",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the Personalized Document Summary Generator. Please upload a document (PDF, Word, PowerPoint, etc.)
        that you'd like to summarize.
      </p>
    </div>
  ),
}

// Sample document sections that would be "detected" from the uploaded document
const sampleDocumentSections = [
  { id: "executive", title: "Executive Summary", selected: true },
  { id: "introduction", title: "Introduction", selected: true },
  { id: "methodology", title: "Methodology", selected: true },
  { id: "findings", title: "Key Findings", selected: true },
  { id: "market_analysis", title: "Market Analysis", selected: true },
  { id: "financial_projections", title: "Financial Projections", selected: true },
  { id: "recommendations", title: "Recommendations", selected: true },
  { id: "conclusion", title: "Conclusion", selected: true },
  { id: "appendix", title: "Appendix", selected: false },
]

export default function DocumentSummaryPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [currentStep, setCurrentStep] = useState(1)
  const [isSummaryComplete, setIsSummaryComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)
  const [uploadedDocument, setUploadedDocument] = useState<string | null>(null)
  const [documentSections, setDocumentSections] = useState(sampleDocumentSections)
  const [customSections, setCustomSections] = useState<Array<{ id: string; title: string; description: string }>>([])
  const [summaryOptions, setSummaryOptions] = useState({
    length: "medium", // short, medium, detailed
    tone: "professional", // professional, casual, academic
    includeKeyQuotes: true,
    includeVisualElements: false,
  })

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle document upload
  const handleDocumentUpload = (documentName: string) => {
    setUploadedDocument(documentName)
    setCurrentStep(2) // Move to summary customization step

// Add user message
    workflowEngine.addMessage("user", `I've uploaded ${documentName} for summarization`)

// Show loading message for document analysis
    workflowEngine.addLoadingMessage("Analyzing document structure and content...")
    setMessages(workflowEngine.getMessages())

// Simulate document analysis
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()

// Show summary customization options
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            I've analyzed your document and identified several sections. Please customize which sections you'd like to
            include in the summary and adjust other options:
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 2000)
  }

// Handle summary customization
  const handleSummaryCustomization = (
    sections: typeof documentSections,
    custom: typeof customSections,
    options: typeof summaryOptions,
  ) => {
    setDocumentSections(sections)
    setCustomSections(custom)
    setSummaryOptions(options)
    setCurrentStep(3) // Move to processing step

// Add user message with customization details
    const selectedSections = [...sections.filter((s) => s.selected).map((s) => s.title)]
    if (custom.length > 0) {
      selectedSections.push(...custom.map((s) => s.title))
    }

workflowEngine.addMessage(
      "user",
      `I want a ${options.length} ${options.tone} summary including these sections: ${selectedSections.join(
        ", ",
      )}. ${options.includeKeyQuotes ? "Include key quotes. " : ""}${
        options.includeVisualElements ? "Include visual elements." : ""
      }`,
    )

// Show processing message
    workflowEngine.addLoadingMessage("Analyzing document content...")
    setMessages(workflowEngine.getMessages())

// Simulate processing steps
    setTimeout(() => {
      workflowEngine.updateLoadingMessage("Extracting key information from selected sections...")
      setMessages(workflowEngine.getMessages())

setTimeout(() => {
        workflowEngine.updateLoadingMessage("Generating summary with specified parameters...")
        setMessages(workflowEngine.getMessages())

setTimeout(() => {
          workflowEngine.updateLoadingMessage("Formatting summary and preparing output...")
          setMessages(workflowEngine.getMessages())

setTimeout(() => {
            workflowEngine.removeLoadingMessage()
            showSummaryResults()
            setMessages(workflowEngine.getMessages())
          }, 1500)
        }, 1500)
      }, 1500)
    }, 1500)
  }

// Show summary results
  const showSummaryResults = () => {
    setCurrentStep(4) // Move to results step
    setIsSummaryComplete(true)

// Clear active customization before showing the final result
    workflowEngine.clearActiveCustomization()
    setActiveCustomizationId(null)

workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">
          I've generated a personalized summary of your document based on your preferences. Here's the result:
        </p>

<SummaryResult
          documentName={uploadedDocument || "document.pdf"}
          sections={documentSections.filter((s) => s.selected)}
          customSections={customSections}
          summaryOptions={summaryOptions}
          onRestart={() => {
            // Reset the workflow
            const initialMessages = workflowEngine.initialize()
            setMessages(initialMessages)
            setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
            setCurrentStep(1)
            setIsSummaryComplete(false)
            setUploadedDocument(null)
            setDocumentSections(sampleDocumentSections)
            setCustomSections([])
            setSummaryOptions({
              length: "medium",
              tone: "professional",
              includeKeyQuotes: true,
              includeVisualElements: false,
            })
          }}
        />
      </div>,
    )

setMessages(workflowEngine.getMessages())
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <DocumentUploader onUpload={handleDocumentUpload} />
      case 2:
        return (
          <SummaryCustomization
            documentSections={documentSections}
            customSections={customSections}
            summaryOptions={summaryOptions}
            onUpdateSections={setDocumentSections}
            onUpdateCustomSections={setCustomSections}
            onUpdateOptions={setSummaryOptions}
            onSubmit={handleSummaryCustomization}
          />
        )
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader
        title="Personalized Document Summary Generator"
        breadcrumbs={[{ label: "Workflows", href: "/" }]}
      />

{isSummaryComplete && (
            <ChatInput
              onSend={(message) => {
                // Handle follow-up questions here
                workflowEngine.addMessage("user", message)
                setMessages(workflowEngine.getMessages())

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'll help you with that. What specific aspect of the summary would you like to explore further?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the generated summary..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/company-one-pager/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

// Define the workflow configuration
const workflowConfig = {
  id: "company-one-pager",
  title: "Company One-Pagers – Strategic Summary Profiles",
  description:
    "Concise, standardized one-page summaries of companies covering key business details, product focus, financial performance, manufacturing footprint, and strategic transactions — for quick partner-level decision-making and opportunity assessment.",
  steps: [
    {
      id: 1,
      title: "Enter Company Name",
      description: "Provide the name of the company you want to analyze",
    },
    {
      id: 2,
      title: "Data Collection",
      description: "Gathering company information from various sources",
    },
    {
      id: 3,
      title: "Profile Generation",
      description: "Creating a comprehensive one-page company profile",
    },
    {
      id: 4,
      title: "Review Results",
      description: "Review and download the company profile",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the Company One-Pager workflow. Please enter the name of the company you'd like to create a strategic
        summary profile for.
      </p>
    </div>
  ),
}

// Sample company data (would be fetched from API in a real implementation)
const sampleCompanyData = {
  aartiDrugs: {
    name: "Aarti Drugs Limited",
    established: "1984",
    stockInfo: "BSE: 524348 | NSE: AARTIDRUGS",
    overview:
      "Founded in 1984, Aarti Drugs Limited is a prominent Indian pharmaceutical company specializing in manufacturing Active Pharmaceutical Ingredients (APIs). Promoted by Mr. Chandrakant Gogri and associates, its major shareholders include the Gogri family and institutional investors.",
    products: [
      {
        category: "Active Pharmaceutical Ingredients (APIs)",
        description: "Bulk drugs primarily for antibiotics, anti-inflammatory, anti-diabetic medications.",
      },
      {
        category: "Specialty Chemicals",
        description: "Custom synthesis and contract manufacturing solutions for global pharmaceutical players.",
      },
      {
        category: "Formulations",
        description: "Finished dosage forms marketed domestically and internationally.",
      },
    ],
    manufacturing:
      "Aarti Drugs operates several manufacturing plants, prominently located in Tarapur (Maharashtra), Sarigam (Gujarat), and Baddi (Himachal Pradesh). The facilities comply with global regulatory standards, including approvals from USFDA, WHO-GMP, and European health authorities.",
    transactions: [
      {
        year: "2021",
        description: "Raised ₹69.85 crore via Qualified Institutional Placement (QIP).",
      },
      {
        year: "2020",
        description: "Bonus share issuance (3:1 ratio).",
      },
      {
        year: "2016",
        description: "Capacity expansion of Tarapur manufacturing unit (Investment: ₹50 crore).",
      },
    ],
    keyMetrics: [
      { label: "Market Cap", value: "₹4,650 Cr" },
      { label: "Employees", value: "1,200+" },
      { label: "Export Presence", value: "60+ Countries" },
      { label: "R&D Investment", value: "3.5% of Revenue" },
    ],
    financials: [
      {
        metric: "Revenue (₹ Cr)",
        fy2023: "2,677 (+4.2%)",
        fy2022: "2,570 (+12%)",
        fy2021: "2,295 (+18%)",
      },
      {
        metric: "EBITDA (₹ Cr)",
        fy2023: "350 (+3.9%)",
        fy2022: "337 (+8%)",
        fy2021: "312 (+15%)",
      },
      {
        metric: "Net Profit (₹ Cr)",
        fy2023: "187 (+6.7%)",
        fy2022: "175 (+5%)",
        fy2021: "167 (+18%)",
      },
      {
        metric: "Profit Margin (%)",
        fy2023: "6.98%",
        fy2022: "6.81%",
        fy2021: "7.28%",
      },
      {
        metric: "Debt-to-Equity Ratio",
        fy2023: "0.46",
        fy2022: "0.52",
        fy2021: "0.57",
      },
      {
        metric: "P/E Ratio",
        fy2023: "24.8",
        fy2022: "26.2",
        fy2021: "22.5",
      },
    ],
    website: "www.aartidrugs.co.in",
    email: "investor@aartidrugs.com",
  },
  sunPharma: {
    name: "Sun Pharmaceutical Industries Ltd.",
    established: "1983",
    stockInfo: "BSE: 524715 | NSE: SUNPHARMA",
    overview:
      "Sun Pharmaceutical Industries Ltd. is India's largest pharmaceutical company and the fifth largest specialty generic company globally. Founded by Dilip Shanghvi, it has grown through strategic acquisitions and R&D investments to become a leader in the global generic pharmaceuticals market.",
    products: [
      {
        category: "Generic Pharmaceuticals",
        description: "Wide range of generic formulations across therapeutic categories.",
      },
      {
        category: "Specialty Products",
        description: "Focused on dermatology, ophthalmology, oncology, and complex generics.",
      },
      {
        category: "Active Pharmaceutical Ingredients (APIs)",
        description: "Manufacturing of key pharmaceutical ingredients for internal use and external sales.",
      },
    ],
    manufacturing:
      "Sun Pharma operates over 40 manufacturing facilities across India, US, Brazil, Canada, Hungary, Israel, Bangladesh, Mexico, and other countries. These facilities are approved by major regulatory authorities including USFDA, EMA, UK MHRA, and Japan PMDA.",
    transactions: [
      {
        year: "2015",
        description: "Acquired Ranbaxy Laboratories for $4 billion, the largest pharma acquisition in India.",
      },
      {
        year: "2016",
        description: "Acquired 14 established prescription brands from Novartis in Japan.",
      },
      {
        year: "2019",
        description: "Acquired Pola Pharma in Japan to strengthen global dermatology presence.",
      },
    ],
    keyMetrics: [
      { label: "Market Cap", value: "₹2,85,000 Cr" },
      { label: "Employees", value: "37,000+" },
      { label: "Global Presence", value: "100+ Countries" },
      { label: "R&D Investment", value: "7.6% of Revenue" },
    ],
    financials: [
      {
        metric: "Revenue (₹ Cr)",
        fy2023: "43,279 (+10.8%)",
        fy2022: "39,055 (+15.6%)",
        fy2021: "33,765 (+2.5%)",
      },
      {
        metric: "EBITDA (₹ Cr)",
        fy2023: "11,689 (+15.2%)",
        fy2022: "10,146 (+23.1%)",
        fy2021: "8,243 (+6.8%)",
      },
      {
        metric: "Net Profit (₹ Cr)",
        fy2023: "8,473 (+18.7%)",
        fy2022: "7,139 (+29.4%)",
        fy2021: "5,516 (+7.2%)",
      },
      {
        metric: "Profit Margin (%)",
        fy2023: "19.58%",
        fy2022: "18.28%",
        fy2021: "16.34%",
      },
      {
        metric: "Debt-to-Equity Ratio",
        fy2023: "0.12",
        fy2022: "0.15",
        fy2021: "0.18",
      },
      {
        metric: "P/E Ratio",
        fy2023: "33.6",
        fy2022: "35.2",
        fy2021: "38.4",
      },
    ],
    website: "www.sunpharma.com",
    email: "investor.relations@sunpharma.com",
  },
  cipla: {
    name: "Cipla Limited",
    established: "1935",
    stockInfo: "BSE: 500087 | NSE: CIPLA",
    overview:
      "Founded in 1935 by Dr. K.A. Hamied, Cipla Limited is a global pharmaceutical company focused on complex generics and specialty products. The company is known for its pioneering role in providing affordable HIV/AIDS medications to developing countries and its strong respiratory portfolio.",
    products: [
      {
        category: "Respiratory Products",
        description: "Market leader in respiratory medications including inhalers and nebulizers.",
      },
      {
        category: "Complex Generics",
        description: "Difficult-to-manufacture generic medications across therapeutic areas.",
      },
      {
        category: "Specialty Products",
        description: "Focused on respiratory, oncology, and infectious diseases.",
      },
    ],
    manufacturing:
      "Cipla operates 46 manufacturing facilities worldwide, with major sites in India, South Africa, USA, and China. The facilities are approved by major regulatory authorities including USFDA, UK MHRA, WHO, and South African MCC.",
    transactions: [
      {
        year: "2015",
        description: "Acquired InvaGen Pharmaceuticals and Exelan Pharmaceuticals in the US for $550 million.",
      },
      {
        year: "2016",
        description: "Acquired 100% stake in Cipla Medpro South Africa.",
      },
      {
        year: "2019",
        description: "Formed joint venture with Jiangsu Acebright Pharmaceutical in China.",
      },
    ],
    keyMetrics: [
      { label: "Market Cap", value: "₹1,12,000 Cr" },
      { label: "Employees", value: "25,000+" },
      { label: "Global Presence", value: "80+ Countries" },
      { label: "R&D Investment", value: "6.2% of Revenue" },
    ],
    financials: [
      {
        metric: "Revenue (₹ Cr)",
        fy2023: "22,758 (+6.4%)",
        fy2022: "21,385 (+8.2%)",
        fy2021: "19,762 (+12.1%)",
      },
      {
        metric: "EBITDA (₹ Cr)",
        fy2023: "5,235 (+9.8%)",
        fy2022: "4,766 (+11.5%)",
        fy2021: "4,274 (+15.3%)",
      },
      {
        metric: "Net Profit (₹ Cr)",
        fy2023: "3,129 (+12.6%)",
        fy2022: "2,778 (+8.7%)",
        fy2021: "2,556 (+14.2%)",
      },
      {
        metric: "Profit Margin (%)",
        fy2023: "13.75%",
        fy2022: "12.99%",
        fy2021: "12.93%",
      },
      {
        metric: "Debt-to-Equity Ratio",
        fy2023: "0.08",
        fy2022: "0.11",
        fy2021: "0.14",
      },
      {
        metric: "P/E Ratio",
        fy2023: "35.8",
        fy2022: "32.4",
        fy2021: "29.7",
      },
    ],
    website: "www.cipla.com",
    email: "investorrelations@cipla.com",
  },
}

export default function CompanyOnePagerPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [currentStep, setCurrentStep] = useState(1)
  const [isProfileComplete, setIsProfileComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)
  const [selectedCompany, setSelectedCompany] = useState<string | null>(null)
  const [companyData, setCompanyData] = useState<any>(null)

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle company name submission
  const handleCompanySubmit = (companyName: string) => {
    // Normalize company name for matching
    const normalizedName = companyName.toLowerCase().replace(/\s+/g, "")

// Find matching company in our sample data
    let matchedCompany = null
    if (normalizedName.includes("aarti") || normalizedName.includes("drug")) {
      matchedCompany = "aartiDrugs"
    } else if (normalizedName.includes("sun") || normalizedName.includes("pharma")) {
      matchedCompany = "sunPharma"
    } else if (normalizedName.includes("cipla")) {
      matchedCompany = "cipla"
    } else {
      // Default to Aarti Drugs if no match
      matchedCompany = "aartiDrugs"
    }

setSelectedCompany(matchedCompany)
    setCurrentStep(2) // Move to data collection step

// Add user message
    workflowEngine.addMessage("user", `I'd like to generate a one-pager for ${companyName}`)

// Show data collection process
    simulateDataCollection(matchedCompany)
  }

// Simulate data collection process
  const simulateDataCollection = (companyKey: string) => {
    const steps = [
      "Searching for company information...",
      "Retrieving financial data...",
      "Analyzing company structure...",
      "Gathering product portfolio details...",
      "Collecting manufacturing information...",
      "Retrieving transaction history...",
      "Compiling key metrics...",
      "Generating financial analysis...",
    ]

workflowEngine.addLoadingMessage(steps[0])
    setMessages(workflowEngine.getMessages())

// Simulate sequential loading steps
    let stepIndex = 1
    const interval = setInterval(() => {
      if (stepIndex < steps.length) {
        workflowEngine.updateLoadingMessage(steps[stepIndex])
        setMessages(workflowEngine.getMessages())
        stepIndex++
      } else {
        clearInterval(interval)
        workflowEngine.removeLoadingMessage()
        showCompanyProfile(companyKey)
      }
    }, 1500)
  }

// Show company profile
  const showCompanyProfile = (companyKey: string) => {
    setCurrentStep(4) // Move to results step
    setIsProfileComplete(true)
    setCompanyData(sampleCompanyData[companyKey as keyof typeof sampleCompanyData])

// Clear active customization before showing the final result
    workflowEngine.clearActiveCustomization()
    setActiveCustomizationId(null)

// Send a single combined message with both the text and the profile component
    workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">
          I've compiled a comprehensive one-page strategic profile for{" "}
          {sampleCompanyData[companyKey as keyof typeof sampleCompanyData].name}. Here's the summary:
        </p>

<CompanyProfile
          companyData={sampleCompanyData[companyKey as keyof typeof sampleCompanyData]}
          onRestart={() => {
            // Reset the workflow
            const initialMessages = workflowEngine.initialize()
            setMessages(initialMessages)
            setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
            setCurrentStep(1)
            setIsProfileComplete(false)
            setSelectedCompany(null)
            setCompanyData(null)
          }}
        />
      </div>,
    )

setMessages(workflowEngine.getMessages())
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <CompanyNameInput onSubmit={handleCompanySubmit} />
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader
        title="Company One-Pagers – Strategic Summary Profiles"
        breadcrumbs={[{ label: "Workflows", href: "/" }]}
      />

{isProfileComplete && (
            <ChatInput
              onSend={(message) => {
                // Handle follow-up questions here
                workflowEngine.addMessage("user", message)
                setMessages(workflowEngine.getMessages())

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'll help you with that. What specific aspect of the company profile would you like to explore
                        further?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the company profile..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="lib/workflow/workflow-engine.ts" isMerged="true"
import type { ReactNode } from "react"
import type { Message, WorkflowConfig } from "@/lib/workflow/types"

export class WorkflowEngine {
  private config: WorkflowConfig
  private currentStep = 1
  private messages: Message[] = []
  private activeCustomizationId: string | null = null

constructor(config: WorkflowConfig) {
    this.config = config
  }

public initialize(): Message[] {
    const welcomeId = "welcome-" + Date.now()
    this.activeCustomizationId = welcomeId

return this.messages
  }

public getCurrentStep(): number {
    return this.currentStep
  }

public getMessages(): Message[] {
    return this.messages
  }

public getActiveCustomizationId(): string | null {
    return this.activeCustomizationId
  }

public addMessage(
    role: "system" | "user" | "loading",
    content: string | ReactNode,
    showCustomization = false,
  ): string {
    const newId = Date.now().toString()

// If this is a system message with customization, update the active customization ID
    if (role === "system" && showCustomization) {
      this.activeCustomizationId = newId
    } else if (role === "system" && !showCustomization) {
      // If it's a system message without customization, clear the active customization
      this.activeCustomizationId = null
    }
    // For user messages, we don't change the active customization ID

console.log(`Added message ${newId}, role: ${role}, showCustomization: ${showCustomization}`)
    console.log(`Active customization ID is now: ${this.activeCustomizationId}`)

return newId
  }

public setCurrentStep(step: number): void {
    this.currentStep = step
  }

public updateLoadingMessage(content: string): void {
    this.messages = this.messages.map((msg) => (msg.id === "loading" ? { ...msg, content } : msg))
  }

public removeLoadingMessage(): void {
    this.messages = this.messages.filter((msg) => msg.id !== "loading")
  }

// Remove all messages after this one
      this.messages = this.messages.slice(0, messageIndex + 1)

// Reset the current step based on the message
      if (message.step) {
        this.currentStep = message.step
      }

// Set this message as the active customization
      if (message.role === "system" && message.showCustomization) {
        this.activeCustomizationId = message.id
      } else if (message.role === "user") {
        // Find the previous system message that might have customization
        const prevSystemMessage = this.messages
          .slice(0, messageIndex)
          .reverse()
          .find((msg) => msg.role === "system" && msg.showCustomization)

if (prevSystemMessage) {
          this.activeCustomizationId = prevSystemMessage.id
        } else {
          this.activeCustomizationId = null
        }
      }
    }
  }

// Add a method to explicitly clear the active customization
  public clearActiveCustomization(): void {
    this.activeCustomizationId = null
    console.log("Cleared active customization ID")
  }
}
[V0_FILE]plaintext:file="public/aarti-drugs-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-uGFRDEZrrToQd2tgohxIv8Zg302EAt.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/workflow/report/company-profile.tsx" isMerged="true"
"use client"

import { useRef } from "react"
import { Button } from "@/components/ui/button"
import { Download, RefreshCw } from "lucide-react"
import { Hanken_Grotesk } from "next/font/google"

// Initialize the Hanken Grotesk font
const hankenGrotesk = Hanken_Grotesk({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
})

interface CompanyProfileProps {
  companyData: any
  onRestart: () => void
}

export function CompanyProfile({ companyData, onRestart }: CompanyProfileProps) {
  const pageRef = useRef<HTMLDivElement>(null)

const handleDownload = () => {
    // In a real implementation, this would generate a PDF
    alert("In a production environment, this would download a PDF of the company profile.")
  }

// Helper function to bold numbers in text
  const boldNumbers = (text: string) => {
    return text.split(/(\d+\.?\d*%?x?)/).map((part, i) => {
      const isNumber = /^\d+\.?\d*%?x?$/.test(part)
      return isNumber ? (
        <span key={i} className="font-bold">
          {part}
        </span>
      ) : (
        <span key={i}>{part}</span>
      )
    })
  }

return (
    <div className="space-y-6">
      <div className="border rounded-lg shadow-sm overflow-hidden bg-white">
        <div ref={pageRef} className={`w-full mx-auto bg-white p-8 overflow-visible ${hankenGrotesk.className}`}>
          {/* Header with Logo and Title */}
          <div className="border-b-2 border-emerald-700 pb-4 mb-6">
            <div className="flex justify-between items-center">
              <div className="flex-1">
                <h1 className="text-2xl font-bold text-emerald-800">{companyData.name}</h1>
                <p className="text-xs text-gray-600 mt-1">
                  Established {companyData.established} | {companyData.stockInfo}
                </p>
              </div>
              <div className="flex-shrink-0">
                <img src="/aarti-drugs-logo.png" alt="Aarti Drugs Logo" className="h-10 w-auto" />
              </div>
            </div>
          </div>

<div className="grid grid-cols-12 gap-6">
            {/* Left Column - 8/12 width */}
            <div className="col-span-12 md:col-span-8">
              {/* Company Overview */}
              <div className="mb-6">
                <h2 className="text-lg font-bold text-emerald-700 flex items-center">
                  <span className="mr-2">🏢</span> Company Overview
                </h2>
                <p className="text-sm mt-2">{companyData.overview}</p>
              </div>

{/* Product Portfolio - Updated content */}
              <div className="mb-6">
                <h2 className="text-lg font-bold text-emerald-700 flex items-center">
                  <span className="mr-2">📦</span> Product Portfolio
                </h2>
                <p className="text-sm mt-2">Aarti operates through three main segments:</p>
                <ul className="text-sm mt-2 list-disc pl-5">
                  <li className="mb-1">
                    <span className="font-semibold">Active Pharmaceutical Ingredients (APIs):</span>{" "}
                    <span className="font-bold">~65%</span> of revenue – focused on Metronidazole, Ketoconazole, and
                    Ciprofloxacin.
                  </li>
                  <li className="mb-1">
                    <span className="font-semibold">Formulations:</span> <span className="font-bold">~20%</span> –
                    supplied to both institutional buyers and branded generics, include Tablets, capsules, dry syrups
                    (human and veterinary)
                  </li>
                  <li className="mb-1">
                    <span className="font-semibold">Intermediates & Others:</span>{" "}
                    <span className="font-bold">~15%</span> – includes custom synthesis for international pharma clients
                  </li>
                </ul>
              </div>

{/* Manufacturing Information */}
              <div className="mb-6">
                <h2 className="text-lg font-bold text-emerald-700 flex items-center">
                  <span className="mr-2">🏭</span> Manufacturing Information
                </h2>
                <p className="text-sm mt-2">{companyData.manufacturing}</p>
              </div>

{/* Transaction History */}
              <div>
                <h2 className="text-lg font-bold text-emerald-700 flex items-center">
                  <span className="mr-2">💳</span> Transaction History
                </h2>
                <ul className="text-sm mt-2 list-disc pl-5">
                  {companyData.transactions.map((transaction: any, index: number) => (
                    <li key={index} className="mb-1">
                      <span className="font-semibold">{transaction.year}:</span> {transaction.description}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

{/* Right Column - 4/12 width */}
            <div className="col-span-12 md:col-span-4">
              {/* Key Metrics */}
              <div className="mb-6">
                <div className="space-y-3">
                  {companyData.keyMetrics.map((metric: any, index: number) => (
                    <div key={index} className="border border-gray-300 p-3 rounded">
                      <p className="text-gray-600 text-xs">{metric.label}</p>
                      <p className="font-bold text-sm">{boldNumbers(metric.value)}</p>
                    </div>
                  ))}
                </div>
              </div>

{/* Valuation Insight section removed as requested */}
            </div>
          </div>

{/* Financial Analysis - Bottom */}
          <div className="mt-6">
            <div className="border-t-2 border-emerald-700 pt-4 mt-4">
              <h2 className="text-lg font-bold text-emerald-700 flex items-center mb-3">
                <span className="mr-2">📊</span> Financial Analysis
              </h2>

<div className="overflow-hidden rounded-lg border border-gray-200">
                <table className="min-w-full divide-y divide-gray-200 text-sm">
                  <thead className="bg-white">
                    <tr>
                      <th scope="col" className="px-3 py-2 text-left text-xs font-bold text-gray-700">
                        Metric
                      </th>
                      <th scope="col" className="px-3 py-2 text-left text-xs font-bold text-gray-700">
                        FY2023
                      </th>
                      <th scope="col" className="px-3 py-2 text-left text-xs font-bold text-gray-700">
                        FY2022
                      </th>
                      <th scope="col" className="px-3 py-2 text-left text-xs font-bold text-gray-700">
                        FY2021
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200 bg-white">
                    {companyData.financials.map((row: any, index: number) => (
                      <tr key={index}>
                        <td className="px-3 py-1.5 text-xs font-medium">{row.metric}</td>
                        <td className="px-3 py-1.5 text-xs text-left">{row.fy2023}</td>
                        <td className="px-3 py-1.5 text-xs text-left">{row.fy2022}</td>
                        <td className="px-3 py-1.5 text-xs text-left">{row.fy2021}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <p className="text-xs text-gray-500 mt-1 italic">
                (YoY growth in parentheses; financial years ending March 31.)
              </p>
            </div>
          </div>

{/* Footer */}
          <div className="mt-8 pt-4 border-t border-gray-200 flex justify-between items-center text-xs text-gray-500">
            <div>© 2023 {companyData.name}. All Rights Reserved.</div>
            <div>
              {companyData.website} | {companyData.email}
            </div>
          </div>
        </div>
      </div>

<div className="flex justify-start gap-2 mt-4">
        <Button
          onClick={handleDownload}
          className="flex items-center gap-1 bg-[#004ce6] hover:bg-[#0040c9] text-white"
          size="sm"
        >
          <Download className="h-4 w-4" />
          Download PDF
        </Button>
        <Button onClick={onRestart} variant="outline" className="flex items-center gap-1" size="sm">
          <RefreshCw className="h-4 w-4" />
          New Profile
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/company-name-input.tsx" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

interface CompanyNameInputProps {
  onSubmit: (companyName: string) => void
}

export function CompanyNameInput({ onSubmit }: CompanyNameInputProps) {
  const [selectedValue, setSelectedValue] = useState("")
  const [error, setError] = useState("")

const companies = [
    { value: "aarti-drugs", label: "Aarti Drugs Limited" },
    { value: "sun-pharma", label: "Sun Pharmaceutical Industries Ltd." },
    { value: "cipla", label: "Cipla Limited" },
  ]

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

if (!selectedValue) {
      setError("Please select a company")
      return
    }

setError("")
    // Find the company label based on the selected value
    const selectedCompany = companies.find((company) => company.value === selectedValue)
    onSubmit(selectedCompany?.label || selectedValue)
  }

return (
    <div className="space-y-4">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label htmlFor="company-name" className="block text-sm font-medium text-[#4e5971] mb-1">
            Enter the name of the company
          </label>
          <Select
            value={selectedValue}
            onValueChange={(value) => {
              setSelectedValue(value)
              setError("")
            }}
          >
            <SelectTrigger
              className="w-full border-[#dee6f5] bg-white text-left font-normal"
              aria-label="Select a company"
            >
              <SelectValue placeholder="Select a company..." />
            </SelectTrigger>
            <SelectContent>
              {companies.map((company) => (
                <SelectItem key={company.value} value={company.value}>
                  {company.label}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
        </div>
        <Button type="submit" className="bg-[#004ce6] hover:bg-[#0040c9] text-white h-9 px-4 py-2">
          Continue
        </Button>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/chat-message.tsx" isMerged="true"
"use client"

import type React from "react"

export type MessageRole = "system" | "user" | "loading"

export interface MessageProps {
  id: string
  role: MessageRole
  content: React.ReactNode | string
  timestamp: Date
  showCustomization?: boolean
  step?: number
  customization?: React.ReactNode
  onEdit?: (id: string) => void
  isActiveCustomization?: boolean
}

export function ChatMessage({ id, role, content, customization, onEdit, isActiveCustomization = false }: MessageProps) {
  if (role === "loading") {
    return (
      <div className="flex items-center gap-2">
        <div className="h-8 w-8 flex-shrink-0">
          <img src="/fynd-logo.png" alt="Fynd Logo" width={32} height={32} className="opacity-50" />
        </div>
        <span className="text-[#4e5971]">{content}</span>
      </div>
    )
  }

if (role === "system") {
    return (
      <div className="flex">
        <div className="h-8 w-8 flex-shrink-0 mt-1">
          <img src="/fynd-logo.png" alt="Fynd Logo" width={32} height={32} />
        </div>
        <div className="flex-1 pl-3">
          <div className="flex flex-col">
            <div className="text-[#001742] leading-normal">{content}</div>
            {/* We don't need to render customization here as it's handled by ChatInterface */}
          </div>
        </div>
      </div>
    )
  }

// For user messages, we now directly render the content which might include the image
  return (
    <div className="flex justify-end">
      {typeof content === "string" ? (
        <div className="max-w-[85%] bg-[#EAF0FC] text-[#001742] rounded-lg p-4 relative group">
          {content}
          {onEdit && (
            <button
              onClick={() => onEdit(id)}
              className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 text-[#8098c4] hover:text-[#004ce6] transition-opacity"
            >
              Edit
            </button>
          )}
        </div>
      ) : (
        content
      )}
    </div>
  )
}
[V0_FILE]plaintext:file="public/quarterly-revenue-bar-chart.png" url="https://v0.blob.vercel-storage.com/quarterly-revenue-bar-chart-Yx9Yx9Yx9.png" query="quarterly revenue bar chart showing three product lines across 6 quarters with blue, green and orange bars" isMerged="true"
[V0_FILE]plaintext:file="public/excel-bar-chart-data-table.png" url="https://v0.blob.vercel-storage.com/excel-bar-chart-data-table-Yx9Yx9Yx9.png" query="excel spreadsheet showing a bar chart with data table below it displaying quarterly revenue for three product lines" isMerged="true"
[V0_FILE]plaintext:file="public/adjusted-revenue-chart.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Uhbyd7u9OY5oGlF1HzxG1LrIcoWPZe.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/workflows/screenshot-chart/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { ScreenshotUploader } from "@/components/workflow/customization/screenshot-uploader"
import { ChartTypeSelector } from "@/components/workflow/customization/chart-type-selector"
import { ChartCustomization } from "@/components/workflow/customization/chart-customization"
import { ChartConversionResult } from "@/components/workflow/report/chart-conversion-result"
import { WorkflowEngine } from "@/lib/workflow/workflow-engine"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "screenshot-chart",
  title: "Screenshot Chart to Excel",
  description: "Convert chart screenshots into editable Excel charts",
  steps: [
    {
      id: 1,
      title: "Upload Screenshot",
      description: "Upload a screenshot of the chart you want to convert",
    },
    {
      id: 2,
      title: "Confirm Chart Type",
      description: "Confirm or select the type of chart detected",
    },
    {
      id: 3,
      title: "Customize Chart",
      description: "Customize chart options and data labels",
    },
    {
      id: 4,
      title: "Processing",
      description: "Converting screenshot to Excel chart",
    },
    {
      id: 5,
      title: "Review Results",
      description: "Review and download the converted Excel chart",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the Screenshot Chart to Excel workflow. Please upload a screenshot of any chart you'd like to convert
        into an editable Excel chart.
      </p>
    </div>
  ),
}

// Sample chart data that would be "extracted" from the screenshot
const sampleChartData = {
  type: "bar",
  title: "Quarterly Revenue by Product Line (2022-2023)",
  labels: ["Q1 2022", "Q2 2022", "Q3 2022", "Q4 2022", "Q1 2023", "Q2 2023"],
  datasets: [
    {
      name: "Product A",
      data: [120000, 132000, 141000, 160000, 152000, 170000],
      color: "#4C6FFF",
    },
    {
      name: "Product B",
      data: [85000, 90000, 100000, 110000, 115000, 125000],
      color: "#05CD99",
    },
    {
      name: "Product C",
      data: [65000, 70000, 75000, 85000, 90000, 100000],
      color: "#FFB547",
    },
  ],
}

// Custom message component for user messages with images
function UserMessageWithImage({ content, imageSrc }: { content: string; imageSrc: string }) {
  return (
    <div className="flex flex-col items-end">
      <div className="mb-2 inline-block rounded-lg overflow-hidden border border-[#dee6f5] shadow-sm">
        <img
          src={imageSrc || "/placeholder.svg"}
          alt="Uploaded chart"
          className="max-w-[300px] max-h-[200px] w-auto h-auto object-contain"
        />
      </div>
      <div className="inline-block bg-[#EAF0FC] text-[#001742] rounded-lg p-4 whitespace-nowrap">{content}</div>
    </div>
  )
}

export default function ScreenshotChartPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [currentStep, setCurrentStep] = useState(1)
  const [isConversionComplete, setIsConversionComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)
  const [uploadedScreenshot, setUploadedScreenshot] = useState<string | null>(null)
  const [chartType, setChartType] = useState<string>("bar")
  const [chartOptions, setChartOptions] = useState({
    includeDataTable: true,
    applyColorScheme: "default",
    addTrendlines: false,
  })

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle screenshot upload
  const handleScreenshotUpload = (screenshotName: string) => {
    setUploadedScreenshot(screenshotName)
    setCurrentStep(2) // Move to chart type confirmation step

// Add user message with image
    const userMessageId = Date.now().toString()
    setMessages((prevMessages) => [
      ...prevMessages,
      {
        id: userMessageId,
        role: "user",
        content: (
          <UserMessageWithImage
            content="I have uploaded a screenshot of a chart."
            imageSrc="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Uhbyd7u9OY5oGlF1HzxG1LrIcoWPZe.png"
          />
        ),
        timestamp: new Date(),
      },
    ])

// Show loading message for chart detection
    workflowEngine.addLoadingMessage("Analyzing screenshot and detecting chart type...")
    setMessages((prevMessages) => prevMessages)

// Simulate chart detection
    setTimeout(() => {
      // Remove loading message
      setMessages((prevMessages) => prevMessages.filter((msg) => msg.role !== "loading"))

// Show chart type confirmation
      const newId = Date.now().toString()
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          id: newId,
          role: "system",
          content: (
            <div className="space-y-4">
              <p className="text-[#001742]">
                I've analyzed your screenshot and detected a <strong>bar chart</strong>. Is this correct, or would you
                like to select a different chart type?
              </p>
            </div>
          ),
          timestamp: new Date(),
          showCustomization: true,
        },
      ])

setActiveCustomizationId(newId)
    }, 2000)
  }

// Handle chart type selection
  const handleChartTypeSelect = (type: string) => {
    setChartType(type)
    setCurrentStep(3) // Move to chart customization step

// Add user message
    const userMessageId = Date.now().toString()
    setMessages((prevMessages) => [
      ...prevMessages,
      {
        id: userMessageId,
        role: "user",
        content: `Yes, it's a ${type} chart`,
        timestamp: new Date(),
      },
    ])

// Show chart customization options
    setTimeout(() => {
      const newId = Date.now().toString()
      setMessages((prevMessages) => [
        ...prevMessages,
        {
          id: newId,
          role: "system",
          content: (
            <div className="space-y-4">
              <p className="text-[#001742]">
                Great! Now you can customize how you want your Excel chart to be generated. Please select from the
                following options:
              </p>
            </div>
          ),
          timestamp: new Date(),
          showCustomization: true,
        },
      ])

setActiveCustomizationId(newId)
    }, 500)
  }

// Handle chart customization
  const handleChartCustomization = (options: typeof chartOptions) => {
    setChartOptions(options)
    setCurrentStep(4) // Move to processing step

// Add user message
    const customizationDetails = []
    if (options.includeDataTable) customizationDetails.push("include data table")
    if (options.applyColorScheme !== "default")
      customizationDetails.push(`apply ${options.applyColorScheme} color scheme`)
    if (options.addTrendlines) customizationDetails.push("add trendlines")

const userMessageId = Date.now().toString()
    setMessages((prevMessages) => [
      ...prevMessages,
      {
        id: userMessageId,
        role: "user",
        content: `I want to ${customizationDetails.length > 0 ? customizationDetails.join(", ") : "proceed with default options"}`,
        timestamp: new Date(),
      },
    ])

// Show processing message
    const loadingId = "loading"
    setMessages((prevMessages) => [
      ...prevMessages,
      {
        id: loadingId,
        role: "loading",
        content: "Extracting data points from chart...",
        timestamp: new Date(),
      },
    ])

// Simulate processing steps
    setTimeout(() => {
      setMessages((prevMessages) =>
        prevMessages.map((msg) =>
          msg.id === loadingId ? { ...msg, content: "Identifying axes and data series..." } : msg,
        ),
      )

setTimeout(() => {
        setMessages((prevMessages) =>
          prevMessages.map((msg) =>
            msg.id === loadingId ? { ...msg, content: "Converting to Excel format..." } : msg,
          ),
        )

setTimeout(() => {
          setMessages((prevMessages) =>
            prevMessages.map((msg) =>
              msg.id === loadingId ? { ...msg, content: "Applying formatting and customizations..." } : msg,
            ),
          )

setTimeout(() => {
            // Remove loading message
            setMessages((prevMessages) => prevMessages.filter((msg) => msg.id !== loadingId))
            showConversionResults()
          }, 1500)
        }, 1500)
      }, 1500)
    }, 1500)
  }

// Show conversion results
  const showConversionResults = () => {
    setCurrentStep(5) // Move to results step
    setIsConversionComplete(true)

// Clear active customization
    setActiveCustomizationId(null)

const resultId = Date.now().toString()
    setMessages((prevMessages) => [
      ...prevMessages,
      {
        id: resultId,
        role: "system",
        content: (
          <div className="space-y-4">
            <p className="text-[#001742]">
              I've successfully converted your chart screenshot to an editable Excel chart. Here's the result:
            </p>

<ChartConversionResult
              chartData={sampleChartData}
              chartType={chartType}
              chartOptions={chartOptions}
              screenshotName={uploadedScreenshot || "chart_screenshot.png"}
              onRestart={() => {
                // Reset the workflow
                setMessages([])
                const initialMessages = workflowEngine.initialize()
                setMessages(initialMessages)
                setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
                setCurrentStep(1)
                setIsConversionComplete(false)
                setUploadedScreenshot(null)
                setChartType("bar")
                setChartOptions({
                  includeDataTable: true,
                  applyColorScheme: "default",
                  addTrendlines: false,
                })
              }}
            />
          </div>
        ),
        timestamp: new Date(),
      },
    ])
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <ScreenshotUploader onUpload={handleScreenshotUpload} />
      case 2:
        return <ChartTypeSelector onSelect={handleChartTypeSelect} detectedType={chartType} />
      case 3:
        return <ChartCustomization options={chartOptions} onSubmit={handleChartCustomization} />
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader title="Screenshot Chart to Excel" breadcrumbs={[{ label: "Workflows", href: "/" }]} />

{isMounted && (
        <>
          <ChatInterface
            messages={messagesWithCustomization}
            activeCustomizationId={activeCustomizationId}
            onEditMessage={() => {}}
            contentContainerRef={contentContainerRef}
          />

{isConversionComplete && (
            <ChatInput
              onSend={(message) => {
                // Handle follow-up questions here
                const userMessageId = Date.now().toString()
                setMessages((prevMessages) => [
                  ...prevMessages,
                  {
                    id: userMessageId,
                    role: "user",
                    content: message,
                    timestamp: new Date(),
                  },
                ])

// Simulate response
                setTimeout(() => {
                  const responseId = Date.now().toString()
                  setMessages((prevMessages) => [
                    ...prevMessages,
                    {
                      id: responseId,
                      role: "system",
                      content: (
                        <div>
                          <p className="text-[#4e5971]">
                            I'll help you with that. What specific aspect of the chart conversion would you like to
                            explore further?
                          </p>
                        </div>
                      ),
                      timestamp: new Date(),
                    },
                  ])
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the converted chart..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/financial-statement-extraction/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { DocumentUploader } from "@/components/workflow/customization/document-uploader"
import { ExtractionOptions } from "@/components/workflow/customization/extraction-options"
import { ExtractionResult } from "@/components/workflow/report/extraction-result"
import { WorkflowEngine } from "@/lib/workflow/workflow-engine"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "financial-statement-extraction",
  title: "Financial Statement Extraction from PDF to Excel",
  description: "Extract financial statements from PDF documents and convert them to Excel format",
  steps: [
    {
      id: 1,
      title: "Upload Document",
      description: "Upload a PDF document containing financial statements",
    },
    {
      id: 2,
      title: "Select Extraction Options",
      description: "Choose how you want the financial statements to be extracted",
    },
    {
      id: 3,
      title: "Processing",
      description: "Extracting and processing financial statements",
    },
    {
      id: 4,
      title: "Review Results",
      description: "Review and download the extracted financial statements",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the Financial Statement Extraction workflow. Please upload a PDF document containing financial
        statements that you'd like to convert to Excel format.
      </p>
    </div>
  ),
}

// Sample financial statements that would be "extracted"
const sampleFinancialStatements = {
  incomeStatement: {
    title: "Income Statement",
    data: [
      { item: "Revenue", "2022": 5250000, "2021": 4800000, "2020": 4200000 },
      { item: "Cost of Revenue", "2022": 2100000, "2021": 1920000, "2020": 1680000 },
      { item: "Gross Profit", "2022": 3150000, "2021": 2880000, "2020": 2520000 },
      { item: "Operating Expenses", "2022": 1575000, "2021": 1440000, "2020": 1260000 },
      { item: "Operating Income", "2022": 1575000, "2021": 1440000, "2020": 1260000 },
      { item: "Interest Expense", "2022": 210000, "2021": 192000, "2020": 168000 },
      { item: "Income Before Tax", "2022": 1365000, "2021": 1248000, "2020": 1092000 },
      { item: "Income Tax", "2022": 341250, "2021": 312000, "2020": 273000 },
      { item: "Net Income", "2022": 1023750, "2021": 936000, "2020": 819000 },
    ],
  },
  balanceSheet: {
    title: "Balance Sheet",
    data: [
      { item: "Cash and Cash Equivalents", "2022": 1500000, "2021": 1200000, "2020": 900000 },
      { item: "Accounts Receivable", "2022": 750000, "2021": 600000, "2020": 450000 },
      { item: "Inventory", "2022": 1000000, "2021": 800000, "2020": 600000 },
      { item: "Total Current Assets", "2022": 3250000, "2021": 2600000, "2020": 1950000 },
      { item: "Property, Plant and Equipment", "2022": 4500000, "2021": 4000000, "2020": 3500000 },
      { item: "Total Assets", "2022": 7750000, "2021": 6600000, "2020": 5450000 },
      { item: "Accounts Payable", "2022": 500000, "2021": 400000, "2020": 300000 },
      { item: "Short-term Debt", "2022": 750000, "2021": 600000, "2020": 450000 },
      { item: "Total Current Liabilities", "2022": 1250000, "2021": 1000000, "2020": 750000 },
      { item: "Long-term Debt", "2022": 2000000, "2021": 1800000, "2020": 1600000 },
      { item: "Total Liabilities", "2022": 3250000, "2021": 2800000, "2020": 2350000 },
      { item: "Shareholders' Equity", "2022": 4500000, "2021": 3800000, "2020": 3100000 },
      { item: "Total Liabilities and Equity", "2022": 7750000, "2021": 6600000, "2020": 5450000 },
    ],
  },
  cashFlow: {
    title: "Cash Flow Statement",
    data: [
      { item: "Net Income", "2022": 1023750, "2021": 936000, "2020": 819000 },
      { item: "Depreciation and Amortization", "2022": 450000, "2021": 400000, "2020": 350000 },
      { item: "Changes in Working Capital", "2022": -250000, "2021": -200000, "2020": -150000 },
      { item: "Cash from Operating Activities", "2022": 1223750, "2021": 1136000, "2020": 1019000 },
      { item: "Capital Expenditures", "2022": -950000, "2021": -900000, "2020": -850000 },
      { item: "Cash from Investing Activities", "2022": -950000, "2021": -900000, "2020": -850000 },
      { item: "Debt Issuance (Repayment)", "2022": 350000, "2021": 300000, "2020": 250000 },
      { item: "Dividends Paid", "2022": -323750, "2021": -236000, "2020": -119000 },
      { item: "Cash from Financing Activities", "2022": 26250, "2021": 64000, "2020": 131000 },
      { item: "Net Change in Cash", "2022": 300000, "2021": 300000, "2020": 300000 },
      { item: "Beginning Cash Balance", "2022": 1200000, "2021": 900000, "2020": 600000 },
      { item: "Ending Cash Balance", "2022": 1500000, "2021": 1200000, "2020": 900000 },
    ],
  },
}

export default function FinancialStatementExtractionPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [currentStep, setCurrentStep] = useState(1)
  const [isExtractionComplete, setIsExtractionComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)
  const [uploadedDocument, setUploadedDocument] = useState<string | null>(null)
  const [extractionOption, setExtractionOption] = useState<"single" | "separate">("single")

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle document upload
  const handleDocumentUpload = (documentName: string) => {
    setUploadedDocument(documentName)
    setCurrentStep(2) // Move to extraction options step

// Add user message
    workflowEngine.addMessage("user", `I've uploaded ${documentName} for financial statement extraction`)

// Show extraction options
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            Great! I've received your document. How would you like the financial statements to be extracted?
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle extraction option selection
  const handleExtractionOptionSelect = (option: "single" | "separate", statementTypes: string[]) => {
    setExtractionOption(option)
    setCurrentStep(3) // Move to processing step

// Add user message
    workflowEngine.addMessage(
      "user",
      `I want the ${statementTypes.join(" and ")} financial statements in ${option === "single" ? "a single Excel file" : "separate Excel files"}`,
    )

// Show processing message
    workflowEngine.addLoadingMessage("Analyzing document structure...")
    setMessages(workflowEngine.getMessages())

// Simulate processing steps
    setTimeout(() => {
      workflowEngine.updateLoadingMessage("Identifying financial tables...")
      setMessages(workflowEngine.getMessages())

setTimeout(() => {
        workflowEngine.updateLoadingMessage("Extracting Income Statement...")
        setMessages(workflowEngine.getMessages())

setTimeout(() => {
          workflowEngine.updateLoadingMessage("Extracting Balance Sheet...")
          setMessages(workflowEngine.getMessages())

setTimeout(() => {
            workflowEngine.updateLoadingMessage("Extracting Cash Flow Statement...")
            setMessages(workflowEngine.getMessages())

setTimeout(() => {
              workflowEngine.updateLoadingMessage("Formatting data and applying formulas...")
              setMessages(workflowEngine.getMessages())

setTimeout(() => {
                workflowEngine.removeLoadingMessage()
                showExtractionResults()
                setMessages(workflowEngine.getMessages())
              }, 1500)
            }, 1500)
          }, 1500)
        }, 1500)
      }, 1500)
    }, 1500)
  }

// Show extraction results
  const showExtractionResults = () => {
    setCurrentStep(4) // Move to results step
    setIsExtractionComplete(true)

// Clear active customization before showing the final result
    workflowEngine.clearActiveCustomization()
    setActiveCustomizationId(null)

workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">
          I've successfully extracted the financial statements from your document. Here's what I found:
        </p>

<ExtractionResult
          financialStatements={sampleFinancialStatements}
          extractionOption={extractionOption}
          documentName={uploadedDocument || "financial_document.pdf"}
          onRestart={() => {
            // Reset the workflow
            const initialMessages = workflowEngine.initialize()
            setMessages(initialMessages)
            setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
            setCurrentStep(1)
            setIsExtractionComplete(false)
            setUploadedDocument(null)
          }}
        />
      </div>,
    )

setMessages(workflowEngine.getMessages())
  }

return (
    <WorkflowLayout>
      <WorkflowHeader
        title="Financial Statement Extraction from PDF to Excel"
        breadcrumbs={[{ label: "Workflows", href: "/" }]}
      />

{isExtractionComplete && (
            <ChatInput
              onSend={(message) => {
                // Handle follow-up questions here
                workflowEngine.addMessage("user", message)
                setMessages(workflowEngine.getMessages())

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'll help you with that. What specific aspect of the extraction would you like to explore
                        further?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the extracted financial statements..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/company-input.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

interface CompanyInputProps {
  onSubmit: (name: string, ticker: string) => void
}

export function CompanyInput({ onSubmit }: CompanyInputProps) {
  const [companyName, setCompanyName] = useState("")
  const [ticker, setTicker] = useState("")
  const [error, setError] = useState("")

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

if (!companyName.trim()) {
      setError("Please enter a company name")
      return
    }

if (!ticker.trim()) {
      setError("Please enter a ticker symbol")
      return
    }

setError("")
    onSubmit(companyName, ticker)
  }

return (
    <div className="space-y-4">
      <form onSubmit={handleSubmit} className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="company-name" className="text-sm font-medium text-[#4e5971]">
            Company Name
          </Label>
          <Input
            id="company-name"
            placeholder="e.g. Zomato Limited"
            value={companyName}
            onChange={(e) => {
              setCompanyName(e.target.value)
              setError("")
            }}
            className="border-[#dee6f5] focus-visible:ring-[#004ce6]"
          />
        </div>

<div className="space-y-2">
          <Label htmlFor="ticker" className="text-sm font-medium text-[#4e5971]">
            Ticker Symbol
          </Label>
          <Input
            id="ticker"
            placeholder="e.g. ZOMATO"
            value={ticker}
            onChange={(e) => {
              setTicker(e.target.value)
              setError("")
            }}
            className="border-[#dee6f5] focus-visible:ring-[#004ce6]"
          />
        </div>

{error && <p className="text-sm text-red-500">{error}</p>}

<Button type="submit" className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm">
          Continue
        </Button>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/ipo-screening/loading.tsx" isMerged="true"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"

export default function Loading() {
  return (
    <WorkflowLayout>
      <WorkflowHeader title="DRHP/IPO Document Screening" breadcrumbs={[{ label: "Workflows", href: "/" }]} />
      <div className="flex-1 overflow-y-auto p-6">
        <div className="max-w-3xl mx-auto space-y-6">
          <div className="animate-pulse flex space-x-4">
            <div className="flex-1 space-y-6 py-1">
              <div className="h-6 bg-slate-200 rounded w-3/4"></div>
              <div className="space-y-3">
                <div className="h-4 bg-slate-200 rounded"></div>
                <div className="h-4 bg-slate-200 rounded w-5/6"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/section-selector.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { ClickableCheckbox } from "./clickable-checkbox"

interface SectionSelectorProps {
  onSubmit: (sections: string[], detailLevel: "high" | "detailed") => void
}

export function SectionSelector({ onSubmit }: SectionSelectorProps) {
  const [sections, setSections] = useState<string[]>([
    "executiveSummary",
    "offeringDetails",
    "financialHighlights",
    "useOfProceeds",
    "peerComparison",
    "valuationSummary",
    "riskFactors",
    "ipoTimeline",
    "analystRecommendation",
  ])

const [detailLevel, setDetailLevel] = useState<"high" | "detailed">("high")
  const [error, setError] = useState("")

const availableSections = [
    { id: "executiveSummary", label: "Executive Summary" },
    { id: "offeringDetails", label: "Offering Details" },
    { id: "financialHighlights", label: "Financial Highlights" },
    { id: "useOfProceeds", label: "Use of Proceeds" },
    { id: "peerComparison", label: "Peer Comparison" },
    { id: "valuationSummary", label: "Valuation Summary" },
    { id: "riskFactors", label: "Risk Factors" },
    { id: "ipoTimeline", label: "IPO Timeline" },
    { id: "analystRecommendation", label: "Analyst Recommendation" },
  ]

const handleSectionToggle = (sectionId: string, checked: boolean) => {
    if (checked) {
      setSections([...sections, sectionId])
    } else {
      setSections(sections.filter((id) => id !== sectionId))
    }
    setError("")
  }

const handleSubmit = () => {
    if (sections.length === 0) {
      setError("Please select at least one section")
      return
    }

onSubmit(sections, detailLevel)
  }

return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-sm font-medium text-[#001742]">Select report sections:</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          {availableSections.map((section) => (
            <ClickableCheckbox
              key={section.id}
              id={`section-${section.id}`}
              label={section.label}
              checked={sections.includes(section.id)}
              onChange={(checked) => handleSectionToggle(section.id, checked)}
            />
          ))}
        </div>
      </div>

<div className="space-y-4">
        <h3 className="text-sm font-medium text-[#001742]">Detail level:</h3>
        <RadioGroup value={detailLevel} onValueChange={(value: "high" | "detailed") => setDetailLevel(value)}>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="high" id="detail-high" className="border-[#dee6f5] text-[#004ce6]" />
            <Label htmlFor="detail-high" className="text-sm text-[#001742]">
              High-Level (Executive summary with key metrics)
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <RadioGroupItem value="detailed" id="detail-detailed" className="border-[#dee6f5] text-[#004ce6]" />
            <Label htmlFor="detail-detailed" className="text-sm text-[#001742]">
              Line-by-Line (Detailed analysis with comprehensive metrics)
            </Label>
          </div>
        </RadioGroup>
      </div>

{error && <p className="text-sm text-red-500">{error}</p>}

<Button
        onClick={handleSubmit}
        className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
      >
        Continue
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/output-options.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { ClickableCheckbox } from "./clickable-checkbox"

interface OutputOptionsProps {
  onSubmit: (options: {
    includePeerComparisons: boolean
    includeIndustryBenchmarks: boolean
    includeRecentDeals: boolean
    additionalNotes: string
  }) => void
}

export function OutputOptions({ onSubmit }: OutputOptionsProps) {
  const [options, setOptions] = useState({
    includePeerComparisons: true,
    includeIndustryBenchmarks: false,
    includeRecentDeals: false,
    additionalNotes: "",
  })

const handleOptionChange = (option: string, checked: boolean) => {
    setOptions({
      ...options,
      [option]: checked,
    })
  }

const handleSubmit = () => {
    onSubmit(options)
  }

return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-sm font-medium text-[#001742]">Additional options:</h3>
        <div className="space-y-3">
          <ClickableCheckbox
            id="peer-comparisons"
            label="Include peer IPO comparables"
            checked={options.includePeerComparisons}
            onChange={(checked) => handleOptionChange("includePeerComparisons", checked)}
          />
          <ClickableCheckbox
            id="industry-benchmarks"
            label="Include industry benchmarks"
            checked={options.includeIndustryBenchmarks}
            onChange={(checked) => handleOptionChange("includeIndustryBenchmarks", checked)}
          />
          <ClickableCheckbox
            id="recent-deals"
            label="Include recent similar deals"
            checked={options.includeRecentDeals}
            onChange={(checked) => handleOptionChange("includeRecentDeals", checked)}
          />
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor="additional-notes" className="text-sm font-medium text-[#001742]">
          Additional notes or specific areas of interest:
        </Label>
        <Textarea
          id="additional-notes"
          placeholder="E.g., Focus on growth strategy, competitive landscape, etc."
          value={options.additionalNotes}
          onChange={(e) => setOptions({ ...options, additionalNotes: e.target.value })}
          className="border-[#dee6f5] focus-visible:ring-[#004ce6] min-h-[80px]"
        />
      </div>

<Button
        onClick={handleSubmit}
        className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
      >
        Generate Report
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/clickable-checkbox.tsx" isEdit="true" isMerged="true"
"use client"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"

interface ClickableCheckboxProps {
  id: string
  label: string
  checked: boolean
  onChange: (checked: boolean) => void
  className?: string
}

export function ClickableCheckbox({ id, label, checked, onChange, className }: ClickableCheckboxProps) {
  return (
    <div
      className={cn(
        "flex items-center border rounded-md p-3 cursor-pointer transition-all",
        checked
          ? "bg-blue-50/50 border-blue-200 shadow-sm"
          : "border-gray-100 hover:border-gray-200 hover:bg-gray-50/50",
        className,
      )}
      onClick={() => onChange(!checked)}
    >
      <div className="flex items-center flex-1">
        <Checkbox
          id={id}
          checked={checked}
          onCheckedChange={(checked) => onChange(checked === true)}
          className="border-gray-300 data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500"
          onClick={(e) => e.stopPropagation()}
        />
        <label htmlFor={id} className="ml-2 text-sm text-gray-700 cursor-pointer flex-1">
          {label}
        </label>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/ipo-screening/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { DocumentUploader } from "@/components/workflow/customization/document-uploader"
import { SectionSelector } from "@/components/workflow/customization/section-selector"
import { OutputOptions } from "@/components/workflow/customization/output-options"
import { IPOReport } from "@/components/workflow/report/ipo-report"
import { WorkflowEngine } from "@/lib/workflow/workflow-engine"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "ipo-screening",
  title: "DRHP/IPO Document Screening",
  description: "Generate customized IPO screening reports from DRHP documents",
  steps: [
    {
      id: 1,
      title: "Upload Document",
      description: "Upload a DRHP/IPO document for analysis",
    },
    {
      id: 2,
      title: "Select Report Sections",
      description: "Choose which sections to include in the report",
    },
    {
      id: 3,
      title: "Configure Output Options",
      description: "Customize additional report options",
    },
    {
      id: 4,
      title: "Processing",
      description: "Analyzing document and generating report",
    },
    {
      id: 5,
      title: "Review Results",
      description: "Review and download the generated report",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the IPO Document Screening tool. Please upload the DRHP/IPO prospectus to begin the analysis process.
      </p>
    </div>
  ),
}

// Sample company data for demonstration
const sampleCompanyData = {
  name: "Zomato Limited",
  ticker: "ZOMATO",
  exchange: "BSE: 543400 | NSE: ZOMATO",
  logo: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-8f6KXsMwBvieynHAAVUPagk1wFotvA.png",
  business: "#1 Indian platform for restaurant discovery & food delivery (founded 2008)",
  marketPosition: "~50% market share; operations in 500+ cities",
  ipoHighlight: "Raised ₹9,375 Cr at ₹76–78 per share; first‐ever profitable quarter reported in Q3 FY21",
  offeringDetails: {
    freshIssue: "₹1,481 Cr",
    offerForSale: "₹7,894 Cr",
    totalIssueSize: "₹9,375 Cr",
    priceBand: "₹76 – ₹78 per share",
    lotSize: "192 shares",
    listingDate: "23 March 2021",
  },
  financialHighlights: [
    { metric: "Revenue", amount: "1,021.8", yoyChange: "+38%" },
    { metric: "Net Loss", amount: "-1,166.2", yoyChange: "-5% (↓)" },
    { metric: "Adj. EBITDA", amount: "-74.3", yoyChange: "+12% margin" },
    { metric: "Cash Burn", amount: "840.5", yoyChange: "-15%" },
  ],
  useOfProceeds: [
    { percentage: "30%", purpose: "Organic Growth Initiatives" },
    { percentage: "40%", purpose: "Inorganic Growth / Acquisitions" },
    { percentage: "30%", purpose: "General Corporate Purposes" },
  ],
  peerComparison: [
    {
      company: "Zomato",
      ticker: "BSE:543400",
      ev: "60,600",
      revenue: "1,021.8",
      evRev: "5.9x",
      ps: "4.0x",
      highlight: true,
    },
    {
      company: "DoorDash",
      ticker: "NASDAQ: DASH",
      ev: "1,80,000",
      revenue: "4,883",
      evRev: "36.8x",
      ps: "29.4x",
      highlight: false,
    },
    {
      company: "Grubhub",
      ticker: "NYSE: GRUB",
      ev: "26,200",
      revenue: "1,646",
      evRev: "15.9x",
      ps: "12.6x",
      highlight: false,
    },
    {
      company: "Swiggy (est.)",
      ticker: "Private",
      ev: "40,000 *",
      revenue: "1,800 *",
      evRev: "22.2x *",
      ps: "19.8x *",
      highlight: false,
    },
  ],
  valuationSummary: [
    { metric: "Implied Market Cap", value: "₹60,600 Cr (at ₹78)" },
    { metric: "EV/Revenue Multiple", value: "5.9x vs. global peer avg. ~24x" },
    { metric: "P/S Multiple", value: "4.0x vs. global peer avg. ~20x" },
  ],
  riskFactors: [
    { title: "High Cash Burn", description: "Continued negative free cash flow until scale economies materialize." },
    { title: "Intense Competition", description: "Swiggy, Amazon, and local delivery aggregators." },
    { title: "Regulatory Changes", description: "Food safety norms, delivery partner labor laws." },
    { title: "Reliance on 3PL", description: "Quality & timing depend on third-party delivery fleets." },
  ],
  ipoTimeline: [
    { event: "DRHP Filing", date: "14 Apr 2021" },
    { event: "Price Band Announced", date: "28 Feb 2021" },
    { event: "Offer Open", date: "14 Mar 2021" },
    { event: "Offer Close", date: "16 Mar 2021" },
    { event: "Listing", date: "23 Mar 2021" },
  ],
  analystRecommendation: {
    rating: "SUBSCRIBE",
    ratingScore: 3,
    comment:
      "Despite current losses, Zomato's dominant market position, strong growth trajectory, and potential for profitability make it an attractive long-term investment. The company's valuation appears reasonable compared to global peers, offering potential upside as the Indian food delivery market expands.",
    targetPrice: "₹95-105 (12-month horizon)",
  },
}

export default function IPOScreeningPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// Document and company info
  const [uploadedDocument, setUploadedDocument] = useState<string | null>(null)
  const [companyInfo, setCompanyInfo] = useState({ name: "Zomato Limited", ticker: "ZOMATO" })

// Report configuration
  const [selectedSections, setSelectedSections] = useState<string[]>([
    "executiveSummary",
    "offeringDetails",
    "financialHighlights",
    "useOfProceeds",
    "peerComparison",
    "valuationSummary",
    "riskFactors",
    "ipoTimeline",
    "analystRecommendation",
  ])

const [detailLevel, setDetailLevel] = useState<"high" | "detailed">("high")
  const [outputOptions, setOutputOptions] = useState({
    includePeerComparisons: true,
    includeIndustryBenchmarks: false,
    includeRecentDeals: false,
    additionalNotes: "",
  })

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle document upload
  const handleDocumentUpload = (documentName: string) => {
    // Always use "Zomato DRHP" as the document name
    const fixedDocumentName = "Zomato DRHP"
    setUploadedDocument(fixedDocumentName)
    setCurrentStep(2) // Skip company details step, go directly to section selection

// Add user message
    workflowEngine.addMessage("user", `I've uploaded ${fixedDocumentName}`)

// Show section selection with detected company info
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            The document has been analyzed and identified as the Draft Red Herring Prospectus for{" "}
            <strong>Zomato Limited (ZOMATO)</strong>. Please select the sections you would like to include in your
            report and specify the desired level of analysis:
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle section selection
  const handleSectionSelection = (sections: string[], level: "high" | "detailed") => {
    setSelectedSections(sections)
    setDetailLevel(level)
    setCurrentStep(3) // Move to output options step

// Add user message
    const sectionCount = sections.length
    const sectionText = sectionCount === 1 ? "section" : "sections"
    workflowEngine.addMessage(
      "user",
      `I'd like to include ${sectionCount} ${sectionText} with ${level === "high" ? "high-level" : "detailed"} analysis`,
    )

// Show output options
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            Please select any additional data points or comparative analyses you would like to incorporate into the
            final report:
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle output options selection
  const handleOutputOptionsSubmit = (options: typeof outputOptions) => {
    setOutputOptions(options)
    setCurrentStep(4) // Move to processing step

// Add user message
    const selectedOptions = []
    if (options.includePeerComparisons) selectedOptions.push("peer comparisons")
    if (options.includeIndustryBenchmarks) selectedOptions.push("industry benchmarks")
    if (options.includeRecentDeals) selectedOptions.push("recent deals")

const optionsText =
      selectedOptions.length > 0
        ? `I'd like to include ${selectedOptions.join(", ")}`
        : "I don't need any additional analyses"

workflowEngine.addMessage("user", optionsText)

// Show processing message
    workflowEngine.addLoadingMessage("Analyzing DRHP document...")
    setMessages(workflowEngine.getMessages())

// Simulate processing steps
    setTimeout(() => {
      workflowEngine.updateLoadingMessage("Extracting key financial data...")
      setMessages(workflowEngine.getMessages())

setTimeout(() => {
        workflowEngine.updateLoadingMessage("Generating peer comparisons...")
        setMessages(workflowEngine.getMessages())

setTimeout(() => {
          workflowEngine.updateLoadingMessage("Compiling IPO screening report...")
          setMessages(workflowEngine.getMessages())

setTimeout(() => {
            workflowEngine.removeLoadingMessage()
            showReportResults()
            setMessages(workflowEngine.getMessages())
          }, 1500)
        }, 1500)
      }, 1500)
    }, 1500)
  }

// Show report results
  const showReportResults = () => {
    setCurrentStep(5) // Move to results step
    setIsReportComplete(true)

// Clear active customization before showing the final result
    workflowEngine.clearActiveCustomization()
    setActiveCustomizationId(null)

workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">
          Your IPO screening report has been generated based on the selected parameters. The analysis provides a
          comprehensive overview of Zomato's offering:
        </p>

<IPOReport
          companyData={sampleCompanyData}
          selectedSections={selectedSections}
          detailLevel={detailLevel}
          outputOptions={outputOptions}
          onRestart={() => {
            // Reset the workflow
            const initialMessages = workflowEngine.initialize()
            setMessages(initialMessages)
            setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
            setCurrentStep(1)
            setIsReportComplete(false)
            setUploadedDocument(null)
            setCompanyInfo({ name: "Zomato Limited", ticker: "ZOMATO" })
            setSelectedSections([
              "executiveSummary",
              "offeringDetails",
              "financialHighlights",
              "useOfProceeds",
              "peerComparison",
              "valuationSummary",
              "riskFactors",
              "ipoTimeline",
              "analystRecommendation",
            ])
            setDetailLevel("high")
            setOutputOptions({
              includePeerComparisons: true,
              includeIndustryBenchmarks: false,
              includeRecentDeals: false,
              additionalNotes: "",
            })
          }}
        />
      </div>,
    )

setMessages(workflowEngine.getMessages())
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <DocumentUploader onUpload={handleDocumentUpload} />
      case 2:
        return <SectionSelector onSubmit={handleSectionSelection} />
      case 3:
        return <OutputOptions onSubmit={handleOutputOptionsSubmit} />
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader title="DRHP/IPO Document Screening" breadcrumbs={[{ label: "Workflows", href: "/" }]} />

{isReportComplete && (
            <ChatInput
              onSend={(message) => {
                // Handle follow-up questions here
                workflowEngine.addMessage("user", message)
                setMessages(workflowEngine.getMessages())

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'd be happy to provide additional insights on that aspect of the IPO analysis. What specific
                        information would you like me to elaborate on?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the IPO screening report..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/report/ipo-report.tsx" isEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { Button } from "@/components/ui/button"
import { Download, RefreshCw } from "lucide-react"

interface IPOReportProps {
  companyData: any
  selectedSections: string[]
  detailLevel: "high" | "detailed"
  outputOptions: {
    includePeerComparisons: boolean
    includeIndustryBenchmarks: boolean
    includeRecentDeals: boolean
    additionalNotes: string
  }
  onRestart: () => void
}

export function IPOReport({ companyData, selectedSections, detailLevel, outputOptions, onRestart }: IPOReportProps) {
  const pageRef = useRef<HTMLDivElement>(null)

const handleDownload = () => {
    // In a real implementation, this would generate a PDF
    alert("In a production environment, this would download a PDF of the IPO screening report.")
  }

return (
    <div className="space-y-6">
      <div
        ref={pageRef}
        className="max-w-4xl mx-auto bg-white p-8 border border-gray-200 rounded-lg"
        style={{ fontFamily: "'Hanken Grotesk', sans-serif" }}
      >
        {/* Header with Logo and Title */}
        <div className="border-b-2 border-gray-200 pb-4 mb-6">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-3xl font-medium text-gray-900">IPO Screening Report</h1>
              <p className="text-sm text-gray-600 mt-1">{companyData.exchange}</p>
            </div>
            <div className="h-12">
              <img
                src={companyData.logo || "/placeholder.svg"}
                alt={`${companyData.name} Logo`}
                className="h-full object-contain"
              />
            </div>
          </div>
        </div>

{/* Executive Summary */}
        {selectedSections.includes("executiveSummary") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">📄</span> Executive Summary
            </h2>
            <div className="bg-red-50/30 rounded p-4">
              <ul className="space-y-2 text-sm">
                <li>
                  <span className="font-semibold">Company:</span> {companyData.name}
                </li>
                <li>
                  <span className="font-semibold">Business:</span> {companyData.business}
                </li>
                <li>
                  <span className="font-semibold">Market Position:</span> {companyData.marketPosition}
                </li>
                <li>
                  <span className="font-semibold">IPO Highlight:</span> {companyData.ipoHighlight}
                </li>
              </ul>
            </div>
          </div>
        )}

{/* Offering Details */}
        {selectedSections.includes("offeringDetails") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">📊</span> Offering Details
            </h2>
            <div className="overflow-hidden rounded-lg border border-gray-200">
              <table className="min-w-full divide-y divide-gray-200 text-sm">
                <tbody className="divide-y divide-gray-200 bg-white">
                  <tr>
                    <td className="px-4 py-2 text-sm font-medium">Fresh Issue</td>
                    <td className="px-4 py-2 text-sm">{companyData.offeringDetails.freshIssue}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-sm font-medium">Offer for Sale (OFS)</td>
                    <td className="px-4 py-2 text-sm">{companyData.offeringDetails.offerForSale}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-sm font-medium">Total Issue Size</td>
                    <td className="px-4 py-2 text-sm">{companyData.offeringDetails.totalIssueSize}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-sm font-medium">Price Band</td>
                    <td className="px-4 py-2 text-sm">{companyData.offeringDetails.priceBand}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-sm font-medium">Lot Size</td>
                    <td className="px-4 py-2 text-sm">{companyData.offeringDetails.lotSize}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-sm font-medium">Listing Date</td>
                    <td className="px-4 py-2 text-sm">{companyData.offeringDetails.listingDate}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        )}

{/* Financial Highlights */}
        {selectedSections.includes("financialHighlights") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">💰</span> Financial Highlights (FY 20)
            </h2>
            <div className="overflow-hidden rounded-lg border border-gray-200">
              <table className="min-w-full divide-y divide-gray-200 text-sm">
                <thead className="bg-white">
                  <tr>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      Metric
                    </th>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      Amount (₹ Cr)
                    </th>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      YoY Change
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 bg-white">
                  {companyData.financialHighlights.map((item: any, index: number) => (
                    <tr key={index}>
                      <td className="px-4 py-2 text-sm font-medium">{item.metric}</td>
                      <td className="px-4 py-2 text-sm text-left">{item.amount}</td>
                      <td className="px-4 py-2 text-sm text-left text-green-600">{item.yoyChange}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="text-xs text-gray-500 mt-2 italic">
              • Notes: First operating‐profit quarter in Q3 FY21; strong delivery volume growth (+60% YoY).
            </p>
          </div>
        )}

{/* Use of Proceeds */}
        {selectedSections.includes("useOfProceeds") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">🎯</span> Use of Proceeds
            </h2>
            <div className="grid grid-cols-3 gap-4">
              {companyData.useOfProceeds.map((item: any, index: number) => (
                <div key={index} className="border border-gray-200 rounded p-3 text-left">
                  <div className="text-2xl font-medium text-gray-900 mb-1">{item.percentage}</div>
                  <div className="text-xs">{item.purpose}</div>
                </div>
              ))}
            </div>
            <p className="text-xs text-gray-500 mt-2 italic">
              Focus on technology stack, "Zomato Market" grocery push, and building dark-kitchen network.
            </p>
          </div>
        )}

{/* Peer Comparison */}
        {selectedSections.includes("peerComparison") && outputOptions.includePeerComparisons && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">🔍</span> Peer Comparison
            </h2>
            <div className="overflow-hidden rounded-lg border border-gray-200">
              <table className="min-w-full divide-y divide-gray-200 text-sm">
                <thead className="bg-white">
                  <tr>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      Company
                    </th>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      EV (₹ Cr)
                    </th>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      Revenue (₹ Cr)
                    </th>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      EV/Rev
                    </th>
                    <th scope="col" className="px-4 py-2 text-left text-xs font-medium text-gray-700">
                      P/S
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 bg-white">
                  {companyData.peerComparison.map((peer: any, index: number) => (
                    <tr key={index}>
                      <td className="px-4 py-2 text-sm font-medium">{peer.company}</td>
                      <td className="px-4 py-2 text-sm text-left">{peer.ev}</td>
                      <td className="px-4 py-2 text-sm text-left">{peer.revenue}</td>
                      <td className="px-4 py-2 text-sm text-left">{peer.evRev}</td>
                      <td className="px-4 py-2 text-sm text-left">{peer.ps}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="text-xs text-gray-500 mt-2 italic">
              *Estimates based on latest funding rounds. Indian peers limited; global comps shown for context.
            </p>
          </div>
        )}

{/* Valuation Summary */}
        {selectedSections.includes("valuationSummary") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">💹</span> Valuation Summary
            </h2>
            <div className="bg-red-50/30 rounded p-4">
              <ul className="space-y-2 text-sm">
                {companyData.valuationSummary.map((item: any, index: number) => (
                  <li key={index}>
                    <span className="font-semibold">{item.metric}:</span> {item.value}
                  </li>
                ))}
              </ul>
              <p className="text-xs text-gray-500 mt-3 italic">
                Zomato trades at a discount to global peers—reflects market growth outlook + profitability trajectory.
              </p>
            </div>
          </div>
        )}

{/* Key Risk Factors */}
        {selectedSections.includes("riskFactors") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">⚠️</span> Key Risk Factors
            </h2>
            <div className="grid grid-cols-2 gap-4">
              {companyData.riskFactors.map((risk: any, index: number) => (
                <div key={index} className="border border-gray-200 rounded p-3">
                  <div className="font-medium mb-1 text-sm">
                    {index + 1}. {risk.title}
                  </div>
                  <div className="text-xs text-gray-600">{risk.description}</div>
                </div>
              ))}
            </div>
          </div>
        )}

{/* IPO Timeline */}
        {selectedSections.includes("ipoTimeline") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">📅</span> IPO Timeline
            </h2>
            <div className="overflow-hidden rounded-lg border border-gray-200">
              <table className="min-w-full divide-y divide-gray-200 text-sm">
                <tbody className="divide-y divide-gray-200 bg-white">
                  {companyData.ipoTimeline.map((item: any, index: number) => (
                    <tr key={index}>
                      <td className="px-4 py-2 text-sm font-medium">{item.event}</td>
                      <td className="px-4 py-2 text-sm text-left">{item.date}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

{/* Analyst Recommendation */}
        {selectedSections.includes("analystRecommendation") && (
          <div className="mb-8">
            <h2 className="text-lg font-medium text-gray-900 flex items-center mb-3">
              <span className="mr-2">🔎</span> Analyst Recommendation
            </h2>
            <div className="bg-red-50/30 border border-red-100 rounded-lg p-4">
              <p className="text-sm mb-4">{companyData.analystRecommendation.comment}</p>

<div className="flex justify-between items-end">
                <div className="text-xs text-gray-500">
                  Target Price: {companyData.analystRecommendation.targetPrice}
                </div>
                <div className="flex items-center gap-1">
                  {Array.from({ length: 5 }).map((_, i) => (
                    <div
                      key={i}
                      className={`w-2 h-2 rounded-full ${
                        i < companyData.analystRecommendation.ratingScore ? "bg-green-500" : "bg-gray-300"
                      }`}
                    ></div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}

{/* Footer */}
        <div className="border-t border-gray-200 pt-4 mt-8">
          <div className="flex justify-between items-center text-xs text-gray-500">
            <div>© 2023 Financial Research Group. All Rights Reserved.</div>
            <div>
              IPO Screening Report | {companyData.name} ({companyData.ticker})
            </div>
          </div>
        </div>
      </div>

<div className="flex justify-start gap-2 mt-4">
        <Button
          onClick={handleDownload}
          className="flex items-center gap-1 bg-[#004ce6] hover:bg-[#0040c9] text-white"
          size="sm"
        >
          <Download className="h-4 w-4" />
          Download PDF
        </Button>
        <Button onClick={onRestart} variant="outline" className="flex items-center gap-1" size="sm">
          <RefreshCw className="h-4 w-4" />
          New Report
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/industry-sizing/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

// Import the necessary components for the slider
import { Slider } from "@/components/ui/slider"
import { DownloadIcon } from "lucide-react"

// Import the QuickCommerceReport component
import { QuickCommerceReport } from "@/components/workflow/report/quick-commerce-report"

// Define the workflow configuration
const workflowConfig = {
  id: "industry-sizing",
  title: "Industry Sizing and Market Segmentation Report Generation",
  description:
    "Automate industry analysis by pulling data from DRHPs, Euromonitor, and news sources to generate segmented industry reports",
  steps: [
    {
      id: 1,
      title: "Data Collection",
      description: "Fetch the latest industry reports from various sources",
    },
    {
      id: 2,
      title: "Data Segmentation and Extraction",
      description: "Analyze content and extract market segments using NLP",
    },
    {
      id: 3,
      title: "Market Sizing and Forecasting",
      description: "Calculate current market size and forecast growth",
    },
    {
      id: 4,
      title: "Report Generation and Visualization",
      description: "Generate comprehensive report with visualizations",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the Industry Sizing and Market Segmentation Report Generation workflow. This tool automates industry
        analysis by pulling data from DRHPs, Euromonitor, and news sources to generate segmented industry reports.
      </p>
      <p className="text-[#001742]">Let's start by selecting an industry for analysis.</p>
    </div>
  ),
}

// Sample industries for selection
const industries = [
  { id: "pet-care", name: "Pet Care", icon: "🐾" },
  { id: "quick-commerce", name: "Quick Commerce", icon: "🛒" },
  { id: "ev-market", name: "Electric Vehicles", icon: "🚗" },
  { id: "fintech", name: "Financial Technology", icon: "💳" },
  { id: "edtech", name: "Education Technology", icon: "📚" },
  { id: "healthcare", name: "Healthcare", icon: "🏥" },
]

// Update the dataSources array to remove the "Analyst Reports" option
const dataSources = [
  { id: "drhp", name: "DRHP Reports", count: 12, lastUpdated: "2 days ago" },
  { id: "euromonitor", name: "Euromonitor", count: 8, lastUpdated: "1 day ago" },
  { id: "news", name: "News Sources", count: 24, lastUpdated: "Today" },
]

// Sample market segments for Pet Care industry
const petCareSegments = [
  { id: "dog-food", name: "Dog Food", size: 4.2, growth: 8.5, unit: "billion USD" },
  { id: "cat-food", name: "Cat Food", size: 3.8, growth: 7.2, unit: "billion USD" },
  { id: "pet-accessories", name: "Pet Accessories", size: 2.1, growth: 9.1, unit: "billion USD" },
  { id: "pet-grooming", name: "Pet Grooming", size: 1.5, growth: 12.3, unit: "billion USD" },
  { id: "pet-healthcare", name: "Pet Healthcare", size: 3.2, growth: 10.5, unit: "billion USD" },
  { id: "other", name: "Other Pet Products", size: 0.9, growth: 5.2, unit: "billion USD" },
]

// Sample report data
const reportData = {
  title: "Pet Care Industry Market Segmentation Report",
  summary:
    "The global pet care market is experiencing robust growth, driven by increasing pet ownership, premiumization trends, and growing awareness of pet health and wellness. This report provides a detailed analysis of key market segments, growth drivers, and future projections.",
  totalMarketSize: 15.7,
  cagr: 8.9,
  forecastPeriod: "2023-2028",
  keyInsights: [
    "Premium pet food segment shows highest growth rate at 12.3% CAGR",
    "E-commerce channels gaining significant market share in pet product distribution",
    "Pet healthcare segment expected to grow due to increasing focus on preventive care",
    "Emerging markets in Asia-Pacific region present substantial growth opportunities",
  ],
}

// Sample market trend data
const marketTrendData = {
  "quick-commerce": {
    title: "Quick Commerce Market Segmentation Report",
    summary:
      "The quick commerce market is rapidly expanding, driven by increasing demand for on-demand delivery services and changing consumer preferences. This report provides a detailed analysis of key market segments, growth drivers, and future projections.",
    totalMarketSize: 50,
    cagr: 15.2,
    forecastPeriod: "2023-2028",
    keyInsights: [
      "Last-mile delivery segment shows highest growth rate at 18.5% CAGR",
      "Mobile commerce platforms gaining significant market share in quick commerce distribution",
      "Urban areas expected to drive growth due to high population density",
      "Partnerships with local retailers present substantial growth opportunities",
    ],
  },
}

export default function IndustrySizingPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [currentStep, setCurrentStep] = useState(1)
  const [isReportComplete, setIsReportComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)
  const [selectedIndustry, setSelectedIndustry] = useState<string | null>(null)
  const [selectedSources, setSelectedSources] = useState<string[]>([])
  const [segments, setSegments] = useState<typeof petCareSegments>([])

// Add state for custom segments
  const [customSegments, setCustomSegments] = useState<
    Array<{
      id: string
      name: string
      size: number
      growth: number
      unit: string
    }>
  >([])

// Add state for new custom segment
  const [newSegment, setNewSegment] = useState({
    name: "",
    size: "",
    growth: "",
  })

// Add state for region and time frame
  const [selectedRegion, setSelectedRegion] = useState<string | null>(null)
  const [selectedTimeFrame, setSelectedTimeFrame] = useState<number[]>([2020, 2024])

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle industry selection
  const handleIndustrySelect = (industryId: string) => {
    setSelectedIndustry(industryId)
    setCurrentStep(2) // Move to data sources step

// Find the selected industry
    const industry = industries.find((ind) => ind.id === industryId)

// Add user message
    workflowEngine.addMessage("user", `I want to analyze the ${industry?.name} industry`)

// Show loading message
    workflowEngine.addLoadingMessage("Identifying available data sources...")
    setMessages(workflowEngine.getMessages())

// Simulate processing
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()

// Show data sources selection
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            I've identified several data sources for the {industry?.name} industry. Please select which sources you'd
            like to include in your analysis:
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 1500)
  }

// Update the handleSourcesSelect function to move to the region/timeframe step
  const handleSourcesSelect = (sources: string[]) => {
    setSelectedSources(sources)
    setCurrentStep(3) // Move to region/timeframe step

// Add user message
    workflowEngine.addMessage(
      "user",
      `I want to use ${sources.map((s) => dataSources.find((ds) => ds.id === s)?.name).join(", ")} as data sources`,
    )

// Show loading message
    workflowEngine.addLoadingMessage("Fetching data from selected sources...")
    setMessages(workflowEngine.getMessages())

// Simulate data fetching
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()

// Show region and time frame selection
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            I've fetched the data from your selected sources. Now, please specify the region and time frame for your
            analysis:
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 1500)
  }

// Add the handleRegionTimeFrameSelect function
  const handleRegionTimeFrameSelect = (region: string, timeFrame: number[]) => {
    setSelectedRegion(region)
    setSelectedTimeFrame(timeFrame)
    setCurrentStep(4) // Move to report generation step

// Add user message
    workflowEngine.addMessage(
      "user",
      `I want to analyze the ${selectedIndustry} industry in ${region} from ${timeFrame[0]} to ${timeFrame[1]}`,
    )

// Show loading message
    workflowEngine.addLoadingMessage("Generating market sizing and segmentation report...")
    setMessages(workflowEngine.getMessages())

// Simulate report generation
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()
      showFinalReport()
      setMessages(workflowEngine.getMessages())
    }, 3000)
  }

// Handle market sizing confirmation
  const handleMarketSizingConfirm = () => {
    setCurrentStep(4) // Move to report generation step

// Combine standard and custom segments
    const allSegments = [...segments, ...customSegments]
    setSegments(allSegments)

// Add user message
    workflowEngine.addMessage("user", "Yes, please proceed with market sizing and forecasting")

// Show loading message
    workflowEngine.addLoadingMessage("Calculating current market sizes...")
    setMessages(workflowEngine.getMessages())

// Simulate market sizing and forecasting
    setTimeout(() => {
      workflowEngine.updateLoadingMessage("Applying forecasting models...")
      setMessages(workflowEngine.getMessages())

setTimeout(() => {
        workflowEngine.updateLoadingMessage("Generating visualizations...")
        setMessages(workflowEngine.getMessages())

setTimeout(() => {
          workflowEngine.removeLoadingMessage()
          showFinalReport()
          setMessages(workflowEngine.getMessages())
        }, 1500)
      }, 1500)
    }, 1500)
  }

// Update the showFinalReport function
  const showFinalReport = () => {
    setIsReportComplete(true)

// Send a single combined message with both the text and the report component
    workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">
          I've generated a comprehensive market segmentation report for the Quick Commerce industry based on the data
          analysis:
        </p>

<QuickCommerceReport
          region={selectedRegion || "India"}
          timeFrame={selectedTimeFrame}
          onRestart={() => {
            // Reset the workflow
            const initialMessages = workflowEngine.initialize()
            setMessages(initialMessages)
            setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
            setCurrentStep(1)
            setIsReportComplete(false)
            setSelectedIndustry(null)
            setSelectedSources([])
            setSelectedRegion(null)
            setSelectedTimeFrame([2020, 2024])
          }}
        />
      </div>,
    )

setMessages(workflowEngine.getMessages())
  }

// Industry Selection Component
  const IndustrySelector = () => (
    <div className="space-y-4">
      <p className="text-sm text-[#4e5971]">Please select an industry to analyze:</p>
      <div className="grid grid-cols-2 gap-3">
        {industries.map((industry) => (
          <button
            key={industry.id}
            className="flex items-center gap-3 rounded-lg border border-[#e1e8f6] bg-white p-4 hover:bg-[#f4f9ff] hover:border-[#d9e4f7] transition-colors"
            onClick={() => handleIndustrySelect(industry.id)}
          >
            <span className="text-2xl">{industry.icon}</span>
            <span className="text-sm font-medium text-[#001742]">{industry.name}</span>
          </button>
        ))}
      </div>
    </div>
  )

// Data Sources Selection Component
  const DataSourcesSelector = () => {
    const [sources, setSources] = useState<string[]>([])

const toggleSource = (sourceId: string) => {
      if (sources.includes(sourceId)) {
        setSources(sources.filter((id) => id !== sourceId))
      } else {
        setSources([...sources, sourceId])
      }
    }

return (
      <div className="space-y-4">
        <p className="text-sm text-[#4e5971]">Select data sources to include in your analysis:</p>
        <div className="space-y-3">
          {dataSources.map((source) => (
            <div
              key={source.id}
              className={`flex items-center justify-between rounded-md border p-3 cursor-pointer ${
                sources.includes(source.id)
                  ? "border-[#004ce6] bg-[#f4f9ff]"
                  : "border-[#e1e8f6] bg-white hover:bg-[#f9fafc]"
              }`}
              onClick={() => toggleSource(source.id)}
            >
              <div className="flex items-center gap-3">
                <input
                  type="checkbox"
                  checked={sources.includes(source.id)}
                  onChange={() => {}}
                  className="rounded border-[#dee6f5]"
                />
                <div>
                  <div className="text-sm font-medium text-[#001742]">{source.name}</div>
                  <div className="text-xs text-[#6e7b96]">
                    {source.count} reports • Last updated {source.lastUpdated}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <Button
          onClick={() => handleSourcesSelect(sources)}
          disabled={sources.length === 0}
          className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
        >
          Continue
        </Button>
      </div>
    )
  }

// Add a new component for region and time frame selection
  const RegionTimeFrameSelector = () => {
    const [region, setRegion] = useState("India")
    const [timeFrame, setTimeFrame] = useState([2020, 2024])
    const regions = ["India", "Southeast Asia", "United States", "Europe", "Middle East"]

const handleTimeFrameChange = (values: number[]) => {
      setTimeFrame(values)
    }

return (
      <div className="space-y-4">
        <p className="text-sm text-[#4e5971]">Select the region for your analysis:</p>
        <div className="grid grid-cols-3 gap-3">
          {regions.map((r) => (
            <button
              key={r}
              className={`flex items-center justify-center gap-2 rounded-lg border p-3 ${
                region === r
                  ? "border-[#004ce6] bg-[#f4f9ff] text-[#004ce6]"
                  : "border-[#e1e8f6] bg-white text-[#4e5971] hover:bg-[#f9fafc]"
              }`}
              onClick={() => setRegion(r)}
            >
              <span className="text-sm font-medium">{r}</span>
            </button>
          ))}
        </div>

<div className="mt-6">
          <p className="text-sm text-[#4e5971] mb-4">Select the time frame for your analysis:</p>
          <div className="px-4">
            <Slider
              defaultValue={[2020, 2024]}
              min={2015}
              max={2024}
              step={1}
              minStepsBetweenThumbs={1}
              onValueChange={handleTimeFrameChange}
              className="my-6"
            />
            <div className="flex justify-between text-xs text-[#4e5971]">
              <span>2015</span>
              <span>2024</span>
            </div>
            <div className="mt-4 text-center text-sm font-medium text-[#001742]">
              Selected: {timeFrame[0]} - {timeFrame[1]}
            </div>
          </div>
        </div>

<Button
          onClick={() => handleRegionTimeFrameSelect(region, timeFrame)}
          className="mt-6 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
        >
          Continue
        </Button>
      </div>
    )
  }

// Update the MarketSizingConfirmation component to include custom segment functionality
  const MarketSizingConfirmation = () => {
    const handleAddCustomSegment = () => {
      if (newSegment.name && newSegment.size && newSegment.growth) {
        const customSegment = {
          id: `custom-${Date.now()}`,
          name: newSegment.name,
          size: Number.parseFloat(newSegment.size),
          growth: Number.parseFloat(newSegment.growth),
          unit: "billion USD",
        }

setCustomSegments([...customSegments, customSegment])
        setNewSegment({ name: "", size: "", growth: "" })
      }
    }

return (
      <div className="space-y-4">
        <div className="space-y-2">
          <p className="text-sm font-medium text-[#001742]">Add a custom segment (optional):</p>
          <div className="grid grid-cols-3 gap-2">
            <input
              type="text"
              placeholder="Segment name"
              value={newSegment.name}
              onChange={(e) => setNewSegment({ ...newSegment, name: e.target.value })}
              className="rounded-md border border-[#dee6f5] p-2 text-sm"
            />
            <input
              type="number"
              placeholder="Market size (billions)"
              value={newSegment.size}
              onChange={(e) => setNewSegment({ ...newSegment, size: e.target.value })}
              className="rounded-md border border-[#dee6f5] p-2 text-sm"
            />
            <input
              type="number"
              placeholder="Growth rate (%)"
              value={newSegment.growth}
              onChange={(e) => setNewSegment({ ...newSegment, growth: e.target.value })}
              className="rounded-md border border-[#dee6f5] p-2 text-sm"
            />
          </div>
          <Button
            onClick={handleAddCustomSegment}
            variant="outline"
            className="mt-2 text-[#004ce6] border-[#dee6f5] hover:bg-[#f4f9ff] text-sm"
            disabled={!newSegment.name || !newSegment.size || !newSegment.growth}
          >
            Add Custom Segment
          </Button>
        </div>

{customSegments.length > 0 && (
          <div className="mt-4">
            <p className="text-sm font-medium text-[#001742] mb-2">Custom segments:</p>
            <div className="overflow-x-auto">
              <table className="w-full min-w-[500px] border-collapse rounded-md border border-[#e1e8f6]">
                <thead>
                  <tr className="bg-[#f4f7ff]">
                    <th className="border-b border-[#e1e8f6] p-3 text-left text-sm font-medium text-[#001742]">
                      Segment
                    </th>
                    <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                      Market Size
                    </th>
                    <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                      Growth Rate
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {customSegments.map((segment, index) => (
                    <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-[#f9fafc]"}>
                      <td className="border-b border-[#e1e8f6] p-3 text-sm text-[#001742]">{segment.name}</td>
                      <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                        ${segment.size} {segment.unit}
                      </td>
                      <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                        {segment.growth}%
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

<div className="mt-4">
          <p className="text-sm text-[#4e5971]">
            The system will now calculate current market sizes and forecast growth for each segment based on historical
            data and trends.
          </p>
          <Button
            onClick={() => handleMarketSizingConfirm()}
            className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
          >
            Generate Market Sizing & Forecast
          </Button>
        </div>
      </div>
    )
  }

// Update the renderCustomizationContent function to include the new step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <IndustrySelector />
      case 2:
        return <DataSourcesSelector />
      case 3:
        return <RegionTimeFrameSelector />
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader
        title="Industry Sizing and Market Segmentation Report Generation"
        breadcrumbs={[{ label: "Workflows", href: "/" }]}
      />

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'll help you with that. What specific aspect of the market segmentation report would you like
                        to explore further?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the market segmentation report..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}

// Report Result Component
function ReportResult({
  reportData,
  segments,
  onRestart,
}: {
  reportData: typeof reportData
  segments: typeof petCareSegments
  onRestart: () => void
}) {
  return (
    <div className="space-y-6">
      <Card className="border-[#e1e8f6]">
        <CardContent className="p-4">
          <div className="space-y-6">
            <h3 className="text-lg font-semibold text-[#001742]">{reportData.title}</h3>
            <p className="text-[#4e5971]">{reportData.summary}</p>

<div className="grid gap-4 md:grid-cols-3">
              <div className="rounded-md bg-[#f4f9ff] p-3">
                <div className="text-sm font-medium text-[#001742]">Total Market Size</div>
                <div className="text-lg font-semibold text-[#001742]">${reportData.totalMarketSize} billion</div>
              </div>
              <div className="rounded-md bg-[#f4f9ff] p-3">
                <div className="text-sm font-medium text-[#001742]">CAGR</div>
                <div className="text-lg font-semibold text-[#001742]">{reportData.cagr}%</div>
              </div>
              <div className="rounded-md bg-[#f4f9ff] p-3">
                <div className="text-sm font-medium text-[#001742]">Forecast Period</div>
                <div className="text-lg font-semibold text-[#001742]">{reportData.forecastPeriod}</div>
              </div>
            </div>

{/* Market Segments Section */}
            <div className="space-y-4">
              <h4 className="text-base font-medium text-[#001742]">Market Segments</h4>
              <div className="overflow-x-auto">
                <table className="w-full min-w-[500px] border-collapse rounded-md border border-[#e1e8f6]">
                  <thead>
                    <tr className="bg-[#f4f7ff]">
                      <th className="border-b border-[#e1e8f6] p-3 text-left text-sm font-medium text-[#001742]">
                        Segment
                      </th>
                      <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                        Market Size
                      </th>
                      <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                        Growth Rate
                      </th>
                      <th className="border-b border-[#e1e8f6] p-3 text-right text-sm font-medium text-[#001742]">
                        Market Share
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {segments.map((segment, index) => (
                      <tr key={index} className={index % 2 === 0 ? "bg-white" : "bg-[#f9fafc]"}>
                        <td className="border-b border-[#e1e8f6] p-3 text-sm text-[#001742]">{segment.name}</td>
                        <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                          ${segment.size} billion
                        </td>
                        <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                          {segment.growth}%
                        </td>
                        <td className="border-b border-[#e1e8f6] p-3 text-right text-sm text-[#001742]">
                          {Math.round((segment.size / reportData.totalMarketSize) * 100)}%
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

{/* Visualizations Section */}
            <div className="space-y-4">
              <h4 className="text-base font-medium text-[#001742]">Market Visualizations</h4>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="rounded-md border border-[#e1e8f6] p-4 bg-white">
                  <div className="text-sm font-medium text-[#001742] mb-2">Market Share by Segment</div>
                  <div className="h-[220px] flex items-center justify-center">
                    <div className="relative w-full h-full flex items-center justify-center">
                      <PieChart className="h-32 w-32 text-[#004ce6] opacity-20" />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="text-xs text-[#6e7b96]">Interactive pie chart visualization</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="rounded-md border border-[#e1e8f6] p-4 bg-white">
                  <div className="text-sm font-medium text-[#001742] mb-2">Growth Rate by Segment</div>
                  <div className="h-[220px] flex items-center justify-center">
                    <div className="relative w-full h-full flex items-center justify-center">
                      <BarChart className="h-32 w-32 text-[#004ce6] opacity-20" />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="text-xs text-[#6e7b96]">Interactive bar chart visualization</div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="rounded-md border border-[#e1e8f6] p-4 bg-white md:col-span-2">
                  <div className="text-sm font-medium text-[#001742] mb-2">Market Size Forecast (2023-2028)</div>
                  <div className="h-[220px] flex items-center justify-center">
                    <div className="relative w-full h-full flex items-center justify-center">
                      <LineChart className="h-32 w-32 text-[#004ce6] opacity-20" />
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="text-xs text-[#6e7b96]">Interactive line chart visualization</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Key Insights Section */}
            <div className="space-y-4">
              <h4 className="text-base font-medium text-[#001742]">Key Market Insights</h4>
              <ul className="space-y-2">
                {reportData.keyInsights.map((insight, index) => (
                  <li key={index} className="flex items-start gap-2">
                    <div className="mt-1 h-2 w-2 rounded-full bg-[#004ce6]"></div>
                    <span className="text-sm text-[#4e5971]">{insight}</span>
                  </li>
                ))}
              </ul>
            </div>

{/* Data Sources Section */}
            <div className="space-y-2">
              <h4 className="text-base font-medium text-[#001742]">Data Sources</h4>
              <div className="space-y-1 text-sm text-[#6e7b96]">
                <div className="flex items-start gap-2">
                  <FileText className="h-4 w-4 mt-0.5 text-[#8098c4]" />
                  <span>DRHP Reports (12 documents analyzed)</span>
                </div>
                <div className="flex items-start gap-2">
                  <FileText className="h-4 w-4 mt-0.5 text-[#8098c4]" />
                  <span>Euromonitor Industry Reports (8 documents analyzed)</span>
                </div>
                <div className="flex items-start gap-2">
                  <FileText className="h-4 w-4 mt-0.5 text-[#8098c4]" />
                  <span>News Sources (24 articles analyzed)</span>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

<div className="mt-6 flex flex-wrap gap-2">
        <Button size="sm" className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto">
          <DownloadIcon className="h-4 w-4" />
          Download Full Report
        </Button>
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
        >
          <DownloadIcon className="h-4 w-4" />
          Export Data to Excel
        </Button>
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
          onClick={onRestart}
        >
          <RefreshCw className="h-4 w-4" />
          Analyze Another Industry
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/slider.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = React.forwardRef<
  React.ElementRef<typeof SliderPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
  <SliderPrimitive.Root
    ref={ref}
    className={cn("relative flex w-full touch-none select-none items-center", className)}
    {...props}
  >
    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-slate-100">
      <SliderPrimitive.Range className="absolute h-full bg-[#004ce6]" />
    </SliderPrimitive.Track>
    {props.defaultValue?.map((_, i) => (
      <SliderPrimitive.Thumb
        key={i}
        className="block h-5 w-5 rounded-full border-2 border-[#004ce6] bg-white ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
      />
    ))}
  </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }
[V0_FILE]typescriptreact:file="components/workflow/report/quick-commerce-report.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { Button } from "@/components/ui/button"
import { Download, RefreshCw } from "lucide-react"
import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ResponsiveContainer,
  PieChart,
  Pie,
  Cell,
  LabelList,
} from "recharts"

interface QuickCommerceReportProps {
  region: string
  timeFrame: number[]
  onRestart: () => void
}

export function QuickCommerceReport({ region, timeFrame, onRestart }: QuickCommerceReportProps) {
  const pageRef = useRef<HTMLDivElement>(null)

// Format large numbers with commas
  const formatNumber = (num: number) => {
    return new Intl.NumberFormat("en-IN").format(num)
  }

const pieData = [
    { name: "Grocery", value: 60, color: "#3B82F6" },
    { name: "Ready-to-Eat", value: 30, color: "#60A5FA" },
    { name: "Pharmacy", value: 10, color: "#93C5FD" },
  ]

const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, index, name }: any) => {
    const RADIAN = Math.PI / 180
    const radius = outerRadius * 1.1
    const x = cx + radius * Math.cos(-midAngle * RADIAN)
    const y = cy + radius * Math.sin(-midAngle * RADIAN)

return (
      <text x={x} y={y} fill="#475569" textAnchor={x > cx ? "start" : "end"} dominantBaseline="central" fontSize={12}>
        {`${name} ${(percent * 100).toFixed(0)}%`}
      </text>
    )
  }

const barData = [
    { name: "Grocery", "2023": 30000, "2026": 42900 },
    { name: "Ready-to-Eat", "2023": 15000, "2026": 31950 },
    { name: "Pharmacy", "2023": 5000, "2026": 17150 },
  ]

const cagrData = [
    { name: "Grocery", value: 12, color: "#3B82F6" },
    { name: "Ready-to-Eat", value: 27, color: "#60A5FA" },
    { name: "Pharmacy", value: 45, color: "#93C5FD" },
    { name: "Overall", value: 28, color: "#2563EB" },
  ]

return (
    <div className="w-full mx-auto">
      <div
        ref={pageRef}
        className="w-full mx-auto bg-white border border-[#e1e8f6] rounded-md overflow-hidden"
        style={{
          backgroundImage:
            "radial-gradient(#f1f5f9 0.5px, transparent 0.5px), radial-gradient(#f1f5f9 0.5px, #ffffff 0.5px)",
          backgroundSize: "20px 20px",
          backgroundPosition: "0 0, 10px 10px",
        }}
      >
        {/* Header */}
        <div className="bg-[#002673] p-6 border-b border-[#e1e8f6] text-white">
          <div className="flex justify-between items-center">
            <div>
              <h1 className="text-3xl font-bold tracking-tight">Quick Commerce Industry</h1>
              <div className="flex items-center gap-3 mt-2">
                <p className="text-sm text-gray-200">Market Sizing & Segmentation Report | 2023-2026</p>
                <div className="h-4 w-px bg-gray-400"></div>
                <p className="text-sm text-gray-200">
                  Region: <span className="font-medium">{region}</span>
                </p>
              </div>
            </div>
          </div>
          <div className="mt-4 pt-3">
            <div className="bg-white bg-opacity-10 border-l-4 border-blue-400 p-3 rounded-r-md shadow-sm">
              <p className="text-sm text-white italic font-light leading-relaxed">
                "The {region} quick commerce sector is experiencing rapid growth, with the market expected to nearly
                double by 2026. This report provides a comprehensive analysis of market segments, growth drivers, and
                strategic recommendations for stakeholders."
              </p>
            </div>
          </div>
        </div>

<div className="p-6">
          {/* Executive Summary */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">Executive Summary</h2>
            </div>
            <div className="grid grid-cols-3 gap-3">
              <div className="bg-gradient-to-br from-white to-blue-50 border border-gray-200 rounded-lg p-4">
                <div className="text-xs uppercase text-gray-500 tracking-wider mb-1 font-medium">
                  Market Size (2023)
                </div>
                <div className="text-xl text-gray-800 mb-2 font-medium">₹50,000 Cr</div>
                <div className="text-[10px] text-blue-600 font-medium flex items-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-3 w-3 mr-1"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                    />
                  </svg>
                  Projected CAGR: 28%
                </div>
              </div>
              <div className="bg-gradient-to-br from-white to-blue-50 border border-gray-200 rounded-lg p-4">
                <div className="text-xs uppercase text-gray-500 tracking-wider mb-1 font-medium">Forecast (2026)</div>
                <div className="text-xl text-gray-800 mb-2 font-medium">₹92,000 Cr</div>
                <div className="text-[10px] text-blue-600 font-medium flex items-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-3 w-3 mr-1"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                    />
                  </svg>
                  84% growth over 2023
                </div>
              </div>
              <div className="bg-gradient-to-br from-white to-blue-50 border border-gray-200 rounded-lg p-4">
                <div className="text-xs uppercase text-gray-500 tracking-wider mb-1 font-medium">Leading Segment</div>
                <div className="text-xl text-gray-800 mb-2 font-medium">Grocery (60%)</div>
                <div className="text-[10px] text-blue-600 font-medium flex items-center">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    className="h-3 w-3 mr-1"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
                    />
                  </svg>
                  Fastest: Pharmacy (45% CAGR)
                </div>
              </div>
            </div>
          </div>

{/* Industry Sizing & Forecast */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">Industry Sizing & Forecast</h2>
            </div>
            <div className="overflow-hidden rounded-lg border border-gray-200 shadow-sm">
              <table className="min-w-full divide-y divide-gray-200 text-sm">
                <thead>
                  <tr className="bg-gradient-to-r from-gray-50 to-white">
                    <th
                      scope="col"
                      className="px-6 py-3 text-left text-xs text-gray-500 uppercase tracking-wider font-medium"
                    >
                      Segment
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-right text-xs text-gray-500 uppercase tracking-wider font-medium"
                    >
                      2023 Size (₹ Cr)
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-right text-xs text-gray-500 uppercase tracking-wider font-medium"
                    >
                      2026 Forecast (₹ Cr)
                    </th>
                    <th
                      scope="col"
                      className="px-6 py-3 text-right text-xs text-gray-500 uppercase tracking-wider font-medium"
                    >
                      CAGR (2023–26)
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200 bg-white">
                  <tr className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4 text-sm text-gray-800 font-medium">Grocery</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800">30,000</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800">42,900</td>
                    <td className="px-6 py-4 text-sm text-right text-black font-medium">12%</td>
                  </tr>
                  <tr className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4 text-sm text-gray-800 font-medium">Ready-to-Eat</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800">15,000</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800">31,950</td>
                    <td className="px-6 py-4 text-sm text-right text-black font-medium">27%</td>
                  </tr>
                  <tr className="hover:bg-gray-50 transition-colors">
                    <td className="px-6 py-4 text-sm text-gray-800 font-medium">Pharmacy</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800">5,000</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800">17,150</td>
                    <td className="px-6 py-4 text-sm text-right text-black font-medium">45%</td>
                  </tr>
                  <tr className="bg-gray-50">
                    <td className="px-6 py-4 text-sm text-gray-800 font-medium">Total</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800 font-medium">50,000</td>
                    <td className="px-6 py-4 text-sm text-right text-gray-800 font-medium">92,000</td>
                    <td className="px-6 py-4 text-sm text-right text-black font-medium">28%</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

{/* Segment Market Share and Growth Comparison - Horizontal Layout */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">Market Visualization</h2>
            </div>
            <div className="grid grid-cols-2 gap-3">
              {/* Segment Market Share */}
              <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div className="bg-gradient-to-r from-gray-50 to-white px-4 py-3 border-b border-gray-200">
                  <h3 className="text-sm text-gray-700 font-medium">Segment Market Share (2023)</h3>
                </div>
                <div className="p-4 h-72">
                  <ResponsiveContainer width="100%" height="100%">
                    <PieChart>
                      <Pie
                        data={pieData}
                        cx="50%"
                        cy="50%"
                        labelLine={false}
                        outerRadius={80}
                        fill="#8884d8"
                        dataKey="value"
                        label={renderCustomizedLabel}
                      >
                        {pieData.map((entry, index) => (
                          <Cell key={`cell-${index}`} fill={entry.color} />
                        ))}
                      </Pie>
                    </PieChart>
                  </ResponsiveContainer>
                </div>
              </div>

{/* Segment Growth Comparison */}
              <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div className="bg-gradient-to-r from-gray-50 to-white px-4 py-3 border-b border-gray-200">
                  <h3 className="text-sm text-gray-700 font-medium">Segment Growth Comparison</h3>
                </div>
                <div className="p-4 h-72">
                  <ResponsiveContainer width="100%" height="100%">
                    <BarChart
                      data={barData}
                      margin={{
                        top: 20,
                        right: 30,
                        left: 20,
                        bottom: 5,
                      }}
                    >
                      <CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" />
                      <XAxis dataKey="name" tick={{ fontSize: 12 }} axisLine={{ stroke: "#CBD5E1" }} />
                      <YAxis
                        tickFormatter={(value) => `${value / 1000}k`}
                        tick={{ fontSize: 12 }}
                        axisLine={{ stroke: "#CBD5E1" }}
                      />
                      <Bar dataKey="2023" fill="#3B82F6" name="2023">
                        <LabelList dataKey="2023" position="top" formatter={(value) => `₹${value / 1000}k`} />
                      </Bar>
                      <Bar dataKey="2026" fill="#93C5FD" name="2026 Forecast">
                        <LabelList dataKey="2026" position="top" formatter={(value) => `₹${value / 1000}k`} />
                      </Bar>
                    </BarChart>
                  </ResponsiveContainer>
                </div>
              </div>
            </div>
          </div>

{/* Strategic Insights */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">Strategic Insights & Veteran Commentary</h2>
            </div>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-4">
                <div className="border-l-3 border-blue-500 pl-4 py-3 bg-gradient-to-r from-blue-50 to-white rounded-r-md shadow-sm">
                  <h3 className="text-sm text-gray-700 mb-2 font-medium">Grocery: The Foundation of Quick Commerce</h3>
                  <p className="text-sm text-gray-600 leading-relaxed">
                    Despite lower growth, its sheer scale (₹30,000 Cr) ensures it remains the bedrock—focus on margin
                    optimization (private brand vs. marketplace) is critical.
                  </p>
                </div>
                <div className="border-l-3 border-blue-500 pl-4 py-3 bg-gradient-to-r from-blue-50 to-white rounded-r-md shadow-sm">
                  <h3 className="text-sm text-gray-700 mb-2 font-medium">Ready-to-Eat: Convenience at a Premium</h3>
                  <p className="text-sm text-gray-600 leading-relaxed">
                    27% CAGR highlights rising consumer willingness to pay for prepared foods—opportunity to partner
                    with cloud kitchens and optimize last-mile costs.
                  </p>
                </div>
              </div>
              <div className="space-y-4">
                <div className="border-l-3 border-blue-500 pl-4 py-3 bg-gradient-to-r from-blue-50 to-white rounded-r-md shadow-sm">
                  <h3 className="text-sm text-gray-700 mb-2 font-medium">Pharmacy: White-Space Opportunity</h3>
                  <p className="text-sm text-gray-600 leading-relaxed">
                    A 45% CAGR signals aggressive growth; however, regulatory hurdles (prescription requirements),
                    cold-chain logistics, and margin pressure need close monitoring.
                  </p>
                </div>
                <div className="border-l-3 border-blue-500 pl-4 py-3 bg-gradient-to-r from-blue-50 to-white rounded-r-md shadow-sm">
                  <h3 className="text-sm text-gray-700 mb-2 font-medium">Inflection Points & Risks</h3>
                  <ul className="text-sm text-gray-600 space-y-2 list-disc pl-5">
                    <li>
                      <span className="text-gray-700 font-medium">Unit Economics Breakeven:</span> Companies must manage
                      hyperlocal fulfilment costs to reach sustainable profitability.
                    </li>
                    <li>
                      <span className="text-gray-700 font-medium">Regulatory Environment:</span> Changes in food safety
                      and online pharmacy regulations could reshape cost structures overnight.
                    </li>
                    <li>
                      <span className="text-gray-700 font-medium">Customer Retention:</span> High acquisition costs
                      necessitate loyalty programs and differentiated service tiers.
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

{/* Next Steps & Recommendations */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">Next Steps & Recommendations</h2>
            </div>
            <ul className="space-y-4 text-sm text-gray-600">
              <li className="flex bg-white border border-gray-200 rounded-lg p-3 shadow-sm">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 mr-3 font-medium shrink-0">
                  1
                </div>
                <div>
                  <span className="text-gray-800 font-medium">Micro-segment Analysis:</span> Deep-dive into urban vs.
                  tier-2/3 geographies—tier-2 adoption is nascent but could double TAM by 2026.
                </div>
              </li>
              <li className="flex bg-white border border-gray-200 rounded-lg p-3 shadow-sm">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 mr-3 font-medium shrink-0">
                  2
                </div>
                <div>
                  <span className="text-gray-800 font-medium">Scenario Analysis:</span> Model impact of 10% variation in
                  delivery costs on EBITDA margins for each segment.
                </div>
              </li>
              <li className="flex bg-white border border-gray-200 rounded-lg p-3 shadow-sm">
                <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-100 text-blue-600 mr-3 font-medium shrink-0">
                  3
                </div>
                <div>
                  <span className="text-gray-800 font-medium">Monitoring Triggers:</span>
                  <ul className="ml-0 mt-2 space-y-2 pl-0">
                    <li className="flex items-center">
                      <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                      Regulatory updates from FSSAI and local health authorities for pharmacy delivery.
                    </li>
                    <li className="flex items-center">
                      <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                      Consolidation events (M&A among major players) that could shift competitive dynamics.
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>

{/* CAGR Comparison */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">CAGR Comparison by Segment</h2>
            </div>
            <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
              <div className="bg-gradient-to-r from-gray-50 to-white px-4 py-3 border-b border-gray-200">
                <h3 className="text-sm text-gray-700 font-medium">Growth Rate Analysis (2023-2026)</h3>
              </div>
              <div className="p-4 h-72">
                <ResponsiveContainer width="100%" height="100%">
                  <BarChart
                    data={cagrData}
                    layout="vertical"
                    margin={{
                      top: 20,
                      right: 50,
                      left: 20,
                      bottom: 5,
                    }}
                  >
                    <CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0" horizontal={true} vertical={false} />
                    <XAxis
                      type="number"
                      domain={[0, 50]}
                      tickFormatter={(value) => `${value}%`}
                      tick={{ fontSize: 12 }}
                      axisLine={{ stroke: "#CBD5E1" }}
                    />
                    <YAxis dataKey="name" type="category" tick={{ fontSize: 12 }} axisLine={{ stroke: "#CBD5E1" }} />
                    <Bar dataKey="value" name="CAGR (2023-26)">
                      {cagrData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={entry.color} />
                      ))}
                      <LabelList
                        dataKey="value"
                        position="right"
                        formatter={(value) => `${value}%`}
                        style={{ fontSize: "12px", fontWeight: 500 }}
                      />
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
            </div>
          </div>

{/* Key Players */}
          <div className="mb-8">
            <div className="flex items-center mb-4">
              <div className="w-1 h-5 bg-blue-500 rounded mr-2"></div>
              <h2 className="text-lg text-gray-800 font-medium">Key Players Analysis</h2>
            </div>
            <div className="grid grid-cols-3 gap-3">
              <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div className="bg-gradient-to-r from-blue-50 to-white px-4 py-3 border-b border-gray-200 flex items-center">
                  <div className="w-2 h-6 bg-blue-500 mr-3 rounded"></div>
                  <h3 className="text-sm font-medium text-gray-800">Grocery Segment</h3>
                </div>
                <ul className="text-sm text-gray-600 p-4 space-y-2">
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Blinkit</span> (Zomato)
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Zepto</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">BigBasket</span> (Tata)
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Swiggy Instamart</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">JioMart</span>
                  </li>
                </ul>
              </div>
              <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div className="bg-gradient-to-r from-blue-50 to-white px-4 py-3 border-b border-gray-200 flex items-center">
                  <div className="w-2 h-6 bg-blue-500 mr-3 rounded"></div>
                  <h3 className="text-sm font-medium text-gray-800">Ready-to-Eat Segment</h3>
                </div>
                <ul className="text-sm text-gray-600 p-4 space-y-2">
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Swiggy</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Zomato</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">EatSure</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Rebel Foods</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">FreshMenu</span>
                  </li>
                </ul>
              </div>
              <div className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
                <div className="bg-gradient-to-r from-blue-50 to-white px-4 py-3 border-b border-gray-200 flex items-center">
                  <div className="w-2 h-6 bg-blue-500 mr-3 rounded"></div>
                  <h3 className="text-sm font-medium text-gray-800">Pharmacy Segment</h3>
                </div>
                <ul className="text-sm text-gray-600 p-4 space-y-2">
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">PharmEasy</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Tata 1mg</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Netmeds</span> (Reliance)
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">MedPlus</span>
                  </li>
                  <li className="flex items-center">
                    <div className="w-1.5 h-1.5 rounded-full bg-blue-500 mr-2"></div>
                    <span className="font-medium">Apollo Pharmacy</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

{/* Footer */}
          <div className="border-t border-gray-200 pt-6 mt-10">
            <div className="flex justify-between items-center">
              <div className="text-xs text-gray-500">© 2023 Market Research Group. All Rights Reserved.</div>
              <div className="text-xs text-gray-500 border border-gray-200 px-4 py-2 rounded-full bg-white">
                Quick Commerce Industry Report | Confidential
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Add workflow buttons at the bottom */}
      <div className="mt-6 flex flex-wrap gap-2 justify-end">
        <Button
          size="sm"
          variant="outline"
          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6] px-4 py-1.5 h-auto"
          onClick={onRestart}
        >
          <RefreshCw className="h-4 w-4" />
          Restart Workflow
        </Button>
        <Button size="sm" className="gap-2 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto">
          <Download className="h-4 w-4" />
          Download PDF
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/rera-filings/loading.tsx" isMerged="true"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"

export default function Loading() {
  return (
    <WorkflowLayout>
      <WorkflowHeader title="RERA Filings & Press Mentions" breadcrumbs={[{ label: "Workflows", href: "/" }]} />
      <div className="flex-1 overflow-y-auto p-6 pb-32">
        <div className="max-w-3xl mx-auto space-y-6">
          <div className="animate-pulse">
            <div className="h-6 bg-gray-200 rounded w-3/4 mb-4"></div>
            <div className="h-4 bg-gray-200 rounded w-1/2 mb-2"></div>
            <div className="h-4 bg-gray-200 rounded w-5/6 mb-2"></div>
            <div className="h-4 bg-gray-200 rounded w-4/6"></div>
          </div>
        </div>
      </div>
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/quarterly-results-extractor/loading.tsx" isMerged="true"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"

export default function Loading() {
  return (
    <WorkflowLayout title="Quarterly Results Extractor" description="Loading...">
      <div className="flex items-center justify-center h-[calc(100vh-200px)]">
        <div className="flex flex-col items-center gap-4">
          <div className="h-12 w-12 rounded-full border-4 border-[#e6edf9] border-t-[#004ce6] animate-spin"></div>
          <p className="text-[#4e5971] animate-pulse">Loading workflow...</p>
        </div>
      </div>
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/company-selector.tsx" isEdit="true" isMerged="true"
"use client"

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

interface CompanySelectorProps {
  onSelect: (companies: string[]) => void
}

const suggestedCompanies = [
  "Lodha",
  "Prestige",
  "DLF",
  "Godrej Properties",
  "Oberoi Realty",
  "Brigade Enterprises",
  "Sobha Limited",
  "Puravankara",
  "Mahindra Lifespace",
  "Tata Motors",
  "Maruti Suzuki",
  "Bajaj Auto",
  "Hero MotoCorp",
  "TVS Motor",
  "Reliance Industries",
  "TCS",
  "HDFC Bank",
  "Infosys",
  "ICICI Bank",
]

export function CompanySelector({ onSelect }: CompanySelectorProps) {
  const [inputValue, setInputValue] = useState("")
  const [selectedCompanies, setSelectedCompanies] = useState<string[]>([])
  const [filteredSuggestions, setFilteredSuggestions] = useState<string[]>(suggestedCompanies.slice(0, 5))

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value
    setInputValue(value)

if (value.trim() === "") {
      setFilteredSuggestions(suggestedCompanies.slice(0, 5))
    } else {
      const filtered = suggestedCompanies
        .filter((company) => company.toLowerCase().includes(value.toLowerCase()))
        .slice(0, 5)
      setFilteredSuggestions(filtered)
    }
  }

const addCompany = (company: string) => {
    if (!selectedCompanies.includes(company) && company.trim() !== "") {
      const newSelectedCompanies = [...selectedCompanies, company]
      setSelectedCompanies(newSelectedCompanies)
      setInputValue("")
    }
  }

const removeCompany = (company: string) => {
    setSelectedCompanies(selectedCompanies.filter((c) => c !== company))
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && inputValue.trim() !== "") {
      addCompany(inputValue.trim())
    }
  }

const handleContinue = () => {
    if (selectedCompanies.length > 0) {
      onSelect(selectedCompanies)
    }
  }

return (
    <div className="space-y-4">
      <div className="flex flex-col gap-2">
        <div className="flex flex-wrap gap-2 p-2 border border-[#dee6f5] rounded-md bg-white min-h-[42px]">
          {selectedCompanies.map((company) => (
            <div key={company} className="flex items-center gap-1 px-2 py-1 bg-[#f0f4fa] rounded-md text-sm">
              <span>{company}</span>
              <button onClick={() => removeCompany(company)} className="text-[#6e7b96] hover:text-[#4e5971]">
                <X className="h-3 w-3" />
              </button>
            </div>
          ))}
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            placeholder={selectedCompanies.length === 0 ? "Type company name or ticker..." : ""}
            className="flex-1 min-w-[120px] outline-none text-sm py-1"
          />
        </div>

{filteredSuggestions.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {filteredSuggestions.map((company) => (
              <button
                key={company}
                onClick={() => addCompany(company)}
                className="px-2 py-1 text-sm bg-[#f0f4fa] text-[#4e5971] rounded-md hover:bg-[#e6edf9] transition-colors"
              >
                {company}
              </button>
            ))}
          </div>
        )}
      </div>

<button
        onClick={handleContinue}
        disabled={selectedCompanies.length === 0}
        className="continue-button px-4 py-2 bg-[#004ce6] text-white rounded-md hover:bg-[#003bb2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Continue
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/file-source-selector.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Upload } from "lucide-react"

interface FileSourceSelectorProps {
  onSelect: (source: "auto-fetch" | "upload", files?: File[]) => void
}

export function FileSourceSelector({ onSelect }: FileSourceSelectorProps) {
  const [selectedSource, setSelectedSource] = useState<"auto-fetch" | "upload">("auto-fetch")
  const [files, setFiles] = useState<File[]>([])

const handleSourceChange = (source: "auto-fetch" | "upload") => {
    setSelectedSource(source)
  }

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setFiles(Array.from(e.target.files))
    }
  }

const handleContinue = () => {
    if (selectedSource === "auto-fetch" || (selectedSource === "upload" && files.length > 0)) {
      onSelect(selectedSource, files)
    }
  }

return (
    <div className="space-y-4">
      <div className="flex gap-4">
        <button
          onClick={() => handleSourceChange("auto-fetch")}
          className={`flex-1 p-4 rounded-md border ${
            selectedSource === "auto-fetch" ? "border-[#004ce6] bg-[#f0f4fa]" : "border-[#dee6f5] bg-white"
          } transition-colors`}
        >
          <div className="flex flex-col items-center gap-2">
            <div className={`p-2 rounded-full ${selectedSource === "auto-fetch" ? "bg-[#e6edf9]" : "bg-[#f0f4fa]"}`}>
              <svg className="h-5 w-5 text-[#004ce6]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                />
              </svg>
            </div>
            <span className="font-medium text-sm">Auto-Fetch</span>
            <span className="text-xs text-[#6e7b96]">Latest quarterly filings</span>
          </div>
        </button>

<button
          onClick={() => handleSourceChange("upload")}
          className={`flex-1 p-4 rounded-md border ${
            selectedSource === "upload" ? "border-[#004ce6] bg-[#f0f4fa]" : "border-[#dee6f5] bg-white"
          } transition-colors`}
        >
          <div className="flex flex-col items-center gap-2">
            <div className={`p-2 rounded-full ${selectedSource === "upload" ? "bg-[#e6edf9]" : "bg-[#f0f4fa]"}`}>
              <Upload className="h-5 w-5 text-[#004ce6]" />
            </div>
            <span className="font-medium text-sm">Upload Files</span>
            <span className="text-xs text-[#6e7b96]">Your own PDF documents</span>
          </div>
        </button>
      </div>

{selectedSource === "upload" && (
        <div className="mt-4">
          <label
            htmlFor="file-upload"
            className="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-[#dee6f5] rounded-md cursor-pointer bg-white hover:bg-[#f4f9ff] transition-colors"
          >
            <div className="flex flex-col items-center justify-center pt-5 pb-6">
              <Upload className="h-8 w-8 text-[#8098c4] mb-2" />
              <p className="mb-2 text-sm text-[#4e5971]">
                <span className="font-medium">Click to upload</span> or drag and drop
              </p>
              <p className="text-xs text-[#6e7b96]">PDF files only</p>
            </div>
            <input id="file-upload" type="file" className="hidden" accept=".pdf" multiple onChange={handleFileChange} />
          </label>

{files.length > 0 && (
            <div className="mt-2">
              <p className="text-sm text-[#4e5971]">{files.length} file(s) selected</p>
              <ul className="mt-1 text-xs text-[#6e7b96]">
                {files.map((file, index) => (
                  <li key={index}>{file.name}</li>
                ))}
              </ul>
            </div>
          )}
        </div>
      )}

<button
        onClick={handleContinue}
        disabled={selectedSource === "upload" && files.length === 0}
        className="continue-button px-4 py-2 bg-[#004ce6] text-white rounded-md hover:bg-[#003bb2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Continue
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/metrics-selector.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"
import { Check } from "lucide-react"

interface MetricsSelectorProps {
  defaultMetrics?: string[]
  onSelect: (metrics: string[]) => void
}

export function MetricsSelector({ defaultMetrics = [], onSelect }: MetricsSelectorProps) {
  const [selectedMetrics, setSelectedMetrics] = useState<string[]>(defaultMetrics)
  const [customMetric, setCustomMetric] = useState("")

const availableMetrics = [
    "Units Sold",
    "Collections (₹ Cr)",
    "Net Debt / EBITDA",
    "Management Commentary",
    "Revenue",
    "EBITDA",
    "PAT",
    "EPS",
    "Debt",
    "Cash & Equivalents",
  ]

const toggleMetric = (metric: string) => {
    if (selectedMetrics.includes(metric)) {
      setSelectedMetrics(selectedMetrics.filter((m) => m !== metric))
    } else {
      setSelectedMetrics([...selectedMetrics, metric])
    }
  }

const addCustomMetric = () => {
    if (customMetric.trim() !== "" && !selectedMetrics.includes(customMetric.trim())) {
      setSelectedMetrics([...selectedMetrics, customMetric.trim()])
      setCustomMetric("")
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      addCustomMetric()
    }
  }

const handleContinue = () => {
    if (selectedMetrics.length > 0) {
      onSelect(selectedMetrics)
    }
  }

return (
    <div className="space-y-4">
      <div className="grid grid-cols-2 gap-2">
        {availableMetrics.map((metric) => (
          <div
            key={metric}
            onClick={() => toggleMetric(metric)}
            className={`flex items-center gap-2 p-3 rounded-md border cursor-pointer ${
              selectedMetrics.includes(metric) ? "border-[#004ce6] bg-[#f0f4fa]" : "border-[#dee6f5] bg-white"
            } transition-colors`}
          >
            <div
              className={`flex items-center justify-center h-5 w-5 rounded-md ${
                selectedMetrics.includes(metric) ? "bg-[#004ce6]" : "border border-[#dee6f5]"
              }`}
            >
              {selectedMetrics.includes(metric) && <Check className="h-3 w-3 text-white" />}
            </div>
            <span className="text-sm">{metric}</span>
          </div>
        ))}
      </div>

<div className="flex gap-2">
        <input
          type="text"
          value={customMetric}
          onChange={(e) => setCustomMetric(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Add custom metric..."
          className="flex-1 px-3 py-2 border border-[#dee6f5] rounded-md text-sm outline-none focus:border-[#004ce6]"
        />
        <button
          onClick={addCustomMetric}
          disabled={customMetric.trim() === ""}
          className="px-4 py-2 bg-[#f0f4fa] text-[#4e5971] rounded-md hover:bg-[#e6edf9] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Add
        </button>
      </div>

<button
        onClick={handleContinue}
        disabled={selectedMetrics.length === 0}
        className="continue-button px-4 py-2 bg-[#004ce6] text-white rounded-md hover:bg-[#003bb2] transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Continue
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/quarterly-results-extractor/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { CompanySelector } from "@/components/workflow/customization/company-selector"
import { FileSourceSelector } from "@/components/workflow/customization/file-source-selector"
import { MetricsSelector } from "@/components/workflow/customization/metrics-selector"
import { QuarterlyResultsReport } from "@/components/workflow/report/quarterly-results-report"
import { WorkflowEngine } from "@/lib/workflow/workflow-engine"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "quarterly-results-extractor",
  title: "Quarterly Results Extractor",
  description: "Extract key financial metrics and commentary from quarterly filings",
  steps: [
    {
      id: 1,
      title: "Select Companies",
      description: "Choose the companies to extract quarterly results for",
    },
    {
      id: 2,
      title: "Choose Source",
      description: "Auto-fetch filings or upload your own PDFs",
    },
    {
      id: 3,
      title: "Select Metrics",
      description: "Choose which metrics and commentary to extract",
    },
    {
      id: 4,
      title: "Review & Generate",
      description: "Confirm your selections and generate the report",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the Quarterly Results Extractor. Please select the companies you'd like to analyze.
      </p>
    </div>
  ),
}

export default function QuarterlyResultsExtractorPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// State management
  const [messages, setMessages] = useState<MessageProps[]>([])
  const [currentStep, setCurrentStep] = useState(1)
  const [isReportComplete, setIsReportComplete] = useState(false)
  const [activeCustomizationId, setActiveCustomizationId] = useState<string | null>(null)
  const [isMounted, setIsMounted] = useState(false)
  const [selectedCompanies, setSelectedCompanies] = useState<string[]>([])
  const [selectedSource, setSelectedSource] = useState<string>("auto-fetch")
  const [selectedMetrics, setSelectedMetrics] = useState<string[]>([
    "Units Sold",
    "Collections (₹ Cr)",
    "Net Debt / EBITDA",
    "Management Commentary",
  ])

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle company selection
  const handleCompanySelection = (companies: string[]) => {
    setSelectedCompanies(companies)
    setCurrentStep(2) // Move to source selection step

// Add user message
    workflowEngine.addMessage("user", `I want to extract quarterly results for: ${companies.join(", ")}`)

// Show source selection
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            Would you like me to auto-fetch the latest quarterly results or upload your own PDFs?
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle source selection
  const handleSourceSelection = (source: "auto-fetch" | "upload", files?: File[]) => {
    setSelectedSource(source)
    setCurrentStep(3) // Move to metrics selection step

// Add user message
    const sourceText =
      source === "auto-fetch"
        ? "Please auto-fetch the latest quarterly results"
        : `I'll upload ${files?.length} PDF file(s)`

workflowEngine.addMessage("user", sourceText)

// Show metrics selection
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">Select the metrics and commentary you'd like to extract:</p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle metrics selection
  const handleMetricsSelection = (metrics: string[]) => {
    setSelectedMetrics(metrics)
    setCurrentStep(4) // Move to confirmation step

// Add user message
    workflowEngine.addMessage("user", `I want to extract these metrics: ${metrics.join(", ")}`)

// Show confirmation
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">Here's your setup:</p>
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <span className="font-medium">Companies:</span> {selectedCompanies.join(", ")}
            </li>
            <li>
              <span className="font-medium">Source:</span>{" "}
              {selectedSource === "auto-fetch" ? "Auto-fetched Q1 FY26 PDFs" : "Uploaded PDFs"}
            </li>
            <li>
              <span className="font-medium">Metrics:</span> {metrics.join(", ")}
            </li>
          </ul>
          <p className="mt-4">Ready to generate your report?</p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Generate final report
  const generateReport = () => {
    // Add user message
    workflowEngine.addMessage("user", "Confirm and generate the report")

// Show loading message
    workflowEngine.addLoadingMessage("Extracting data and building your workbook...")
    setMessages(workflowEngine.getMessages())

// Simulate processing
    setTimeout(() => {
      workflowEngine.removeLoadingMessage()

// Clear active customization before showing the final report
      workflowEngine.clearActiveCustomization()
      setActiveCustomizationId(null)

setIsReportComplete(true)

// Add the final report message
      workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">Your quarterly results report is ready!</p>
          <QuarterlyResultsReport
            companies={selectedCompanies}
            metrics={selectedMetrics}
            onRestart={() => {
              // Reset the workflow
              const initialMessages = workflowEngine.initialize()
              setMessages(initialMessages)
              setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
              setCurrentStep(1)
              setIsReportComplete(false)
              setSelectedCompanies([])
              setSelectedSource("auto-fetch")
            }}
          />
        </div>,
      )

setMessages(workflowEngine.getMessages())
    }, 2000)
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <CompanySelector onSelect={handleCompanySelection} />
      case 2:
        return <FileSourceSelector onSelect={handleSourceSelection} />
      case 3:
        return <MetricsSelector defaultMetrics={selectedMetrics} onSelect={handleMetricsSelection} />
      case 4:
        return (
          <div className="flex gap-3 mt-2">
            <button
              onClick={generateReport}
              className="px-4 py-2 bg-[#004ce6] text-white rounded-md hover:bg-[#003bb2] transition-colors"
            >
              Generate Report
            </button>
            <button
              onClick={() => {
                // Reset the workflow
                const initialMessages = workflowEngine.initialize()
                setMessages(initialMessages)
                setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
                setCurrentStep(1)
                setIsReportComplete(false)
                setSelectedCompanies([])
                setSelectedSource("auto-fetch")
              }}
              className="px-4 py-2 border border-[#dee6f5] rounded-md hover:bg-[#f4f9ff] transition-colors"
            >
              Start Over
            </button>
          </div>
        )
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader title="Quarterly Results Extractor" breadcrumbs={[{ label: "Workflows", href: "/" }]} />

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'll help you with that. What specific aspect of the quarterly results would you like to explore
                        further?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the quarterly results..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/extraction-options.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { FileSpreadsheet, FilesIcon } from "lucide-react"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"

interface ExtractionOptionsProps {
  onSelect: (option: "single" | "separate", statementTypes: string[]) => void
}

export function ExtractionOptions({ onSelect }: ExtractionOptionsProps) {
  const [selectedOption, setSelectedOption] = useState<"single" | "separate" | null>(null)
  const [statementTypes, setStatementTypes] = useState<string[]>(["consolidated"])

const handleOptionSelect = (option: "single" | "separate") => {
    setSelectedOption(option)
  }

const handleStatementTypeChange = (type: string, checked: boolean) => {
    if (checked) {
      setStatementTypes([...statementTypes, type])
    } else {
      // Only allow unchecking if there will still be at least one option selected
      if (statementTypes.length > 1) {
        setStatementTypes(statementTypes.filter((t) => t !== type))
      }
    }
  }

const handleContinue = () => {
    if (selectedOption) {
      onSelect(selectedOption, statementTypes)
    }
  }

return (
    <div className="space-y-4">
      <div className="space-y-2">
        <h3 className="text-sm font-medium text-[#001742]">Statement Type:</h3>
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="consolidated"
              checked={statementTypes.includes("consolidated")}
              onCheckedChange={(checked) => handleStatementTypeChange("consolidated", checked === true)}
              className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
            />
            <Label htmlFor="consolidated" className="text-sm text-[#001742]">
              Consolidated
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="standalone"
              checked={statementTypes.includes("standalone")}
              onCheckedChange={(checked) => handleStatementTypeChange("standalone", checked === true)}
              className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
            />
            <Label htmlFor="standalone" className="text-sm text-[#001742]">
              Standalone
            </Label>
          </div>
        </div>
      </div>

<div className="grid grid-cols-2 gap-4">
        <div
          className={`flex flex-col items-center justify-center rounded-lg border p-4 cursor-pointer transition-colors ${
            selectedOption === "single" ? "border-[#004ce6] bg-[#f4f9ff]" : "border-[#dee6f5] hover:bg-[#f9fafc]"
          }`}
          onClick={() => handleOptionSelect("single")}
        >
          <FileSpreadsheet
            className={`h-10 w-10 mb-2 ${selectedOption === "single" ? "text-[#004ce6]" : "text-[#8098c4]"}`}
          />
          <h3 className="text-sm font-medium text-[#001742]">Single Excel File</h3>
          <p className="text-xs text-center text-[#6e7b96] mt-1">All statements in one file with multiple sheets</p>
        </div>

<div
          className={`flex flex-col items-center justify-center rounded-lg border p-4 cursor-pointer transition-colors ${
            selectedOption === "separate" ? "border-[#004ce6] bg-[#f4f9ff]" : "border-[#dee6f5] hover:bg-[#f9fafc]"
          }`}
          onClick={() => handleOptionSelect("separate")}
        >
          <FilesIcon
            className={`h-10 w-10 mb-2 ${selectedOption === "separate" ? "text-[#004ce6]" : "text-[#8098c4]"}`}
          />
          <h3 className="text-sm font-medium text-[#001742]">Separate Excel Files</h3>
          <p className="text-xs text-center text-[#6e7b96] mt-1">Each statement as a separate Excel file</p>
        </div>
      </div>

<div className="mt-4">
        <h3 className="text-sm font-medium mb-2">Statement Type:</h3>
        <div className="flex flex-col gap-2">
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={true}
              onChange={() => {}}
              className="h-4 w-4 rounded border-gray-300 text-[#004ce6] focus:ring-[#004ce6]"
            />
            <span>Consolidated</span>
          </label>
          <label className="flex items-center gap-2">
            <input
              type="checkbox"
              checked={false}
              onChange={() => {}}
              className="h-4 w-4 rounded border-gray-300 text-[#004ce6] focus:ring-[#004ce6]"
            />
            <span>Standalone</span>
          </label>
        </div>
      </div>

<div className="mt-4">
        <Button
          onClick={handleContinue}
          disabled={!selectedOption}
          className={`mt-4 px-4 py-1.5 h-auto text-sm ${
            selectedOption
              ? "bg-[#004ce6] hover:bg-[#0047cb] text-white"
              : "bg-[#f4f7ff] text-[#8098c4] cursor-not-allowed"
          }`}
        >
          Continue
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization/screenshot-uploader.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Upload } from "lucide-react"

interface ScreenshotUploaderProps {
  onUpload: (screenshotName: string) => void
}

export function ScreenshotUploader({ onUpload }: ScreenshotUploaderProps) {
  const [isDragging, setIsDragging] = useState(false)

const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(true)
  }

const handleDragLeave = () => {
    setIsDragging(false)
  }

const handleDrop = (e: React.DragEvent) => {
    e.preventDefault()
    setIsDragging(false)
    simulateUpload()
  }

const simulateUpload = () => {
    // Immediately trigger the upload without showing a preview
    onUpload("quarterly_revenue_chart.png")
  }

return (
    <div className="space-y-4">
      <div
        className={`border-2 border-dashed ${
          isDragging ? "border-[#004ce6] bg-[#f4f9ff]" : "border-[#dee6f5] bg-[#f9fafc]"
        } rounded-lg p-6 flex flex-col items-center justify-center transition-colors cursor-pointer`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={simulateUpload}
      >
        <Upload className="h-8 w-8 text-[#8098c4] mb-2" />
        <p className="text-sm font-medium text-[#001742]">Drop your chart screenshot here or click to upload</p>
        <p className="text-xs text-[#8098c4]">Supported formats: PNG, JPG</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/report/quarterly-results-report.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { FileSpreadsheet, FileIcon as FilePdf, Printer, BarChart3, PieChart, ArrowLeft, Download } from "lucide-react"

interface QuarterlyResultsReportProps {
  companies: string[]
  metrics: string[]
  onRestart?: () => void
}

export function QuarterlyResultsReport({ companies, metrics, onRestart }: QuarterlyResultsReportProps) {
  const [activeTab, setActiveTab] = useState("overview")

// Use actual data instead of random generation
  const quarterlyData = {
    Lodha: {
      Quarter: "Q1 FY26",
      "Units Sold": 1200,
      "Collections (₹ Cr)": 850,
      "Net Debt (₹ Cr)": 1500,
      "EBITDA (₹ Cr)": 400,
      "Net Debt/EBITDA": "3.75×",
      Commentary:
        "Collections remained robust at ₹850 Cr, driven by strong bookings in suburban projects. Management targets 10% volume growth next quarter.",
    },
    Prestige: {
      Quarter: "Q1 FY26",
      "Units Sold": 950,
      "Collections (₹ Cr)": 720,
      "Net Debt (₹ Cr)": 1250,
      "EBITDA (₹ Cr)": 350,
      "Net Debt/EBITDA": "3.57×",
      Commentary:
        "Unit sales dipped slightly due to festival-season pause; expect rebound in Q2 backed by new launches.",
    },
    DLF: {
      Quarter: "Q1 FY26",
      "Units Sold": 1100,
      "Collections (₹ Cr)": 910,
      "Net Debt (₹ Cr)": 1800,
      "EBITDA (₹ Cr)": 450,
      "Net Debt/EBITDA": "4.00×",
      Commentary: "EBITDA improved 8% QoQ; however, leverage rose to 4.0× as net debt increased for land acquisitions.",
    },
    "Godrej Properties": {
      Quarter: "Q1 FY26",
      "Units Sold": 1050,
      "Collections (₹ Cr)": 780,
      "Net Debt (₹ Cr)": 1100,
      "EBITDA (₹ Cr)": 320,
      "Net Debt/EBITDA": "3.44×",
      Commentary:
        "Strong performance in NCR and Bengaluru markets. Launched 3 new projects with excellent initial response.",
    },
    "Oberoi Realty": {
      Quarter: "Q1 FY26",
      "Units Sold": 650,
      "Collections (₹ Cr)": 620,
      "Net Debt (₹ Cr)": 900,
      "EBITDA (₹ Cr)": 280,
      "Net Debt/EBITDA": "3.21×",
      Commentary: "Premium segment continues to show resilience. Mulund and Goregaon projects driving sales momentum.",
    },
  }

// Filter data based on selected companies
  const filteredData = Object.entries(quarterlyData)
    .filter(([company]) => companies.includes(company) || companies.length === 0)
    .reduce(
      (acc, [company, data]) => {
        acc[company] = data
        return acc
      },
      {} as Record<string, any>,
    )

// Calculate industry averages
  const calculateIndustryAverages = () => {
    const companies = Object.values(filteredData)
    const metrics = ["Units Sold", "Collections (₹ Cr)", "Net Debt (₹ Cr)", "EBITDA (₹ Cr)"]

return metrics.reduce(
      (acc, metric) => {
        const sum = companies.reduce((total, company) => total + company[metric], 0)
        acc[metric] = Math.round(sum / companies.length)
        return acc
      },
      {} as Record<string, number>,
    )
  }

const industryAverages = calculateIndustryAverages()

// Get company colors for charts
  const getCompanyColor = (company: string, index: number) => {
    const colors = [
      "rgba(0, 76, 230, 0.9)",
      "rgba(0, 76, 230, 0.75)",
      "rgba(0, 76, 230, 0.6)",
      "rgba(0, 76, 230, 0.45)",
      "rgba(0, 76, 230, 0.3)",
    ]
    return colors[index % colors.length]
  }

return (
    <div className="bg-white rounded-lg shadow-sm border border-[#e5e9f0] overflow-hidden">
      {/* Report Header */}
      <div className="p-6 border-b border-[#e5e9f0] bg-gradient-to-r from-[#f8faff] to-white">
        <div className="flex justify-between items-center">
          <div>
            <h2 className="text-2xl font-bold text-[#001742]">Quarterly Results Analysis</h2>
            <p className="text-[#6e7b96] mt-1">Q1 FY26 Results for {Object.keys(filteredData).join(", ")}</p>
          </div>
          <div className="flex gap-2">
            {onRestart && (
              <button
                onClick={onRestart}
                className="flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-[#dee6f5] hover:bg-[#f4f9ff] transition-colors"
              >
                <ArrowLeft className="h-4 w-4 text-[#6e7b96]" />
                <span>New Analysis</span>
              </button>
            )}
            <button className="flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-[#dee6f5] hover:bg-[#f4f9ff] transition-colors">
              <Printer className="h-4 w-4 text-[#6e7b96]" />
              <span>Print</span>
            </button>
            <button className="flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-[#dee6f5] hover:bg-[#f4f9ff] transition-colors">
              <FilePdf className="h-4 w-4 text-[#6e7b96]" />
              <span>PDF</span>
            </button>
            <button className="flex items-center gap-1 px-3 py-1.5 text-sm bg-[#004ce6] text-white rounded-md hover:bg-[#003bb2] transition-colors">
              <FileSpreadsheet className="h-4 w-4" />
              <span>Excel</span>
            </button>
          </div>
        </div>
      </div>

{/* Report Tabs */}
      <div className="border-b border-[#e5e9f0]">
        <div className="flex px-6">
          <button
            onClick={() => setActiveTab("overview")}
            className={`px-4 py-3 text-sm font-medium border-b-2 ${
              activeTab === "overview"
                ? "border-[#004ce6] text-[#004ce6]"
                : "border-transparent text-[#6e7b96] hover:text-[#4e5971]"
            } transition-colors`}
          >
            Overview
          </button>
          <button
            onClick={() => setActiveTab("metrics")}
            className={`px-4 py-3 text-sm font-medium border-b-2 ${
              activeTab === "metrics"
                ? "border-[#004ce6] text-[#004ce6]"
                : "border-transparent text-[#6e7b96] hover:text-[#4e5971]"
            } transition-colors`}
          >
            Detailed Metrics
          </button>
          <button
            onClick={() => setActiveTab("commentary")}
            className={`px-4 py-3 text-sm font-medium border-b-2 ${
              activeTab === "commentary"
                ? "border-[#004ce6] text-[#004ce6]"
                : "border-transparent text-[#6e7b96] hover:text-[#4e5971]"
            } transition-colors`}
          >
            Management Commentary
          </button>
        </div>
      </div>

{/* Report Content */}
      <div className="p-6">
        {activeTab === "overview" && (
          <div className="space-y-8">
            {/* Executive Summary */}
            <div className="bg-[#f8faff] p-4 rounded-lg border border-[#e5e9f0]">
              <h3 className="text-lg font-semibold text-[#001742] mb-2">Executive Summary</h3>
              <p className="text-sm text-[#4e5971]">
                This report analyzes Q1 FY26 results for {Object.keys(filteredData).length} real estate companies.
                Industry average for units sold was {industryAverages["Units Sold"].toLocaleString()}, with collections
                averaging ₹{industryAverages["Collections (₹ Cr)"].toLocaleString()} Cr. Net debt to EBITDA ratios range
                from 3.21× to 4.00×, with most companies maintaining healthy leverage levels.
              </p>
            </div>

{/* Metrics Table */}
            <div>
              <div className="flex items-center justify-between mb-3">
                <h3 className="text-lg font-semibold text-[#001742]">Quarterly Performance Metrics</h3>
                <div className="flex items-center gap-2">
                  <span className="text-xs text-[#6e7b96]">View as:</span>
                  <button className="p-1 rounded bg-[#f0f4fa] text-[#004ce6]">
                    <BarChart3 className="h-4 w-4" />
                  </button>
                  <button className="p-1 rounded hover:bg-[#f0f4fa] text-[#6e7b96]">
                    <PieChart className="h-4 w-4" />
                  </button>
                </div>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead>
                    <tr>
                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        Company
                      </th>
                      <th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        Quarter
                      </th>
                      <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        Units Sold
                      </th>
                      <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        Collections (₹ Cr)
                      </th>
                      <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        Net Debt (₹ Cr)
                      </th>
                      <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        EBITDA (₹ Cr)
                      </th>
                      <th className="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wider text-[#4e5971] bg-[#f0f4fa] border-y border-[#e5e9f0]">
                        Net Debt/EBITDA
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {Object.entries(filteredData).map(([company, data], index) => (
                      <tr
                        key={company}
                        className={`hover:bg-[#f8faff] transition-colors ${
                          index % 2 === 0 ? "bg-white" : "bg-[#fafbfd]"
                        }`}
                      >
                        <td className="px-4 py-3 text-sm font-medium text-[#001742] border-b border-[#e5e9f0]">
                          {company}
                        </td>
                        <td className="px-4 py-3 text-sm text-[#4e5971] border-b border-[#e5e9f0]">{data.Quarter}</td>
                        <td className="px-4 py-3 text-sm text-right text-[#4e5971] border-b border-[#e5e9f0]">
                          {data["Units Sold"].toLocaleString()}
                        </td>
                        <td className="px-4 py-3 text-sm text-right text-[#4e5971] border-b border-[#e5e9f0]">
                          {data["Collections (₹ Cr)"].toLocaleString()}
                        </td>
                        <td className="px-4 py-3 text-sm text-right text-[#4e5971] border-b border-[#e5e9f0]">
                          {data["Net Debt (₹ Cr)"].toLocaleString()}
                        </td>
                        <td className="px-4 py-3 text-sm text-right text-[#4e5971] border-b border-[#e5e9f0]">
                          {data["EBITDA (₹ Cr)"].toLocaleString()}
                        </td>
                        <td className="px-4 py-3 text-sm text-right text-[#4e5971] border-b border-[#e5e9f0]">
                          {data["Net Debt/EBITDA"]}
                        </td>
                      </tr>
                    ))}
                    {/* Industry Average Row */}
                    <tr className="bg-[#f0f4fa]">
                      <td className="px-4 py-3 text-sm font-medium text-[#001742] border-b border-[#e5e9f0]">
                        Industry Average
                      </td>
                      <td className="px-4 py-3 text-sm text-[#4e5971] border-b border-[#e5e9f0]">Q1 FY26</td>
                      <td className="px-4 py-3 text-sm text-right font-medium text-[#001742] border-b border-[#e5e9f0]">
                        {industryAverages["Units Sold"].toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-sm text-right font-medium text-[#001742] border-b border-[#e5e9f0]">
                        {industryAverages["Collections (₹ Cr)"].toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-sm text-right font-medium text-[#001742] border-b border-[#e5e9f0]">
                        {industryAverages["Net Debt (₹ Cr)"].toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-sm text-right font-medium text-[#001742] border-b border-[#e5e9f0]">
                        {industryAverages["EBITDA (₹ Cr)"].toLocaleString()}
                      </td>
                      <td className="px-4 py-3 text-sm text-right font-medium text-[#001742] border-b border-[#e5e9f0]">
                        -
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

{/* Visualization Section */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Units Sold Chart */}
              <div className="bg-white rounded-lg border border-[#e5e9f0] overflow-hidden">
                <div className="px-4 py-3 bg-[#f8faff] border-b border-[#e5e9f0]">
                  <h4 className="text-sm font-semibold text-[#001742]">Units Sold by Company</h4>
                </div>
                <div className="p-4">
                  <div className="h-64 flex items-center justify-center">
                    <div className="flex flex-col items-center w-full">
                      <div className="flex items-end h-40 w-full justify-around mb-4">
                        {Object.entries(filteredData).map(([company, data], index) => {
                          const maxUnits = Math.max(...Object.values(filteredData).map((d) => d["Units Sold"]))
                          const height = (data["Units Sold"] / maxUnits) * 100
                          return (
                            <div key={company} className="flex flex-col items-center">
                              <div className="text-xs text-[#4e5971] mb-1">{data["Units Sold"].toLocaleString()}</div>
                              <div
                                className="w-16 rounded-t-md"
                                style={{
                                  height: `${height}%`,
                                  backgroundColor: getCompanyColor(company, index),
                                }}
                              ></div>
                              <div className="mt-2 text-xs font-medium text-[#4e5971] max-w-16 truncate">{company}</div>
                            </div>
                          )
                        })}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

{/* Net Debt/EBITDA Chart */}
              <div className="bg-white rounded-lg border border-[#e5e9f0] overflow-hidden">
                <div className="px-4 py-3 bg-[#f8faff] border-b border-[#e5e9f0]">
                  <h4 className="text-sm font-semibold text-[#001742]">Net Debt/EBITDA Ratio</h4>
                </div>
                <div className="p-4">
                  <div className="h-64 flex items-center justify-center">
                    <div className="flex flex-col items-center w-full">
                      <div className="flex items-end h-40 w-full justify-around mb-4">
                        {Object.entries(filteredData).map(([company, data], index) => {
                          const ratio = Number.parseFloat(data["Net Debt/EBITDA"].replace("×", ""))
                          const maxRatio = 5 // Setting max to 5x for visualization
                          const height = (ratio / maxRatio) * 100
                          return (
                            <div key={company} className="flex flex-col items-center">
                              <div className="text-xs text-[#4e5971] mb-1">{data["Net Debt/EBITDA"]}</div>
                              <div
                                className="w-16 rounded-t-md"
                                style={{
                                  height: `${height}%`,
                                  backgroundColor: getCompanyColor(company, index),
                                }}
                              ></div>
                              <div className="mt-2 text-xs font-medium text-[#4e5971] max-w-16 truncate">{company}</div>
                            </div>
                          )
                        })}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

{/* Key Commentary Snippets */}
            <div>
              <h3 className="text-lg font-semibold text-[#001742] mb-3">Key Management Commentary</h3>
              <div className="grid grid-cols-1 gap-3">
                {Object.entries(filteredData).map(([company, data]) => (
                  <div
                    key={company}
                    className="p-4 bg-white border border-[#e5e9f0] rounded-lg hover:shadow-sm transition-shadow"
                  >
                    <p className="text-sm">
                      <span className="font-semibold text-[#001742]">{company}:</span>{" "}
                      <span className="text-[#4e5971]">{data.Commentary}</span>
                    </p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

{activeTab === "metrics" && (
          <div className="space-y-8">
            <div>
              <h3 className="text-lg font-semibold text-[#001742] mb-4">Detailed Metrics by Company</h3>
              {Object.entries(filteredData).map(([company, data]) => (
                <div key={company} className="mb-8 bg-white border border-[#e5e9f0] rounded-lg overflow-hidden">
                  <div className="px-5 py-4 bg-[#f8faff] border-b border-[#e5e9f0]">
                    <h4 className="text-md font-semibold text-[#001742]">{company}</h4>
                  </div>
                  <div className="p-5">
                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                      <div className="p-4 bg-[#f9fafc] border border-[#e5e9f0] rounded-md">
                        <div className="text-sm text-[#6e7b96]">Units Sold</div>
                        <div className="text-xl font-medium text-[#001742] mt-1">
                          {data["Units Sold"].toLocaleString()}
                        </div>
                        <div className="text-xs text-[#6e7b96] mt-1">
                          {data["Units Sold"] > industryAverages["Units Sold"] ? (
                            <span className="text-green-600">
                              +{((data["Units Sold"] / industryAverages["Units Sold"] - 1) * 100).toFixed(1)}% vs. avg
                            </span>
                          ) : (
                            <span className="text-red-600">
                              {((data["Units Sold"] / industryAverages["Units Sold"] - 1) * 100).toFixed(1)}% vs. avg
                            </span>
                          )}
                        </div>
                      </div>
                      <div className="p-4 bg-[#f9fafc] border border-[#e5e9f0] rounded-md">
                        <div className="text-sm text-[#6e7b96]">Collections</div>
                        <div className="text-xl font-medium text-[#001742] mt-1">
                          ₹{data["Collections (₹ Cr)"].toLocaleString()} Cr
                        </div>
                        <div className="text-xs text-[#6e7b96] mt-1">
                          {data["Collections (₹ Cr)"] > industryAverages["Collections (₹ Cr)"] ? (
                            <span className="text-green-600">
                              +
                              {(
                                (data["Collections (₹ Cr)"] / industryAverages["Collections (₹ Cr)"] - 1) *
                                100
                              ).toFixed(1)}
                              % vs. avg
                            </span>
                          ) : (
                            <span className="text-red-600">
                              {(
                                (data["Collections (₹ Cr)"] / industryAverages["Collections (₹ Cr)"] - 1) *
                                100
                              ).toFixed(1)}
                              % vs. avg
                            </span>
                          )}
                        </div>
                      </div>
                      <div className="p-4 bg-[#f9fafc] border border-[#e5e9f0] rounded-md">
                        <div className="text-sm text-[#6e7b96]">Net Debt</div>
                        <div className="text-xl font-medium text-[#001742] mt-1">
                          ₹{data["Net Debt (₹ Cr)"].toLocaleString()} Cr
                        </div>
                        <div className="text-xs text-[#6e7b96] mt-1">
                          {data["Net Debt (₹ Cr)"] < industryAverages["Net Debt (₹ Cr)"] ? (
                            <span className="text-green-600">
                              -{((1 - data["Net Debt (₹ Cr)"] / industryAverages["Net Debt (₹ Cr)"]) * 100).toFixed(1)}%
                              vs. avg
                            </span>
                          ) : (
                            <span className="text-red-600">
                              +{((data["Net Debt (₹ Cr)"] / industryAverages["Net Debt (₹ Cr)"] - 1) * 100).toFixed(1)}%
                              vs. avg
                            </span>
                          )}
                        </div>
                      </div>
                      <div className="p-4 bg-[#f9fafc] border border-[#e5e9f0] rounded-md">
                        <div className="text-sm text-[#6e7b96]">EBITDA</div>
                        <div className="text-xl font-medium text-[#001742] mt-1">
                          ₹{data["EBITDA (₹ Cr)"].toLocaleString()} Cr
                        </div>
                        <div className="text-xs text-[#6e7b96] mt-1">
                          {data["EBITDA (₹ Cr)"] > industryAverages["EBITDA (₹ Cr)"] ? (
                            <span className="text-green-600">
                              +{((data["EBITDA (₹ Cr)"] / industryAverages["EBITDA (₹ Cr)"] - 1) * 100).toFixed(1)}% vs.
                              avg
                            </span>
                          ) : (
                            <span className="text-red-600">
                              {((data["EBITDA (₹ Cr)"] / industryAverages["EBITDA (₹ Cr)"] - 1) * 100).toFixed(1)}% vs.
                              avg
                            </span>
                          )}
                        </div>
                      </div>
                      <div className="p-4 bg-[#f9fafc] border border-[#e5e9f0] rounded-md">
                        <div className="text-sm text-[#6e7b96]">Net Debt/EBITDA</div>
                        <div className="text-xl font-medium text-[#001742] mt-1">{data["Net Debt/EBITDA"]}</div>
                        <div className="text-xs text-[#6e7b96] mt-1">Leverage Ratio</div>
                      </div>
                      <div className="p-4 bg-[#f9fafc] border border-[#e5e9f0] rounded-md">
                        <div className="text-sm text-[#6e7b96]">Collections per Unit</div>
                        <div className="text-xl font-medium text-[#001742] mt-1">
                          ₹
                          {((data["Collections (₹ Cr)"] * 10000000) / data["Units Sold"]).toLocaleString(undefined, {
                            maximumFractionDigits: 0,
                          })}
                        </div>
                        <div className="text-xs text-[#6e7b96] mt-1">Average per unit</div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

{activeTab === "commentary" && (
          <div className="space-y-6">
            <div>
              <h3 className="text-lg font-semibold text-[#001742] mb-4">Management Commentary Analysis</h3>

<div className="mb-6 bg-[#f8faff] p-4 rounded-lg border border-[#e5e9f0]">
                <h4 className="text-md font-medium text-[#001742] mb-2">Key Themes</h4>
                <ul className="list-disc pl-5 space-y-1 text-sm text-[#4e5971]">
                  <li>Strong collections performance across most developers</li>
                  <li>New project launches driving sales momentum</li>
                  <li>Regional variations in performance (NCR, Bengaluru performing well)</li>
                  <li>Debt levels being managed despite land acquisitions</li>
                  <li>Premium segment showing resilience in current market</li>
                </ul>
              </div>

{Object.entries(filteredData).map(([company, data]) => (
                <div key={company} className="mb-4">
                  <div className="flex items-center gap-2 mb-2">
                    <h4 className="text-md font-medium text-[#001742]">{company}</h4>
                  </div>
                  <div className="p-4 bg-white border border-[#e5e9f0] rounded-lg">
                    <p className="text-sm text-[#4e5971]">{data.Commentary}</p>

<div className="mt-3 pt-3 border-t border-[#e5e9f0]">
                      <h5 className="text-xs font-medium text-[#6e7b96] mb-1">Key Metrics Impact</h5>
                      <div className="flex flex-wrap gap-2">
                        <span className="px-2 py-0.5 text-xs bg-[#f0f4fa] text-[#4e5971] rounded-md">
                          Units Sold: {data["Units Sold"].toLocaleString()}
                        </span>
                        <span className="px-2 py-0.5 text-xs bg-[#f0f4fa] text-[#4e5971] rounded-md">
                          Collections: ₹{data["Collections (₹ Cr)"].toLocaleString()} Cr
                        </span>
                        <span className="px-2 py-0.5 text-xs bg-[#f0f4fa] text-[#4e5971] rounded-md">
                          Net Debt/EBITDA: {data["Net Debt/EBITDA"]}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

{/* Report Footer */}
      <div className="p-6 border-t border-[#e5e9f0] bg-[#f8faff] flex justify-between items-center">
        <div className="text-sm text-[#6e7b96]">
          Generated on {new Date().toLocaleDateString()} • Quarterly Results Extractor
        </div>
        <div className="flex gap-2">
          <button className="flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border border-[#dee6f5] hover:bg-[#f4f9ff] transition-colors">
            <Download className="h-4 w-4 text-[#6e7b96]" />
            <span>Download Report</span>
          </button>
          <button className="flex items-center gap-1 px-3 py-1.5 text-sm bg-[#004ce6] text-white rounded-md hover:bg-[#003bb2] transition-colors">
            <FileSpreadsheet className="h-4 w-4" />
            <span>Download Excel</span>
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/rera-filings/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { WorkflowEngine } from "@/components/workflow/workflow-engine"
import { RERAFilingsReport } from "@/components/workflow/report/rera-filings-report"
import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { MessageProps } from "@/components/workflow/chat-message"

// Define the workflow configuration
const workflowConfig = {
  id: "rera-filings",
  title: "RERA Filings & Press Mentions",
  description: "Monitor regulatory disclosures and real-estate project filings",
  steps: [
    {
      id: 1,
      title: "Select Trigger Type & Entities",
      description: "Choose which types of filings to monitor and select entities",
    },
    {
      id: 2,
      title: "Set Time Frame",
      description: "Define the monitoring period",
    },
    {
      id: 3,
      title: "Processing",
      description: "Gathering and analyzing filings",
    },
    {
      id: 4,
      title: "Review Results",
      description: "Review the consolidated report",
    },
  ],
  initialMessage: (
    <div className="space-y-4">
      <p className="text-[#001742]">
        Welcome to the RERA Filings & Press Mentions monitor. This workflow helps you track real-estate project filings
        (RERA) along with press mentions for your selected entities.
      </p>
      <p className="text-[#001742]">Let's start by selecting the trigger types and entities you want to monitor.</p>
    </div>
  ),
}

// Sample data for demonstration
const sampleRERAData = {
  generatedDate: "2025-04-30 09:15 IST",
  triggerTypes: ["RERA Filing", "Press Mention"],
  entities: ["Lodha", "Prestige", "Kotak", "H-CARE SPV I"],
  filings: [
    {
      date: "2025-04-28",
      entity: "Lodha",
      type: "Press Mention",
      detail: "Board Meeting Outcome: Approved Q1 results",
      compliance: "on-time",
      sourceLink: "https://example.com/press/…",
    },
    {
      date: "2025-04-29",
      entity: "Prestige",
      type: "RERA Filing",
      detail: 'Delay Notice: Project "Sunrise" delayed 2 months',
      compliance: "delayed",
      sourceLink: "https://rera.maha.gov.in/…",
    },
    {
      date: "2025-04-30",
      entity: "Kotak",
      type: "Press Mention",
      detail: "Change in Scope: Raised FPI limit to 75%",
      compliance: "on-time",
      sourceLink: "https://example.com/press/…",
    },
    {
      date: "2025-04-29",
      entity: "H-CARE SPV I",
      type: "RERA Filing",
      detail: "Plan Revision: Added 50 apartments to Phase II",
      compliance: "on-time",
      sourceLink: "https://rera.ka.gov.in/…",
    },
  ],
  detailedEntries: [
    {
      id: "lodha-1",
      entity: "Lodha",
      type: "Press Mention",
      date: "2025-04-28",
      title: "Board Meeting Outcome",
      details: {
        filingDate: "28 Apr 2025",
        receivedDate: "28 Apr 2025",
        dueDate: "30 Apr 2025",
        section: "Board Meeting Outcome",
        compliance: "on-time",
      },
      summary:
        "Board approved Q1 FY 25-26 financial results; revenue up 12% YoY, net profit ₹250 Cr. No dividend proposed.",
      fullTextExcerpt:
        "In the Board meeting held on 27 April 2025, the Board considered and approved the audited financial statements for the quarter ended 31 March 2025. The company recorded revenue of ₹1,500 Cr and net profit of ₹250 Cr…",
      sourcePDF: "https://example.com/press/…",
    },
    {
      id: "prestige-1",
      entity: "Prestige",
      type: "RERA Filing",
      date: "2025-04-29",
      title: "Delay Notice",
      details: {
        project: "Sunrise Towers",
        originalHandoverDate: "01 Jun 2025",
        revisedHandoverDate: "01 Aug 2025",
        noticeIssued: "29 Apr 2025",
        reason: "Supply-chain delays for imported fixtures",
        compliance: "delayed",
      },
      summary: "",
      fullTextExcerpt:
        "Pursuant to Rule 16 of the RERA Regulations, the promoter hereby informs that the project handover is delayed by 60 days due to unforeseen supply-chain constraints…",
      sourcePDF: "https://rera.maha.gov.in/…",
    },
    {
      id: "kotak-1",
      entity: "Kotak",
      type: "Press Mention",
      date: "2025-04-30",
      title: "Change in Scope",
      details: {
        filingDate: "30 Apr 2025",
        receivedDate: "30 Apr 2025",
        dueDate: "02 May 2025",
        section: "Change in Scope",
        compliance: "on-time",
      },
      summary:
        "Board approved increase in Foreign Portfolio Investment (FPI) limit from 49% to 75% of paid-up capital, subject to regulatory approvals.",
      fullTextExcerpt:
        "The Board of Directors has approved the increase in aggregate limit of investment by Foreign Portfolio Investors (FPIs) from 49% to 75% of the paid-up equity share capital, subject to necessary approvals from regulatory authorities...",
      sourcePDF: "https://example.com/press/…",
    },
    {
      id: "hcare-1",
      entity: "H-CARE SPV I",
      type: "RERA Filing",
      date: "2025-04-29",
      title: "Plan Revision",
      details: {
        project: "Urban Heights Phase II",
        filingType: "Plan Revision",
        filingDate: "29 Apr 2025",
        revisionType: "Project Expansion",
        compliance: "on-time",
      },
      summary:
        "Added 50 apartments (2BHK and 3BHK configurations) to Phase II of Urban Heights project. Total project size now 250 units. No change to completion timeline.",
      fullTextExcerpt:
        "The promoter hereby submits a revised plan for Urban Heights Phase II, adding 50 residential units (30 x 2BHK and 20 x 3BHK) to the previously approved plan. The additional units will be constructed within the existing project timeline with no delay to the completion date...",
      sourcePDF: "https://rera.ka.gov.in/…",
    },
  ],
}

// Entity selection component
function TriggerTypeAndEntitySelector({ onSubmit }: { onSubmit: (types: string[], entities: string[]) => void }) {
  const [selectedTypes, setSelectedTypes] = useState<string[]>(["RERA Filings"])
  const [selectedEntities, setSelectedEntities] = useState<string[]>([])
  const [entityInput, setEntityInput] = useState("")

const suggestedEntities = [
    "Lodha",
    "Prestige",
    "Kotak",
    "H-CARE SPV I",
    "Brigade",
    "Godrej Properties",
    "DLF",
    "Sobha",
  ]

const handleTypeToggle = (type: string) => {
    if (selectedTypes.includes(type)) {
      setSelectedTypes(selectedTypes.filter((t) => t !== type))
    } else {
      setSelectedTypes([...selectedTypes, type])
    }
  }

const handleAddEntity = () => {
    if (entityInput && !selectedEntities.includes(entityInput)) {
      setSelectedEntities([...selectedEntities, entityInput])
      setEntityInput("")
    }
  }

const handleRemoveEntity = (entity: string) => {
    setSelectedEntities(selectedEntities.filter((e) => e !== entity))
  }

const handleSelectSuggestedEntity = (entity: string) => {
    if (!selectedEntities.includes(entity)) {
      setSelectedEntities([...selectedEntities, entity])
    }
  }

const handleSubmit = () => {
    if (selectedTypes.length > 0 && selectedEntities.length > 0) {
      onSubmit(selectedTypes, selectedEntities)
    }
  }

return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-sm font-medium text-[#001742]">Filing Types</h3>
        <div className="space-y-2">
          <div className="flex items-center space-x-2">
            <Checkbox
              id="rera-filings"
              checked={selectedTypes.includes("RERA Filings")}
              onCheckedChange={() => handleTypeToggle("RERA Filings")}
              className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
            />
            <Label htmlFor="rera-filings" className="text-sm text-[#001742]">
              RERA Filings
            </Label>
          </div>
          <div className="flex items-center space-x-2">
            <Checkbox
              id="press-mentions"
              checked={selectedTypes.includes("Press Mentions")}
              onCheckedChange={() => handleTypeToggle("Press Mentions")}
              className="border-[#dee6f5] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
            />
            <Label htmlFor="press-mentions" className="text-sm text-[#001742]">
              Press Mentions
            </Label>
          </div>
        </div>
      </div>

<div className="space-y-4">
        <h3 className="text-sm font-medium text-[#001742]">Entities</h3>
        <div className="flex items-center space-x-2">
          <Input
            placeholder="Enter entity name..."
            value={entityInput}
            onChange={(e) => setEntityInput(e.target.value)}
            className="border-[#dee6f5] focus-visible:ring-[#004ce6]"
          />
          <Button
            onClick={handleAddEntity}
            disabled={!entityInput}
            className="bg-[#004ce6] hover:bg-[#0047cb] text-white"
          >
            Add
          </Button>
        </div>

{/* Suggested entities */}
        <div className="flex flex-wrap gap-2">
          {suggestedEntities.map((entity) => (
            <Button
              key={entity}
              variant="outline"
              size="sm"
              onClick={() => handleSelectSuggestedEntity(entity)}
              className={`text-xs ${
                selectedEntities.includes(entity)
                  ? "bg-[#eaf0fc] text-[#004ce6] border-[#d9e4f7]"
                  : "text-[#6e7b96] border-[#dee6f5]"
              }`}
            >
              {entity}
            </Button>
          ))}
        </div>

{/* Selected entities */}
        {selectedEntities.length > 0 && (
          <div className="flex flex-wrap gap-2">
            {selectedEntities.map((entity) => (
              <div key={entity} className="flex items-center bg-[#eaf0fc] text-[#004ce6] px-2 py-1 rounded-md text-xs">
                {entity}
                <button onClick={() => handleRemoveEntity(entity)} className="ml-1 text-[#004ce6] hover:text-[#0047cb]">
                  ×
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

<Button
        onClick={handleSubmit}
        disabled={selectedTypes.length === 0 || selectedEntities.length === 0}
        className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
      >
        Continue
      </Button>
    </div>
  )
}

// Time frame selector component
function TimeFrameSelector({ onSubmit }: { onSubmit: (timeFrame: string) => void }) {
  const [timeFrame, setTimeFrame] = useState("7 days")

const handleSubmit = () => {
    onSubmit(timeFrame)
  }

return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h3 className="text-sm font-medium text-[#001742]">Date Range</h3>
        <Select value={timeFrame} onValueChange={setTimeFrame}>
          <SelectTrigger className="w-full border-[#dee6f5]">
            <SelectValue placeholder="Select time frame" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="24 hours">Last 24 hours</SelectItem>
            <SelectItem value="7 days">Last 7 days</SelectItem>
            <SelectItem value="30 days">Last 30 days</SelectItem>
            <SelectItem value="custom">Custom range</SelectItem>
          </SelectContent>
        </Select>
      </div>

<Button
        onClick={handleSubmit}
        className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
      >
        Start Monitoring
      </Button>
    </div>
  )
}

export default function RERAFilingsPage() {
  // Initialize the workflow engine
  const [workflowEngine] = useState(() => new WorkflowEngine(workflowConfig))

// Selected options
  const [selectedTriggerTypes, setSelectedTriggerTypes] = useState<string[]>([])
  const [selectedEntities, setSelectedEntities] = useState<string[]>([])
  const [selectedTimeFrame, setSelectedTimeFrame] = useState<string>("")

// References
  const contentContainerRef = useRef<HTMLDivElement>(null)

// Handle trigger type and entity selection
  const handleTriggerAndEntitySelection = (types: string[], entities: string[]) => {
    setSelectedTriggerTypes(types)
    setSelectedEntities(entities)
    setCurrentStep(2) // Move to time frame selection step

// Add user message
    workflowEngine.addMessage(
      "user",
      `I'd like to monitor ${types.join(" and ")} for the following entities: ${entities.join(", ")}`,
    )

// Show time frame selection
    setTimeout(() => {
      const newId = workflowEngine.addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#001742]">
            Great! Now, let's set the time frame for monitoring these filings and mentions.
          </p>
        </div>,
        true,
      )

setActiveCustomizationId(newId)
      setMessages(workflowEngine.getMessages())
    }, 500)
  }

// Handle time frame selection
  const handleTimeFrameSelection = (timeFrame: string) => {
    setSelectedTimeFrame(timeFrame)
    setCurrentStep(3) // Move to processing step

// Add user message
    workflowEngine.addMessage("user", `I want to monitor for the last ${timeFrame}`)

// Show processing message
    workflowEngine.addLoadingMessage("Searching for RERA filings...")
    setMessages(workflowEngine.getMessages())

// Simulate processing steps
    setTimeout(() => {
      workflowEngine.updateLoadingMessage("Analyzing compliance status...")
      setMessages(workflowEngine.getMessages())

setTimeout(() => {
        workflowEngine.updateLoadingMessage("Compiling monitoring report...")
        setMessages(workflowEngine.getMessages())

setTimeout(() => {
          workflowEngine.removeLoadingMessage()
          showReportResults()
          setMessages(workflowEngine.getMessages())
        }, 1500)
      }, 1500)
    }, 1500)
  }

// Show report results
  const showReportResults = () => {
    setCurrentStep(4) // Move to results step
    setIsReportComplete(true)

// Clear active customization before showing the final result
    if (typeof workflowEngine.clearActiveCustomization === "function") {
      workflowEngine.clearActiveCustomization()
    } else {
      // Fallback: directly set the activeCustomizationId to null
      workflowEngine.activeCustomizationId = null
      console.log("Cleared active customization ID using fallback")
    }
    setActiveCustomizationId(null)

workflowEngine.addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#001742]">
          Your RERA filings monitoring report has been generated. Here's a summary of the findings:
        </p>

<RERAFilingsReport
          data={sampleRERAData}
          onRestart={() => {
            // Reset the workflow
            const initialMessages = workflowEngine.initialize()
            setMessages(initialMessages)
            setActiveCustomizationId(workflowEngine.getActiveCustomizationId())
            setCurrentStep(1)
            setIsReportComplete(false)
            setSelectedTriggerTypes([])
            setSelectedEntities([])
            setSelectedTimeFrame("")
          }}
        />
      </div>,
    )

setMessages(workflowEngine.getMessages())
  }

// Render customization content based on current step
  const renderCustomizationContent = () => {
    switch (currentStep) {
      case 1:
        return <TriggerTypeAndEntitySelector onSubmit={handleTriggerAndEntitySelection} />
      case 2:
        return <TimeFrameSelector onSubmit={handleTimeFrameSelection} />
      default:
        return null
    }
  }

return (
    <WorkflowLayout>
      <WorkflowHeader title="RERA Filings & Press Mentions" breadcrumbs={[{ label: "Workflows", href: "/" }]} />

// Simulate response
                setTimeout(() => {
                  workflowEngine.addMessage(
                    "system",
                    <div>
                      <p className="text-[#4e5971]">
                        I'd be happy to provide additional insights on the RERA filings. What specific information would
                        you like me to elaborate on?
                      </p>
                    </div>,
                  )
                  setMessages(workflowEngine.getMessages())
                }, 1000)
              }}
              placeholder="Ask a follow-up question about the RERA filings report..."
              fixed={true}
              contentContainerRef={contentContainerRef}
            />
          )}
        </>
      )}
    </WorkflowLayout>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/report/rera-filings-report.tsx" isEdit="true" isMerged="true"
"use client"

import { useRef } from "react"
import { Button } from "@/components/ui/button"
import { Download, RefreshCw } from "lucide-react"

interface RERAFilingsReportProps {
  data: {
    generatedDate: string
    triggerTypes: string[]
    entities: string[]
    filings: Array<{
      date: string
      entity: string
      type: string
      detail: string
      compliance: "on-time" | "delayed" | "breach"
      sourceLink: string
    }>
    detailedEntries: Array<{
      id: string
      entity: string
      type: string
      date: string
      title: string
      details: {
        filingDate?: string
        receivedDate?: string
        dueDate?: string
        section?: string
        compliance: "on-time" | "delayed" | "breach"
        project?: string
        originalHandoverDate?: string
        revisedHandoverDate?: string
        noticeIssued?: string
        reason?: string
        revisionType?: string
        filingType?: string
      }
      summary: string
      fullTextExcerpt: string
      sourcePDF: string
    }>
  }
  onRestart?: () => void
}

export function RERAFilingsReport({ data, onRestart }: RERAFilingsReportProps) {
  const pageRef = useRef<HTMLDivElement>(null)

const handleDownloadPDF = () => {
    alert("In a production environment, this would download a PDF of the RERA filings report.")
  }

return (
    <div className="max-w-[210mm] mx-auto">
      <div
        ref={pageRef}
        className="w-[210mm] mx-auto bg-white p-6 border rounded-lg shadow-sm relative"
        style={{ fontFamily: "Inter, sans-serif", borderColor: "#EAF0FC" }}
      >
        {/* Header */}
        <div className="mb-6">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-medium text-[#002673]">RERA Filings and Press Mentions</h1>
            <Button
              onClick={handleDownloadPDF}
              className="flex items-center gap-1 bg-[#004ce6] hover:bg-[#0040c9] text-white h-8 px-3 py-1"
              size="sm"
            >
              <Download className="h-3.5 w-3.5 mr-1" />
              Download PDF
            </Button>
          </div>
          <div className="mt-4 flex flex-wrap gap-3">
            {data.entities.map((entity, index) => (
              <span
                key={index}
                className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[#f0f7f7] text-[#2a5b5b]"
              >
                {entity}
              </span>
            ))}
          </div>
        </div>

{/* Summary Table */}
        <div className="mb-6">
          <div className="overflow-x-auto rounded-md border border-[#EAF0FC]">
            <table className="min-w-full">
              <thead>
                <tr className="bg-[#f8fafd]">
                  <th className="px-4 py-3 border-b border-[#EAF0FC] text-left text-[10px] font-semibold text-[#4e5971] uppercase tracking-wider whitespace-nowrap w-[80px]">
                    Date
                  </th>
                  <th className="px-4 py-3 border-b border-[#EAF0FC] text-left text-[10px] font-semibold text-[#4e5971] uppercase tracking-wider whitespace-nowrap w-[80px]">
                    Entity
                  </th>
                  <th className="px-4 py-3 border-b border-[#EAF0FC] text-left text-[10px] font-semibold text-[#4e5971] uppercase tracking-wider whitespace-nowrap w-[80px]">
                    Type
                  </th>
                  <th className="px-4 py-3 border-b border-[#EAF0FC] text-left text-[10px] font-semibold text-[#4e5971] uppercase tracking-wider w-auto">
                    Trigger Detail
                  </th>
                  <th className="px-4 py-3 border-b border-[#EAF0FC] text-left text-[10px] font-semibold text-[#4e5971] uppercase tracking-wider whitespace-nowrap w-[80px]">
                    Status
                  </th>
                  <th className="px-4 py-3 border-b border-[#EAF0FC] text-left text-[10px] font-semibold text-[#4e5971] uppercase tracking-wider whitespace-nowrap w-[70px]">
                    Source
                  </th>
                </tr>
              </thead>
              <tbody className="divide-y divide-[#EAF0FC]">
                {data.filings.map((filing, index) => (
                  <tr key={index} className="hover:bg-[#f8fafd]">
                    <td className="px-4 py-3 text-xs text-[#4e5971] whitespace-nowrap">{filing.date}</td>
                    <td className="px-4 py-3 text-xs font-medium text-[#002673] whitespace-nowrap">{filing.entity}</td>
                    <td className="px-4 py-3 text-xs text-[#4e5971] whitespace-nowrap">{filing.type}</td>
                    <td className="px-4 py-3 text-xs text-[#4e5971]">
                      <span className="font-medium">{filing.detail.split(":")[0]}:</span> {filing.detail.split(":")[1]}
                    </td>
                    <td className="px-4 py-3 text-xs whitespace-nowrap">
                      {filing.compliance === "on-time" && (
                        <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-green-100 text-green-800">
                          ✔ On-time
                        </span>
                      )}
                      {filing.compliance === "delayed" && (
                        <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-yellow-100 text-yellow-800">
                          ⚠ Delayed
                        </span>
                      )}
                      {filing.compliance === "breach" && (
                        <span className="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-800">
                          ❌ Breach
                        </span>
                      )}
                    </td>
                    <td className="px-4 py-3 text-xs whitespace-nowrap">
                      <a
                        href={filing.sourceLink}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="text-[#004ce6] hover:underline font-medium"
                      >
                        View PDF
                      </a>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

{/* Detailed Trigger Entries */}
        <div className="mb-10">
          <h2 className="text-xl font-medium text-[#002673] mb-4">Detailed Trigger Entries</h2>

{data.detailedEntries.map((entry, index) => (
            <div key={entry.id} className="mb-6 border border-[#EAF0FC] rounded-md overflow-hidden">
              <div className="bg-[#f8fafd] px-4 py-2 border-b border-[#EAF0FC]">
                <h3 className="font-medium text-[#002673] flex items-center justify-between">
                  <span>
                    {entry.entity} – {entry.type}
                  </span>
                  <span className="text-xs text-[#6e7b96]">{entry.date}</span>
                </h3>
              </div>
              <div className="p-4">
                <div className="grid grid-cols-2 gap-6 mb-4">
                  <div className="space-y-2">
                    {entry.details.project && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Project:</span>{" "}
                        <span className="text-[#002673]">{entry.details.project}</span>
                      </p>
                    )}
                    {entry.details.filingDate && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Filing Date:</span>{" "}
                        <span className="text-[#002673]">{entry.details.filingDate}</span>
                      </p>
                    )}
                    {entry.details.receivedDate && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Received:</span>{" "}
                        <span className="text-[#002673]">{entry.details.receivedDate}</span>
                      </p>
                    )}
                    {entry.details.dueDate && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Due Date:</span>{" "}
                        <span className="text-[#002673]">{entry.details.dueDate}</span>
                      </p>
                    )}
                    {entry.details.originalHandoverDate && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Original Handover Date:</span>{" "}
                        <span className="text-[#002673]">{entry.details.originalHandoverDate}</span>
                      </p>
                    )}
                    {entry.details.revisedHandoverDate && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Revised Handover Date:</span>{" "}
                        <span className="text-[#002673]">{entry.details.revisedHandoverDate}</span>
                      </p>
                    )}
                  </div>
                  <div className="space-y-2">
                    {entry.details.section && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Section:</span>{" "}
                        <span className="text-[#002673]">{entry.details.section}</span>
                      </p>
                    )}
                    {entry.details.filingType && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Filing Type:</span>{" "}
                        <span className="text-[#002673]">{entry.details.filingType}</span>
                      </p>
                    )}
                    {entry.details.revisionType && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Revision Type:</span>{" "}
                        <span className="text-[#002673]">{entry.details.revisionType}</span>
                      </p>
                    )}
                    {entry.details.noticeIssued && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Notice Issued:</span>{" "}
                        <span className="text-[#002673]">{entry.details.noticeIssued}</span>
                      </p>
                    )}
                    {entry.details.reason && (
                      <p className="text-xs">
                        <span className="font-medium text-[#4e5971]">Reason:</span>{" "}
                        <span className="text-[#002673]">{entry.details.reason}</span>
                      </p>
                    )}
                    <p className="text-xs">
                      <span className="font-medium text-[#4e5971]">Compliance:</span>{" "}
                      {entry.details.compliance === "on-time" && (
                        <span className="text-green-600 font-medium">On-time (✔)</span>
                      )}
                      {entry.details.compliance === "delayed" && (
                        <span className="text-yellow-600 font-medium">Delayed (⚠)</span>
                      )}
                      {entry.details.compliance === "breach" && (
                        <span className="text-red-600 font-medium">Breach (❌)</span>
                      )}
                    </p>
                  </div>
                </div>
                {entry.summary && (
                  <div className="mb-4 bg-[#f8fafd] p-3 rounded-md">
                    <p className="text-xs">
                      <span className="font-medium text-[#4e5971]">Summary:</span>{" "}
                      <span className="text-[#002673]">{entry.summary}</span>
                    </p>
                  </div>
                )}
                <div className="mb-4">
                  <p className="text-xs font-medium text-[#4e5971] mb-2">Full Text Excerpt:</p>
                  <div className="p-3 bg-[#f8fafd] border border-[#EAF0FC] rounded-md text-xs text-[#4e5971] italic">
                    {entry.fullTextExcerpt}
                  </div>
                </div>
                <div>
                  <p className="text-xs">
                    <span className="font-medium text-[#4e5971]">Source PDF:</span>{" "}
                    <a
                      href={entry.sourcePDF}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-[#004ce6] hover:underline font-medium"
                    >
                      Download
                    </a>
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>

{/* Footer */}
        <div className="border-t border-[#EAF0FC] pt-4 mt-8">
          <div className="flex justify-between items-center text-[10px] text-[#6e7b96]">
            <div>© 2025 Bynd Financial Research. All Rights Reserved.</div>
            <div>RERA Filings and Press Mentions | Generated: {data.generatedDate}</div>
          </div>
        </div>
      </div>

<div className="flex justify-start gap-2 mt-6 mb-8">
        {onRestart && (
          <Button onClick={onRestart} variant="outline" className="flex items-center gap-1" size="sm">
            <RefreshCw className="h-4 w-4" />
            New Monitoring
          </Button>
        )}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/workflow-layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
interface WorkflowLayoutProps {
  children: React.ReactNode
}

export function WorkflowLayout({ children }: WorkflowLayoutProps) {
  return <>{children}</>
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import Link from "next/link"
import { ArrowRight } from "lucide-react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Private Equity workflows data with materials required (stored but not displayed)
const privateEquityWorkflows = [
  {
    category: "Deal Sourcing & Initial Screening",
    workflows: [
      {
        name: "CIM Data Extraction & Screening",
        description:
          "Extract key financial and qualitative data from a Confidential Information Memorandum (CIM) to determine if a target meets initial investment criteria.",
        steps: 5,
        path: "/workflows/cim-data-extraction",
        materials: [
          "CIM (PDF or digital document)",
          "Historical financial data (embedded in the CIM)",
          "Industry benchmarks (optional external data)",
          "Screening criteria checklist (internal template)",
          "Excel or templated model for data input",
        ],
      },
      {
        name: "Market & Industry Research Pre-Screen",
        description:
          "Perform preliminary research to gauge industry trends and market conditions for sectors in which potential targets operate.",
        steps: 4,
        path: "/workflows/market-industry-research",
        materials: [
          "Industry reports/market analysis documents",
          "Public databases/financial data feeds (Bloomberg, Capital IQ)",
          "Screening template for market trends",
          "Digital research tools (web browser, news aggregator)",
        ],
      },
      {
        name: "Initial LBO Model Setup",
        description:
          "Build a basic Leveraged Buyout (LBO) model using extracted financial data to estimate potential returns and assess deal viability.",
        steps: 6,
        path: "/workflows/initial-lbo-model",
        materials: [
          "Historical financials (from CIM or extracted source)",
          "Standardized LBO model template (Excel)",
          "Assumptions list (debt/equity ratio, interest rates, exit multiples)",
          "Market comparables data",
          "Financial data terminal access (optional)",
        ],
      },
      {
        name: "Preliminary Investment Screening Memo",
        description:
          "Draft a one-page memo summarizing the target's key metrics, model outputs, and preliminary recommendation for further due diligence.",
        steps: 4,
        path: "/workflows/preliminary-investment-memo",
        materials: [
          "Output from the initial LBO model",
          "CIM summary points",
          "Internal screening criteria",
          "Word processing software or templated slide deck",
        ],
      },
    ],
  },
  {
    category: "Due Diligence Coordination",
    workflows: [
      {
        name: "Due Diligence Request Generation",
        description:
          "Create and send a standardized due diligence request list to target companies to collect missing or detailed data.",
        steps: 4,
        path: "/workflows/due-diligence-request",
        materials: [
          "Preliminary CIM and screening memo",
          "Due diligence checklist (template)",
          "Email or DMS (Document Management System) access",
          "Contact list for target company representatives",
        ],
      },
      {
        name: "Data Room Document Tracking",
        description:
          "Organize and log incoming documents from the target's secure data room, ensuring all required files are received and noted.",
        steps: 5,
        path: "/workflows/data-room-tracking",
        materials: [
          "Access to the virtual data room",
          "Checklist of required documents",
          "Spreadsheet or due diligence tracker tool",
          "Email system for coordinating follow-ups",
          "Internal notes on document status",
        ],
      },
      {
        name: "Financial Detail Extraction & Integration",
        description:
          "Extract detailed financial information from due diligence documents to update the existing LBO model and refine assumptions.",
        steps: 6,
        path: "/workflows/financial-detail-extraction",
        materials: [
          "Due diligence documents (detailed financials, Quality of Earnings report)",
          "Existing LBO model file",
          "Financial analysis software (Excel)",
          "Data extraction tool or manual input template",
          "Comparative market data (if available)",
        ],
      },
      {
        name: "Investment Committee Memo Drafting",
        description:
          "Consolidate findings from due diligence and modeling into a comprehensive memo for presentation to the investment committee.",
        steps: 5,
        path: "/workflows/investment-committee-memo",
        materials: [
          "Consolidated due diligence findings",
          "Updated LBO model summary outputs",
          "Internal memo template or slide deck",
          "Comments/feedback from team members",
          "Relevant charts/graphs (exported from Excel)",
        ],
      },
    ],
  },
  {
    category: "Portfolio Monitoring & Performance Tracking",
    workflows: [
      {
        name: "Monthly Financial Pack Consolidation",
        description:
          "Compile monthly financial reports from portfolio companies, updating internal trackers to assess performance against targets.",
        steps: 5,
        path: "/workflows/monthly-financial-pack",
        materials: [
          "Monthly financial reports (sent by portfolio companies)",
          "Excel or dashboard for tracking KPIs",
          "Benchmark and budget data",
          "Email/communication tool for follow-up",
          "Internal monitoring template",
        ],
      },
      {
        name: "KPI Variance Analysis",
        description:
          "Analyze deviations between actual performance and budget, identifying causes for variances and preparing a summary for internal review.",
        steps: 4,
        path: "/workflows/kpi-variance-analysis",
        materials: [
          "Updated financial pack data",
          "Pre-established variance analysis template",
          "Historical performance data",
          "Analytical tools (Excel pivot tables/graphs)",
        ],
      },
      {
        name: "Automated Valuation Update",
        description:
          "Update the valuation model for a portfolio company using the latest financials and market comparables to refresh investment value estimates.",
        steps: 5,
        path: "/workflows/automated-valuation-update",
        materials: [
          "Latest financial data from portfolio companies",
          "Current market multiples/industry comparables",
          "Valuation model template (Excel)",
          "Financial data terminal output (if available)",
          "Data update instructions or macro-enabled workbook",
        ],
      },
      {
        name: "Board Reporting Deck Preparation",
        description:
          "Generate a concise board presentation that highlights portfolio performance, key variance drivers, and strategic recommendations.",
        steps: 4,
        path: "/workflows/board-reporting-deck",
        materials: [
          "Consolidated KPI and valuation data",
          "PowerPoint template for board reports",
          "Summary commentary from the monitoring process",
          "Visual charts/graphs from Excel",
          "Internal strategic notes",
        ],
      },
    ],
  },
  {
    category: "Investor Reporting & Communication",
    workflows: [
      {
        name: "Fund Performance Calculation",
        description:
          "Aggregate individual portfolio data to compute overall fund performance indicators such as IRR, MOIC, and NAV.",
        steps: 5,
        path: "/workflows/fund-performance-calculation",
        materials: [
          "Individual portfolio valuations",
          "Capital call and distribution records",
          "Fund accounting data",
          "Excel model for IRR/MOIC calculations",
          "Data reconciliation checklist",
        ],
      },
      {
        name: "Investor Report Template Update",
        description:
          "Refresh a pre-designed investor report template with the latest performance metrics and narrative, ensuring accuracy and consistency.",
        steps: 4,
        path: "/workflows/investor-report-template",
        materials: [
          "Latest calculated fund performance data",
          "Investor report template (Word/PPT)",
          "Standard narrative sections for performance commentary",
          "Historical performance benchmarks",
          "Data integration from internal systems",
        ],
      },
      {
        name: "Narrative Commentary Drafting",
        description:
          "Generate a concise narrative summarizing the quarter's performance, deal updates, and market commentary for investors.",
        steps: 3,
        path: "/workflows/narrative-commentary",
        materials: [
          "Performance summary data",
          "Recent deal updates and notable events",
          "Internal guidance or a style template for tone",
          "Drafting tool (Word processor, AI language model assistance)",
        ],
      },
      {
        name: "Distribution & Compliance Check",
        description:
          "Verify and distribute the final investor report package to all Limited Partners (LPs), ensuring it meets regulatory compliance.",
        steps: 4,
        path: "/workflows/distribution-compliance",
        materials: [
          "Finalized investor report (PDF/Word)",
          "LP distribution list or CRM system",
          "Compliance checklist (formatting, disclosures, etc.)",
          "Email or secure document distribution system",
          "Tracking/log report output",
        ],
      },
    ],
  },
]

// Add the generalWorkflows data after the privateEquityWorkflows array
const generalWorkflows = [
  {
    category: "Document Processing & Data Extraction",
    workflows: [
      {
        name: "Screenshot Chart to Excel",
        description:
          "Upload a screenshot of any chart and convert it into an editable Excel chart, allowing you to edit it in the browser and integrate it into your reports.",
        steps: 3,
        path: "/workflows/screenshot-chart",
        materials: [
          "Uploaded Screenshot of Chart",
          "Chart Recognition & Conversion Engine (OCR to convert chart into data)",
          "Editable Excel Template (for inserting and editing the chart)",
          "Automated Excel Chart Integration (tools for smooth browser editing)",
        ],
      },
      {
        name: "Personalized Document Summary Generator",
        description:
          "Upload any document (e.g., report, financials, presentation) and get a personalized summary, allowing you to select specific sections of interest for extraction.",
        steps: 3,
        path: "/workflows/document-summary",
        materials: [
          "Uploaded Document (PDF, Word, or other formats)",
          "Preconfigured Section Templates (for user-defined summarization)",
          "AI-Based Natural Language Processing (NLP) Engine (to extract and summarize content based on preferences)",
        ],
      },
      {
        name: "Financial Statement Extraction from PDF to Excel",
        description:
          "Detect and extract the three key financial statements (Income Statement, Balance Sheet, Cash Flow) from an uploaded PDF and convert them into Excel format for further analysis.",
        steps: 4,
        path: "/workflows/financial-statement-extraction",
        materials: [
          "Uploaded PDF Document (with financial statements)",
          "AI-Driven Financial Statement Detection Engine (for auto-extraction)",
          "Excel Template for Financials (to place extracted data into relevant sheets)",
          "Automated Formula Application (for financial metrics like ratios, growth)",
        ],
      },
      {
        name: "Industry Sizing and Market Segmentation Report Generation",
        description:
          "Automate industry analysis by pulling data from DRHPs, Euromonitor, and news sources to generate segmented industry reports (e.g., pet care market segmentation).",
        steps: 4,
        path: "/workflows/industry-sizing",
        materials: [
          "Industry Reports (DRHP, Euromonitor)",
          "Automated Sizing Models",
          "Segment Breakdown Template",
          "NLP Extraction Engine",
          "Visualization & Dashboard Tools",
        ],
      },
    ],
  },
  {
    category: "Financial Analysis & Reporting",
    workflows: [
      {
        name: "Financial Statement Red Flag Detection in Excel",
        description:
          "Upload an Excel file containing financial statements and automatically detect any red flags or anomalies based on predefined financial analysis criteria.",
        steps: 3,
        path: "/workflows/red-flag-detection",
        materials: [
          "Uploaded Excel File with Financial Statements",
          "Predefined Red Flag Detection Criteria (e.g., abnormal ratios, negative growth)",
          "Automated Excel Formula Engine (for analysis and flagging)",
        ],
      },
      {
        name: "Due Diligence on Company Promoters",
        description:
          "Enter a company name to automatically generate a comprehensive due diligence report on the company's promoters, including background checks, financials, and public data analysis.",
        steps: 3,
        path: "/workflows/promoter-due-diligence",
        materials: [
          "Company Name Input",
          "Integrated Public Database Access (to gather promoter information)",
          "Preconfigured Due Diligence Template (for generating detailed reports)",
        ],
      },
      {
        name: "DRHP/IPO Document Screening",
        description:
          "Upload a DRHP (Draft Red Herring Prospectus) or IPO document, select the company name, and customize an IPO report based on predefined or user-selected criteria.",
        steps: 4,
        path: "/workflows/ipo-screening",
        materials: [
          "Uploaded DRHP/IPO Document",
          "Company Name Input (for automatic company identification)",
          "Preconfigured IPO Screening Template (to generate the IPO report)",
          "Customizable Report Criteria (user selects relevant sections for the report)",
        ],
      },
      {
        name: "Company One-Pagers – Strategic Summary Profiles",
        description:
          "Concise, standardized one-page summaries of companies covering key business details, product focus, financial performance, manufacturing footprint, and strategic transactions — for quick partner-level decision-making and opportunity assessment.",
        steps: 1,
        path: "/workflows/company-one-pager",
        materials: [
          "Company Name Input",
          "Automated Data Collection Engine",
          "Standardized Profile Template",
          "Financial Analysis Tools",
          "PDF Export Functionality",
        ],
      },
    ],
  },
  {
    category: "Data Extraction & Custom Reporting",
    workflows: [
      {
        name: "Custom Screener Memo from CIM Upload",
        description:
          "Upload a Confidential Information Memorandum (CIM), and automatically generate a customized screening memo in the output format of your choice.",
        steps: 4,
        path: "/workflows/cim-screener",
        materials: [
          "Uploaded CIM Document",
          "Preconfigured Screening Memo Template (with customizable outputs)",
          "AI-Driven Content Extraction Engine (to pull relevant data from CIM)",
          "User-Defined Output Format (e.g., PDF, Word, PowerPoint)",
        ],
      },
      {
        name: "Verifiable Metric Extraction from Document",
        description:
          "Upload any document and specify the metrics you wish to extract; get source-linked, verifiable metrics that can be used for further analysis or reporting.",
        steps: 4,
        path: "/workflows/metric-extraction",
        materials: [
          "Uploaded Document (PDF, Word, or other formats)",
          "User-Defined Metric Extraction Criteria (specific metrics or data points)",
          "AI-Powered Extraction Engine (to retrieve and verify data)",
          "Source-Linking & Verification Tools (to ensure extracted metrics are reliable)",
        ],
      },
      {
        name: "Peer Set Generation & Comparative Table Creation",
        description:
          "Enter a company name and automatically generate a peer set with a custom comparative table showing key financial metrics, valuations, and performance indicators.",
        steps: 3,
        path: "/workflows/peer-comparison",
        materials: [
          "Company Name Input",
          "Integrated Peer Group Data Feed (to identify comparable companies)",
          "Preconfigured Comparative Table Template (for financial metrics and performance comparison)",
          "User-Defined Customization Options (e.g., select specific financial metrics)",
        ],
      },
      {
        name: "RERA filings & press mentions",
        description:
          "Automatically consolidate and monitor critical regulatory disclosures (SEBI filings) and real-estate project filings (RERA)—along with press mentions—into a single, structured report. Flag on-time vs. delayed submissions, scope changes, and compliance breaches for your selected entities.",
        steps: 3,
        path: "/workflows/rera-filings",
        materials: [
          "Entity Selection Interface",
          "RERA & SEBI Database Access",
          "Compliance Monitoring Engine",
          "Structured Report Generator",
        ],
      },
      {
        name: "Quarterly Results Extractor",
        description:
          "Automatically pull the latest quarterly filings (SEBI/EDGAR or uploaded PDFs), extract key financial metrics and commentary, and deliver a ready-to-use Excel workbook—complete with calculations and management notes.",
        steps: 5,
        path: "/workflows/quarterly-results-extractor",
        materials: [
          "Company Selection Interface",
          "Auto-Fetch or Upload Option",
          "Metrics Selection Tool",
          "Excel Template Generator",
          "Management Commentary Extractor",
        ],
      },
    ],
  },
]

// Update the personaTabs array to include "General" as the first tab
const personaTabs = [
  { id: "general", name: "General" },
  { id: "private-equity", name: "Private Equity" },
  { id: "investment-banking", name: "Investment Banking" },
  { id: "corporate-finance", name: "Corporate Finance" },
  { id: "risk-management", name: "Risk Management" },
  { id: "equity-research", name: "Equity Research" },
  { id: "asset-management", name: "Asset Management" },
]

export default function Page() {
  return (
    <Tabs defaultValue="general" className="h-full flex flex-col">
      {/* Fixed tab header */}
      <div className="px-6 pt-6 pb-2">
        <TabsList className="bg-transparent p-0 h-auto flex gap-6 overflow-x-auto justify-start">
          {personaTabs.map((tab) => (
            <TabsTrigger
              key={tab.id}
              value={tab.id}
              className="px-4 py-2 rounded-md data-[state=active]:bg-[#f0f4fa] data-[state=active]:text-[#001742] text-[#6e7b96] hover:text-[#001742] transition-colors data-[state=active]:shadow-none"
            >
              {tab.name}
            </TabsTrigger>
          ))}
        </TabsList>
      </div>

{/* Scrollable content area */}
      <div className="flex-1 overflow-hidden">
        <TabsContent value="general" className="h-full m-0 data-[state=active]:border-0 overflow-auto scrollbar-hide">
          <div className="px-6 pb-6">
            <div className="space-y-8 mt-6">
              {generalWorkflows.map((category, index) => (
                <div key={index}>
                  <h2 className="mb-4 text-xl font-medium text-[#101828]">{category.category}</h2>
                  <div className="grid gap-6 md:grid-cols-2">
                    {category.workflows.map((workflow, wIndex) => (
                      <Link
                        key={wIndex}
                        href={workflow.path}
                        className="rounded-lg border border-[#e1e8f6] bg-[#FBFDFF] p-4 transition-colors hover:bg-white hover:shadow-sm"
                      >
                        <h3 className="text-base font-medium text-[#001742]">{workflow.name}</h3>
                        <p className="mt-2 text-sm text-[#6e7b96]">{workflow.description}</p>
                        {(() => {
                          if (
                            workflow.name === "Screenshot Chart to Excel" ||
                            workflow.name === "Financial Statement Extraction from PDF to Excel" ||
                            workflow.name === "Peer Set Generation & Comparative Table Creation"
                          ) {
                            return (
                              <div className="mt-2 flex items-center gap-1">
                                <div className="text-xs text-[#8098c4]">{workflow.steps} steps</div>
                                <ArrowRight className="h-3 w-3 text-[#8098c4] mx-1" />
                                <div className="flex items-center gap-1 bg-[#f2f4f7] rounded-md px-2 py-0.5">
                                  <img
                                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Frame%201000004581-qMr1tksNcWjItvl6u5fAyfEgFFjAQT.png"
                                    alt="Excel"
                                    className="w-3 h-4"
                                  />
                                  <span className="text-xs font-medium text-[#4e5971]">Excel</span>
                                </div>
                              </div>
                            )
                          } else {
                            return (
                              <div className="mt-2 flex items-center gap-1">
                                <div className="text-xs text-[#8098c4]">{workflow.steps} steps</div>
                                <ArrowRight className="h-3 w-3 text-[#8098c4] mx-1" />
                                <div className="flex items-center gap-1 bg-[#f2f4f7] rounded-md px-2 py-0.5">
                                  <img
                                    src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/PDF%20Icon-ymdgoZrxsua2O7fNTjvAQNa9lS4EZV.png"
                                    alt="PDF"
                                    className="w-3 h-4"
                                  />
                                  <span className="text-xs font-medium text-[#4e5971]">PDF</span>
                                </div>
                              </div>
                            )
                          }
                        })()}
                      </Link>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </TabsContent>
        <TabsContent
          value="private-equity"
          className="h-full m-0 data-[state=active]:border-0 overflow-auto scrollbar-hide"
        >
          <div className="px-6 pb-6">
            <div className="space-y-8 mt-6">
              {privateEquityWorkflows.map((category, index) => (
                <div key={index}>
                  <h2 className="mb-4 text-xl font-medium text-[#101828]">{category.category}</h2>
                  <div className="grid gap-6 md:grid-cols-2">
                    {category.workflows.map((workflow, wIndex) => (
                      <Link
                        key={wIndex}
                        href={workflow.path}
                        className="rounded-lg border border-[#e1e8f6] bg-[#FBFDFF] p-4 transition-colors hover:bg-white hover:shadow-sm"
                      >
                        <h3 className="text-base font-medium text-[#001742]">{workflow.name}</h3>
                        <p className="mt-2 text-sm text-[#6e7b96]">{workflow.description}</p>
                        <div className="mt-2 flex items-center gap-1">
                          <div className="text-xs text-[#8098c4]">{workflow.steps} steps</div>
                          <ArrowRight className="h-3 w-3 text-[#8098c4] mx-1" />
                          <div className="flex items-center gap-1 bg-[#f2f4f7] rounded-md px-2 py-0.5">
                            <img
                              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/PDF%20Icon-ymdgoZrxsua2O7fNTjvAQNa9lS4EZV.png"
                              alt="PDF"
                              className="w-3 h-4"
                            />
                            <span className="text-xs font-medium text-[#4e5971]">PDF</span>
                          </div>
                        </div>
                      </Link>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </TabsContent>

{/* Placeholder content for other personas */}
        {personaTabs.slice(1).map((tab) => (
          <TabsContent
            key={tab.id}
            value={tab.id}
            className="h-full m-0 data-[state=active]:border-0 overflow-auto scrollbar-hide"
          >
            <div className="px-6 pb-6">
              <div className="mt-6 text-center py-12 text-[#6e7b96]">
                <h3 className="text-lg font-medium text-[#001742] mb-2">{tab.name} Workflows</h3>
                <p>Content for {tab.name} will be added soon.</p>
              </div>
            </div>
          </TabsContent>
        ))}
      </div>
    </Tabs>
  )
}

// Add this CSS class at the end of the component
// This will be added to the globals.css file
// @layer utilities {
//   .scrollbar-hide {
//     -ms-overflow-style: none;
//     scrollbar-width: none;
//   }
//   .scrollbar-hide::-webkit-scrollbar {
//     display: none;
//   }
// }
[V0_FILE]typescriptreact:file="app/home/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
export default function HomeLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return children
}
[V0_FILE]typescriptreact:file="app/home/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef } from "react"
import { ArrowRight } from "lucide-react"

export default function HomePage() {
  const [inputValue, setInputValue] = useState("")
  const inputRef = useRef<HTMLInputElement>(null)

const suggestionCards = [
    { icon: "phone", title: "Transactional summary" },
    { icon: "chart", title: "Recent Industry developments" },
    { icon: "phone", title: "Transactional summary" },
    { icon: "chart", title: "Recent Industry developments" },
    { icon: "phone", title: "Transactional summary" },
    { icon: "chart", title: "Recent Industry developments" },
    { icon: "phone", title: "Transactional summary" },
    { icon: "chart", title: "Recent Industry developments" },
  ]

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Chat functionality would be implemented here
    // For now, just clear the input
    setInputValue("")
  }

return (
    <div className="flex flex-col h-full items-center justify-start pt-[140px] px-6">
      <h1 className="text-3xl font-medium text-[#001742] mb-10 text-center">Discover What Moves the Business</h1>

{/* Chat input area - styled to match Figma design with proper height */}
      <form onSubmit={handleSubmit} className="relative w-full max-w-2xl mb-10">
        <div className="relative h-[100px] rounded-lg border border-[#dee6f5] bg-white overflow-hidden">
          <textarea
            ref={inputRef}
            placeholder="Ask anything"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            className="absolute inset-0 w-full h-full px-4 py-4 text-base border-0 resize-none focus:outline-none focus:ring-0 text-[#001742] placeholder:text-[#9babc7]"
          />
          <button
            type="submit"
            className={`absolute right-3 bottom-3 rounded-full h-8 w-8 flex items-center justify-center ${
              inputValue.trim() ? "bg-[#004ce6]" : "bg-[#f2f6fe]"
            }`}
            disabled={!inputValue.trim()}
          >
            <ArrowRight className={`h-4 w-4 ${inputValue.trim() ? "text-white" : "text-[#9babc7]"}`} />
          </button>
        </div>
      </form>

{/* Suggestion cards - 2 columns grid layout */}
      <div className="grid grid-cols-2 gap-4 w-full max-w-2xl mx-auto">
        {suggestionCards.map((card, index) => (
          <button
            key={index}
            className="flex flex-col items-center p-5 rounded-lg border border-[#e1e8f6] bg-white hover:shadow-sm cursor-pointer transition-all"
            onClick={() => {
              setInputValue(card.title)
              if (inputRef.current) {
                inputRef.current.focus()
              }
            }}
          >
            <div className="mb-3">
              {card.icon === "phone" ? (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M14.5 6.5C15.2372 6.64382 15.9689 6.96892 16.5 7.5C17.0311 8.03108 17.3562 8.76284 17.5 9.5M15 3C16.5315 3.17014 17.9097 3.91107 19 5C20.0903 6.08893 20.8279 7.46869 21 9M20.9995 16.4767V19.1864C21.0037 20.2223 20.0723 21.0873 19.0265 20.9929C10.0001 21 3.00006 13.935 3.00713 4.96919C2.91294 3.92895 3.77364 3.00106 4.80817 3.00009H7.52331C7.96253 2.99577 8.38835 3.151 8.72138 3.43684C9.66819 4.24949 10.2772 7.00777 10.0429 8.10428C9.85994 8.96036 8.99696 9.55929 8.41026 10.1448C9.69864 12.4062 11.5747 14.2785 13.8405 15.5644C14.4272 14.9788 15.0274 14.1176 15.8851 13.935C16.9855 13.7008 19.7615 14.3106 20.5709 15.264C20.858 15.6021 21.0105 16.0337 20.9995 16.4767Z"
                    stroke="#004ce6"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              ) : (
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7 15L12 10L17 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
                    stroke="#004ce6"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
              )}
            </div>
            <span className="text-[#001742] font-medium text-center">{card.title}</span>
          </button>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/report-generation/page.tsx" isEdit="true" isMerged="true"
export default function ReportGenerationPage() {
  return (
    <div className="flex flex-col items-center justify-center h-full p-8">
      <h1 className="text-3xl font-bold mb-4 text-[#001742]">Report Generation</h1>
      <p className="text-lg text-[#4e5971] text-center max-w-2xl">
        This feature is coming soon. Report Generation will allow you to create customized financial reports.
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/alerts/page.tsx" isEdit="true" isMerged="true"
export default function AlertsPage() {
  return (
    <div className="flex flex-col items-center justify-center h-full p-8">
      <h1 className="text-3xl font-bold mb-4 text-[#001742]">Alerts</h1>
      <p className="text-lg text-[#4e5971] text-center max-w-2xl">
        This feature is coming soon. Alerts will notify you about important financial events and changes.
      </p>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/peer-comparison/page.tsx" isMerged="true"
import { AlertCircle } from "lucide-react"

export default function PeerComparisonPage() {
  return (
    <div className="flex flex-col items-center justify-center h-full p-8">
      <div className="flex flex-col items-center justify-center max-w-md text-center">
        <AlertCircle className="h-12 w-12 text-[#004ce6] mb-4" />
        <h1 className="text-2xl font-bold text-[#1a2b4b] mb-2">Peer Comparison Coming Soon</h1>
        <p className="text-[#4e5971] mb-6">
          We're working on building powerful peer comparison tools to help you analyze and benchmark against industry
          competitors.
        </p>
        <div className="w-full h-2 bg-[#e6edf9] rounded-full overflow-hidden">
          <div className="h-full bg-[#004ce6] rounded-full w-3/4"></div>
        </div>
        <p className="text-sm text-[#97abd1] mt-2">Development in progress: 75%</p>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/peer-comparison/loading.tsx" isMerged="true"
export default function PeerComparisonLoading() {
  return (
    <div className="flex items-center justify-center h-full">
      <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-[#004ce6]"></div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/document-intelligence/loading.tsx" isMerged="true"
import { DocumentIntelligenceLayout } from "@/components/document-intelligence/document-intelligence-layout"

export default function Loading() {
  return (
    <DocumentIntelligenceLayout>
      <div className="flex flex-col items-center justify-center h-full">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#004ce6]"></div>
        <p className="mt-4 text-[#4e5971]">Loading document intelligence...</p>
      </div>
    </DocumentIntelligenceLayout>
  )
}
[V0_FILE]png:file="public/document-covers/zomato-annual-report.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/document-covers/zomato-annual-report-wdiZky23OOkFN94XirNpzPZYyvF7Zb.png" isMerged="true"
[V0_FILE]png:file="public/document-covers/swiggy-drhp.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/document-covers/swiggy-drhp-ubdiXWK4X3HqVjFOAoNEIp4OTgEhV7.png" isMerged="true"
[V0_FILE]png:file="public/document-covers/mckinsey-food-delivery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/document-covers/mckinsey-food-delivery-UJLoUC8mttwKpLcPAtMyIfTyPEo3HI.png" isMerged="true"
[V0_FILE]png:file="public/document-covers/zomato-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/document-covers/zomato-logo-L1uYmgPEfIfpF3gOgDc7jPJoMQc5w8.png" isMerged="true"
[V0_FILE]png:file="public/abstract-geometric-shapes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/abstract-geometric-shapes-sUE5R8SURiS0JAVLKZSgt58oSNZSJI.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/document-intelligence/page.tsx" isEdit="true" isMerged="true"
import { DocumentTabs } from "@/components/document-intelligence/document-tabs"
import { DocumentSearch } from "@/components/document-intelligence/document-search"
import { DocumentIntelligenceLayout } from "@/components/document-intelligence/document-intelligence-layout"

export default function DocumentIntelligencePage() {
  return (
    <DocumentIntelligenceLayout>
      <DocumentTabs activeTab="discover" />
      <DocumentSearch />
    </DocumentIntelligenceLayout>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    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))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  plugins: [],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/document-intelligence/document-category-tabs.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { cn } from "@/lib/utils"

export type CategoryTab = {
  id: string
  label: string
  count?: number
  icon?: React.ReactNode
}

interface DocumentCategoryTabsProps {
  tabs: CategoryTab[]
  activeTab: string
  isSearching: boolean
  onTabChange: (tabId: string) => void
  className?: string
}

export function DocumentCategoryTabs({
  tabs,
  activeTab,
  isSearching,
  onTabChange,
  className,
}: DocumentCategoryTabsProps) {
  return (
    <div className={cn("flex space-x-2 overflow-x-auto scrollbar-hide", className)}>
      {tabs.map((tab) => {
        const isActive = activeTab === tab.id
        const showCount = isSearching && tab.count !== undefined && tab.id !== "recommendation"

// Hide recommendation tab during search
        if (isSearching && tab.id === "recommendation") {
          return null
        }

return (
          <button
            key={tab.id}
            onClick={() => onTabChange(tab.id)}
            className={cn(
              "flex items-center px-4 py-2 rounded-[6px] border transition-colors",
              isActive
                ? "bg-white border-[#EAF0FC] text-black border-t border-l border-r border-b-0 relative" // Selected state
                : "bg-transparent border-[#EAF0FC] text-[#9BABC7]", // Inactive state
            )}
          >
            {tab.icon && <span className="mr-2">{tab.icon}</span>}
            <span className="whitespace-nowrap">{tab.label}</span>

{/* Count indicator for search results */}
            {showCount && (
              <span className={cn("ml-2 text-xs px-2 py-0.5 rounded-full bg-[#e82618] text-white font-medium")}>
                {tab.count}
              </span>
            )}

{/* Bottom border extension for active tab */}
            {isActive && <div className="absolute bottom-[-1px] left-0 right-0 h-[1px] bg-white"></div>}
          </button>
        )
      })}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/customization-box.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import { Card, CardContent } from "@/components/ui/card"

interface CustomizationBoxProps {
  children: React.ReactNode
}

export function CustomizationBox({ children }: CustomizationBoxProps) {
  return (
    <Card className="mt-4 border-[#EAF0FC]">
      <CardContent className="p-4">{children}</CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/workflow/chat-input.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useState } from "react"

interface ChatInputProps {
  onSend: (message: string) => void
  placeholder?: string
  fixed?: boolean
  contentContainerRef?: React.RefObject<HTMLDivElement>
}

export function ChatInput({
  onSend,
  placeholder = "Type a message...",
  fixed = false,
  contentContainerRef,
}: ChatInputProps) {
  const [inputValue, setValue] = useState("")

const handleSend = () => {
    if (inputValue.trim()) {
      onSend(inputValue)
      setValue("")
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter" && !e.shiftKey) {
      e.preventDefault()
      handleSend()
    }
  }

if (fixed) {
    return (
      <div
        className="fixed bottom-0 z-50 pb-4 pointer-events-none"
        style={{
          left: contentContainerRef?.current ? `${contentContainerRef.current.getBoundingClientRect().left}px` : "0px",
          width: contentContainerRef?.current ? `${contentContainerRef.current.offsetWidth}px` : "100%",
          maxWidth: "100%",
        }}
      >
        <div className="pointer-events-auto">
          <div className="relative rounded-lg border border-[#EAF0FC] bg-white overflow-hidden h-[100px] shadow-lg">
            <textarea
              placeholder={placeholder}
              className="w-full h-full px-4 py-3 text-[#4e5971] focus:outline-none resize-none"
              value={inputValue}
              onChange={(e) => setValue(e.target.value)}
              onKeyDown={handleKeyDown}
            />
            <button
              id="customization-button"
              className={`absolute right-4 bottom-4 h-8 w-8 rounded-full flex items-center justify-center transition-colors ${
                inputValue.trim() ? "bg-[#004ce6] text-white" : "bg-[#f2f6fe] text-[#9babc7]"
              }`}
              disabled={!inputValue.trim()}
              onClick={handleSend}
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M5 12H19M19 12L12 5M19 12L12 19"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    )
  }

return (
    <div className="border-t bg-white p-4">
      <div className="mx-auto max-w-3xl">
        <div className="flex items-center gap-2">
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setValue(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            className="flex-1 rounded-md border border-[#EAF0FC] bg-white px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#004ce6]"
          />
          <button
            type="button"
            disabled={!inputValue.trim()}
            onClick={handleSend}
            className="rounded-md bg-[#004ce6] p-2 text-white hover:bg-[#0047cb] disabled:opacity-50"
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M5 12H19M19 12L12 5M19 12L12 19"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/layout/sidebar-navigation.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { AlertCircle, BarChart2, FileText, Home, LayoutDashboard, Plus, Settings } from "lucide-react"

import { Button } from "@/components/ui/button"

export function SidebarNavigation() {
  const pathname = usePathname()

// Define navigation items
  const navigationItems = [
    {
      name: "Home",
      href: "/home",
      icon: Home,
      enabled: true,
    },
    {
      name: "Document Intelligence",
      href: "/document-intelligence",
      icon: FileText,
      enabled: true, // Now enabled
    },
    {
      name: "Report Generation",
      href: "/report-generation",
      icon: FileText,
      enabled: false,
    },
    {
      name: "Alerts",
      href: "/alerts",
      icon: AlertCircle,
      enabled: false,
    },
    {
      name: "Peer Comparison",
      href: "/peer-comparison",
      icon: BarChart2,
      enabled: false,
    },
    {
      name: "Workflows",
      href: "/",
      icon: LayoutDashboard,
      enabled: true,
    },
  ]

return (
    <div className="w-60 flex flex-col h-full">
      {/* Logo in the sidebar */}
      <div className="flex h-14 items-center px-4">
        <Link href="/" className="flex items-center">
          <img
            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-WevD5CRwfUIoFQ2thWCC8TAuhncaYm.png"
            alt="Bynd Logo"
            width={80}
            height={24}
          />
        </Link>
      </div>
      <div className="p-4">
        <Button variant="outline" className="w-full justify-start gap-2 border-[#EAF0FC] text-[#004ce6]">
          <Plus className="h-4 w-4" />
          <span className="font-medium">New chat</span>
        </Button>
      </div>
      <nav className="space-y-1 px-2">
        {navigationItems.map((item) => {
          const isActive =
            (item.href === "/" && pathname === "/") || (item.href !== "/" && pathname.startsWith(item.href))

return (
            <Link
              key={item.name}
              href={item.enabled ? item.href : "#"}
              className={`flex items-center gap-2 rounded-md px-3 py-2 text-sm ${
                isActive ? "bg-white font-medium text-[#004ce6] shadow-sm" : "text-[#97abd1] hover:bg-[#f4f9ff]"
              } ${!item.enabled ? "opacity-60 cursor-not-allowed" : ""}`}
              style={isActive ? { boxShadow: "0 2px 4px rgba(0, 76, 230, 0.1)" } : {}}
              onClick={!item.enabled ? (e) => e.preventDefault() : undefined}
            >
              <item.icon className="h-4 w-4" />
              {item.name}
            </Link>
          )
        })}
      </nav>
      <div className="mt-6 px-4 flex-1 overflow-y-auto">
        <h3 className="mb-2 text-sm font-medium text-[#4e5971]">Recent chats</h3>
        <div className="space-y-1">
          <Link href="#" className="block rounded-md px-3 py-2 text-sm text-[#97abd1] hover:bg-[#f4f9ff]">
            Global expansion feasability
          </Link>
          <Link href="#" className="block rounded-md px-3 py-2 text-sm text-[#97abd1] hover:bg-[#f4f9ff]">
            Pharma research
          </Link>
          <Link href="#" className="block rounded-md px-3 py-2 text-sm text-[#97abd1] hover:bg-[#f4f9ff]">
            Quick commerce Quarterly update
          </Link>
        </div>
      </div>

{/* User profile at bottom */}
      <div className="border-t p-4 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="h-8 w-8 rounded-full bg-[#e6edf9] overflow-hidden">
            <img src="/mystical-forest-spirit.png" alt="User avatar" />
          </div>
          <span className="text-sm font-medium text-[#4e5971]">Ishan Patel</span>
        </div>
        <Button variant="ghost" size="icon" className="h-8 w-8 text-[#8098c4]">
          <Settings className="h-4 w-4" />
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/banking-presentation-cover.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/banking-presentation-cover-MuIfj1Cyy9EZtnD2lh4B15RzKYh6ZK.png" isMerged="true"
[V0_FILE]png:file="public/automotive-credit-report.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/automotive-credit-report-f1JexqI5pnJA6tmlFJ6WXHeoR3qCub.png" isMerged="true"
[V0_FILE]png:file="public/energy-sustainability-report.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/energy-sustainability-report-I3ZZ5hJqXZfcMC8TCSEp5g5gQTEGa6.png" isMerged="true"
[V0_FILE]png:file="public/digital-payments-research.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/digital-payments-research-bx08JDmRCzRCd4JdrWOXJv2fDBr4Sb.png" isMerged="true"
[V0_FILE]png:file="public/pharmaceutical-industry-report.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pharmaceutical-industry-report-kTnc0sZPeTDQyyKIMaNYvlNLmd22Um.png" isMerged="true"
[V0_FILE]png:file="public/central-bank-news.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/central-bank-news-jpORbKYzRvcjeTBWg2vBUOymXfuskg.png" isMerged="true"
[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

--primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;

--radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

--primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

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

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

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

.document-card:hover .preview-button {
    opacity: 1;
  }

.preview-button {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }
}
[V0_FILE]png:file="public/global-commerce.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/global-commerce-bJevx5SIE37jkWqEqSOb6dcJONNfDK.png" isMerged="true"
[V0_FILE]png:file="public/package-delivery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/package-delivery-tbqSxdVnL4gJLp96mpWgwCtaxM6Sea.png" isMerged="true"
[V0_FILE]png:file="public/colorful-grocery-aisle.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/colorful-grocery-aisle-l1M82Wusl8BF8h6yGUOh30aqD9ylVd.png" isMerged="true"
[V0_FILE]png:file="public/pharma-research-lab.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pharma-research-lab-jserwX8MGW1j5AtpqVqvQOQZRE9tww.png" isMerged="true"
[V0_FILE]png:file="public/healthcare-abstract.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/healthcare-abstract-s72YftENT3PXH09QchiBgP5mfH7h51.png" isMerged="true"
[V0_FILE]png:file="public/biotech-research.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/biotech-research-IRFJq73lCTp6qipbVfopwOSmt5i3uR.png" isMerged="true"
[V0_FILE]png:file="public/vaccine-vial.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vaccine-vial-5RmS6re9yO3Ypn3CdoKiITeJ5rYpdm.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/document-intelligence/document-preview-modal.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { X, Check } from "lucide-react"
import Image from "next/image"

interface DocumentPreviewModalProps {
  isOpen: boolean
  onClose: () => void
  document: {
    id: string
    title: string
    imageUrl: string
  } | null
}

export function DocumentPreviewModal({ isOpen, onClose, document }: DocumentPreviewModalProps) {
  const [isSelected, setIsSelected] = useState(false)

if (!isOpen || !document) return null

// Sample tags for the document
  const tags = [
    "Blinkit expansion",
    "Quick commerce",
    "Annual report",
    "Quick commerce",
    "Blinkit expansion",
    "Quick commerce",
    "Annual report",
    "Blinkit expansion",
  ]

// Sample document sections
  const documentSections = [
    {
      title: "Corporate Performance Summary",
      subsections: ["Report Introduction Highlights", "Business Segment Performance", "Food Delivery Analysis"],
    },
    {
      title: "ESG Performance Overview",
      subsections: [
        "ESG Initiatives",
        "Consolidated Profit & Loss Statement",
        "Company Overview",
        "Adjusted Financial Metrics",
        "Board Governance Report",
        "Consolidated Profit & Loss Statement",
        "Company Overview",
        "Adjusted Financial Metrics",
      ],
    },
    {
      title: "Governance and Board Reports",
      subsections: [
        "Company Overview Governance",
        "Consolidated Profit & Loss Statement",
        "Adjusted Financial Metrics",
      ],
    },
    {
      title: "Sustainability Reporting Disclosures",
      subsections: [
        "Report Introduction Highlights",
        "Business Segment Performance",
        "Consolidated Profit & Loss Statement",
        "ESG Initiatives",
        "Company Overview",
        "Adjusted Financial Metrics",
        "Board Governance Report",
      ],
    },
  ]

return (
    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-lg w-full max-w-6xl max-h-[90vh] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b">
          <div className="flex items-center">
            <div
              className={`w-6 h-6 rounded flex items-center justify-center mr-3 cursor-pointer ${
                isSelected ? "bg-[#004ce6]" : "border border-gray-300"
              }`}
              onClick={() => setIsSelected(!isSelected)}
            >
              {isSelected && <Check className="h-4 w-4 text-white" />}
            </div>
            <h2 className="text-xl font-medium">{document.title}</h2>
          </div>
          <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
            <X className="h-6 w-6" />
          </button>
        </div>

{/* Content */}
        <div className="flex flex-1 overflow-hidden">
          {/* Document preview */}
          <div className="w-1/2 border-r overflow-y-auto p-4">
            <div className="bg-white rounded-lg overflow-hidden">
              {/* Sample document preview */}
              <div className="mb-4">
                <Image
                  src="/document-covers/zomato-annual-report.png"
                  alt={document.title}
                  width={600}
                  height={800}
                  className="w-full object-contain"
                />
              </div>
              <div className="p-6 border-t">
                <div className="mb-8">
                  <h3 className="text-lg font-bold uppercase text-red-600 mb-4">OUR MISSION STATEMENT</h3>
                  <p className="text-gray-700">
                    To create a world where everyone has access to good food, delivered quickly and reliably.
                  </p>
                </div>
                <div className="mb-8">
                  <h3 className="text-lg font-bold mb-4">Executive Summary</h3>
                  <p className="text-gray-700 mb-4">
                    Zomato has continued to expand its operations across India, with significant growth in both food
                    delivery and quick commerce segments. The acquisition and integration of Blinkit has been a key
                    strategic focus this year.
                  </p>
                  <p className="text-gray-700">
                    Our financial performance shows strong revenue growth, with improving unit economics across all
                    business segments.
                  </p>
                </div>
              </div>
            </div>
          </div>

{/* Document metadata */}
          <div className="w-1/2 overflow-y-auto p-6">
            {/* Tags */}
            <div className="mb-8">
              <div className="flex flex-wrap gap-2">
                {tags.map((tag, index) => (
                  <span key={index} className="bg-gray-100 text-gray-700 px-3 py-1 rounded-md text-sm">
                    {tag}
                  </span>
                ))}
              </div>
            </div>

{/* Document sections */}
            <div>
              {documentSections.map((section, index) => (
                <div key={index} className="mb-6">
                  <h3 className="text-lg font-medium text-[#001742] mb-2">{section.title}</h3>
                  <ul className="space-y-2 pl-6">
                    {section.subsections.map((subsection, subIndex) => (
                      <li key={subIndex} className="text-gray-600">
                        {subsection}
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/document-card.tsx" isEdit="true" isMerged="true"
"use client"
import { useState } from "react"
import Image from "next/image"
import { Eye } from "lucide-react"
import { DocumentPreviewModal } from "./document-preview-modal"

export interface DocumentCardProps {
  id: string
  title: string
  description: string
  date: string
  imageUrl: string
}

export function DocumentCard({ id, title, description, date, imageUrl }: DocumentCardProps) {
  const [showPreviewModal, setShowPreviewModal] = useState(false)

return (
    <>
      <div className="bg-white border border-[#EAF0FC] rounded-lg overflow-hidden p-4 relative group">
        <div className="flex items-start gap-3">
          <div className="w-12 h-12 rounded-md overflow-hidden flex-shrink-0">
            <Image
              src={imageUrl || "/placeholder.svg"}
              alt={title}
              width={48}
              height={48}
              className="object-cover w-full h-full"
            />
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-[#001742] font-medium text-base mb-1">{title}</h3>
            <p className="text-gray-600 text-sm mb-2 line-clamp-2">{description}</p>
            <div className="text-gray-500 text-sm">{date}</div>
          </div>
        </div>

{/* Preview button - visible on hover */}
        <button
          className="absolute bottom-2 right-2 bg-white border border-gray-200 rounded-md px-2 py-1 text-xs flex items-center gap-1 text-gray-600 hover:bg-gray-50 opacity-0 group-hover:opacity-100 transition-opacity"
          onClick={() => setShowPreviewModal(true)}
        >
          <Eye className="h-3 w-3" />
          Preview
        </button>
      </div>

{/* Document Preview Modal */}
      <DocumentPreviewModal
        isOpen={showPreviewModal}
        onClose={() => setShowPreviewModal(false)}
        document={{ id, title, imageUrl }}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/document-category.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { DocumentCard, type DocumentCardProps } from "./document-card"

interface DocumentCategoryProps {
  title: string
  documents: DocumentCardProps[]
}

export function DocumentCategory({ title, documents }: DocumentCategoryProps) {
  return (
    <div className="space-y-4">
      <h2 className="text-2xl font-bold text-[#001742] mb-4">{title}</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
        {documents.map((doc) => (
          <DocumentCard key={doc.id} {...doc} />
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/your-projects.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Image from "next/image"
import { DocumentPreviewModal } from "./document-preview-modal"

// Project interface
interface Project {
  id: string
  name: string
  description: string
  documents: number
  lastUpdated: string
  coverImage: string
}

// Sample projects data
const projects: Project[] = [
  {
    id: "1",
    name: "Quick Commerce Research",
    description: "Research on the quick commerce industry in India",
    documents: 12,
    lastUpdated: "2 days ago",
    coverImage: "/document-covers/zomato-annual-report.png",
  },
  {
    id: "2",
    name: "Pharmaceutical Industry Analysis",
    description: "Analysis of the pharmaceutical industry in India",
    documents: 8,
    lastUpdated: "1 week ago",
    coverImage: "/pharma-research-lab.png",
  },
  {
    id: "3",
    name: "Financial Markets Overview",
    description: "Overview of the financial markets in India",
    documents: 15,
    lastUpdated: "3 days ago",
    coverImage: "/banking-presentation-cover.png",
  },
  {
    id: "4",
    name: "Real Estate Market Research",
    description: "Research on the real estate market in India",
    documents: 6,
    lastUpdated: "2 weeks ago",
    coverImage: "/healthcare-abstract.png",
  },
]

export function YourProjects() {
  const [searchQuery, setSearchQuery] = useState("")
  const [previewDocument, setPreviewDocument] = useState<{
    id: string
    title: string
    imageUrl: string
  } | null>(null)

// Filter projects based on search query
  const filteredProjects = projects.filter(
    (project) =>
      project.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      project.description.toLowerCase().includes(searchQuery.toLowerCase()),
  )

return (
    <div className="h-full p-6">
      {/* Search input */}
      <div className="mb-6">
        <input
          type="text"
          placeholder="Search projects..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full p-4 rounded-lg border border-[#EAF0FC] focus:outline-none focus:ring-2 focus:ring-[#004ce6]"
        />
      </div>

{/* Projects grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* New project card */}
        <div className="bg-white border border-dashed border-[#EAF0FC] rounded-lg p-6 flex flex-col items-center justify-center h-64 hover:border-[#004ce6] transition-colors cursor-pointer">
          <div className="w-12 h-12 rounded-full bg-[#EAF0FC] flex items-center justify-center mb-4">
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="text-[#004ce6]"
            >
              <path
                d="M12 5V19M5 12H19"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
          <h3 className="text-lg font-medium text-[#001742] mb-2">Create new project</h3>
          <p className="text-sm text-gray-500 text-center">Start a new research project</p>
        </div>

{/* Project cards */}
        {filteredProjects.map((project) => (
          <div
            key={project.id}
            className="bg-white border border-[#EAF0FC] rounded-lg overflow-hidden hover:shadow-md transition-shadow"
          >
            <div className="h-32 relative">
              <Image src={project.coverImage || "/placeholder.svg"} alt={project.name} fill className="object-cover" />
              <div className="absolute inset-0 bg-black bg-opacity-20"></div>
            </div>
            <div className="p-4">
              <h3 className="text-lg font-medium text-[#001742] mb-1">{project.name}</h3>
              <p className="text-sm text-gray-500 mb-3 line-clamp-2">{project.description}</p>
              <div className="flex justify-between items-center text-xs text-gray-400">
                <span>{project.documents} documents</span>
                <span>Updated {project.lastUpdated}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      {/* Document Preview Modal */}
      <DocumentPreviewModal
        isOpen={previewDocument !== null}
        onClose={() => setPreviewDocument(null)}
        document={previewDocument}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type { Metadata } from "next"
import type React from "react"
import { Inter } from "next/font/google"

import { SidebarNavigation } from "@/components/layout/sidebar-navigation"
import { ThemeProvider } from "@/components/theme-provider"
import "./globals.css"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "Bynd Workflows",
  description: "Financial workflows and analysis tools",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
          <div className="flex h-screen overflow-hidden bg-[#F4F9FF]">
            {/* Universal Sidebar Navigation */}
            <SidebarNavigation />

{/* Main content - fixed container with scrollable content */}
            <div className="flex-1 p-4 overflow-hidden bg-[#F4F9FF]">
              <div
                className="h-full rounded-lg bg-[#FAFCFF] flex flex-col"
                style={{
                  boxShadow: "-1px -2px 8px 0px rgba(0, 76, 230, 0.03), 1px 2px 8px 0px rgba(0, 76, 230, 0.03)",
                  borderRadius: "12px",
                }}
              >
                {children}
              </div>
            </div>
          </div>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/document-intelligence-layout.tsx" isEdit="true" isMerged="true"
import type React from "react"

interface DocumentIntelligenceLayoutProps {
  children: React.ReactNode
}

export function DocumentIntelligenceLayout({ children }: DocumentIntelligenceLayoutProps) {
  return (
    <div className="flex flex-col min-h-screen">
      <main
        className="flex-1 flex flex-col pt-6 px-[104px] overflow-y-auto rounded-xl"
        style={{
          backgroundColor: "#FAFCFF",
          boxShadow: "-1px -2px 8px 0px rgba(0, 76, 230, 0.03), 1px 2px 8px 0px rgba(0, 76, 230, 0.03)",
        }}
      >
        {children}
      </main>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/explore-documents.tsx" isEdit="true" isMerged="true"
"use client"

import { DocumentSearch } from "./document-search"
import { DocumentCategory } from "./document-category"
import { DocumentPreviewModal } from "./document-preview-modal"
import { useState } from "react"

// Sample document data
const commerceReports = [
  {
    id: "1",
    title: "Zomato Annual Reports FY23",
    description: "Annual financial report with key metrics and insights",
    date: "12 Feb",
    imageUrl: "/document-covers/zomato-annual-report.png",
  },
  {
    id: "2",
    title: "Swiggy DRHP FY23",
    description: "Draft Red Herring Prospectus for Swiggy's IPO",
    date: "12 Feb",
    imageUrl: "/document-covers/swiggy-drhp.png",
  },
  {
    id: "3",
    title: "Blinkit Market Analysis 2024",
    description: "Comprehensive analysis of Blinkit's market position and growth",
    date: "15 Mar",
    imageUrl: "/document-covers/mckinsey-food-delivery.png",
  },
  {
    id: "4",
    title: "Zepto Investor Presentation Q1",
    description: "Quarterly presentation for investors highlighting growth metrics",
    date: "5 Apr",
    imageUrl: "/banking-presentation-cover.png",
  },
  {
    id: "5",
    title: "Quick Commerce Industry Outlook",
    description: "Future trends and projections for the quick commerce sector",
    date: "20 Feb",
    imageUrl: "/global-commerce.png",
  },
  {
    id: "6",
    title: "BigBasket Now Performance Review",
    description: "Operational and financial performance analysis of BigBasket Now",
    date: "8 Mar",
    imageUrl: "/automotive-credit-report.png",
  },
  {
    id: "7",
    title: "Dunzo Business Model",
    description: "Financial and operational analysis of Dunzo",
    date: "2 Feb",
    imageUrl: "/package-delivery.png",
  },
  {
    id: "8",
    title: "Instamart Strategy",
    description: "Strategic expansion plans for Instamart",
    date: "18 Mar",
    imageUrl: "/colorful-grocery-aisle.png",
  },
]

const pharmaReports = [
  {
    id: "9",
    title: "Sun Pharma Annual Report 2023",
    description: "Comprehensive annual report of Sun Pharmaceutical Industries",
    date: "5 Feb",
    imageUrl: "/pharma-research-lab.png",
  },
  {
    id: "10",
    title: "Cipla Investor Presentation Q1 2024",
    description: "Quarterly presentation highlighting Cipla's performance and outlook",
    date: "8 Apr",
    imageUrl: "/healthcare-abstract.png",
  },
  {
    id: "11",
    title: "Dr. Reddy's Quarterly Results Q4",
    description: "Financial performance and business highlights for Dr. Reddy's Labs",
    date: "15 Mar",
    imageUrl: "/energy-sustainability-report.png",
  },
  {
    id: "12",
    title: "Indian Pharmaceutical Market Analysis",
    description: "In-depth analysis of the Indian pharmaceutical industry",
    date: "12 Mar",
    imageUrl: "/digital-payments-research.png",
  },
  {
    id: "13",
    title: "API Manufacturing Trends 2024",
    description: "Current trends and future outlook for API manufacturing",
    date: "20 Feb",
    imageUrl: "/pharmaceutical-industry-report.png",
  },
  {
    id: "14",
    title: "Pharmaceutical Regulatory Landscape",
    description: "Overview of regulatory changes affecting the pharmaceutical industry",
    date: "2 Feb",
    imageUrl: "/central-bank-news.png",
  },
  {
    id: "15",
    title: "Biocon Market Analysis",
    description: "Market positioning and growth outlook for Biocon",
    date: "25 Mar",
    imageUrl: "/biotech-research.png",
  },
  {
    id: "16",
    title: "Vaccine Development Trends",
    description: "Emerging technologies and innovations in vaccine development",
    date: "10 Feb",
    imageUrl: "/vaccine-vial.png",
  },
]

export function ExploreDocuments() {
  const [previewDocument, setPreviewDocument] = useState<{
    id: string
    title: string
    imageUrl: string
  } | null>(null)

return (
    <div className="h-full">
      <DocumentSearch />
      <div className="mt-6 pb-8">
        <DocumentCategory title="Quick Commerce Reports" documents={commerceReports} />

<DocumentCategory title="Pharmaceutical Industry Reports" documents={pharmaReports} />
      </div>
      {/* Document Preview Modal */}
      <DocumentPreviewModal
        isOpen={previewDocument !== null}
        onClose={() => setPreviewDocument(null)}
        document={previewDocument}
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/document-tabs.tsx" isEdit="true" isMerged="true"
"use client"
import Link from "next/link"

interface DocumentTabsProps {
  activeTab: string
}

export function DocumentTabs({ activeTab }: DocumentTabsProps) {
  return (
    <div className="border-b border-[#EAF0FC] mb-3">
      {" "}
      {/* Changed mb-6 to mb-3 (12px) */}
      <div className="flex space-x-8">
        <Link
          href="/document-intelligence"
          className={`flex items-center pb-4 ${
            activeTab === "discover" ? "text-[#004ce6] border-b-4 border-[#004ce6] font-medium" : "text-[#9BABC7]"
          }`}
        >
          <svg
            className="mr-2"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
              stroke={activeTab === "discover" ? "#004ce6" : "#9BABC7"}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
            <path
              d="M21 21L16.65 16.65"
              stroke={activeTab === "discover" ? "#004ce6" : "#9BABC7"}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          Discover documents
        </Link>
        <Link
          href="/document-intelligence/projects"
          className={`flex items-center pb-4 ${
            activeTab === "projects" ? "text-[#004ce6] border-b-4 border-[#004ce6] font-medium" : "text-[#9BABC7]"
          }`}
        >
          <svg
            className="mr-2"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 6H21M3 12H21M3 18H21"
              stroke={activeTab === "projects" ? "#004ce6" : "#9BABC7"}
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
          Your projects
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/document-intelligence/document-search.tsx" isEdit="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Image from "next/image"
import { Check, X, Eye } from "lucide-react"
import { DocumentCategoryTabs, type CategoryTab } from "./document-category-tabs"
import { DocumentPreviewModal } from "./document-preview-modal"

interface DocumentSearchProps {
  initialQuery?: string
}

// Define document interface for better type safety
interface Document {
  id: string
  title: string
  description: string
  date: string
  imageQuery: string
}

// Define section interface
interface DocumentSection {
  title: string
  documents: Document[]
}

export function DocumentSearch({ initialQuery = "" }: DocumentSearchProps) {
  const [searchQuery, setSearchQuery] = useState(initialQuery)
  const [activeTab, setActiveTab] = useState("recommendation")
  const [isSearching, setIsSearching] = useState(false)
  const [hasSelectedDocuments, setHasSelectedDocuments] = useState(false)
  const [previewDocument, setPreviewDocument] = useState<Document | null>(null)

// Simulate search behavior
  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault()
    if (searchQuery.trim()) {
      setIsSearching(true)
      // Set a default active tab when searching if the current tab is recommendation
      if (activeTab === "recommendation") {
        setActiveTab("company")
      }
    } else {
      setIsSearching(false)
    }
  }

// Category tabs with count
  const categoryTabs: CategoryTab[] = [
    {
      id: "recommendation",
      label: "Recommendation",
      icon: (
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"
            fill={activeTab === "recommendation" ? "#004ce6" : "none"}
            stroke={activeTab === "recommendation" ? "#004ce6" : "#9BABC7"}
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        </svg>
      ),
    },
    { id: "uploaded", label: "Uploaded reports", count: 4 },
    { id: "company", label: "Company reports", count: 32 },
    { id: "brokerage", label: "Brokerage reports", count: 4 },
    { id: "industry", label: "Industry reports", count: 4 },
  ]

// Selected documents
  const [selectedDocuments, setSelectedDocuments] = useState<string[]>([])

// Update hasSelectedDocuments when selectedDocuments changes
  useEffect(() => {
    setHasSelectedDocuments(selectedDocuments.length > 0)
  }, [selectedDocuments])

// Company data for search results
  const companies = [
    {
      id: "zomato1",
      name: "Zomato Private Limited",
      category: "Quick commerce",
      logo: "/document-covers/zomato-logo.png",
      reports: [
        { id: "zom-ar-2024", name: "ZOM AR 2024" },
        { id: "zom-q2-2024", name: "ZOM Q2 2024" },
        { id: "zom-q2-2022", name: "ZOM Q2 2022" },
        { id: "zom-q3-2023", name: "ZOM Q3 2023" },
      ],
      hasMore: true,
    },
    {
      id: "zomato2",
      name: "Zomato Private Limited",
      category: "Quick commerce",
      logo: "/document-covers/zomato-logo.png",
      reports: [
        { id: "zom-ar-2024-2", name: "ZOM AR 2024" },
        { id: "zom-q2-2024-2", name: "ZOM Q2 2024" },
        { id: "zom-q2-2022-2", name: "ZOM Q2 2022" },
        { id: "zom-q3-2023-2", name: "ZOM Q3 2023" },
      ],
      hasMore: true,
    },
  ]

// Document sections for browsing with varied headings and document names
  const documentSections: DocumentSection[] = [
    {
      title: "Quick Commerce Reports",
      documents: [
        {
          id: "zomato-annual-reports-fy23",
          title: "Zomato Annual Reports FY23",
          description: "Annual financial report with key metrics and insights",
          date: "12 Feb",
          imageQuery: "zomato annual report cover with red logo and financial charts",
        },
        {
          id: "swiggy-drhp-fy23-1",
          title: "Swiggy DRHP FY23",
          description: "Draft Red Herring Prospectus for Swiggy's IPO",
          date: "12 Feb",
          imageQuery: "swiggy DRHP document cover with orange logo and financial data",
        },
        {
          id: "blinkit-market-analysis",
          title: "Blinkit Market Analysis 2024",
          description: "Comprehensive analysis of Blinkit's market position and growth",
          date: "15 Mar",
          imageQuery: "blinkit market analysis report with green logo and market share charts",
        },
        {
          id: "zepto-investor-presentation",
          title: "Zepto Investor Presentation Q1",
          description: "Quarterly presentation for investors highlighting growth metrics",
          date: "5 Apr",
          imageQuery: "zepto investor presentation with purple branding and growth metrics",
        },
        {
          id: "quick-commerce-industry-outlook",
          title: "Quick Commerce Industry Outlook",
          description: "Future trends and projections for the quick commerce sector",
          date: "20 Feb",
          imageQuery: "quick commerce industry outlook report with delivery icons and trend graphs",
        },
        {
          id: "bigbasket-now-performance",
          title: "BigBasket Now Performance Review",
          description: "Operational and financial performance analysis of BigBasket Now",
          date: "8 Mar",
          imageQuery: "bigbasket now performance review with basket logo and performance metrics",
        },
        {
          id: "dunzo-quarterly-results",
          title: "Dunzo Quarterly Results Q4 2023",
          description: "Financial results and business highlights for Dunzo",
          date: "2 Feb",
          imageQuery: "dunzo quarterly results report with blue logo and financial statements",
        },
        {
          id: "instamart-expansion-strategy",
          title: "Instamart Expansion Strategy",
          description: "Strategic plan for Swiggy Instamart's market expansion",
          date: "18 Mar",
          imageQuery: "instamart expansion strategy document with orange branding and map graphics",
        },
        {
          id: "quick-commerce-funding-landscape",
          title: "Quick Commerce Funding Landscape",
          description: "Analysis of investment trends in the quick commerce sector",
          date: "25 Feb",
          imageQuery: "quick commerce funding landscape report with investment charts and VC logos",
        },
        {
          id: "dark-store-economics-study",
          title: "Dark Store Economics Study",
          description: "Detailed study on operational economics of dark store models",
          date: "10 Apr",
          imageQuery: "dark store economics study with warehouse illustrations and cost breakdown charts",
        },
      ],
    },
    {
      title: "Pharmaceutical Industry Reports",
      documents: [
        {
          id: "sun-pharma-annual-report",
          title: "Sun Pharma Annual Report 2023",
          description: "Comprehensive annual report of Sun Pharmaceutical Industries",
          date: "5 Feb",
          imageQuery: "sun pharma annual report with company logo and pharmaceutical imagery",
        },
        {
          id: "indian-pharma-market-analysis",
          title: "Indian Pharmaceutical Market Analysis",
          description: "In-depth analysis of the Indian pharmaceutical industry",
          date: "12 Mar",
          imageQuery: "indian pharmaceutical market analysis with medical symbols and market data",
        },
        {
          id: "cipla-investor-presentation",
          title: "Cipla Investor Presentation Q1 2024",
          description: "Quarterly presentation highlighting Cipla's performance and outlook",
          date: "8 Apr",
          imageQuery: "cipla investor presentation with company branding and financial highlights",
        },
        {
          id: "api-manufacturing-trends",
          title: "API Manufacturing Trends 2024",
          description: "Current trends and future outlook for API manufacturing",
          date: "20 Feb",
          imageQuery: "API manufacturing trends report with chemical structures and production charts",
        },
        {
          id: "dr-reddys-quarterly-results",
          title: "Dr. Reddy's Quarterly Results Q4",
          description: "Financial performance and business highlights for Dr. Reddy's Labs",
          date: "15 Mar",
          imageQuery: "dr reddys quarterly results with company logo and financial statements",
        },
        {
          id: "pharma-regulatory-landscape",
          title: "Pharmaceutical Regulatory Landscape",
          description: "Overview of regulatory changes affecting the pharmaceutical industry",
          date: "2 Feb",
          imageQuery: "pharmaceutical regulatory landscape report with legal icons and compliance graphics",
        },
        {
          id: "biocon-biologics-analysis",
          title: "Biocon Biologics Market Analysis",
          description: "Market positioning and growth prospects for Biocon Biologics",
          date: "25 Mar",
          imageQuery: "biocon biologics market analysis with biotech imagery and market share diagrams",
        },
        {
          id: "vaccine-market-opportunities",
          title: "Vaccine Market Opportunities 2024",
          description: "Emerging opportunities and challenges in the vaccine market",
          date: "10 Feb",
          imageQuery: "vaccine market opportunities report with medical vials and growth projection charts",
        },
        {
          id: "pharmaceutical-supply-chain",
          title: "Pharmaceutical Supply Chain Resilience",
          description: "Analysis of supply chain strategies in the pharmaceutical sector",
          date: "18 Mar",
          imageQuery: "pharmaceutical supply chain resilience report with logistics flow diagrams",
        },
        {
          id: "generic-drugs-competitive-landscape",
          title: "Generic Drugs Competitive Landscape",
          description: "Competitive analysis of the generic drugs market in India",
          date: "5 Apr",
          imageQuery: "generic drugs competitive landscape with pill imagery and competitor comparison charts",
        },
      ],
    },
    {
      title: "Financial Market Research Reports",
      documents: [
        {
          id: "hdfc-bank-equity-research",
          title: "HDFC Bank Equity Research",
          description: "Detailed equity research report on HDFC Bank with buy/sell recommendation",
          date: "8 Feb",
          imageQuery: "hdfc bank equity research report with bank logo and stock charts",
        },
        {
          id: "reliance-industries-analysis",
          title: "Reliance Industries Analysis",
          description: "Comprehensive analysis of Reliance Industries' business segments",
          date: "15 Mar",
          imageQuery: "reliance industries analysis report with company logo and business segment charts",
        },
        {
          id: "nifty50-quarterly-outlook",
          title: "Nifty 50 Quarterly Outlook Q2 2024",
          description: "Market outlook and projections for Nifty 50 index",
          date: "2 Apr",
          imageQuery: "nifty 50 quarterly outlook with stock market charts and trend analysis",
        },
        {
          id: "banking-sector-performance",
          title: "Banking Sector Performance Review",
          description: "Performance analysis of the Indian banking sector",
          date: "20 Feb",
          imageQuery: "banking sector performance review with financial institution logos and performance metrics",
        },
        {
          id: "it-sector-earnings-preview",
          title: "IT Sector Earnings Preview Q1",
          description: "Preview of expected earnings for major IT companies",
          date: "5 Mar",
          imageQuery: "it sector earnings preview with technology icons and earnings forecast charts",
        },
        {
          id: "consumer-durables-sector-report",
          title: "Consumer Durables Sector Report",
          description: "Industry analysis and outlook for the consumer durables sector",
          date: "12 Feb",
          imageQuery: "consumer durables sector report with appliance imagery and market trend graphs",
        },
        {
          id: "green-energy-investment-opportunities",
          title: "Green Energy Investment Opportunities",
          description: "Analysis of investment prospects in the renewable energy sector",
          date: "25 Mar",
          imageQuery: "green energy investment opportunities report with renewable energy icons and growth charts",
        },
        {
          id: "small-cap-stocks-analysis",
          title: "Small Cap Stocks Analysis 2024",
          description: "Research on high-potential small cap stocks in the Indian market",
          date: "10 Feb",
          imageQuery: "small cap stocks analysis with stock ticker symbols and performance comparison charts",
        },
        {
          id: "mutual-funds-quarterly-review",
          title: "Mutual Funds Quarterly Review",
          description: "Performance review of top-performing mutual funds",
          date: "18 Mar",
          imageQuery: "mutual funds quarterly review with fund house logos and performance metrics",
        },
        {
          id: "commodity-market-outlook",
          title: "Commodity Market Outlook 2024",
          description: "Price trends and forecasts for key commodities",
          date: "5 Apr",
          imageQuery: "commodity market outlook with gold, oil, and agricultural commodity price charts",
        },
      ],
    },
  ]

const toggleDocumentSelection = (documentId: string) => {
    if (selectedDocuments.includes(documentId)) {
      setSelectedDocuments(selectedDocuments.filter((id) => id !== documentId))
    } else {
      setSelectedDocuments([...selectedDocuments, documentId])
    }
  }

const removeSelectedDocument = (documentId: string) => {
    setSelectedDocuments(selectedDocuments.filter((id) => id !== documentId))
  }

return (
    <div className={`space-y-6 ${hasSelectedDocuments ? "flex gap-6" : ""}`}>
      {/* Main content area with dynamic padding */}
      <div className={`${hasSelectedDocuments ? "w-3/4 pr-6" : "w-full"} transition-all duration-300`}>
        {/* Search input */}
        <form onSubmit={handleSearch} className="mb-8">
          {" "}
          {/* Changed mb-6 to mb-8 (32px) */}
          <input
            type="text"
            placeholder="Describe you reports"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="w-full p-3 rounded-lg border border-[#EAF0FC] focus:outline-none focus:ring-2 focus:ring-[#004ce6]"
            /* Changed p-4 to p-3 to reduce height by 8px */
          />
        </form>

{/* Category tabs using the reusable component */}
        <div className="mb-3">
          {" "}
          {/* Changed mb-6 to mb-3 (12px) */}
          <DocumentCategoryTabs
            tabs={categoryTabs}
            activeTab={activeTab}
            isSearching={isSearching}
            onTabChange={setActiveTab}
          />
        </div>

{/* Tab content container with white background and border */}
        <div className="bg-white border border-[#EAF0FC] rounded-lg overflow-hidden">
          {isSearching ? (
            // Search results view
            <div className="p-4 max-h-[calc(100vh-280px)] overflow-y-auto scrollbar-hide">
              <h2 className="text-xl font-medium mb-4">Quick commerce reports</h2>
              <div className="space-y-4">
                {companies.map((company) => (
                  <div key={company.id} className="border border-[#EAF0FC] rounded-lg overflow-hidden bg-white">
                    <div className="p-4 flex items-center justify-between">
                      <div className="flex items-center">
                        <div className="w-12 h-12 bg-red-100 rounded-md overflow-hidden flex-shrink-0">
                          <Image
                            src="/document-covers/zomato-logo.png"
                            alt={company.name}
                            width={48}
                            height={48}
                            className="object-cover"
                          />
                        </div>
                        <div className="ml-3">
                          <h3 className="font-medium text-[#001742]">{company.name}</h3>
                          <p className="text-sm text-gray-500">{company.category}</p>
                        </div>
                      </div>
                    </div>
                    <div className="border-t px-4 py-3 flex flex-wrap gap-2">
                      {company.reports.map((report) => (
                        <div key={report.id} className="flex items-center bg-gray-50 rounded-md px-3 py-1.5">
                          <div
                            className={`w-5 h-5 rounded flex items-center justify-center mr-2 ${
                              selectedDocuments.includes(report.name) ? "bg-[#004ce6]" : "border border-gray-300"
                            }`}
                            onClick={() => toggleDocumentSelection(report.name)}
                          >
                            {selectedDocuments.includes(report.name) && <Check className="h-3 w-3 text-white" />}
                          </div>
                          <span className="text-sm">{report.name}</span>
                        </div>
                      ))}
                      {company.hasMore && (
                        <div className="flex items-center bg-gray-50 rounded-md px-3 py-1.5">
                          <span className="text-sm text-gray-500">28+</span>
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            // Regular document browsing view with horizontal scrolling sections
            <div className="p-4 max-h-[calc(100vh-280px)] overflow-y-auto scrollbar-hide">
              {documentSections.map((section, sectionIndex) => (
                <div key={sectionIndex} className="mb-8">
                  <h2 className="text-xl font-medium mb-4">{section.title}</h2>

{/* Horizontal scrolling container with hidden scrollbar */}
                  <div className="overflow-x-auto pb-4 scrollbar-hide">
                    <div className="grid grid-rows-2 grid-flow-col gap-4 min-w-max">
                      {section.documents.map((document) => {
                        const isSelected = selectedDocuments.includes(document.title)
                        return (
                          <div
                            key={document.id}
                            className={`flex items-start p-1 rounded-lg border border-[#EAF0FC] w-[350px] group ${
                              isSelected ? "bg-blue-50" : "bg-white"
                            }`}
                          >
                            <div className="relative w-16 h-[22.6px] flex-shrink-0 mr-3">
                              {/* Checkbox with hover effect - perfectly centered */}
                              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black bg-opacity-20 rounded-md z-10">
                                <button
                                  className={`w-6 h-6 rounded-full flex items-center justify-center ${
                                    isSelected ? "bg-[#004ce6]" : "bg-white border border-gray-300"
                                  }`}
                                  onClick={() => toggleDocumentSelection(document.title)}
                                  aria-label={`Select ${document.title}`}
                                >
                                  {isSelected && <Check className="h-4 w-4 text-white" />}
                                </button>
                              </div>
                              {/* Generated image based on document content with A4 proportions */}
                              <div className="w-16 h-[22.6px] overflow-hidden rounded-md">
                                <Image
                                  src={`/abstract-geometric-shapes.png?height=226&width=160&query=${document.imageQuery}`}
                                  alt={document.title}
                                  width={160}
                                  height={226}
                                  className="object-cover w-full h-full"
                                />
                              </div>
                            </div>
                            <div className="flex-1 min-w-0 relative">
                              <h3 className="font-medium text-[#001742] text-sm line-clamp-2">{document.title}</h3>
                              <p className="text-xs text-gray-500 mt-1 line-clamp-2">{document.description}</p>
                              <div className="flex justify-between items-center mt-1">
                                <p className="text-xs text-gray-400">{document.date}</p>
                                {/* Preview button - visible on hover */}
                                <button
                                  className="absolute bottom-0 right-0 bg-white border border-gray-200 rounded-md px-2 py-0.5 text-xs flex items-center gap-1 text-gray-600 hover:bg-gray-50 opacity-0 group-hover:opacity-100 transition-opacity"
                                  onClick={(e) => {
                                    e.stopPropagation()
                                    setPreviewDocument(document)
                                  }}
                                >
                                  <Eye className="h-3 w-3" />
                                  Preview
                                </button>
                              </div>
                            </div>
                          </div>
                        )
                      })}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

import { useState } from "react"
import { ArrowLeft, ArrowRight, Check, FileText, Upload } from "lucide-react"
import Link from "next/link"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

const steps = [
  {
    id: 1,
    title: "Upload Documents",
    description: "Upload or select previously tagged financial documents for analysis",
  },
  {
    id: 2,
    title: "Content Standardization",
    description: "System breaks documents into structured elements",
  },
  {
    id: 3,
    title: "Anomaly Detection",
    description: "Analysis for unusual patterns or outliers",
  },
  {
    id: 4,
    title: "Matrix Analysis",
    description: "Comparison against historical statements or industry norms",
  },
  {
    id: 5,
    title: "Anomaly Highlighting",
    description: "Potential anomalies highlighted with confidence scores",
  },
  {
    id: 6,
    title: "Relevancy Assessment",
    description: "Context provided on why items appear unusual",
  },
  {
    id: 7,
    title: "Source Suggestion",
    description: "Recommendations for additional documents to verify findings",
  },
  {
    id: 8,
    title: "Investigation",
    description: "Investigate specific anomalies and add notes to the project",
  },
]

export default function AnomalyDetectionPage() {
  const [currentStep, setCurrentStep] = useState(1)
  const [uploadedFiles, setUploadedFiles] = useState<string[]>([])

const handleFileUpload = () => {
    // Simulate file upload
    setUploadedFiles(["Q2_2023_Financial_Statement.pdf", "Q1_2023_Financial_Statement.pdf"])
  }

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

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

const progress = (currentStep / steps.length) * 100

return (
    <div className="container mx-auto max-w-6xl py-6">
      <div className="mb-6 flex items-center">
        <Link href="/" className="mr-4">
          <Button variant="outline" size="icon">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <h1 className="text-2xl font-bold">Financial Statement Anomaly Detection</h1>
      </div>

<div className="grid gap-6 md:grid-cols-[300px_1fr]">
        {/* Steps sidebar */}
        <div className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="text-base">Workflow Progress</CardTitle>
              <CardDescription>
                Step {currentStep} of {steps.length}
              </CardDescription>
              <Progress value={progress} className="h-2" />
            </CardHeader>
            <CardContent className="p-0">
              <ul className="space-y-1 p-2">
                {steps.map((step) => (
                  <li key={step.id} className="flex items-start gap-3 rounded-md p-2">
                    <div
                      className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border ${
                        step.id < currentStep
                          ? "bg-primary text-primary-foreground"
                          : step.id === currentStep
                            ? "border-primary text-primary"
                            : "border-muted-foreground/30 text-muted-foreground"
                      }`}
                    >
                      {step.id < currentStep ? (
                        <Check className="h-3 w-3" />
                      ) : (
                        <span className="text-xs">{step.id}</span>
                      )}
                    </div>
                    <div>
                      <div
                        className={`text-sm font-medium ${
                          step.id === currentStep
                            ? "text-primary"
                            : step.id < currentStep
                              ? "text-foreground"
                              : "text-muted-foreground"
                        }`}
                      >
                        {step.title}
                      </div>
                      <div className="text-xs text-muted-foreground">{step.description}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </CardContent>
          </Card>
        </div>

{/* Main content */}
        <div>
          <Card>
            <CardHeader>
              <CardTitle>{steps[currentStep - 1].title}</CardTitle>
              <CardDescription>{steps[currentStep - 1].description}</CardDescription>
            </CardHeader>
            <CardContent>
              {currentStep === 1 && (
                <div className="space-y-6">
                  <Tabs defaultValue="upload">
                    <TabsList className="grid w-full grid-cols-2">
                      <TabsTrigger value="upload">Upload New Documents</TabsTrigger>
                      <TabsTrigger value="existing">Use Existing Documents</TabsTrigger>
                    </TabsList>
                    <TabsContent value="upload" className="space-y-4 pt-4">
                      <div
                        className="flex flex-col items-center justify-center rounded-lg border border-dashed border-muted-foreground/25 p-12 text-center"
                        onClick={handleFileUpload}
                      >
                        <Upload className="mb-4 h-8 w-8 text-muted-foreground" />
                        <h3 className="mb-1 text-lg font-medium">Upload Financial Statements</h3>
                        <p className="mb-4 text-sm text-muted-foreground">
                          Drag and drop your financial documents here or click to browse
                        </p>
                        <Button>Select Files</Button>
                      </div>

{uploadedFiles.length > 0 && (
                        <div className="space-y-2">
                          <h4 className="text-sm font-medium">Uploaded Files</h4>
                          {uploadedFiles.map((file, index) => (
                            <div key={index} className="flex items-center gap-2 rounded-md border p-2">
                              <FileText className="h-4 w-4 text-muted-foreground" />
                              <span className="text-sm">{file}</span>
                            </div>
                          ))}
                        </div>
                      )}
                    </TabsContent>
                    <TabsContent value="existing" className="space-y-4 pt-4">
                      <div className="space-y-2">
                        <h4 className="text-sm font-medium">Previously Uploaded Documents</h4>
                        <div className="flex items-center gap-2 rounded-md border p-2">
                          <FileText className="h-4 w-4 text-muted-foreground" />
                          <span className="text-sm">Annual_Report_2022.pdf</span>
                        </div>
                        <div className="flex items-center gap-2 rounded-md border p-2">
                          <FileText className="h-4 w-4 text-muted-foreground" />
                          <span className="text-sm">Q4_2022_Financial_Statement.pdf</span>
                        </div>
                        <div className="flex items-center gap-2 rounded-md border p-2">
                          <FileText className="h-4 w-4 text-muted-foreground" />
                          <span className="text-sm">Q3_2022_Financial_Statement.pdf</span>
                        </div>
                      </div>
                    </TabsContent>
                  </Tabs>
                </div>
              )}

{currentStep === 2 && (
                <div className="space-y-4">
                  <div className="rounded-md bg-muted p-4">
                    <h3 className="mb-2 text-sm font-medium">Content Standardization in Progress</h3>
                    <p className="text-sm text-muted-foreground">
                      The system is currently processing your documents and breaking them down into structured elements
                      for analysis.
                    </p>
                    <Progress value={65} className="mt-4 h-2" />
                  </div>

<div className="space-y-2">
                    <h4 className="text-sm font-medium">Processing Files</h4>
                    <div className="space-y-2">
                      {uploadedFiles.map((file, index) => (
                        <div key={index} className="flex items-center justify-between rounded-md border p-2">
                          <div className="flex items-center gap-2">
                            <FileText className="h-4 w-4 text-muted-foreground" />
                            <span className="text-sm">{file}</span>
                          </div>
                          <span className="text-xs text-muted-foreground">65% complete</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

{currentStep === 3 && (
                <div className="space-y-4">
                  <div className="rounded-md bg-muted p-4">
                    <h3 className="mb-2 text-sm font-medium">Anomaly Detection in Progress</h3>
                    <p className="text-sm text-muted-foreground">
                      Our AI is analyzing the financial statements for unusual patterns or outliers that might indicate
                      errors or areas requiring further investigation.
                    </p>
                    <Progress value={40} className="mt-4 h-2" />
                  </div>

<div className="space-y-2">
                    <h4 className="text-sm font-medium">Analysis Areas</h4>
                    <div className="grid gap-2 md:grid-cols-2">
                      <div className="rounded-md border p-3">
                        <div className="mb-1 text-sm font-medium">Revenue Recognition</div>
                        <div className="text-xs text-muted-foreground">
                          Analyzing timing and classification patterns
                        </div>
                      </div>
                      <div className="rounded-md border p-3">
                        <div className="mb-1 text-sm font-medium">Expense Categorization</div>
                        <div className="text-xs text-muted-foreground">Checking for unusual allocations</div>
                      </div>
                      <div className="rounded-md border p-3">
                        <div className="mb-1 text-sm font-medium">Asset Valuation</div>
                        <div className="text-xs text-muted-foreground">Reviewing for inconsistent valuations</div>
                      </div>
                      <div className="rounded-md border p-3">
                        <div className="mb-1 text-sm font-medium">Liability Recognition</div>
                        <div className="text-xs text-muted-foreground">Identifying potential omissions</div>
                      </div>
                    </div>
                  </div>
                </div>
              )}

{/* Additional step content would be implemented similarly */}
              {currentStep > 3 && (
                <div className="flex h-40 items-center justify-center rounded-md border border-dashed">
                  <p className="text-muted-foreground">Step {currentStep} content would be implemented here</p>
                </div>
              )}
            </CardContent>
            <CardFooter className="flex justify-between border-t p-4">
              <Button variant="outline" onClick={handlePreviousStep} disabled={currentStep === 1}>
                Previous
              </Button>
              <Button onClick={handleNextStep} disabled={currentStep === steps.length}>
                {currentStep === steps.length ? "Complete" : "Next"}
                {currentStep !== steps.length && <ArrowRight className="ml-2 h-4 w-4" />}
              </Button>
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/ratio-analysis/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import {
  ArrowLeft,
  BarChart4,
  ChevronDown,
  Clock,
  Download,
  FileText,
  LineChart,
  Loader2,
  Plus,
  Send,
  X,
} from "lucide-react"
import Link from "next/link"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

// Sample data for demonstration
const companies = [
  { id: "aapl", name: "Apple Inc.", ticker: "AAPL" },
  { id: "msft", name: "Microsoft Corporation", ticker: "MSFT" },
  { id: "amzn", name: "Amazon.com, Inc.", ticker: "AMZN" },
  { id: "googl", name: "Alphabet Inc.", ticker: "GOOGL" },
  { id: "meta", name: "Meta Platforms, Inc.", ticker: "META" },
  { id: "tsla", name: "Tesla, Inc.", ticker: "TSLA" },
  { id: "nvda", name: "NVIDIA Corporation", ticker: "NVDA" },
  { id: "jpm", name: "JPMorgan Chase & Co.", ticker: "JPM" },
  { id: "v", name: "Visa Inc.", ticker: "V" },
  { id: "wmt", name: "Walmart Inc.", ticker: "WMT" },
]

const ratios = [
  { id: "current", name: "Current Ratio", category: "Liquidity" },
  { id: "quick", name: "Quick Ratio", category: "Liquidity" },
  { id: "cash", name: "Cash Ratio", category: "Liquidity" },
  { id: "debt-equity", name: "Debt-to-Equity Ratio", category: "Solvency" },
  { id: "interest-coverage", name: "Interest Coverage Ratio", category: "Solvency" },
  { id: "debt-assets", name: "Debt-to-Assets Ratio", category: "Solvency" },
  { id: "roe", name: "Return on Equity (ROE)", category: "Profitability" },
  { id: "roa", name: "Return on Assets (ROA)", category: "Profitability" },
  { id: "gross-margin", name: "Gross Profit Margin", category: "Profitability" },
  { id: "operating-margin", name: "Operating Profit Margin", category: "Profitability" },
  { id: "net-margin", name: "Net Profit Margin", category: "Profitability" },
  { id: "pe", name: "Price-to-Earnings (P/E) Ratio", category: "Valuation" },
  { id: "pb", name: "Price-to-Book (P/B) Ratio", category: "Valuation" },
  { id: "ps", name: "Price-to-Sales (P/S) Ratio", category: "Valuation" },
  { id: "dividend-yield", name: "Dividend Yield", category: "Valuation" },
]

const timePeriods = [
  { id: "1y", name: "Last 1 Year" },
  { id: "2y", name: "Last 2 Years" },
  { id: "3y", name: "Last 3 Years" },
  { id: "5y", name: "Last 5 Years" },
  { id: "10y", name: "Last 10 Years" },
  { id: "custom", name: "Custom Date Range" },
]

// Sample chart data
const chartData = {
  labels: ["Q1 2022", "Q2 2022", "Q3 2022", "Q4 2022", "Q1 2023", "Q2 2023"],
  datasets: [
    {
      label: "Gross Profit Margin",
      data: [0.42, 0.43, 0.41, 0.43, 0.44, 0.45],
      borderColor: "hsl(221.2 83.2% 53.3%)",
      backgroundColor: "rgba(59, 130, 246, 0.1)",
    },
    {
      label: "Net Profit Margin",
      data: [0.21, 0.22, 0.2, 0.23, 0.24, 0.25],
      borderColor: "hsl(262.1 83.3% 57.8%)",
      backgroundColor: "rgba(124, 58, 237, 0.1)",
    },
    {
      label: "Operating Profit Margin",
      data: [0.28, 0.29, 0.27, 0.3, 0.31, 0.32],
      borderColor: "hsl(142.1 76.2% 36.3%)",
      backgroundColor: "rgba(16, 185, 129, 0.1)",
    },
  ],
}

type Message = {
  id: string
  role: "system" | "user" | "loading"
  content: string | React.ReactNode
  timestamp: Date
}

export default function RatioAnalysisPage() {
  const [messages, setMessages] = useState<Message[]>([])
  const [inputValue, setInputValue] = useState("")
  const [selectedCompany, setSelectedCompany] = useState<(typeof companies)[0] | null>(null)
  const [selectedRatios, setSelectedRatios] = useState<typeof ratios>([])
  const [selectedTimePeriod, setSelectedTimePeriod] = useState<(typeof timePeriods)[0] | null>(null)
  const [isLoading, setIsLoading] = useState(false)
  const [currentStep, setCurrentStep] = useState(0)
  const [isAnalysisComplete, setIsAnalysisComplete] = useState(false)
  const [isStarted, setIsStarted] = useState(false)
  const messagesEndRef = useRef<HTMLDivElement>(null)

// Initial welcome message
  useEffect(() => {
    setMessages([
      {
        id: "welcome",
        role: "system",
        content: (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-[#001742]">Financial Ratio Trend Analysis</h3>
            <p className="text-[#4e5971]">
              Welcome to the Financial Ratio Trend Analysis workflow. This tool will automatically extract and analyze
              key financial ratios for a specified company across multiple quarters, providing trend visualization and
              insights without manual calculation or data gathering.
            </p>
            <Button onClick={handleStart} className="mt-2 bg-[#004ce6] hover:bg-[#0047cb] text-white">
              Start Analysis
            </Button>
          </div>
        ),
        timestamp: new Date(),
      },
    ])
  }, [])

// Scroll to bottom when messages change
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
  }, [messages])

const handleStart = () => {
    setIsStarted(true)
    setCurrentStep(1)

addMessage(
      "system",
      <div className="space-y-4">
        <p className="text-[#4e5971]">Let's begin by selecting a company you'd like to analyze:</p>
        <CompanySelector onSelect={handleCompanySelect} />
      </div>,
    )
  }

const handleCompanySelect = (company: (typeof companies)[0]) => {
    setSelectedCompany(company)
    setCurrentStep(2)

// Add user message
    addMessage("user", `I want to analyze ${company.name} (${company.ticker})`)

// Add system response
    setTimeout(() => {
      addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#4e5971]">
            Great! You've selected {company.name} ({company.ticker}).
          </p>
          <p className="text-[#4e5971]">
            Now, please select the financial ratios you'd like to analyze (you can select multiple):
          </p>
          <RatioSelector
            selectedRatios={selectedRatios}
            onSelectRatio={handleRatioSelect}
            onDeselectRatio={handleRatioDeselect}
          />
          <div className="mt-4">
            {selectedRatios.length > 0 && (
              <div className="flex flex-wrap gap-2 mt-2">
                {selectedRatios.map((ratio) => (
                  <Badge
                    key={ratio.id}
                    variant="secondary"
                    className="flex items-center gap-1 bg-[#eaf0fc] text-[#004ce6] hover:bg-[#d9e4f7] border-[#d9e4f7]"
                  >
                    {ratio.name}
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-4 w-4 p-0 ml-1 text-[#8098c4] hover:text-[#004ce6] hover:bg-transparent"
                      onClick={() => handleRatioDeselect(ratio)}
                    >
                      <X className="h-3 w-3" />
                      <span className="sr-only">Remove</span>
                    </Button>
                  </Badge>
                ))}
              </div>
            )}
          </div>
          {selectedRatios.length > 0 && (
            <Button onClick={handleRatiosConfirm} className="mt-2 bg-[#004ce6] hover:bg-[#0047cb] text-white">
              Continue
            </Button>
          )}
        </div>,
      )
    }, 500)
  }

const handleRatioSelect = (ratio: (typeof ratios)[0]) => {
    if (!selectedRatios.some((r) => r.id === ratio.id)) {
      setSelectedRatios([...selectedRatios, ratio])
    }
  }

const handleRatioDeselect = (ratio: (typeof ratios)[0]) => {
    setSelectedRatios(selectedRatios.filter((r) => r.id !== ratio.id))
  }

const handleRatiosConfirm = () => {
    setCurrentStep(3)

// Add user message showing selected ratios
    const ratioNames = selectedRatios.map((r) => r.name).join(", ")
    addMessage("user", `I want to analyze the following ratios: ${ratioNames}`)

// Add system response for time period selection
    setTimeout(() => {
      addMessage(
        "system",
        <div className="space-y-4">
          <p className="text-[#4e5971]">Please select the time period for analysis:</p>
          <TimePeriodSelector onSelect={handleTimePeriodSelect} />
        </div>,
      )
    }, 500)
  }

const handleTimePeriodSelect = (period: (typeof timePeriods)[0]) => {
    setSelectedTimePeriod(period)
    setCurrentStep(4)

// Add user message
    addMessage("user", `I want to analyze data for ${period.name}`)

// Show loading state
    addLoadingMessage("Identifying available data sources...")

// Simulate data source identification
    setTimeout(() => {
      updateLoadingMessage("Fetching financial data from multiple sources...")

// Simulate data fetching
      setTimeout(() => {
        updateLoadingMessage("Extracting and normalizing financial elements...")

// Simulate data processing
        setTimeout(() => {
          updateLoadingMessage("Calculating financial ratios for selected timeframes...")

// Simulate ratio calculation
          setTimeout(() => {
            updateLoadingMessage("Generating visualizations of ratio trends...")

// Simulate chart generation
            setTimeout(() => {
              removeLoadingMessage()

// Show data sources
              addMessage(
                "system",
                <div className="space-y-4">
                  <h4 className="font-medium text-[#001742]">Data Sources Identified:</h4>
                  <div className="rounded-md bg-[#f4f9ff] p-3">
                    <ul className="space-y-1 text-sm text-[#4e5971]">
                      <li className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-[#21a265]"></div>
                        <span>SEC Filings (10-K, 10-Q) - Primary Source</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-[#21a265]"></div>
                        <span>Company Annual Reports (2018-2023)</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-[#004ce6]"></div>
                        <span>Industry Benchmark Data</span>
                      </li>
                      <li className="flex items-center gap-2">
                        <div className="h-2 w-2 rounded-full bg-[#004ce6]"></div>
                        <span>Earnings Call Transcripts</span>
                      </li>
                    </ul>
                  </div>
                </div>,
              )

// Show visualization
              setTimeout(() => {
                addMessage(
                  "system",
                  <div className="space-y-4">
                    <h4 className="font-medium text-[#001742]">Ratio Trend Analysis:</h4>
                    <Card className="border-[#e1e8f6]">
                      <CardContent className="p-4">
                        <Tabs defaultValue="chart">
                          <TabsList className="grid w-full grid-cols-2 bg-[#f4f7ff]">
                            <TabsTrigger
                              value="chart"
                              className="data-[state=active]:bg-white data-[state=active]:text-[#001742]"
                            >
                              Chart
                            </TabsTrigger>
                            <TabsTrigger
                              value="data"
                              className="data-[state=active]:bg-white data-[state=active]:text-[#001742]"
                            >
                              Data Table
                            </TabsTrigger>
                          </TabsList>
                          <TabsContent value="chart" className="pt-4">
                            <div className="h-[300px] w-full">
                              <ChartPlaceholder ratios={selectedRatios.map((r) => r.name)} />
                            </div>
                          </TabsContent>
                          <TabsContent value="data" className="pt-4">
                            <div className="rounded-md border border-[#e1e8f6]">
                              <table className="w-full">
                                <thead>
                                  <tr className="border-b bg-[#f4f7ff]">
                                    <th className="p-2 text-left text-sm font-medium text-[#4e5971]">Period</th>
                                    {selectedRatios.map((ratio) => (
                                      <th key={ratio.id} className="p-2 text-right text-sm font-medium text-[#4e5971]">
                                        {ratio.name}
                                      </th>
                                    ))}
                                  </tr>
                                </thead>
                                <tbody>
                                  {chartData.labels.map((label, i) => (
                                    <tr key={i} className="border-b border-[#e8eef9]">
                                      <td className="p-2 text-sm text-[#4e5971]">{label}</td>
                                      {selectedRatios.map((ratio, j) => (
                                        <td key={`${ratio.id}-${i}`} className="p-2 text-right text-sm text-[#4e5971]">
                                          {chartData.datasets[j % chartData.datasets.length].data[i]}
                                        </td>
                                      ))}
                                    </tr>
                                  ))}
                                </tbody>
                              </table>
                            </div>
                          </TabsContent>
                        </Tabs>
                      </CardContent>
                    </Card>
                  </div>,
                )

// Show analysis
                setTimeout(() => {
                  setIsAnalysisComplete(true)
                  addMessage(
                    "system",
                    <div className="space-y-4">
                      <h4 className="font-medium text-[#001742]">Analysis Insights:</h4>
                      <div className="space-y-2 text-[#4e5971]">
                        <p>
                          <strong>Overall Trend:</strong> {selectedCompany?.name}'s profitability metrics have shown a
                          positive trend over the analyzed period, with all selected ratios improving since Q1 2022.
                        </p>
                        {selectedRatios.map((ratio, i) => (
                          <p key={ratio.id}>
                            <strong>{ratio.name}:</strong> {getRandomInsight(ratio.name, selectedCompany?.name || "")}
                          </p>
                        ))}
                        <p>
                          <strong>Industry Comparison:</strong> Compared to industry peers, {selectedCompany?.name} has
                          maintained above-average profitability metrics, particularly in{" "}
                          {selectedRatios[0]?.name || "Gross Profit Margin"}.
                        </p>
                        <p>
                          <strong>Key Factors:</strong> The improvement in profitability metrics coincides with the
                          company's strategic initiatives announced in Q4 2022, including cost optimization and supply
                          chain improvements.
                        </p>
                      </div>
                      <div className="mt-6">
                        <h4 className="font-medium text-[#001742] mb-2">Sources:</h4>
                        <div className="space-y-1 text-sm text-[#6e7b96]">
                          <div className="flex items-start gap-2">
                            <FileText className="h-4 w-4 mt-0.5 text-[#8098c4]" />
                            <span>SEC Form 10-K (Annual Report) - Filed Feb 2023</span>
                          </div>
                          <div className="flex items-start gap-2">
                            <FileText className="h-4 w-4 mt-0.5 text-[#8098c4]" />
                            <span>SEC Form 10-Q (Quarterly Reports) - Q1-Q2 2023</span>
                          </div>
                          <div className="flex items-start gap-2">
                            <FileText className="h-4 w-4 mt-0.5 text-[#8098c4]" />
                            <span>Industry Benchmark Data - Financial Services Database</span>
                          </div>
                        </div>
                      </div>
                      <div className="mt-6 flex flex-wrap gap-2">
                        <Button 
                          size="sm" 
                          variant="outline" 
                          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6]"
                        >
                          <Download className="h-4 w-4" />
                          Download Report
                        </Button>
                        <Button 
                          size="sm" 
                          variant="outline" 
                          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6]"
                        >
                          <Clock className="h-4 w-4" />
                          Set Alert for Changes
                        </Button>
                        <Button 
                          size="sm" 
                          variant="outline" 
                          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6]"
                        >
                          <BarChart4 className="h-4 w-4" />
                          Compare with Competitor
                        </Button>
                        <Button 
                          size="sm" 
                          variant="outline" 
                          className="gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover
                          className=\"gap-2 border-[#dee6f5] text-[#4e5971] hover:bg-[#f4f9ff] hover:text-[#004ce6]"
                        >
                          <Plus className="h-4 w-4" />
                          Save to Project
                        </Button>
                      </div>
                    </div>,
                  )
                }, 1000)
              }, 1000)
            }, 1500)
          }, 1500)
        }, 1500)
      }, 1500)
    }, 1500)
  }

const addMessage = (role: "system" | "user", content: string | React.ReactNode) => {
    setMessages((prev) => [
      ...prev,
      {
        id: Date.now().toString(),
        role,
        content,
        timestamp: new Date(),
      },
    ])
  }

const addLoadingMessage = (content: string) => {
    setIsLoading(true)
    setMessages((prev) => [
      ...prev,
      {
        id: "loading",
        role: "loading",
        content,
        timestamp: new Date(),
      },
    ])
  }

const updateLoadingMessage = (content: string) => {
    setMessages((prev) => prev.map((msg) => (msg.id === "loading" ? { ...msg, content } : msg)))
  }

const removeLoadingMessage = () => {
    setIsLoading(false)
    setMessages((prev) => prev.filter((msg) => msg.id !== "loading"))
  }

const handleSendMessage = (e: React.FormEvent) => {
    e.preventDefault()
    if (!inputValue.trim()) return

// Add user message
    addMessage("user", inputValue)
    setInputValue("")

// Simulate response
    setTimeout(() => {
      addMessage(
        "system",
        <div>
          <p className="text-[#4e5971]">
            I'll help you with that. What specific aspect of the analysis would you like to explore further?
          </p>
        </div>,
      )
    }, 1000)
  }

// Helper function to generate random insights
  const getRandomInsight = (ratioName: string, companyName: string) => {
    const insights = [
      `${ratioName} has improved by 7.1% over the analyzed period, indicating stronger financial performance.`,
      `${ratioName} shows a steady upward trend, with a notable 3.2% increase in the most recent quarter.`,
      `${ratioName} has outperformed the industry average by 12% throughout the analyzed period.`,
      `${companyName}'s ${ratioName} demonstrates consistent improvement, reflecting effective management strategies.`,
      `${ratioName} experienced temporary volatility in Q3 2022 but recovered strongly in subsequent quarters.`,
    ]
    return insights[Math.floor(Math.random() * insights.length)]
  }

return (
    <div className="flex h-screen flex-col bg-[#f7f9fe]">
      {/* Header */}
      <header className="flex h-14 items-center border-b bg-white px-4">
        <Link href="/" className="mr-4">
          <Button variant="ghost" size="icon" className="text-[#4e5971] hover:text-[#004ce6] hover:bg-[#f4f9ff]">
            <ArrowLeft className="h-4 w-4" />
          </Button>
        </Link>
        <h1 className="text-lg font-semibold text-[#001742]">Financial Ratio Trend Analysis</h1>
        {selectedCompany && (
          <div className="ml-4 flex items-center gap-2 rounded-full bg-[#f4f9ff] px-3 py-1 text-sm">
            <span className="text-[#004ce6]">{selectedCompany.ticker}</span>
            {selectedRatios.length > 0 && (
              <>
                <span className="text-[#8098c4]">|</span>
                <span className="text-[#4e5971]">{selectedRatios.length} ratios selected</span>
              </>
            )}
          </div>
        )}
      </header>

{/* Chat container */}
      <div className="flex-1 overflow-y-auto p-4">
        <div className="mx-auto max-w-3xl space-y-6">
          {messages.map((message) => (
            <div key={message.id} className={`flex ${message.role === "user" ? "justify-end" : "justify-start"}`}>
              <div
                className={`max-w-[85%] rounded-lg p-4 ${
                  message.role === "user"
                    ? "bg-[#004ce6] text-white"
                    : message.role === "loading"
                      ? "bg-[#eaf0fc] text-[#4e5971]"
                      : "bg-white border border-[#dee6f5] shadow-sm"
                }`}
              >
                {message.role === "loading" ? (
                  <div className="flex items-center gap-3">
                    <Loader2 className="h-4 w-4 animate-spin text-[#004ce6]" />
                    <span>{message.content}</span>
                  </div>
                ) : (
                  message.content
                )}
              </div>
            </div>
          ))}
          <div ref={messagesEndRef} />
        </div>
      </div>

{/* Input area */}
      <div className="border-t bg-white p-4">
        <form onSubmit={handleSendMessage} className="mx-auto max-w-3xl">
          <div className="flex items-center gap-2">
            <input
              type="text"
              value={inputValue}
              onChange={(e) => setInputValue(e.target.value)}
              placeholder={isAnalysisComplete ? "Ask a follow-up question about the analysis..." : "Type a message..."}
              className="flex-1 rounded-md border border-[#dee6f5] bg-white px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#004ce6]"
            />
            <Button type="submit" size="icon" disabled={!inputValue.trim()} className="bg-[#004ce6] hover:bg-[#0047cb]">
              <Send className="h-4 w-4" />
              <span className="sr-only">Send message</span>
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}

// Company selector component
function CompanySelector({ onSelect }: { onSelect: (company: (typeof companies)[0]) => void }) {
  const [open, setOpen] = useState(false)

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between border-[#dee6f5] bg-white text-[#4e5971]"
        >
          {`Select a company or enter ticker symbol...`}
          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[300px] p-0">
        <Command>
          <CommandInput placeholder="Search company or ticker..." />
          <CommandList>
            <CommandEmpty>No company found.</CommandEmpty>
            <CommandGroup>
              {companies.map((company) => (
                <CommandItem
                  key={company.id}
                  onSelect={() => {
                    onSelect(company)
                    setOpen(false)
                  }}
                >
                  <span>{company.name}</span>
                  <span className="ml-2 text-xs text-[#8098c4]">({company.ticker})</span>
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

// Ratio selector component
function RatioSelector({
  selectedRatios,
  onSelectRatio,
  onDeselectRatio,
}: {
  selectedRatios: typeof ratios
  onSelectRatio: (ratio: (typeof ratios)[0]) => void
  onDeselectRatio: (ratio: (typeof ratios)[0]) => void
}) {
  const [open, setOpen] = useState(false)

// Group ratios by category
  const ratiosByCategory = ratios.reduce(
    (acc, ratio) => {
      if (!acc[ratio.category]) {
        acc[ratio.category] = []
      }
      acc[ratio.category].push(ratio)
      return acc
    },
    {} as Record<string, typeof ratios>,
  )

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between border-[#dee6f5] bg-white text-[#4e5971]"
        >
          {selectedRatios.length > 0
            ? `${selectedRatios.length} ratio${selectedRatios.length > 1 ? "s" : ""} selected`
            : `Select financial ratios...`}
          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[300px] p-0" align="start">
        <Command>
          <CommandInput placeholder="Search ratios..." />
          <CommandList>
            <CommandEmpty>No ratio found.</CommandEmpty>
            {Object.entries(ratiosByCategory).map(([category, categoryRatios]) => (
              <CommandGroup key={category} heading={category}>
                {categoryRatios.map((ratio) => {
                  const isSelected = selectedRatios.some((r) => r.id === ratio.id)
                  return (
                    <CommandItem
                      key={ratio.id}
                      onSelect={() => {
                        if (isSelected) {
                          onDeselectRatio(ratio)
                        } else {
                          onSelectRatio(ratio)
                        }
                      }}
                    >
                      <div className="flex items-center gap-2">
                        <Checkbox
                          checked={isSelected}
                          id={`ratio-${ratio.id}`}
                          className="border-[#9babc7] data-[state=checked]:bg-[#004ce6] data-[state=checked]:border-[#004ce6]"
                        />
                        <label htmlFor={`ratio-${ratio.id}`} className="text-sm">
                          {ratio.name}
                        </label>
                      </div>
                    </CommandItem>
                  )
                })}
              </CommandGroup>
            ))}
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

// Time period selector component
function TimePeriodSelector({ onSelect }: { onSelect: (period: (typeof timePeriods)[0]) => void }) {
  const [open, setOpen] = useState(false)

return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          role="combobox"
          aria-expanded={open}
          className="w-full justify-between border-[#dee6f5] bg-white text-[#4e5971]"
        >
          {`Select time period...`}
          <ChevronDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-[300px] p-0">
        <Command>
          <CommandList>
            <CommandGroup>
              {timePeriods.map((period) => (
                <CommandItem
                  key={period.id}
                  onSelect={() => {
                    onSelect(period)
                    setOpen(false)
                  }}
                >
                  {period.name}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

// Chart placeholder component
function ChartPlaceholder({ ratios }: { ratios: string[] }) {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center rounded-md border border-[#dee6f5] p-4">
      <LineChart className="mb-2 h-8 w-8 text-[#004ce6]" />
      <div className="text-center">
        <p className="text-sm font-medium text-[#001742]">Financial Ratio Trends (Last 6 Quarters)</p>
        <p className="text-xs text-[#8098c4]">Chart showing trends for {ratios.join(", ")}</p>
      </div>
    </div>
  )
}
[V0_FILE]plaintext:file="public/mystical-forest-spirit.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mystical-forest-spirit-OwmJQxP0kLJ1XTWLWHt15UYnBzBzX4.png" isMerged="true"
[V0_FILE]plaintext:file="public/fynd-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-xQryR1gjpUOdyqKY6k1EnDJKukPmqm.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/workflows/market-industry-research/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/workflow/customization/industry-selector.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Search } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import type { Industry } from "@/lib/workflow/types"

interface IndustrySelectorProps {
  industries: Industry[]
  onSelect: (industry: Industry) => void
}

export function IndustrySelector({ industries, onSelect }: IndustrySelectorProps) {
  const [searchTerm, setSearchTerm] = useState("")

// Filter industries based on search term
  const filteredIndustries = searchTerm
    ? industries.filter(
        (industry) =>
          industry.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
          industry.macroSector.toLowerCase().includes(searchTerm.toLowerCase()) ||
          industry.subSector.toLowerCase().includes(searchTerm.toLowerCase()),
      )
    : industries

// Get featured industries (for quick selection)
  const featuredIndustries = industries.filter((i) =>
    ["quick-commerce", "tech", "healthcare", "finance"].includes(i.id),
  )

return (
    <div className="space-y-4">
      <div className="relative">
        <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <Search className="h-4 w-4 text-[#8098c4]" />
        </div>
        <Input
          type="text"
          placeholder="Search industries or enter company name..."
          className="pl-10 border-[#dee6f5] focus-visible:ring-[#004ce6]"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>
      <div className="flex flex-wrap gap-2 mt-3">
        {featuredIndustries.map((industry) => (
          <Badge
            key={industry.id}
            className="bg-[#eaf0fc] text-[#004ce6] hover:bg-[#d9e4f7] border-[#d9e4f7] cursor-pointer font-medium px-3 py-1.5"
            onClick={() => onSelect(industry)}
          >
            {industry.name}
          </Badge>
        ))}
      </div>
      <Button
        onClick={() => onSelect(industries.find((i) => i.id === "quick-commerce")!)}
        className="mt-4 bg-[#004ce6] hover:bg-[#0047cb] text-white px-4 py-1.5 h-auto text-sm"
      >
        Continue
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/workflows/market-industry-research/refactored-page.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import { WorkflowLayout } from "@/components/workflow/workflow-layout"
import { WorkflowHeader } from "@/components/workflow/workflow-header"
import { ChatInterface } from "@/components/workflow/chat-interface"
import { ChatInput } from "@/components/workflow/chat-input"
import { CustomizationBox } from "@/components/workflow/customization-box"
import { IndustrySelector } from "@/components/workflow/customization/industry-selector"
import { DataSourceSelector } from "@/components/workflow/customization/data-source-selector"
import { MetricsSelector } from "@/components/workflow/customization/metrics-selector"
import { ChartSelector } from "@/components/workflow/customization/chart-selector"
import { MarketReport } from "@/components/workflow/report/market-report"
import { WorkflowEngine } from "@/lib/workflow/workflow-engine"
import { industries, marketTrendData } from "@/lib/workflow/market-research-data"
import type { MessageProps } from "@/components/workflow/chat-message"