add popup for innvation ,also fix the zoom initial in graph popup

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

@@ -5,6 +5,7 @@ import { Button } from "~/components/ui/button";
 import { Badge } from "~/components/ui/badge";
 import { Checkbox } from "~/components/ui/checkbox";
 import { CustomBarChart } from "~/components/ui/custom-bar-chart";
+import moment from "moment-jalaali";
 import type { BarChartData } from "~/components/ui/custom-bar-chart";
 import {
   Table,
@@ -25,11 +26,17 @@ import {
   ChevronDown,
   RefreshCw,
   ExternalLink,
+  Building2,
+  PickaxeIcon,
+  UserIcon,
+  UsersIcon,
 } from "lucide-react";
 import apiService from "~/lib/api";
 import toast from "react-hot-toast";
-import {Funnel, Wrench , CirclePause , DollarSign} from "lucide-react"
+import { Funnel, Wrench, CirclePause, DollarSign } from "lucide-react";
+import ProjectDetail from "../projects/project-detail";
 
+moment.loadPersian({ usePersianDigits: true });
 interface ProcessInnovationData {
   project_no: string;
   title: string;
@@ -39,6 +46,7 @@ interface ProcessInnovationData {
   throat_removal: string;
   amount_currency_reduction: string;
   Reduce_rate_failure: string;
+  observer: string;
 }
 
 interface SortConfig {
@@ -72,9 +80,19 @@ const columns = [
   { key: "select", label: "", sortable: false, width: "50px" },
   { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
   { key: "title", label: "عنوان پروژه", sortable: true, width: "400px" },
-  { key: "project_status", label: "وضعیت پروژه", sortable: true, width: "140px" },
+  {
-  { key: "project_rating", label: "امتیاز پروژه", sortable: true, width: "140px" },
+    key: "project_status",
-  { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" }
+    label: "وضعیت پروژه",
+    sortable: true,
+    width: "140px",
+  },
+  {
+    key: "project_rating",
+    label: "امتیاز پروژه",
+    sortable: true,
+    width: "140px",
+  },
+  { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
 ];
 
 export function ProcessInnovationPage() {
@@ -103,9 +121,12 @@ export function ProcessInnovationPage() {
     field: "start_date",
     direction: "asc",
   });
-  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(new Set());
+  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
+    new Set(),
+  );
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-  const [selectedProjectDetails, setSelectedProjectDetails] = useState<ProcessInnovationData | null>(null);
+  const [selectedProjectDetails, setSelectedProjectDetails] =
+    useState<ProcessInnovationData | null>(null);
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
 
@@ -114,7 +135,7 @@ export function ProcessInnovationPage() {
     if (selectedProjects.size === projects.length) {
       setSelectedProjects(new Set());
     } else {
-      setSelectedProjects(new Set(projects.map(p => p.project_no)));
+      setSelectedProjects(new Set(projects.map((p) => p.project_no)));
     }
   };
 
@@ -129,6 +150,7 @@ export function ProcessInnovationPage() {
   };
 
   const handleProjectDetails = (project: ProcessInnovationData) => {
+    console.log(project);
     setSelectedProjectDetails(project);
     setDetailsDialogOpen(true);
   };
@@ -145,9 +167,12 @@ export function ProcessInnovationPage() {
     {
       id: "production-stops-prevention",
       title: "جلوگیری از توقفات تولید",
-      value: formatNumber(stats.productionStopsPreventionSum.toFixed?.(1) ?? stats.productionStopsPreventionSum),
+      value: formatNumber(
+        stats.productionStopsPreventionSum.toFixed?.(1) ??
+          stats.productionStopsPreventionSum,
+      ),
       description: "ظرفیت افزایش یافته",
-      icon: <CirclePause/>,
+      icon: <CirclePause />,
       color: "text-emerald-400",
     },
     {
@@ -156,25 +181,30 @@ export function ProcessInnovationPage() {
       value: formatNumber(stats.bottleneckRemovalCount),
       description: "تعداد رفع گلوگاه",
       icon: <Funnel />,
-      color: "text-emerald-400"
+      color: "text-emerald-400",
     },
 
     {
       id: "currency-reduction",
       title: "کاهش ارز بری",
-      value: formatNumber(stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum),
+      value: formatNumber(
+        stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum,
+      ),
       description: "دلار کاهش یافته",
-      icon: <DollarSign/>,
+      icon: <DollarSign />,
       color: "text-emerald-400",
     },
     {
       id: "frequent-failures-reduction",
       title: "کاهش خرابیهای پرتکرار",
-      value: formatNumber(stats.frequentFailuresReductionSum.toFixed?.(1) ?? stats.frequentFailuresReductionSum),
+      value: formatNumber(
+        stats.frequentFailuresReductionSum.toFixed?.(1) ??
+          stats.frequentFailuresReductionSum,
+      ),
       description: "مجموع درصد کاهش خرابی",
-      icon: <Wrench/>,
+      icon: <Wrench />,
       color: "text-emerald-400",
-    }
+    },
   ];
 
   const fetchProjects = async (reset = false) => {
@@ -201,16 +231,22 @@ export function ProcessInnovationPage() {
           "title",
           "project_status",
           "project_rating",
-          "reduce_prevention_production_stops",
           "throat_removal",
+          "reduce_prevention_production_stops",
           "amount_currency_reduction",
           "Reduce_rate_failure",
+          "project_description",
+          "start_date",
+          "done_date",
+          "approved_budget",
+          "observer",
         ],
-        Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
+        Sorts: [["start_date", "asc"]],
-        Sorts: [[sortConfig.field, sortConfig.direction]],
         Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
+        Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
       });
 
+      console.log(JSON.parse(response.data));
       if (response.state === 0) {
         const dataString = response.data;
         if (dataString && typeof dataString === "string") {
@@ -289,7 +325,7 @@ export function ProcessInnovationPage() {
   }, [currentPage]);
 
   useEffect(() => {
-    const scrollContainer = document.querySelector('.overflow-auto');
+    const scrollContainer = document.querySelector(".overflow-auto");
 
     const handleScroll = () => {
       if (!scrollContainer || !hasMore || loadingMore) return;
@@ -303,12 +339,12 @@ export function ProcessInnovationPage() {
     };
 
     if (scrollContainer) {
-      scrollContainer.addEventListener('scroll', handleScroll);
+      scrollContainer.addEventListener("scroll", handleScroll);
     }
 
     return () => {
       if (scrollContainer) {
-        scrollContainer.removeEventListener('scroll', handleScroll);
+        scrollContainer.removeEventListener("scroll", handleScroll);
       }
     };
   }, [loadMore, hasMore, loadingMore]);
@@ -359,13 +395,14 @@ export function ProcessInnovationPage() {
     try {
       setStatsLoading(true);
       const raw = await apiService.callInnovationProcess<any>({
-        innovation_process_function: {
+        innovation_process_function: {},
-        },
       });
 
       let payload: any = raw?.data;
       if (typeof payload === "string") {
-        try { payload = JSON.parse(payload); } catch {}
+        try {
+          payload = JSON.parse(payload);
+        } catch {}
       }
 
       const parseNum = (v: unknown): number => {
@@ -382,14 +419,24 @@ export function ProcessInnovationPage() {
       const normalized: InnovationStats = {
         totalProjects: parseNum(payload?.count_innovation_process_projects),
         averageScore: parseNum(payload?.average_project_score),
-        productionStopsPreventionSum: parseNum(payload?.sum_stopping_production),
+        productionStopsPreventionSum: parseNum(
+          payload?.sum_stopping_production,
+        ),
         bottleneckRemovalCount: parseNum(payload?.count_throat_removal),
         currencyReductionSum: parseNum(payload?.sum_reduction_value_currency),
-        frequentFailuresReductionSum: parseNum(payload?.sum_reducing_breakdowns),
+        frequentFailuresReductionSum: parseNum(
-        percentProductionStops: parseNum(payload?.percent_sum_stopping_production),
+          payload?.sum_reducing_breakdowns,
+        ),
+        percentProductionStops: parseNum(
+          payload?.percent_sum_stopping_production,
+        ),
         percentBottleneckRemoval: parseNum(payload?.percent_throat_removal),
-        percentCurrencyReduction: parseNum(payload?.percent_reduction_value_currency),
+        percentCurrencyReduction: parseNum(
-        percentFailuresReduction: parseNum(payload?.percent_reducing_breakdowns),
+          payload?.percent_reduction_value_currency,
+        ),
+        percentFailuresReduction: parseNum(
+          payload?.percent_reducing_breakdowns,
+        ),
       };
 
       setStats(normalized);
@@ -481,10 +528,7 @@ export function ProcessInnovationPage() {
         );
       case "project_no":
         return (
-          <Badge
+          <Badge variant="outline" className="font-mono">
-            variant="outline"
-            className="font-mono"
-          >
             {String(value)}
           </Badge>
         );
@@ -496,7 +540,7 @@ export function ProcessInnovationPage() {
             variant="outline"
             className="font-medium border-2"
             style={{
-              border:"none",
+              border: "none",
             }}
           >
             {String(value)}
@@ -504,10 +548,7 @@ export function ProcessInnovationPage() {
         );
       case "project_rating":
         return (
-          <Badge
+          <Badge variant="outline" className="text-lg text-center border-none">
-            variant="outline"
-            className="text-lg text-center border-none"
-          >
             {formatNumber(String(value))}
           </Badge>
         );
@@ -532,53 +573,69 @@ export function ProcessInnovationPage() {
           <div className="space-y-6 w-full">
             {/* Stats Grid */}
             <div className="grid grid-cols-2 gap-3">
-            {loading || statsLoading ? (
+              {loading || statsLoading
-              // Loading skeleton for stats cards - matching new design
+                ? // Loading skeleton for stats cards - matching new design
                   Array.from({ length: 4 }).map((_, index) => (
-                <Card key={`skeleton-${index}`} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden">
+                    <Card
+                      key={`skeleton-${index}`}
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
+                    >
                       <CardContent className="p-2">
                         <div className="flex flex-col justify-between gap-2">
                           <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
-                        <div className="h-6 bg-gray-600 rounded animate-pulse" style={{ width: '60%' }} />
+                            <div
+                              className="h-6 bg-gray-600 rounded animate-pulse"
+                              style={{ width: "60%" }}
+                            />
                             <div className="p-3 bg-emerald-500/20 rounded-full w-fit">
                               <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
                             </div>
                           </div>
                           <div className="flex items-center justify-center flex-col p-1">
-                        <div className="h-8 bg-gray-600 rounded mb-1 animate-pulse" style={{ width: '40%' }} />
+                            <div
-                        <div className="h-4 bg-gray-600 rounded animate-pulse" style={{ width: '80%' }} />
+                              className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
+                              style={{ width: "40%" }}
+                            />
+                            <div
+                              className="h-4 bg-gray-600 rounded animate-pulse"
+                              style={{ width: "80%" }}
+                            />
                           </div>
                         </div>
                       </CardContent>
                     </Card>
                   ))
-            ) : (
+                : statsCards.map((card) => (
-              statsCards.map((card) => (
+                    <Card
-                <Card key={card.id} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
+                      key={card.id}
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
+                    >
                       <CardContent className="p-2">
                         <div className="flex flex-col justify-between gap-2">
                           <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
                             <h3 className="text-lg font-bold text-white font-persian">
                               {card.title}
                             </h3>
-                        <div className={`p-3 gird placeitems-center rounded-full w-fit `}>
+                            <div
+                              className={`p-3 gird placeitems-center rounded-full w-fit `}
+                            >
                               {card.icon}
                             </div>
                           </div>
                           <div className="flex items-center justify-center flex-col p-1">
-                         <p className={`text-3xl font-bold ${card.color} mb-1`}>
+                            <p
+                              className={`text-3xl font-bold ${card.color} mb-1`}
+                            >
                               {card.value}
                             </p>
                             <p className="text-sm text-gray-300 font-persian">
                               {card.description}
                             </p>
-
                           </div>
                         </div>
                       </CardContent>
                     </Card>
-              ))
+                  ))}
-            )}
             </div>
           </div>
 
@@ -593,33 +650,33 @@ export function ProcessInnovationPage() {
                     label: "کاهش توقفات تولید",
                     value: stats.percentProductionStops || 0,
                     color: "bg-emerald-400",
-                  labelColor: "text-white"
+                    labelColor: "text-white",
                   },
                   {
                     label: "رفع گلوگاه تولید",
                     value: stats.percentBottleneckRemoval || 0,
                     color: "bg-emerald-400",
-                  labelColor: "text-white"
+                    labelColor: "text-white",
                   },
                   {
                     label: "کاهش ارز بری",
                     value: stats.percentCurrencyReduction || 0,
                     color: "bg-emerald-400",
-                  labelColor: "text-white"
+                    labelColor: "text-white",
                   },
                   {
                     label: "کاهش خرابی پر تکرار",
                     value: stats.percentFailuresReduction || 0,
                     color: "bg-emerald-400",
-                  labelColor: "text-white"
+                    labelColor: "text-white",
-                }
+                  },
                 ]}
                 barHeight="h-5"
                 showAxisLabels={true}
               />
             </CardContent>
           </Card>
-</div>
+        </div>
 
         {/* Data Table */}
         <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
@@ -637,7 +694,10 @@ export function ProcessInnovationPage() {
                         {column.key === "select" ? (
                           <div className="flex items-center justify-center">
                             <Checkbox
-                                checked={selectedProjects.size === projects.length && projects.length > 0}
+                              checked={
+                                selectedProjects.size === projects.length &&
+                                projects.length > 0
+                              }
                               onCheckedChange={handleSelectAll}
                               className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
                             />
@@ -669,7 +729,10 @@ export function ProcessInnovationPage() {
                   {loading ? (
                     // Skeleton loading rows (compact)
                     Array.from({ length: 10 }).map((_, index) => (
-                        <TableRow key={`skeleton-${index}`} className="text-sm leading-tight h-8">
+                      <TableRow
+                        key={`skeleton-${index}`}
+                        className="text-sm leading-tight h-8"
+                      >
                         {columns.map((column) => (
                           <TableCell
                             key={column.key}
@@ -677,7 +740,10 @@ export function ProcessInnovationPage() {
                           >
                             <div className="flex items-center gap-2">
                               <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
-                                <div className="h-2.5 bg-gray-600 rounded animate-pulse" style={{ width: `${Math.random() * 60 + 40}%` }} />
+                              <div
+                                className="h-2.5 bg-gray-600 rounded animate-pulse"
+                                style={{ width: `${Math.random() * 60 + 40}%` }}
+                              />
                             </div>
                           </TableCell>
                         ))}
@@ -696,11 +762,14 @@ export function ProcessInnovationPage() {
                     </TableRow>
                   ) : (
                     projects.map((project, index) => (
-                        <TableRow key={`${project.project_no}-${index}`} className="text-sm leading-tight h-8">
+                      <TableRow
+                        key={`${project.project_no}-${index}`}
+                        className="text-sm leading-tight h-8"
+                      >
                         {columns.map((column) => (
                           <TableCell
                             key={column.key}
-                              className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key==="select" ? "flex justify-center items-center" :""}`}
+                            className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
                           >
                             {renderCellContent(project, column)}
                           </TableCell>
@@ -718,8 +787,7 @@ export function ProcessInnovationPage() {
                 <div className="flex items-center justify-center py-1">
                   <div className="flex items-center gap-2">
                     <RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
-                    <span className="font-persian text-gray-300 text-xs">
+                    <span className="font-persian text-gray-300 text-xs"></span>
-                    </span>
                   </div>
                 </div>
               )}
@@ -753,7 +821,11 @@ export function ProcessInnovationPage() {
           <div className="p-2 px-4 bg-gray-700/50">
             <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(stats.totalProjects || actualTotalCount)}</div>
+                <div className="text-base text-gray-401 mb-1">
+                  {" "}
+                  کل پروژه ها :{" "}
+                  {formatNumber(stats.totalProjects || actualTotalCount)}
+                </div>
               </div>
               {/* Project number column - empty */}
               <div></div>
@@ -763,126 +835,103 @@ export function ProcessInnovationPage() {
               <div></div>
               {/* Project rating column - show average */}
               <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 mb-1">
+                  {" "}
+                  میانگین امتیاز :‌
+                </div>
                 <div className="font-bold">
-                  {formatNumber(((stats.averageScore ?? 0) as number).toFixed?.(1) ?? (stats.averageScore ?? 0))}
+                  {formatNumber(
+                    ((stats.averageScore ?? 0) as number).toFixed?.(1) ??
+                      stats.averageScore ??
+                      0,
+                  )}
                 </div>
               </div>
 
               {/* Details column - show total count */}
-              
             </div>
           </div>
-
-
         </Card>
       </div>
 
       {/* Project Details Dialog */}
       <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-        <DialogContent className="bg-[#2A2D3E] border-gray-700 max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-4xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-white font-persian text-right">
+            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
-              جزئیات پروژه
+              شرح پروژه
             </DialogTitle>
           </DialogHeader>
-          
+          <div className="space-y-4 flex justify-between text-right px-6">
-          {selectedProjectDetails && (
+            {/* Project Description */}
-            <div className="space-y-6 text-right">
+            <div className="flex-[4] border-l-2 border-gray-600">
-              {/* Project Header */}
+              <h2 className="font-bold">{selectedProjectDetails?.title}</h2>
-              <div className="bg-gray-700/30 rounded-lg p-4">
+              <p className="text-gray-300 font-persian px-2 mt-2">
-                <h3 className="text-lg font-bold text-white font-persian mb-2">
+                {selectedProjectDetails?.project_description || "-"}
-                  {selectedProjectDetails.title}
+              </p>
-                </h3>
-                <div className="flex items-center gap-4">
-                  <Badge
-                    variant="outline"
-                    className="font-mono text-emerald-400 border-emerald-500/50"
-                  >
-                    {selectedProjectDetails.project_no}
-                  </Badge>
-                  <Badge
-                    variant="outline"
-                    className="font-medium border-2"
-                    style={{
-                      color: getStatusColor(selectedProjectDetails.project_status),
-                      borderColor: getStatusColor(selectedProjectDetails.project_status),
-                      backgroundColor: `${getStatusColor(selectedProjectDetails.project_status)}20`,
-                    }}
-                  >
-                    {selectedProjectDetails.project_status}
-                  </Badge>
-                </div>
             </div>
 
-              {/* Project Metrics */}
+            {/* Project Details */}
-              <div className="grid grid-cols-2 gap-4">
+            <div className="flex flex-[3] gap-2 flex-col px-4">
-                <div className="bg-gray-700/20 rounded-lg p-4">
+              <div className="font-bold text-right ">جزئیات پروژه</div>
-                  <h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
+
-                    امتیاز پروژه
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <Building2 className="h-4 text-green-500" />
+                  زمان شروع:
                 </h4>
-                  <Badge
+                <span className="text-white font-bold font-persian">
-                    variant="outline"
+                  {selectedProjectDetails?.start_date
-                    className="text-lg font-bold border-2"
+                    ? moment(
-                    style={{
+                        selectedProjectDetails?.start_date,
-                      color: getRatingColor(selectedProjectDetails.project_rating),
+                        "YYYY-MM-DD",
-                      borderColor: getRatingColor(selectedProjectDetails.project_rating),
+                      ).format("YYYY/MM/DD")
-                      backgroundColor: `${getRatingColor(selectedProjectDetails.project_rating)}20`,
+                    : "-"}
-                    }}
-                  >
-                    {formatNumber(selectedProjectDetails.project_rating)}
-                  </Badge>
-                </div>
-
-                <div className="bg-gray-700/20 rounded-lg p-4">
-                  <h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
-                    کاهش توقفات تولید
-                  </h4>
-                  <span className="text-lg font-bold text-blue-400">
-                    {formatNumber(selectedProjectDetails.reduce_prevention_production_stops)}
                 </span>
               </div>
 
-                <div className="bg-gray-700/20 rounded-lg p-4">
+              <div className="flex items-center justify-between">
-                  <h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
-                    رفع گلوگاه تولید
+                  <PickaxeIcon className="h-4 text-green-500" />
+                  زمان پایان:
                 </h4>
-                  <span className="text-lg font-bold text-blue-400">
+                <span className="text-white font-bold font-persian">
-                    {formatNumber(selectedProjectDetails.throat_removal)}
+                  {selectedProjectDetails?.done_date
+                    ? moment(
+                        selectedProjectDetails?.done_date,
+                        "YYYY-MM-DD",
+                      ).format("YYYY/MM/DD")
+                    : "-"}
                 </span>
               </div>
 
-                <div className="bg-gray-700/20 rounded-lg p-4">
+              <div className="flex items-center justify-between">
-                  <h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
-                    کاهش ارز بری
+                  <UsersIcon className="h-4 text-green-500" />
+                  هزینه برآورد شده:
                 </h4>
-                  <span className="text-lg font-bold text-emerald-400">
+                <span className="text-white font-bold font-persian">
-                    {formatCurrency(selectedProjectDetails.amount_currency_reduction)}
+                  {formatNumber(
+                    Number(
+                      selectedProjectDetails?.approved_budget.replaceAll(
+                        ",",
+                        "",
+                      ),
+                    ),
+                  ) || "-"}
                 </span>
               </div>
-
+              <div className="flex items-center justify-between">
-                <div className="bg-gray-700/20 rounded-lg p-4 col-span-2">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
-                  <h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
+                  <UserIcon className="h-4 text-green-500" />
-                    کاهش خرابی پر تکرار
+                  نفر مرتبط:
                 </h4>
-                  <span className="text-lg font-bold text-blue-400">
+                <span className="text-white font-bold font-persian">
-                    {formatNumber(selectedProjectDetails.Reduce_rate_failure)}
+                  {selectedProjectDetails?.observer || "-"}
                 </span>
               </div>
             </div>
-
-              {/* Action Buttons */}
-              <div className="flex justify-end gap-3 pt-4 border-t border-gray-700">
-                <Button
-                  variant="outline"
-                  onClick={() => setDetailsDialogOpen(false)}
-                  className="border-gray-600 text-gray-300 hover:bg-gray-700"
-                >
-                  بستن
-                </Button>
           </div>
-            </div>
-          )}
         </DialogContent>
       </Dialog>
     </DashboardLayout>

app/components/ecosystem/network-graph.tsx

@@ -199,7 +199,7 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
     // Create zoom behavior
     const zoom = d3
       .zoom<SVGSVGElement, unknown>()
-      .scaleExtent([1, 2.5]) // Limit zoom out to 1x, zoom in to 2.5x
+      .scaleExtent([0.8, 2.5]) // Limit zoom out to 1x, zoom in to 2.5x
       .on("zoom", (event) => {
         container.attr("transform", event.transform);
       });
@@ -240,6 +240,18 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
         d3.forceCollide().radius((d) => (d.isCenter ? 40 : 30)),
       );
 
+    const initialScale = 0.85;
+    const initialTranslate = [
+      width / 2 - (width / 2) * initialScale,
+      height / 2 - (height / 2) * initialScale,
+    ];
+    svg.call(
+      zoom.transform,
+      d3.zoomIdentity
+        .translate(initialTranslate[0], initialTranslate[1])
+        .scale(initialScale),
+    );
+
     // Fix center node position
     const centerNode = nodes.find((n) => n.isCenter);
     if (centerNode) {
@@ -424,19 +436,13 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
           // Filter out image fields and find description
           const filteredFields = fieldValues.filter(
             (field: any) =>
-              ![
+              !["image", "img", "full_name"].includes(field.F.toLowerCase()),
-                "image",
-                "img",
-                "des",
-                "dec",
-                "description",
-                "collaboration",
-              ].includes(field.F.toLowerCase()),
           );
 
           const descriptionField = fieldValues.find(
             (field: any) =>
               field.F.toLowerCase().includes("description") ||
+              field.F.toLowerCase().includes("collaboration") ||
               field.F.toLowerCase().includes("about"),
           );
 

package.json

@@ -17,7 +17,6 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@react-router/node": "^7.7.0",
     "@react-router/serve": "^7.7.1",
-    "@sigma/node-image": "^3.0.0",
     "@types/d3": "^7.4.3",
     "chart.js": "^4.5.0",
     "class-variance-authority": "^0.7.1",
@@ -32,7 +31,6 @@
     "react-hot-toast": "^2.5.2",
     "react-router": "^7.7.0",
     "recharts": "^3.1.2",
-    "sigma": "^3.0.2",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -32,9 +32,6 @@ importers:
       '@react-router/serve':
         specifier: ^7.7.1
         version: 7.8.0(react-router@7.7.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(typescript@5.8.3)
-      '@sigma/node-image':
-        specifier: ^3.0.0
-        version: 3.0.0(sigma@3.0.2(graphology-types@0.24.8))
       '@types/d3':
         specifier: ^7.4.3
         version: 7.4.3
@@ -77,9 +74,6 @@ importers:
       recharts:
         specifier: ^3.1.2
         version: 3.1.2(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.1)(react@19.1.0)(redux@5.0.1)
-      sigma:
-        specifier: ^3.0.2
-        version: 3.0.2(graphology-types@0.24.8)
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
@@ -974,11 +968,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@sigma/node-image@3.0.0':
-    resolution: {integrity: sha512-i4WLNPugDY4jgQEZtNSiSVj4HHXOraciXLtlgdygeUxMVEhH8PJ/+Q1vQ9f/SlKFnZQ+7vH3HnsSDW6FD9aP+g==}
-    peerDependencies:
-      sigma: '>=3.0.0-beta.10'
-
   '@standard-schema/spec@1.0.0':
     resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
 
@@ -1659,11 +1648,6 @@ packages:
   graphology-types@0.24.8:
     resolution: {integrity: sha512-hDRKYXa8TsoZHjgEaysSRyPdT6uB78Ci8WnjgbStlQysz7xR52PInxNsmnB7IBOM1BhikxkNyCVEFgmPKnpx3Q==}
 
-  graphology-utils@2.5.2:
-    resolution: {integrity: sha512-ckHg8MXrXJkOARk56ZaSCM1g1Wihe2d6iTmz1enGOz4W/l831MBCKSayeFQfowgF8wd+PQ4rlch/56Vs/VZLDQ==}
-    peerDependencies:
-      graphology-types: '>=0.23.0'
-
   graphology@0.26.0:
     resolution: {integrity: sha512-8SSImzgUUYC89Z042s+0r/vMibY7GX/Emz4LDO5e7jYXhuoWfHISPFJYjpRLUSJGq6UQ6xlenvX1p/hJdfXuXg==}
     peerDependencies:
@@ -2198,9 +2182,6 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
-  sigma@3.0.2:
-    resolution: {integrity: sha512-/BUbeOwPGruiBOm0YQQ6ZMcLIZ6tf/W+Jcm7dxZyAX0tK3WP9/sq7/NAWBxPIxVahdGjCJoGwej0Gdrv0DxlQQ==}
-
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -3282,10 +3263,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.45.1':
     optional: true
 
-  '@sigma/node-image@3.0.0(sigma@3.0.2(graphology-types@0.24.8))':
-    dependencies:
-      sigma: 3.0.2(graphology-types@0.24.8)
-
   '@standard-schema/spec@1.0.0': {}
 
   '@standard-schema/utils@0.3.0': {}
@@ -4009,10 +3986,6 @@ snapshots:
 
   graphology-types@0.24.8: {}
 
-  graphology-utils@2.5.2(graphology-types@0.24.8):
-    dependencies:
-      graphology-types: 0.24.8
-
   graphology@0.26.0(graphology-types@0.24.8):
     dependencies:
       events: 3.3.0
@@ -4503,13 +4476,6 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
-  sigma@3.0.2(graphology-types@0.24.8):
-    dependencies:
-      events: 3.3.0
-      graphology-utils: 2.5.2(graphology-types@0.24.8)
-    transitivePeerDependencies:
-      - graphology-types
-
   signal-exit@4.1.0: {}
 
   source-map-js@1.2.1: {}