chure

feat: create page and component
2025-08-22 21:00:51 +03:30 · 2025-08-22 20:50:39 +03:30
9 changed files with 8022 additions and 107 deletions
--- a/app/components/dashboard/project-management/digital-innovation-page.tsx
+++ b/app/components/dashboard/project-management/digital-innovation-page.tsx
--- a/app/components/dashboard/project-management/process-innovation-page.tsx
+++ b/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 {
@ -169,7 +168,7 @@ export function ProcessInnovationPage() {
      title: "جلوگیری از توقفات تولید",
      value: formatNumber(
        stats.productionStopsPreventionSum.toFixed?.(1) ??
-          stats.productionStopsPreventionSum,
+        stats.productionStopsPreventionSum,
      ),
      description: "ظرفیت افزایش یافته",
      icon: <CirclePause />,
@ -199,7 +198,7 @@ export function ProcessInnovationPage() {
      title: "کاهش خرابیهای پرتکرار",
      value: formatNumber(
        stats.frequentFailuresReductionSum.toFixed?.(1) ??
-          stats.frequentFailuresReductionSum,
+        stats.frequentFailuresReductionSum,
      ),
      description: "مجموع درصد کاهش خرابی",
      icon: <Wrench />,
@ -402,7 +401,7 @@ export function ProcessInnovationPage() {
      if (typeof payload === "string") {
        try {
          payload = JSON.parse(payload);
-        } catch {}
+        } catch { }
      }

      const parseNum = (v: unknown): number => {
@ -575,67 +574,67 @@ 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>

@ -842,8 +841,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 +882,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 +897,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>
--- a/app/components/dashboard/sidebar.tsx
+++ b/app/components/dashboard/sidebar.tsx
@ -361,7 +361,7 @@ 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"
--- a/app/components/ui/custom-bar-chart.tsx
+++ b/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))}
--- a/app/routes.ts
+++ b/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"),
--- a/app/routes/digital-innovation-page.tsx
+++ b/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>
+    );
+} 
--- a/app/routes/project-management.tsx
+++ b/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: "مدیریت و نظارت بر پروژه‌های فناوری و نوآوری" },
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
  },
Author	SHA1	Message	Date
MehrdadAdabi	a00dd242e3	chure	2025-08-22 21:00:51 +03:30
MehrdadAdabi	911df127fd	feat: create page and component	2025-08-22 20:50:39 +03:30