From b63166873dc16fd222d66b6cb828f3dac0d1c73a Mon Sep 17 00:00:00 2001
From: saeed0920 <sd.eed1381@gmail.com>
Date: Thu, 11 Sep 2025 07:32:37 +0330
Subject: [PATCH] fix the funel chart

---
 .../product-innovation-page.tsx                 |  4 ++--
 app/components/ui/funnel-chart.tsx              | 17 ++++++-----------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/app/components/dashboard/project-management/product-innovation-page.tsx b/app/components/dashboard/project-management/product-innovation-page.tsx
index dad5389..962df80 100644
--- a/app/components/dashboard/project-management/product-innovation-page.tsx
+++ b/app/components/dashboard/project-management/product-innovation-page.tsx
@@ -718,7 +718,7 @@ export function ProductInnovationPage() {
         <Card className="bg-transparent rounded-2xl overflow-hidden">
           <CardContent className="p-0">
             <div className="relative">
-              <Table containerClassName="overflow-auto custom-scrollbar backdrop max-h-[calc(90vh-100px)]">
+              <Table containerClassName="overflow-auto custom-scrollbar backdrop max-h-[calc(100vh-200px)]">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -729,7 +729,7 @@ export function ProductInnovationPage() {
                       >
                         {column.sortable ? (
                           <button
-                            onClick={() => handleSort(column.key)}
+                        onClick={() => handleSort(column.key)}
                             className="flex items-center gap-2"
                           >
                             <span>{column.label}</span>
diff --git a/app/components/ui/funnel-chart.tsx b/app/components/ui/funnel-chart.tsx
index 528ca8a..87e4e83 100644
--- a/app/components/ui/funnel-chart.tsx
+++ b/app/components/ui/funnel-chart.tsx
@@ -49,26 +49,21 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
             const barWidth = Math.max(20, widthPercentage); // Minimum 20% width
             
             return (
-              <div key={index} className="flex items-center justify-center w-full">
-                <div className="flex items-center gap-10 w-full">
-                  {/* Right side label (RTL) */}
-                  <div className="text-lg text-white font-thin min-w-[max-content] text-center">
+              <div key={index} className="grid  grid-cols-[6rem_1fr]  gap-2 w-full">
+                  <div className="text-lg text-white cols-start-1 justify-self-start font-thin min-w-[max-content] text-center">
                     {item.label}
                   </div>
-                  {/* Centered bar with equal side spacers so that numbers align on a vertical axis */}
+                <div className="flex items-center gap-10 w-full cols-start-2 flex items-center justify-center w-full">
                   <div className="flex items-center w-full">
-                    {/* Left spacer */}
                     <div style={{ width: `${(100 - barWidth) / 2}%` }} />
-                    {/* Bar */}
                     <div
-                      className="bg-[#3BC47A] h-8 rounded-2xl flex items-center justify-center text-lg relative"
+                      className="bg-[#3BC47A] h-8  rounded-2xl flex items-center justify-center text-lg relative"
                       style={{ width: `${barWidth}%` }}
                     >
-                      <span className="text-gray-900 text-[#3F415A] font-semibold">
+                      <span className="text-[#3F415A] font-semibold">
                         {item.value.toLocaleString('fa-IR')}
                       </span>
                     </div>
-                    {/* Right spacer */}
                     <div style={{ width: `${(100 - barWidth) / 2}%` }} />
                   </div>
                 </div>
@@ -78,7 +73,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
         </div>
 
         {/* End Process Line */}
-        <div className="flex items-center w-full gap-10 mt-6">
+        <div className="flex items-center w-full gap-10">
         <div className="text-lg text-gray-600 min-w-[max-content]">انتها فرآیند</div>
           <div className="flex items-center w-full gap-4">
             {(() => {