From f9fdff1d5af6da6a73b0c9165eba1c4637371198 Mon Sep 17 00:00:00 2001 From: saeed0920 Date: Thu, 11 Sep 2025 14:05:02 +0330 Subject: [PATCH] setup charts in popup also fix bugs in sidebar --- .../product-innovation-page.tsx | 396 +++++++++++------- app/components/dashboard/sidebar.tsx | 1 + 2 files changed, 235 insertions(+), 162 deletions(-) diff --git a/app/components/dashboard/project-management/product-innovation-page.tsx b/app/components/dashboard/project-management/product-innovation-page.tsx index 962df80..16d1f11 100644 --- a/app/components/dashboard/project-management/product-innovation-page.tsx +++ b/app/components/dashboard/project-management/product-innovation-page.tsx @@ -22,7 +22,7 @@ import { Badge } from "~/components/ui/badge"; import { Button } from "~/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; import { Checkbox } from "~/components/ui/checkbox"; -import { CustomBarChart } from "~/components/ui/custom-bar-chart"; +import { Bar, BarChart, LabelList } from "recharts" import { FunnelChart } from "~/components/ui/funnel-chart"; import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"; import { @@ -138,7 +138,6 @@ export function ProductInnovationPage() { const [pageSize] = useState(20); const [hasMore, setHasMore] = useState(true); const [totalCount, setTotalCount] = useState(0); - const [actualTotalCount, setActualTotalCount] = useState(0); const [statsLoading, setStatsLoading] = useState(false); const [stats, setStats] = useState({ new_products_revenue_share: 0, @@ -199,21 +198,22 @@ export function ProductInnovationPage() { const observerRef = useRef(null); const fetchingRef = useRef(false); + const handleProjectDetails = async (project: ProductInnovationData) => { setSelectedProjectDetails(project); setDetailsDialogOpen(true); - await fetchPopupData(project.project_id); + await fetchPopupData(project); }; - const fetchPopupData = async (projectId: string) => { + const fetchPopupData = async (project: ProductInnovationData) => { try { setPopupLoading(true); // Fetch popup stats const statsResponse = await apiService.call({ innovation_product_popup_function1: { - project_id: projectId + project_id: project.project_id } }); @@ -239,12 +239,12 @@ export function ProductInnovationPage() { const chartData = JSON.parse(chartResponse.data); if (Array.isArray(chartData)) { // Set all data for line chart - setAllExportData(chartData); - + // Filter data for the selected project (bar chart) const filteredData = chartData.filter(item => - item.product_title === selectedProjectDetails?.title + item.product_title === project?.title ); + setAllExportData(chartData); setExportChartData(filteredData); } } @@ -486,16 +486,15 @@ export function ProductInnovationPage() { // Transform data for line chart const transformDataForLineChart = (data: any[]) => { - const seasons = [...new Set(data.map(item => item.full_season))].sort(); + const seasons = [...new Set(data.map(item => item.full_season))]; const products = [...new Set(data.map(item => item.product_title))]; - return seasons.map(season => { const seasonData: any = { season }; products.forEach(product => { const productData = data.find(item => item.product_title === product && item.full_season === season ); - seasonData[product] = productData ? Math.round(productData.export_revenue_sum / 1000000) : 0; + seasonData[product] = productData?.export_revenue_sum > 0 && productData ? Math.round(productData?.export_revenue_sum) : 0; }); return seasonData; }); @@ -550,7 +549,8 @@ export function ProductInnovationPage() { + + {/* Left Column - Project Description and Charts */} +
+ {/* Project Description */} +
+

+ {selectedProjectDetails?.title} +

+

+ {selectedProjectDetails?.project_description || "-"} +

+ + {/* Project Timeline */} +
+
+ ۱۴۰۴ + ۱۴۰۵ + ۱۴۰۶ + ۱۴۰۷ +
+
+
+
+ ثبت ایده +
+
+
+
+ تحلیل بازار +
+
+
+
+ توسعه +
+
+
+
+ تجاری سازی +
+
+
وضعیت فعلی: تحلیل بازار
+
+
+ + {/* Export Revenue Bar Chart */} +
+

ظرفیت صادر شده

+
+ {popupLoading ? ( +
+
در حال بارگذاری...
+
+ ) : exportChartData.length > 0 ? ( + + + + `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`} + /> + `${formatNumber(value)} میلیون`}/> + + `${formatNumber(value)}`} + position="top" + offset={15} + fill="F9FAFB" + className="fill-foreground" + fontSize={16} + /> + + + + + ) : ( +
+ داده‌ای برای نمایش وجود ندارد +
+ )} +
+
+ + {/* Export Revenue Line Chart */} +
+

ظرفیت صادر شده

+
+ {popupLoading ? ( +
+
در حال بارگذاری...
+
+ ) : allExportData.length > 0 ? ( + + + + ( + + + {payload.value} + + + )} + /> + `${formatNumber(value)} میلیون`} // 👈 اضافه کردن M کنار اعداد + /> + + `${formatNumber(value)} میلیون`} + contentStyle={{ + backgroundColor: "#1F2937", + border: "1px solid #374151", + borderRadius: "6px", + padding: "6px 10px", + fontSize: "11px", + color: "#F9FAFB", + }} + /> + + + {[...new Set(allExportData.map((item) => item.product_title))] + .slice(0, 5) + .map((product, index) => { + const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"]; + return ( + + ); + })} + + + + ) : ( +
+ داده‌ای برای نمایش وجود ندارد +
+ )} +
+
+
+ + diff --git a/app/components/dashboard/sidebar.tsx b/app/components/dashboard/sidebar.tsx index 4a90072..172a6dd 100644 --- a/app/components/dashboard/sidebar.tsx +++ b/app/components/dashboard/sidebar.tsx @@ -217,6 +217,7 @@ export function Sidebar({ if (item.id === "strategic-alignment") { return (