fix: desinged bugs

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

@@ -19,15 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "~/components/ui/dialog";
-import {
+import { ChevronUp, ChevronDown, RefreshCw } from "lucide-react";
-  ChevronUp,
-  ChevronDown,
-  RefreshCw,
-  Building2,
-  PickaxeIcon,
-  UserIcon,
-  UsersIcon,
-} from "lucide-react";
 import apiService from "~/lib/api";
 import toast from "react-hot-toast";
 import {
@@ -172,6 +164,7 @@ export function DigitalInnovationPage() {
     resourceProductivity: 0,
     resourceProductivityPercent: 0,
     avarageProjectScore: 0,
+    countInnovationDigitalProjects: 0,
   });
   const [sortConfig, setSortConfig] = useState<SortConfig>({
     field: "start_date",
@@ -476,7 +469,9 @@ export function DigitalInnovationPage() {
           payload?.resource_productivity_percent
         ),
         avarageProjectScore: parseNum(payload?.average_project_score),
-        countInnovationDigitalProjects: parseNum(payload?.count_innovation_digital_projects),
+        countInnovationDigitalProjects: parseNum(
+          payload?.count_innovation_digital_projects
+        ),
       };
       setActualTotalCount(normalized.countInnovationDigitalProjects);
       setStats(normalized);
@@ -711,11 +706,12 @@ 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)] h-[calc(90vh-12rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
             {/* <CardContent > */}
             <CustomBarChart
               title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
               loading={statsLoading}
+              height="100%"
               data={[
                 {
                   label: DigitalCardLabel.decreasCost,

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

@@ -103,7 +103,6 @@ interface InnovationStats {
   count_innovation_green_projects: number;
 }
 
-
 interface Params {
   icon: any;
   label: string;
@@ -137,7 +136,6 @@ enum projectStatus {
   finish = "پایان یافته",
 }
 
-
 const columns = [
   { key: "select", label: "", sortable: false, width: "50px" },
   { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
@@ -684,7 +682,7 @@ export function GreenInnovationPage() {
     <DashboardLayout title="نوآوری سبز">
       <div className="p-6 space-y-4">
         {/* Stats Cards */}
-        <div className="flex gap-6 mb-6">
+        <div className="flex gap-6 mb-5">
           <div className="flex flex-col gap-11  h-full w-1/2">
             {/* Stats Grid */}
             {loading || statsLoading
@@ -756,7 +754,7 @@ export function GreenInnovationPage() {
           {/* Process Impacts Chart */}
 
           {statsLoading ? (
-            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  h-[calc(90vh-24.3rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
+            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  h-[calc(90vh-25rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
               <CardContent className="p-0 h-full">
                 <div className="border-b-2 border-gray-500/20">
                   <div className="w-full p-4 px-6">
@@ -799,7 +797,7 @@ export function GreenInnovationPage() {
               </CardContent>
             </Card>
           ) : (
-            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-26rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
+            <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-27rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
               <CardContent className="p-0 h-full overflow-hidden">
                 <div className="border-b-2 border-gray-500/20">
                   <div className="w-full p-4 px-6">

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

@@ -32,7 +32,7 @@ export function CustomBarChart({
 }: CustomBarChartProps) {
   // Calculate the maximum value across all data points for consistent scaling
   const globalMaxValue = Math.max(
-    ...data.map((item) => item.maxValue || item.value),
+    ...data.map((item) => item.maxValue || item.value)
   );
 
   // Loading skeleton
@@ -43,7 +43,7 @@ export function CustomBarChart({
           <div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
         )}
 
-        <div className="space-y-4">
+        <div className="space-y-4  flex flex-col gap-4">
           {Array.from({ length: 4 }).map((_, index) => (
             <div key={index} className="flex items-center gap-3">
               {/* Label skeleton */}
@@ -86,7 +86,8 @@ export function CustomBarChart({
             <div key={index} className="flex items-center gap-3">
               {/* Label */}
               <span
-                className={`font-persian text-sm min-w-[160px] text-right ${item.labelColor || "text-white"
+                className={`font-persian text-sm min-w-[160px] text-right ${
+                  item.labelColor || "text-white"
                 }`}
               >
                 {item.label}
@@ -97,7 +98,8 @@ export function CustomBarChart({
                 className={`flex-1 flex items-center bg-gray-700 rounded-full relative overflow-hidden ${barHeight}`}
               >
                 <div
-                  className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${item.color || "bg-emerald-400"
+                  className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${
+                    item.color || "bg-emerald-400"
                   }`}
                   style={{
                     width: `${Math.min(percentage, 100)}%`,
@@ -110,7 +112,8 @@ export function CustomBarChart({
 
               {/* Value Label */}
               <span
-                className={`font-bold text-sm min-w-[60px] text-left ${item.color?.includes("emerald")
+                className={`font-bold text-sm min-w-[60px] text-left ${
+                  item.color?.includes("emerald")
                     ? "text-emerald-400"
                     : item.color?.includes("blue")
                       ? "text-blue-400"