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

@@ -34,6 +34,7 @@ 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 {
@@ -149,6 +150,7 @@ export function ProcessInnovationPage() {
   };
 
   const handleProjectDetails = (project: ProcessInnovationData) => {
+    console.log(project);
     setSelectedProjectDetails(project);
     setDetailsDialogOpen(true);
   };
@@ -639,7 +641,7 @@ export function ProcessInnovationPage() {
 
           {/* Process Impacts Chart */}
           <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
-            <CardContent >
+            <CardContent className="p-4">
               <CustomBarChart
                 title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
                 loading={statsLoading}

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

@@ -38,7 +38,7 @@ export function CustomBarChart({
   // Loading skeleton
   if (loading) {
     return (
-      <div className={`space-y-6 p-4 ${className}`} style={{ height }}>
+      <div className={`space-y-6 ${className}`} style={{ height }}>
         {title && (
           <div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
         )}
@@ -68,15 +68,13 @@ export function CustomBarChart({
 
   return (
     <div className={`space-y-6 ${className}`} style={{ height }}>
-      <div className="border-b">
       {title && (
-          <h3 className="text-xl font-bold text-white font-persian text-right p-4">
+        <h3 className="text-xl font-bold text-white font-persian text-right mb-4">
           {title}
         </h3>
       )}
-      </div>
 
-      <div className="space-y-4 px-4 pb-4">
+      <div className="space-y-4">
         {data.map((item, index) => {
           const percentage =
             globalMaxValue > 0 ? (item.value / globalMaxValue) * 100 : 0;
@@ -86,7 +84,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 +96,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 +110,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"

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 h-full", className)}
+        className={cn("w-full caption-bottom text-sm", className)}
         {...props}
       />
     </div>

app/routes.ts

@@ -4,18 +4,8 @@ export default [
   route("login", "routes/login.tsx"),
   route("dashboard", "routes/dashboard.tsx"),
   route("dashboard/project-management", "routes/project-management.tsx"),
-  route(
+  route("dashboard/innovation-basket/process-innovation", "routes/innovation-basket.process-innovation.tsx"),
-    "dashboard/innovation-basket/process-innovation",
+  route("dashboard/innovation-basket/green-innovation", "routes/green-innovation.tsx"),
-    "routes/innovation-basket.process-innovation.tsx"
-  ),
-  route(
-    "dashboard/innovation-basket/green-innovation",
-    "routes/green-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

@@ -1,17 +0,0 @@
-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>
-    );
-} 

package.json

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