fix: the styles,and components

app/components/dashboard/dashboard-home.tsx

@@ -594,8 +594,8 @@ export function DashboardHome() {
             <p className="p-6 font-persian font-semibold text-lg ">
               تحقق ارزش ها
             </p>
-            <TabsList className="bg-transparent py-2 border m-6 border-gray-600">
+            <TabsList className="bg-transparent py-2 m-6 border-[1px] border-[#5F6284]">
-              <TabsTrigger value="canvas" className="cursor-pointer">
+              <TabsTrigger  value="canvas" className="cursor-pointer">
                 شماتیک
               </TabsTrigger>
               <TabsTrigger value="charts" className=" text-white cursor-pointer font-light ">

app/components/dashboard/project-management/mange-ideas-tech-page.tsx

@@ -932,15 +932,7 @@ export function ManageIdeasTechPage() {
 
                      {/* Infinite scroll trigger */}
                      <div ref={observerRef} className="h-auto">
-                       {loadingMore && (
+
-                         <div className="flex items-center justify-center py-2">
-                           <div className="flex items-center gap-2">
-                             <RefreshCw className="w-4 h-4 animate-spin text-success" />
-                             <span className="font-persian text-muted-foreground text-sm">
-                             </span>
-                           </div>
-                         </div>
-                       )}
                      </div>
                    </CardContent>
 
@@ -951,10 +943,19 @@ export function ManageIdeasTechPage() {
                      </div>
                    </div>
                  </Card>
+                 {loadingMore && (
+                                          <div className="flex items-center justify-center py-2">
+                                            <div className="flex items-center gap-2">
+                                              <RefreshCw className="w-4 h-4 animate-spin text-success" />
+                                              <span className="font-persian text-muted-foreground text-sm">
+                                              </span>
+                                            </div>
+                                          </div>
+                                        )}
                    </div>
                    {/* Chart Section */}
                   <BaseCard icon={TrendingUp} className="col-span-1 mt-12 row-start-2 col-start-3 row-span-1" title="نمودار ایده‌ها">
-                    <MemoizedVerticalBarChart 
+                    <MemoizedVerticalBarChart
                       chartData={chartData}
                       loadingChart={loadingChart}
                       chartConfig={chartConfig}

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

@@ -756,7 +756,7 @@ export function ProductInnovationPage() {
         </div>
 
         {/* Funnel Chart */}
-          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-full backdrop-blur-sm rounded-2xl w-full overflow-hidden">
+          <Card className=" bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-full 2xl:h-auto pb-8 backdrop-blur-sm rounded-2xl w-full overflow-hidden">
             <CardContent className="px-0 py-4">
               <FunnelChart
                 title="قيف فرآیند پروژه ها"

app/components/ui/funnel-chart.tsx

@@ -13,6 +13,7 @@ interface FunnelChartProps {
   title?: string;
   className?: string;
 }
+const greenColors = ["#3C9F71","#3BC47A","#3BC47A","#3BD77E","#3AEA83"]
 
 export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
   const maxValue = Math.max(...data.map(d => d.value));
@@ -20,7 +21,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
     if (!maxValue || maxValue <= 0) return 0;
     return Math.round((value / maxValue) * 100);
   };
-  
+
   return (
     <div className={`w-full ${className}`}>
       {title && (
@@ -28,7 +29,7 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
           {title}
         </h3>
       )}
-      
+
       <div className="flex px-4 flex-col items-center gap-2 space-y-2">
         {/* Start Process Line */}
         <div className="flex items-center w-full gap-10 mt-6 px-4">
@@ -47,18 +48,18 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
           {data.map((item, index) => {
             const widthPercentage = toPercent(item.value);
             const barWidth = Math.max(20, widthPercentage); // Minimum 20% width
-            
+
             return (
               <div key={index} className="grid  grid-cols-[6rem_1fr]  gap-2 w-full">
-                  <div className="text-sm font-light text-white cols-start-1 justify-self-start font-thin min-w-[max-content] text-center">
+                  <div className="text-sm font-light text-white font-persian cols-start-1 justify-self-start min-w-[max-content] text-center">
                     {item.label}
                   </div>
-                <div className="flex items-center gap-10 w-full cols-start-2 flex items-center justify-center w-full">
+                <div className="flex items-center gap-10 w-full cols-start-2  justify-center">
                   <div className="flex items-center w-full">
                     <div style={{ width: `${(100 - barWidth) / 2}%` }} />
                     <div
                       className="bg-[#3BC47A] h-8  rounded-2xl flex items-center justify-center text-lg relative"
-                      style={{ width: `${barWidth}%` }}
+                      style={{ width: `${barWidth}%` ,backgroundColor : `${greenColors[index]}`}}
                     >
                       <span className="text-pr-gray text-base font-semibold">
                         {item.value.toLocaleString('fa-IR')}

app/components/ui/progress.tsx

@@ -19,7 +19,7 @@ const Progress = React.forwardRef<
     <span className="w-full right-0 text-sm absolute z-10 px-2  text-[#5F6284]"
     >{formatNumber(Math.ceil(value || 0 * 10) / 10)}%</span>
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
+      className="h-full w-full flex-1 bg-pr-green transition-all"
       style={{ transform: `translateX(-${15 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>

app/components/ui/tabs.tsx

@@ -81,7 +81,7 @@ export function TabsTrigger({
       className={cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         isActive
-          ? "bg-gray-700 text-foreground shadow-sm"
+          ? "bg-pr-gray text-foreground shadow-sm"
           : "hover:bg-muted/50",
         className,
       )}