Merge branch 'main' of https://git.pelekan.org/Saeed0920/inogen into dashboard_popup

app/components/common/popup-bar-chart.tsx

@@ -0,0 +1,74 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  LabelList,
+  ResponsiveContainer,
+} from "recharts";
+import { Card, CardContent } from "~/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+} from "~/components/ui/chart";
+import { formatNumber } from "~/lib/utils";
+
+export type PopupChartDatum = {
+  name: string;
+  value: number;
+};
+
+const chartConfig = {
+  value: {
+    label: "Operational Fee",
+    color: "#4ADE80", // Green-400
+  },
+} satisfies ChartConfig;
+
+
+export function PopupBarChart({
+  data,
+}: {
+  data: PopupChartDatum[];
+}) {
+  return (
+    <Card className="py-0 bg-transparent mt-4 border-none h-full">
+      <CardContent className="px-2 sm:p-6 bg-transparent">
+        <ChartContainer config={chartConfig} className="aspect-auto h-80 w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              accessibilityLayer
+              data={data}
+              margin={{ top: 20, right: 20, left: 20, bottom: 5 }}
+            >
+              <CartesianGrid vertical={false} stroke="#475569" />
+              <XAxis
+                dataKey="name"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tick={{ fill: "#94a3b8", fontSize: 12 }}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                tick={{ fill: "#94a3b8", fontSize: 12 }}
+                tickFormatter={(value) => `${formatNumber(Math.round(value))}`}
+              />
+              <Bar dataKey="value" fill={chartConfig.value.color} radius={[8, 8, 0, 0]}>
+                <LabelList
+                  dataKey="value"
+                  position="top"
+                  style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
+                  formatter={(v: number) => `${formatNumber(Math.round(v))}`}
+                />
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

app/components/dashboard/d3-image-info.tsx

@@ -5,13 +5,17 @@ export type CompanyInfo = {
   id: string;
   imageUrl: string;
   name: string;
-  costReduction: number; // absolute value
+  costReduction: number;
   revenue?: number;
   capacity?: number;
+  costI : number,
+  capacityI : number,
+  revenueI : number,
+  cost : number | string, 
 };
 
 export type D3ImageInfoProps = {
-  companies: CompanyInfo[]; // exactly 6 items
+  companies: CompanyInfo[];
   width?: number;
   height?: number;
 };
@@ -59,7 +63,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
     <div className="w-full h-[500px] rounded-xl p-4">
       <div dir="ltr" className="company-grid-container">
         {displayCompanies.map((company, index) => {
-          const gp = gridPositions.find(v => v.name === company.name) || { col: (index % 5) + 1, row: Math.floor(index / 5) + 1 };
+          const gp  = gridPositions.find(v => v.name === company.name)  ;
           return (
           <>
             <div
@@ -77,7 +81,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
 
               {company.name}
             </div>
-              <InfoBox company={company} key={index +10} style={{ gridColumn: gp.colI , gridRow: gp.rowI  }}  />
+              <InfoBox company={company} key={index +10} style={{ gridColumn: gp?.colI , gridRow: gp?.rowI  }}  />
           </>);
         })}
       </div>

app/components/dashboard/dashboard-home.tsx

@@ -49,7 +49,9 @@ export function DashboardHome() {
   const [error, setError] = useState<string | null>(null);
   // Chart and schematic data from select API
   const [companyChartData, setCompanyChartData] = useState<
-    { category: string; capacity: number; revenue: number; cost: number }[]
+    { category: string; capacity: number; revenue: number; cost: number ,  costI : number,
+          capacityI : number,
+          revenueI : number }[]
   >([]);
   const [totalIncreasedCapacity, setTotalIncreasedCapacity] = useState<number>(0);
 
@@ -138,7 +140,6 @@ export function DashboardHome() {
         const capacityPct = preCap > 0 ? (incCap / preCap) * 100 : 0;
         const revenuePct = preInc > 0 ? (incInc / preInc) * 100 : 0;
         const costPct = preFee > 0 ? (costRed / preFee) * 100 : 0;
-        console.log(costRed)
         return {
           category: rel,
           capacity: isFinite(capacityPct) ? capacityPct : 0,

app/components/dashboard/layout.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { cn } from "~/lib/utils";
 import { Sidebar } from "./sidebar";
 import { Header } from "./header";
+import { StrategicAlignmentPopup } from "./strategic-alignment-popup";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
@@ -16,6 +17,7 @@ export function DashboardLayout({
 }: DashboardLayoutProps) {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
+  const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] = useState(false);
 
   const toggleSidebarCollapse = () => {
     setIsSidebarCollapsed(!isSidebarCollapsed);
@@ -55,6 +57,7 @@ export function DashboardLayout({
           isCollapsed={isSidebarCollapsed}
           onToggleCollapse={toggleSidebarCollapse}
           className="h-full flex-shrink-0 relative z-10"
+          onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)}
         />
       </div>
 
@@ -79,6 +82,7 @@ export function DashboardLayout({
           </div>
         </main>
       </div>
+      <StrategicAlignmentPopup open={isStrategicAlignmentPopupOpen} onOpenChange={setIsStrategicAlignmentPopupOpen} />
     </div>
   );
 }

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

@@ -1,9 +1,23 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Card, CardContent } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
-import { Checkbox } from "~/components/ui/checkbox";
 import moment from "moment-jalaali";
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -12,39 +26,24 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  ResponsiveContainer,
-} from "recharts";
 
-import apiService from "~/lib/api";
-import toast from "react-hot-toast";
 import {
-  LoaderCircle,
-  TrendingUp,
-  Key,
-  Sparkle,
-  Zap,
-  Flame,
   Building2,
-  PickaxeIcon,
-  UsersIcon,
-  UserIcon,
-  RefreshCw,
-
-  ChevronUp,
   ChevronDown,
+  ChevronUp,
+  Flame,
+  Key,
+  LoaderCircle,
+  PickaxeIcon,
+  RefreshCw,
+  Sparkle,
+  TrendingUp,
+  UserIcon,
+  UsersIcon,
+  Zap,
 } from "lucide-react";
+import toast from "react-hot-toast";
+import apiService from "~/lib/api";
 import DashboardLayout from "../layout";
 
 moment.loadPersian({ usePersianDigits: true });
@@ -100,7 +99,7 @@ interface InnovationStats {
   water_recovery_reduction_percent: number;
   average_project_score: number;
   count_innovation_green_projects: number;
-  standard_regulations: string
+  standard_regulations: string;
 }
 
 interface Params {
@@ -174,7 +173,9 @@ export function GreenInnovationPage() {
   const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
     new Set()
   );
-  const [standartRegulation, setStandardRegulation] = useState<Array<string>>([])
+  const [standartRegulation, setStandardRegulation] = useState<Array<string>>(
+    []
+  );
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
   const [selectedProjectDetails, setSelectedProjectDetails] =
     useState<GreenInnovationData | null>(null);
@@ -255,7 +256,6 @@ export function GreenInnovationPage() {
   };
 
   const formatNumber = (value: string | number) => {
-    if (!value) return "0";
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
     if (isNaN(numericValue)) return "0";
     return new Intl.NumberFormat("fa-IR").format(numericValue);
@@ -269,7 +269,6 @@ export function GreenInnovationPage() {
     try {
       fetchingRef.current = true;
       if (reset) {
-
         setCurrentPage(1);
       } else {
         setLoadingMore(true);
@@ -362,8 +361,11 @@ export function GreenInnovationPage() {
   useEffect(() => {
     fetchProjects(true);
     fetchTotalCount();
+  }, [sortConfig]);
+
+  useEffect(() => {
     fetchStats();
-  }, [sortConfig, selectedProjects]);
+  }, [selectedProjects]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -398,7 +400,7 @@ export function GreenInnovationPage() {
 
   useEffect(() => {
     setLoading(true);
-  }, [])
+  }, []);
   const handleSort = (field: string) => {
     fetchingRef.current = false;
     setSortConfig((prev) => ({
@@ -454,15 +456,16 @@ export function GreenInnovationPage() {
       if (typeof payload === "string") {
         try {
           payload = JSON.parse(payload);
-        } catch { }
+        } catch {}
       }
       const parseNum = (v: unknown): any => {
+        const convertNumber = typeof v === "number" ? Math.max(0, v) : 0;
         if (v == null) return 0;
-        if (typeof v === "number") return v;
+        if (typeof v === "number") return convertNumber;
         if (typeof v === "string") {
           const cleaned = v.replace(/,/g, "").trim();
           const n = parseFloat(cleaned);
-          return isNaN(n) ? 0 : n;
+          return isNaN(n) ? 0 : convertNumber;
         }
         return 0;
       };
@@ -503,9 +506,11 @@ export function GreenInnovationPage() {
         },
         avarage: stats.average_project_score,
         countInnovationGreenProjects: stats.count_innovation_green_projects,
-        standardRegulation: stats.standard_regulations.replace('\r', '').split('\n')
+        standardRegulation: stats.standard_regulations
+          .replace("\r", "")
+          .split("\n"),
       };
-      setStandardRegulation(normalized.standardRegulation)
+      setStandardRegulation(normalized.standardRegulation);
       setActualTotalCount(normalized.countInnovationGreenProjects);
       setTblAvarage(normalized.avarage);
       setPageData(normalized);
@@ -880,7 +885,8 @@ export function GreenInnovationPage() {
                             position: "top",
                             fill: "#fff",
                             fontWeight: "bold",
-                            formatter: (value: any) => `${formatNumber(value)}%`,
+                            formatter: (value: any) =>
+                              `${formatNumber(value)}%`,
                           }}
                         />
                       </BarChart>
@@ -912,13 +918,19 @@ export function GreenInnovationPage() {
               <div className="flex flex-col gap-3 p-4 overflow-y-scroll h-[20rem]">
                 {statsLoading
                   ? Array.from({ length: 10 }).map((_, index) => (
-                    <div key={`skeleton-${index}`} className="flex gap-2 items-center">
+                      <div
+                        key={`skeleton-${index}`}
+                        className="flex gap-2 items-center"
+                      >
                         <span className="h-4 w-4 bg-gray-500/40 rounded-full animate-pulse"></span>
                         <span className="h-3 w-32 bg-gray-500/40 rounded animate-pulse"></span>
                       </div>
                     ))
                   : standartRegulation.map((item, index) => (
-                    <div key={`${item}-${index}-1`} className="flex flex-row flex-1 gap-2">
+                      <div
+                        key={`${item}-${index}-1`}
+                        className="flex flex-row  gap-2"
+                      >
                         <LoaderCircle
                           size={"20px"}
                           height={"20px"}

app/components/dashboard/project-management/innovation-built-inside-page.tsx

@@ -1,9 +1,15 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Card, CardContent } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
-import { Checkbox } from "~/components/ui/checkbox";
 import moment from "moment-jalaali";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
+import { Checkbox } from "~/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -12,28 +18,29 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
 
-import apiService from "~/lib/api";
+import {
+  ChevronDown,
+  ChevronUp,
+  CodeXml,
+  FilterIcon,
+  Handshake,
+  RefreshCw,
+  SquareUser,
+  User,
+  Users,
+} from "lucide-react";
 import toast from "react-hot-toast";
 import {
-  FilterIcon,
-  RefreshCw,
-  ChevronUp,
-  ChevronDown,
-  Handshake,
-  CodeXml,
-  SquareUser,
-  Users,
-  User,
-} from "lucide-react";
+  Customized,
+  Line,
+  LineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  XAxis,
+} from "recharts";
+import apiService from "~/lib/api";
 import DashboardLayout from "../layout";
-import { LineChart, CartesianGrid, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, Customized } from "recharts";
 
 moment.loadPersian({ usePersianDigits: true });
 
@@ -43,7 +50,7 @@ interface innovationBuiltInDate {
   done_date: string | null;
   observer: string;
   project_description: string;
-  project_id: number | null;
+  project_id: number | string;
   project_no: string;
   project_rating: string;
   project_status: string;
@@ -52,7 +59,7 @@ interface innovationBuiltInDate {
 }
 
 interface DialogInfo {
-  WorkflowID: number
+  WorkflowID: number;
   collaboration_model: string;
   complexity_level: string;
   developer_team_role: string;
@@ -66,10 +73,9 @@ interface DialogInfo {
   role_company_staff: string | null;
   technology_maturity_level: string;
   title: string;
-  technology_params?: Array<TechnologyParameter>
+  technology_params?: Array<TechnologyParameter>;
 }
 
-
 interface SortConfig {
   field: string;
   direction: "asc" | "desc";
@@ -98,18 +104,17 @@ interface BottleNeckItem {
     value: string;
     description?: string;
     unit?: string;
-    increasePercent: number
+    increasePercent: number;
   };
   increaseIncome: {
     label: string;
     value: string;
     description?: string;
-    increasePercent: number
+    increasePercent: number;
     unit?: string;
   };
 }
 
-
 interface StatsCard {
   currencySaving: StateItem;
   investmentAmount: StateItem;
@@ -166,11 +171,10 @@ const columns = [
 ];
 
 const dialogChartData = [
-  { name:  'مرحه پیدایش', value: 10 },
-  { name:  'مرحله رشد', value: 14 },
-  { name:  'مرحله بلوغ', value: 25 },
-  { name:'مرحله افول', value: 15 },
-
+  { name: "مرحه پیدایش", value: 10 },
+  { name: "مرحله رشد", value: 14 },
+  { name: "مرحله بلوغ", value: 25 },
+  { name: "مرحله افول", value: 15 },
 ];
 
 export function InnovationBuiltInsidePage() {
@@ -189,15 +193,13 @@ export function InnovationBuiltInsidePage() {
     direction: "asc",
   });
   const [tblAvarage, setTblAvarage] = useState<number>(0);
-  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
-    new Set()
-  );
+  const [selectedProjects, setSelectedProjects] = useState<
+    Set<string | number>
+  >(new Set());
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
   const [selectedProjectDetails, setSelectedProjectDetails] =
     useState<DialogInfo>();
 
-
-
   const [sustainabilityStats, setSustainabilityStats] = useState<StatsCard>({
     currencySaving: {
       id: "reduce-pollution",
@@ -228,35 +230,34 @@ export function InnovationBuiltInsidePage() {
 
   const [bottleNeck, setBottleNeck] = useState<BottleNeckItem>({
     resolveBottleNeck: {
-      label: 'تعدادگلوگاه رفع شده',
-      value: '0',
-      description: ''
+      label: "تعدادگلوگاه رفع شده",
+      value: "0",
+      description: "",
     },
     increaseCapacity: {
-      label: 'ظرفیت تولید اضافه شده',
-      value: '0',
-      description: 'درصد افزایش ظرفیت تولید',
+      label: "ظرفیت تولید اضافه شده",
+      value: "0",
+      description: "درصد افزایش ظرفیت تولید",
       increasePercent: 0,
-      unit: 'تن'
+      unit: "تن",
     },
     increaseIncome: {
-      label: 'میزان افزایش درآمد',
-      value: '0',
-      description: 'درصد افزایش درآمد',
+      label: "میزان افزایش درآمد",
+      value: "0",
+      description: "درصد افزایش درآمد",
       increasePercent: 0,
-      unit: "میلیون ریال"
-    }
-  })
+      unit: "میلیون ریال",
+    },
+  });
 
+  const [showDialogItems, setShowDialogItems] = useState<boolean>(false);
 
-  const [showDialogItems, setShowDialogItems] = useState<boolean>(false)
-
-  const [countOfHighTech, setCountOfHighTech] = useState(0)
+  const [countOfHighTech, setCountOfHighTech] = useState(0);
 
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
 
-  const handleSelectProject = (projectNo: string) => {
+  const handleSelectProject = (projectNo: string | number) => {
     const newSelected = new Set(selectedProjects);
     if (newSelected.has(projectNo)) {
       newSelected.delete(projectNo);
@@ -267,18 +268,16 @@ export function InnovationBuiltInsidePage() {
   };
 
   const handleProjectDetails = async (project: DialogInfo) => {
-    setShowDialogItems(true)
+    setShowDialogItems(true);
     setDetailsDialogOpen(true);
     setSelectedProjectDetails(project);
-    await fetchDialogTbl(project.WorkflowID)
+    await fetchDialogTbl(project.WorkflowID);
     setTimeout(() => {
-      setShowDialogItems(false)
-      calculateProgressBar(+project.project_rating)
+      setShowDialogItems(false);
+      calculateProgressBar(+project.project_rating);
     }, 500);
   };
 
-
-
   const formatNumber = (value: string | number) => {
     if (!value) return "0";
     const numericValue = typeof value === "string" ? parseFloat(value) : value;
@@ -315,7 +314,7 @@ export function InnovationBuiltInsidePage() {
           "role_company_staff",
           "number_employees_involved",
           "participants_full_name",
-          "technology_maturity_level"
+          "technology_maturity_level",
         ],
         Sorts: [[sortConfig.field, sortConfig.direction]],
         Conditions: [["type_of_innovation", "=", "نوآوری ساخت داخل"]],
@@ -380,7 +379,6 @@ export function InnovationBuiltInsidePage() {
     }
   };
 
-
   const fetchDialogTbl = async (tblId: number) => {
     try {
       const response = await apiService.select({
@@ -388,7 +386,7 @@ export function InnovationBuiltInsidePage() {
         OutputFields: [
           "technology_parameter_title",
           "domestic_technology_parameter_value",
-          "foreign_technology_parameter_value"
+          "foreign_technology_parameter_value",
         ],
         Conditions: [["project_id", "=", tblId]],
       });
@@ -398,7 +396,7 @@ export function InnovationBuiltInsidePage() {
           const parsedData = JSON.parse(dataString);
           setSelectedProjectDetails((prev: any) => ({
             ...prev,
-            technology_params: parsedData
+            technology_params: parsedData,
           }));
         }
       }
@@ -409,7 +407,9 @@ export function InnovationBuiltInsidePage() {
   };
 
   const calculateProgressBar = (val: number) => {
-    const pointer = document.getElementsByClassName('progressBarPointer')[0] as HTMLElement;
+    const pointer = document.getElementsByClassName(
+      "progressBarPointer"
+    )[0] as HTMLElement;
     if (!pointer) return;
 
     const leftValue = val !== 0 ? `calc(${val}% - 100px)` : `calc(0% - 40px)`;
@@ -430,7 +430,7 @@ export function InnovationBuiltInsidePage() {
 
   useEffect(() => {
     fetchStats();
-  }, [selectedProjects])
+  }, [selectedProjects]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -478,10 +478,9 @@ export function InnovationBuiltInsidePage() {
     setHasMore(true);
   };
 
-
   const fetchStats = async () => {
     try {
-      detailsDialogOpen
+      detailsDialogOpen;
       setStatsLoading(true);
       const raw = await apiService.call<any>({
         innovation_construction_inside_function: {
@@ -495,7 +494,7 @@ export function InnovationBuiltInsidePage() {
       if (typeof payload === "string") {
         try {
           payload = JSON.parse(payload);
-        } catch { }
+        } catch {}
       }
       const parseNum = (v: unknown): any => {
         if (v == null) return 0;
@@ -515,7 +514,9 @@ export function InnovationBuiltInsidePage() {
       const normalized: any = {
         currencySaving: {
           value: formatNumber(parseNum(stats?.foreign_currency_saving)),
-          percent: formatNumber(parseNum(stats?.foreign_currency_saving_percent)),
+          percent: formatNumber(
+            parseNum(stats?.foreign_currency_saving_percent)
+          ),
         },
 
         investmentAmount: {
@@ -528,13 +529,21 @@ export function InnovationBuiltInsidePage() {
         },
 
         income: {
-          value: formatNumber(parseNum(stats.increased_income_after_innovation)),
-          percent: formatNumber(parseNum(stats.increased_income_after_innovation_percent)),
+          value: formatNumber(
+            parseNum(stats.increased_income_after_innovation)
+          ),
+          percent: formatNumber(
+            parseNum(stats.increased_income_after_innovation_percent)
+          ),
         },
 
         capacity: {
-          value: formatNumber(parseNum(stats.increased_capacity_after_innovation)),
-          percent: formatNumber(parseNum(stats.increased_capacity_after_innovation_percent)),
+          value: formatNumber(
+            parseNum(stats.increased_capacity_after_innovation)
+          ),
+          percent: formatNumber(
+            parseNum(stats.increased_capacity_after_innovation_percent)
+          ),
         },
 
         resolveBottleNeck: {
@@ -542,7 +551,8 @@ export function InnovationBuiltInsidePage() {
         },
         countOfHighTech: formatNumber(stats.high_level_technology_count),
         avarage: stats.average_project_score,
-        countInnovationGreenProjects: stats.count_innovation_construction_inside_projects,
+        countInnovationGreenProjects:
+          stats.count_innovation_construction_inside_projects,
       };
       setActualTotalCount(normalized.countInnovationGreenProjects);
       setTblAvarage(normalized.avarage);
@@ -559,7 +569,10 @@ export function InnovationBuiltInsidePage() {
       ...prev,
       currencySaving: {
         ...prev.currencySaving,
-        total: { ...prev.currencySaving.total, value: normalized.currencySaving.value },
+        total: {
+          ...prev.currencySaving.total,
+          value: normalized.currencySaving.value,
+        },
         percent: {
           ...prev.currencySaving.percent,
           value: normalized.currencySaving.percent,
@@ -567,23 +580,29 @@ export function InnovationBuiltInsidePage() {
       },
       investmentAmount: {
         ...prev.investmentAmount,
-        total: { ...prev.investmentAmount.total, value: normalized.investmentAmount.value },
-        percent: { ...prev.investmentAmount.percent, value: normalized.investmentAmount.percent },
+        total: {
+          ...prev.investmentAmount.total,
+          value: normalized.investmentAmount.value,
+        },
+        percent: {
+          ...prev.investmentAmount.percent,
+          value: normalized.investmentAmount.percent,
+        },
       },
     }));
 
-    setBottleNeck(prev => ({
+    setBottleNeck((prev) => ({
       ...prev,
 
       increaseIncome: {
         ...prev.increaseIncome,
         value: normalized.income.value,
-        increasePercent: normalized.income.percent
+        increasePercent: normalized.income.percent,
       },
       increaseCapacity: {
         ...prev.increaseCapacity,
         value: normalized.capacity.value,
-        increasePercent: normalized.capacity.percent
+        increasePercent: normalized.capacity.percent,
       },
       resolveBottleNeck: {
         ...prev.resolveBottleNeck,
@@ -592,7 +611,7 @@ export function InnovationBuiltInsidePage() {
       // average: normalized.avarage,
       // countInnovationGreenProjects: normalized.countInnovationGreenProjects,
     }));
-    setCountOfHighTech(normalized.countOfHighTech)
+    setCountOfHighTech(normalized.countOfHighTech);
   };
 
   const renderCellContent = (item: innovationBuiltInDate, column: any) => {
@@ -602,8 +621,8 @@ export function InnovationBuiltInsidePage() {
       case "select":
         return (
           <Checkbox
-            checked={selectedProjects.has(item.project_id)}
-            onCheckedChange={() => handleSelectProject(item.project_id)}
+            checked={selectedProjects.has(item?.project_id!)}
+            onCheckedChange={() => handleSelectProject(item?.project_id)}
             className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600 cursor-pointer"
           />
         );
@@ -688,7 +707,6 @@ export function InnovationBuiltInsidePage() {
     return el;
   };
 
-
   return (
     <DashboardLayout title="نوآوری ساخت داخل">
       <div className="p-6 space-y-4 flex  justify-between gap-8 sm:flex-col xl:flex-row">
@@ -760,9 +778,8 @@ export function InnovationBuiltInsidePage() {
                   </Card>
                 ))}
 
-
-            {
-              statsLoading ? <div className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border border-gray-700/50 animate-pulse">
+            {statsLoading ? (
+              <div className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border border-gray-700/50 animate-pulse">
                 <div className="p-0 h-full">
                   <div className="flex flex-col justify-between gap-2 h-full">
                     <div className="flex justify-between items-center border-b-2 border-gray-500/20 p-4 px-5">
@@ -788,7 +805,9 @@ export function InnovationBuiltInsidePage() {
                     </div>
                   </div>
                 </div>
-              </div> : <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50">
+              </div>
+            ) : (
+              <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50">
                 <CardContent className="p-0 h-full">
                   <div className="flex flex-col justify-between gap-2 h-full">
                     <div className="flex justify-between items-center border-b-2 border-gray-500/20 p-4 px-5">
@@ -798,58 +817,57 @@ export function InnovationBuiltInsidePage() {
                       <FilterIcon />
                     </div>
                     <div className="flex items-center justify-between p-6 px-14 flex-col gap-4">
-                      {
-                        Object.entries(bottleNeck).map(([key, value]) => {
-                          return <div key={`bottle-neck-${key}`} className="flex flex-row-reverse w-full justify-between">
+                      {Object.entries(bottleNeck).map(([key, value]) => {
+                        return (
+                          <div
+                            key={`bottle-neck-${key}`}
+                            className="flex flex-row-reverse w-full justify-between"
+                          >
                             <div className="flex flex-col text-left text-gray-400">
                               <span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
                                 {value.value}
                               </span>
-                              {
-                                value.unit && <span className="text-sm  font-persian">
+                              {value.unit && (
+                                <span className="text-sm  font-persian">
                                   {value.unit}
                                 </span>
-                              }
-
+                              )}
                             </div>
                             <div className="text-sm  font-persian flex flex-col gap-1">
                               <span className="text-lg">{value.label}</span>
                               <div className="text-emerald-500 flex flex-row-reverse gap-1">
                                 <span>
-
-                                  {
-                                    value.description && value.description
-                                  }
-                                </span>
-                                <span>
-                                  {value.increasePercent}
+                                  {value.description && value.description}
                                 </span>
+                                <span>{value.increasePercent}</span>
                               </div>
                             </div>
                           </div>
-                        })
-                      }
+                        );
+                      })}
                     </div>
                   </div>
                 </CardContent>
               </Card>
-            }
+            )}
 
-            {
-              statsLoading ? <div className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border border-gray-700/50 animate-pulse mt-4">
+            {statsLoading ? (
+              <div className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border border-gray-700/50 animate-pulse mt-4">
                 <div className="h-full flex flex-row justify-between p-6 items-center w-4/5 m-auto">
                   <div className="h-6 w-32 bg-gray-600/40 rounded-md"></div>
                   <div className="h-8 w-16 bg-gray-600/40 rounded-md"></div>
                 </div>
-              </div> : <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border-gray-700/50">
+              </div>
+            ) : (
+              <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border-gray-700/50">
                 <CardContent className="h-full flex flex-row justify-between p-6 items-center w-4/5 m-auto">
                   <span className="text-lg">تعداد فناوری سطح بالا</span>
-                  <span className="text-emerald-500 text-3xl font-bold font-persian">{countOfHighTech}</span>
+                  <span className="text-emerald-500 text-3xl font-bold font-persian">
+                    {countOfHighTech}
+                  </span>
                 </CardContent>
               </Card>
-            }
-
-
+            )}
           </div>
         </div>
 
@@ -960,13 +978,13 @@ export function InnovationBuiltInsidePage() {
 
           <div className="p-2 px-4 bg-gray-700/50">
             <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-center items-center  xl:w-full pr-6 sm:w-full">
                 <div className="text-base text-gray-401 mb-1">
                   کل پروژه ها :{formatNumber(actualTotalCount)}
                 </div>
               </div>
 
-              <div className="flex  items-center flex-row gap-20 status justify-center xl:w-2/3 sm:w-full">
+              <div className="flex items-center flex-row gap-5 status justify-start xl:w-full sm:w-full ">
                 <div className="flex flex-row-reverse">
                   <span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
                   <span className="block w-7 h-2.5 bg-purple-500 "></span>
@@ -984,8 +1002,6 @@ export function InnovationBuiltInsidePage() {
               </div>
             </div>
           </div>
-
-
         </Card>
       </div>
 
@@ -999,32 +1015,30 @@ export function InnovationBuiltInsidePage() {
           </DialogHeader>
           <div className="flex justify-between text-right px-4">
             <div className="flex-[4] border-l-2 border-gray-600 pl-8">
-
-              {
-                showDialogItems ? <div className="animate-pulse flex flex-col gap-2">
+              {showDialogItems ? (
+                <div className="animate-pulse flex flex-col gap-2">
                   <div className="flex flex-col gap-2 mt-2">
                     <div className="h-4 w-full bg-gray-600 rounded"></div>
                     <div className="h-4 w-5/6 bg-gray-600 rounded"></div>
                     <div className="h-4 w-11/12 bg-gray-600 rounded"></div>
                   </div>
-                </div> : <div>
+                </div>
+              ) : (
+                <div>
                   <h2 className="font-bold">{selectedProjectDetails?.title}</h2>
                   <p className="text-gray-300 font-persian mt-2 text-justify">
                     {selectedProjectDetails?.project_description || "-"}
                   </p>
                 </div>
-              }
+              )}
               <h2 className="font-bold  my-6">دانش فنی محصول جدید</h2>
-              {
-                showDialogItems ? <div className="newProductTechKnowledge flex flex-col gap-4 h-max w-full  animate-pulse">
+              {showDialogItems ? (
+                <div className="newProductTechKnowledge flex flex-col gap-4 h-max w-full  animate-pulse">
                   <div className="w-max relative">
                     <div className="range flex flex-row-reverse rounded-xl overflow-hidden justify-center">
-                      <div className="bg-gray-500 w-28 h-10 p-4 text-center flex items-center justify-center">
-                      </div>
-                      <div className="bg-gray-400 w-28 h-10 p-4 text-center flex items-center justify-center">
-                      </div>
-                      <div className="bg-gray-300 w-28 h-10 p-4 text-center flex items-center justify-center">
-                      </div>
+                      <div className="bg-gray-500 w-28 h-10 p-4 text-center flex items-center justify-center"></div>
+                      <div className="bg-gray-400 w-28 h-10 p-4 text-center flex items-center justify-center"></div>
+                      <div className="bg-gray-300 w-28 h-10 p-4 text-center flex items-center justify-center"></div>
                     </div>
 
                     <div className="progressBarPointer absolute z-[200] top-0.5 left-0.5">
@@ -1036,7 +1050,9 @@ export function InnovationBuiltInsidePage() {
                       </div>
                     </div>
                   </div>
-                </div> : <div className="newProductTechKnowledge  flex flex-col gap-4 h-max w-full ">
+                </div>
+              ) : (
+                <div className="newProductTechKnowledge  flex flex-col gap-4 h-max w-full ">
                   <div className="w-max relative transition-all duration-300">
                     <div className="range flex flex-row-reverse rounded-xl overflow-hidden justify-center">
                       <div className="bg-emerald-700 w-28 h-10 p-4  text-center text-sm flex items-center justify-center">
@@ -1049,20 +1065,23 @@ export function InnovationBuiltInsidePage() {
                         <span className="text-gray-700">سطح بالا</span>
                       </div>
                     </div>
-                    <div className='progressBarPointer absolute z-[200] top-0.5 transition-all duration-300'>
+                    <div className="progressBarPointer absolute z-[200] top-0.5 transition-all duration-300">
                       <div className="flex flex-col  justify-center items-center">
                         <span className="block w-0.5 h-14 bg-white"></span>
-                        <span className="text-white border border-white p-1 px-2 text-xs rounded-lg"> سطح تکنولوژی</span>
+                        <span className="text-white border border-white p-1 px-2 text-xs rounded-lg">
+                          {" "}
+                          سطح تکنولوژی
+                        </span>
                       </div>
                     </div>
                   </div>
                 </div>
-              }
+              )}
 
               <div className="flex flex-col gap-5 mt-20">
                 <h2 className="font-bold">مشارکت در پروژه</h2>
-                {
-                  showDialogItems ? <div className="space-y-3">
+                {showDialogItems ? (
+                  <div className="space-y-3">
                     {[...Array(4)].map((_, i) => (
                       <div key={i} className="flex flex-row gap-2 items-center">
                         <div className="h-5 w-5 bg-gray-500 rounded-full"></div>
@@ -1072,34 +1091,45 @@ export function InnovationBuiltInsidePage() {
                         </div>
                       </div>
                     ))}
-                  </div> : <div className="flex flex-col gap-5">
+                  </div>
+                ) : (
+                  <div className="flex flex-col gap-5">
                     <div className="content flex flex-col gap-3 w-5/6">
                       <div className="flex flex-row gap-2 w-full">
                         <Handshake className="text-emerald-500 w-5" />
                         <div className="flex flex-row justify-between w-full">
                           <span>مدل همکاری:</span>
-                          <span>{selectedProjectDetails?.collaboration_model}</span>
+                          <span>
+                            {selectedProjectDetails?.collaboration_model}
+                          </span>
                         </div>
                       </div>
                       <div className="flex flex-row gap-2 w-full">
                         <CodeXml className="text-emerald-500 w-5" />
                         <div className="flex flex-row justify-between w-full">
                           <span>نقش تیم توسعه دهنده:</span>
-                          <span>{selectedProjectDetails?.developer_team_role}</span>
+                          <span>
+                            {selectedProjectDetails?.developer_team_role}
+                          </span>
                         </div>
                       </div>
                       <div className="flex flex-row gap-2 w-full">
                         <SquareUser className="text-emerald-500 w-5" />
                         <div className="flex flex-row justify-between w-full">
                           <span>نقش کارکنان شرکت: </span>
-                          <span>{selectedProjectDetails?.role_company_staff ?? '-'}</span>
+                          <span>
+                            {selectedProjectDetails?.role_company_staff ?? "-"}
+                          </span>
                         </div>
                       </div>
                       <div className="flex flex-row gap-2 w-full">
                         <Users className="text-emerald-500 w-5" />
                         <div className="flex flex-row justify-between w-full">
                           <span>تعداد کارکنان درگیر: </span>
-                          <span className="persian-font">{selectedProjectDetails?.number_employees_involved ?? 0}</span>
+                          <span className="persian-font">
+                            {selectedProjectDetails?.number_employees_involved ??
+                              0}
+                          </span>
                         </div>
                       </div>
                     </div>
@@ -1108,59 +1138,76 @@ export function InnovationBuiltInsidePage() {
                       <User className="text-emerald-500 w-5" />
                       <div className="flex flex-col justify-between w-full gap-1">
                         <span>لیست کارکنان : </span>
-                        <span className="pr-1">{selectedProjectDetails?.participants_full_name}</span>
+                        <span className="pr-1">
+                          {selectedProjectDetails?.participants_full_name}
+                        </span>
                       </div>
                     </div>
-
                   </div>
-                }
-
-
-
-
-
+                )}
               </div>
             </div>
 
             {/* Project Details */}
             <div className="px-4 pl-0 flex flex-col gap-4 w-1/2">
-              {
-                showDialogItems ? <div className="flex flex-col gap-2 animate-pulse">
+              {showDialogItems ? (
+                <div className="flex flex-col gap-2 animate-pulse">
                   {[...Array(5)].map((_, rowIndex) => (
                     <div key={`skeleton-${rowIndex}`}>
                       <div className="h-6 bg-gray-700 rounded"></div>
                     </div>
                   ))}
-                </div> : <div className="tbl rounded-xl overflow-hidden">
+                </div>
+              ) : (
+                <div className="tbl rounded-xl overflow-hidden">
                   <div className="grid grid-cols-3 bg-[#3F415A] text-white">
-                    <span className="text-md text-center p-3">شاخص مقایسه با نمونه خارجی</span>
+                    <span className="text-md text-center p-3">
+                      شاخص مقایسه با نمونه خارجی
+                    </span>
                     <span className="text-md text-center p-3">نمونه داخلی</span>
                     <span className="text-md text-center p-3">نمونه خارجی</span>
                   </div>
                   <div className="flex flex-col divide-y divide-gray-600 overflow-auto max-h-[6rem]">
-                    {
-                      selectedProjectDetails?.technology_params?.map((el, index) => {
-                        return <div className="grid grid-cols-3 py-3" key={`technology-${index}-${el.WorkflowID}`}>
-                          <span className="text-center">{el.technology_parameter_title}</span>
+                    {selectedProjectDetails?.technology_params?.map(
+                      (el, index) => {
+                        return (
+                          <div
+                            className="grid grid-cols-3 py-3"
+                            key={`technology-${index}-${el.WorkflowID}`}
+                          >
+                            <span className="text-center">
+                              {el.technology_parameter_title}
+                            </span>
                             <div className="flex flex-row items-center gap-1 justify-center">
-                            <span>{formatNumber(el.domestic_technology_parameter_value)}</span>
-                            <span className="text-sm text-gray-400">میلیون لیتر</span>
+                              <span>
+                                {formatNumber(
+                                  el.domestic_technology_parameter_value
+                                )}
+                              </span>
+                              <span className="text-sm text-gray-400">
+                                میلیون لیتر
+                              </span>
                             </div>
                             <div className="flex flex-row items-center  gap-1 justify-center">
-                            <span>{formatNumber(el.foreign_technology_parameter_value)}</span>
-                            <span className="text-sm text-gray-400">میلیون لیتر</span>
+                              <span>
+                                {formatNumber(
+                                  el.foreign_technology_parameter_value
+                                )}
+                              </span>
+                              <span className="text-sm text-gray-400">
+                                میلیون لیتر
+                              </span>
                             </div>
                           </div>
-
-                      })
-
+                        );
                       }
+                    )}
                   </div>
                 </div>
-              }
-              <div style={{ width: '100%', height: 400 }}>
-                {
-                  showDialogItems ? <div className="relative h-96 w-full bg-gray-700 rounded-lg overflow-hidden animate-pulse">
+              )}
+              <div style={{ width: "100%", height: 400 }}>
+                {showDialogItems ? (
+                  <div className="relative h-96 w-full bg-gray-700 rounded-lg overflow-hidden animate-pulse">
                     {[...Array(4)].map((_, i) => (
                       <div
                         key={i}
@@ -1177,14 +1224,16 @@ export function InnovationBuiltInsidePage() {
                         key={i}
                         className="absolute bg-gray-500 rounded-full"
                         style={{
-                          width: '10px',
-                          height: '10px',
+                          width: "10px",
+                          height: "10px",
                           left: `${10 + i * 18}%`,
                           top: `${30 + (i % 2) * 20}%`,
                         }}
                       />
                     ))}
-                  </div> : <ResponsiveContainer width="100%" height={420}>
+                  </div>
+                ) : (
+                  <ResponsiveContainer width="100%" height={420}>
                     <LineChart
                       data={dialogChartData}
                       margin={{ top: 20, right: 20, left: 20, bottom: 80 }}
@@ -1220,19 +1269,27 @@ export function InnovationBuiltInsidePage() {
                           const xAxis: any = xAxes[0];
                           const ticks = xAxis?.ticks || [];
 
-                          const value = selectedProjectDetails?.technology_maturity_level;
+                          const value =
+                            selectedProjectDetails?.technology_maturity_level;
 
-                          const xFromScale = typeof xAxis?.scale === "function" ? xAxis.scale(value) : undefined;
+                          const xFromScale =
+                            typeof xAxis?.scale === "function"
+                              ? xAxis.scale(value)
+                              : undefined;
 
                           const tick = ticks.find(
                             (t: any) =>
                               t &&
-                              (t.value === value || (t.payload && t.payload.value === value))
+                              (t.value === value ||
+                                (t.payload && t.payload.value === value))
                           );
 
                           const axisOffsetX = xAxis?.x ?? 0;
 
-                          const x = (xFromScale ?? tick?.coordinate ?? width / 2) + axisOffsetX - 15;
+                          const x =
+                            (xFromScale ?? tick?.coordinate ?? width / 2) +
+                            axisOffsetX -
+                            15;
 
                           const rectWidth = 140;
                           const rectHeight = 28;
@@ -1267,14 +1324,13 @@ export function InnovationBuiltInsidePage() {
                       />
                     </LineChart>
                   </ResponsiveContainer>
-                }
+                )}
               </div>
             </div>
-
           </div>
         </DialogContent>
       </Dialog>
-    </DashboardLayout >
+    </DashboardLayout>
   );
 }
 

app/components/dashboard/project-management/mange-ideas-tech-page.tsx

@@ -0,0 +1,794 @@
+import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { Badge } from "~/components/ui/badge";
+import { Card, CardContent } from "~/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import apiService from "~/lib/api";
+import { formatNumber } from "~/lib/utils";
+import { DashboardLayout } from "../layout";
+
+interface ProjectData {
+  WorkflowID: number;
+  ValueP1215S1887ValueID: number;
+  ValueP1215S1887StageID: number;
+  project_no: string;
+  importance_project: string;
+  title: string;
+  strategic_theme: string;
+  value_technology_and_innovation: string;
+  type_of_innovation: string;
+  innovation: string;
+  person_executing: string;
+  excellent_observer: string;
+  observer: string;
+  moderator: string;
+  start_date: string;
+  end_date: string | null;
+  done_date: string | null;
+  approved_budget: string;
+  budget_spent: string;
+}
+
+interface SortConfig {
+  field: string; // uses column.key
+  direction: "asc" | "desc";
+}
+
+type ColumnDef = {
+  key: string; // UI key
+  label: string;
+  sortable: boolean;
+  width: string;
+  apiField?: string; // API field name; defaults to key
+  computed?: boolean; // not fetched from API
+};
+
+// const columns: ColumnDef[] = [
+//   { key: "idea_title", label: "عنوان پروژه", sortable: true, width: "200px" },
+//   {
+//     key: "idea_status",
+//     label: "میزان اهمیت",
+//     sortable: true,
+//     width: "150px",
+//   },
+//   {
+//     key: "strategic_theme",
+//     label: "مضمون راهبردی",
+//     sortable: true,
+//     width: "160px",
+//   },
+//   {
+//     key: "value_technology_and_innovation",
+//     label: "ارزش فناوری و نوآوری",
+//     sortable: true,
+//     width: "200px",
+//   },
+//   {
+//     key: "type_of_innovation",
+//     label: "انواع نوآوری",
+//     sortable: true,
+//     width: "140px",
+//   },
+//   { key: "innovation", label: "میزان نوآوری", sortable: true, width: "120px" },
+//   {
+//     key: "person_executing",
+//     label: "مسئول اجرا",
+//     sortable: true,
+//     width: "140px",
+//   },
+//   {
+//     key: "excellent_observer",
+//     label: "ناطر عالی",
+//     sortable: true,
+//     width: "140px",
+//   },
+//   { key: "observer", label: "ناظر پروژه", sortable: true, width: "140px" },
+//   { key: "moderator", label: "مجری", sortable: true, width: "140px" },
+//   {
+//     key: "executive_phase",
+//     label: "فاز اجرایی",
+//     sortable: true,
+//     width: "140px",
+//   },
+//   { key: "start_date", label: "تاریخ شروع", sortable: true, width: "120px" },
+//   {
+//     key: "remaining_time",
+//     label: "زمان باقی مانده",
+//     sortable: true,
+//     width: "140px",
+//     computed: true,
+//   },
+//   {
+//     key: "end_date",
+//     label: "تاریخ پایان (برنامه‌ریزی)",
+//     sortable: true,
+//     width: "160px",
+//   },
+//   {
+//     key: "renewed_duration",
+//     label: "مدت زمان تمدید",
+//     sortable: true,
+//     width: "140px",
+//   },
+//   {
+//     key: "done_date",
+//     label: "تاریخ پایان (واقعی)",
+//     sortable: true,
+//     width: "160px",
+//   },
+//   {
+//     key: "deviation_from_program",
+//     label: "متوسط انحراف برنامه‌ای",
+//     sortable: true,
+//     width: "160px",
+//   },
+//   {
+//     key: "approved_budget",
+//     label: "بودجه مصوب",
+//     sortable: true,
+//     width: "150px",
+//   },
+//   {
+//     key: "budget_spent",
+//     label: "بودجه صرف شده",
+//     sortable: true,
+//     width: "150px",
+//   },
+//   {
+//     key: "cost_deviation",
+//     label: "متوسط انحراف هزینه‌ای",
+//     sortable: true,
+//     width: "160px",
+//   },
+// ];
+
+const columns: ColumnDef[] = [
+  { key: "idea_title", label: "عنوان ایده", sortable: true, width: "200px" },
+  { key: "idea_axis", label: "محور ایده", sortable: true, width: "160px" },
+  {
+    key: "idea_current_status_description",
+    label: "توضیح وضعیت فعلی ایده",
+    sortable: true,
+    width: "220px",
+  },
+  {
+    key: "idea_description",
+    label: "شرح ایده",
+    sortable: true,
+    width: "200px",
+  },
+  {
+    key: "full_name",
+    label: "نام و نام خانوادگی",
+    sortable: true,
+    width: "160px",
+  },
+  {
+    key: "idea_status",
+    label: "وضعیت ایده",
+    sortable: true,
+    width: "260px",
+  },
+  {
+    key: "personnel_number",
+    label: "شماره پرسنلی",
+    sortable: true,
+    width: "140px",
+  },
+  {
+    key: "innovator_team_members",
+    label: "اعضای تیم نوآور",
+    sortable: true,
+    width: "200px",
+  },
+  {
+    key: "idea_registration_date",
+    label: "تاریخ ثبت ایده",
+    sortable: true,
+    width: "160px",
+  },
+  { key: "deputy", label: "معاونت مربوطه", sortable: true, width: "160px" },
+  { key: "management", label: "مدیریت", sortable: true, width: "140px" },
+  {
+    key: "idea_execution_benefits",
+    label: "مزایای اجرای ایده",
+    sortable: true,
+    width: "220px",
+  },
+  {
+    key: "innovation_type",
+    label: "نوع نوآوری",
+    sortable: true,
+    width: "160px",
+  },
+  {
+    key: "idea_originality",
+    label: "میزان اصالت ایده",
+    sortable: true,
+    width: "160px",
+  },
+  {
+    key: "idea_income",
+    label: "درآمد حاصل از ایده",
+    sortable: true,
+    width: "160px",
+  },
+  {
+    key: "process_improvements",
+    label: "بهبودهای فرآیندی",
+    sortable: true,
+    width: "180px",
+  },
+];
+
+// idea_income , idea_registration_date , idea_originality , personnel_number
+
+export function ManageIdeasTechPage() {
+  const [projects, setProjects] = useState<ProjectData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize] = useState(25);
+  const [hasMore, setHasMore] = useState(true);
+  const [totalCount, setTotalCount] = useState(0);
+  const [actualTotalCount, setActualTotalCount] = useState(0);
+  const [sortConfig, setSortConfig] = useState<SortConfig>({
+    field: "idea_title",
+    direction: "asc",
+  });
+  const observerRef = useRef<HTMLDivElement>(null);
+  const fetchingRef = useRef(false);
+
+  const fetchProjects = async (reset = false) => {
+    // Prevent concurrent API calls
+    if (fetchingRef.current) {
+      return;
+    }
+
+    try {
+      fetchingRef.current = true;
+
+      if (reset) {
+        setLoading(true);
+        setCurrentPage(1);
+      } else {
+        setLoadingMore(true);
+      }
+
+      const pageToFetch = reset ? 1 : currentPage;
+
+      const fetchableColumns = columns.filter((c) => !c.computed);
+      const outputFields = fetchableColumns.map((c) => c.apiField ?? c.key);
+      const sortCol = columns.find((c) => c.key === sortConfig.field);
+      const sortField = sortCol?.computed
+        ? undefined
+        : (sortCol?.apiField ?? sortCol?.key);
+
+      const response = await apiService.select({
+        ProcessName: "idea",
+        OutputFields: outputFields,
+        Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
+        Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
+        Conditions: [],
+      });
+
+      if (response.state === 0) {
+        // Parse the JSON string from the API response
+        const dataString = response.data;
+        if (dataString && typeof dataString === "string") {
+          try {
+            const parsedData = JSON.parse(dataString);
+            if (Array.isArray(parsedData)) {
+              if (reset) {
+                setProjects(parsedData);
+                setTotalCount(parsedData.length);
+              } else {
+                setProjects((prev) => [...prev, ...parsedData]);
+                setTotalCount((prev) => prev + parsedData.length);
+              }
+
+              // Check if there are more items to load
+              setHasMore(parsedData.length === pageSize);
+            } else {
+              if (reset) {
+                setProjects([]);
+                setTotalCount(0);
+              }
+              setHasMore(false);
+            }
+          } catch (parseError) {
+            console.error("Error parsing project data:", parseError);
+            if (reset) {
+              setProjects([]);
+              setTotalCount(0);
+            }
+            setHasMore(false);
+          }
+        } else {
+          if (reset) {
+            setProjects([]);
+            setTotalCount(0);
+          }
+          setHasMore(false);
+        }
+      } else {
+        toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
+        if (reset) {
+          setProjects([]);
+          setTotalCount(0);
+        }
+        setHasMore(false);
+      }
+    } catch (error) {
+      console.error("Error fetching projects:", error);
+      toast.error("خطا در دریافت اطلاعات پروژه‌ها");
+      if (reset) {
+        setProjects([]);
+        setTotalCount(0);
+      }
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+      fetchingRef.current = false;
+    }
+  };
+
+  const loadMore = useCallback(() => {
+    if (!loadingMore && hasMore && !loading) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  }, [loadingMore, hasMore, loading]);
+
+  useEffect(() => {
+    fetchProjects(true);
+    fetchTotalCount();
+  }, [sortConfig]);
+
+  useEffect(() => {
+    if (currentPage > 1) {
+      fetchProjects(false);
+    }
+  }, [currentPage]);
+
+  // Infinite scroll observer
+  useEffect(() => {
+    const scrollContainer = document.querySelector(".overflow-auto");
+
+    const handleScroll = () => {
+      if (!scrollContainer || !hasMore || loadingMore) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+      // Trigger load more when scrolled to 90% of the container
+      if (scrollPercentage >= 0.9) {
+        loadMore();
+      }
+    };
+
+    if (scrollContainer) {
+      scrollContainer.addEventListener("scroll", handleScroll);
+    }
+
+    return () => {
+      if (scrollContainer) {
+        scrollContainer.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [loadMore, hasMore, loadingMore]);
+
+  const handleSort = (field: string) => {
+    fetchingRef.current = false; // Reset fetching state on sort
+    setSortConfig((prev) => ({
+      field,
+      direction:
+        prev.field === field && prev.direction === "asc" ? "desc" : "asc",
+    }));
+    setCurrentPage(1);
+    setProjects([]);
+    setHasMore(true);
+  };
+
+  const fetchTotalCount = async () => {
+    try {
+      const response = await apiService.select({
+        ProcessName: "idea",
+        OutputFields: ["count(idea_no)"],
+        Conditions: [],
+      });
+
+      if (response.state === 0) {
+        const dataString = response.data;
+        if (dataString && typeof dataString === "string") {
+          try {
+            const parsedData = JSON.parse(dataString);
+            if (Array.isArray(parsedData) && parsedData[0]) {
+              setActualTotalCount(parsedData[0].project_no_count || 0);
+            }
+          } catch (parseError) {
+            console.error("Error parsing count data:", parseError);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching total count:", error);
+    }
+  };
+
+  const formatCurrency = (amount: string | number) => {
+    if (!amount) return "0 ریال";
+    // Remove commas and convert to number
+    const numericAmount =
+      typeof amount === "string"
+        ? parseFloat(amount.replace(/,/g, ""))
+        : amount;
+    if (isNaN(numericAmount)) return "0 ریال";
+    return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
+  };
+
+  // const formatNumber = (value: string | number) => {
+  //   if (value === undefined || value === null || value === "") return "0";
+  //   const numericValue = typeof value === "string" ? Number(value) : value;
+  //   if (Number.isNaN(numericValue)) return "0";
+  //   return new Intl.NumberFormat("fa-IR").format(numericValue as number);
+  // };
+
+  const toPersianDigits = (input: string | number): string => {
+    const str = String(input);
+    const map: Record<string, string> = {
+      "0": "۰",
+      "1": "۱",
+      "2": "۲",
+      "3": "۳",
+      "4": "۴",
+      "5": "۵",
+      "6": "۶",
+      "7": "۷",
+      "8": "۸",
+      "9": "۹",
+    };
+    return str.replace(/[0-9]/g, (d) => map[d] ?? d);
+  };
+
+  // ----- Jalali <-> Gregorian conversion helpers (lightweight, local) -----
+  const isJalaliDateString = (raw: string): boolean => {
+    return /^(\d{4})[\/](\d{1,2})[\/](\d{1,2})$/.test(raw.trim());
+  };
+
+  const div = (a: number, b: number) => ~~(a / b);
+
+  const jalaliToJDN = (jy: number, jm: number, jd: number): number => {
+    jy = jy - (jy >= 0 ? 474 : 473);
+    const cycle = 1029983;
+    const yCycle = 474 + (jy % 2820);
+    const jdn =
+      jd +
+      (jm <= 7 ? (jm - 1) * 31 : (jm - 7) * 30 + 186) +
+      div((yCycle * 682 - 110) as number, 2816) +
+      (yCycle - 1) * 365 +
+      div(jy, 2820) * cycle +
+      (1948320 - 1);
+    return jdn;
+  };
+
+  const jdnToGregorian = (jdn: number): [number, number, number] => {
+    let j = jdn + 32044;
+    const g = div(j, 146097);
+    const dg = j % 146097;
+    const c = div((div(dg, 36524) + 1) * 3, 4);
+    const dc = dg - c * 36524;
+    const b = div(dc, 1461);
+    const db = dc % 1461;
+    const a = div((div(db, 365) + 1) * 3, 4);
+    const da = db - a * 365;
+    const y = g * 400 + c * 100 + b * 4 + a;
+    const m = div(da * 5 + 308, 153) - 2;
+    const d = da - div((m + 4) * 153, 5) + 122;
+    const year = y - 4800 + div(m + 2, 12);
+    const month = ((m + 2) % 12) + 1;
+    const day = d + 1;
+    return [year, month, day];
+  };
+
+  const jalaliToGregorianDate = (jy: number, jm: number, jd: number): Date => {
+    const jdn = jalaliToJDN(jy, jm, jd);
+    const [gy, gm, gd] = jdnToGregorian(jdn);
+    return new Date(gy, gm - 1, gd);
+  };
+
+  const parseToDate = (value: string | null): Date | null => {
+    if (!value) return null;
+    const raw = String(value).trim();
+    if (isJalaliDateString(raw)) {
+      const [jy, jm, jd] = raw.split("/").map((s) => Number(s));
+      if ([jy, jm, jd].some((n) => Number.isNaN(n))) return null;
+      return jalaliToGregorianDate(jy, jm, jd);
+    }
+    const tryDate = new Date(raw);
+    return Number.isNaN(tryDate.getTime()) ? null : tryDate;
+  };
+
+  const getTodayMidnight = (): Date => {
+    const now = new Date();
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  };
+
+  const calculateRemainingDays = (end: string | null): number | null => {
+    if (!end) return null; // if either missing
+    const endDate = parseToDate(end);
+    if (!endDate) return null;
+    const today = getTodayMidnight();
+    const MS_PER_DAY = 24 * 60 * 60 * 1000;
+    const diff = Math.round((endDate.getTime() - today.getTime()) / MS_PER_DAY);
+    return diff;
+  };
+
+  const formatDate = (dateString: string | null) => {
+    if (!dateString || dateString === "null" || dateString.trim() === "") {
+      return "-";
+    }
+
+    // If API already returns Jalali like 1404/05/30, just convert digits
+    const raw = String(dateString).trim();
+    const jalaliPattern = /^(\d{4})[\/](\d{1,2})[\/](\d{1,2})$/;
+    const jalaliMatch = raw.match(jalaliPattern);
+    if (jalaliMatch) {
+      const [, y, m, d] = jalaliMatch;
+      const mm = m.padStart(2, "0");
+      const dd = d.padStart(2, "0");
+      return toPersianDigits(`${y}/${mm}/${dd}`);
+    }
+
+    // Otherwise, try to parse and render Persian calendar
+    try {
+      const parsed = new Date(raw);
+      if (isNaN(parsed.getTime())) return "-";
+      return new Intl.DateTimeFormat("fa-IR-u-ca-persian", {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+      }).format(parsed);
+    } catch {
+      return "-";
+    }
+  };
+
+  const phaseColors: Record<string, string> = {
+    "تحقیق و توسعه": "#FFD700", // Yellow
+    آزمایش: "#1E90FF", // Blue
+    تولید: "#32CD32", // Green
+    default: "#ccc", // Fallback gray
+  };
+
+  const getImportanceColor = (importance: string) => {
+    switch (importance?.toLowerCase()) {
+      case "تایید شده":
+        return "#3AEA83"; // سبز
+      case "در حال بررسی":
+        return "#69C8EA"; // آبی
+      case "رد شده":
+        return "#F76276"; // قرمز
+      case "اجرا شده":
+        return "#FBBF24"; // زرد/نارنجی
+      default:
+        return "#6B7280"; // خاکستری پیش‌فرض
+    }
+  };
+
+  // idea_income , idea_registration_date , idea_originality , personnel_number
+
+  const renderCellContent = (item: ProjectData, column: ColumnDef) => {
+    const apiField = column.apiField ?? column.key;
+    const value = (item as any)[apiField];
+
+    switch (column.key) {
+      case "remaining_time": {
+        const days = calculateRemainingDays(item.end_date);
+        if (days == null) {
+          return <span className="text-gray-300">-</span>;
+        }
+        const color = days > 0 ? "#3AEA83" : days < 0 ? "#F76276" : undefined;
+        return (
+          <span
+            dir="ltr"
+            className="font-medium flex justify-end gap-1 items-center"
+            style={{ color }}
+          >
+            <span>روز</span> {toPersianDigits(days)}
+          </span>
+        );
+      }
+      // case "strategic_theme":
+      // case "value_technology_and_innovation":
+      // case "type_of_innovation":
+      // case "innovation":
+      //   return (
+      //     <span className="inline-flex items-center justify-end flex-row-reverse gap-2 w-full">
+      //       <span className="text-gray-300">{String(value) || "-"}</span>
+      //       <span
+      //         style={{
+      //           backgroundColor: `${column.key === "strategic_theme" ? "#6D53FB" : column.key === "value_technology_and_innovation" ? "#A757FF" : column.key === "type_of_innovation" ? "#E884CE" : "#C3BF8B"}`,
+      //         }}
+      //         className="inline-block w-2 h-2 rounded-full bg-emerald-400"
+      //       />
+      //     </span>
+      //   );
+      case "idea_income":
+        return (
+          <span className="font-medium text-emerald-400">
+            {formatCurrency(String(value))}
+          </span>
+        );
+      case "personnel_number":
+        // case "idea_originality":
+        return (
+          <span className="text-gray-300">{formatNumber(value as any)} </span>
+        );
+      case "idea_registration_date":
+        return (
+          <span className="text-gray-300">{formatDate(String(value))}</span>
+        );
+      case "project_no":
+        return (
+          <Badge
+            variant="outline"
+            className="font-mono text-emerald-400 border-emerald-500/50"
+          >
+            {String(value)}
+          </Badge>
+        );
+      case "idea_title":
+        return <span className="font-medium text-white">{String(value)}</span>;
+      case "idea_status":
+        return (
+          <Badge
+            variant="outline"
+            className="font-medium border-2"
+            style={{
+              color: getImportanceColor(String(value)),
+              borderColor: getImportanceColor(String(value)),
+              backgroundColor: `${getImportanceColor(String(value))}20`,
+            }}
+          >
+            {String(value)}
+          </Badge>
+        );
+      default:
+        return (
+          <span className="text-gray-300">
+            {(value && String(value)) || "-"}
+          </span>
+        );
+    }
+  };
+
+  const totalPages = Math.ceil(totalCount / pageSize);
+
+  return (
+    <DashboardLayout title="مدیریت ایده های فناوری و نوآوری">
+      <div className="p-6 space-y-6">
+        {/* Data Table */}
+        <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
+          <CardContent className="p-0">
+            <div className="relative">
+              <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(100vh-200px)]">
+                <TableHeader className="sticky top-0 z-50 bg-[#3F415A]">
+                  <TableRow className="bg-[#3F415A]">
+                    {columns.map((column) => (
+                      <TableHead
+                        key={column.key}
+                        className="text-right font-persian whitespace-nowrap text-gray-200 font-medium bg-[#3F415A] sticky top-0 z-20"
+                        style={{ width: column.width }}
+                      >
+                        {column.sortable ? (
+                          <button
+                            onClick={() => handleSort(column.key)}
+                            className="flex items-center gap-2"
+                          >
+                            <span>{column.label}</span>
+                            {sortConfig.field === column.key ? (
+                              sortConfig.direction === "asc" ? (
+                                <ChevronUp className="w-4 h-4" />
+                              ) : (
+                                <ChevronDown className="w-4 h-4" />
+                              )
+                            ) : (
+                              <div className="w-4 h-4" />
+                            )}
+                          </button>
+                        ) : (
+                          column.label
+                        )}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {loading ? (
+                    // Skeleton loading rows (compact)
+                    Array.from({ length: 20 }).map((_, index) => (
+                      <TableRow
+                        key={`skeleton-${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"
+                          >
+                            <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>
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  ) : projects.length === 0 ? (
+                    <TableRow>
+                      <TableCell
+                        colSpan={columns.length}
+                        className="text-center py-8"
+                      >
+                        <span className="text-gray-400 font-persian">
+                          هیچ پروژه‌ای یافت نشد
+                        </span>
+                      </TableCell>
+                    </TableRow>
+                  ) : (
+                    projects.map((project, index) => (
+                      <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"
+                          >
+                            {renderCellContent(project, column)}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+
+            {/* Infinite scroll trigger */}
+            <div ref={observerRef} className="h-auto">
+              {loadingMore && (
+                <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>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+
+          {/* Footer */}
+          <div className="p-4 bg-gray-700/50">
+            <div className="flex items-center justify-between text-sm text-gray-300 font-persian">
+              <span>کل پروژه‌ها: {formatNumber(actualTotalCount)}</span>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </DashboardLayout>
+  );
+}

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

@@ -1,12 +1,30 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { DashboardLayout } from "../layout";
-import { Card, CardContent } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
+import {
+  Building2,
+  ChevronDown,
+  ChevronUp,
+  CirclePause,
+  DollarSign,
+  Funnel,
+  PickaxeIcon,
+  RefreshCw,
+  UserIcon,
+  UsersIcon,
+  Wrench,
+} from "lucide-react";
+import moment from "moment-jalaali";
+import { useCallback, useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
 import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent } from "~/components/ui/card";
 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 {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -15,29 +33,14 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
-import {
-  ChevronUp,
-  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 { formatNumber } from "~/lib/utils";
+import { DashboardLayout } from "../layout";
 
 moment.loadPersian({ usePersianDigits: true });
 interface ProcessInnovationData {
   project_no: string;
+  project_id: string;
   title: string;
   project_status: string;
   project_rating: string;
@@ -48,18 +51,31 @@ interface ProcessInnovationData {
   observer: string;
 }
 
+interface ProjectStats {
+  average_project_score: string;
+  count_innovation_process_projects: number;
+  count_throat_removal: number;
+  percent_reducing_breakdowns: string;
+  percent_reduction_value_currency: string;
+  percent_sum_stopping_production: string;
+  percent_throat_removal: string;
+  sum_reducing_breakdowns: number;
+  sum_reduction_value_currency: number;
+  sum_stopping_production: number;
+}
+
 interface SortConfig {
   field: string;
   direction: "asc" | "desc";
 }
 
-interface StatsCard {
-  id: string;
-  title: string;
-  value: string;
-  description: string;
-  icon: React.ReactNode;
-  color: string;
+enum projectStatus {
+  propozal = "پروپوزال",
+  contract = "پیشنویس قرارداد",
+  inprogress = "در حال انجام",
+  stop = "متوقف شده",
+  mafasa = "مرحله مفاصا",
+  finish = "پایان یافته",
 }
 
 interface InnovationStats {
@@ -69,10 +85,10 @@ interface InnovationStats {
   bottleneckRemovalCount: number; // تعداد رفع گلوگاه
   currencyReductionSum: number; // مجموع کاهش ارز بری (میلیون ریال)
   frequentFailuresReductionSum: number; // مجموع کاهش خرابی های پرتکرار
-  percentProductionStops: number; // درصد مقایسه‌ای جلوگیری از توقفات تولید
-  percentBottleneckRemoval: number; // درصد مقایسه‌ای رفع گلوگاه
-  percentCurrencyReduction: number; // درصد مقایسه‌ای کاهش ارز بری
-  percentFailuresReduction: number; // درصد مقایسه‌ای کاهش خرابی‌های پرتکرار
+  percentProductionStops: number | string; // درصد مقایسه‌ای جلوگیری از توقفات تولید
+  percentBottleneckRemoval: number | string; // درصد مقایسه‌ای رفع گلوگاه
+  percentCurrencyReduction: number | string; // درصد مقایسه‌ای کاهش ارز بری
+  percentFailuresReduction: number | string; // درصد مقایسه‌ای کاهش خرابی‌های پرتکرار
 }
 
 const columns = [
@@ -126,6 +142,50 @@ export function ProcessInnovationPage() {
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
   const [selectedProjectDetails, setSelectedProjectDetails] =
     useState<ProcessInnovationData | null>(null);
+
+  const [stateCard, setStateCard] = useState({
+    productionstopsprevention: {
+      id: "productionstopsprevention",
+      title: "جلوگیری از توقفات تولید",
+      value: formatNumber(
+        stats.productionStopsPreventionSum.toFixed?.(1) ??
+          stats.productionStopsPreventionSum
+      ),
+      description: "تن افزایش یافته",
+      icon: <CirclePause />,
+      color: "text-emerald-400",
+    },
+    bottleneckremoval: {
+      id: "bottleneckremoval",
+      title: "رفع گلوگاه",
+      value: formatNumber(stats.bottleneckRemovalCount),
+      description: "تعداد رفع گلوگاه",
+      icon: <Funnel />,
+      color: "text-emerald-400",
+    },
+    currencyreduction: {
+      id: "currencyreduction",
+      title: "کاهش ارز بری",
+      value: formatNumber(
+        stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
+      ),
+      description: "دلار کاهش یافته",
+      icon: <DollarSign />,
+      color: "text-emerald-400",
+    },
+    frequentfailuresreduction: {
+      id: "frequentfailuresreduction",
+      title: "کاهش خرابی های پرتکرار",
+      value: formatNumber(
+        stats.frequentFailuresReductionSum.toFixed?.(1) ??
+          stats.frequentFailuresReductionSum
+      ),
+      description: "مجموع درصد کاهش خرابی",
+      icon: <Wrench />,
+      color: "text-emerald-400",
+    },
+  });
+
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
 
@@ -153,58 +213,7 @@ export function ProcessInnovationPage() {
     setDetailsDialogOpen(true);
   };
 
-  const formatNumber = (value: string | number) => {
-    if (!value) return "0";
-    const numericValue = typeof value === "string" ? parseFloat(value) : value;
-    if (isNaN(numericValue)) return "0";
-    return new Intl.NumberFormat("fa-IR").format(numericValue);
-  };
-
   // Stats cards data - computed from projects data
-  const statsCards: StatsCard[] = [
-    {
-      id: "production-stops-prevention",
-      title: "جلوگیری از توقفات تولید",
-      value: formatNumber(
-        stats.productionStopsPreventionSum.toFixed?.(1) ??
-          stats.productionStopsPreventionSum
-      ),
-      description: "تن افزایش یافته",
-      icon: <CirclePause />,
-      color: "text-emerald-400",
-    },
-    {
-      id: "bottleneck-removal",
-      title: "رفع گلوگاه",
-      value: formatNumber(stats.bottleneckRemovalCount),
-      description: "تعداد رفع گلوگاه",
-      icon: <Funnel />,
-      color: "text-emerald-400",
-    },
-
-    {
-      id: "currency-reduction",
-      title: "کاهش ارز بری",
-      value: formatNumber(
-        stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
-      ),
-      description: "دلار کاهش یافته",
-      icon: <DollarSign />,
-      color: "text-emerald-400",
-    },
-    {
-      id: "frequent-failures-reduction",
-      title: "کاهش خرابی های پرتکرار",
-      value: formatNumber(
-        stats.frequentFailuresReductionSum.toFixed?.(1) ??
-          stats.frequentFailuresReductionSum
-      ),
-      description: "مجموع درصد کاهش خرابی",
-      icon: <Wrench />,
-      color: "text-emerald-400",
-    },
-  ];
-
   const fetchProjects = async (reset = false) => {
     if (fetchingRef.current) {
       return;
@@ -226,6 +235,7 @@ export function ProcessInnovationPage() {
         ProcessName: "project",
         OutputFields: [
           "project_no",
+          "project_id",
           "title",
           "project_status",
           "project_rating",
@@ -313,9 +323,12 @@ export function ProcessInnovationPage() {
   useEffect(() => {
     fetchProjects(true);
     fetchTotalCount();
-    fetchStats();
   }, [sortConfig]);
 
+  useEffect(() => {
+    fetchStats();
+  }, [selectedProjects]);
+
   useEffect(() => {
     if (currentPage > 1) {
       fetchProjects(false);
@@ -393,7 +406,12 @@ export function ProcessInnovationPage() {
     try {
       setStatsLoading(true);
       const raw = await apiService.call<any>({
-        innovation_process_function: {},
+        innovation_process_function: {
+          project_ids:
+            selectedProjects.size > 0
+              ? Array.from(selectedProjects).join(" , ")
+              : "",
+        },
       });
 
       let payload: any = raw?.data;
@@ -403,40 +421,53 @@ export function ProcessInnovationPage() {
         } catch {}
       }
 
-      const parseNum = (v: unknown): number => {
+      const parseNum = (v: unknown): any => {
+        const convertNumber = typeof v === "number" ? Math.max(0, v) : 0;
         if (v == null) return 0;
-        if (typeof v === "number") return v;
+        if (typeof v === "number") return convertNumber;
         if (typeof v === "string") {
           const cleaned = v.replace(/,/g, "").trim();
           const n = parseFloat(cleaned);
-          return isNaN(n) ? 0 : n;
+          return isNaN(n) ? 0 : convertNumber;
         }
         return 0;
       };
 
+      const data: Array<ProjectStats> = JSON.parse(
+        payload?.innovation_process_function
+      );
+      const stats = data[0];
       const normalized: InnovationStats = {
-        totalProjects: parseNum(payload?.count_innovation_process_projects),
-        averageScore: parseNum(payload?.average_project_score),
-        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
-        ),
-        percentProductionStops: parseNum(
-          payload?.percent_sum_stopping_production
-        ),
-        percentBottleneckRemoval: parseNum(payload?.percent_throat_removal),
-        percentCurrencyReduction: parseNum(
-          payload?.percent_reduction_value_currency
-        ),
-        percentFailuresReduction: parseNum(
-          payload?.percent_reducing_breakdowns
-        ),
+        totalProjects: parseNum(stats?.count_innovation_process_projects),
+        averageScore: parseNum(stats?.average_project_score),
+        productionStopsPreventionSum: parseNum(stats?.sum_stopping_production),
+        bottleneckRemovalCount: parseNum(stats?.count_throat_removal),
+        currencyReductionSum: parseNum(stats?.sum_reduction_value_currency),
+        frequentFailuresReductionSum: parseNum(stats?.sum_reducing_breakdowns),
+        percentProductionStops: stats?.percent_sum_stopping_production,
+        percentBottleneckRemoval: stats?.percent_throat_removal,
+        percentCurrencyReduction: stats?.percent_reduction_value_currency,
+        percentFailuresReduction: stats?.percent_reducing_breakdowns,
       };
-
+      setStateCard((prev) => ({
+        ...prev,
+        bottleneckremoval: {
+          ...prev.bottleneckremoval,
+          value: formatNumber(normalized.bottleneckRemovalCount),
+        },
+        productionstopsprevention: {
+          ...prev.productionstopsprevention,
+          value: formatNumber(normalized.productionStopsPreventionSum),
+        },
+        frequentfailuresreduction: {
+          ...prev.frequentfailuresreduction,
+          value: formatNumber(normalized.frequentFailuresReductionSum),
+        },
+        currencyreduction: {
+          ...prev.currencyreduction,
+          value: formatNumber(normalized.currencyReductionSum),
+        },
+      }));
       setStats(normalized);
     } catch (error) {
       console.error("Error fetching stats:", error);
@@ -445,16 +476,6 @@ export function ProcessInnovationPage() {
     }
   };
 
-  const handleRefresh = () => {
-    fetchingRef.current = false;
-    setCurrentPage(1);
-    setProjects([]);
-    setHasMore(true);
-    fetchProjects(true);
-    fetchTotalCount();
-    fetchStats();
-  };
-
   const formatCurrency = (amount: string | number) => {
     if (!amount) return "0 ریال";
     const numericAmount =
@@ -465,34 +486,28 @@ export function ProcessInnovationPage() {
     return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
   };
 
-  const formatPercentage = (value: string | number) => {
-    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 statusColor = (status: projectStatus): any => {
+    let el = null;
+    switch (status) {
+      case projectStatus.contract:
+        el = "teal";
+        break;
+      case projectStatus.finish:
+        el = "info";
+        break;
+      case projectStatus.stop:
+        el = "warning";
+        break;
+      case projectStatus.inprogress:
+        el = "teal";
+        break;
+      case projectStatus.mafasa:
+        el = "destructive";
+        break;
+      case projectStatus.propozal:
+        el = "info";
     }
-  };
-
-  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";
+    return el;
   };
 
   const renderCellContent = (item: ProcessInnovationData, column: any) => {
@@ -502,8 +517,8 @@ export function ProcessInnovationPage() {
       case "select":
         return (
           <Checkbox
-            checked={selectedProjects.has(item.project_no)}
-            onCheckedChange={() => handleSelectProject(item.project_no)}
+            checked={selectedProjects.has(item.project_id)}
+            onCheckedChange={() => handleSelectProject(item.project_id)}
             className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
           />
         );
@@ -534,15 +549,16 @@ export function ProcessInnovationPage() {
         return <span className="font-medium text-white">{String(value)}</span>;
       case "project_status":
         return (
+          <div className="flex items-center gap-1">
             <Badge
-            variant="outline"
-            className="font-medium border-2"
+              variant={statusColor(value)}
+              className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
               style={{
                 border: "none",
               }}
-          >
+            ></Badge>
             {String(value)}
-          </Badge>
+          </div>
         );
       case "project_rating":
         return (
@@ -603,7 +619,7 @@ export function ProcessInnovationPage() {
                       </CardContent>
                     </Card>
                   ))
-                : statsCards.map((card) => (
+                : Object.entries(stateCard).map(([key, card]) => (
                     <Card
                       key={card.id}
                       className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
@@ -792,61 +808,32 @@ export function ProcessInnovationPage() {
             </div>
           </CardContent>
 
-          {/* Selection Summary */}
-          {/* {selectedProjects.size > 0 && (
-            <div className="px-4 py-3 bg-emerald-500/10 border-t border-emerald-500/20">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
-                  <span className="text-emerald-400 font-medium font-persian">
-                    {selectedProjects.size} پروژه انتخاب شده
-                  </span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setSelectedProjects(new Set())}
-                    className="border-emerald-500/30 text-emerald-400 hover:bg-emerald-500/20 hover:text-emerald-300"
-                  >
-                    لغو انتخاب
-                  </Button>
-                </div>
-              </div>
-            </div>
-          )} */}
           {/* Footer */}
+
           <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="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">
-                  {" "}
-                  کل پروژه ها :{" "}
-                  {formatNumber(stats.totalProjects || actualTotalCount)}
-                </div>
-              </div>
-              {/* Project number column - empty */}
-              <div></div>
-              {/* Title column - empty */}
-              <div></div>
-              {/* Project status column - empty */}
-              <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="font-bold">
-                  {formatNumber(
-                    ((stats.averageScore ?? 0) as number).toFixed?.(1) ??
-                      stats.averageScore ??
-                      0
-                  )}
+                  کل پروژه ها :{formatNumber(actualTotalCount)}
                 </div>
               </div>
 
-              {/* Details column - show total count */}
+              <div className="flex  items-center flex-row gap-20 status justify-center xl:w-2/3 sm:w-full">
+                <div className="flex flex-row-reverse">
+                  <span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
+                  <span className="block w-7 h-2.5 bg-purple-500 "></span>
+                  <span className="block w-7 h-2.5 bg-cyan-300 "></span>
+                  <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="font-bold">
+                    {formatNumber(
+                      ((stats.averageScore ?? 0) as number).toFixed?.(1) ?? 0
+                    )}
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </Card>

app/components/dashboard/sidebar.tsx

@@ -1,45 +1,31 @@
+import {
+  Box,
+  Building2,
+  ChevronDown,
+  ChevronRight,
+  FolderKanban,
+  GalleryVerticalEnd,
+  Globe,
+  LayoutDashboard,
+  Leaf,
+  Lightbulb,
+  LogOut,
+  MonitorSmartphone,
+  Package,
+  Settings,
+  Star,
+  Workflow,
+} from "lucide-react";
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router";
-import { cn } from "~/lib/utils";
-import { InogenLogo } from "~/components/ui/brand-logo";
 import { useAuth } from "~/contexts/auth-context";
-import {
-  GalleryVerticalEnd,
-  LayoutDashboard,
-  FolderOpen,
-  Users,
-  BarChart3,
-  Settings,
-  ChevronLeft,
-  ChevronDown,
-  FileText,
-  Calendar,
-  Bell,
-  User,
-  Database,
-  Shield,
-  HelpCircle,
-  LogOut,
-  ChevronRight,
-  Refrigerator,
-} from "lucide-react";
-import {
-  FolderKanban,
-  Box,
-  Package,
-  Workflow,
-  MonitorSmartphone,
-  Leaf,
-  Building2,
-  Globe,
-  Lightbulb,
-  Star,
-} from "lucide-react";
+import { cn } from "~/lib/utils";
 
 interface SidebarProps {
   isCollapsed?: boolean;
   onToggleCollapse?: () => void;
   className?: string;
+  onStrategicAlignmentClick?: () => void;
 }
 
 interface MenuItem {
@@ -52,6 +38,7 @@ interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
+ 
   {
     id: "dashboard",
     label: "صفحه اصلی",
@@ -111,7 +98,7 @@ const menuItems: MenuItem[] = [
     id: "ideas",
     label: "ایده‌های فناوری و نوآوری",
     icon: Lightbulb,
-    href: "/dashboard/ideas",
+    href: "/dashboard/manage-ideas-tech",
   },
   {
     id: "top-innovations",
@@ -119,6 +106,12 @@ const menuItems: MenuItem[] = [
     icon: Star,
     href: "/dashboard/top-innovations",
   },
+   {
+    id: "strategic-alignment",
+    label: "میزان انطباق راهبردی",
+    icon: BarChart3,
+    href: "#", // This is not a route, it opens a popup
+  },
 ];
 
 const bottomMenuItems: MenuItem[] = [
@@ -140,6 +133,7 @@ export function Sidebar({
   isCollapsed = false,
   onToggleCollapse,
   className,
+  onStrategicAlignmentClick,
 }: SidebarProps) {
   const location = useLocation();
   const [expandedItems, setExpandedItems] = useState<string[]>([]);
@@ -153,7 +147,7 @@ export function Sidebar({
       menuItems.forEach((item) => {
         if (item.children) {
           const hasActiveChild = item.children.some(
-            (child) => child.href && location.pathname === child.href,
+            (child) => child.href && location.pathname === child.href
           );
           if (hasActiveChild) {
             newExpandedItems.push(item.id);
@@ -174,7 +168,7 @@ export function Sidebar({
         const item = menuItems.find((menuItem) => menuItem.id === itemId);
         if (item?.children) {
           const hasActiveChild = item.children.some(
-            (child) => child.href && location.pathname === child.href,
+            (child) => child.href && location.pathname === child.href
           );
           // Don't collapse if a child is active
           if (hasActiveChild) {
@@ -192,7 +186,7 @@ export function Sidebar({
     if (href && location.pathname === href) return true;
     if (children) {
       return children.some(
-        (child) => child.href && location.pathname === child.href,
+        (child) => child.href && location.pathname === child.href
       );
     }
     return false;
@@ -204,23 +198,49 @@ export function Sidebar({
       expandedItems.includes(item.id) ||
       (item.children &&
         item.children.some(
-          (child) => child.href && location.pathname === child.href,
+          (child) => child.href && location.pathname === child.href
         ));
     const hasChildren = item.children && item.children.length > 0;
 
     const ItemIcon = item.icon;
 
     const handleClick = () => {
-      if (item.id === "logout") {
+      if (item.id === "strategic-alignment") {
+        onStrategicAlignmentClick?.();
+      } else if (item.id === "logout") {
         logout();
       } else if (hasChildren) {
         toggleExpanded(item.id);
       }
     };
 
+ if (item.id === "strategic-alignment") {
+return (
+       <button
+            className={cn(
+              "w-full text-right",
+            )}
+            onClick={handleClick}
+          >
+            <div
+              className={cn(
+                "flex items-center justify-center  w-full px-2 rounded-lg mt-4 transition-all duration-200 group",
+              )}
+            >
+              <div className="flex justify-center rounded-xl border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A]  py-2 text-center items-center gap-3 min-w-0 flex-1">
+                  <span className="font-persian text-sm font-medium truncate">
+                    {item.label}
+                  </span>
+              </div>
+            </div>
+          </button>
+)
+
+  }
+
     return (
       <div key={item.id} className="relative">
-        {item.href && item.id !== "logout" ? (
+        {item.href && item.href !== "#" ? (
           <Link to={item.href} className="block">
             <div
               className={cn(
@@ -230,15 +250,14 @@ export function Sidebar({
                   ? " text-emerald-400 border-r-2 border-emerald-400"
                   : "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
                 isCollapsed && level === 0 && "justify-center px-2",
-                item.id === "logout" &&
-                  "hover:bg-red-500/10 hover:text-red-400",
+                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400"
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
                 <ItemIcon
                   className={cn(
                     "w-5 h-5 flex-shrink-0",
-                    isActive ? "text-emerald-400" : "text-current",
+                    isActive ? "text-emerald-400" : "text-current"
                   )}
                 />
                 {!isCollapsed && (
@@ -259,7 +278,7 @@ export function Sidebar({
                     <ChevronDown
                       className={cn(
                         "w-4 h-4 transition-transform duration-200",
-                        isExpanded ? "rotate-180" : "rotate-0",
+                        isExpanded ? "rotate-180" : "rotate-0"
                       )}
                     />
                   )}
@@ -274,9 +293,9 @@ export function Sidebar({
               // Disable pointer cursor when child is active (cannot collapse)
               item.children &&
                 item.children.some(
-                  (child) => child.href && location.pathname === child.href,
+                  (child) => child.href && location.pathname === child.href
                 ) &&
-                "cursor-not-allowed",
+                "cursor-not-allowed"
             )}
             onClick={handleClick}
           >
@@ -288,15 +307,14 @@ export function Sidebar({
                   ? " text-emerald-400 border-r-2 border-emerald-400"
                   : "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
                 isCollapsed && level === 0 && "justify-center px-2",
-                item.id === "logout" &&
-                  "hover:bg-red-500/10 hover:text-red-400",
+                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400"
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
                 <ItemIcon
                   className={cn(
                     "w-5 h-5 flex-shrink-0",
-                    isActive ? "text-emerald-400" : "text-current",
+                    isActive ? "text-emerald-400" : "text-current"
                   )}
                 />
                 {!isCollapsed && (
@@ -322,10 +340,10 @@ export function Sidebar({
                         item.children &&
                           item.children.some(
                             (child) =>
-                              child.href && location.pathname === child.href,
+                              child.href && location.pathname === child.href
                           )
                           ? "text-emerald-400"
-                          : "text-current",
+                          : "text-current"
                       )}
                     />
                   )}
@@ -360,7 +378,7 @@ export function Sidebar({
       className={cn(
         " backdrop-blur-sm h-full flex flex-col transition-all duration-300",
         isCollapsed ? "w-16" : "w-64",
-        className,
+        className
       )}
     >
       {/* Header */}
@@ -424,7 +442,7 @@ export function Sidebar({
             <ChevronRight
               className={cn(
                 "w-4 h-4 text-gray-400 transition-transform duration-200",
-                isCollapsed ? "rotate-180" : "rotate-0",
+                isCollapsed ? "rotate-180" : "rotate-0"
               )}
             />
             {!isCollapsed && (

app/components/dashboard/strategic-alignment-popup.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  LabelList,
+  Cell,
+} from "recharts";
+import apiService from "~/lib/api";
+import { Skeleton } from "~/components/ui/skeleton";
+import { formatNumber } from "~/lib/utils";
+import { ChartContainer } from "../ui/chart";
+
+interface StrategicAlignmentData {
+  strategic_theme: string;
+  operational_fee_sum: number;
+  percentage?: number;
+}
+
+interface StrategicAlignmentPopupProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+// ✅ Chart config for shadcn/ui
+const chartConfig = {
+  percentage: {
+    label: "",
+    color: "#3AEA83",
+  },
+};
+
+  const maxHeight = 150; 
+  const barHeights =  () => Math.floor(Math.random() * maxHeight);
+
+const ChartSkeleton = () => (
+  
+  <div className="flex justify-center h-96 w-full p-4">
+    {/* Chart bars */}
+    <div className=" w-full flex items-end gap-10">
+      {[...Array(9)].map((_, i) => (
+        <div key={i} className="flex flex-col items-center gap-1">
+          <Skeleton
+            className="w-10 bg-gray-700 rounded-md"
+            style={{ height: `${barHeights()}px` }}
+          />
+        </div>
+      ))}
+    </div>
+       {/* Left space for Y-axis label */}
+    <div className="flex flex-col justify-between mr-2">
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+    </div>
+  </div>
+);
+export function StrategicAlignmentPopup({
+  open,
+  onOpenChange,
+}: StrategicAlignmentPopupProps) {
+  const [data, setData] = useState<StrategicAlignmentData[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      fetchData();
+    }
+  }, [open]);
+
+  const fetchData = async () => {
+    setLoading(true);
+    try {
+      const response = await apiService.select({
+        ProcessName: "project",
+        OutputFields: [
+          "strategic_theme",
+          "sum(operational_fee) as operational_fee_sum",
+        ],
+        GroupBy: ["strategic_theme"],
+      });
+
+      const responseData =
+        typeof response.data === "string"
+          ? JSON.parse(response.data)
+          : response.data;
+
+      const processedData = responseData
+        .map((item: any) => ({
+          strategic_theme: item.strategic_theme || "N/A",
+          operational_fee_sum: Math.max(0, Number(item.operational_fee_sum)),
+        }))
+        .filter((item: StrategicAlignmentData) => item.strategic_theme !== "");
+
+      const total = processedData.reduce(
+        (acc: number, item: StrategicAlignmentData) =>
+          acc + item.operational_fee_sum,
+        0
+      );
+
+      const dataWithPercentage = processedData.map(
+        (item: StrategicAlignmentData) => ({
+          ...item,
+          percentage:
+            total > 0
+              ? Math.round((item.operational_fee_sum / total) * 100)
+              : 0,
+        })
+      );
+      setData(dataWithPercentage || []);
+    } catch (error) {
+      console.error("Error fetching strategic alignment data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-4xl bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] text-white border-none">
+        <DialogHeader className="border-b-3 mb-10 py-2 w-full pb-4  border-b-2 border-gray-500/20">
+          <DialogTitle className="ml-auto ">میزان انطباق راهبردی</DialogTitle>
+        </DialogHeader>
+
+        {loading ? (
+          <ChartSkeleton />
+        ) : (
+          <>
+            <ResponsiveContainer  width="100%" height={400}>
+              <ChartContainer  config={chartConfig} className="aspect-auto h-96 w-full">
+                <BarChart
+                  data={data}
+                  margin={{ left: 12, right: 12 }}
+                  barGap={15}
+                  barSize={30}
+                  accessibilityLayer
+                >
+                  <CartesianGrid vertical={false} stroke="#475569" />
+               <XAxis
+                    dataKey="strategic_theme"
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={10}
+                    tick={{ fill: "#94a3b8", fontSize: 12 }}
+                  />
+                  <YAxis
+                    domain={[0, 100]}
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={8}
+                    tick={{ fill: "#94a3b8", fontSize: 12 }}
+                    tickFormatter={(value) =>
+                      `${formatNumber(Math.round(value))}%`
+                    }
+                      label={{
+    value: "تعداد برنامه ها" , 
+    angle: -90,           
+    position: "insideLeft", 
+    fill: "#94a3b8",
+    fontSize: 14,
+    offset: 0,
+    dy: 0,                
+    style: { textAnchor: "middle" }, 
+  }}
+                  />
+
+                  <Bar   dataKey="percentage" radius={[8, 8, 0, 0]}>
+                    {data.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={chartConfig.percentage.color} />
+                    ))}
+                    <LabelList
+                      dataKey="percentage"
+                      position="top"
+                      style={{
+                        fill: "#ffffff",
+                        fontSize: "12px",
+                        fontWeight: "bold",
+                      }}
+                      formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
+                    />
+                    
+                  </Bar>
+                </BarChart>
+              </ChartContainer>
+            </ResponsiveContainer>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

app/components/ui/custom-bar-chart.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { formatNumber } from "~/lib/utils";
 
 export interface BarChartData {
@@ -80,7 +79,7 @@ export function CustomBarChart({
         {data.map((item, index) => {
           const percentage =
             globalMaxValue > 0 ? (item.value / globalMaxValue) * 100 : 0;
-          const displayValue = item.value.toFixed(1);
+          const displayValue: any = item.value;
 
           return (
             <div key={index} className="flex items-center gap-3">

app/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "~/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

app/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

app/lib/utils.ts

@@ -6,7 +6,7 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export const formatNumber = (value: string | number) => {
-  if (!value) return "0";
+  // if (!value) return "0";
   const numericValue = typeof value === "string" ? parseFloat(value) : value;
   if (isNaN(numericValue)) return "0";
   return new Intl.NumberFormat("fa-IR").format(numericValue);

app/routes.ts

@@ -1,4 +1,4 @@
-import { type RouteConfig, index, route } from "@react-router/dev/routes";
+import { type RouteConfig, route } from "@react-router/dev/routes";
 
 export default [
   route("login", "routes/login.tsx"),
@@ -21,6 +21,7 @@ export default [
     "routes/digital-innovation-page.tsx"
   ),
   route("dashboard/ecosystem", "routes/ecosystem.tsx"),
+  route("dashboard/manage-ideas-tech", "routes/manage-ideas-tech-page.tsx"),
   route("404", "routes/404.tsx"),
   route("unauthorized", "routes/unauthorized.tsx"),
   route("*", "routes/$.tsx"), // Catch-all route for 404s

app/routes/manage-ideas-tech-page.tsx

@@ -0,0 +1,17 @@
+import { ProtectedRoute } from "~/components/auth/protected-route";
+import { ManageIdeasTechPage } from "~/components/dashboard/project-management/mange-ideas-tech-page";
+
+export function meta() {
+  return [
+    { title: "مدیریت فنواری و ایده ها" },
+    { name: "description", content: "مدیریت پروژه‌های فناوری و نوآوری" },
+  ];
+}
+
+export default function ManageIdeasTech() {
+  return (
+    <ProtectedRoute requireAuth={true}>
+      <ManageIdeasTechPage />
+    </ProtectedRoute>
+  );
+}

package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-router/node": "^7.7.0",
     "@react-router/serve": "^7.7.1",
     "@types/d3": "^7.4.3",

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@radix-ui/react-tabs':
         specifier: ^1.1.13
         version: 1.1.13(@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-tooltip':
+        specifier: ^1.2.8
+        version: 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)
       '@react-router/node':
         specifier: ^7.7.0
         version: 7.8.2(react-router@7.8.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1))(typescript@5.9.2)
@@ -755,6 +758,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    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-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -3119,6 +3135,26 @@ snapshots:
       '@types/react': 19.1.12
       '@types/react-dom': 19.1.9(@types/react@19.1.12)
 
+  '@radix-ui/react-tooltip@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:
+      '@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-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)
+      '@radix-ui/react-visually-hidden': 1.2.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)
+      react: 19.1.1
+      react-dom: 19.1.1(react@19.1.1)
+    optionalDependencies:
+      '@types/react': 19.1.12
+      '@types/react-dom': 19.1.9(@types/react@19.1.12)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.12)(react@19.1.1)':
     dependencies:
       react: 19.1.1