fix styles in tabs and add d3js component for main section in dashboard-home ,also add chartBar

Co-authored-by: MehrdadAdabi <126083584+mehrdadAdabi@users.noreply.github.com>
Co-authored-by: mehrdad <admehrdad148113@gmail.com>
Reviewed-on: https://git.pelekan.org/Saeed0920/inogen/pulls/1

FIGMA_LOGIN_IMPLEMENTATION.md

@@ -109,7 +109,7 @@ This document describes the exact implementation of the login page based on the
     داشبورد مدیریت فناوری و نوآوری
   </h2>
   <p className="text-gray-300 text-sm font-persian leading-relaxed">
-    لطفاً نام کاربری و پسورد خود را وارد فهرست خواسته شده وارد
+    لطفاً نام کاربری و کلمه عبور خود را وارد فهرست خواسته شده وارد
     <br />
     فرمایید.
   </p>

app/components/dashboard/d3-image-info.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import * as d3 from "d3";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
+
+export type D3ImageInfoProps = {
+  imageUrl?: string;
+  title?: string;
+  description?: string;
+  width?: number; // fallback width if container size not measured yet
+  height?: number; // fallback height
+};
+
+/**
+ * D3ImageInfo
+ * - Renders an image and an information box beside it using D3 within an SVG.
+ * - Includes a clickable "show" chip that opens a popup dialog with more details.
+ */
+export function D3ImageInfo({
+  imageUrl = "/placeholder.svg",
+  title = "عنوان آیتم",
+  description = "توضیحات تکمیلی در مورد این آیتم در این قسمت نمایش داده می‌شود.",
+  width = 800,
+  height = 360,
+}: D3ImageInfoProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const [open, setOpen] = useState(false);
+
+  // Redraw helper
+  const draw = () => {
+    if (!containerRef.current || !svgRef.current) return;
+
+    const container = containerRef.current;
+    const svg = d3.select(svgRef.current);
+
+    const W = Math.max(480, container.clientWidth || width);
+    const H = Math.max(260, height);
+
+    svg.attr("width", W).attr("height", H);
+
+    // Clear previous content
+    svg.selectAll("*").remove();
+
+    // Layout
+    const padding = 16;
+    const imageAreaWidth = Math.min(300, Math.max(220, W * 0.35));
+    const infoAreaX = padding + imageAreaWidth + padding;
+    const infoAreaWidth = W - infoAreaX - padding;
+
+    // Image area (with rounded border)
+    const imgGroup = svg
+      .append("g")
+      .attr("transform", `translate(${padding}, ${padding})`);
+
+    const imgW = imageAreaWidth;
+    const imgH = H - 2 * padding;
+
+    // Frame
+    imgGroup
+      .append("rect")
+      .attr("width", imgW)
+      .attr("height", imgH)
+      .attr("rx", 10)
+      .attr("ry", 10)
+      .attr("fill", "#1F2937") // gray-800
+      .attr("stroke", "#4B5563") // gray-600
+      .attr("stroke-width", 1.5);
+
+    // Image
+    imgGroup
+      .append("image")
+      .attr("href", imageUrl)
+      .attr("x", 4)
+      .attr("y", 4)
+      .attr("width", imgW - 8)
+      .attr("height", imgH - 8)
+      .attr("preserveAspectRatio", "xMidYMid slice")
+      .attr("clip-path", null);
+
+    // Info area
+    const infoGroup = svg
+      .append("g")
+      .attr("transform", `translate(${infoAreaX}, ${padding})`);
+
+    // Info container
+    infoGroup
+      .append("rect")
+      .attr("width", Math.max(220, infoAreaWidth))
+      .attr("height", imgH)
+      .attr("rx", 12)
+      .attr("ry", 12)
+      .attr("fill", "url(#infoGradient)")
+      .attr("stroke", "#6B7280") // gray-500
+      .attr("stroke-width", 1);
+
+    // Background gradient
+    const defs = svg.append("defs");
+    const gradient = defs
+      .append("linearGradient")
+      .attr("id", "infoGradient")
+      .attr("x1", "0%")
+      .attr("y1", "0%")
+      .attr("x2", "0%")
+      .attr("y2", "100%");
+
+    gradient.append("stop").attr("offset", "0%").attr("stop-color", "#111827"); // gray-900
+    gradient
+      .append("stop")
+      .attr("offset", "100%")
+      .attr("stop-color", "#374151"); // gray-700
+
+    // Title
+    infoGroup
+      .append("text")
+      .attr("x", 16)
+      .attr("y", 36)
+      .attr("fill", "#F9FAFB") // gray-50
+      .attr("font-weight", 700)
+      .attr("font-size", 18)
+      .text(title);
+
+    // Description (wrapped)
+    const wrapText = (text: string, maxWidth: number) => {
+      const words = text.split(/\s+/).reverse();
+      const lines: string[] = [];
+      let line: string[] = [];
+      let t = "";
+      while (words.length) {
+        const word = words.pop()!;
+        const test = (t + " " + word).trim();
+        // Approximate measure using character count
+        const tooLong = test.length * 8 > maxWidth; // 8px avg char width
+        if (tooLong && t.length) {
+          lines.push(t);
+          t = word;
+        } else {
+          t = test;
+        }
+      }
+      if (t) lines.push(t);
+      return lines;
+    };
+
+    const descMaxWidth = Math.max(200, infoAreaWidth - 32);
+    const descLines = wrapText(description, descMaxWidth);
+
+    descLines.forEach((line, i) => {
+      infoGroup
+        .append("text")
+        .attr("x", 16)
+        .attr("y", 70 + i * 22)
+        .attr("fill", "#E5E7EB") // gray-200
+        .attr("font-size", 14)
+        .text(line);
+    });
+
+    // Show button-like chip
+    const chipY = Math.min(imgH - 48, 70 + descLines.length * 22 + 16);
+    const chip = infoGroup
+      .append("g")
+      .attr("class", "show-chip")
+      .style("cursor", "pointer");
+
+    const chipW = 120;
+    const chipH = 36;
+
+    chip
+      .append("rect")
+      .attr("x", 16)
+      .attr("y", chipY)
+      .attr("width", chipW)
+      .attr("height", chipH)
+      .attr("rx", 8)
+      .attr("ry", 8)
+      .attr("fill", "#3B82F6") // blue-500
+      .attr("stroke", "#60A5FA")
+      .attr("stroke-width", 1.5)
+      .attr("opacity", 0.95);
+
+    chip
+      .append("text")
+      .attr("x", 16 + chipW / 2)
+      .attr("y", chipY + chipH / 2 + 5)
+      .attr("text-anchor", "middle")
+      .attr("fill", "#FFFFFF")
+      .attr("font-weight", 700)
+      .text("نمایش");
+
+    // Hover & click
+    chip
+      .on("mouseenter", function () {
+        d3.select(this).select("rect").attr("fill", "#2563EB"); // blue-600
+      })
+      .on("mouseleave", function () {
+        d3.select(this).select("rect").attr("fill", "#3B82F6"); // blue-500
+      })
+      .on("click", () => setOpen(true));
+  };
+
+  useEffect(() => {
+    const ro = new ResizeObserver(() => draw());
+    if (containerRef.current) ro.observe(containerRef.current);
+    draw();
+    return () => ro.disconnect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageUrl, title, description]);
+
+  return (
+    <div className="w-full h-full">
+      <div ref={containerRef} className="w-full h-[380px]">
+        <svg ref={svgRef} className="block w-full h-full"></svg>
+      </div>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="sm:max-w-[520px]">
+          <DialogHeader>
+            <DialogTitle className="font-persian">{title}</DialogTitle>
+            <DialogDescription className="font-persian">
+              {description}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="mt-4">
+            <img
+              src={imageUrl}
+              alt={title}
+              className="w-full h-60 object-cover rounded-md border border-gray-700"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React from "react";
+import { formatNumber } from "~/lib/utils";
+
+interface DataItem {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface DashboardCustomBarChartProps {
+  title: string;
+  data: DataItem[];
+  loading?: boolean;
+}
+
+export function DashboardCustomBarChart({
+  title,
+  data,
+  loading = false,
+}: DashboardCustomBarChartProps) {
+  if (loading) {
+    return (
+      <div className="w-full">
+        <h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20 pb-3">
+          {title}
+        </h3>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="animate-pulse">
+              <div className="h-12 bg-gray-600/30 rounded-lg"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Calculate the maximum value for scaling
+  const maxValue = Math.max(...data.map((item) => item.value));
+
+  return (
+    <div className="w-full">
+      <h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20">
+        {title}
+      </h3>
+      <div className="px-4">
+        {data.map((item, index) => {
+          const widthPercentage =
+            maxValue > 0 ? (item.value / maxValue) * 100 : 0;
+
+          return (
+            <div key={index} className="relative">
+              {/* Bar container */}
+              <div className="relative min-h-6 h-10 rounded-lg overflow-hidden">
+                {/* Animated bar */}
+                <div
+                  className={`absolute left-0 h-auto gap-2 top-0  ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-between px-2`}
+                  style={{ width: `${widthPercentage}%` }}
+                >
+                  <span className="text-white font-bold text-base">
+                    {formatNumber(item.value)}
+                  </span>
+                  <span className="text-white font-persian font-medium text-sm w-max">
+                    {item.label}
+                  </span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

app/components/dashboard/dashboard-layout.tsx

@@ -144,145 +144,8 @@ export function DashboardHome() {
                 <path d="m22 21-3-3" />
               </svg>
             </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">24</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +2 از ماه گذشته
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium font-persian">
-                پروژه‌های فعال
-              </CardTitle>
-              <svg
-                className="h-4 w-4 text-muted-foreground"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-              >
-                <rect width="20" height="14" x="2" y="5" rx="2" />
-                <path d="M2 10h20" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">12</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +1 از هفته گذشته
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium font-persian">
-                پروژه‌های تکمیل شده
-              </CardTitle>
-              <svg
-                className="h-4 w-4 text-muted-foreground"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">8</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +3 از ماه گذشته
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium font-persian">
-                درصد موفقیت
-              </CardTitle>
-              <svg
-                className="h-4 w-4 text-muted-foreground"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 2v20m8-10H4" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">85%</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +5% از ماه گذشته
-              </p>
-            </CardContent>
           </Card>
         </div>
-
-        {/* Recent Projects */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="font-persian">پروژه‌های اخیر</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {[
-                {
-                  name: "سیستم مدیریت محتوا",
-                  status: "در حال انجام",
-                  progress: 75,
-                },
-                { name: "اپلیکیشن موبایل", status: "تکمیل شده", progress: 100 },
-                {
-                  name: "پلتفرم تجارت الکترونیک",
-                  status: "شروع شده",
-                  progress: 25,
-                },
-                {
-                  name: "سیستم مدیریت مالی",
-                  status: "در حال بررسی",
-                  progress: 10,
-                },
-              ].map((project, index) => (
-                <div
-                  key={index}
-                  className="flex items-center space-x-4 space-x-reverse"
-                >
-                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-900 dark:text-white font-persian">
-                      {project.name}
-                    </p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">
-                      {project.status}
-                    </p>
-                  </div>
-                  <div className="flex items-center space-x-2 space-x-reverse">
-                    <div className="w-16 bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                      <div
-                        className="bg-green-600 h-2 rounded-full"
-                        style={{ width: `${project.progress}%` }}
-                      ></div>
-                    </div>
-                    <span className="text-sm text-gray-500 dark:text-gray-400">
-                      {project.progress}%
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
       </div>
     </DashboardLayout>
   );

app/components/dashboard/header.tsx

@@ -4,7 +4,7 @@ import { Link } from "react-router";
 import { cn } from "~/lib/utils";
 import { Button } from "~/components/ui/button";
 import {
-PanelLeft,
+  PanelLeft,
   Search,
   Bell,
   Settings,
@@ -54,7 +54,9 @@ export function Header({
         )}
 
         {/* Page Title */}
-        <h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian"><PanelLeft /> {title}</h1>
+        <h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian">
+          <PanelLeft /> {title}
+        </h1>
       </div>
 
       {/* Right Section */}

app/components/dashboard/interactive-bar-chart.tsx

@@ -0,0 +1,125 @@
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis, LabelList } from "recharts";
+import React, { useState, useEffect } from "react";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/ui/chart";
+
+export const description = "An interactive bar chart";
+
+const chartData = [
+  { category: "کیمیا", ideas: 12, revenue: 850, cost: 320 },
+  { category: "ُفرآروزش", ideas: 19, revenue: 1200, cost: 450 },
+  { category: "خوارزمی", ideas: 15, revenue: 1400, cost: 520 },
+];
+
+const chartConfig = {
+  ideas: {
+    label: "ایده‌ها",
+    color: "#60A5FA", // Blue-400
+  },
+  revenue: {
+    label: "درآمد (میلیون)",
+    color: "#4ADE80", // Green-400
+  },
+  cost: {
+    label: "کاهش هزینه (میلیون)",
+    color: "#F87171", // Red-400
+  },
+} satisfies ChartConfig;
+
+export function InteractiveBarChart() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("ideas");
+
+  const total = React.useMemo(
+    () => ({
+      ideas: chartData.reduce((acc, curr) => acc + curr.ideas, 0),
+      revenue: chartData.reduce((acc, curr) => acc + curr.revenue, 0),
+      cost: chartData.reduce((acc, curr) => acc + curr.cost, 0),
+    }),
+    [],
+  );
+
+  return (
+    <Card className="py-0 bg-transparent mt-20 border-none h-full">
+      <CardContent className="px-2 sm:p-6 bg-transparent">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-96 w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+            barCategoryGap="42%"
+          >
+            <CartesianGrid vertical={false} stroke="#475569" />
+            <XAxis
+              dataKey="category"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tick={{ fill: "#94a3b8", fontSize: 12 }}
+            />
+            <YAxis
+              domain={[0, 100]}
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              tick={{ fill: "#94a3b8", fontSize: 12 }}
+              tickFormatter={(value) => `${value}%`}
+            />
+            <Bar
+              dataKey="ideas"
+              fill={chartConfig.ideas.color}
+              radius={[8, 8, 0, 0]}
+            >
+              <LabelList
+                dataKey="ideas"
+                position="top"
+                style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
+              />
+            </Bar>
+            <Bar
+              dataKey="revenue"
+              fill={chartConfig.revenue.color}
+              radius={[8, 8, 0, 0]}
+            >
+              <LabelList
+                dataKey="revenue"
+                position="top"
+                style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
+              />
+            </Bar>
+            <Bar
+              dataKey="cost"
+              fill={chartConfig.cost.color}
+              radius={[8, 8, 0, 0]}
+            >
+              <LabelList
+                dataKey="cost"
+                position="top"
+                style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -34,7 +34,6 @@ import {
 import apiService from "~/lib/api";
 import toast from "react-hot-toast";
 import { Funnel, Wrench, CirclePause, DollarSign } from "lucide-react";
-import ProjectDetail from "../projects/project-detail";
 
 moment.loadPersian({ usePersianDigits: true });
 interface ProcessInnovationData {
@@ -150,7 +149,6 @@ export function ProcessInnovationPage() {
   };
 
   const handleProjectDetails = (project: ProcessInnovationData) => {
-    console.log(project);
     setSelectedProjectDetails(project);
     setDetailsDialogOpen(true);
   };
@@ -169,9 +167,9 @@ export function ProcessInnovationPage() {
       title: "جلوگیری از توقفات تولید",
       value: formatNumber(
         stats.productionStopsPreventionSum.toFixed?.(1) ??
-          stats.productionStopsPreventionSum,
+        stats.productionStopsPreventionSum,
       ),
-      description: "ظرفیت افزایش یافته",
+      description: "تن افزایش یافته",
       icon: <CirclePause />,
       color: "text-emerald-400",
     },
@@ -196,10 +194,10 @@ export function ProcessInnovationPage() {
     },
     {
       id: "frequent-failures-reduction",
-      title: "کاهش خرابیهای پرتکرار",
+      title: "کاهش خرابی های پرتکرار",
       value: formatNumber(
         stats.frequentFailuresReductionSum.toFixed?.(1) ??
-          stats.frequentFailuresReductionSum,
+        stats.frequentFailuresReductionSum,
       ),
       description: "مجموع درصد کاهش خرابی",
       icon: <Wrench />,
@@ -402,7 +400,7 @@ export function ProcessInnovationPage() {
       if (typeof payload === "string") {
         try {
           payload = JSON.parse(payload);
-        } catch {}
+        } catch { }
       }
 
       const parseNum = (v: unknown): number => {
@@ -575,73 +573,73 @@ export function ProcessInnovationPage() {
             <div className="grid grid-cols-2 gap-3">
               {loading || statsLoading
                 ? // 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"
-                    >
-                      <CardContent className="p-2">
-                        <div className="flex flex-col justify-between gap-2">
-                          <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
-                            <div
-                              className="h-6 bg-gray-600 rounded animate-pulse"
-                              style={{ width: "60%" }}
-                            />
-                            <div className="p-3 bg-emerald-500/20 rounded-full w-fit">
-                              <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
-                            </div>
-                          </div>
-                          <div className="flex items-center justify-center flex-col p-1">
-                            <div
-                              className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
-                              style={{ width: "40%" }}
-                            />
-                            <div
-                              className="h-4 bg-gray-600 rounded animate-pulse"
-                              style={{ width: "80%" }}
-                            />
+                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"
+                  >
+                    <CardContent className="p-2">
+                      <div className="flex flex-col justify-between gap-2">
+                        <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
+                          <div
+                            className="h-6 bg-gray-600 rounded animate-pulse"
+                            style={{ width: "60%" }}
+                          />
+                          <div className="p-3 bg-emerald-500/20 rounded-full w-fit">
+                            <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
                           </div>
                         </div>
-                      </CardContent>
-                    </Card>
-                  ))
+                        <div className="flex items-center justify-center flex-col p-1">
+                          <div
+                            className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
+                            style={{ width: "40%" }}
+                          />
+                          <div
+                            className="h-4 bg-gray-600 rounded animate-pulse"
+                            style={{ width: "80%" }}
+                          />
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))
                 : statsCards.map((card) => (
-                    <Card
-                      key={card.id}
-                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
-                    >
-                      <CardContent className="p-2">
-                        <div className="flex flex-col justify-between gap-2">
-                          <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
-                            <h3 className="text-lg font-bold text-white font-persian">
-                              {card.title}
-                            </h3>
-                            <div
-                              className={`p-3 gird placeitems-center rounded-full w-fit `}
-                            >
-                              {card.icon}
-                            </div>
-                          </div>
-                          <div className="flex items-center justify-center flex-col p-1">
-                            <p
-                              className={`text-3xl font-bold ${card.color} mb-1`}
-                            >
-                              {card.value}
-                            </p>
-                            <p className="text-sm text-gray-300 font-persian">
-                              {card.description}
-                            </p>
+                  <Card
+                    key={card.id}
+                    className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
+                  >
+                    <CardContent className="p-2">
+                      <div className="flex flex-col justify-between gap-2">
+                        <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
+                          <h3 className="text-lg font-bold text-white font-persian">
+                            {card.title}
+                          </h3>
+                          <div
+                            className={`p-3 gird placeitems-center rounded-full w-fit `}
+                          >
+                            {card.icon}
                           </div>
                         </div>
-                      </CardContent>
-                    </Card>
-                  ))}
+                        <div className="flex items-center justify-center flex-col p-1">
+                          <p
+                            className={`text-3xl font-bold ${card.color} mb-1`}
+                          >
+                            {card.value}
+                          </p>
+                          <p className="text-sm text-gray-300 font-persian">
+                            {card.description}
+                          </p>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
             </div>
           </div>
 
           {/* Process Impacts Chart */}
           <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
-            <CardContent className="p-4">
+            <CardContent >
               <CustomBarChart
                 title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
                 loading={statsLoading}
@@ -842,8 +840,8 @@ export function ProcessInnovationPage() {
                 <div className="font-bold">
                   {formatNumber(
                     ((stats.averageScore ?? 0) as number).toFixed?.(1) ??
-                      stats.averageScore ??
-                      0,
+                    stats.averageScore ??
+                    0,
                   )}
                 </div>
               </div>
@@ -883,9 +881,9 @@ export function ProcessInnovationPage() {
                 <span className="text-white font-bold font-persian">
                   {selectedProjectDetails?.start_date
                     ? moment(
-                        selectedProjectDetails?.start_date,
-                        "YYYY-MM-DD",
-                      ).format("YYYY/MM/DD")
+                      selectedProjectDetails?.start_date,
+                      "YYYY-MM-DD",
+                    ).format("YYYY/MM/DD")
                     : "-"}
                 </span>
               </div>
@@ -898,9 +896,9 @@ export function ProcessInnovationPage() {
                 <span className="text-white font-bold font-persian">
                   {selectedProjectDetails?.done_date
                     ? moment(
-                        selectedProjectDetails?.done_date,
-                        "YYYY-MM-DD",
-                      ).format("YYYY/MM/DD")
+                      selectedProjectDetails?.done_date,
+                      "YYYY-MM-DD",
+                    ).format("YYYY/MM/DD")
                     : "-"}
                 </span>
               </div>

app/components/dashboard/sidebar.tsx

@@ -149,21 +149,21 @@ export function Sidebar({
   React.useEffect(() => {
     const autoExpandParents = () => {
       const newExpandedItems: string[] = [];
-      
+
       menuItems.forEach((item) => {
         if (item.children) {
           const hasActiveChild = item.children.some(
-            (child) => child.href && location.pathname === child.href
+            (child) => child.href && location.pathname === child.href,
           );
           if (hasActiveChild) {
             newExpandedItems.push(item.id);
           }
         }
       });
-      
+
       setExpandedItems(newExpandedItems);
     };
-    
+
     autoExpandParents();
   }, [location.pathname]);
 
@@ -171,10 +171,10 @@ export function Sidebar({
     setExpandedItems((prev) => {
       // If trying to collapse, check if any child is active
       if (prev.includes(itemId)) {
-        const item = menuItems.find(menuItem => menuItem.id === itemId);
+        const item = menuItems.find((menuItem) => menuItem.id === itemId);
         if (item?.children) {
           const hasActiveChild = item.children.some(
-            (child) => child.href && location.pathname === child.href
+            (child) => child.href && location.pathname === child.href,
           );
           // Don't collapse if a child is active
           if (hasActiveChild) {
@@ -200,10 +200,12 @@ export function Sidebar({
 
   const renderMenuItem = (item: MenuItem, level = 0) => {
     const isActive = isActiveRoute(item.href, item.children);
-    const isExpanded = expandedItems.includes(item.id) || 
-      (item.children && item.children.some(child => 
-        child.href && location.pathname === child.href
-      ));
+    const isExpanded =
+      expandedItems.includes(item.id) ||
+      (item.children &&
+        item.children.some(
+          (child) => child.href && location.pathname === child.href,
+        ));
     const hasChildren = item.children && item.children.length > 0;
 
     const ItemIcon = item.icon;
@@ -228,7 +230,8 @@ export function Sidebar({
                   ? " text-emerald-400 border-r-2 border-emerald-400"
                   : "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
                 isCollapsed && level === 0 && "justify-center px-2",
-                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400",
+                item.id === "logout" &&
+                  "hover:bg-red-500/10 hover:text-red-400",
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
@@ -265,14 +268,16 @@ export function Sidebar({
             </div>
           </Link>
         ) : (
-          <button 
+          <button
             className={cn(
               "w-full text-right",
               // Disable pointer cursor when child is active (cannot collapse)
-              item.children && item.children.some(child => 
-                child.href && location.pathname === child.href
-              ) && "cursor-not-allowed"
-            )} 
+              item.children &&
+                item.children.some(
+                  (child) => child.href && location.pathname === child.href,
+                ) &&
+                "cursor-not-allowed",
+            )}
             onClick={handleClick}
           >
             <div
@@ -283,7 +288,8 @@ export function Sidebar({
                   ? " text-emerald-400 border-r-2 border-emerald-400"
                   : "text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300",
                 isCollapsed && level === 0 && "justify-center px-2",
-                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400",
+                item.id === "logout" &&
+                  "hover:bg-red-500/10 hover:text-red-400",
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
@@ -313,9 +319,13 @@ export function Sidebar({
                         "w-4 h-4 transition-transform duration-200",
                         isExpanded ? "rotate-180" : "rotate-0",
                         // Show different color when child is active (cannot collapse)
-                        item.children && item.children.some(child => 
-                          child.href && location.pathname === child.href
-                        ) ? "text-emerald-400" : "text-current"
+                        item.children &&
+                          item.children.some(
+                            (child) =>
+                              child.href && location.pathname === child.href,
+                          )
+                          ? "text-emerald-400"
+                          : "text-current",
                       )}
                     />
                   )}
@@ -324,14 +334,12 @@ export function Sidebar({
             </div>
           </button>
         )}
-
         {/* Submenu */}
         {hasChildren && isExpanded && !isCollapsed && (
           <div className="mt-1 space-y-0.5">
             {item.children?.map((child) => renderMenuItem(child, level + 1))}
           </div>
         )}
-
         {/* Tooltip for collapsed state */}
         {isCollapsed && level === 0 && (
           <div className="absolute right-full top-1/2 transform -translate-y-1/2 mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
@@ -361,21 +369,26 @@ export function Sidebar({
           {!isCollapsed ? (
             <div className="flex items-center gap-3">
               <GalleryVerticalEnd
-              color="black"
+                color="black"
                 size={32}
                 strokeWidth={1}
                 className="bg-green-400 p-1.5 rounded-lg"
               />
               <div className="font-persian">
                 <div className="text-sm font-semibold text-white">
-                  سیستم اینوژن
+                  داشبورد اینوژن
                 </div>
                 <div className="text-xs text-gray-400">نسخه ۰.۱</div>
               </div>
             </div>
           ) : (
             <div className="flex justify-center w-full">
-              <InogenLogo size="sm" />
+              <GalleryVerticalEnd
+                color="black"
+                size={32}
+                strokeWidth={1}
+                className="bg-green-400 p-1.5 rounded-lg"
+              />
             </div>
           )}
         </div>

app/components/ecosystem/info-panel.tsx

@@ -166,7 +166,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         },
         { label: "شتابدهنده", value: parseNumber(counts.accelerator_count) },
         { label: "دانشگاه", value: parseNumber(counts.university_count) },
-        { label: "صندوق", value: parseNumber(counts.fund_count) },
+        { label: "صندوق های مالی", value: parseNumber(counts.fund_count) },
         { label: "شرکت", value: parseNumber(counts.company_count) },
       ]
     : [];
@@ -406,6 +406,23 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
           </CardTitle>
         </CardHeader>
 
+        {/* Footer - MOU Count */}
+        {/* <CardContent className="py-3">
+          <div className="flex font-bold text-xl px-6 justify-between text-gray-300 font-persian mb-1">
+            تعداد تفاهم نامه ها
+            <span className="text-2xl">{formatNumber(counts.mou_count)}</span>
+          </div>
+        </CardContent> */}
+
+        <CardHeader className="text-center pb-2 border-b-2 border-[#3F415A]">
+          <CardTitle className="font-persian text-xl text-white flex justify-between px-4">
+          تعداد تفاهم نامه ها
+          <span className="font-bold text-3xl">
+              {formatNumber(counts.mou_count)}
+            </span>
+          </CardTitle>
+        </CardHeader>
+
         <CardHeader className="text-center pb-2 border-b-2 border-[#3F415A]">
           <CardTitle className="font-persian text-xl text-white flex justify-between px-4">
             تعداد بازیگران
@@ -497,13 +514,6 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
           </div>
         </CardContent>
 
-        {/* Footer - MOU Count */}
-        <CardContent className="py-3">
-          <div className="flex font-bold text-xl px-6 justify-between text-gray-300 font-persian mb-1">
-            تعداد تفاهم نامه ها
-            <span className="text-2xl">{formatNumber(counts.mou_count)}</span>
-          </div>
-        </CardContent>
       </Card>
     </div>
   );

app/components/ecosystem/network-graph.tsx

@@ -102,7 +102,7 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
         // Create center node
         const centerNode: Node = {
           id: "center",
-          label: "مرکز اکوسیستم",
+          label: "", //مرکز زیست بوم
           category: "center",
           stageid: 0,
           isCenter: true,
@@ -453,6 +453,8 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
             id: d.id,
             label: d.label,
             category: d.category,
+            stageid: d.stageid,
+            fields: filteredFields,
             description: descriptionField?.V || undefined,
           };
 

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

@@ -38,7 +38,7 @@ export function CustomBarChart({
   // Loading skeleton
   if (loading) {
     return (
-      <div className={`space-y-6 ${className}`} style={{ height }}>
+      <div className={`space-y-6 p-4 ${className}`} style={{ height }}>
         {title && (
           <div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
         )}
@@ -68,13 +68,15 @@ export function CustomBarChart({
 
   return (
     <div className={`space-y-6 ${className}`} style={{ height }}>
-      {title && (
-        <h3 className="text-xl font-bold text-white font-persian text-right mb-4">
-          {title}
-        </h3>
-      )}
+      <div className="border-b">
+        {title && (
+          <h3 className="text-xl font-bold text-white font-persian text-right p-4">
+            {title}
+          </h3>
+        )}
+      </div>
 
-      <div className="space-y-4">
+      <div className="space-y-4 px-4 pb-4">
         {data.map((item, index) => {
           const percentage =
             globalMaxValue > 0 ? (item.value / globalMaxValue) * 100 : 0;
@@ -84,9 +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}
               </span>
@@ -96,9 +97,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,19 +110,18 @@ export function CustomBarChart({
 
               {/* Value Label */}
               <span
-                className={`font-bold text-sm min-w-[60px] text-left ${
-                  item.color?.includes("emerald")
-                    ? "text-emerald-400"
-                    : item.color?.includes("blue")
-                      ? "text-blue-400"
-                      : item.color?.includes("purple")
-                        ? "text-purple-400"
-                        : item.color?.includes("red")
-                          ? "text-red-400"
-                          : item.color?.includes("yellow")
-                            ? "text-yellow-400"
-                            : "text-emerald-400"
-                }`}
+                className={`font-bold text-sm min-w-[60px] text-left ${item.color?.includes("emerald")
+                  ? "text-emerald-400"
+                  : item.color?.includes("blue")
+                    ? "text-blue-400"
+                    : item.color?.includes("purple")
+                      ? "text-purple-400"
+                      : item.color?.includes("red")
+                        ? "text-red-400"
+                        : item.color?.includes("yellow")
+                          ? "text-yellow-400"
+                          : "text-emerald-400"
+                  }`}
               >
                 {item.valuePrefix || ""}
                 {formatNumber(parseFloat(displayValue))}

app/components/ui/table.tsx

@@ -11,7 +11,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
     <div className={cn("relative w-full", containerClassName)}>
       <table
         ref={ref}
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn("w-full caption-bottom text-sm h-full", className)}
         {...props}
       />
     </div>

app/components/ui/tabs.tsx

@@ -16,17 +16,23 @@ interface TabsProps {
   children: React.ReactNode;
 }
 
-export function Tabs({ defaultValue, value, onValueChange, className, children }: TabsProps) {
+export function Tabs({
+  defaultValue,
+  value,
+  onValueChange,
+  className,
+  children,
+}: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue || "");
-  
+
   const currentValue = value ?? internalValue;
   const handleValueChange = onValueChange ?? setInternalValue;
 
   return (
-    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
-      <div className={cn("w-full", className)}>
-        {children}
-      </div>
+    <TabsContext.Provider
+      value={{ value: currentValue, onValueChange: handleValueChange }}
+    >
+      <div className={cn("w-full", className)}>{children}</div>
     </TabsContext.Provider>
   );
 }
@@ -38,7 +44,12 @@ interface TabsListProps {
 
 export function TabsList({ className, children }: TabsListProps) {
   return (
-    <div className={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)}>
+    <div
+      className={cn(
+        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        className,
+      )}
+    >
       {children}
     </div>
   );
@@ -51,7 +62,12 @@ interface TabsTriggerProps {
   children: React.ReactNode;
 }
 
-export function TabsTrigger({ value, className, disabled, children }: TabsTriggerProps) {
+export function TabsTrigger({
+  value,
+  className,
+  disabled,
+  children,
+}: TabsTriggerProps) {
   const context = useContext(TabsContext);
   if (!context) throw new Error("TabsTrigger must be used within Tabs");
 
@@ -64,8 +80,10 @@ export function TabsTrigger({ value, className, disabled, children }: TabsTrigge
       onClick={() => !disabled && context.onValueChange(value)}
       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-background text-foreground shadow-sm" : "hover:bg-muted/50",
-        className
+        isActive
+          ? "bg-gray-700 text-foreground shadow-sm"
+          : "hover:bg-muted/50",
+        className,
       )}
     >
       {children}
@@ -86,7 +104,12 @@ export function TabsContent({ value, className, children }: TabsContentProps) {
   if (context.value !== value) return null;
 
   return (
-    <div className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)}>
+    <div
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+    >
       {children}
     </div>
   );

app/routes.ts

@@ -4,7 +4,14 @@ export default [
   route("login", "routes/login.tsx"),
   route("dashboard", "routes/dashboard.tsx"),
   route("dashboard/project-management", "routes/project-management.tsx"),
-  route("dashboard/innovation-basket/process-innovation", "routes/innovation-basket.process-innovation.tsx"),
+  route(
+    "dashboard/innovation-basket/process-innovation",
+    "routes/innovation-basket.process-innovation.tsx"
+  ),
+  route(
+    "/dashboard/innovation-basket/digital-innovation",
+    "routes/digital-innovation-page.tsx"
+  ),
   route("projects", "routes/projects.tsx"),
   route("dashboard/ecosystem", "routes/ecosystem.tsx"),
   route("404", "routes/404.tsx"),

app/routes/digital-innovation-page.tsx

@@ -0,0 +1,17 @@
+import { ProtectedRoute } from "~/components/auth/protected-route";
+import DigitalInnovationPage from "~/components/dashboard/project-management/digital-innovation-page";
+
+export function meta() {
+    return [
+        { title: "نوآوری در فرآیند - سیستم مدیریت فناوری و نوآوری" },
+        { name: "description", content: "مدیریت پروژه‌های نوآوری در فرآیند" },
+    ];
+}
+
+export default function ProcessInnovation() {
+    return (
+        <ProtectedRoute requireAuth={true}>
+            <DigitalInnovationPage />
+        </ProtectedRoute>
+    );
+} 

app/routes/project-management.tsx

@@ -2,7 +2,7 @@ import type { Route } from "./+types/project-management";
 import { ProjectManagementPage } from "~/components/dashboard/project-management/project-management-page";
 import { ProtectedRoute } from "~/components/auth/protected-route";
 
-export function meta({}: Route.MetaArgs) {
+export function meta({ }: Route.MetaArgs) {
   return [
     { title: "مدیریت پروژه‌ها - سیستم مدیریت فناوری و نوآوری" },
     { name: "description", content: "مدیریت و نظارت بر پروژه‌های فناوری و نوآوری" },

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "react-router build",
-    "dev": "react-router dev --port 3000",
+    "dev": "react-router dev",
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },