From d5f11ec89f89569d7901ff7c69496fa8c9aac776 Mon Sep 17 00:00:00 2001
From: MehrdadAdabi <126083584+mehrdadAdabi@users.noreply.github.com>
Date: Fri, 29 Aug 2025 08:16:15 +0330
Subject: [PATCH] fix: chart design

---
 .../green-innovation-page.tsx                 | 121 +++++++++---------
 1 file changed, 60 insertions(+), 61 deletions(-)

diff --git a/app/components/dashboard/project-management/green-innovation-page.tsx b/app/components/dashboard/project-management/green-innovation-page.tsx
index 78e2891..664efc6 100644
--- a/app/components/dashboard/project-management/green-innovation-page.tsx
+++ b/app/components/dashboard/project-management/green-innovation-page.tsx
@@ -645,7 +645,7 @@ export function GreenInnovationPage() {
       <div className="p-6 space-y-4">
         {/* Stats Cards */}
         <div className="flex gap-6 mb-6">
-          <div className="flex flex-col gap-11 w-full h-full">
+          <div className="flex flex-col gap-11  h-full w-1/2">
             {/* Stats Grid */}
             {loading || statsLoading
               ? // Loading skeleton for stats cards - matching new design
@@ -724,7 +724,7 @@ export function GreenInnovationPage() {
                   <span>بازیافت و بازیابی منابع</span>
                 </div>
               </div>
-              <div className="content grid gap-3  h-max p-8 box-border items-center justify-between sm:grid-cols-1 sm:overflow-auto xl:overflow-hidden xl:grid-cols-[30%_70%]">
+              <div className="content grid gap-6  h-max p-8 box-border items-center justify-between sm:grid-cols-1 sm:overflow-auto xl:overflow-hidden xl:grid-cols-[30%_70%]">
                 <div className="params flex flex-col gap-3.5">
                   {Object.entries(recycleParams).map((el, index) => {
                     return (
@@ -746,71 +746,70 @@ export function GreenInnovationPage() {
                   })}
                 </div>
 
-                <div>
-                  <div className="h-72 w-[32rem]">
-                    <ResponsiveContainer width="100%" height="100%">
-                      <BarChart
-                        width={500}
-                        height={300}
-                        data={data}
-                        margin={{
-                          top: 5,
-                          right: 30,
-                          left: 20,
-                          bottom: 5,
+                <div className="h-72 w-[35rem]">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      width={500}
+                      height={300}
+                      data={data}
+                      margin={{
+                        top: 5,
+                        right: 30,
+                        left: 20,
+                        bottom: 5,
+                      }}
+                    >
+                      <CartesianGrid
+                        stroke="#374151"
+                        strokeDasharray="0"
+                        vertical={false} // خط‌های عمودی (از محور X) بمونه
+                        // horizontal={false} // خط‌های افقی (از محور Y) حذف میشه
+                      />
+                      <XAxis
+                        dataKey="name"
+                        axisLine={false} // خط اصلی محور X محو میشه
+                        tickLine={false}
+                        tick={{
+                          fill: "#fff",
+                          fontSize: 14,
+                          fontWeight: "normal",
+                          dy: 10, // جابجایی عمودی (مثبت = پایین‌تر، منفی = بالاتر)
                         }}
-                      >
-                        <CartesianGrid
-                          stroke="#374151"
-                          strokeDasharray="0"
-                          vertical={false} // خط‌های عمودی (از محور X) بمونه
-                          // horizontal={false} // خط‌های افقی (از محور Y) حذف میشه
-                        />
-                        <XAxis
-                          dataKey="name"
-                          axisLine={false} // خط اصلی محور X محو میشه
-                          tickLine={false}
-                          tick={{
-                            fill: "#fff",
-                            fontSize: 14,
-                            fontWeight: "normal",
-                            dy: 10, // جابجایی عمودی (مثبت = پایین‌تر، منفی = بالاتر)
-                          }}
-                        />
-                        <YAxis
-                          type="number"
-                          domain={[0, 100]}
-                          axisLine={false}
-                          tickLine={false}
-                          tick={{
-                            fill: "#99a1af",       // رنگ متن
-                            fontSize: 14,       // سایز فونت
-                            // fontWeight: "bold", // ضخامت
-                            dx: -30,              // جابجایی افقی (اعداد نزدیک‌تر یا دورتر از محور)
-                            // dy:-1
-                          }}
-                          tickFormatter={(val) => `${val}%`}
-                        />
-                        <Bar
-                          dataKey="pv"
-                          fill="#3AEA83"
-                          radius={[20, 20, 0, 0]}
-                          barSize={14}
-                          label={{
-                            position: "top",
-                            fill: "#fff",
-                            fontWeight: "bold",
-                          }}
-                        />
-                      </BarChart>
-                    </ResponsiveContainer>
-                  </div>
+                      />
+                      <YAxis
+                        type="number"
+                        domain={[0, 100]}
+                        axisLine={false}
+                        tickLine={false}
+                        tick={{
+                          fill: "#99a1af", // رنگ متن
+                          fontSize: 14, // سایز فونت
+                          // fontWeight: "bold", // ضخامت
+                          dx: -30, // جابجایی افقی (اعداد نزدیک‌تر یا دورتر از محور)
+                          // dy:-1
+                        }}
+                        tickFormatter={(val) => `${val}%`}
+                      />
+                      <Bar
+                        dataKey="pv"
+                        fill="#3AEA83"
+                        radius={[20, 20, 0, 0]}
+                        barSize={14}
+                        label={{
+                          position: "top",
+                          fill: "#fff",
+                          fontWeight: "bold",
+                          formatter: (value) => `${value}%`
+                        }}
+                      />
+                    </BarChart>
+                  </ResponsiveContainer>
                 </div>
               </div>
             </CardContent>
           </Card>
 
-          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
+          <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">