Merge branch 'main' into feat/green-innovation

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);
   };
@@ -641,7 +639,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 className="p-4">
+            <CardContent >
               <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 ${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 }}>
+      <div className="border-b">
         {title && (
-        <h3 className="text-xl font-bold text-white font-persian text-right mb-4">
+          <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,8 +86,7 @@ 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}
@@ -96,8 +97,7 @@ 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,8 +110,7 @@ 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", className)}
+        className={cn("w-full caption-bottom text-sm h-full", className)}
         {...props}
       />
     </div>

app/routes.ts

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

@@ -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>
+    );
+} 

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"
   },