From 065c9b56780ce7a0ef8516cb4477d703250ef0db Mon Sep 17 00:00:00 2001
From: MehrdadAdabi <126083584+mehrdadAdabi@users.noreply.github.com>
Date: Sun, 24 Aug 2025 10:43:28 +0330
Subject: [PATCH] feat: create progressbar for dialog

---
 .../digital-innovation-page.tsx               | 167 ++++++++++++++----
 1 file changed, 134 insertions(+), 33 deletions(-)

diff --git a/app/components/dashboard/project-management/digital-innovation-page.tsx b/app/components/dashboard/project-management/digital-innovation-page.tsx
index 10a6116..d7a4afe 100644
--- a/app/components/dashboard/project-management/digital-innovation-page.tsx
+++ b/app/components/dashboard/project-management/digital-innovation-page.tsx
@@ -41,6 +41,7 @@ import {
   LoaderCircle,
 } from "lucide-react";
 import { CustomBarChart } from "~/components/ui/custom-bar-chart";
+import { color } from "d3";
 
 moment.loadPersian({ usePersianDigits: true });
 
@@ -99,6 +100,18 @@ interface ProcessInnovationData {
   project_description: string;
 }
 
+interface HouseItem {
+  index: number;
+  color?: string;
+  style?: string;
+}
+
+interface ListItem {
+  label: string;
+  development: number;
+  house: HouseItem[];
+}
+
 const columns = [
   // { key: "select", label: "", sortable: false, width: "50px" },
   { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
@@ -472,35 +485,94 @@ export function DigitalInnovationPage() {
     return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
   };
 
-  const formatPercentage = (value: string | number) => {
-    if (!value) return "0%";
-    const numericValue = typeof value === "string" ? parseFloat(value) : value;
-    if (isNaN(numericValue)) return "0%";
-    return `${numericValue.toFixed(1)}%`;
-  };
+  // const formatPercentage = (value: string | number) => {
+  //   if (!value) return "0%";
+  //   const numericValue = typeof value === "string" ? parseFloat(value) : value;
+  //   if (isNaN(numericValue)) return "0%";
+  //   return `${numericValue.toFixed(1)}%`;
+  // };
 
-  const getStatusColor = (status: string) => {
-    switch (status?.toLowerCase()) {
-      case "فعال":
-        return "#3AEA83";
-      case "متوقف":
-        return "#F76276";
-      case "تکمیل شده":
-        return "#32CD32";
-      default:
-        return "#6B7280";
+  // const getStatusColor = (status: string) => {
+  //   switch (status?.toLowerCase()) {
+  //     case "فعال":
+  //       return "#3AEA83";
+  //     case "متوقف":
+  //       return "#F76276";
+  //     case "تکمیل شده":
+  //       return "#32CD32";
+  //     default:
+  //       return "#6B7280";
+  //   }
+  // };
+
+  // const getRatingColor = (rating: string) => {
+  //   const ratingNum = parseFloat(rating);
+  //   if (isNaN(ratingNum)) return "#6B7280";
+
+  //   if (ratingNum >= 8) return "#3AEA83";
+  //   if (ratingNum >= 6) return "#69C8EA";
+  //   if (ratingNum >= 4) return "#FFD700";
+  //   return "#F76276";
+  // };
+
+  const [list, setList] = useState<ListItem[]>([
+    {
+      label: "فرآیند1",
+      development: 40,
+      house: [],
+    },
+    {
+      label: "فرآیند2",
+      development: 30,
+      house: [],
+    },
+    {
+      label: "فرآیند3",
+      development: 40,
+      house: [],
+    },
+    {
+      label: "فرآیند4",
+      development: 50,
+      house: [],
+    },
+    {
+      label: "فرآیند5",
+      development: 91.6,
+      house: [],
+    },
+  ]);
+  const renderProgress = () => {
+    const total = 10;
+    for (let i = 0; i < list.length; i++) {
+      const currentElm = list[i];
+      currentElm.house = [];
+      const greenBoxes = Math.floor((total * currentElm.development) / 100);
+      const partialPercent =
+        (total * currentElm.development) / 100 - greenBoxes;
+      for (let j = 0; j < greenBoxes; j++) {
+        currentElm.house.push({
+          index: j,
+          color: "!bg-emerald-400",
+        });
+      }
+      if (partialPercent != 0 && greenBoxes != 10)
+        currentElm.house.push({
+          index: greenBoxes + 1,
+          style: `linear-gradient(
+            to right,
+            lch(87 118.17 147.55) 0%, 
+            lch(87 118.17 147.55) ${partialPercent * 100}%,
+            oklch(55.1% 0.027 264.364) ${partialPercent * 100}%,
+            oklch(55.1% 0.027 264.364) 100%
+          )`,
+        });
     }
   };
 
-  const getRatingColor = (rating: string) => {
-    const ratingNum = parseFloat(rating);
-    if (isNaN(ratingNum)) return "#6B7280";
-
-    if (ratingNum >= 8) return "#3AEA83";
-    if (ratingNum >= 6) return "#69C8EA";
-    if (ratingNum >= 4) return "#FFD700";
-    return "#F76276";
-  };
+  useEffect(() => {
+    renderProgress();
+  }, []);
 
   const renderCellContent = (item: any, column: any) => {
     const value = item[column.key as keyof ProcessInnovationData];
@@ -841,14 +913,14 @@ export function DigitalInnovationPage() {
 
       {/* Project Details Dialog */}
       <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-6xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-5xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>
             <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
               شرح پروژه
             </DialogTitle>
           </DialogHeader>
-          <div className="body grid grid-cols-[40%_20%_40%] gap-3">
-            <div className="border-l-2 border-l-gray-600 pl-6 ">
+          <div className="body grid grid-cols-[40%_20%_40%]">
+            <div className="border-l-2 border-l-gray-600 px-6">
               <span className="title text-lg font-bold">
                 توسعه فناوری جدید در تولید پلی‌اتیلن
               </span>
@@ -907,7 +979,7 @@ export function DigitalInnovationPage() {
                 </div>
               </div>
             </div>
-            <div className="digitalAbilityDevelopment flex flex-col gap-10 border-l-2 border-l-gray-600 pr-3">
+            <div className="digitalAbilityDevelopment flex flex-col gap-10 border-l-2 border-l-gray-600 pr-5">
               <div className="flex flex-col gap-4">
                 <span className="text-sm font-bold">
                   توسعه قابلیت های دیجیتال:{" "}
@@ -994,14 +1066,14 @@ export function DigitalInnovationPage() {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col">
-              <div className="costBoard mx-auto w-[calc(100%-5rem)]">
+            <div className="flex flex-col pr-7 gap-4">
+              <div className="costBoard mx-auto w-full">
                 <div className="board o border border-gray-600 rounded-xl overflow-hidden flex flex-col">
                   <span className="title bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">
                     کاهش هزینه ها
                   </span>
 
-                  <div className="content p-4 flex flex-row-reverse  gap-[50px] items-center">
+                  <div className="content p-4 flex flex-row-reverse gap-10  justify-center items-center">
                     <div className="flex flex-col gap-1">
                       <span className="text-emerald-400 font-bold text-3xl">
                         10%
@@ -1022,7 +1094,36 @@ export function DigitalInnovationPage() {
                   </div>
                 </div>
               </div>
-              <div></div>
+              <div className="processTabel  rounded-tr-lg rounded-tl-lg overflow-hidden box-border flex flex-col gap-3 w-full mx-auto">
+                <div className="text- header bg-[#3F415A] flex justify-between p-2">
+                  <span>عنوان فرآیند</span>
+                  <span>درصد پیشرفت</span>
+                </div>
+                <div className="rows flex flex-col gap-2">
+                  {list.map((el, index) => {
+                    return (
+                      <div className="row border-b-1 border-b-[#3F415A] pb-2 px-2  flex justify-between items-center last:border-none">
+                        <span className="pName">{el.label}</span>
+                        <div
+                          className="ProgressBar flex flex-row gap-1 rounded-md overflow-hidden"
+                          dir="ltr"
+                        >
+                          {Array.from({ length: 10 }, (_, i) => {
+                            return (
+                              <span
+                                className={`block bg-gray-500 w-1.5 h-6 ${el.house[i]?.color}`}
+                                style={{
+                                  background: el.house[i]?.style,
+                                }}
+                              ></span>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
             </div>
           </div>
         </DialogContent>