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

@@ -0,0 +1,949 @@
+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 { CustomBarChart } from "~/components/ui/custom-bar-chart";
+import moment from "moment-jalaali";
+import type { BarChartData } from "~/components/ui/custom-bar-chart";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  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 ProjectDetail from "../projects/project-detail";
+import DashboardLayout from "../layout";
+
+moment.loadPersian({ usePersianDigits: true });
+interface ProcessInnovationData {
+  project_no: string;
+  title: string;
+  project_status: string;
+  project_rating: string;
+  reduce_prevention_production_stops: string;
+  throat_removal: string;
+  amount_currency_reduction: string;
+  Reduce_rate_failure: string;
+  observer: string;
+}
+
+interface SortConfig {
+  field: string;
+  direction: "asc" | "desc";
+}
+
+interface StatsCard {
+  id: string;
+  title: string;
+  percent: {
+    value: number;
+    description: string;
+  };
+  total: {
+    value: number;
+    description: string;
+  };
+}
+
+interface InnovationStats {
+  totalProjects: number;
+  averageScore: number;
+  productionStopsPreventionSum: number; // مجموع جلوگیری از توقفات تولید
+  bottleneckRemovalCount: number; // تعداد رفع گلوگاه
+  currencyReductionSum: number; // مجموع کاهش ارز بری (میلیون ریال)
+  frequentFailuresReductionSum: number; // مجموع کاهش خرابی های پرتکرار
+  percentProductionStops: number; // درصد مقایسه‌ای جلوگیری از توقفات تولید
+  percentBottleneckRemoval: number; // درصد مقایسه‌ای رفع گلوگاه
+  percentCurrencyReduction: number; // درصد مقایسه‌ای کاهش ارز بری
+  percentFailuresReduction: number; // درصد مقایسه‌ای کاهش خرابی‌های پرتکرار
+}
+
+const columns = [
+  { key: "select", label: "", sortable: false, width: "50px" },
+  { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
+  { key: "title", label: "عنوان پروژه", sortable: true, width: "400px" },
+  {
+    key: "project_status",
+    label: "وضعیت پروژه",
+    sortable: true,
+    width: "140px",
+  },
+  {
+    key: "project_rating",
+    label: "امتیاز پروژه",
+    sortable: true,
+    width: "140px",
+  },
+  { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
+];
+
+export function GreenInnovationPage() {
+  const [projects, setProjects] = useState<ProcessInnovationData[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize] = useState(20);
+  const [hasMore, setHasMore] = useState(true);
+  const [totalCount, setTotalCount] = useState(0);
+  const [actualTotalCount, setActualTotalCount] = useState(0);
+  const [statsLoading, setStatsLoading] = useState(false);
+  const [stats, setStats] = useState<InnovationStats>({
+    totalProjects: 0,
+    averageScore: 0,
+    productionStopsPreventionSum: 0,
+    bottleneckRemovalCount: 0,
+    currencyReductionSum: 0,
+    frequentFailuresReductionSum: 0,
+    percentProductionStops: 0,
+    percentBottleneckRemoval: 0,
+    percentCurrencyReduction: 0,
+    percentFailuresReduction: 0,
+  });
+  const [sortConfig, setSortConfig] = useState<SortConfig>({
+    field: "start_date",
+    direction: "asc",
+  });
+  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
+    new Set()
+  );
+  const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
+  const [selectedProjectDetails, setSelectedProjectDetails] =
+    useState<ProcessInnovationData | null>(null);
+  const observerRef = useRef<HTMLDivElement>(null);
+  const fetchingRef = useRef(false);
+
+  // Selection handlers
+  const handleSelectAll = () => {
+    if (selectedProjects.size === projects.length) {
+      setSelectedProjects(new Set());
+    } else {
+      setSelectedProjects(new Set(projects.map((p) => p.project_no)));
+    }
+  };
+
+  const handleSelectProject = (projectNo: string) => {
+    const newSelected = new Set(selectedProjects);
+    if (newSelected.has(projectNo)) {
+      newSelected.delete(projectNo);
+    } else {
+      newSelected.add(projectNo);
+    }
+    setSelectedProjects(newSelected);
+  };
+
+  const handleProjectDetails = (project: ProcessInnovationData) => {
+    console.log(project);
+    setSelectedProjectDetails(project);
+    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: "reduce-pollution",
+      title: "کاهش آلایندگی",
+      total: {
+        value: 10.45,
+        description: "میلیون ریال",
+      },
+      //    formatNumber(
+      //     stats.productionStopsPreventionSum.toFixed?.(1) ??
+      //       stats.productionStopsPreventionSum
+      //   ),
+
+      percent: {
+        value: 10,
+        description: "درصد به کل درآمد",
+      },
+    },
+    {
+      id: "reduce-junkfull",
+      title: "کاهش ضایعات",
+      total: {
+        value: 10,
+        description: "میلیون ریال",
+      },
+      percent: {
+        value: 10,
+        description: "درصد به کل درآمد",
+      },
+    },
+
+    // {
+    //   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;
+    }
+
+    try {
+      fetchingRef.current = true;
+
+      if (reset) {
+        setLoading(true);
+        setCurrentPage(1);
+      } else {
+        setLoadingMore(true);
+      }
+
+      const pageToFetch = reset ? 1 : currentPage;
+
+      const response = await apiService.select({
+        ProcessName: "project",
+        OutputFields: [
+          "project_no",
+          "title",
+          "project_status",
+          "project_rating",
+          "throat_removal",
+          "reduce_prevention_production_stops",
+          "amount_currency_reduction",
+          "Reduce_rate_failure",
+          "project_description",
+          "start_date",
+          "done_date",
+          "approved_budget",
+          "observer",
+        ],
+        Sorts: [["start_date", "asc"]],
+        Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
+        Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
+      });
+
+      console.log(JSON.parse(response.data));
+      if (response.state === 0) {
+        const dataString = response.data;
+        if (dataString && typeof dataString === "string") {
+          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);
+              }
+              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();
+    fetchStats();
+  }, [sortConfig]);
+
+  useEffect(() => {
+    if (currentPage > 1) {
+      fetchProjects(false);
+    }
+  }, [currentPage]);
+
+  useEffect(() => {
+    const scrollContainer = document.querySelector(".overflow-auto");
+
+    const handleScroll = () => {
+      if (!scrollContainer || !hasMore || loadingMore) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+      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;
+    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: "project",
+        OutputFields: ["count(project_no)"],
+        Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
+      });
+
+      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]) {
+              const count = parsedData[0].project_no_count || 0;
+              setActualTotalCount(count);
+              // Keep stats in sync if backend stats not yet loaded
+              setStats((prev) => ({ ...prev, totalProjects: count }));
+            }
+          } catch (parseError) {
+            console.error("Error parsing count data:", parseError);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error fetching total count:", error);
+    }
+  };
+
+  // Fetch aggregated stats from backend call API (innovation_process_function)
+  const fetchStats = async () => {
+    try {
+      setStatsLoading(true);
+      const raw = await apiService.call<any>({
+        innovation_process_function: {},
+      });
+
+      let payload: any = raw?.data;
+      if (typeof payload === "string") {
+        try {
+          payload = JSON.parse(payload);
+        } catch {}
+      }
+
+      const parseNum = (v: unknown): number => {
+        if (v == null) return 0;
+        if (typeof v === "number") return v;
+        if (typeof v === "string") {
+          const cleaned = v.replace(/,/g, "").trim();
+          const n = parseFloat(cleaned);
+          return isNaN(n) ? 0 : n;
+        }
+        return 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
+        ),
+      };
+
+      setStats(normalized);
+    } catch (error) {
+      console.error("Error fetching stats:", error);
+    } finally {
+      setStatsLoading(false);
+    }
+  };
+
+  //   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 =
+  //       typeof amount === "string"
+  //         ? parseFloat(amount.replace(/,/g, ""))
+  //         : amount;
+  //     if (isNaN(numericAmount)) return "0 ریال";
+  //     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 getRatingColor = (rating: string) => {
+  //     const ratingNum = parseFloat(rating);
+  //     if (isNaN(ratingNum)) return "#6B7280";
+
+  //     if (ratingNum >= 8) return "#3AEA83";
+  //     if (ratingNum >= 6) return "#69C8EA";
+  //     if (ratingNum >= 4) return "#FFD700";
+  //     return "#F76276";
+  //   };
+
+  const renderCellContent = (item: ProcessInnovationData, column: any) => {
+    const value = item[column.key as keyof ProcessInnovationData];
+
+    switch (column.key) {
+      case "select":
+        return (
+          <Checkbox
+            checked={selectedProjects.has(item.project_no)}
+            onCheckedChange={() => handleSelectProject(item.project_no)}
+            className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+          />
+        );
+      case "details":
+        return (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => handleProjectDetails(item)}
+            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
+          >
+            جزئیات بیشتر
+          </Button>
+        );
+      case "amount_currency_reduction":
+        return (
+          <span className="font-medium text-emerald-400">
+            {formatCurrency(String(value))}
+          </span>
+        );
+      case "project_no":
+        return (
+          <Badge variant="outline" className="font-mono">
+            {String(value)}
+          </Badge>
+        );
+      case "title":
+        return <span className="font-medium text-white">{String(value)}</span>;
+      case "project_status":
+        return (
+          <Badge
+            variant="outline"
+            className="font-medium border-2"
+            style={{
+              border: "none",
+            }}
+          >
+            {String(value)}
+          </Badge>
+        );
+      case "project_rating":
+        return (
+          <Badge variant="outline" className="text-lg text-center border-none">
+            {formatNumber(String(value))}
+          </Badge>
+        );
+      case "reduce_prevention_production_stops":
+      case "throat_removal":
+      case "Reduce_rate_failure":
+        return (
+          <span className="font-medium text-blue-400">
+            {formatNumber(String(value))}
+          </span>
+        );
+      default:
+        return <span className="text-gray-300">{String(value) || "-"}</span>;
+    }
+  };
+
+  return (
+    <DashboardLayout title="نوآوری سبز">
+      <div className="p-6 space-y-4">
+        {/* Stats Cards */}
+        <div className="flex gap-6">
+          <div className="space-y-6 w-full">
+            {/* Stats Grid */}
+            <div className="flex flex-col gap-3">
+              {loading || statsLoading
+                ? // Loading skeleton for stats cards - matching new design
+                  Array.from({ length: 2 }).map((_, index) => (
+                    <Card
+                      key={`skeleton-${index}`}
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
+                    >
+                      <CardContent className="p-2">
+                        <div className="flex flex-col justify-between gap-2">
+                          <div className="flex justify-between items-center border-b-2 border-gray-500/20">
+                            <div
+                              className="h-6 bg-gray-600 rounded animate-pulse"
+                              style={{ width: "60%" }}
+                            />
+                            <div className="p-3 bg-emerald-500/20 rounded-full w-fit">
+                              <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
+                            </div>
+                          </div>
+                          <div className="flex items-center justify-center flex-col p-1">
+                            <div
+                              className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
+                              style={{ width: "40%" }}
+                            />
+                            <div
+                              className="h-4 bg-gray-600 rounded animate-pulse"
+                              style={{ width: "80%" }}
+                            />
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+                : statsCards.map((card) => (
+                    <Card
+                      key={card.id}
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
+                    >
+                      <CardContent className="p-0">
+                        <div className="flex flex-col justify-between gap-2">
+                          <div className="flex justify-between items-center border-b-2 border-gray-500/20 ">
+                            <h3 className="text-lg font-bold text-white font-persian p-4">
+                              {card.title}
+                            </h3>
+                          </div>
+                          <div className="flex items-center justify-between p-6">
+                            <span className="text-emerald-400">
+                              {card.total.value}
+                            </span>
+                            <b className="block w-0.5 h-8 bg-emerald-400 rotate-45" />
+                            <span className="text-emerald-400">
+                              {card.percent.value}
+                            </span>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+            </div>
+          </div>
+
+          {/* Process Impacts Chart */}
+          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
+            <CardContent className="p-4">
+              <CustomBarChart
+                title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
+                loading={statsLoading}
+                data={[
+                  {
+                    label: "کاهش توقفات تولید",
+                    value: stats.percentProductionStops || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                  {
+                    label: "رفع گلوگاه تولید",
+                    value: stats.percentBottleneckRemoval || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                  {
+                    label: "کاهش ارز بری",
+                    value: stats.percentCurrencyReduction || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                  {
+                    label: "کاهش خرابی پر تکرار",
+                    value: stats.percentFailuresReduction || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                ]}
+                barHeight="h-5"
+                showAxisLabels={true}
+              />
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 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(90vh-400px)]">
+                <TableHeader>
+                  <TableRow className="bg-[#3F415A]">
+                    {columns.map((column) => (
+                      <TableHead
+                        key={column.key}
+                        className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A]"
+                        style={{ width: column.width }}
+                      >
+                        {column.key === "select" ? (
+                          <div className="flex items-center justify-center">
+                            <Checkbox
+                              checked={
+                                selectedProjects.size === projects.length &&
+                                projects.length > 0
+                              }
+                              onCheckedChange={handleSelectAll}
+                              className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+                            />
+                          </div>
+                        ) : 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: 10 }).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 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
+                          >
+                            {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>
+
+          {/* 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="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
+                  )}
+                </div>
+              </div>
+
+              {/* Details column - show total count */}
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      {/* Project Details Dialog */}
+      <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
+        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-4xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
+              شرح پروژه
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 flex justify-between text-right px-6">
+            {/* Project Description */}
+            <div className="flex-[4] border-l-2 border-gray-600">
+              <h2 className="font-bold">{selectedProjectDetails?.title}</h2>
+              <p className="text-gray-300 font-persian px-2 mt-2">
+                {selectedProjectDetails?.project_description || "-"}
+              </p>
+            </div>
+
+            {/* Project Details */}
+            <div className="flex flex-[3] gap-2 flex-col px-4">
+              <div className="font-bold text-right ">جزئیات پروژه</div>
+
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <Building2 className="h-4 text-green-500" />
+                  زمان شروع:
+                </h4>
+                <span className="text-white font-bold font-persian">
+                  {selectedProjectDetails?.start_date
+                    ? moment(
+                        selectedProjectDetails?.start_date,
+                        "YYYY-MM-DD"
+                      ).format("YYYY/MM/DD")
+                    : "-"}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <PickaxeIcon className="h-4 text-green-500" />
+                  زمان پایان:
+                </h4>
+                <span className="text-white font-bold font-persian">
+                  {selectedProjectDetails?.done_date
+                    ? moment(
+                        selectedProjectDetails?.done_date,
+                        "YYYY-MM-DD"
+                      ).format("YYYY/MM/DD")
+                    : "-"}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <UsersIcon className="h-4 text-green-500" />
+                  هزینه برآورد شده:
+                </h4>
+                <span className="text-white font-bold font-persian">
+                  {formatNumber(
+                    Number(
+                      selectedProjectDetails?.approved_budget.replaceAll(
+                        ",",
+                        ""
+                      )
+                    )
+                  ) || "-"}
+                </span>
+              </div>
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <UserIcon className="h-4 text-green-500" />
+                  نفر مرتبط:
+                </h4>
+                <span className="text-white font-bold font-persian">
+                  {selectedProjectDetails?.observer || "-"}
+                </span>
+              </div>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </DashboardLayout>
+  );
+}
+
+export default GreenInnovationPage;

app/routes.ts

@@ -5,6 +5,7 @@ export default [
   route("dashboard", "routes/dashboard.tsx"),
   route("dashboard/project-management", "routes/project-management.tsx"),
   route("dashboard/innovation-basket/process-innovation", "routes/innovation-basket.process-innovation.tsx"),
+  route("dashboard/innovation-basket/green-innovation", "routes/green-innovation.tsx"),
   route("projects", "routes/projects.tsx"),
   route("dashboard/ecosystem", "routes/ecosystem.tsx"),
   route("404", "routes/404.tsx"),

app/routes/green-innovation.tsx

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