From d240fb39fa252891b8ae1cdd5ed5b8f025a63e7d Mon Sep 17 00:00:00 2001
From: mehrdad_adabi <mehrdadadabi29@gmail.com>
Date: Tue, 9 Sep 2025 20:27:30 +0330
Subject: [PATCH] fixx:designed bugs

---
 .../digital-innovation-page.tsx               | 43 ++++++++++++++++---
 .../green-innovation-page.tsx                 | 14 +++---
 .../innovation-built-inside-page.tsx          | 37 ++++++++++++++--
 app/components/ui/card.tsx                    | 39 ++++++++++-------
 4 files changed, 102 insertions(+), 31 deletions(-)

diff --git a/app/components/dashboard/project-management/digital-innovation-page.tsx b/app/components/dashboard/project-management/digital-innovation-page.tsx
index e272da2..c55a190 100644
--- a/app/components/dashboard/project-management/digital-innovation-page.tsx
+++ b/app/components/dashboard/project-management/digital-innovation-page.tsx
@@ -618,18 +618,18 @@ export function DigitalInnovationPage() {
 
   return (
     <DashboardLayout title="نوآوری دیجیتال">
-      <div className="grid grid-cols-2 gap-8 justify-between p-6 space-y-4 h-full">
+      <div className="p-6 space-y-4 grid  justify-between gap-8 sm:grid-cols-1 xl:grid-cols-[40%_60%]">
         {/* Stats Cards */}
         <div className="flex flex-col gap-6  w-full mb-0">
           <div className="space-y-6 w-full">
             {/* Stats Grid */}
             <div className="grid grid-cols-2 gap-5">
-              {loading || statsLoading
+              {loading
                 ? // Loading skeleton for stats cards - matching new design
                   Array.from({ length: 4 }).map((_, index) => (
                     <Card
                       key={`skeleton-${index}`}
-                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-2xl overflow-hidden"
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-2xl overflow-hidden !h-full"
                     >
                       <CardContent className="p-0">
                         <div className="flex flex-col justify-between gap-2">
@@ -691,7 +691,7 @@ export function DigitalInnovationPage() {
           </div>
 
           {/* Process Impacts Chart */}
-          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-lg w-full overflow-hidden">
+          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-lg w-full overflow-hidden h-full ">
             {/* <CardContent > */}
             <CustomBarChart
               title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
@@ -847,7 +847,40 @@ export function DigitalInnovationPage() {
           </CardContent>
 
           {/* Footer */}
+
           <div className="p-2 px-4 bg-gray-700/50">
+            <div className="grid grid-cols-[minmax(100px,0fr)_minmax(80px,1fr)_minmax(100px,2fr)_minmax(10px,1fr)_minmax(100px,1fr)] text-sm text-gray-300 font-persian items-center ">
+              <div></div>
+
+              <div className="text-center text-gray-400 ">
+                کل پروژه‌ها:{" "}
+                <span className="font-bold">
+                  {formatNumber(actualTotalCount)}
+                </span>
+              </div>
+
+              <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="text-center text-gray-400 py-2">
+                میانگین:{" "}
+                <span className="font-bold">
+                  {formatNumber(
+                    ((stats.avarageProjectScore ?? 0) as number).toFixed?.(1) ??
+                      0
+                  )}
+                </span>
+              </div>
+
+              <div></div>
+            </div>
+          </div>
+
+          {/* <div className="p-2 px-4 bg-gray-700/50">
             <div className="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
               <div className="text-center gap-2 items-center  w-1/3 pr-16">
                 <div className="text-base text-gray-401 mb-1">
@@ -874,7 +907,7 @@ export function DigitalInnovationPage() {
                 </div>
               </div>
             </div>
-          </div>
+          </div> */}
         </Card>
       </div>
 
diff --git a/app/components/dashboard/project-management/green-innovation-page.tsx b/app/components/dashboard/project-management/green-innovation-page.tsx
index 7e4f191..6601799 100644
--- a/app/components/dashboard/project-management/green-innovation-page.tsx
+++ b/app/components/dashboard/project-management/green-innovation-page.tsx
@@ -691,8 +691,8 @@ export function GreenInnovationPage() {
     <DashboardLayout title="نوآوری سبز">
       <div className="p-6 space-y-4 h-[23.5rem]">
         {/* Stats Cards */}
-        <div className="flex gap-6 mb-5">
-          <div className="flex flex-col justify-between w-1/2">
+        <div className="flex gap-6 mb-5 md:flex-col xl:flex-row">
+          <div className="flex flex-col justify-between xl:w-1/2 sm:w-full sm:gap-2">
             {loading || statsLoading
               ? // Loading skeleton for stats cards - matching new design
                 Array.from({ length: 2 }).map((_, index) => (
@@ -949,7 +949,7 @@ export function GreenInnovationPage() {
         <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden">
           <CardContent className="p-0">
             <div className="relative">
-              <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
+              <Table containerClassName="overflow-auto custom-scrollbar h-[25rem]">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -1051,14 +1051,14 @@ export function GreenInnovationPage() {
           </CardContent>
 
           <div className="p-2 px-4 bg-gray-700/50">
-            <div className="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
-              <div className="text-center gap-2 items-center  w-1/3 pr-36">
-                <div className="text-base text-gray-401 mb-1">
+            <div className="grid grid-cols-[41%_41%] text-sm text-gray-300 font-persian justify-between">
+              <div className="text-center gap-2 items-center">
+                <div className="text-base text-gray-401 mr-10">
                   کل پروژه ها :{formatNumber(actualTotalCount)}
                 </div>
               </div>
 
-              <div className="flex  items-center flex-row gap-20 status justify-center w-2/3">
+              <div className="flex items-center flex-row status justify-between w-[calc(40%-5px)]">
                 <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>
diff --git a/app/components/dashboard/project-management/innovation-built-inside-page.tsx b/app/components/dashboard/project-management/innovation-built-inside-page.tsx
index 9501b85..4780b99 100644
--- a/app/components/dashboard/project-management/innovation-built-inside-page.tsx
+++ b/app/components/dashboard/project-management/innovation-built-inside-page.tsx
@@ -710,9 +710,9 @@ export function InnovationBuiltInsidePage() {
 
   return (
     <DashboardLayout title="نوآوری ساخت داخل">
-      <div className="p-6 space-y-4 flex  justify-between gap-8 sm:flex-col xl:flex-row">
+      <div className="p-6 space-y-4   justify-between gap-8 grid sm:grid-cols-1 xl:grid-cols-[40%_60%]">
         {/* Stats Cards */}
-        <div className="flex gap-6 w-full">
+        <div className="flex gap-6 w-full mb-0">
           <div className="flex flex-col justify-between w-full gap-6">
             {statsLoading
               ? // Loading skeleton for stats cards - matching new design
@@ -978,6 +978,37 @@ export function InnovationBuiltInsidePage() {
           </CardContent>
 
           <div className="p-2 px-4 bg-gray-700/50">
+            <div className="grid grid-cols-[minmax(100px,1fr)_minmax(80px,1fr)_minmax(100px,2fr)_minmax(10px,1fr)_minmax(100px,1fr)] text-sm text-gray-300 font-persian items-center ">
+              <div></div>
+
+              <div className="text-right text-gray-400 mr-6">
+                کل پروژه‌ها:{" "}
+                <span className="font-bold">
+                  {formatNumber(actualTotalCount)}
+                </span>
+              </div>
+
+              <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="text-center text-gray-400 py-2">
+                میانگین:{" "}
+                <span className="font-bold">
+                  {formatNumber(
+                    ((tblAvarage ?? 0) as number).toFixed?.(1) ?? 0
+                  )}
+                </span>
+              </div>
+
+              <div></div>
+            </div>
+          </div>
+
+          {/* <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 items-center  xl:w-full pr-6 sm:w-full">
                 <div className="text-base text-gray-401 mb-1">
@@ -1002,7 +1033,7 @@ export function InnovationBuiltInsidePage() {
                 </div>
               </div>
             </div>
-          </div>
+          </div> */}
         </Card>
       </div>
 
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
index 901efad..bacd208 100644
--- a/app/components/ui/card.tsx
+++ b/app/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -9,13 +9,13 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-card text-card-foreground shadow-sm ",
       className
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const CardTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +53,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +73,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};