[V0_FILE]typescriptreact:file="planning-scenarios-submit-preview.tsx" isAttachmentQuickEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useCallback, useMemo } from "react" import { Dialog, DialogContent } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs" import { ArrowRight, TableProperties, Loader2, AlertCircle, ChevronLeft, ChevronRight } from "lucide-react" import { useQuery } from "@tanstack/react-query" import type { PlanningScenariosDetailsRes, planningScenarioTableUploadedDataRes, PlanningScenariosRes, } from "@/types/user/fpa-api-types" import { getAllPlanningScenarioDetailsById, getPlanningScenarioTableUploadedData, getSelectedPlanningScenariosByProjectId, } from "@/api/fpaApi" import Link from "next/link" interface PlanningScenariosPreviewProps { isOpen: boolean onclose: () => void projectId: number } const PlanningScenariosSubmitPreview: React.FC = ({ isOpen, onclose, projectId }) => { const [activeScenarioId, setActiveScenarioId] = useState("") const [selectedTable, setSelectedTable] = useState("") const [currentPage, setCurrentPage] = useState(1) // Fetch all selected planning scenarios const { data: scenariosData, isLoading: isScenariosLoading, isError: isScenariosError, error: scenariosError, refetch: refetchScenarios, } = useQuery({ queryKey: ["planningScenariosByProjectId", projectId], queryFn: () => getSelectedPlanningScenariosByProjectId(projectId), enabled: isOpen, }) const { data: scenarioDetails, isLoading: isDetailsLoading, isError: isDetailsError, refetch: refetchDetails, } = useQuery({ queryKey: ["planningScenarioDetailsById", activeScenarioId], queryFn: () => getAllPlanningScenarioDetailsById(Number(activeScenarioId)), enabled: !!activeScenarioId && isOpen, }) const { data: tableData, isLoading: isTableDataLoading, isError: isTableDataError, error: tableDataError, refetch: refetchTableData, } = useQuery({ queryKey: ["scenarioTableData", activeScenarioId, selectedTable, currentPage], queryFn: () => getPlanningScenarioTableUploadedData({ projectId, planning_scenario_id: Number(activeScenarioId), table_name: selectedTable, page: currentPage, }), enabled: !!activeScenarioId && !!selectedTable && isOpen, }) useEffect(() => { if (scenariosData?.data && scenariosData.data.length > 0 && !activeScenarioId) { setActiveScenarioId(scenariosData.data[0].id.toString()) } }, [scenariosData, activeScenarioId]) useEffect(() => { if (scenarioDetails?.data?.fields_name && scenarioDetails.data.fields_name.length > 0 && !selectedTable) { setSelectedTable(scenarioDetails.data.fields_name[0]) } }, [scenarioDetails, selectedTable]) useEffect(() => { setCurrentPage(1) }, [selectedTable, activeScenarioId]) useEffect(() => { let pollingInterval: NodeJS.Timeout if (tableData?.data?.status === "cleaning in Progress") { pollingInterval = setInterval(() => { refetchTableData() }, 5000) } return () => { if (pollingInterval) clearInterval(pollingInterval) } }, [tableData?.data?.status, refetchTableData]) const handleNextPage = useCallback(() => { if (tableData?.data?.next) { setCurrentPage((prev) => prev + 1) } }, [tableData?.data?.next]) const handlePrevPage = useCallback(() => { if (tableData?.data?.previous && currentPage > 1) { setCurrentPage((prev) => prev - 1) } }, [tableData?.data?.previous, currentPage]) const tables = useMemo(() => scenarioDetails?.data?.fields_name || [], [scenarioDetails]) const columns = useMemo( () => (selectedTable && scenarioDetails?.data?.fields?.[selectedTable]) || [], [scenarioDetails, selectedTable], ) const tableStatus = useMemo(() => tableData?.data?.status, [tableData]) // Render loading state if (isScenariosLoading) { return ( ) } // Render error state if (isScenariosError) { return ( ) } return ( {/* Header */}

Planning Scenarios Preview

{/* Tab Navigation */} {scenariosData?.data?.map((scenario) => ( {scenario.name} ))} {/* Main Content */} {scenariosData?.data?.map((scenario) => (

{/* Sidebar */}

Tables

{isDetailsLoading ? (

{[1, 2, 3, 4].map((i) => (

))}

) : isDetailsError ? (

Failed to load tables

) : tables.length === 0 ? (

No tables available

) : (

{tables.map((table) => ( ))}

)}

{/* Table Content */}

{selectedTable || "Select a table"}

{!selectedTable ? (

Select a table to view data

) : isTableDataLoading ? (

Loading table data...

) : isTableDataError ? (

Error loading table data

{(tableDataError as Error)?.message || "Failed to fetch table data"}

) : tableData?.data?.status === "failed" ? (

Processing failed

{tableData.data.message || "An error occurred while processing the data"}

) : tableStatus === "cleaning in Progress" ? (

Processing Data

Status: {tableStatus}

) : tableData?.data?.results && tableData.data.results.length > 0 ? (

{columns.map((column) => ( ))} {tableData.data.results.map((row: any, index: number) => ( {columns.map((column) => { const columnKey = column.toLowerCase().replace(/\s+/g, "_") return ( ) })} ))}

{column}
{row[columnKey] !== undefined ? row[columnKey] : "—"}

) : (

No data available for this table

)}

{/* Pagination */} {(tableData?.data?.next || tableData?.data?.previous) && (

{tableData.data.count && `Total: ${tableData.data.count} records`}

Page {currentPage}

)} {/* Footer Button */}

Proceed to Financial Planning

))} ) } export default PlanningScenariosSubmitPreview