fix: set dynamic dialog conetnt

app/components/dashboard/project-management/digital-innovation-page.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { DashboardLayout } from "../layout";
 import { Card, CardContent } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
@@ -41,7 +41,6 @@ import {
   LoaderCircle,
 } from "lucide-react";
 import { CustomBarChart } from "~/components/ui/custom-bar-chart";
-import { color } from "d3";
 
 moment.loadPersian({ usePersianDigits: true });
 
@@ -74,7 +73,7 @@ interface DigitalInnovationMetrics {
 
 // Normalized interface for digital innovation stats
 interface DigitalInnovationStats {
-  totalDigitalProjects: number;
+  // totalDigitalProjects: number;
   increasedRevenue: number;
   increasedRevenuePercent: number;
   reduceCosts: number;
@@ -98,6 +97,8 @@ interface ProcessInnovationData {
   project_status: string;
   project_rating: string;
   project_description: string;
+  total_project: number;
+  WorkflowID: number;
 }
 
 interface HouseItem {
@@ -128,6 +129,7 @@ const columns = [
     sortable: true,
     width: "140px",
   },
+  { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
 ];
 
 export function DigitalInnovationPage() {
@@ -140,8 +142,9 @@ export function DigitalInnovationPage() {
   const [totalCount, setTotalCount] = useState(0);
   const [actualTotalCount, setActualTotalCount] = useState(0);
   const [statsLoading, setStatsLoading] = useState(false);
+  const [rating, setRating] = useState<ListItem[]>([]);
+  const [dialogInfo, setDialogInfo] = useState<ProcessInnovationData>();
   const [stats, setStats] = useState<DigitalInnovationStats>({
-    totalDigitalProjects: 0,
     increasedRevenue: 0,
     increasedRevenuePercent: 0,
     reduceCosts: 0,
@@ -173,21 +176,16 @@ export function DigitalInnovationPage() {
     }
   };
 
-  //   const handleSelectProject = (projectNo: string) => {
+  const handleProjectDetails = (project: ProcessInnovationData) => {
-  //     const newSelected = new Set(selectedProjects);
+    const model: ListItem = {
-  //     if (newSelected.has(projectNo)) {
+      label: `فرآیند-${project.WorkflowID}`,
-  //       newSelected.delete(projectNo);
+      development: +project.project_rating,
-  //     } else {
+      house: [],
-  //       newSelected.add(projectNo);
+    };
-  //     }
+    setRating([model]);
-  //     setSelectedProjects(newSelected);
+    setDialogInfo(project);
-  //   };
+    setDetailsDialogOpen(true);
-
+  };
-  //   const handleProjectDetails = (project: ProcessInnovationData) => {
-  //     console.log(project);
-  //     // setSelectedProjectDetails(project);
-  //     setDetailsDialogOpen(true);
-  //   };
 
   const formatNumber = (value: string | number) => {
     if (!value) return "0";
@@ -260,9 +258,17 @@ export function DigitalInnovationPage() {
         OutputFields: [
           "project_no",
           "title",
-          "project_description",
           "project_status",
           "project_rating",
+          "project_description",
+          "digital_competence",
+          "originality_digital_solution",
+          "digital_puberty_elements",
+          "digital_capability",
+          "operational_plan",
+          "desired_strategy",
+          "innovation_cost_reduction",
+          "reduce_costs_percent"
         ],
         Sorts: [["start_date", "asc"]],
         Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
@@ -389,7 +395,7 @@ export function DigitalInnovationPage() {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
+        Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
       });
 
       if (response.state === 0) {
@@ -438,11 +444,7 @@ export function DigitalInnovationPage() {
         }
         return 0;
       };
-
       const normalized: DigitalInnovationStats = {
-        totalDigitalProjects: parseNum(
-          payload?.count_innovation_digital_projects
-        ),
         increasedRevenue: parseNum(payload?.increased_revenue),
         increasedRevenuePercent: parseNum(payload?.increased_revenue_percent),
         reduceCosts: parseNum(payload?.reduce_costs),
@@ -465,15 +467,15 @@ export function DigitalInnovationPage() {
     }
   };
 
-  const handleRefresh = () => {
+  // const handleRefresh = () => {
-    fetchingRef.current = false;
+  //   fetchingRef.current = false;
-    setCurrentPage(1);
+  //   setCurrentPage(1);
-    setProjects([]);
+  //   setProjects([]);
-    setHasMore(true);
+  //   setHasMore(true);
-    fetchTable(true);
+  //   fetchTable(true);
-    fetchTotalCount();
+  //   fetchTotalCount();
-    fetchStats();
+  //   fetchStats();
-  };
+  // };
 
   const formatCurrency = (amount: string | number) => {
     if (!amount) return "0 ریال";
@@ -485,67 +487,10 @@ export function DigitalInnovationPage() {
     return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
   };
 
-  // const formatPercentage = (value: string | number) => {
+  const renderProgress = useMemo(() => {
-  //   if (!value) return "0%";
-  //   const numericValue = typeof value === "string" ? parseFloat(value) : value;
-  //   if (isNaN(numericValue)) return "0%";
-  //   return `${numericValue.toFixed(1)}%`;
-  // };
-
-  // const getStatusColor = (status: string) => {
-  //   switch (status?.toLowerCase()) {
-  //     case "فعال":
-  //       return "#3AEA83";
-  //     case "متوقف":
-  //       return "#F76276";
-  //     case "تکمیل شده":
-  //       return "#32CD32";
-  //     default:
-  //       return "#6B7280";
-  //   }
-  // };
-
-  // const getRatingColor = (rating: string) => {
-  //   const ratingNum = parseFloat(rating);
-  //   if (isNaN(ratingNum)) return "#6B7280";
-
-  //   if (ratingNum >= 8) return "#3AEA83";
-  //   if (ratingNum >= 6) return "#69C8EA";
-  //   if (ratingNum >= 4) return "#FFD700";
-  //   return "#F76276";
-  // };
-
-  const [list, setList] = useState<ListItem[]>([
-    {
-      label: "فرآیند1",
-      development: 40,
-      house: [],
-    },
-    {
-      label: "فرآیند2",
-      development: 30,
-      house: [],
-    },
-    {
-      label: "فرآیند3",
-      development: 40,
-      house: [],
-    },
-    {
-      label: "فرآیند4",
-      development: 50,
-      house: [],
-    },
-    {
-      label: "فرآیند5",
-      development: 91.6,
-      house: [],
-    },
-  ]);
-  const renderProgress = () => {
     const total = 10;
-    for (let i = 0; i < list.length; i++) {
+    for (let i = 0; i < rating.length; i++) {
-      const currentElm = list[i];
+      const currentElm = rating[i];
       currentElm.house = [];
       const greenBoxes = Math.floor((total * currentElm.development) / 100);
       const partialPercent =
@@ -561,18 +506,14 @@ export function DigitalInnovationPage() {
           index: greenBoxes + 1,
           style: `linear-gradient(
             to right,
-            lch(87 118.17 147.55) 0%, 
+            oklch(76.5% 0.177 163.223) 0%, 
-            lch(87 118.17 147.55) ${partialPercent * 100}%,
+            oklch(76.5% 0.177 163.223) ${partialPercent * 100}%,
             oklch(55.1% 0.027 264.364) ${partialPercent * 100}%,
             oklch(55.1% 0.027 264.364) 100%
           )`,
         });
     }
-  };
+  }, [rating]);
-
-  useEffect(() => {
-    renderProgress();
-  }, []);
 
   const renderCellContent = (item: any, column: any) => {
     const value = item[column.key as keyof ProcessInnovationData];
@@ -591,7 +532,7 @@ export function DigitalInnovationPage() {
           <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"
           >
             جزئیات بیشتر
@@ -684,7 +625,6 @@ export function DigitalInnovationPage() {
                   ))
                 : statsCards.map((card) => (
                     <Card
-                      onClick={() => setDetailsDialogOpen(true)}
                       key={card.id}
                       className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
                     >
@@ -877,9 +817,7 @@ export function DigitalInnovationPage() {
             <div className="grid grid-cols-6 gap-4 text-sm text-gray-300 font-persian">
               <div className="text-center gap-2 items-center flex">
                 <div className="text-base text-gray-401 mb-1">
-                  {" "}
+                  کل پروژه ها :{formatNumber(actualTotalCount)}
-                  کل پروژه ها :{" "}
-                  {formatNumber(stats.totalDigitalProjects || actualTotalCount)}
                 </div>
               </div>
               {/* Project number column - empty */}
@@ -922,20 +860,10 @@ export function DigitalInnovationPage() {
           <div className="body grid grid-cols-[40%_20%_40%]">
             <div className="border-l-2 border-l-gray-600 px-6">
               <span className="title text-lg font-bold">
-                توسعه فناوری جدید در تولید پلی‌اتیلن
+                {dialogInfo?.title}
               </span>
               <p className="p-0 py-4 pb-8 text-justify text-base">
-                در این پروژه، هدف اصلی طراحی یک نقشه راه جامع برای تحول دیجیتال
+                {dialogInfo?.project_description}
-                در صنعت پتروشیمی بوده است. با توجه به روند سریع تغییرات
-                تکنولوژیکی و رقابت فزاینده در بازار، این پروژه به شناسایی و
-                پیاده‌سازی استراتژی‌های دیجیتال برای بهینه‌سازی فرآیندهای تولید،
-                مدیریت منابع، و ارتقاء بهره‌وری در واحدهای مختلف پتروشیمی
-                پرداخته است. در این پروژه، هدف اصلی طراحی یک نقشه راه جامع برای
-                تحول دیجیتال در صنعت پتروشیمی بوده است. با توجه به روند سریع
-                تغییرات تکنولوژیکی و رقابت فزاینده در بازار، این پروژه به
-                شناسایی و پیاده‌سازی استراتژی‌های دیجیتال برای بهینه‌سازی
-                فرآیندهای تولید، مدیریت منابع، و ارتقاء بهره‌وری در واحدهای
-                مختلف پتروشیمی پرداخته است.
               </p>
               <div className="details flex flex-col gap-3">
                 <span className="text-lg font-bold">ویژگی های اصلی پروژه:</span>
@@ -1100,9 +1028,12 @@ export function DigitalInnovationPage() {
                   <span>درصد پیشرفت</span>
                 </div>
                 <div className="rows flex flex-col gap-2">
-                  {list.map((el, index) => {
+                  {rating.map((el, index) => {
                     return (
-                      <div className="row border-b-1 border-b-[#3F415A] pb-2 px-2  flex justify-between items-center last:border-none">
+                      <div
+                        className="row border-b-1 border-b-[#3F415A] pb-2 px-2  flex justify-between items-center last:border-none"
+                        key={`rating-${index}`}
+                      >
                         <span className="pName">{el.label}</span>
                         <div
                           className="ProgressBar flex flex-row gap-1 rounded-md overflow-hidden"

app/components/dashboard/project-management/process-innovation-page.tsx

@@ -149,7 +149,6 @@ export function ProcessInnovationPage() {
   };
 
   const handleProjectDetails = (project: ProcessInnovationData) => {
-    console.log(project);
     setSelectedProjectDetails(project);
     setDetailsDialogOpen(true);
   };
@@ -640,7 +639,7 @@ export function ProcessInnovationPage() {
 
           {/* Process Impacts Chart */}
           <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
-            <CardContent className="p-4">
+            <CardContent >
               <CustomBarChart
                 title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
                 loading={statsLoading}