fix: green innovation designed bugs

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

@@ -99,6 +99,7 @@ interface InnovationStats {
   waste_reduction_percent: number;
   water_recovery_reduction: number;
   water_recovery_reduction_percent: number;
+  average_project_score:number
 }
 
 interface GreenInnovationState {
@@ -178,6 +179,7 @@ export function GreenInnovationPage() {
     field: "start_date",
     direction: "asc",
   });
+  const [tblAvarage , setTblAvarage] = useState<number>(0);
   const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
     new Set()
   );
@@ -199,13 +201,7 @@ export function GreenInnovationPage() {
       suffix: "تن",
       percent: 0,
     },
-    oil: {
+
-      icon: <Flame className="text-emerald-400" size={"18px"} />,
-      label: "سوخت",
-      value: 0,
-      suffix: "متر مربع",
-      percent: 0,
-    },
     power: {
       icon: <Zap className="text-emerald-400" size={"18px"} />,
       label: "برق",
@@ -213,6 +209,13 @@ export function GreenInnovationPage() {
       suffix: "میلیون مگاوات",
       percent: 0,
     },
+    oil: {
+      icon: <Flame className="text-emerald-400" size={"18px"} />,
+      label: "سوخت",
+      value: 0,
+      suffix: "متر مربع",
+      percent: 0,
+    }
   });
   const [sustainabilityStats, setSustainabilityStats] = useState<StatsCard>({
     pollution: {
@@ -506,7 +509,10 @@ export function GreenInnovationPage() {
           value: formatNumber(parseNum(stats.waste_reduction)),
           percent: formatNumber(parseNum(stats.waste_reduction_percent)),
         },
+
+        avarage: stats.average_project_score
       };
+      setTblAvarage(normalized.avarage)
       setPageData(normalized);
     } catch (error) {
       console.error("Error fetching stats:", error);
@@ -589,7 +595,7 @@ export function GreenInnovationPage() {
           <Checkbox
             checked={selectedProjects.has(item.project_id)}
             onCheckedChange={() => handleSelectProject(item.project_id)}
-            className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+            className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600 cursor-pointer"
           />
         );
       case "details":
@@ -598,7 +604,7 @@ export function GreenInnovationPage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
+            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto cursor-pointer"
           >
             جزئیات بیشتر
           </Button>
@@ -694,7 +700,7 @@ export function GreenInnovationPage() {
               : Object.entries(sustainabilityStats).map(([key, value]) => (
                   <Card
                     key={key}
-                    className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
+                    className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-2xl backdrop-blur-sm border-gray-700/50"
                   >
                     <CardContent className="p-0 h-full">
                       <div className="flex flex-col justify-between gap-2 h-full">
@@ -855,7 +861,7 @@ export function GreenInnovationPage() {
                             position: "top",
                             fill: "#fff",
                             fontWeight: "bold",
-                            formatter: (value) => `${value}%`,
+                            formatter: (value:any) => `${value}%`,
                           }}
                         />
                       </BarChart>
@@ -869,7 +875,7 @@ export function GreenInnovationPage() {
           <Card className="w-1/3 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden">
             <CardContent className="p-0">
               <div className="border-b-2 border-gray-500/20">
-                <div className="flex flex-row justify-between w-full p-4 px-6">
+                <div className="flex flex-row justify-between w-full p-4">
                   {statsLoading ? (
                     <>
                       <span className="h-4 w-28 bg-gray-500/40 rounded animate-pulse"></span>
@@ -885,9 +891,7 @@ export function GreenInnovationPage() {
               </div>
 
               <div
-                className={`flex flex-col gap-3 p-4 max-h-[22rem] ${
+                className={'flex flex-col gap-3 p-4overflow-y-hidden p-4'}
-                  statsLoading ? "overflow-y-hidden" : "overflow-y-scroll"
-                }`}
               >
                 {statsLoading
                   ? Array.from({ length: 10 }).map((_, index) => (
@@ -896,7 +900,7 @@ export function GreenInnovationPage() {
                         <span className="h-3 w-32 bg-gray-500/40 rounded animate-pulse"></span>
                       </div>
                     ))
-                  : Array.from({ length: 10 }).map((_, index) => (
+                  : Array.from({ length: 4 }).map((_, index) => (
                       <div key={`${index}-1`} className="flex gap-2">
                         <LoaderCircle
                           size={"18px"}
@@ -920,13 +924,13 @@ export function GreenInnovationPage() {
                     {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]"
+                        className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A] "
                         style={{ width: column.width }}
                       >
                         {column.sortable ? (
                           <button
                             onClick={() => handleSort(column.key)}
-                            className="flex items-center gap-2"
+                            className="flex items-center gap-2 cursor-pointer"
                           >
                             <span>{column.label}</span>
                             {sortConfig.field === column.key ? (
@@ -1039,8 +1043,8 @@ export function GreenInnovationPage() {
                 </div>
                 <div className="font-bold">
                   {formatNumber(
-                    ((stats?.averageScore ?? 0) as number).toFixed?.(1) ??
+                    ((tblAvarage ?? 0) as number).toFixed?.(1) ??
-                      stats?.averageScore ??
+                      tblAvarage ??
                       0
                   )}
                 </div>

app/components/ui/dialog.tsx

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+        <X className="h-4 w-4 cursor-pointer" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

app/routes.ts

@@ -16,10 +16,7 @@ export default [
     "/dashboard/innovation-basket/digital-innovation",
     "routes/digital-innovation-page.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"),

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "react-router build",
-    "dev": "react-router dev --port 3000",
+    "dev": "react-router dev --port 3001",
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },