diff --git a/app/components/dashboard/project-management/product-innovation-page.tsx b/app/components/dashboard/project-management/product-innovation-page.tsx
index 962df80..da18932 100644
--- a/app/components/dashboard/project-management/product-innovation-page.tsx
+++ b/app/components/dashboard/project-management/product-innovation-page.tsx
@@ -22,7 +22,13 @@ 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 {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "~/components/ui/popover"
+
 import { FunnelChart } from "~/components/ui/funnel-chart";
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
 import {
@@ -43,9 +49,10 @@ import {
   TableRow,
 } from "~/components/ui/table";
 import apiService from "~/lib/api";
-import { formatNumber } from "~/lib/utils";
+import { formatNumber, handleDataValue } from "~/lib/utils";
 import { DashboardLayout } from "../layout";
 import { Skeleton } from "~/components/ui/skeleton";
+import { Tooltip as TooltipSh,  TooltipTrigger, TooltipContent } from "~/components/ui/tooltip";
 
 moment.loadPersian({ usePersianDigits: true });
 
@@ -130,7 +137,57 @@ const columns = [
   { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
 ];
 
+
+export default function Timeline() {
+  const stages = ["تجاری سازی", "توسعه", "تحلیل بازار", "ثبت ایده"];
+  const currentStage = 1; // index of current stage
+
+  return (
+    <div className="w-full  p-4">
+      {/* Year labels */}
+      <div className="grid grid-cols-4 place-items-center border-b border-gray-300/40 mb-2 items-center text-slate-300 font-thin text-sm">
+        <span>۱۴۰۷</span>
+        <span>۱۴۰۶</span>
+        <span>۱۴۰۵</span>
+        <span>۱۴۰۴</span>
+      </div>
+
+      {/* Timeline bar */}
+      <div className="relative rounded-lg flex mb-4 items-center">
+        {stages.map((stage, index) => (
+          <div key={stage} className="flex-1  flex flex-col items-center relative">
+            <TooltipSh>
+              <TooltipTrigger asChild>
+                <div
+                  className={`w-full py-2 text-center transition-colors duration-300 ${
+                    index <= currentStage ? "bg-[#3D7968] text-white" : "bg-[#3AEA83] text-slate-600"
+                  }`}
+                >
+            <span className="mt-1 text-sm">{stage}</span>
+                </div>
+              </TooltipTrigger>
+            </TooltipSh>
+          </div>
+        ))}
+
+        {/* Vertical line showing current position */}
+        <div
+          className="absolute left-[37%] top-0 h-[150%] bottom-0 w-[2px] bg-white rounded-full"
+          style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
+        />
+         <div
+          className="absolute top-15 h-[max-content] translate-x-[-50%] text-xs text-gray-300 border-gray-400 rounded-md border px-2  bottom-0"
+          style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
+        >وضعیت فعلی</div>
+      </div>
+    </div>
+  );
+}
+
+
+
 export function ProductInnovationPage() {
+   const [showPopup, setShowPopup] = useState(false);
   const [projects, setProjects] = useState<ProductInnovationData[]>([]);
   const [loading, setLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
@@ -138,7 +195,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<ProductInnovationStats>({
     new_products_revenue_share: 0,
@@ -199,28 +255,30 @@ export function ProductInnovationPage() {
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
 
+ 
 
   const handleProjectDetails = async (project: ProductInnovationData) => {
     setSelectedProjectDetails(project);
+    console.log(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
         }
       });
 
       if (statsResponse.state === 0) {
         const statsData = JSON.parse(statsResponse.data);
         if (statsData.innovation_product_popup_function1 && statsData.innovation_product_popup_function1[0]) {
-          setPopupStats(statsData.innovation_product_popup_function1[0]);
+          setPopupStats(JSON.parse(statsData.innovation_product_popup_function1)[0]);
         }
       }
 
@@ -234,17 +292,16 @@ export function ProductInnovationPage() {
         ],
         GroupBy: ["product_title", "full_season"]
       });
-
       if (chartResponse.state === 0) {
         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 +543,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 +606,8 @@ export function ProductInnovationPage() {
           <Button
             variant="ghost"
             size="sm"
-            onClick={() => handleProjectDetails(item)}
+            onClick={() => {
+              handleProjectDetails(item)}}
             className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
           >
             جزئیات بیشتر
@@ -591,6 +648,20 @@ export function ProductInnovationPage() {
     }
   };
 
+  const seasonOrder = ["بهار", "تابستان", "پاییز", "زمستان"];
+  const sortedBarData = exportChartData
+  .sort((a, b) => {
+    const getSeasonIndex = (s: string) => {
+      const [seasonName, year] = s.split(" ");
+      return parseInt(year) * 4 + seasonOrder.indexOf(seasonName);
+    };
+    return getSeasonIndex(a.full_season) - getSeasonIndex(b.full_season);
+  })
+  .map((item) => ({
+    label: item.full_season,
+    value: item.export_revenue_sum < 0 ? 0  : Math.round(item.export_revenue_sum) ,
+  }));
+
   return (
     <DashboardLayout title="نوآوری در محصول">
       <div className="p-6 space-y-4 flex justify-center gap-4">
@@ -619,7 +690,7 @@ export function ProductInnovationPage() {
                     </div>
                           <div className="flex items-center justify-center flex-col p-1">
                             <div
-                              className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
+                              className="h-8 bg-gray-600 rounded animate-pulse"
                               style={{ width: "40%" }}
                             />
                             <div
@@ -631,7 +702,7 @@ export function ProductInnovationPage() {
                 </CardContent>
               </Card>
                   ))
-                : Object.entries(stateCard).map(([key, card] , index) => (
+                : Object.entries(stateCard).map(([key, card], index) => (
                     <Card
                       key={card.id}
                       className={`bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50   ${index !== 0 ? "row-start-2 " : "col-span-2"} `}
@@ -794,7 +865,7 @@ export function ProductInnovationPage() {
                         {columns.map((column) => (
                           <TableCell
                             key={column.key}
-                            className="text-center whitespace-nowrap border-emerald-500/20 py-1 px-2"
+                            className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2`}
                           >
                             {renderCellContent(project, column)}
                           </TableCell>
@@ -823,7 +894,7 @@ export function ProductInnovationPage() {
           <div className="p-2 px-4 bg-[#3F415A]">
             <div className="flex gap-4 text-sm text-gray-300 font-persian justify-between sm:flex-col xl:flex-row">
               <div className="text-center gap-2 items-center  xl:w-1/3 pr-36 sm:w-full">
-                <div className="text-base text-gray-401 mb-1">
+                <div className="text-base text-gray-401">
                   کل پروژه ها :{formatNumber(stats?.count_innovation_construction_inside_projects)}
                 </div>
               </div>
@@ -836,7 +907,7 @@ export function ProductInnovationPage() {
                   <span className="block w-7 h-2.5 bg-pink-400 rounded-tr-xl rounded-br-xl"></span>
                 </div>
                 <div className="flex justify-center items-center gap-2">
-                  <div className="text-base text-gray-400 mb-1">میانگین :‌</div>
+                  <div className="text-base text-gray-400">میانگین :‌</div>
                   <div className="font-bold">
                     {formatNumber(
                       ((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0
@@ -851,90 +922,283 @@ export function ProductInnovationPage() {
 
       {/* Project Details Dialog */}
         <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-7xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-7xl max-h-[95vh] overflow-y-auto">
             <DialogHeader>
-            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
-              جزئیات پروژه
+            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-2 font-persian text-right">
+              شرح پروژه
               </DialogTitle>
             </DialogHeader>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 px-6 py-2">
+             {/* right Column - Stats Cards and Details */}
+             <div className="space-y-4">
+              {/* Stats Cards */}
+              <div className="space-y-4">
+            <h3 className="font-bold text-lg">{selectedProjectDetails?.title}</h3>
+            <p className="py-2">{selectedProjectDetails?.project_description}</p>
+              </div>
+        <Timeline />
+
+              {/* Technical Knowledge */}
+              <div className=" rounded-lg py-2 mb-0">
+                <h3 className="text-sm text-gray-400 mb-2">دانش فنی محصول جدید</h3>
+             <div className="flex gap-4 items-center">
+  <div className="flex items-center gap-2">
+    <span className="text-sm text-white">توسعه درونزا</span>
+
+    <Checkbox
+      checked={selectedProjectDetails?.developed_technology_type === "توسعه درونزا"}
+      className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+    />
+  </div>
+
+  <div className="flex items-center gap-2">
+    <span className="text-sm text-white">همکاری فناورانه</span>
+
+    <Checkbox
+      checked={selectedProjectDetails?.developed_technology_type === "همکاری فناوری"}
+      className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+    />
+  </div>
+
+  <div className="flex items-center gap-2">
+    <span className="text-sm text-white">سایر</span>
+    <Checkbox
+      checked={selectedProjectDetails?.developed_technology_type === "سایر"}
+      className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+    />
+  </div>
+</div>
+              </div>
+
+              {/* Standards */}
+              <div className="rounded-lg py-4">
+  <h3 className="text-sm text-gray-400 mb-4">
+    استانداردهای ملی و بین‌المللی اخذ شده
+  </h3>
+
+  {selectedProjectDetails?.obtained_standard_title && selectedProjectDetails?.obtained_standard_title.length > 0 ? (
+    <div className="space-y-2">
+      {(Array.isArray(selectedProjectDetails?.obtained_standard_title)
+        ? selectedProjectDetails?.obtained_standard_title
+        : [selectedProjectDetails?.obtained_standard_title]
+      ).map((standard, index) => (
+        <div key={index} className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
+          <span className="text-sm text-white">{standard}</span>
+        </div>
+      ))}
+    </div>
+  ) : (
+    <p className="text-sm text-gray-500">
+      هیچ استانداردی ثبت نشده است.
+    </p>
+  )}
+</div>
+
+              {/* Knowledge-based Certificate Button */}
+               <div className="justify-self-centerr py-1  mx-auto">
+      {selectedProjectDetails?.knowledge_based_certificate_obtained === "خیر" ? (
+        <div className=" border border-red-600 rounded-lg p-2 text-center">
+          <button className="text-red-400 font-medium">
+            گواهی دانش‌بنیان ندارد
+          </button>
+        </div>
+      ) : (
+      <Card className="justify-self-center border-emerald-600 bg-transparent py-0">
+          <CardContent className="p-2 text-center">
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="default"
+                  className=" text-emerald-400 hover:bg-transparent cursor-pointer bg-transparent"
+                >
+                  مشاهده اطلاعات گواهی دانش‌بنیان
+                </Button>
+              </PopoverTrigger>
+
+              <PopoverContent
+                className="w-64 bg-gray-900 border border-gray-700 text-right"
+                align="center"
+              >
+                <div className="space-y-2">
+                  <p className="text-sm text-white">
+                    <span className="font-bold">شماره گواهی: </span>
+                    {selectedProjectDetails?.knowledge_based_certificate_number ||
+                      "—"}
+                  </p>
+                  <p className="text-sm text-white">
+                    <span className="font-bold">تاریخ اخذ: </span>
+                    {handleDataValue(selectedProjectDetails?.certificate_obtain_date) || "—"}
+                  </p>
+                  <p className="text-sm text-white">
+                    <span className="font-bold">مرجع صادرکننده: </span>
+                    {selectedProjectDetails?.issuing_authority || "—"}
+                  </p>
+                </div>
+              </PopoverContent>
+            </Popover>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+            </div>
           
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
             {/* Left Column - Project Description and Charts */}
-            <div className="lg:col-span-2 space-y-6">
+            {popupLoading ? (
+              <div className="lg:col-span-2 border-r-2 flex flex-col gap-2 pr-4 pb-2 border-r-[#5F6284]/50">
+                <div className="rounded-lg pt-4 flex w-full gap-2">
+                  <Card className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2">
+                    <CardContent className="p-2 h-full">
+                      <Skeleton className="h-full w-full" />
+                    </CardContent>
+                  </Card>
+                  <Card className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2">
+                    <CardContent className="p-2 h-full">
+                      <Skeleton className="h-full w-full" />
+                    </CardContent>
+                  </Card>
+                </div>
+                <div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)]  rounded-lg px-6 py-4">
+                  <Skeleton className="h-8 w-1/3 mb-4" />
+                  <Skeleton className="h-60 w-full" />
+                </div>
+                <div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)]  rounded-lg px-6 py-4">
+                  <Skeleton className="h-8 w-1/3 mb-4" />
+                  <Skeleton className="h-60 w-full" />
+                </div>
+              </div>
+            ) : (
+              <div className="lg:col-span-2 border-r-2 flex flex-col gap-2 pr-4 pb-2 border-r-[#5F6284]/50">
               {/* Project Description */}
-              <div className="bg-gray-800/50 rounded-lg p-6">
-                <h2 className="text-2xl font-bold text-white mb-4">
-                  {selectedProjectDetails?.title}
-                </h2>
-                <p className="text-gray-300 font-persian leading-relaxed">
-                  {selectedProjectDetails?.project_description || "-"}
-                </p>
-                
-                {/* Project Timeline */}
-                <div className="mt-6">
-                  <div className="flex items-center justify-between mb-4">
-                    <span className="text-sm text-gray-400">۱۴۰۴</span>
-                    <span className="text-sm text-gray-400">۱۴۰۵</span>
-                    <span className="text-sm text-gray-400">۱۴۰۶</span>
-                    <span className="text-sm text-gray-400">۱۴۰۷</span>
-              </div>
-                  <div className="flex items-center space-x-4">
-                    <div className="flex items-center space-x-2">
-                      <div className="w-4 h-4 bg-emerald-500 rounded-full"></div>
-                      <span className="text-sm text-white">ثبت ایده</span>
-              </div>
-                    <div className="flex-1 h-1 bg-gray-600"></div>
-                    <div className="flex items-center space-x-2">
-                      <div className="w-4 h-4 bg-emerald-500 rounded-full"></div>
-                      <span className="text-sm text-white">تحلیل بازار</span>
-              </div>
-                    <div className="flex-1 h-1 bg-gray-600"></div>
-                    <div className="flex items-center space-x-2">
-                      <div className="w-4 h-4 bg-gray-600 rounded-full"></div>
-                      <span className="text-sm text-gray-400">توسعه</span>
-              </div>
-                    <div className="flex-1 h-1 bg-gray-600"></div>
-                    <div className="flex items-center space-x-2">
-                      <div className="w-4 h-4 bg-gray-600 rounded-full"></div>
-                      <span className="text-sm text-gray-400">تجاری سازی</span>
-              </div>
-              </div>
-                  <div className="text-xs text-emerald-400 mt-2">وضعیت فعلی: تحلیل بازار</div>
-              </div>
+              <div className=" rounded-lg pt-4 flex w-full gap-2">
+                 <Card
+                      className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2"
+                    >
+                      <CardContent className="p-2 h-full">
+                        <div className="grid grid-cols-2  justify-between gap-2 h-full">
+                          <div className="flex justify-between rows-start-1 col-span-2 items-center border-b-2 mx-4 border-gray-500/20">
+                            <h3 className="text-lg  text-white font-persian py-2">
+                              میزان صادارت محصول جدید
+                    </h3>
+                    
+                  </div>
+                         
+                  <div className="flex col-span-1 items-center row-start-2 my-auto col-start-1 justify-center flex-col p-1 my-auto">
+                              <p
+                                className={`text-2xl font-bold  mb-1`}
+                              >
+                                {formatNumber(Math.round(popupStats?.new_products_export > 0 ? popupStats?.new_products_export : 0)) || formatNumber(0)}
+                              </p>
+                              <p className="text-xs font-thin text-gray-300 font-persian">
+                              میلیون ریال
+                              </p>
+                    </div>
+                  <span className="text-gray-600 row-start-2  self-center col-start-2 font-thin text-5xl">/</span>
+                     <div className="flex col-span-1 items-center row-start-2 my-auto col-start-2 justify-center flex-col p-1 my-auto">
+                              <p
+                                className={`text-2xl font-bold  mb-1`}
+                              >
+                                  {formatNumber(Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)) || formatNumber(0)}%
+                              </p>
+                              <p className="text-xs font-thin text-gray-300 font-persian">
+                                درصد به کل صادرات
+                              </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+      <Card
+                      className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2"
+                    >
+                      <CardContent  className="p-2 h-full">
+                        <div className="grid grid-cols-2  justify-between gap-2 h-full">
+                          <div className="flex justify-between rows-start-1 col-span-2 items-center border-b-2 mx-4 border-gray-500/20">
+                            <h3 className="text-lg  text-white font-persian py-2">
+                             تاثیر در واردات
+                    </h3>
+                    
+                  </div>
+                         
+                  <div className="flex col-span-1 items-center row-start-2 my-auto col-start-1 justify-center flex-col p-1 my-auto">
+                              <p
+                                className={`text-2xl font-bold  mb-1`}
+                              >
+                                {formatNumber(Math.round(popupStats?.import_impact > 0 ? popupStats?.import_impact : 0)) || formatNumber(0)}
+                              </p>
+                              <p className="text-xs font-thin text-gray-300 font-persian">
+                              میلیون ریال
+                              </p>
+                    </div>
+                  <span className="text-gray-600 row-start-2  self-center col-start-2 font-thin text-5xl">/</span>
+                     <div className="flex col-span-1 items-center row-start-2 my-auto col-start-2 justify-center flex-col p-1 my-auto">
+                              <p
+                                className={`text-2xl font-bold  mb-1`}
+                              >
+                                  {formatNumber(Math.round(popupStats?.import_impact_percent   > 0 ? popupStats?.import_impact_percent : 0)) || formatNumber(0)}%
+                              </p>
+                              <p className="text-xs font-thin text-gray-300 font-persian">
+                                درصد صرفه جویی
+                              </p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+
+              
               </div>
 
               {/* Export Revenue Bar Chart */}
-              <div className="bg-gray-800/50 rounded-lg p-6">
-                <h3 className="text-lg font-semibold text-white mb-4">ظرفیت صادر شده</h3>
-                <div className="h-64">
+              <div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)]  rounded-lg px-6 py-4">
+                <h3 className="text-lg font-semibold text-white">ظرفیت صادر شده</h3>
+                <div className="h-60">
                   {popupLoading ? (
                     <div className="flex items-center justify-center h-full">
-                      <div className="animate-pulse text-gray-400">در حال بارگذاری...</div>
+                      <div className="animate-pulse my-auto text-gray-400">در حال بارگذاری...</div>
               </div>
                   ) : exportChartData.length > 0 ? (
-                    <CustomBarChart
-                      title=""
-                      loading={false}
-                      data={exportChartData
-                        .sort((a, b) => {
-                          // Sort by season order
-                          const seasonOrder = ['بهار', 'تابستان', 'پاییز', 'زمستان'];
-                          const getSeasonIndex = (season: string) => {
-                            const year = season.split(' ')[1];
-                            const seasonName = season.split(' ')[0];
-                            return parseInt(year) * 4 + seasonOrder.indexOf(seasonName);
-                          };
-                          return getSeasonIndex(a.full_season) - getSeasonIndex(b.full_season);
-                        })
-                        .map(item => ({
-                          label: item.full_season,
-                          value: Math.round(item.export_revenue_sum / 1000000), // Convert to millions
-                          color: "bg-emerald-400",
-                          labelColor: "text-white"
-                        }))}
-                      barHeight="h-6"
-                      showAxisLabels={true}
+                    <ResponsiveContainer width="100%" height="100%" >
+                    <BarChart className="aspect-auto w-full"
+                    data={sortedBarData}  
+                    barGap={15}  
+                    barSize={30} 
+                    margin={{
+                      top : 18
+                    }}
+                      >
+                      <CartesianGrid vertical={false} stroke="#475569"  />
+                   <XAxis
+                      dataKey="label"
+                      tickLine={false}
+                      axisLine={false}
+                      stroke="#C3C3C3"
+                      tickMargin={8}
+                      tickFormatter={(value: string) => `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`}
                     />
+                      <YAxis               
+                      tickLine={false}
+                     axisLine={false}
+                      stroke="#9CA3AF"
+                      fontSize={11}  tick={{ dx: -50 }}  tickFormatter={(value: number) => `${formatNumber(value)} میلیون`}/>
+                      <Bar
+                        dataKey="value"
+                        fill="#10B981"
+                        radius={10}
+                      >
+                          <LabelList
+                            formatter={(value  : number) =>  `${formatNumber(value)}`} 
+                            position="top"
+                            offset={15}
+                            fill="F9FAFB"
+                            className="fill-foreground"
+                            fontSize={16}
+                          />
+                      </Bar>
+                       
+                    </BarChart>
+                  </ResponsiveContainer>
                   ) : (
                     <div className="flex items-center justify-center h-full text-gray-400">
                       داده‌ای برای نمایش وجود ندارد
@@ -944,52 +1208,90 @@ export function ProductInnovationPage() {
               </div>
 
               {/* Export Revenue Line Chart */}
-              <div className="bg-gray-800/50 rounded-lg p-6">
-                <h3 className="text-lg font-semibold text-white mb-4">ظرفیت صادر شده</h3>
-                <div className="h-64">
+              <div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)]  rounded-lg px-6 py-4">
+                <h3 className="text-lg font-semibold text-white">ظرفیت صادر شده</h3>
+                <div className="h-60">
                   {popupLoading ? (
-                    <div className="flex items-center justify-center h-full">
-                      <div className="animate-pulse text-gray-400">در حال بارگذاری...</div>
+                    <div className="flex items-center justify-center ">
+                      <div className="animate-pulse my-auto text-gray-400">در حال بارگذاری...</div>
                     </div>
                   ) : allExportData.length > 0 ? (
                     <ResponsiveContainer width="100%" height="100%">
-                      <LineChart data={transformDataForLineChart(allExportData)}>
-                        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-                        <XAxis 
-                          dataKey="season" 
-                          stroke="#9CA3AF"
-                          fontSize={12}
-                        />
-                        <YAxis 
-                          stroke="#9CA3AF"
-                          fontSize={12}
-                          domain={[0, 1000]}
-                        />
-                        <Tooltip 
-                          contentStyle={{
-                            backgroundColor: '#1F2937',
-                            border: '1px solid #374151',
-                            borderRadius: '8px',
-                            color: '#F9FAFB'
-                          }}
-                        />
-                        <Legend />
-                        {[...new Set(allExportData.map(item => item.product_title))].slice(0, 5).map((product, index) => {
-                          const colors = ['#10B981', '#EF4444', '#3B82F6', '#F59E0B', '#8B5CF6'];
+                    <LineChart
+                    accessibilityLayer 
+                    className="aspect-auto w-full "
+                      data={transformDataForLineChart(allExportData)}
+                      margin={{ top: 20, right: 30, left: 10, bottom: 50 }}
+                    >
+                      <CartesianGrid  vertical={false} stroke="#374151" />
+                      <XAxis
+                        dataKey="season"
+                        stroke="#9CA3AF"
+                        fontSize={11}
+                        tick={({ x, y, payload }) => (
+                          <g transform={`translate(${x},${y + 10})`}>
+                            <text
+                              x={-40}
+                              y={15}
+                              dy={0}
+                              textAnchor="end"
+                              fill="#9CA3AF"
+                              fontSize={11}
+                              transform="rotate(-45)"
+                            >
+                              {payload.value}
+                            </text>
+                          </g>
+                        )}
+                      />
+                      <YAxis
+                        tickLine={false}
+                        axisLine={false}
+                        stroke="#9CA3AF"
+                        fontSize={11}
+                        tick={{ dx: -50 }}
+                        tickFormatter={(value) => `${formatNumber(value)} میلیون`} // 👈 اضافه کردن M کنار اعداد
+                      />
+                  
+                  <Tooltip 
+                  formatter={(value : number) => `${formatNumber(value)} میلیون`}
+                  contentStyle={{
+                    backgroundColor: "#1F2937",
+                    border: "1px solid #374151",
+                    borderRadius: "6px",
+                    padding: "6px 10px",
+                    fontSize: "11px",
+                    color: "#F9FAFB",
+                  }}
+                />
+                <Legend
+                  layout="vertical"
+                  verticalAlign="middle"
+                  align="right"
+                  iconType={"plainline"}display={"flex !important"}                  
+                  className="!flex"
+                  wrapperStyle={{ fontSize: 11 , paddingLeft : 12 , display : "flex !important" , gap : 10} }
+                />
+                     
+                      {[...new Set(allExportData.map((item) => item.product_title))]
+                        .slice(0, 5)
+                        .map((product, index) => {
+                          const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"];
                           return (
                             <Line
-                              key={product}
-                              type="monotone"
+                              key={product.product_title}
+                              type="linear"
+                              dot={false}
+                              activeDot={{ r: 5 }}
                               dataKey={product}
                               stroke={colors[index % colors.length]}
                               strokeWidth={2}
-                              dot={{ fill: colors[index % colors.length], strokeWidth: 2, r: 4 }}
-                              name={`محصول ${index + 1}`}
                             />
                           );
                         })}
-                      </LineChart>
-                    </ResponsiveContainer>
+                    </LineChart>
+                  </ResponsiveContainer>
+                  
                   ) : (
                     <div className="flex items-center justify-center h-full text-gray-400">
                       داده‌ای برای نمایش وجود ندارد
@@ -998,114 +1300,9 @@ export function ProductInnovationPage() {
                 </div>
               </div>
             </div>
+          )}
 
-            {/* Right Column - Stats Cards and Details */}
-            <div className="space-y-6">
-              {/* Stats Cards */}
-              <div className="space-y-4">
-                <div className="bg-gray-800/50 rounded-lg p-4">
-                  <h3 className="text-sm text-gray-400 mb-2">میزان صادارت محصول جدید</h3>
-                  {popupLoading ? (
-                    <div className="animate-pulse">
-                      <div className="h-8 bg-gray-600 rounded mb-2"></div>
-                      <div className="h-4 bg-gray-600 rounded mb-2"></div>
-                      <div className="h-6 bg-gray-600 rounded"></div>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="text-2xl font-bold text-emerald-400 mb-1">
-                        {formatNumber(popupStats.new_products_export)}
-                      </div>
-                      <div className="text-sm text-gray-300">میلیون ریال</div>
-                      <div className="text-lg font-bold text-red-400 mt-2">
-                        {formatNumber(popupStats.new_products_export_percent)}%
-                      </div>
-                      <div className="text-xs text-gray-400">درصد به کل صادرات</div>
-                    </>
-                  )}
-                </div>
-
-                <div className="bg-gray-800/50 rounded-lg p-4">
-                  <h3 className="text-sm text-gray-400 mb-2">تاثیر در واردات</h3>
-                  {popupLoading ? (
-                    <div className="animate-pulse">
-                      <div className="h-8 bg-gray-600 rounded mb-2"></div>
-                      <div className="h-4 bg-gray-600 rounded mb-2"></div>
-                      <div className="h-6 bg-gray-600 rounded"></div>
-                    </div>
-                  ) : (
-                    <>
-                      <div className="text-2xl font-bold text-emerald-400 mb-1">
-                        {formatNumber(popupStats.import_impact)}
-                      </div>
-                      <div className="text-sm text-gray-300">میلیون ریال</div>
-                      <div className="text-lg font-bold text-red-400 mt-2">
-                        {formatNumber(popupStats.import_impact_percent)}%
-                      </div>
-                      <div className="text-xs text-gray-400">درصد صرفه جویی</div>
-                    </>
-                  )}
-                </div>
-              </div>
-
-              {/* Technical Knowledge */}
-              <div className="bg-gray-800/50 rounded-lg p-4">
-                <h3 className="text-sm text-gray-400 mb-4">دانش فنی محصول جدید</h3>
-                <div className="space-y-3">
-                  <div className="flex items-center space-x-3">
-                    <Checkbox 
-                      checked={false}
-                      className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
-                    />
-                    <span className="text-sm text-white">توسعه درونزا</span>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <Checkbox 
-                      checked={true}
-                      className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
-                    />
-                    <span className="text-sm text-white">همکاری فناورانه</span>
-                  </div>
-                  <div className="flex items-center space-x-3">
-                    <Checkbox 
-                      checked={true}
-                      className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
-                    />
-                    <span className="text-sm text-white">سایر</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Standards */}
-              <div className="bg-gray-800/50 rounded-lg p-4">
-                <h3 className="text-sm text-gray-400 mb-4">استانداردهای ملی و بین المللی اخذ شده</h3>
-                <div className="space-y-2">
-                  <div className="flex items-center space-x-2">
-                    <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
-                    <span className="text-sm text-white">استاندارد ملی شماره یک</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
-                    <span className="text-sm text-white">استاندارد بین المللی شماره یک</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
-                    <span className="text-sm text-white">استاندارد ملی شماره یک</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
-                    <span className="text-sm text-white">استاندارد ملی شماره یک</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Knowledge-based Certificate Button */}
-              <div className="bg-red-600/20 border border-red-600 rounded-lg p-4 text-center">
-                <button className="text-red-400 font-medium">
-                  گواهی دانش بنیان ندارد
-                </button>
-              </div>
-            </div>
+           
           </div>
           </DialogContent>
         </Dialog>
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 (
        <button
+       key={item.id}
             className={cn(
               "w-full text-right",
             )}
diff --git a/app/components/ui/popover.tsx b/app/components/ui/popover.tsx
new file mode 100644
index 0000000..9be5957
--- /dev/null
+++ b/app/components/ui/popover.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "~/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index dc79b88..2bc7fa1 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,5 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+import moment from "moment-jalaali";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -20,3 +21,23 @@ export const formatCurrency = (amount: string | number) => {
   if (isNaN(numericAmount)) return "0 ریال";
   return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
 };
+
+
+
+export const  handleDataValue = (val: any): any => {
+moment.loadPersian({ usePersianDigits: true });
+  if (val == null) return val;
+  if (
+    typeof val === "string" &&
+    /^\d{4}[-/]\d{2}[-/]\d{2}( \d{2}:\d{2}(:\d{2})?)?$/.test(val)
+  ) {
+    return moment(val, "YYYY-MM-DD HH:mm:ss").format("YYYY/MM/DD");
+  }
+  if (
+    typeof val === "number" ||
+    (typeof val === "string" && /^-?\d+$/.test(val))
+  ) {
+    return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
+  }
+  return val;
+}
diff --git a/package.json b/package.json
index e855d04..fcd6efb 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a0691b8..b6aaa68 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,6 +20,9 @@ importers:
       '@radix-ui/react-label':
         specifier: ^2.0.2
         version: 2.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-popover':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       '@radix-ui/react-progress':
         specifier: ^1.1.7
         version: 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -645,6 +648,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popper@1.2.8':
     resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
     peerDependencies:
@@ -3009,6 +3025,29 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
+      aria-hidden: 1.2.6
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+      react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
   '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
     dependencies:
       '@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)