fix the api to handle the token expire things

FIGMA_LOGIN_IMPLEMENTATION.md

@@ -160,9 +160,9 @@ This document describes the exact implementation of the login page based on the
       onChange={(e) => setRememberMe(e.target.checked)}
       className="w-4 h-4 text-[#4FD1C7] bg-white border-gray-300 rounded focus:ring-[#4FD1C7] focus:ring-2 accent-[#4FD1C7]"
     />
-    // <Label htmlFor="remember" className="text-white text-sm font-persian cursor-pointer">
-    //   همیشه متصل بمانم
-    // </Label>
+    <Label htmlFor="remember" className="text-white text-sm font-persian cursor-pointer">
+      همیشه متصل بمانم
+    </Label>
   </div>
 
   {/* Submit Button */}

app/app.css

@@ -1,7 +1,13 @@
-@import url(/font/fontiran.css);
 @import "tailwindcss";
 
+/* Persian/Farsi font support */
+@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap");
+
 @theme {
+  --font-sans:
+    "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
   /* Teal color scale */
   --color-teal-50: #f0fdfa;
   --color-teal-100: #ccfbf1;
@@ -27,38 +33,17 @@
   --color-slate-800: #1e293b;
   --color-slate-900: #0f172a;
   --color-slate-950: #020617;
-
-  --color-pr-green: #3aea83;
-  --color-pr-blue: #69c8ea;
-  --color-pr-red: #f76276;
-  --color-pr-gray: #3f415a;
 }
 
 html,
 body {
   @apply bg-background text-foreground;
+
   @media (prefers-color-scheme: dark) {
     color-scheme: dark;
   }
 }
 
-body {
-  font-family: IRANYekanX;
-  direction: rtl;
-  background-color: #cdcdcd;
-  margin: 0;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-input,
-textarea {
-  font-family: IRANYekanX;
-}
-
 /* RTL Support */
 html[dir="rtl"] {
   direction: rtl;
@@ -78,7 +63,6 @@ html[dir="rtl"] body {
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
-  --color-dark-blue: var(--dark-blue);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
@@ -98,13 +82,9 @@ html[dir="rtl"] body {
 :root {
   --radius: 0.5rem;
 
-  --color-green: #3aea83;
-  --color-blue: #69c8ea;
-  --color-red: #f76276;
-
   /* primary colors */
-  --color-pr-gray: #3f415a;
-  --color-pr-green: var(--color-green);
+  --color-pr-gray : #3F415A;
+  --color-pr-green :#3AEA83;
 
   /* Light theme colors */
   --background: #ffffff;
@@ -126,7 +106,6 @@ html[dir="rtl"] body {
   --border: #e5e5e5;
   --input: #e5e5e5;
   --ring: #22c55e;
-  --dark-blue: #33364d;
 
   /* Primary color scale */
   --color-primary-50: #f0fdf4;
@@ -222,7 +201,7 @@ html[dir="rtl"] body {
   --color-dark-950: #020617;
 
   /* Login specific colors */
-  --color-login-primary: var(--color-green);
+  --color-login-primary: #3aea83;
   --color-login-dark-start: #464861;
   --color-login-dark-end: #111628;
 }
@@ -258,11 +237,29 @@ html[dir="rtl"] body {
   body {
     @apply bg-background text-foreground;
   }
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-neutral-100 dark:bg-neutral-800;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-neutral-300 dark:bg-neutral-600 rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-neutral-400 dark:bg-neutral-500;
+  }
 }
 
 /* Persian/Farsi font class */
 .font-persian {
-  font-family: "IRANYekanX";
+  font-family: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
 }
 
 /* Custom utility classes */
@@ -422,73 +419,25 @@ html[dir="rtl"] body {
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: linear-gradient(
-    to bottom,
-    rgba(16, 185, 129, 0.6),
-    rgba(16, 185, 129, 0.9)
-  ); /* emerald */
+  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.9)); /* emerald */
   border-radius: 9999px;
-  border: 0.5px solid transparent;
+  border: .5px solid transparent;
   background-clip: padding-box;
 }
 
 .custom-scrollbar:hover::-webkit-scrollbar-thumb {
+  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.8), rgba(16, 185, 129, 1));
 }
 
 .dark .custom-scrollbar {
+  scrollbar-color: rgba(16, 185, 129, 0.6) rgba(30, 41, 59, 0.6); /* thumb track */
 }
 
 .dark .custom-scrollbar::-webkit-scrollbar-track {
+  background: rgba(30, 41, 59, 0.6); /* slate-800 */
 }
 
 .dark .custom-scrollbar::-webkit-scrollbar-thumb {
-}
-
-:root {
-  --form-control-color: #3f415a;
-  --form-control-disabled: ##5f6284;
-  --form-background: #3aea83;
-}
-
-input[type="checkbox"] {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-  font: inherit;
-  color: #5f6284;
-  background-color: transparent;
-  width: 1.15em;
-  height: 1.15em;
-  border: 1px solid #5f6284;
-  border-radius: 0.15em;
-  transform: translateY(-0.075em);
-  display: grid;
-  place-content: center;
-  cursor: pointer;
-}
-
-input[type="checkbox"]::before {
-  content: "";
-  width: 0.65em;
-  height: 0.65em;
-  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-  transform: scale(0);
-  transform-origin: bottom left;
-  transition: 120ms transform ease-in-out;
-  box-shadow: inset 1em 1em var(--form-control-color);
-}
-
-input[type="checkbox"]:checked::before {
-  transform: scale(1);
-}
-
-input[type="checkbox"]:checked {
-  background-color: #3aea83;
-  border: 1px solid transparent;
-}
-
-input[type="checkbox"]:disabled {
-  --form-control-color: var(--form-control-disabled);
-  color: var(--form-control-disabled);
-  cursor: not-allowed;
+  background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.9));
+  border-color: rgba(30, 41, 59, 0.6);
 }

app/components/auth/login-form.tsx

@@ -176,23 +176,23 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
             />
 
             {/* Remember Me Checkbox */}
-            {/* <div className="flex justify-end">
+            <div className="flex justify-end">
               <CheckboxField
                 id="remember"
-                label="همیشه متصل بمان"
+                label="همیشه متصل بمانم"
                 checked={formData.rememberMe}
                 onChange={(checked) => updateField("rememberMe", checked)}
                 disabled={isLoading}
                 size="md"
               />
-            </div> */}
+            </div>
 
             {/* Login Button */}
             <Button
               type="submit"
               disabled={isLoading || isConnectionError}
               size="lg"
-              className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 text-base font-semibold"
+              className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 font-bold"
             >
               {isLoading ? (
                 <>
@@ -212,10 +212,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
       {/* Right Side - Branding */}
       <LoginSidebar>
         <LoginBranding
-          brandName="پتروشیمی آپادانا"
-          // brandName="پتروشیمی نوری"
-          // brandName="پتروشیمی بندر امام"
-          engSub="Inception by Fara"
+          brandName="پتروشیمی بندر امام"
           companyName="توسعه‌یافته توسط شرکت رهپویان دانش و فناوری فرا"
           logo={<img src="/brand2.svg"/>}
         />

app/components/auth/login-layout.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { cn } from "~/lib/utils";
 
-
 interface LoginLayoutProps {
   children: React.ReactNode;
   className?: string;
@@ -76,12 +75,12 @@ export function LoginHeader({
   return (
     <div className={cn(" space-y-4 flex text-right flex-col", className)}>
       <div className="space-y-2">
-        <h1 className="text-white text-base font-medium font-persian">{title}</h1>
-        <h2 className="text-white text-3xl sm:text-3xl font-bold font-persian leading-relaxed">
+        <h1 className="text-white text-lg font-medium font-persian">{title}</h1>
+        <h2 className="text-white text-2xl sm:text-3xl font-bold font-persian leading-relaxed">
           {subtitle}
         </h2>
         {description && (
-          <p className="text-slate-300 text-sm text-[#ACACAC] font-persian leading-relaxed  mx-auto">
+          <p className="text-slate-300 text-sm font-persian leading-relaxed  mx-auto">
             {description}
           </p>
         )}
@@ -95,7 +94,6 @@ interface LoginBrandingProps {
   companyName: string;
   logo?: React.ReactNode;
   className?: string;
-  engSub ?: string;
 }
 
 export function LoginBranding({
@@ -103,35 +101,22 @@ export function LoginBranding({
   companyName,
   logo,
   className,
-  engSub
 }: LoginBrandingProps) {
   return (
     <>
-<div className="flex justify-end">
-  <div className="text-slate-800 font-persian">
-    <div className="text-lg font-bold leading-tight">
-      <img 
-        src="/brand.svg?v=1" 
-        alt="Brand Logo"
-        className="w-auto h-16" // اضافه کردن سایز مشخص
-        onError={(e) => {
-          e.target.style.display = 'none';
-          console.log('Image failed to load');
-        }}
-      />
-    </div>
-  </div>
-</div>
-
-
-
-
+      {/* Top Logo */}
+      <div className="flex justify-end">
+        <div className="text-slate-800 font-persian">
+          <div className="text-lg font-bold leading-tight">
+           <img src="/brand.svg" />
+          </div>
+        </div>
+      </div>
 
       {/* Bottom Section */}
       <div className="flex flex-col gap-2 mb-4 items-end justify-end">
         {logo && <div className="flex items-center">{logo}</div>}
-        <h3 className="text-[#3F415A] text-sm font-persian font-light leading-relaxed max-w-xs">{engSub}</h3>
-        <div className="text-[#3F415A] text-sm font-persian leading-relaxed font-light max-w-xs">
+        <div className="text-slate-800 text-sm font-persian leading-relaxed max-w-xs">
           {companyName}
         </div>
         {/* Logo */}

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

@@ -1,6 +1,3 @@
-//این فایل مخصوص
-//شماتیک آپادانا
-
 import React from "react";
 import { formatNumber } from "~/lib/utils";
 
@@ -11,10 +8,10 @@ export type CompanyInfo = {
   costReduction: number;
   revenue?: number;
   capacity?: number;
-  costI: number;
-  capacityI: number;
-  revenueI: number;
-  cost: number | string;
+  costI : number,
+  capacityI : number,
+  revenueI : number,
+  cost : number | string, 
 };
 
 export type D3ImageInfoProps = {
@@ -23,91 +20,69 @@ export type D3ImageInfoProps = {
   height?: number;
 };
 
-const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => {
-  // const hideCapacity = company.name === "واحد 300"; // اگر واحد 300 بود ظرفیت مخفی شود
-  const hideCapacity = false;
+const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
   return (
-    <div className={`info-box`} style={style}>
+    <div className={`info-box`}  style={style}>
       <div className="info-box-content">
         <div className="info-row">
           <div className="info-label">درآمد:</div>
-          <div className="info-value revenue text-[12px]">{formatNumber(company?.revenue || 0)}</div>
+          <div className="info-value revenue">{formatNumber(company?.revenue || 0)}</div>
           <div className="info-unit">میلیون ریال</div>
         </div>
         <div className="info-row">
           <div className="info-label">هزینه:</div>
-          {hideCapacity ? (
-            <div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
-          ) : (
-            <div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
-          )}
+          <div className="info-value cost">{formatNumber(company?.cost || 0)}</div>
           <div className="info-unit">میلیون ریال</div>
         </div>
-        {!hideCapacity && (
-          <div className="info-row">
-            <div className="info-label">ظرفیت:</div>
-            <div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
-            <div className="info-unit">تن در سال</div>
-          </div>
-        )}
+        <div className="info-row">
+          <div className="info-label">ظرفیت:</div>
+          <div className="info-value capacity">{formatNumber(company?.capacity || 0)}</div>
+          <div className="info-unit">تن در سال</div>
+        </div>
       </div>
     </div>
   );
 };
 
 export function D3ImageInfo({ companies }: D3ImageInfoProps) {
-  // واحدهای جدید - 4 واحد
-  const sample = [
-    { id: "واحد 100", name: "واحد 100", imageUrl: "/abniro.png" },
-    { id: "واحد 200", name: "واحد 200", imageUrl: "/besparan.png" },
-    { id: "واحد 300", name: "واحد 300", imageUrl: "/khwarazmi.png" },
-    { id: "واحد 400", name: "واحد 400", imageUrl: "/faravash1.png" }
-  ];
+  // Ensure we have exactly 6 companies
+  const displayCompanies = companies;
 
-
-
-  const merged = sample.map(company => {
-    const found = companies.find(item => item.id === company.id);
-    return found
-      ? found
-      : { ...company, cost: 0, capacity: 0, revenue: 0, costReduction: 0, costI: 0, capacityI: 0, revenueI: 0 };
-  });
-
-  const displayCompanies = merged;
-  console.log(displayCompanies);
-
-  // موقعیت‌های جدید برای چیدمان لوزی شکل (3 ردیف - 1-2-1)
-  // گرید 5x4 نگه داشته شده اما موقعیت‌ها تغییر کرده
+  // Positions inside a 5x4 grid (col, row)
+  // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
   const gridPositions = [
-    { col: 2, row: 1, colI: 1, rowI: 1, name: "واحد 100" }, // ردیف اول - ستون اول
-    { col: 4, row: 1, colI: 5, rowI: 1, name: "واحد 200" }, // ردیف اول - ستون دوم
-    { col: 2, row: 3, colI: 1, rowI: 3, name: "واحد 300" }, // ردیف دوم - ستون اول
-    { col: 4, row: 3, colI: 5, rowI: 3, name: "واحد 400" }, // ردیف دوم - ستون دوم
+    { col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band
+    { col: 3, row: 2  , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1)
+    { col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band
+    { col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band
+    { col: 3, row: 3 ,  colI : 3, rowI : 4  , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4)
+    { col: 4, row: 3  ,  colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band
   ];
-
+  
   return (
-    <div className="w-full h-[500px] rounded-xl">
+    <div className="w-full h-[500px] rounded-xl p-4">
       <div dir="ltr" className="company-grid-container">
         {displayCompanies.map((company, index) => {
-          const gp = gridPositions.find(v => v.name === company.name);
+          const gp  = gridPositions.find(v => v.name === company.name)  ;
           return (
-            <React.Fragment key={company.id}>
-              <div
-                className={`company-item`}
-                style={{ gridColumn: gp?.col, gridRow: gp?.row }}
-              >
-                <div className="company-image-container">
-                  <img
-                    src={company.imageUrl}
-                    alt={company.name}
-                    className="company-image"
-                  />
-                </div>
-                {company.name}
+          <>
+            <div
+              key={company.id}
+              className={`company-item`}
+              style={{ gridColumn: gp.col, gridRow: gp.row }}
+            >
+              <div className="company-image-containe">
+                <img 
+                  src={company.imageUrl} 
+                  alt={company.name} 
+                  className="company-image" 
+                />
               </div>
-              <InfoBox company={company} style={{ gridColumn: gp?.colI, gridRow: gp?.rowI }} />
-            </React.Fragment>
-          );
+
+              {company.name}
+            </div>
+              <InfoBox company={company} key={index +10} style={{ gridColumn: gp?.colI , gridRow: gp?.rowI  }}  />
+          </>);
         })}
       </div>
 
@@ -139,73 +114,68 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
 
         .company-image {
           object-fit: contain;
-          height: 100px;
+          height : 100px;
         }
 
         .info-box {
           border: 1px solid #3F415A;
           border-radius: 10px;
           height: max-content;
-          align-self: center;
-          justify-self: center;
-          padding: .2rem 1.2rem;
-          min-width: 8rem;
+align-self : center;
+justify-self : center;
+padding : .2rem 0 ;
           background-color: transparent;
         }
 
+
         .info-box-content {
           display: flex;
           flex-direction: column;
-          justify-content: center;
+          justify-content: space-around;
         }
 
         .info-row {
-          position: relative;
-          margin: .1rem 0;
+          position : relative;
+          margin: 0rem 1rem;
           display: flex;
-          gap: .5rem;
-          justify-content: space-between;
+          gap : 1rem;
+          justify-content : space-between;
+          padding: 0rem .8rem;
           direction: rtl;
-        }
 
-        .info-row:has(.info-value.revenue) {
-          border-bottom: 1px solid #3AEA83;
-        }
+          &:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;}
+          &:has(.info-value.cost) {border-bottom: 1px solid #F76276;}
 
-        .info-row:has(.info-value.cost) {
-          border-bottom: 1px solid #F76276;
         }
 
         .info-label {
           color: #FFFFFF;
-          font-size: 11px;
-          font-weight: 300;
+          font-size: 12px;
+          font-weight: 400;
           text-align: right;
-          margin: auto 0;
         }
 
         .info-value {
           color: #34D399;
           font-size: 14px;
-          font-weight: 500;
+          font-weight: 600;
           text-align: right;
-          margin-bottom: .5rem;
+          margin-bottom : .5rem;
         }
 
-        .info-value.revenue { color: #fff; }
+        .info-value.revenue { color: #fff;}
         .info-value.cost { color: #fff; }
-        .info-value.cost2 { color: #fff; }
         .info-value.capacity { color: #fff; }
 
         .info-unit {
           position: absolute;
-          left: 0;
-          bottom: 2px;
-          color: #ACACAC;
-          font-size: 6px;
+          left: 12px;
+          bottom: 0;
+          color: #9CA3AF;
+          font-size: 8px;
           font-weight: 400;
         }
       `}</style>
     </div>
   );
-}
+}

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

@@ -1,213 +0,0 @@
-//این فایل مخصوص
-//شماتیک بندر امام
-import React from "react";
-import { formatNumber } from "~/lib/utils";
-
-export type CompanyInfo = {
-  id: string;
-  imageUrl: string;
-  name: string;
-  costReduction: number;
-  revenue?: number;
-  capacity?: number;
-  costI : number,
-  capacityI : number,
-  revenueI : number,
-  cost : number | string,
-};
-
-export type D3ImageInfoProps = {
-  companies: CompanyInfo[];
-  width?: number;
-  height?: number;
-};
-
-const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
-  const hideCapacity = company.name === "خوارزمی"; // اگر خوارزمی بود ظرفیت مخفی شود
-  return (
-    <div className={`info-box`}  style={style}>
-      <div className="info-box-content">
-        <div className="info-row">
-          <div className="info-label">درآمد:</div>
-          <div className="info-value revenue text-[12px]">{formatNumber(company?.revenue || 0)}</div>
-          <div className="info-unit">میلیون ریال</div>
-        </div>
-        <div className="info-row">
-          <div className="info-label">هزینه:</div>
-          {
-            (hideCapacity ? 
-              
-          <div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
-          :
-          <div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
-             )
-
-          }
-          <div className="info-unit">میلیون ریال</div>
-        </div>
-        {!hideCapacity && (
-          <div className="info-row">
-            <div className="info-label">ظرفیت:</div>
-            <div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
-            <div className="info-unit">تن در سال</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export function D3ImageInfo({ companies }: D3ImageInfoProps) {
-  // Ensure we have exactly 6 companies
-
-  const sample = [
-    { id: "آب نیرو", name: "آب نیرو", imageUrl: "/abniro.png" },
-    { id: "بسپاران", name: "بسپاران", imageUrl: "/besparan.png" },
-    { id: "خوارزمی", name: "خوارزمی", imageUrl: "/khwarazmi.png" },
-    { id: "فراورش 1", name: "فراورش 1", imageUrl: "/faravash1.png" },
-    { id: "فراورش 2", name: "فراورش 2", imageUrl: "/faravash2.png" },
-    { id: "کیمیا", name: "کیمیا", imageUrl: "/kimia.png" }
-  ];
-  const merged = sample.map(company => {
-    const found = companies.find(item => item.id == company.id);
-    return found
-      ? found
-      : { ...company, cost: 0, capacity: 0, revenue: 0 };
-  });
-
-  const displayCompanies = merged;
-  console.log(displayCompanies)
-
-  // Positions inside a 5x4 grid (col, row)
-  // Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
-  const gridPositions = [
-    { col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band
-    { col: 3, row: 2  , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1)
-    { col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band
-    { col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band
-    { col: 3, row: 3 ,  colI : 3, rowI : 4  , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4)
-    { col: 4, row: 3  ,  colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band
-  ];
-
-  return (
-    <div className="w-full h-[500px] rounded-xl">
-      <div dir="ltr" className="company-grid-container">
-        {displayCompanies.map((company, index) => {
-          const gp  = gridPositions.find(v => v.name === company.name)  ;
-          return (
-          <>
-            <div
-              key={company.id}
-              className={`company-item`}
-              style={{ gridColumn: gp.col, gridRow: gp.row }}
-            >
-              <div className="company-image-containe">
-                <img
-                  src={company.imageUrl}
-                  alt={company.name}
-                  className="company-image"
-                />
-              </div>
-
-              {company.name}
-            </div>
-              <InfoBox company={company} key={index +10} style={{ gridColumn: gp?.colI , gridRow: gp?.rowI  }}  />
-          </>);
-        })}
-      </div>
-
-      <style jsx>{`
-        .company-grid-container {
-          display: grid;
-          grid-template-columns: repeat(5, 1fr);
-          grid-template-rows: repeat(4, 1fr);
-          gap: 5px;
-          width: 100%;
-          height: 500px;
-        }
-
-        .company-item {
-          border-radius: 8px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .company-image-container {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-          height: 100%;
-        }
-
-        .company-image {
-          object-fit: contain;
-          height : 100px;
-        }
-
-        .info-box {
-          border: 1px solid #3F415A;
-          border-radius: 10px;
-          height: max-content;
-          align-self : center;
-          justify-self : center;
-          padding : .2rem 1.2rem;
-          min-width : 8rem;
-          background-color: transparent;
-        }
-
-
-        .info-box-content {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-
-        .info-row {
-          position : relative;
-          margin: .1rem 0;
-          display: flex;
-          gap : .5rem;
-          justify-content : space-between;
-          direction: rtl;
-
-          &:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;}
-          &:has(.info-value.cost) {border-bottom: 1px solid #F76276;}
-
-        }
-
-        .info-label {
-          color: #FFFFFF;
-          font-size: 11px;
-          font-weight: 300;
-          text-align: right;
-          margin : auto 0;
-        }
-
-        .info-value {
-          color: #34D399;
-          font-size: 14px;
-          font-weight: 500;
-          text-align: right;
-          margin-bottom : .5rem;
-        }
-
-        .info-value.revenue { color: #fff;}
-        .info-value.cost { color: #fff; }
-        .info-value.cost2 { color: #fff; }
-        .info-value.capacity { color: #fff; }
-
-        .info-unit {
-          position: absolute;
-          left: 0;
-          bottom: 2px;
-          color: #ACACAC;
-          font-size: 6px;
-          font-weight: 400;
-        }
-      `}</style>
-    </div>
-  );
-}

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

@@ -1,211 +0,0 @@
-//این فایل مخصوص
-//شماتیک نوری
-
-import React from "react";
-import { formatNumber } from "~/lib/utils";
-
-export type CompanyInfo = {
-  id: string;
-  imageUrl: string;
-  name: string;
-  costReduction: number;
-  revenue?: number;
-  capacity?: number;
-  costI: number;
-  capacityI: number;
-  revenueI: number;
-  cost: number | string;
-};
-
-export type D3ImageInfoProps = {
-  companies: CompanyInfo[];
-  width?: number;
-  height?: number;
-};
-
-const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => {
-  // const hideCapacity = company.name === "واحد 300"; // اگر واحد 300 بود ظرفیت مخفی شود
-  const hideCapacity = false;
-  return (
-    <div className={`info-box`} style={style}>
-      <div className="info-box-content">
-        <div className="info-row">
-          <div className="info-label">درآمد:</div>
-          <div className="info-value revenue text-[12px]">{formatNumber(company?.revenue || 0)}</div>
-          <div className="info-unit">میلیون ریال</div>
-        </div>
-        <div className="info-row">
-          <div className="info-label">هزینه:</div>
-          {hideCapacity ? (
-            <div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
-          ) : (
-            <div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
-          )}
-          <div className="info-unit">میلیون ریال</div>
-        </div>
-        {!hideCapacity && (
-          <div className="info-row">
-            <div className="info-label">ظرفیت:</div>
-            <div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
-            <div className="info-unit">تن در سال</div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export function D3ImageInfo({ companies }: D3ImageInfoProps) {
-  // واحدهای جدید - 4 واحد
-  const sample = [
-    { id: "واحد 100", name: "واحد 100", imageUrl: "/abniro.png" },
-    { id: "واحد 200", name: "واحد 200", imageUrl: "/besparan.png" },
-    { id: "واحد 300", name: "واحد 300", imageUrl: "/khwarazmi.png" },
-    { id: "واحد 400", name: "واحد 400", imageUrl: "/faravash1.png" }
-  ];
-
-
-
-  const merged = sample.map(company => {
-    const found = companies.find(item => item.id === company.id);
-    return found
-      ? found
-      : { ...company, cost: 0, capacity: 0, revenue: 0, costReduction: 0, costI: 0, capacityI: 0, revenueI: 0 };
-  });
-
-  const displayCompanies = merged;
-  console.log(displayCompanies);
-
-  // موقعیت‌های جدید برای چیدمان لوزی شکل (3 ردیف - 1-2-1)
-  // گرید 5x4 نگه داشته شده اما موقعیت‌ها تغییر کرده
-  const gridPositions = [
-    { col: 2, row: 1, colI: 1, rowI: 1, name: "واحد 100" }, // ردیف اول - ستون اول
-    { col: 4, row: 1, colI: 5, rowI: 1, name: "واحد 200" }, // ردیف اول - ستون دوم
-    { col: 2, row: 3, colI: 1, rowI: 3, name: "واحد 300" }, // ردیف دوم - ستون اول
-    { col: 4, row: 3, colI: 5, rowI: 3, name: "واحد 400" }, // ردیف دوم - ستون دوم
-  ];
-
-  return (
-    <div className="w-full h-[500px] rounded-xl">
-      <div dir="ltr" className="company-grid-container">
-        {displayCompanies.map((company, index) => {
-          const gp = gridPositions.find(v => v.name === company.name);
-          return (
-            <React.Fragment key={company.id}>
-              <div
-                className={`company-item`}
-                style={{ gridColumn: gp?.col, gridRow: gp?.row }}
-              >
-                <div className="company-image-container">
-                  <img
-                    src={company.imageUrl}
-                    alt={company.name}
-                    className="company-image"
-                  />
-                </div>
-                {company.name}
-              </div>
-              <InfoBox company={company} style={{ gridColumn: gp?.colI, gridRow: gp?.rowI }} />
-            </React.Fragment>
-          );
-        })}
-      </div>
-
-      <style jsx>{`
-        .company-grid-container {
-          display: grid;
-          grid-template-columns: repeat(5, 1fr);
-          grid-template-rows: repeat(4, 1fr);
-          gap: 5px;
-          width: 100%;
-          height: 500px;
-        }
-
-        .company-item {
-          border-radius: 8px;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .company-image-container {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 100%;
-          height: 100%;
-        }
-
-        .company-image {
-          object-fit: contain;
-          height: 100px;
-        }
-
-        .info-box {
-          border: 1px solid #3F415A;
-          border-radius: 10px;
-          height: max-content;
-          align-self: center;
-          justify-self: center;
-          padding: .2rem 1.2rem;
-          min-width: 8rem;
-          background-color: transparent;
-        }
-
-        .info-box-content {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-        }
-
-        .info-row {
-          position: relative;
-          margin: .1rem 0;
-          display: flex;
-          gap: .5rem;
-          justify-content: space-between;
-          direction: rtl;
-        }
-
-        .info-row:has(.info-value.revenue) {
-          border-bottom: 1px solid #3AEA83;
-        }
-
-        .info-row:has(.info-value.cost) {
-          border-bottom: 1px solid #F76276;
-        }
-
-        .info-label {
-          color: #FFFFFF;
-          font-size: 11px;
-          font-weight: 300;
-          text-align: right;
-          margin: auto 0;
-        }
-
-        .info-value {
-          color: #34D399;
-          font-size: 14px;
-          font-weight: 500;
-          text-align: right;
-          margin-bottom: .5rem;
-        }
-
-        .info-value.revenue { color: #fff; }
-        .info-value.cost { color: #fff; }
-        .info-value.cost2 { color: #fff; }
-        .info-value.capacity { color: #fff; }
-
-        .info-unit {
-          position: absolute;
-          left: 0;
-          bottom: 2px;
-          color: #ACACAC;
-          font-size: 6px;
-          font-weight: 400;
-        }
-      `}</style>
-    </div>
-  );
-}

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

@@ -1,10 +1,5 @@
 import React from "react";
 import { formatNumber } from "~/lib/utils";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "~/components/ui/tooltip"
 
 interface DataItem {
   label: string;
@@ -26,7 +21,7 @@ export function DashboardCustomBarChart({
   if (loading) {
     return (
       <div className="w-full">
-        <h3 className="text-sm font-bold text-white font-persian mb-4 text-right border-b-2 border-gray-500/20 pb-3">
+        <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">
@@ -45,7 +40,7 @@ export function DashboardCustomBarChart({
 
   return (
     <div className="w-full">
-      <h3 className="text-sm font-bold text-white font-persian mb-6 py-2 px-4 text-right border-b-2 border-gray-500/20">
+      <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">
@@ -56,34 +51,19 @@ export function DashboardCustomBarChart({
           return (
             <div key={index} className="relative">
               {/* Bar container */}
-              <div className="flex-row-reverse items-center gap-2 flex min-h-6 h-10 rounded-lg overflow-hidden">
+              <div className="relative min-h-6 h-10 rounded-lg overflow-hidden">
                 {/* Animated bar */}
                 <div
-                  className={`h-auto gap-2 overflow-hidden ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
+                  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}%` }}
                 >
-                  { widthPercentage > 20 ? (
-                  <span className="text-[#3F415A] min-w-max text-left font-persian font-medium text-sm py-1 w-max">
-                    {item.label}
-                  </span>
-                  ) : (
-                  <Tooltip>
-                        <TooltipTrigger  className={`${item.color}`} asChild>
-                          <span className="text-[#3F415A]  text-left font-persian font-medium text-sm py-1">
-                           <span className="invisible">""</span>
-                                            </span>
-
-                        </TooltipTrigger>
-                        <TooltipContent className={`${item.color} ${item.color.replace("bg","fill")}`}>
-                          <p className="font-persian text-sm">{item.label}</p>
-                        </TooltipContent>
-
-                      </Tooltip>
-                ) }
-                </div>
                   <span className="text-white font-bold text-base">
                     {formatNumber(item.value)}
                   </span>
+                  <span className="text-[#3F415A] font-persian font-medium text-sm w-max">
+                    {item.label}
+                  </span>
+                </div>
               </div>
             </div>
           );

app/components/dashboard/header.tsx

@@ -1,403 +1,42 @@
-import { saveAs } from "file-saver";
-import jalaali from "jalaali-js";
-import {
-  Calendar,
-  ChevronLeft,
-  FileChartColumnIncreasing,
-  Menu,
-  PanelLeft,
-  Server,
-  User,
-} from "lucide-react";
-import React, { useEffect, useRef, useState } from "react";
-import { useLocation } from "react-router";
-import XLSX from "xlsx-js-style";
-import { Button } from "~/components/ui/button";
-import { Calendar as CustomCalendar } from "~/components/ui/Calendar";
+import { useEffect, useState } from "react";
 import { useAuth } from "~/contexts/auth-context";
-import apiService from "~/lib/api";
-import { cn, EventBus, handleDataValue } from "~/lib/utils";
+import { Link } from "react-router";
+import { cn } from "~/lib/utils";
+import { Button } from "~/components/ui/button";
+import {
+  PanelLeft,
+  Search,
+  Bell,
+  Settings,
+  User,
+  Moon,
+  Sun,
+  Menu,
+  ChevronDown,
+  Globe,
+  HelpCircle,
+} from "lucide-react";
 
 interface HeaderProps {
   onToggleSidebar?: () => void;
   className?: string;
   title?: string;
-  titleIcon?: React.ComponentType<{ className?: string }> | null;
 }
 
-interface MonthItem {
-  id: string;
-  label: string;
-  start: string;
-  end: string;
-}
-
-interface CurrentDay {
-  start?: string;
-  end?: string;
-  sinceMonth?: string;
-  fromMonth?: string;
-}
-
-interface SelectedDate {
-  since?: number;
-  until?: number;
-}
-
-const monthList: Array<MonthItem> = [
-  {
-    id: "month-1",
-    label: "بهار",
-    start: "01/01",
-    end: "03/31",
-  },
-  {
-    id: "month-2",
-    label: "تابستان",
-    start: "04/01",
-    end: "06/31",
-  },
-  {
-    id: "month-3",
-    label: "پاییز",
-    start: "07/01",
-    end: "09/31",
-  },
-  {
-    id: "month-4",
-    label: "زمستان",
-    start: "10/01",
-    end: "12/30",
-  },
-];
-
-const columns: Array<any> = [
-  { key: "title", label: "عنوان پروژه", sortable: true, width: "300px" },
-  {
-    key: "importance_project",
-    label: "میزان اهمیت",
-    sortable: true,
-    width: "160px",
-  },
-  {
-    key: "strategic_theme",
-    label: "مضمون راهبردی",
-    sortable: true,
-    width: "200px",
-  },
-  {
-    key: "value_technology_and_innovation",
-    label: "ارزش فناوری و نوآوری",
-    sortable: true,
-    width: "220px",
-  },
-  {
-    key: "type_of_innovation",
-    label: "انواع نوآوری",
-    sortable: true,
-    width: "160px",
-  },
-  {
-    key: "innovation",
-    label: "میزان نوآوری",
-    sortable: true,
-    width: "140px",
-  },
-  {
-    key: "person_executing",
-    label: "مسئول اجرا",
-    sortable: true,
-    width: "180px",
-  },
-  {
-    key: "excellent_observer",
-    label: "ناطر عالی",
-    sortable: true,
-    width: "180px",
-  },
-  { key: "observer", label: "ناظر پروژه", sortable: true, width: "180px" },
-  { key: "moderator", label: "مجری", sortable: true, width: "180px" },
-  {
-    key: "executive_phase",
-    label: "فاز اجرایی",
-    sortable: true,
-    width: "160px",
-  },
-  {
-    key: "start_date",
-    label: "تاریخ شروع",
-    sortable: true,
-    width: "120px",
-  },
-  {
-    key: "remaining_time",
-    label: "زمان باقی مانده",
-    sortable: true,
-    width: "140px",
-    computed: true,
-  },
-  {
-    key: "end_date",
-    label: "تاریخ پایان (برنامه‌ریزی)",
-    sortable: true,
-    width: "160px",
-  },
-  {
-    key: "renewed_duration",
-    label: "مدت زمان تمدید",
-    sortable: true,
-    width: "140px",
-  },
-  {
-    key: "done_date",
-    label: "تاریخ پایان (واقعی)",
-    sortable: true,
-    width: "160px",
-  },
-  {
-    key: "deviation_from_program",
-    label: "متوسط انحراف برنامه‌ای",
-    sortable: true,
-    width: "160px",
-  },
-  {
-    key: "approved_budget",
-    label: "بودجه مصوب",
-    sortable: true,
-    width: "150px",
-  },
-  {
-    key: "budget_spent",
-    label: "بودجه صرف شده",
-    sortable: true,
-    width: "150px",
-  },
-  {
-    key: "cost_deviation",
-    label: "متوسط انحراف هزینه‌ای",
-    sortable: true,
-    width: "160px",
-  },
-];
-
 export function Header({
   onToggleSidebar,
   className,
   title = "صفحه اول",
-  titleIcon,
 }: HeaderProps) {
   const { user } = useAuth();
-  const { jy } = jalaali.toJalaali(new Date());
-
-  const calendarRef = useRef<HTMLDivElement>(null);
-  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState<boolean>(false);
-  const [isNotificationOpen, setIsNotificationOpen] = useState<boolean>(false);
-  const [openCalendar, setOpenCalendar] = useState<boolean>(false);
-  const [excelLoading, setExcelLoading] = useState<boolean>(false);
-  const location = useLocation();
-  const projectManagerRoute = "/dashboard/project-management";
-  const [currentYear, setCurrentYear] = useState<SelectedDate>({
-    since: jy,
-    until: jy,
-  });
-
-  const [selectedDate, setSelectedDate] = useState<CurrentDay>({});
-
-  useEffect(() => {
-    const storedDate = localStorage.getItem("dateSelected");
-    if (storedDate) {
-      const parsedDate = JSON.parse(storedDate);
-      setSelectedDate(parsedDate);
-
-      const sinceYear = parsedDate.start
-        ? parseInt(parsedDate.start.split("/")[0], 10)
-        : jy;
-      const untilYear = parsedDate.end
-        ? parseInt(parsedDate.end.split("/")[0], 10)
-        : jy;
-
-      setCurrentYear({ since: sinceYear, until: untilYear });
-    } else {
-      const defaultDate = {
-        sinceMonth: "بهار",
-        fromMonth: "زمستان",
-        start: `${jy}/01/01`,
-        end: `${jy}/12/30`,
-      };
-      setSelectedDate(defaultDate);
-      localStorage.setItem("dateSelected", JSON.stringify(defaultDate));
-      setCurrentYear({ since: jy, until: jy });
-    }
-  }, []);
-
-  const redirectHandler = async () => {
-    try {
-      const getData = await apiService.post("/GenerateSsoCode");
-
-      //بندر امام
-      // const url = `https://inogen-bpms.pelekan.org/redirect/${getData.data}`;
-      //آپادانا
-      const url = `https://APADANA-IATM-bpms.pelekan.org/redirect/${getData.data}`;
-      //نوری
-      // const url = `https://NOPC-IATM-bpms.pelekan.org/redirect/${getData.data}`;
-
-      window.open(url, "_blank");
-    } catch (error) {
-      console.log(error);
-    }
-  };
-
-  const changeSinceYear = (delta: number) => {
-    if (!currentYear) return;
-
-    const newSince = (currentYear.since ?? 0) + delta;
-
-    if (newSince > (currentYear.until ?? Infinity) || newSince < 0) return;
-
-    const updatedYear = { ...currentYear, since: newSince };
-    setCurrentYear(updatedYear);
-
-    const updatedDate = {
-      ...selectedDate,
-      start: `${newSince}/${selectedDate.start?.split("/").slice(1).join("/")}`,
-    };
-    setSelectedDate(updatedDate);
-    localStorage.setItem("dateSelected", JSON.stringify(updatedDate));
-    EventBus.emit("dateSelected", updatedDate);
-  };
-
-  const nextFromYearHandler = () => changeSinceYear(1);
-  const prevFromYearHandler = () => changeSinceYear(-1);
-
-  const selectFromDateHandler = (val: MonthItem) => {
-    const data = {
-      ...selectedDate,
-      start: `${currentYear.since}/${val.start}`,
-      sinceMonth: val.label,
-    };
-    setSelectedDate(data);
-    localStorage.setItem("dateSelected", JSON.stringify(data));
-    EventBus.emit("dateSelected", data);
-  };
-
-  const changeUntilYear = (delta: number) => {
-    if (!currentYear) return;
-
-    const newUntil = (currentYear.until ?? 0) + delta;
-
-    if (newUntil < (currentYear.since ?? 0)) return;
-
-    const updatedYear = { ...currentYear, until: newUntil };
-    setCurrentYear(updatedYear);
-
-    const updatedDate = {
-      ...selectedDate,
-      end: `${newUntil}/${selectedDate.end?.split("/").slice(1).join("/")}`,
-    };
-    setSelectedDate(updatedDate);
-    localStorage.setItem("dateSelected", JSON.stringify(updatedDate));
-    EventBus.emit("dateSelected", updatedDate);
-  };
-
-  const nextUntilYearHandler = () => changeUntilYear(1);
-  const prevUntilYearHandler = () => changeUntilYear(-1);
-
-  const selectUntilDateHandler = (val: MonthItem) => {
-    const data = {
-      ...selectedDate,
-      end: `${currentYear.until}/${val.end}`,
-      fromMonth: val.label,
-    };
-    setSelectedDate(data);
-    localStorage.setItem("dateSelected", JSON.stringify(data));
-    EventBus.emit("dateSelected", data);
-    toggleCalendar();
-  };
-
-  const toggleCalendar = () => {
-    setOpenCalendar(!openCalendar);
-  };
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        calendarRef.current &&
-        !calendarRef.current.contains(event.target as Node)
-      ) {
-        setOpenCalendar(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  const exportToExcel = async () => {
-    let arr = [];
-    const data: any = await fetchExcelData();
-    for (let i = 0; i < data.length; i++) {
-      let obj: Record<string, any> = {};
-      const project = data[i];
-
-      Object.entries(project).forEach(([pKey, pValue]: [any, any]) => {
-        Object.values(columns).forEach((col) => {
-          if (pKey === col?.key) {
-            ``;
-            obj[col?.label] = handleDataValue(
-              pValue?.includes(",") ? pValue.replaceAll(",", "") : pValue
-            );
-          }
-        });
-      });
-
-      arr.push(obj);
-    }
-
-    const worksheet = XLSX.utils.json_to_sheet(arr);
-
-    const workbook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(workbook, worksheet, "People");
-
-    const excelBuffer = XLSX.write(workbook, {
-      bookType: "xlsx",
-      type: "array",
-    });
-
-    const blob = new Blob([excelBuffer], {
-      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    });
-    saveAs(blob, "reports.xls");
-  };
-
-  const fetchExcelData = async () => {
-    setExcelLoading(true);
-    const fetchableColumns = columns.filter((c) => !c.computed);
-    const outputFields = fetchableColumns.map((c) => c.apiField ?? c.key);
-
-    const response = await apiService.select({
-      ProcessName: "project",
-      OutputFields: outputFields,
-      Conditions: [
-        ["start_date", ">=", selectedDate?.start || null, "and"],
-        ["start_date", "<=", selectedDate?.end || null],
-      ],
-    });
-    const parsedData = JSON.parse(response.data);
-    setExcelLoading(false);
-    return parsedData;
-  };
-
-  const handleDownloadFile = () => {
-    if (excelLoading) return null;
-    else exportToExcel();
-  };
+  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
+  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
 
   return (
     <header
       className={cn(
         "backdrop-blur-sm border-b border-gray-400/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30",
-        className
+        className,
       )}
     >
       {/* Left Section */}
@@ -416,129 +55,33 @@ export function Header({
 
         {/* Page Title */}
         <h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian">
-          {/* Right-side icon for current page */}
-          {titleIcon ? (
-            <div className="flex items-center gap-2 mr-4">
-              {React.createElement(titleIcon, { className: "w-5 h-5 " })}
-            </div>
-          ) : (
-            <PanelLeft />
-          )}
-          {title.includes("-") ? (
-            <div className="flex row  items-center gap-4">
-              <div className="flex items-center gap-1">
-                {title.split("-")[0]}
-                <ChevronLeft className="inline-block w-4 h-4" />
-                {title.split("-")[1]}
-              </div>
-            </div>
-          ) : (
-            title
-          )}
+          <PanelLeft /> {title}
         </h1>
-
-        <div ref={calendarRef} className="flex flex-col gap-3 relative">
-          <div
-            onClick={toggleCalendar}
-            className="flex flex-row w-full gap-2 items-center border border-pr-gray p-1.5 rounded-md px-2.5 min-w-64 cursor-pointer hover:bg-pr-gray/50 transition-all duration-300"
-          >
-            <Calendar size={20} />
-            {selectedDate ? (
-              <div className="flex flex-row justify-between w-full min-w-36 font-bold gap-1">
-                <div className="flex flex-row gap-1.5 w-max">
-                  <span className="text-md">از</span>
-                  <span className="text-md">{selectedDate?.sinceMonth}</span>
-                  <span className="text-md">
-                    {handleDataValue(currentYear.since)}
-                  </span>
-                </div>
-                <div className="flex flex-row gap-1.5 w-max">
-                  <span className="text-md">تا</span>
-                  <span className="text-md">{selectedDate?.fromMonth}</span>
-                  <span className="text-md">
-                    {handleDataValue(currentYear.until)}
-                  </span>
-                </div>
-              </div>
-            ) : (
-              "تاریخ مورد نظر خود را انتخاب نمایید"
-            )}
-          </div>
-
-          {openCalendar && (
-            <div className="flex flex-row gap-2.5 absolute top-14 right-[-40px] p-2.5 !pt-3.5 w-80 rounded-3xl overflow-hidden bg-pr-gray border-2 border-[#5F6284]">
-              <CustomCalendar
-                title="از"
-                nextYearHandler={prevFromYearHandler}
-                prevYearHandler={nextFromYearHandler}
-                currentYear={handleDataValue(currentYear?.since)}
-                monthList={monthList}
-                selectedDate={selectedDate?.sinceMonth}
-                selectDateHandler={selectFromDateHandler}
-              />
-              <span className="w-0.5 h-[12.5rem] border border-[#5F6284] block "></span>
-              <CustomCalendar
-                title="تا"
-                nextYearHandler={prevUntilYearHandler}
-                prevYearHandler={nextUntilYearHandler}
-                currentYear={handleDataValue(currentYear?.until)}
-                monthList={monthList}
-                selectedDate={selectedDate?.fromMonth}
-                selectDateHandler={selectUntilDateHandler}
-              />
-            </div>
-          )}
-        </div>
       </div>
 
       {/* Right Section */}
       <div className="flex items-center gap-2">
         {/* User Menu */}
         <div className="relative">
-          <div className="flex items-center gap-2">
-            {location.pathname === projectManagerRoute ? (
-              <div className="flex justify-end w-full mb-0 pl-2">
-                <span
-                  className={`flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian ${excelLoading ? "!cursor-not-allowed !opacity-10" : ""}`}
-                  onClick={handleDownloadFile}
-                >
-                  <FileChartColumnIncreasing className="h-4 w-4" />
-                  دانلود فایل اکسل
-                </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
+            className="flex items-center gap-2 text-gray-300"
+          >
+            <div className="w-8 h-8 bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-400 rounded-full flex items-center justify-center">
+              <User className="h-4 w-4" />
+            </div>
+            <div className="hidden sm:block text-right">
+              <div className="text-sm font-medium font-persian">
+                {user?.name} {user?.family}
               </div>
-            ) : (
-              ""
-            )}
-
-            {user?.id === 2041 && (
-              <button
-                className="flex w-full  cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
-                onClick={redirectHandler}
-              >
-                <Server className="h-4 w-4" />
-                ورود به میزکار مدیریت
-              </button>
-            )}
-
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
-              className="flex items-center gap-2 text-gray-300"
-            >
-              <div className="hidden sm:block text-right">
-                <div className="text-sm font-medium font-persian">
-                  {user?.name} {user?.family}
-                </div>
-                <div className="text-xs text-gray-400 font-persian">
-                  {user?.username}
-                </div>
+              <div className="text-xs text-gray-400 font-persian">
+                {user?.username}
               </div>
-              <div className="w-8 h-8 bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-400 rounded-lg flex items-center justify-center">
-                <User className="h-4 w-4" />
-              </div>
-            </Button>
-          </div>
+            </div>
+            <ChevronDown className="h-3 w-3" />
+          </Button>
 
           {/* Profile Dropdown */}
           {isProfileMenuOpen && (
@@ -551,7 +94,7 @@ export function Header({
                   {user?.email}
                 </div>
               </div>
-              {/* <div className="py-1">
+              <div className="py-1">
                 <Link
                   to="/dashboard/profile"
                   className="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
@@ -559,16 +102,16 @@ export function Header({
                 >
                   <User className="h-4 w-4" />
                   پروفایل کاربری
-                </Link> 
-                 <Link 
+                </Link>
+                <Link
                   to="/dashboard/settings"
                   className="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
                   onClick={() => setIsProfileMenuOpen(false)}
                 >
                   <Settings className="h-4 w-4" />
                   تنظیمات
-                </Link> 
-              </div> */}
+                </Link>
+              </div>
             </div>
           )}
         </div>

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

@@ -42,15 +42,15 @@ export function InteractiveBarChart({
   data: CompanyChartDatum[];
 }) {
   return (
-    <Card className="py-0 bg-transparent mt-8 border-none h-full">
-      <CardContent className="p-2 bg-transparent">
-        <ChartContainer config={chartConfig} className="aspect-auto h-96">
+    <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={data}
-            margin={{   left: 12, right: 12 }}
-            barGap={25}
-            barSize={9}
+            margin={{ left: 12, right: 12 }}
+            barGap={15}
+            barSize={8}
           >
             <CartesianGrid vertical={false} stroke="#475569" />
             <XAxis
@@ -59,21 +59,21 @@ export function InteractiveBarChart({
               axisLine={false}
               tickMargin={8}
               minTickGap={32}
-              style={{ fill: "#ffffff", fontSize: 16 }}
+              tick={{ fill: "#94a3b8", fontSize: 12 }}
             />
             <YAxis
+              domain={[0, 100]}
               tickLine={false}
               axisLine={false}
-              tickMargin={25}
-              style={{ fill: "#ACACAC", fontSize: 11 }}
+              tickMargin={8}
+              tick={{ fill: "#94a3b8", fontSize: 12 }}
               tickFormatter={(value) => `${formatNumber(Math.round(value))}%`}
             />
             <Bar dataKey="capacity" fill={chartConfig.capacity.color} radius={[8, 8, 0, 0]}>
               <LabelList
                 dataKey="capacity"
                 position="top"
-                offset={15}
-                style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
+                style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
                 formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
               />
             </Bar>
@@ -81,7 +81,7 @@ export function InteractiveBarChart({
               <LabelList
                 dataKey="revenue"
                 position="top"
-                style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
+                style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
                 formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
               />
             </Bar>
@@ -89,7 +89,7 @@ export function InteractiveBarChart({
               <LabelList
                 dataKey="cost"
                 position="top"
-                style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
+                style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
                 formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
               />
             </Bar>
@@ -97,27 +97,27 @@ export function InteractiveBarChart({
         </ChartContainer>
 
         {/* Legend below chart */}
-        <div className="flex justify-center gap-8 mt-10">
+        <div className="flex justify-center gap-8 mt-4">
           <div className="flex items-center gap-2">
             <div
               className="w-6 h-2 rounded"
               style={{ backgroundColor: chartConfig.capacity.color }}
             ></div>
-            <span className="text-xs text-white">{chartConfig.capacity.label}</span>
+            <span className="text-sm text-white">{chartConfig.capacity.label}</span>
           </div>
  <div className="flex items-center gap-2">
             <div
               className="w-6 h-2 rounded"
               style={{ backgroundColor: chartConfig.cost.color }}
             ></div>
-            <span className="text-xs text-white">{chartConfig.cost.label}</span>
+            <span className="text-sm text-white">{chartConfig.cost.label}</span>
           </div>
           <div className="flex items-center gap-2">
             <div
               className="w-6 h-2 rounded"
               style={{ backgroundColor: chartConfig.revenue.color }}
             ></div>
-            <span className="text-xs text-white">{chartConfig.revenue.label}</span>
+            <span className="text-sm text-white">{chartConfig.revenue.label}</span>
           </div>
          
         </div>

app/components/dashboard/layout.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { cn } from "~/lib/utils";
-import { Header } from "./header";
 import { Sidebar } from "./sidebar";
+import { Header } from "./header";
 import { StrategicAlignmentPopup } from "./strategic-alignment-popup";
 
 interface DashboardLayoutProps {
@@ -17,14 +17,7 @@ export function DashboardLayout({
 }: DashboardLayoutProps) {
   const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
   const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
-  const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] =
-    useState(false);
-  const [currentTitle, setCurrentTitle] = useState<string | undefined>(
-    title ?? "صفحه اول"
-  );
-  const [currentTitleIcon, setCurrentTitleIcon] = useState<
-    React.ComponentType<{ className?: string }> | null | undefined
-  >(undefined);
+  const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] = useState(false);
 
   const toggleSidebarCollapse = () => {
     setIsSidebarCollapsed(!isSidebarCollapsed);
@@ -37,7 +30,7 @@ export function DashboardLayout({
   return (
     <div
       className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden"
-      dir="rtl"
+       dir="rtl"
     >
       {/* Gradient overlay */}
       <div className="absolute inset-0  pointer-events-none" />
@@ -57,20 +50,14 @@ export function DashboardLayout({
           "fixed inset-y-0 right-0 z-50 flex flex-col lg:static lg:inset-auto lg:translate-x-0 transition-transform duration-300 ease-in-out",
           isMobileSidebarOpen
             ? "translate-x-0"
-            : "translate-x-full lg:translate-x-0"
+            : "translate-x-full lg:translate-x-0",
         )}
       >
         <Sidebar
           isCollapsed={isSidebarCollapsed}
           onToggleCollapse={toggleSidebarCollapse}
           className="h-full flex-shrink-0 relative z-10"
-          onStrategicAlignmentClick={() =>
-            setIsStrategicAlignmentPopupOpen(true)
-          }
-          onTitleChange={(info) => {
-            setCurrentTitle(info.title);
-            setCurrentTitleIcon(info.icon ?? null);
-          }}
+          onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)}
         />
       </div>
 
@@ -80,26 +67,22 @@ export function DashboardLayout({
         <Header
           onToggleSidebar={toggleMobileSidebar}
           className="flex-shrink-0"
-          title={currentTitle}
-          titleIcon={currentTitleIcon}
+          title={title}
         />
 
         {/* Main content */}
         <main
           className={cn(
             "flex-1 overflow-x-hidden overflow-y-auto focus:outline-none transition-all duration-300 min-w-0",
-            className
+            className,
           )}
         >
-          <div className="relative h-full min-w-0 w-full z-10 overflow-x-hidden p-5">
+          <div className="relative h-full min-w-0 w-full z-10 overflow-x-hidden">
             {children}
           </div>
         </main>
       </div>
-      <StrategicAlignmentPopup
-        open={isStrategicAlignmentPopupOpen}
-        onOpenChange={setIsStrategicAlignmentPopupOpen}
-      />
+      <StrategicAlignmentPopup open={isStrategicAlignmentPopupOpen} onOpenChange={setIsStrategicAlignmentPopupOpen} />
     </div>
   );
 }

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

@@ -12,10 +12,9 @@ import {
   Zap,
 } from "lucide-react";
 import moment from "moment-jalaali";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { Badge } from "~/components/ui/badge";
-import { BaseCard } from "~/components/ui/base-card";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
 import { Checkbox } from "~/components/ui/checkbox";
@@ -34,10 +33,8 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
+import { formatCurrency } from "~/lib/utils";
 import { DashboardLayout } from "../layout";
 
 moment.loadPersian({ usePersianDigits: true });
@@ -155,7 +152,7 @@ export function DigitalInnovationPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize] = useState(20);
   const [hasMore, setHasMore] = useState(true);
-  const [date, setDate] = useStoredDate();
+  const [totalCount, setTotalCount] = useState(0);
   const [actualTotalCount, setActualTotalCount] = useState(0);
   const [statsLoading, setStatsLoading] = useState(false);
   const [rating, setRating] = useState<ListItem[]>([]);
@@ -183,8 +180,6 @@ export function DigitalInnovationPage() {
   // const [avarage, setAvarage] = useState<number>(0);
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   // Selection handlers
   const handleSelectAll = () => {
@@ -206,7 +201,12 @@ export function DigitalInnovationPage() {
     setDetailsDialogOpen(true);
   };
 
-  // ...existing code...
+  const formatNumber = (value: string | number) => {
+    if (!value) return "0";
+    const numericValue = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(numericValue)) return "0";
+    return new Intl.NumberFormat("fa-IR").format(numericValue);
+  };
 
   const statsCards: StatsCard[] = [
     {
@@ -215,7 +215,7 @@ export function DigitalInnovationPage() {
       value: formatNumber(stats.reduceCosts.toFixed?.(1) ?? stats.reduceCosts),
       description: "میلیون ریال کاهش یافته",
       icon: <TrendingDown />,
-      color: "text-pr-green",
+      color: "text-emerald-400",
     },
     {
       id: "bottleneck-removal",
@@ -223,7 +223,7 @@ export function DigitalInnovationPage() {
       value: formatNumber(stats.increasedRevenue),
       description: "میلیون ریال افزایش یافته",
       icon: <TrendingUp />,
-      color: "text-pr-green",
+      color: "text-emerald-400",
     },
 
     {
@@ -234,7 +234,7 @@ export function DigitalInnovationPage() {
       ),
       description: "هزار تن صرفه جوریی شده",
       icon: <Database />,
-      color: "text-pr-green",
+      color: "text-emerald-400",
     },
     {
       id: "frequent-failures-reduction",
@@ -245,7 +245,7 @@ export function DigitalInnovationPage() {
       ),
       description: "مگاوات کاهش یافته",
       icon: <Zap />,
-      color: "text-pr-green",
+      color: "text-emerald-400",
     },
   ];
 
@@ -284,11 +284,7 @@ export function DigitalInnovationPage() {
           "reduce_costs_percent",
         ],
         Sorts: [[sortConfig.field, sortConfig.direction]],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
       });
 
@@ -301,16 +297,16 @@ export function DigitalInnovationPage() {
               if (reset) {
                 setProjects(parsedData);
                 // calculateAverage(parsedData);
-                // setTotalCount(parsedData.length);
+                setTotalCount(parsedData.length);
               } else {
                 setProjects((prev) => [...prev, ...parsedData]);
-                // setTotalCount((prev) => prev + parsedData.length);
+                setTotalCount((prev) => prev + parsedData.length);
               }
               setHasMore(parsedData.length === pageSize);
             } else {
               if (reset) {
                 setProjects([]);
-                // setTotalCount(0);
+                setTotalCount(0);
               }
               setHasMore(false);
             }
@@ -318,14 +314,14 @@ export function DigitalInnovationPage() {
             console.error("Error parsing project data:", parseError);
             if (reset) {
               setProjects([]);
-              // setTotalCount(0);
+              setTotalCount(0);
             }
             setHasMore(false);
           }
         } else {
           if (reset) {
             setProjects([]);
-            // setTotalCount(0);
+            setTotalCount(0);
           }
           setHasMore(false);
         }
@@ -333,7 +329,7 @@ export function DigitalInnovationPage() {
         toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
         if (reset) {
           setProjects([]);
-          // setTotalCount(0);
+          setTotalCount(0);
         }
         setHasMore(false);
       }
@@ -342,7 +338,7 @@ export function DigitalInnovationPage() {
       toast.error("خطا در دریافت اطلاعات پروژه‌ها");
       if (reset) {
         setProjects([]);
-        // setTotalCount(0);
+        setTotalCount(0);
       }
       setHasMore(false);
     } finally {
@@ -354,75 +350,45 @@ export function DigitalInnovationPage() {
   };
 
   const loadMore = useCallback(() => {
-    if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
+    if (!loadingMore && hasMore && !loading) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [hasMore, loading, loadingMore]);
+  }, [loadingMore, hasMore, loading]);
 
   useEffect(() => {
-    if (date?.start && date?.end) {
-      fetchTable(true);
-      fetchTotalCount();
-      fetchStats();
-    }
-  }, [sortConfig, date]);
+    fetchTable(true);
+    fetchTotalCount();
+    fetchStats();
+  }, [sortConfig]);
 
   useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
-
-  useEffect(() => {
-    if (currentPage > 1 && date?.start && date?.end) {
+    if (currentPage > 1) {
       fetchTable(false);
     }
   }, [currentPage]);
 
-  // Infinite scroll observer with debouncing
   useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
+    const scrollContainer = document.querySelector(".overflow-auto");
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
-        return;
+      if (!scrollContainer || !hasMore || loadingMore) return;
 
-      // Clear previous timeout
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+      if (scrollPercentage >= 0.9) {
+        loadMore();
       }
-
-      // Debounce scroll events
-      scrollTimeoutRef.current = setTimeout(() => {
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-
-        // Trigger load more when scrolled to 95% of the container
-        if (scrollPercentage >= 0.95) {
-          loadMore();
-        }
-      }, 150);
     };
 
     if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll, {
-        passive: true,
-      });
+      scrollContainer.addEventListener("scroll", handleScroll);
     }
 
     return () => {
       if (scrollContainer) {
         scrollContainer.removeEventListener("scroll", handleScroll);
       }
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
     };
   }, [loadMore, hasMore, loadingMore]);
 
@@ -433,23 +399,19 @@ export function DigitalInnovationPage() {
       direction:
         prev.field === field && prev.direction === "asc" ? "desc" : "asc",
     }));
-    fetchTotalCount(date?.start, date?.end);
+    fetchTotalCount();
     fetchStats();
     setCurrentPage(1);
     setProjects([]);
     setHasMore(true);
   };
 
-  const fetchTotalCount = async (startDate?: string, endDate?: string) => {
+  const fetchTotalCount = async () => {
     try {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
       });
 
       if (response.state === 0) {
@@ -476,18 +438,17 @@ export function DigitalInnovationPage() {
     try {
       setStatsLoading(true);
       const raw = await apiService.call<any>({
-        innovation_digital_function: {
-          start_date: date?.start || null,
-          end_date: date?.end || null,
-        },
+        innovation_digital_function: {},
       });
 
+
+
       // let payload: DigitalInnovationMetrics = raw?.data;
       // console.log("*-*-*-*" +payload);
       // if (typeof payload === "string") {
       //   try {
       //     payload = JSON.parse(payload).innovation_digital_function;
-
+          
       //   } catch {}
       // }
 
@@ -497,10 +458,10 @@ export function DigitalInnovationPage() {
         try {
           // مرحله اول: data رو از string به object تبدیل کن
           const parsedData = JSON.parse(raw.data);
-
+  
           // مرحله دوم: innovation_digital_function رو که خودش string هست parse کن
           const arr = JSON.parse(parsedData.innovation_digital_function);
-
+  
           // مرحله سوم: اولین خانه آرایه رو بردار
           if (Array.isArray(arr) && arr.length > 0) {
             payload = arr[0];
@@ -510,6 +471,8 @@ export function DigitalInnovationPage() {
         }
       }
 
+
+
       const parseNum = (v: unknown): number => {
         if (v == null) return 0;
         if (typeof v === "number") return v;
@@ -557,33 +520,33 @@ export function DigitalInnovationPage() {
   //   fetchStats();
   // };
 
-  // const renderProgress = useMemo(() => {
-  //   const total = 10;
-  //   for (let i = 0; i < rating.length; i++) {
-  //     const currentElm = rating[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,
-  //           oklch(76.5% 0.177 163.223) 0%,
-  //           oklch(76.5% 0.177 163.223) ${partialPercent * 100}%,
-  //           oklch(55.1% 0.027 264.364) ${partialPercent * 100}%,
-  //           oklch(55.1% 0.027 264.364) 100%
-  //         )`,
-  //       });
-  //   }
-  // }, [rating]);
+  const renderProgress = useMemo(() => {
+    const total = 10;
+    for (let i = 0; i < rating.length; i++) {
+      const currentElm = rating[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,
+            oklch(76.5% 0.177 163.223) 0%, 
+            oklch(76.5% 0.177 163.223) ${partialPercent * 100}%,
+            oklch(55.1% 0.027 264.364) ${partialPercent * 100}%,
+            oklch(55.1% 0.027 264.364) 100%
+          )`,
+        });
+    }
+  }, [rating]);
 
   const statusColor = (status: projectStatus): any => {
     let el = null;
@@ -627,14 +590,14 @@ export function DigitalInnovationPage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
+            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto cursor-pointer"
           >
             جزئیات بیشتر
           </Button>
         );
       case "amount_currency_reduction":
         return (
-          <span className="font-medium text-pr-green">
+          <span className="font-medium text-emerald-400">
             {formatCurrency(String(value))}
           </span>
         );
@@ -645,9 +608,7 @@ export function DigitalInnovationPage() {
           </Badge>
         );
       case "title":
-        return (
-          <span className="font-light text-sm text-white">{String(value)}</span>
-        );
+        return <span className="font-medium text-white">{String(value)}</span>;
       case "project_status":
         return (
           <div className="flex items-center gap-1">
@@ -682,7 +643,7 @@ export function DigitalInnovationPage() {
 
   return (
     <DashboardLayout title="نوآوری دیجیتال">
-      <div className="space-y-4 grid  justify-between gap-7 pl-6 sm:grid-cols-1 xl:grid-cols-[40%_60%]">
+      <div className="p-6 space-y-4 grid  justify-between gap-8 sm:grid-cols-1 xl:grid-cols-[40%_60%]">
         {/* Stats Cards */}
         <div className="flex flex-col gap-6  w-full mb-0">
           <div className="space-y-6 w-full">
@@ -739,7 +700,7 @@ export function DigitalInnovationPage() {
                           </div>
                           <div className="flex items-center justify-center flex-col p-2 pb-4">
                             <p
-                              className={`text-3xl font-bold  ${card.color} mb-1`}
+                              className={`text-3xl font-bold ${card.color} mb-1`}
                             >
                               {card.value}
                             </p>
@@ -755,49 +716,50 @@ export function DigitalInnovationPage() {
           </div>
 
           {/* Process Impacts Chart */}
-          <BaseCard className="rounded-xl w-full overflow-hidden">
+          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-lg w-full overflow-hidden h-full ">
             {/* <CardContent > */}
             <CustomBarChart
               title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
               loading={statsLoading}
-              // height="100%"
+              height="100%"
               data={[
                 {
                   label: DigitalCardLabel.decreasCost,
                   value: stats.reduceCostsPercent || 0,
-                  color: "bg-pr-green",
+                  color: "bg-emerald-400",
                   labelColor: "text-white",
                 },
                 {
                   label: DigitalCardLabel.increaseRevenue,
                   value: stats.increasedRevenuePercent || 0,
-                  color: "bg-pr-green",
+                  color: "bg-emerald-400",
                   labelColor: "text-white",
                 },
                 {
                   label: DigitalCardLabel.performance,
                   value: stats.resourceProductivityPercent || 0,
-                  color: "bg-pr-green",
+                  color: "bg-emerald-400",
                   labelColor: "text-white",
                 },
                 {
                   label: DigitalCardLabel.decreaseEnergy,
                   value: stats.reduceEnergyConsumptionPercent || 0,
-                  color: "bg-pr-green",
+                  color: "bg-emerald-400",
                   labelColor: "text-white",
                 },
               ]}
               barHeight="h-5"
               showAxisLabels={true}
             />
-          </BaseCard>
+            {/* </CardContent> */}
+          </Card>
         </div>
 
         {/* Data Table */}
-        <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-max">
+        <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-[39.7rem]">
           <CardContent className="p-0">
             <div className="relative h-full">
-              <Table containerClassName="overflow-auto custom-scrollbar w-full h-[calc(100vh-160px)] ">
+              <Table containerClassName="overflow-auto custom-scrollbar w-full h-[36.8rem] ">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -976,13 +938,13 @@ 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%] pb-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">
                 {dialogInfo?.title}
@@ -1034,7 +996,7 @@ export function DigitalInnovationPage() {
             </div>
             <div className="digitalAbilityDevelopment flex flex-col gap-10 border-l-2 border-l-gray-600 px-5">
               <div className="flex flex-col gap-4">
-                <span className="text-lg font-bold">
+                <span className="text-md font-bold">
                   توسعه قابلیت های دیجیتال:{" "}
                 </span>
                 <div className="flex flex-col gap-2">
@@ -1097,10 +1059,10 @@ export function DigitalInnovationPage() {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col px-6 gap-4">
+            <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="text-sm bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">
+                  <span className="title bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">
                     کاهش هزینه ها
                   </span>
 

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

@@ -1,3 +1,4 @@
+// import moment from "moment-jalaali";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
   Bar,
@@ -25,7 +26,6 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { EventBus, formatNumber } from "~/lib/utils";
 
 import {
   Building2,
@@ -42,17 +42,12 @@ import {
   UsersIcon,
   Zap,
 } from "lucide-react";
-import moment from "moment-jalaali";
 import toast from "react-hot-toast";
-import { MetricCard } from "~/components/ui/metric-card";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
 import { formatCurrency } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
 import DashboardLayout from "../layout";
 
-moment.loadPersian({ usePersianDigits: true });
-
+// moment.loadPersian({ usePersianDigits: true });
 interface GreenInnovationData {
   WorkflowID: string;
   approved_budget: string;
@@ -170,8 +165,6 @@ export function GreenInnovationPage() {
   const [totalCount, setTotalCount] = useState(0);
   const [actualTotalCount, setActualTotalCount] = useState(0);
   const [statsLoading, setStatsLoading] = useState(false);
-  const [date, setDate] = useStoredDate();
-
   const [stats, setStats] = useState<stateCounter>();
   const [sortConfig, setSortConfig] = useState<SortConfig>({
     field: "start_date",
@@ -189,14 +182,14 @@ export function GreenInnovationPage() {
     useState<GreenInnovationData | null>(null);
   const [recycleParams, setRecycleParams] = useState<RecycleParams>({
     water: {
-      icon: <Key className="text-success" size={"18px"} />,
+      icon: <Key className="text-emerald-400" size={"18px"} />,
       label: "آب",
       value: 0,
       suffix: "لیتر",
       percent: 0,
     },
     food: {
-      icon: <Sparkle className="text-success" size={"18px"} />,
+      icon: <Sparkle className="text-emerald-400" size={"18px"} />,
       label: "خوراک",
       value: 0,
       suffix: "تن",
@@ -204,14 +197,14 @@ export function GreenInnovationPage() {
     },
 
     power: {
-      icon: <Zap className="text-success" size={"18px"} />,
+      icon: <Zap className="text-emerald-400" size={"18px"} />,
       label: "برق",
       value: 0,
       suffix: "میلیون مگاوات",
       percent: 0,
     },
     oil: {
-      icon: <Flame className="text-success" size={"18px"} />,
+      icon: <Flame className="text-emerald-400" size={"18px"} />,
       label: "سوخت",
       value: 0,
       suffix: "متر مربع",
@@ -263,7 +256,11 @@ export function GreenInnovationPage() {
     setDetailsDialogOpen(true);
   };
 
-  // ...existing code...
+  const formatNumber = (value: string | number) => {
+    const numericValue = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(numericValue)) return "0";
+    return new Intl.NumberFormat("fa-IR").format(numericValue);
+  };
 
   const fetchProjects = async (reset = false) => {
     if (fetchingRef.current) {
@@ -294,11 +291,7 @@ export function GreenInnovationPage() {
           "observer",
         ],
         Sorts: [[sortConfig.field, sortConfig.direction]],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری سبز", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری سبز"]],
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
       });
       if (response.state === 0) {
@@ -360,34 +353,20 @@ export function GreenInnovationPage() {
     }
   };
 
-  useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
-
   const loadMore = useCallback(() => {
-    if (hasMore && !loading) {
+    if (!loadingMore && hasMore && !loading) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [hasMore, loading]);
+  }, [loadingMore, hasMore, loading]);
 
   useEffect(() => {
-    if (date.end && date.start) {
-      fetchProjects(true);
-      fetchTotalCount();
-    }
-  }, [sortConfig, date]);
+    fetchProjects(true);
+    fetchTotalCount();
+  }, [sortConfig]);
 
   useEffect(() => {
-    if (date.end && date.start) fetchStats();
-  }, [selectedProjects, date]);
+    fetchStats();
+  }, [selectedProjects]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -399,12 +378,12 @@ export function GreenInnovationPage() {
     const scrollContainer = document.querySelector(".overflow-auto");
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore) return;
+      if (!scrollContainer || !hasMore || loadingMore) return;
 
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
       const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
 
-      if (scrollPercentage == 1) {
+      if (scrollPercentage >= 0.9) {
         loadMore();
       }
     };
@@ -440,11 +419,7 @@ export function GreenInnovationPage() {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری سبز", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری سبز"]],
       });
       if (response.state === 0) {
         const dataString = response.data;
@@ -476,8 +451,6 @@ export function GreenInnovationPage() {
             selectedProjects.size > 0
               ? Array.from(selectedProjects).join(" , ")
               : "",
-          start_date: date?.start || null,
-          end_date: date?.end || null,
         },
       });
       let payload: any = raw?.data;
@@ -524,13 +497,13 @@ export function GreenInnovationPage() {
         },
 
         pollution: {
-          value: parseNum(stats.pollution_reduction),
-          percent: parseNum(stats.pollution_reduction_percent),
+          value: formatNumber(parseNum(stats.pollution_reduction)),
+          percent: formatNumber(parseNum(stats.pollution_reduction_percent)),
         },
 
         waste: {
-          value: parseNum(stats.waste_reduction),
-          percent: parseNum(stats.waste_reductionn_percent),
+          value: formatNumber(parseNum(stats.waste_reduction)),
+          percent: formatNumber(parseNum(stats.waste_reductionn_percent)),
         },
         avarage: stats.average_project_score,
         countInnovationGreenProjects: stats.count_innovation_green_projects,
@@ -548,6 +521,7 @@ export function GreenInnovationPage() {
       setStatsLoading(false);
     }
   };
+
   const setPageData = (normalized: any) => {
     setSustainabilityStats((prev) => ({
       ...prev,
@@ -631,14 +605,14 @@ export function GreenInnovationPage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
+            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto cursor-pointer"
           >
             جزئیات بیشتر
           </Button>
         );
       case "amount_currency_reduction":
         return (
-          <span className="font-medium text-pr-green">
+          <span className="font-medium text-emerald-400">
             {formatCurrency(String(value))}
           </span>
         );
@@ -649,9 +623,7 @@ export function GreenInnovationPage() {
           </Badge>
         );
       case "title":
-        return (
-          <span className="font-light text-sm text-white">{String(value)}</span>
-        );
+        return <span className="font-medium text-white">{String(value)}</span>;
       case "project_status":
         return (
           <div className="flex items-center gap-1">
@@ -717,7 +689,7 @@ export function GreenInnovationPage() {
 
   return (
     <DashboardLayout title="نوآوری سبز">
-      <div className="space-y-4 h-[23.5rem]">
+      <div className="p-6 space-y-4 h-[23.5rem]">
         {/* Stats Cards */}
         <div className="flex gap-6 mb-5 md:flex-col xl:flex-row">
           <div className="flex flex-col justify-between xl:w-1/2 sm:w-full sm:gap-2">
@@ -751,14 +723,39 @@ export function GreenInnovationPage() {
                   </Card>
                 ))
               : Object.entries(sustainabilityStats).map(([key, value]) => (
-                  <MetricCard
+                  <Card
                     key={key}
-                    title={value.title}
-                    value={Math.round(value.total.value || 0)}
-                    valueLabel={value.total?.description}
-                    percentValue={value.percent?.value || 0}
-                    percentLabel={value.percent?.description}
-                  />
+                    className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50"
+                  >
+                    <CardContent className="p-0 h-full">
+                      <div className="flex flex-col justify-between gap-2 h-full">
+                        <div className="flex justify-between items-center border-b-2 border-gray-500/20 ">
+                          <h3 className="text-lg font-bold text-white font-persian p-4">
+                            {value.title}
+                          </h3>
+                        </div>
+                        <div className="flex items-center justify-between p-6 flex-row-reverse">
+                          <div className="flex flex-col">
+                            <span className="text-3xl font-bold text-emerald-400 mb-1 font-persian">
+                              % {value.percent?.value}
+                            </span>
+                            <span className="text-sm text-gray-400 font-persian">
+                              {value.percent?.description}
+                            </span>
+                          </div>
+                          <b className="block w-0.5 h-8 bg-gray-600 rotate-45" />
+                          <div className="flex flex-col">
+                            <span className="text-3xl font-bold text-emerald-400 mb-1 font-persian">
+                              {value.total?.value}
+                            </span>
+                            <span className="text-sm text-gray-400 font-persian">
+                              {value.total?.description}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
                 ))}
           </div>
 
@@ -819,10 +816,7 @@ export function GreenInnovationPage() {
                   <div className="params flex flex-col gap-3.5">
                     {Object.entries(recycleParams).map((el, index) => {
                       return (
-                        <div
-                          key={index}
-                          className="param flex flex-row justify-between items-center"
-                        >
+                        <div className="param flex flex-row justify-between items-center">
                           <div className="flex flex-row gap-2">
                             {el[1].icon}
                             <span className="font-normal text-sm font-persian">
@@ -904,7 +898,7 @@ export function GreenInnovationPage() {
             </Card>
           )}
 
-          <Card className="w-1/2 bg-pr-gray  backdrop-blur-sm rounded-lg overflow-hidden">
+          <Card className="w-1/3 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-lg overflow-hidden">
             <CardContent className="p-0">
               <div className="border-b-2 border-gray-500/20">
                 <div className="flex flex-row justify-between w-full p-4">
@@ -955,7 +949,7 @@ export function GreenInnovationPage() {
         <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden">
           <CardContent className="p-0">
             <div className="relative">
-              <Table containerClassName="overflow-auto custom-scrollbar h-full">
+              <Table containerClassName="overflow-auto custom-scrollbar h-[25rem]">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -1119,7 +1113,7 @@ export function GreenInnovationPage() {
               شرح پروژه
             </DialogTitle>
           </DialogHeader>
-          <div className="space-y-4 flex justify-between text-right p-6">
+          <div className="space-y-4 flex justify-between text-right px-6">
             {/* Project Description */}
             <div className="flex-[4] border-l-2 border-gray-600">
               <h2 className="font-bold">{selectedProjectDetails?.title}</h2>

app/components/dashboard/project-management/innovation-built-inside-page.tsx

@@ -1,4 +1,3 @@
-// ...existing code...
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
@@ -39,11 +38,8 @@ import {
   ResponsiveContainer,
   XAxis,
 } from "recharts";
-import { MetricCard } from "~/components/ui/metric-card";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
+import { formatCurrency } from "~/lib/utils";
 import DashboardLayout from "../layout";
 
 interface innovationBuiltInDate {
@@ -155,8 +151,8 @@ enum projectStatus {
 
 const columns = [
   { key: "select", label: "", sortable: false, width: "50px" },
-  { key: "project_no", label: "شماره پروژه", sortable: true, width: "120px" },
-  { key: "title", label: "عنوان پروژه", sortable: true, width: "300px" },
+  { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
+  { key: "title", label: "عنوان پروژه", sortable: true, width: "400px" },
   {
     key: "project_status",
     label: "وضعیت پروژه",
@@ -167,7 +163,7 @@ const columns = [
     key: "project_rating",
     label: "امتیاز پروژه",
     sortable: true,
-    width: "120px",
+    width: "140px",
   },
   { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
 ];
@@ -194,8 +190,6 @@ export function InnovationBuiltInsidePage() {
     field: "start_date",
     direction: "asc",
   });
-
-  const [date, setDate] = useStoredDate();
   const [tblAvarage, setTblAvarage] = useState<number>(0);
   const [selectedProjects, setSelectedProjects] =
     useState<Set<string | number>>();
@@ -281,7 +275,12 @@ export function InnovationBuiltInsidePage() {
     }, 500);
   };
 
-  // ...existing code...
+  const formatNumber = (value: string | number) => {
+    if (!value) return "0";
+    const numericValue = typeof value === "string" ? parseFloat(value) : value;
+    if (isNaN(numericValue)) return "0";
+    return new Intl.NumberFormat("fa-IR").format(numericValue);
+  };
 
   const fetchProjects = async (reset = false) => {
     if (fetchingRef.current) {
@@ -315,11 +314,7 @@ export function InnovationBuiltInsidePage() {
           "technology_maturity_level",
         ],
         Sorts: [[sortConfig.field, sortConfig.direction]],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری ساخت داخل", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری ساخت داخل"]],
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
       });
       if (response.state === 0) {
@@ -420,30 +415,18 @@ export function InnovationBuiltInsidePage() {
   };
 
   const loadMore = useCallback(() => {
-    if (hasMore && !loading) {
+    if (!loadingMore && hasMore && !loading) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [hasMore, loading]);
+  }, [loadingMore, hasMore, loading]);
 
   useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
+    fetchProjects(true);
+  }, [sortConfig]);
 
   useEffect(() => {
-    if (date.start && date.end) fetchProjects(true);
-  }, [sortConfig, date]);
-
-  useEffect(() => {
-    if (date.end && date.start) fetchStats();
-  }, [selectedProjects, date]);
+    fetchStats();
+  }, [selectedProjects]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -455,12 +438,12 @@ export function InnovationBuiltInsidePage() {
     const scrollContainer = document.querySelector(".overflow-auto");
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore) return;
+      if (!scrollContainer || !hasMore || loadingMore) return;
 
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
       const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
 
-      if (scrollPercentage == 1) {
+      if (scrollPercentage >= 0.9) {
         loadMore();
       }
     };
@@ -501,8 +484,6 @@ export function InnovationBuiltInsidePage() {
             selectedProjects && selectedProjects?.size > 0
               ? Array.from(selectedProjects).join(" , ")
               : "",
-          start_date: date?.start || null,
-          end_date: date?.end || null,
         },
       });
       let payload: any = raw?.data;
@@ -528,13 +509,15 @@ export function InnovationBuiltInsidePage() {
       const stats = data[0];
       const normalized: any = {
         currencySaving: {
-          value: parseNum(stats?.foreign_currency_saving),
-          percent: parseNum(stats?.foreign_currency_saving_percent),
+          value: formatNumber(parseNum(stats?.foreign_currency_saving)),
+          percent: formatNumber(
+            parseNum(stats?.foreign_currency_saving_percent)
+          ),
         },
 
         investmentAmount: {
-          value: parseNum(stats?.investment_amount),
-          percent: parseNum(stats?.investment_amount_percent),
+          value: formatNumber(parseNum(stats?.investment_amount)),
+          percent: formatNumber(parseNum(stats?.investment_amount_percent)),
         },
 
         technology: {
@@ -645,14 +628,14 @@ export function InnovationBuiltInsidePage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
+            className="text-emerald-500 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto cursor-pointer"
           >
             جزئیات بیشتر
           </Button>
         );
       case "amount_currency_reduction":
         return (
-          <span className="font-medium text-pr-green">
+          <span className="font-medium text-emerald-500">
             {formatCurrency(String(value))}
           </span>
         );
@@ -663,9 +646,7 @@ export function InnovationBuiltInsidePage() {
           </Badge>
         );
       case "title":
-        return (
-          <span className="font-light text-sm text-white">{String(value)}</span>
-        );
+        return <span className="font-medium text-white">{String(value)}</span>;
       case "project_status":
         return (
           <div className="flex items-center gap-1">
@@ -724,10 +705,10 @@ export function InnovationBuiltInsidePage() {
 
   return (
     <DashboardLayout title="نوآوری ساخت داخل">
-      <div className="space-y-4  justify-between gap-8 grid pl-6 sm:grid-cols-1 xl:grid-cols-[35%_65%]">
+      <div className="p-6 space-y-4   justify-between gap-8 grid sm:grid-cols-1 xl:grid-cols-[40%_60%]">
         {/* Stats Cards */}
-        <div className="flex w-full mb-0">
-          <div className="flex flex-col  w-full justify-between gap-2">
+        <div className="flex gap-6 w-full mb-0">
+          <div className="flex flex-col justify-between w-full gap-6">
             {statsLoading
               ? // Loading skeleton for stats cards - matching new design
                 Array.from({ length: 2 }).map((_, index) => (
@@ -758,47 +739,39 @@ export function InnovationBuiltInsidePage() {
                   </Card>
                 ))
               : Object.entries(sustainabilityStats).map(([key, value]) => (
-                  <MetricCard
+                  <Card
                     key={key}
-                    title={value.title}
-                    value={Math.round(value.total.value || 0)}
-                    valueLabel={value.total?.description}
-                    percentValue={value.percent?.value || 0}
-                    percentLabel={value.percent?.description}
-                  />
-                  // <Card
-                  //   key={key}
-                  //   className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50"
-                  // >
-                  //   <CardContent className="p-0 h-full">
-                  //     <div className="flex flex-col justify-between gap-2 h-full">
-                  //       <div className="flex justify-between items-center border-b-2 border-gray-500/20 ">
-                  //         <h3 className="text-lg font-semibold text-white  p-4">
-                  //           {value.title}
-                  //         </h3>
-                  //       </div>
-                  //       <div className="flex items-center justify-between p-6 flex-row-reverse">
-                  //         <div className="flex flex-col">
-                  //           <span className="text-3xl font-bold text-pr-green mb-1 font-persian">
-                  //             % {value.percent?.value}
-                  //           </span>
-                  //           <span className="text-sm text-gray-400 font-persian">
-                  //             {value.percent?.description}
-                  //           </span>
-                  //         </div>
-                  //         <b className="block w-0.5 h-8 bg-gray-600 rotate-45" />
-                  //         <div className="flex flex-col">
-                  //           <span className="text-3xl font-bold text-pr-green mb-1 font-persian">
-                  //             {value.total?.value}
-                  //           </span>
-                  //           <span className="text-sm text-gray-400 font-persian">
-                  //             {value.total?.description}
-                  //           </span>
-                  //         </div>
-                  //       </div>
-                  //     </div>
-                  //   </CardContent>
-                  // </Card>
+                    className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50"
+                  >
+                    <CardContent className="p-0 h-full">
+                      <div className="flex flex-col justify-between gap-2 h-full">
+                        <div className="flex justify-between items-center border-b-2 border-gray-500/20 ">
+                          <h3 className="text-lg font-semibold text-white  p-4">
+                            {value.title}
+                          </h3>
+                        </div>
+                        <div className="flex items-center justify-between p-6 flex-row-reverse">
+                          <div className="flex flex-col">
+                            <span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
+                              % {value.percent?.value}
+                            </span>
+                            <span className="text-sm text-gray-400 font-persian">
+                              {value.percent?.description}
+                            </span>
+                          </div>
+                          <b className="block w-0.5 h-8 bg-gray-600 rotate-45" />
+                          <div className="flex flex-col">
+                            <span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
+                              {value.total?.value}
+                            </span>
+                            <span className="text-sm text-gray-400 font-persian">
+                              {value.total?.description}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
                 ))}
 
             {statsLoading ? (
@@ -898,7 +871,7 @@ export function InnovationBuiltInsidePage() {
         <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-max">
           <CardContent className="p-0">
             <div className="relative ">
-              <Table containerClassName="overflow-auto custom-scrollbar h-[calc(100vh-160px)]">
+              <Table containerClassName="overflow-auto custom-scrollbar h-[calc(90vh-15px)]">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -1061,7 +1034,7 @@ export function InnovationBuiltInsidePage() {
 
       {/* Project Details Dialog */}
       <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  max-w-5xl  overflow-y-auto">
+        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  max-w-6xl  overflow-y-auto">
           <DialogHeader>
             <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
               شرح پروژه
@@ -1123,6 +1096,7 @@ export function InnovationBuiltInsidePage() {
                       <div className="flex flex-col  justify-center items-center">
                         <span className="block w-0.5 h-14 bg-white"></span>
                         <span className="text-white border border-white p-1 px-2 text-xs rounded-lg">
+                          {" "}
                           سطح تکنولوژی
                         </span>
                       </div>
@@ -1286,7 +1260,7 @@ export function InnovationBuiltInsidePage() {
                     ))}
                   </div>
                 ) : (
-                  <ResponsiveContainer width="100%" height={400}>
+                  <ResponsiveContainer width="100%" height={420}>
                     <LineChart
                       data={dialogChartData}
                       margin={{ top: 20, right: 70, left: 30, bottom: 80 }}

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

@@ -15,7 +15,6 @@ import moment from "moment-jalaali";
 import { useCallback, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { Badge } from "~/components/ui/badge";
-import { BaseCard } from "~/components/ui/base-card";
 import { Button } from "~/components/ui/button";
 import { Card, CardContent } from "~/components/ui/card";
 import { Checkbox } from "~/components/ui/checkbox";
@@ -34,10 +33,8 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import { EventBus, formatNumber } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
+import { formatNumber } from "~/lib/utils";
 import { DashboardLayout } from "../layout";
 
 moment.loadPersian({ usePersianDigits: true });
@@ -52,11 +49,6 @@ interface ProcessInnovationData {
   amount_currency_reduction: string;
   Reduce_rate_failure: string;
   observer: string;
-  // optional detailed fields returned by API
-  project_description?: string;
-  start_date?: string;
-  done_date?: string;
-  approved_budget?: string;
 }
 
 interface ProjectStats {
@@ -67,11 +59,9 @@ interface ProjectStats {
   percent_reduction_value_currency: string;
   percent_sum_stopping_production: string;
   percent_throat_removal: string;
-  percent_operating_cost_before_innovation: string;
   sum_reducing_breakdowns: number;
   sum_reduction_value_currency: number;
   sum_stopping_production: number;
-  sum_operating_cost_reduction: number;
 }
 
 interface SortConfig {
@@ -96,11 +86,9 @@ interface InnovationStats {
   currencyReductionSum: number; // مجموع کاهش ارز بری (میلیون ریال)
   frequentFailuresReductionSum: number; // مجموع کاهش خرابی های پرتکرار
   percentProductionStops: number | string; // درصد مقایسه‌ای جلوگیری از توقفات تولید
-  reductionCostOprationSum: number; // مجموع کاهش هزینه عملیاتی
   percentBottleneckRemoval: number | string; // درصد مقایسه‌ای رفع گلوگاه
   percentCurrencyReduction: number | string; // درصد مقایسه‌ای کاهش ارز بری
   percentFailuresReduction: number | string; // درصد مقایسه‌ای کاهش خرابی‌های پرتکرار
-  percentOperatingCostBeforeInnovation: number | string; // درصد مقایسه‌ای کاهش هزینه عملیاتی
 }
 
 const columns = [
@@ -129,14 +117,13 @@ export function ProcessInnovationPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize] = useState(20);
   const [hasMore, setHasMore] = useState(true);
-  const [date, setDate] = useStoredDate();
+  const [totalCount, setTotalCount] = useState(0);
   const [actualTotalCount, setActualTotalCount] = useState(0);
   const [statsLoading, setStatsLoading] = useState(false);
   const [stats, setStats] = useState<InnovationStats>({
     totalProjects: 0,
     averageScore: 0,
     productionStopsPreventionSum: 0,
-    reductionCostOprationSum: 0,
     bottleneckRemovalCount: 0,
     currencyReductionSum: 0,
     frequentFailuresReductionSum: 0,
@@ -144,7 +131,6 @@ export function ProcessInnovationPage() {
     percentBottleneckRemoval: 0,
     percentCurrencyReduction: 0,
     percentFailuresReduction: 0,
-    percentOperatingCostBeforeInnovation: 0,
   });
   const [sortConfig, setSortConfig] = useState<SortConfig>({
     field: "start_date",
@@ -160,60 +146,58 @@ export function ProcessInnovationPage() {
   const [stateCard, setStateCard] = useState({
     productionstopsprevention: {
       id: "productionstopsprevention",
-      title: "توقفات تولید",
+      title: "جلوگیری از توقفات تولید",
       value: formatNumber(
         stats.productionStopsPreventionSum.toFixed?.(1) ??
           stats.productionStopsPreventionSum
       ),
       description: "تن افزایش یافته",
-      icon: CirclePause,
-      color: "text-pr-green",
+      icon: <CirclePause />,
+      color: "text-emerald-400",
     },
     bottleneckremoval: {
       id: "bottleneckremoval",
-      title: "گلوگاه ها",
+      title: "رفع گلوگاه",
       value: formatNumber(stats.bottleneckRemovalCount),
       description: "تعداد رفع گلوگاه",
-      icon: Funnel,
-      color: "text-pr-green",
+      icon: <Funnel />,
+      color: "text-emerald-400",
     },
     currencyreduction: {
       id: "currencyreduction",
-      title: "ارز بری",
+      title: "کاهش ارز بری",
       value: formatNumber(
         stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
       ),
       description: "دلار کاهش یافته",
-      icon: DollarSign,
-      color: "text-pr-green",
-    },
-    decreaseCurrencyOperation: {
-      id: "decreaseCurrencyOperation",
-      title: "هزینه های عملیاتی",
-      value: formatNumber(
-        stats.reductionCostOprationSum.toFixed?.(0) ??
-          stats.reductionCostOprationSum
-      ),
-      description: "میلیون ریال کاهش یافته",
-      icon: DollarSign,
-      color: "text-pr-green",
+      icon: <DollarSign />,
+      color: "text-emerald-400",
     },
     frequentfailuresreduction: {
       id: "frequentfailuresreduction",
-      title: "خرابی های پرتکرار",
+      title: "کاهش خرابی های پرتکرار",
       value: formatNumber(
         stats.frequentFailuresReductionSum.toFixed?.(1) ??
           stats.frequentFailuresReductionSum
       ),
-      description: "خرابی پر تکرار کاهش یافته",
-      icon: Wrench,
-      color: "text-pr-green",
+      description: "مجموع درصد کاهش خرابی",
+      icon: <Wrench />,
+      color: "text-emerald-400",
     },
   });
 
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
 
+  // Selection handlers
+  const handleSelectAll = () => {
+    if (selectedProjects.size === projects.length) {
+      setSelectedProjects(new Set());
+    } else {
+      setSelectedProjects(new Set(projects.map((p) => p.project_no)));
+    }
+  };
+
   const handleSelectProject = (projectNo: string) => {
     const newSelected = new Set(selectedProjects);
     if (newSelected.has(projectNo)) {
@@ -266,14 +250,11 @@ export function ProcessInnovationPage() {
           "observer",
         ],
         Sorts: [["start_date", "asc"]],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
       });
 
+      console.log(JSON.parse(response.data));
       if (response.state === 0) {
         const dataString = response.data;
         if (dataString && typeof dataString === "string") {
@@ -282,16 +263,16 @@ export function ProcessInnovationPage() {
             if (Array.isArray(parsedData)) {
               if (reset) {
                 setProjects(parsedData);
-                // setTotalCount(parsedData.length);
+                setTotalCount(parsedData.length);
               } else {
                 setProjects((prev) => [...prev, ...parsedData]);
-                // setTotalCount((prev) => prev + parsedData.length);
+                setTotalCount((prev) => prev + parsedData.length);
               }
               setHasMore(parsedData.length === pageSize);
             } else {
               if (reset) {
                 setProjects([]);
-                // setTotalCount(0);
+                setTotalCount(0);
               }
               setHasMore(false);
             }
@@ -299,14 +280,14 @@ export function ProcessInnovationPage() {
             console.error("Error parsing project data:", parseError);
             if (reset) {
               setProjects([]);
-              // setTotalCount(0);
+              setTotalCount(0);
             }
             setHasMore(false);
           }
         } else {
           if (reset) {
             setProjects([]);
-            // setTotalCount(0);
+            setTotalCount(0);
           }
           setHasMore(false);
         }
@@ -314,7 +295,7 @@ export function ProcessInnovationPage() {
         toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
         if (reset) {
           setProjects([]);
-          // setTotalCount(0);
+          setTotalCount(0);
         }
         setHasMore(false);
       }
@@ -323,7 +304,7 @@ export function ProcessInnovationPage() {
       toast.error("خطا در دریافت اطلاعات پروژه‌ها");
       if (reset) {
         setProjects([]);
-        // setTotalCount(0);
+        setTotalCount(0);
       }
       setHasMore(false);
     } finally {
@@ -334,33 +315,19 @@ export function ProcessInnovationPage() {
   };
 
   const loadMore = useCallback(() => {
-    if (hasMore && !loading) {
+    if (!loadingMore && hasMore && !loading) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [hasMore, loading]);
+  }, [loadingMore, hasMore, loading]);
 
   useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
+    fetchProjects(true);
+    fetchTotalCount();
+  }, [sortConfig]);
 
   useEffect(() => {
-    if (date?.start && date?.end) {
-      fetchProjects(true);
-      fetchTotalCount();
-    }
-  }, [sortConfig, date]);
-
-  useEffect(() => {
-    if (date?.start && date?.end) fetchStats();
-  }, [selectedProjects, date]);
+    fetchStats();
+  }, [selectedProjects]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -372,12 +339,12 @@ export function ProcessInnovationPage() {
     const scrollContainer = document.querySelector(".overflow-auto");
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore) return;
+      if (!scrollContainer || !hasMore || loadingMore) return;
 
       const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
       const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
 
-      if (scrollPercentage == 1) {
+      if (scrollPercentage >= 0.9) {
         loadMore();
       }
     };
@@ -410,11 +377,7 @@ export function ProcessInnovationPage() {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [
-          ["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
       });
 
       if (response.state === 0) {
@@ -448,8 +411,6 @@ export function ProcessInnovationPage() {
             selectedProjects.size > 0
               ? Array.from(selectedProjects).join(" , ")
               : "",
-          start_date: date?.start || null,
-          end_date: date?.end || null,
         },
       });
 
@@ -480,13 +441,10 @@ export function ProcessInnovationPage() {
         totalProjects: parseNum(stats?.count_innovation_process_projects),
         averageScore: parseFloat(data[0].average_project_score),
         productionStopsPreventionSum: parseNum(stats?.sum_stopping_production),
-        reductionCostOprationSum: parseNum(stats?.sum_operating_cost_reduction),
         bottleneckRemovalCount: parseNum(stats?.count_throat_removal),
         currencyReductionSum: parseNum(stats?.sum_reduction_value_currency),
         frequentFailuresReductionSum: parseNum(stats?.sum_reducing_breakdowns),
         percentProductionStops: stats?.percent_sum_stopping_production,
-        percentOperatingCostBeforeInnovation:
-          stats?.percent_operating_cost_before_innovation,
         percentBottleneckRemoval: stats?.percent_throat_removal,
         percentCurrencyReduction: stats?.percent_reduction_value_currency,
         percentFailuresReduction: stats?.percent_reducing_breakdowns,
@@ -509,10 +467,6 @@ export function ProcessInnovationPage() {
           ...prev.currencyreduction,
           value: formatNumber(normalized.currencyReductionSum),
         },
-        decreaseCurrencyOperation: {
-          ...prev.decreaseCurrencyOperation,
-          value: formatNumber(normalized.reductionCostOprationSum),
-        },
       }));
       setStats(normalized);
     } catch (error) {
@@ -565,7 +519,7 @@ export function ProcessInnovationPage() {
           <Checkbox
             checked={selectedProjects.has(item.project_id)}
             onCheckedChange={() => handleSelectProject(item.project_id)}
-            className="data-[state=checked]:bg-pr-green data-[state=checked]:border-pr-green"
+            className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
           />
         );
       case "details":
@@ -574,35 +528,31 @@ export function ProcessInnovationPage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-pr-green underline-offset-4 underline font-normal  p-2 h-auto"
+            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
           >
             جزئیات بیشتر
           </Button>
         );
       case "amount_currency_reduction":
         return (
-          <span className="font-medium text-pr-green">
+          <span className="font-medium text-emerald-400">
             {formatCurrency(String(value))}
           </span>
         );
       case "project_no":
         return (
-          <Badge variant="outline" className="font-normal text-sm">
+          <Badge variant="outline" className="font-mono">
             {String(value)}
           </Badge>
         );
       case "title":
-        return (
-          <span className="font-normal text-sm text-white">
-            {String(value)}
-          </span>
-        );
+        return <span className="font-medium text-white">{String(value)}</span>;
       case "project_status":
         return (
           <div className="flex items-center gap-1">
             <Badge
-              variant={statusColor(value as projectStatus)}
-              className="font-normal text-base border-2 p-0 block w-2 h-2 rounded-full"
+              variant={statusColor(value)}
+              className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
               style={{
                 border: "none",
               }}
@@ -612,10 +562,7 @@ export function ProcessInnovationPage() {
         );
       case "project_rating":
         return (
-          <Badge
-            variant="outline"
-            className="text-base font-semibold text-center border-none"
-          >
+          <Badge variant="outline" className="text-lg text-center border-none">
             {formatNumber(String(value))}
           </Badge>
         );
@@ -634,201 +581,122 @@ export function ProcessInnovationPage() {
 
   return (
     <DashboardLayout title="نوآوری در فرآیند">
-      <div className="flex flex-col gap-4">
+      <div className="p-6 space-y-4">
         {/* Stats Cards */}
-        <div className="flex gap-4">
-          <div className="space-y-4 w-full">
+        <div className="flex gap-6">
+          <div className="space-y-6 w-full">
             {/* Stats Grid */}
-            <div className="h-full">
-              {loading || statsLoading ? (
-                // Skeleton cards
-                <div className="flex flex-wrap justify-between gap-3">
-                  {Array.from({ length: 6 }).map((_, index) => (
-                    <BaseCard
+            <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="rounded-2xl overflow-hidden w-full sm:w-[48%] md:w-[30%]"
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
                     >
-                      <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 rounded-full w-fit">
-                            <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
+                      <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%" }}
+                            />
                           </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%" }}
-                          />
+                      </CardContent>
+                    </Card>
+                  ))
+                : Object.entries(stateCard).map(([key, 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>
+                          </div>
                         </div>
-                      </div>
-                    </BaseCard>
+                      </CardContent>
+                    </Card>
                   ))}
-                </div>
-              ) : (
-                <div className="flex flex-col h-full gap-5">
-                  <div className="flex flex-row gap-4 h-full">
-                    <BaseCard
-                      key={stateCard.productionstopsprevention.id}
-                      title={stateCard.productionstopsprevention.title}
-                      className="border-gray-700/50 w-full"
-                      icon={stateCard.productionstopsprevention.icon}
-                    >
-                      <div className="flex items-center justify-center flex-col">
-                        <div className="flex items-center gap-4">
-                          <div className="text-center">
-                            <p className="text-3xl text-pr-green font-bold mb-1">
-                              {stateCard.productionstopsprevention.value}
-                            </p>
-                            <div className="text-[11px] text-[#ACACAC] font-light font-persian">
-                              {stateCard.productionstopsprevention.description}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </BaseCard>
-
-                    <BaseCard
-                      key={stateCard.frequentfailuresreduction.id}
-                      title={stateCard.frequentfailuresreduction.title}
-                      className="border-gray-700/50 w-full"
-                      icon={stateCard.frequentfailuresreduction.icon}
-                    >
-                      <div className="flex items-center justify-center flex-col">
-                        <div className="flex items-center gap-4">
-                          <div className="text-center">
-                            <p className="text-3xl text-pr-green font-bold mb-1">
-                              {stateCard.frequentfailuresreduction.value}
-                            </p>
-                            <div className="text-[11px] text-[#ACACAC] font-light font-persian">
-                              {stateCard.frequentfailuresreduction.description}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </BaseCard>
-                  </div>
-                  <div className="flex flex-row gap-4 h-full">
-                    <BaseCard
-                      key={stateCard.currencyreduction.id}
-                      title={stateCard.currencyreduction.title}
-                      className="border-gray-700/50 w-full"
-                      icon={stateCard.currencyreduction.icon}
-                    >
-                      <div className="flex items-center justify-center flex-col">
-                        <div className="flex items-center gap-4">
-                          <div className="text-center">
-                            <p className="text-3xl text-pr-green font-bold mb-1">
-                              {stateCard.currencyreduction.value}
-                            </p>
-                            <div className="text-[11px] text-[#ACACAC] font-light font-persian">
-                              {stateCard.currencyreduction.description}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </BaseCard>
-                    <BaseCard
-                      key={stateCard.decreaseCurrencyOperation.id}
-                      title={stateCard.decreaseCurrencyOperation.title}
-                      className="border-gray-700/50 w-full"
-                      icon={stateCard.decreaseCurrencyOperation.icon}
-                    >
-                      <div className="flex items-center justify-center flex-col">
-                        <div className="flex items-center gap-4">
-                          <div className="text-center">
-                            <p className="text-3xl text-pr-green font-bold mb-1">
-                              {stateCard.decreaseCurrencyOperation.value}
-                            </p>
-                            <div className="text-[11px] text-[#ACACAC] font-light font-persian">
-                              {stateCard.decreaseCurrencyOperation.description}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </BaseCard>
-                    <BaseCard
-                      key={stateCard.bottleneckremoval.id}
-                      title={stateCard.bottleneckremoval.title}
-                      className="border-gray-700/50 w-full"
-                      icon={stateCard.bottleneckremoval.icon}
-                    >
-                      <div className="flex items-center justify-center flex-col">
-                        <div className="flex items-center gap-4">
-                          <div className="text-center">
-                            <p className="text-3xl text-pr-green font-bold mb-1">
-                              {stateCard.bottleneckremoval.value}
-                            </p>
-                            <div className="text-[11px] text-[#ACACAC] font-light font-persian">
-                              {stateCard.bottleneckremoval.description}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </BaseCard>
-                  </div>
-                </div>
-              )}
             </div>
           </div>
 
           {/* Process Impacts Chart */}
-          {/* نمودار با الگوریتم Nice Numbers:
-              مثلاً اگر داده‌ها [10, 35, 63, 18] باشند:
-              - حداکثر: 63، با حاشیه 5% = 66.15
-              - Nice Max: 75 (گرد و خوانا)
-              - Ticks: [0, 20, 40, 60, 75]
-              این باعث می‌شود نمودار زیباتر و خوانا‌تر باشد */}
-          <BaseCard className="rounded-xl w-full overflow-hidden">
-            <CustomBarChart
-              title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
-              loading={statsLoading}
-              data={[
-                {
-                  label: "توقفات تولید",
-                  value: Number(stats.percentProductionStops) || 0,
-                  labelColor: "text-white",
-                },
-                {
-                  label: "رفع گلوگاه تولید",
-                  value: Number(stats.percentBottleneckRemoval) || 0,
-                  labelColor: "text-white",
-                },
-                {
-                  label: "ارز بری",
-                  value: Number(stats.percentCurrencyReduction) || 0,
-                  labelColor: "text-white",
-                },
-                {
-                  label: "خرابی پر تکرار",
-                  value: Number(stats.percentFailuresReduction) || 0,
-                  labelColor: "text-white",
-                },
-                {
-                  label: "هزینه های عملیاتی",
-                  value:
-                    Number(stats.percentOperatingCostBeforeInnovation) || 0,
-                  labelColor: "text-white",
-                },
-              ]}
-              barHeight="h-5"
-              showAxisLabels={true}
-            />
-          </BaseCard>
+          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
+            <CardContent>
+              <CustomBarChart
+                title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
+                loading={statsLoading}
+                data={[
+                  {
+                    label: "کاهش توقفات تولید",
+                    value: stats.percentProductionStops || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                  {
+                    label: "رفع گلوگاه تولید",
+                    value: stats.percentBottleneckRemoval || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                  {
+                    label: "کاهش ارز بری",
+                    value: stats.percentCurrencyReduction || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                  {
+                    label: "کاهش خرابی پر تکرار",
+                    value: stats.percentFailuresReduction || 0,
+                    color: "bg-emerald-400",
+                    labelColor: "text-white",
+                  },
+                ]}
+                barHeight="h-5"
+                showAxisLabels={true}
+              />
+            </CardContent>
+          </Card>
         </div>
 
         {/* Data Table */}
         <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
           <CardContent className="p-0">
             <div className="relative">
-              <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-420px)]">
+              <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -839,7 +707,14 @@ export function ProcessInnovationPage() {
                       >
                         {column.key === "select" ? (
                           <div className="flex items-center justify-center">
-                            <span></span>
+                            <Checkbox
+                              checked={
+                                selectedProjects.size === projects.length &&
+                                projects.length > 0
+                              }
+                              onCheckedChange={handleSelectAll}
+                              className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
+                            />
                           </div>
                         ) : column.sortable ? (
                           <button
@@ -875,7 +750,7 @@ export function ProcessInnovationPage() {
                         {columns.map((column) => (
                           <TableCell
                             key={column.key}
-                            className="text-right whitespace-nowrap border-pr-green py-1 px-2"
+                            className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
                           >
                             <div className="flex items-center gap-2">
                               <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
@@ -908,7 +783,7 @@ export function ProcessInnovationPage() {
                         {columns.map((column) => (
                           <TableCell
                             key={column.key}
-                            className={`text-right whitespace-nowrap border-pr-green py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
+                            className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
                           >
                             {renderCellContent(project, column)}
                           </TableCell>
@@ -925,7 +800,7 @@ export function ProcessInnovationPage() {
               {loadingMore && (
                 <div className="flex items-center justify-center py-1">
                   <div className="flex items-center gap-2">
-                    <RefreshCw className="w-4 h-4 animate-spin text-pr-green" />
+                    <RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
                     <span className="font-persian text-gray-300 text-xs"></span>
                   </div>
                 </div>
@@ -935,7 +810,7 @@ export function ProcessInnovationPage() {
 
           {/* Footer */}
 
-          <div className="p-2 px-4 bg-[#3F415A]">
+          <div className="p-2 px-4 bg-gray-700/50">
             <div className="flex gap-4 text-sm text-gray-300 font-persian justify-between sm:flex-col xl:flex-row">
               <div className="text-center gap-2 items-center  xl:w-1/3 pr-36 sm:w-full">
                 <div className="text-base text-gray-401 mb-1">
@@ -966,17 +841,15 @@ export function ProcessInnovationPage() {
       <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
         <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-4xl max-h-[80vh] overflow-y-auto">
           <DialogHeader>
-            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian font-semibold text-sm text-right">
+            <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
               شرح پروژه
             </DialogTitle>
           </DialogHeader>
-          <div className="space-y-4 flex justify-between text-right p-6">
+          <div className="space-y-4 flex justify-between text-right px-6">
             {/* Project Description */}
             <div className="flex-[4] border-l-2 border-gray-600">
-              <h2 className="font-bold text-base">
-                {selectedProjectDetails?.title}
-              </h2>
-              <p className="text-white font-normal text-base font-persian px-2 mt-2">
+              <h2 className="font-bold">{selectedProjectDetails?.title}</h2>
+              <p className="text-gray-300 font-persian px-2 mt-2">
                 {selectedProjectDetails?.project_description || "-"}
               </p>
             </div>
@@ -986,11 +859,11 @@ export function ProcessInnovationPage() {
               <div className="font-bold text-right ">جزئیات پروژه</div>
 
               <div className="flex items-center justify-between">
-                <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
-                  <Building2 className="h-4 text-pr-green text-sm font-light" />
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <Building2 className="h-4 text-green-500" />
                   زمان شروع:
                 </h4>
-                <span className="text-white font-normal text-base font-persian">
+                <span className="text-white font-bold font-persian">
                   {selectedProjectDetails?.start_date
                     ? moment(
                         selectedProjectDetails?.start_date,
@@ -1001,11 +874,11 @@ export function ProcessInnovationPage() {
               </div>
 
               <div className="flex items-center justify-between">
-                <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
-                  <PickaxeIcon className="h-4 text-pr-green text-sm font-light" />
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <PickaxeIcon className="h-4 text-green-500" />
                   زمان پایان:
                 </h4>
-                <span className="text-white font-normal text-base font-persian">
+                <span className="text-white font-bold font-persian">
                   {selectedProjectDetails?.done_date
                     ? moment(
                         selectedProjectDetails?.done_date,
@@ -1016,29 +889,27 @@ export function ProcessInnovationPage() {
               </div>
 
               <div className="flex items-center justify-between">
-                <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
-                  <UsersIcon className="h-4 text-pr-green text-sm font-light" />
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <UsersIcon className="h-4 text-green-500" />
                   هزینه برآورد شده:
                 </h4>
-                <span className="text-white font-normal text-base font-persian">
-                  {selectedProjectDetails?.approved_budget
-                    ? formatNumber(
-                        Number(
-                          selectedProjectDetails.approved_budget.replaceAll(
-                            ",",
-                            ""
-                          )
-                        )
+                <span className="text-white font-bold font-persian">
+                  {formatNumber(
+                    Number(
+                      selectedProjectDetails?.approved_budget.replaceAll(
+                        ",",
+                        ""
                       )
-                    : "-"}
+                    )
+                  ) || "-"}
                 </span>
               </div>
               <div className="flex items-center justify-between">
-                <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
-                  <UserIcon className="h-4 text-pr-green text-sm font-light" />
+                <h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
+                  <UserIcon className="h-4 text-green-500" />
                   نفر مرتبط:
                 </h4>
-                <span className="text-white font-normal text-base font-persian">
+                <span className="text-white font-bold font-persian">
                   {selectedProjectDetails?.observer || "-"}
                 </span>
               </div>

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

@@ -1,28 +1,18 @@
-import { saveAs } from "file-saver";
 import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import toast from "react-hot-toast";
-import XLSX from "xlsx-js-style";
 import { Badge } from "~/components/ui/badge";
 import { Card, CardContent } from "~/components/ui/card";
 import {
   Table,
   TableBody,
   TableCell,
-  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import {
-  EventBus,
-  formatCurrency,
-  formatNumber,
-  handleDataValue,
-} from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
+import { formatCurrency } from "~/lib/utils";
 import { DashboardLayout } from "../layout";
 
 interface ProjectData {
@@ -62,51 +52,51 @@ type ColumnDef = {
 };
 
 const columns: ColumnDef[] = [
-  { key: "title", label: "عنوان پروژه", sortable: true, width: "300px" },
+  { key: "title", label: "عنوان پروژه", sortable: true, width: "200px" },
   {
     key: "importance_project",
     label: "میزان اهمیت",
     sortable: true,
-    width: "160px",
+    width: "150px",
   },
   {
     key: "strategic_theme",
     label: "مضمون راهبردی",
     sortable: true,
-    width: "200px",
+    width: "160px",
   },
   {
     key: "value_technology_and_innovation",
     label: "ارزش فناوری و نوآوری",
     sortable: true,
-    width: "220px",
+    width: "200px",
   },
   {
     key: "type_of_innovation",
     label: "انواع نوآوری",
     sortable: true,
-    width: "160px",
+    width: "140px",
   },
-  { key: "innovation", label: "میزان نوآوری", sortable: true, width: "140px" },
+  { key: "innovation", label: "میزان نوآوری", sortable: true, width: "120px" },
   {
     key: "person_executing",
     label: "مسئول اجرا",
     sortable: true,
-    width: "180px",
+    width: "140px",
   },
   {
     key: "excellent_observer",
     label: "ناطر عالی",
     sortable: true,
-    width: "180px",
+    width: "140px",
   },
-  { key: "observer", label: "ناظر پروژه", sortable: true, width: "180px" },
-  { key: "moderator", label: "مجری", sortable: true, width: "180px" },
+  { key: "observer", label: "ناظر پروژه", sortable: true, width: "140px" },
+  { key: "moderator", label: "مجری", sortable: true, width: "140px" },
   {
     key: "executive_phase",
     label: "فاز اجرایی",
     sortable: true,
-    width: "160px",
+    width: "140px",
   },
   { key: "start_date", label: "تاریخ شروع", sortable: true, width: "120px" },
   {
@@ -175,14 +165,6 @@ export function ProjectManagementPage() {
   });
   const observerRef = useRef<HTMLDivElement>(null);
   const fetchingRef = useRef(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  // const [date, setDate] = useState<CalendarDate>({
-  //   start: `${jy}/01/01`,
-  //   end: `${jy}/12/30`,
-  // });
-
-  const [date, setDate] = useStoredDate();
 
   const fetchProjects = async (reset = false) => {
     // Prevent concurrent API calls
@@ -214,10 +196,7 @@ export function ProjectManagementPage() {
         OutputFields: outputFields,
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
         Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
-        Conditions: [
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [],
       });
 
       if (response.state === 0) {
@@ -282,29 +261,16 @@ export function ProjectManagementPage() {
     }
   };
 
-  useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
   const loadMore = useCallback(() => {
-    if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
+    if (!loadingMore && hasMore && !loading) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [hasMore, loading, loadingMore]);
+  }, [loadingMore, hasMore, loading]);
 
   useEffect(() => {
-    if (date.end && date.start) {
-      fetchProjects(true);
-      fetchTotalCount();
-    }
-  }, [sortConfig, date]);
+    fetchProjects(true);
+    fetchTotalCount();
+  }, [sortConfig]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -312,44 +278,30 @@ export function ProjectManagementPage() {
     }
   }, [currentPage]);
 
-  // Infinite scroll observer with debouncing
+  // Infinite scroll observer
   useEffect(() => {
-    const scrollContainer = scrollContainerRef.current;
+    const scrollContainer = document.querySelector(".overflow-auto");
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
-        return;
+      if (!scrollContainer || !hasMore || loadingMore) return;
 
-      // Clear previous timeout
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+
+      // Trigger load more when scrolled to 90% of the container
+      if (scrollPercentage >= 0.9) {
+        loadMore();
       }
-
-      // Debounce scroll events
-      scrollTimeoutRef.current = setTimeout(() => {
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-
-        // Trigger load more when scrolled to 95% of the container
-        if (scrollPercentage >= 0.95) {
-          loadMore();
-        }
-      }, 150);
     };
 
     if (scrollContainer) {
-      scrollContainer.addEventListener("scroll", handleScroll, {
-        passive: true,
-      });
+      scrollContainer.addEventListener("scroll", handleScroll);
     }
 
     return () => {
       if (scrollContainer) {
         scrollContainer.removeEventListener("scroll", handleScroll);
       }
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
     };
   }, [loadMore, hasMore, loadingMore]);
 
@@ -370,10 +322,7 @@ export function ProjectManagementPage() {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
-        ],
+        Conditions: [],
       });
 
       if (response.state === 0) {
@@ -394,16 +343,21 @@ export function ProjectManagementPage() {
     }
   };
 
-  // const handleRefresh = () => {
-  //   fetchingRef.current = false; // Reset fetching state on refresh
-  //   setCurrentPage(1);
-  //   setProjects([]);
-  //   setHasMore(true);
-  //   fetchProjects(true);
-  //   fetchTotalCount();
-  // };
+  const handleRefresh = () => {
+    fetchingRef.current = false; // Reset fetching state on refresh
+    setCurrentPage(1);
+    setProjects([]);
+    setHasMore(true);
+    fetchProjects(true);
+    fetchTotalCount();
+  };
 
-  // ...existing code...
+  const formatNumber = (value: string | number) => {
+    if (value === undefined || value === null || value === "") return "0";
+    const numericValue = typeof value === "string" ? Number(value) : value;
+    if (Number.isNaN(numericValue)) return "0";
+    return new Intl.NumberFormat("fa-IR").format(numericValue as number);
+  };
 
   const toPersianDigits = (input: string | number): string => {
     const str = String(input);
@@ -545,160 +499,6 @@ export function ProjectManagementPage() {
     }
   };
 
-  // Categories for which we'll generate/display color legends
-  const categoryDefs = [
-    {
-      key: "strategic_theme",
-      label: "مضمون راهبردی",
-      palette: ["#6D53FB", "#7C3AED", "#5B21B6", "#4C1D95", "#A78BFA"],
-    },
-    {
-      key: "value_technology_and_innovation",
-      label: "ارزش فناوری و نوآوری",
-      palette: ["#A757FF", "#C084FC", "#8B5CF6", "#7C3AED", "#D8B4FE"],
-    },
-    {
-      key: "type_of_innovation",
-      label: "انواع نوآوری",
-      palette: ["#E884CE", "#FB7185", "#F472B6", "#F97316", "#FBCFE8"],
-    },
-    {
-      key: "innovation",
-      label: "میزان نوآوری",
-      palette: ["#C3BF8B", "#10B981", "#F59E0B", "#EF4444", "#FDE68A"],
-    },
-    {
-      key: "executive_phase",
-      label: "فاز اجرایی",
-      palette: ["#C3BF8B", "#10B981", "#F59E0B", "#EF4444", "#FDE68A"],
-    },
-  ];
-
-  // Build a mapping of value -> color for each category based on loaded projects.
-  // We assign colors deterministically from the category palette in order of appearance.
-  const categoryColorMaps = useMemo(() => {
-    const maps: Record<string, Record<string, string>> = {};
-    categoryDefs.forEach((cat) => {
-      maps[cat.key] = {};
-      const seen = new Map<string, string>();
-      const values: string[] = projects
-        .map((p) => (p as any)[cat.key])
-        .filter((v) => v !== undefined && v !== null && String(v).trim() !== "")
-        .map((v) => String(v));
-
-      // preserve order of first appearance
-      values.forEach((val, idx) => {
-        if (!seen.has(val)) {
-          const color = cat.palette[seen.size % cat.palette.length];
-          seen.set(val, color);
-        }
-      });
-
-      seen.forEach((color, val) => {
-        maps[cat.key][val] = color;
-      });
-    });
-    return maps;
-  }, [projects]);
-
-  // Compute counts and totals for each category so footer segments can be proportional
-  const categoryStats = useMemo(() => {
-    const stats: Record<
-      string,
-      { counts: Record<string, number>; total: number }
-    > = {};
-    categoryDefs.forEach((cat) => {
-      const counts: Record<string, number> = {};
-      let total = 0;
-      projects.forEach((p) => {
-        const val = String((p as any)[cat.key] ?? "").trim();
-        if (val !== "") {
-          counts[val] = (counts[val] || 0) + 1;
-          total += 1;
-        }
-      });
-      stats[cat.key] = { counts, total };
-    });
-    // also compute executive_phase counts
-    const execCounts: Record<string, number> = {};
-    let execTotal = 0;
-    projects.forEach((p) => {
-      const val = String((p as any)["executive_phase"] ?? "").trim();
-      if (val !== "") {
-        execCounts[val] = (execCounts[val] || 0) + 1;
-        execTotal += 1;
-      }
-    });
-    stats["executive_phase"] = { counts: execCounts, total: execTotal };
-
-    return stats;
-  }, [projects]);
-
-  // Importance counts (بالا، متوسط، پایین) for footer bar
-  const importanceCounts = useMemo(() => {
-    const counts: Record<string, number> = {};
-    let total = 0;
-    projects.forEach((p) => {
-      const val = String((p as any).importance_project ?? "").trim();
-      if (val !== "") {
-        counts[val] = (counts[val] || 0) + 1;
-        total += 1;
-      }
-    });
-    return { counts, total };
-  }, [projects]);
-
-  // Numeric averages for specified columns
-  const numericAverages = useMemo(() => {
-    const keys = [
-      "remaining_time",
-      "renewed_duration",
-      "deviation_from_program",
-      "approved_budget",
-      "budget_spent",
-      "cost_deviation",
-    ];
-    const res: Record<string, number | null> = {};
-
-    // remaining_time is computed from end_date
-    const remainingValues: number[] = projects
-      .map((p) => calculateRemainingDays((p as any).end_date))
-      .filter((v) => v !== null) as number[];
-    res["remaining_time"] = remainingValues.length
-      ? Math.round(
-          remainingValues.reduce((a, b) => a + b, 0) / remainingValues.length
-        )
-      : null;
-
-    // For other keys, parse numeric values
-    keys.forEach((k) => {
-      if (k === "remaining_time") return;
-      const vals: number[] = projects
-        .map((p) => {
-          const raw = (p as any)[k];
-          if (raw == null) return NaN;
-          const num = Number(
-            String(raw)
-              .toString()
-              .replace(/[^0-9.-]/g, "")
-          );
-          return Number.isFinite(num) ? num : NaN;
-        })
-        .filter((n) => !Number.isNaN(n));
-      res[k] = vals.length
-        ? vals.reduce((a, b) => a + b, 0) / vals.length
-        : null;
-    });
-
-    return res;
-  }, [projects]);
-
-  const getCategoryColor = (categoryKey: string, value: unknown) => {
-    const val = value == null ? "" : String(value);
-    const map = categoryColorMaps[categoryKey] || {};
-    return map[val] ?? "#6B7280"; // fallback gray
-  };
-
   const renderCellContent = (item: ProjectData, column: ColumnDef) => {
     const apiField = column.apiField ?? column.key;
     const value = (item as any)[apiField];
@@ -713,7 +513,7 @@ export function ProjectManagementPage() {
         return (
           <span
             dir="ltr"
-            className="flex justify-end gap-1 items-center"
+            className="font-medium flex justify-end gap-1 items-center"
             style={{ color }}
           >
             <span>روز</span> {toPersianDigits(days)}
@@ -724,65 +524,55 @@ export function ProjectManagementPage() {
       case "value_technology_and_innovation":
       case "type_of_innovation":
       case "innovation":
-      case "executive_phase": {
-        const color = getCategoryColor(column.key, value);
         return (
           <span className="inline-flex items-center justify-end flex-row-reverse gap-2 w-full">
-            <span className="text-gray-300">
-              {!!value ? String(value) : "-"}
-            </span>
+            <span className="text-gray-300">{String(value) || "-"}</span>
             <span
               style={{
-                backgroundColor: color,
-                display: !value ? "none" : "block",
+                backgroundColor: `${column.key === "strategic_theme" ? "#6D53FB" : column.key === "value_technology_and_innovation" ? "#A757FF" : column.key === "type_of_innovation" ? "#E884CE" : "#C3BF8B"}`,
               }}
-              className="inline-block w-2 h-2 rounded-full"
+              className="inline-block w-2 h-2 rounded-full bg-emerald-400"
             />
           </span>
         );
-      }
       case "approved_budget":
       case "budget_spent":
         return (
-          <span className=" text-emerald-400 font-normal">
+          <span className="font-medium text-emerald-400">
             {formatCurrency(String(value))}
           </span>
         );
       case "deviation_from_program":
       case "cost_deviation":
         return (
-          <span className="text-sm font-normal">
-            {formatNumber(value as any)}
-          </span>
+          <span className="text-gray-300">{formatNumber(value as any)}</span>
         );
       case "start_date":
       case "end_date":
       case "done_date":
         return (
-          <span className=" text-sm font-normal">
-            {formatDate(String(value))}
-          </span>
+          <span className="text-gray-300">{formatDate(String(value))}</span>
         );
       case "project_no":
         return (
-          <Badge variant="teal" className="border-emerald-500/50">
+          <Badge
+            variant="outline"
+            className="font-mono text-emerald-400 border-emerald-500/50"
+          >
             {String(value)}
           </Badge>
         );
       case "title":
-        return (
-          <span className="text-sm font-normal text-white">
-            {String(value)}
-          </span>
-        );
+        return <span className="font-medium text-white">{String(value)}</span>;
       case "importance_project":
         return (
           <Badge
             variant="outline"
-            className="border-2 text-sm rounded-lg"
+            className="font-medium border-2"
             style={{
               color: getImportanceColor(String(value)),
               borderColor: getImportanceColor(String(value)),
+              backgroundColor: `${getImportanceColor(String(value))}20`,
             }}
           >
             {String(value)}
@@ -790,356 +580,108 @@ export function ProjectManagementPage() {
         );
       default:
         return (
-          <span className="font-light text-sm">
+          <span className="text-gray-300">
             {(value && String(value)) || "-"}
           </span>
         );
     }
   };
 
-  // const totalPages = Math.ceil(totalCount / pageSize);
-
-  const exportToExcel = async () => {
-    let arr = [];
-    const data = await fetchExcelData();
-    debugger;
-    for (let i = 0; i < data.length; i++) {
-      let obj: Record<string, any> = {};
-      const project = data[i];
-
-      Object.entries(project).forEach(([pKey, pValue]) => {
-        Object.values(columns).forEach((col) => {
-          if (pKey === col.key) {
-            ``;
-            obj[col.label] = handleDataValue(
-              pValue?.includes(",") ? pValue.replaceAll(",", "") : pValue
-            );
-          }
-        });
-      });
-
-      arr.push(obj);
-    }
-
-    // تبدیل داده‌ها به worksheet
-    const worksheet = XLSX.utils.json_to_sheet(arr);
-
-    // ساخت workbook
-    const workbook = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(workbook, worksheet, "People");
-
-    // تبدیل به فایل باینری
-    const excelBuffer = XLSX.write(workbook, {
-      bookType: "xlsx",
-      type: "array",
-    });
-
-    const blob = new Blob([excelBuffer], {
-      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
-    });
-    saveAs(blob, "people.xls");
-  };
-
-  const fetchExcelData = async () => {
-    const fetchableColumns = columns.filter((c) => !c.computed);
-    const outputFields = fetchableColumns.map((c) => c.apiField ?? c.key);
-    const sortCol = columns.find((c) => c.key === sortConfig.field);
-    const sortField = sortCol?.computed
-      ? undefined
-      : (sortCol?.apiField ?? sortCol?.key);
-
-    const response = await apiService.select({
-      ProcessName: "project",
-      OutputFields: outputFields,
-      Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
-      Conditions: [
-        ["start_date", ">=", date?.start || null, "and"],
-        ["start_date", "<=", date?.end || null],
-      ],
-    });
-    const parsedData = JSON.parse(response.data);
-    return parsedData;
-  };
+  const totalPages = Math.ceil(totalCount / pageSize);
 
   return (
     <DashboardLayout title="مدیریت پروژه‌ها">
-      <div className="space-y-6">
-        {/* <div className="flex justify-end w-full mb-0 pl-2">
-          <Button
-            className="flex w-max  justify-center rounded-xl mb-4 border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A]  py-3 text-center items-center gap-3 "
-            variant="ghost"
-            size="sm"
-            onClick={exportToExcel}
-          >
-            <FileChartColumnIncreasing />
-            دانلود فایل اکسل
-          </Button>
-        </div> */}
-
+      <div className="p-6 space-y-6">
         {/* Data Table */}
         <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
-          {/* <div onClick={exportToExcel}>DownloadExcle</div> */}
           <CardContent className="p-0">
             <div className="relative">
-              <div
-                ref={scrollContainerRef}
-                className="relative overflow-auto custom-scrollbar max-h-[calc(100vh-120px)]"
-              >
-                <Table className="table-fixed">
-                  <TableHeader className="sticky top-0 z-50 bg-[#3F415A]">
-                    <TableRow className="bg-[#3F415A]">
-                      {columns.map((column) => (
-                        <TableHead
-                          key={column.key}
-                          className={` text-right font-persian whitespace-nowrap  text-white font-semibold bg-[#3F415A] sticky top-0 z-20`}
-                          style={{ width: column.width }}
-                        >
-                          {column.sortable ? (
-                            <button
-                              onClick={() => handleSort(column.key)}
-                              className="flex items-center gap-2"
-                            >
-                              <span>{column.label}</span>
-                              {sortConfig.field === column.key ? (
-                                sortConfig.direction === "asc" ? (
-                                  <ChevronUp className="w-4 h-4" />
-                                ) : (
-                                  <ChevronDown className="w-4 h-4" />
-                                )
+              <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(100vh-200px)]">
+                <TableHeader className="sticky top-0 z-50 bg-[#3F415A]">
+                  <TableRow className="bg-[#3F415A]">
+                    {columns.map((column) => (
+                      <TableHead
+                        key={column.key}
+                        className="text-right font-persian whitespace-nowrap text-gray-200 font-medium bg-[#3F415A] sticky top-0 z-20"
+                        style={{ width: column.width }}
+                      >
+                        {column.sortable ? (
+                          <button
+                            onClick={() => handleSort(column.key)}
+                            className="flex items-center gap-2"
+                          >
+                            <span>{column.label}</span>
+                            {sortConfig.field === column.key ? (
+                              sortConfig.direction === "asc" ? (
+                                <ChevronUp className="w-4 h-4" />
                               ) : (
-                                <div className="w-4 h-4" />
-                              )}
-                            </button>
-                          ) : (
-                            column.label
-                          )}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-
-                  <TableBody>
-                    {loading ? (
-                      // Skeleton loading rows (compact)
-                      Array.from({ length: 20 }).map((_, index) => (
-                        <TableRow
-                          key={`skeleton-${index}`}
-                          className="text-sm leading-tight h-8"
-                        >
-                          {columns.map((column) => (
-                            <TableCell
-                              key={column.key}
-                              className="text-right border-emerald-500/20 py-1 px-2 break-words"
-                            >
-                              <div className="flex items-center gap-2">
-                                <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
-                                <div
-                                  className="h-2.5 bg-gray-600 rounded animate-pulse"
-                                  style={{
-                                    width: `${Math.random() * 60 + 40}%`,
-                                  }}
-                                />
-                              </div>
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))
-                    ) : projects.length === 0 ? (
-                      <TableRow>
-                        <TableCell
-                          colSpan={columns.length}
-                          className="text-center py-8"
-                        >
-                          <span className="text-gray-400 font-persian">
-                            هیچ پروژه‌ای یافت نشد
-                          </span>
-                        </TableCell>
+                                <ChevronDown className="w-4 h-4" />
+                              )
+                            ) : (
+                              <div className="w-4 h-4" />
+                            )}
+                          </button>
+                        ) : (
+                          column.label
+                        )}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {loading ? (
+                    // Skeleton loading rows (compact)
+                    Array.from({ length: 20 }).map((_, index) => (
+                      <TableRow
+                        key={`skeleton-${index}`}
+                        className="text-sm leading-tight h-8"
+                      >
+                        {columns.map((column) => (
+                          <TableCell
+                            key={column.key}
+                            className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
+                              <div
+                                className="h-2.5 bg-gray-600 rounded animate-pulse"
+                                style={{ width: `${Math.random() * 60 + 40}%` }}
+                              />
+                            </div>
+                          </TableCell>
+                        ))}
                       </TableRow>
-                    ) : (
-                      projects.map((project, index) => (
-                        <TableRow
-                          key={`${project.project_no}-${index}`}
-                          className="text-sm leading-tight h-8"
-                        >
-                          {columns.map((column) => (
-                            <TableCell
-                              key={column.key}
-                              className="text-right border-emerald-500/20 text-sm py-1 px-2 break-words"
-                            >
-                              {renderCellContent(project, column)}
-                            </TableCell>
-                          ))}
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-
-                  <TableFooter className="sticky py-2 bottom-[-1px] bg-[#3F415A]">
+                    ))
+                  ) : projects.length === 0 ? (
                     <TableRow>
-                      {columns.map((column, colIndex) => {
-                        // First column: show total projects text similar to API count
-                        if (colIndex === 0) {
-                          return (
-                            <TableCell
-                              key={column.key}
-                              className="p-3 text-sm text-white font-semibold font-persian"
-                            >
-                              کل پروژه‌ها: {formatNumber(actualTotalCount)}
-                            </TableCell>
-                          );
-                        }
-                        // importance_project: render importance bar with specified colors
-                        if (column.key === "importance_project") {
-                          const imp = importanceCounts;
-                          const order = ["بالا", "متوسط", "پایین"];
-                          const colorFor = (k: string) => {
-                            switch (k) {
-                              case "بالا":
-                                return "var(--color-pr-green)"; // green
-                              case "متوسط":
-                                return "#69C8EA"; // blue-ish
-                              case "پایین":
-                                return "#F76276"; // red
-                              default:
-                                return "#6B7280";
-                            }
-                          };
-                          return (
-                            <TableCell key={column.key} className="p-1">
-                              <div className="w-full bg-gray-800 rounded-sm overflow-hidden h-3 flex">
-                                {order.map((k) => {
-                                  const cnt = imp.counts[k] || 0;
-                                  const widthPercent =
-                                    imp.total > 0 ? (cnt / imp.total) * 100 : 0;
-                                  return (
-                                    <div
-                                      key={k}
-                                      title={`${k} (${cnt})`}
-                                      className="h-3 flex items-center justify-center text-xs font-medium"
-                                      style={{
-                                        width: `${widthPercent}%`,
-                                        backgroundColor: colorFor(k),
-                                      }}
-                                    ></div>
-                                  );
-                                })}
-                              </div>
-                            </TableCell>
-                          );
-                        }
-
-                        // For category-like columns: strategic_theme, value_technology_and_innovation, innovation, executive_phase
-                        const categoryLike = [
-                          "strategic_theme",
-                          "value_technology_and_innovation",
-                          "innovation",
-                          "executive_phase",
-                        ];
-                        if (categoryLike.includes(column.key)) {
-                          const stat = categoryStats[column.key] || {
-                            counts: {},
-                            total: 0,
-                          };
-                          const entries = Object.entries(stat.counts);
-                          return (
-                            <TableCell key={column.key} className="p-1">
-                              <div className="w-full bg-gray-800 rounded-sm overflow-hidden h-3 flex">
-                                {entries.length > 0 ? (
-                                  entries.map(([val, cnt]) => {
-                                    let color =
-                                      categoryColorMaps[column.key]?.[val] ||
-                                      "#6B7280";
-                                    if (column.key === "executive_phase") {
-                                      color =
-                                        (phaseColors as any)[val] || color;
-                                    }
-                                    const widthPercent =
-                                      stat.total > 0
-                                        ? (cnt / stat.total) * 100
-                                        : 0;
-                                    return (
-                                      <div
-                                        key={val}
-                                        title={`${val} (${cnt})`}
-                                        className="h-3 flex items-center justify-center text-xs font-medium"
-                                        style={{
-                                          width: `${widthPercent}%`,
-                                          backgroundColor: color,
-                                        }}
-                                      ></div>
-                                    );
-                                  })
-                                ) : (
-                                  <div className="h-3 w-full bg-gray-700" />
-                                )}
-                              </div>
-                            </TableCell>
-                          );
-                        }
-
-                        // remove bar for type_of_innovation (show empty cell)
-                        if (column.key === "type_of_innovation") {
-                          return <TableCell key={column.key} className="p-1" />;
-                        }
-
-                        // remaining_time: show average days with color (green/red/white)
-                        if (column.key === "remaining_time") {
-                          const avg = numericAverages["remaining_time"] as
-                            | number
-                            | null;
-                          const color =
-                            avg == null
-                              ? "#9CA3AF"
-                              : avg > 0
-                                ? "#3AEA83"
-                                : avg < 0
-                                  ? "#F76276"
-                                  : "#FFFFFF";
-                          return (
-                            <TableCell
-                              key={column.key}
-                              className="p-2 text-right font-medium"
-                              style={{ color }}
-                            >
-                              {avg == null ? "-" : `${formatNumber(avg)} روز`}
-                            </TableCell>
-                          );
-                        }
-
-                        // For numeric columns: show average rounded
-                        const numericKeyMap: Record<string, string> = {
-                          renewed_duration: "renewed_duration",
-                          deviation_from_program: "deviation_from_program",
-                          approved_budget: "approved_budget",
-                          budget_spent: "budget_spent",
-                          cost_deviation: "cost_deviation",
-                        };
-                        const mapped = (numericKeyMap as any)[column.key];
-                        if (mapped) {
-                          const avg = numericAverages[mapped] as number | null;
-                          let display = "-";
-                          if (avg != null) {
-                            display = mapped.includes("budget")
-                              ? formatCurrency(String(Math.round(avg)))
-                              : formatNumber(Math.round(avg));
-                          }
-                          return (
-                            <TableCell
-                              key={column.key}
-                              className="p-2 text-right font-medium text-gray-200"
-                            >
-                              {display}
-                            </TableCell>
-                          );
-                        }
-
-                        // Default: empty cell to keep alignment
-                        return <TableCell key={column.key} className="p-1" />;
-                      })}
+                      <TableCell
+                        colSpan={columns.length}
+                        className="text-center py-8"
+                      >
+                        <span className="text-gray-400 font-persian">
+                          هیچ پروژه‌ای یافت نشد
+                        </span>
+                      </TableCell>
                     </TableRow>
-                  </TableFooter>
-                </Table>
-              </div>
+                  ) : (
+                    projects.map((project, index) => (
+                      <TableRow
+                        key={`${project.project_no}-${index}`}
+                        className="text-sm leading-tight h-8"
+                      >
+                        {columns.map((column) => (
+                          <TableCell
+                            key={column.key}
+                            className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
+                          >
+                            {renderCellContent(project, column)}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))
+                  )}
+                </TableBody>
+              </Table>
             </div>
 
             {/* Infinite scroll trigger */}
@@ -1147,13 +689,20 @@ export function ProjectManagementPage() {
               {loadingMore && (
                 <div className="flex items-center justify-center py-1">
                   <div className="flex items-center gap-2">
-                    <RefreshCw className="w-4 h-3 animate-spin text-emerald-400" />
+                    <RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
                     <span className="font-persian text-gray-300 text-xs"></span>
                   </div>
                 </div>
               )}
             </div>
           </CardContent>
+
+          {/* Footer */}
+          <div className="p-4 bg-gray-700/50">
+            <div className="flex items-center justify-between text-sm text-gray-300 font-persian">
+              <span>کل پروژه‌ها: {formatNumber(actualTotalCount)}</span>
+            </div>
+          </div>
         </Card>
       </div>
     </DashboardLayout>

app/components/dashboard/sidebar.tsx

@@ -1,33 +1,31 @@
 import {
+  Box,
+  Building2,
   ChevronDown,
+  ChevronRight,
+  FolderKanban,
   GalleryVerticalEnd,
-  House,
-  LightbulbIcon,
-  ListTodo,
+  Globe,
+  LayoutDashboard,
+  Leaf,
+  Lightbulb,
   LogOut,
-  Radar,
+  MonitorSmartphone,
+  Package,
   Settings,
   Star,
   Workflow,
-  DiscAlbum,
-  LucideLightbulb
 } from "lucide-react";
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router";
 import { useAuth } from "~/contexts/auth-context";
 import { cn } from "~/lib/utils";
 
-interface TitleInfo {
-  title: string;
-  icon?: React.ComponentType<{ className?: string }> | null;
-}
-
 interface SidebarProps {
   isCollapsed?: boolean;
   onToggleCollapse?: () => void;
   className?: string;
   onStrategicAlignmentClick?: () => void;
-  onTitleChange?: (info: TitleInfo) => void;
 }
 
 interface MenuItem {
@@ -40,51 +38,52 @@ interface MenuItem {
 }
 
 const menuItems: MenuItem[] = [
+ 
   {
     id: "dashboard",
     label: "صفحه اصلی",
-    icon: House,
+    icon: LayoutDashboard,
     href: "/dashboard",
   },
   {
     id: "project-management",
     label: "مدیریت اجرای پروژه‌ها",
-    icon: ListTodo,
+    icon: FolderKanban,
     href: "/dashboard/project-management",
   },
   {
     id: "innovation-basket",
     label: "سبد فناوری و نوآوری",
-    icon: LightbulbIcon,
+    icon: Box,
     children: [
       {
         id: "product-innovation",
         label: "نوآوری در محصول",
-        icon: null,
+        icon: Package,
         href: "/dashboard/innovation-basket/product-innovation",
       },
       {
         id: "process-innovation",
         label: "نوآوری در فرآیند",
-        icon: null,
+        icon: Workflow,
         href: "/dashboard/innovation-basket/process-innovation",
       },
       {
         id: "digital-innovation",
         label: "نوآوری دیجیتال",
-        icon: null,
+        icon: MonitorSmartphone,
         href: "/dashboard/innovation-basket/digital-innovation",
       },
       {
         id: "green-innovation",
         label: "نوآوری سبز",
-        icon: null,
+        icon: Leaf,
         href: "/dashboard/innovation-basket/green-innovation",
       },
       {
         id: "internal-innovation",
         label: "نوآوری ساخت داخل",
-        icon: null,
+        icon: Building2,
         href: "/dashboard/innovation-basket/internal-innovation",
       },
     ],
@@ -92,16 +91,22 @@ const menuItems: MenuItem[] = [
   {
     id: "ecosystem",
     label: "زیست بوم فناوری و نوآوری",
-    icon: Radar,
+    icon: Globe,
     href: "/dashboard/ecosystem",
   },
   {
     id: "ideas",
     label: "ایده‌های فناوری و نوآوری",
-    icon: LucideLightbulb,
+    icon: Lightbulb,
     href: "/dashboard/manage-ideas-tech",
   },
-    {
+  {
+    id: "top-innovations",
+    label: "نوآور برتر",
+    icon: Star,
+    href: "/dashboard/top-innovations",
+  },
+   {
     id: "strategic-alignment",
     label: "میزان انطباق راهبردی",
     icon: null,
@@ -110,12 +115,12 @@ const menuItems: MenuItem[] = [
 ];
 
 const bottomMenuItems: MenuItem[] = [
-  // {
-  //   id: "settings",
-  //   label: "تنظیمات",
-  //   icon: Settings,
-  //   href: "/dashboard/settings",
-  // },
+  {
+    id: "settings",
+    label: "تنظیمات",
+    icon: Settings,
+    href: "/dashboard/settings",
+  },
   {
     id: "logout",
     label: "خروج",
@@ -129,7 +134,6 @@ export function Sidebar({
   onToggleCollapse,
   className,
   onStrategicAlignmentClick,
-  onTitleChange,
 }: SidebarProps) {
   const location = useLocation();
   const [expandedItems, setExpandedItems] = useState<string[]>([]);
@@ -152,35 +156,6 @@ export function Sidebar({
       });
 
       setExpandedItems(newExpandedItems);
-      // Update header title based on current route
-      // If a child route is active, use that child's label prefixed by parent label
-      let activeTitle: string | undefined = undefined;
-      let activeIcon:
-        | React.ComponentType<{ className?: string }>
-        | null
-        | undefined = undefined;
-      menuItems.forEach((item) => {
-        if (item.children) {
-          const activeChild = item.children.find(
-            (child) => child.href && location.pathname === child.href
-          );
-          if (activeChild) {
-            activeTitle = `${item.label}-${activeChild.label}`;
-            // prefer child icon for the page; fallback to parent
-            activeIcon = activeChild.icon ?? item.icon ?? null;
-          }
-        }
-        if (!activeTitle && item.href && location.pathname === item.href) {
-          activeTitle = item.label;
-          activeIcon = item.icon ?? null;
-        }
-      });
-      if (onTitleChange) {
-        onTitleChange({
-          title: activeTitle ?? "صفحه اول",
-          icon: activeIcon ?? null,
-        });
-      }
     };
 
     autoExpandParents();
@@ -230,12 +205,6 @@ export function Sidebar({
     const ItemIcon = item.icon;
 
     const handleClick = () => {
-      // Only update header title for navigable items (those with href)
-      if (item.href && item.href !== "#") {
-        const icon = item.icon ?? null;
-        onTitleChange?.({ title: item.label, icon });
-      }
-
       if (item.id === "strategic-alignment") {
         onStrategicAlignmentClick?.();
       } else if (item.id === "logout") {
@@ -245,23 +214,30 @@ export function Sidebar({
       }
     };
 
-    if (item.id === "strategic-alignment") {
-      return (
-        <button
-          key={item.id}
-          className={cn(
-            "flex items-center justify-center  w-full px-2 rounded-none mt-4 transition-all duration-200 group"
-          )}
-          onClick={handleClick}
-        >
-          <div className="flex justify-center rounded-xl border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A]  py-2 text-center items-center gap-3 min-w-0 flex-1">
-            <span className="font-persian text-sm font-medium truncate">
-              {item.label}
-            </span>
-          </div>
-        </button>
-      );
-    }
+ if (item.id === "strategic-alignment") {
+return (
+       <button
+       key={item.id}
+            className={cn(
+              "w-full text-right",
+            )}
+            onClick={handleClick}
+          >
+            <div
+              className={cn(
+                "flex items-center justify-center  w-full px-2 rounded-lg mt-4 transition-all duration-200 group",
+              )}
+            >
+              <div className="flex justify-center rounded-xl border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A]  py-2 text-center items-center gap-3 min-w-0 flex-1">
+                  <span className="font-persian text-sm font-medium truncate">
+                    {item.label}
+                  </span>
+              </div>
+            </div>
+          </button>
+)
+
+  }
 
     return (
       <div key={item.id} className="relative">
@@ -269,24 +245,22 @@ export function Sidebar({
           <Link to={item.href} className="block">
             <div
               className={cn(
-                "flex items-center justify-between rounded-none w-full py-2 px-3 transition-all duration-200 group",
+                "flex items-center justify-between w-full py-2 px-3 rounded-lg transition-all duration-200 group",
                 level === 0 ? "mb-1" : "mb-0.5 mr-4",
                 isActive
-                  ? " text-pr-green border-r-2  border-pr-green"
-                  : "text-gray-300  hover:text-pr-green",
+                  ? " 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:text-pr-red"
+                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400"
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
-                {ItemIcon && (
-                  <ItemIcon
-                    className={cn(
-                      "w-5 h-5 flex-shrink-0",
-                      isActive ? "text-pr-green" : "text-current"
-                    )}
-                  />
-                )}
+                <ItemIcon
+                  className={cn(
+                    "w-5 h-5 flex-shrink-0",
+                    isActive ? "text-emerald-400" : "text-current"
+                  )}
+                />
                 {!isCollapsed && (
                   <span className="font-persian text-sm font-medium truncate">
                     {item.label}
@@ -297,7 +271,7 @@ export function Sidebar({
               {!isCollapsed && (
                 <div className="flex items-center gap-2 flex-shrink-0">
                   {item.badge && (
-                    <span className="bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-pr-green text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-persian">
+                    <span className="bg-gradient-to-r from-emerald-500/20 to-teal-500/20 text-emerald-400 text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-persian">
                       {item.badge}
                     </span>
                   )}
@@ -328,24 +302,22 @@ export function Sidebar({
           >
             <div
               className={cn(
-                "flex items-center justify-between w-full py-2 px-3 rounded-none transition-all duration-200 group",
+                "flex items-center justify-between w-full py-2 px-3 rounded-lg transition-all duration-200 group",
                 level === 0 ? "mb-1" : "mb-0.5 mr-4",
                 isActive
-                  ? " text-pr-green border-r-2 border-pr-green"
-                  : "text-gray-300 cursor-pointer hover:text-pr-green",
+                  ? " 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:text-pr-red"
+                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400"
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
-                {ItemIcon && (
-                  <ItemIcon
-                    className={cn(
-                      "w-5 h-5 flex-shrink-0",
-                      isActive ? "text-pr-green" : "text-current"
-                    )}
-                  />
-                )}
+                <ItemIcon
+                  className={cn(
+                    "w-5 h-5 flex-shrink-0",
+                    isActive ? "text-emerald-400" : "text-current"
+                  )}
+                />
                 {!isCollapsed && (
                   <span className="font-persian text-sm font-medium truncate">
                     {item.label}
@@ -356,7 +328,7 @@ export function Sidebar({
               {!isCollapsed && (
                 <div className="flex items-center gap-2 flex-shrink-0">
                   {item.badge && (
-                    <span className="bg-gradient-to-r from-emerald-500/20 to-teal-500/10 text-pr-green text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-persian">
+                    <span className="bg-gradient-to-r from-emerald-500/20 to-teal-500/10 text-emerald-400 text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-persian">
                       {item.badge}
                     </span>
                   )}
@@ -371,7 +343,7 @@ export function Sidebar({
                             (child) =>
                               child.href && location.pathname === child.href
                           )
-                          ? "text-pr-green"
+                          ? "text-emerald-400"
                           : "text-current"
                       )}
                     />
@@ -423,9 +395,9 @@ export function Sidebar({
               />
               <div className="font-persian">
                 <div className="text-sm font-semibold text-white">
-                  داشبورد مدیریت فناوری و نوآوری
+                  داشبورد اینوژن
                 </div>
-                {/* <div className="text-xs text-gray-400">نسخه ۰.۱</div> */}
+                <div className="text-xs text-gray-400">نسخه ۰.۱</div>
               </div>
             </div>
           ) : (
@@ -462,7 +434,7 @@ export function Sidebar({
       </div>
 
       {/* Collapse Toggle */}
-      {/* {onToggleCollapse && (
+      {onToggleCollapse && (
         <div className="p-3 border-t border-gray-500/30">
           <button
             onClick={onToggleCollapse}
@@ -479,7 +451,7 @@ export function Sidebar({
             )}
           </button>
         </div>
-      )} */}
+      )}
     </div>
   );
 }

app/components/dashboard/strategic-alignment-popup.tsx

@@ -1,80 +1,32 @@
-import { useEffect, useReducer, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import {
-  Bar,
   BarChart,
-  CartesianGrid,
-  Cell,
-  LabelList,
-  ResponsiveContainer,
+  Bar,
   XAxis,
   YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  LabelList,
+  Cell,
 } from "recharts";
-import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
-import { Skeleton } from "~/components/ui/skeleton";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import { EventBus, formatNumber } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
+import { Skeleton } from "~/components/ui/skeleton";
+import { formatNumber } from "~/lib/utils";
 import { ChartContainer } from "../ui/chart";
-import {
-  DropdownMenu,
-  DropdownMenuButton,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "../ui/dropdown-menu";
-import { TruncatedText } from "../ui/truncatedText";
 
 interface StrategicAlignmentData {
   strategic_theme: string;
-  operational_fee_count: number;
+  operational_fee_sum: number;
   percentage?: number;
 }
 
-interface DropDownConfig {
-  isOpen: boolean;
-  selectedValue: string;
-  dropDownItems: Array<string>;
-}
-
-type Action =
-  | { type: "OPEN" }
-  | { type: "CLOSE" }
-  | { type: "SETVALUE"; value: Array<string> }
-  | { type: "SELECT"; value: string };
-
-// const DropDownItems = [
-//   {
-//     id: 0,
-//     key: "همه مضامین",
-//     Value: "همه مضامین",
-//   },
-//   {
-//     id: 1,
-//     key: "ارزش های هم افزایی نوآورانه",
-//     Value: "همه مضامین",
-//   },
-//   {
-//     id: 2,
-//     key: "ارزش های خودکفایی نوآوورانه",
-//     Value: "همه مضامین",
-//   },
-//   {
-//     id: 3,
-//     key: "ارزش های فناوری های نوین",
-//     Value: "همه مضامین",
-//   },
-//   {
-//     id: 4,
-//     key: "ارزش های توسعه منابع انسانی",
-//     Value: "همه مضامین",
-//   },
-//   {
-//     id: 5,
-//     key: "ارزش های نوآوری سبز",
-//     Value: "همه مضامین",
-//   },
-// ];
-
 interface StrategicAlignmentPopupProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -88,10 +40,11 @@ const chartConfig = {
   },
 };
 
-const maxHeight = 150;
-const barHeights = () => Math.floor(Math.random() * maxHeight);
+  const maxHeight = 150; 
+  const barHeights =  () => Math.floor(Math.random() * maxHeight);
 
 const ChartSkeleton = () => (
+  
   <div className="flex justify-center h-96 w-full p-4">
     {/* Chart bars */}
     <div className=" w-full flex items-end gap-10">
@@ -104,7 +57,7 @@ const ChartSkeleton = () => (
         </div>
       ))}
     </div>
-    {/* Left space for Y-axis label */}
+       {/* Left space for Y-axis label */}
     <div className="flex flex-col justify-between mr-2">
       <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
       <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
@@ -120,14 +73,6 @@ export function StrategicAlignmentPopup({
 }: StrategicAlignmentPopupProps) {
   const [data, setData] = useState<StrategicAlignmentData[]>([]);
   const [loading, setLoading] = useState(false);
-  const contentRef = useRef<HTMLDivElement | null>(null);
-  const [state, dispatch] = useReducer(reducer, {
-    isOpen: false,
-    selectedValue: "همه مضامین",
-    dropDownItems: [],
-  });
-
-  const [date, setDate] = useStoredDate();
 
   useEffect(() => {
     if (open) {
@@ -135,29 +80,16 @@ export function StrategicAlignmentPopup({
     }
   }, [open]);
 
-  useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
-
   const fetchData = async () => {
     setLoading(true);
     try {
       const response = await apiService.select({
         ProcessName: "project",
-        OutputFields: ["strategic_theme", "count(operational_fee)"],
-        GroupBy: ["strategic_theme"],
-        Conditions: [
-          ["start_date", ">=", date?.start || null, "and"],
-          ["start_date", "<=", date?.end || null],
+        OutputFields: [
+          "strategic_theme",
+          "sum(operational_fee) as operational_fee_sum",
         ],
+        GroupBy: ["strategic_theme"],
       });
 
       const responseData =
@@ -165,12 +97,29 @@ export function StrategicAlignmentPopup({
           ? JSON.parse(response.data)
           : response.data;
 
-      setBarItems(responseData);
-      const dropDownItems = responseData.map(
-        (item: any) => item.strategic_theme
+      const processedData = responseData
+        .map((item: any) => ({
+          strategic_theme: item.strategic_theme || "N/A",
+          operational_fee_sum: Math.max(0, Number(item.operational_fee_sum)),
+        }))
+        .filter((item: StrategicAlignmentData) => item.strategic_theme !== "");
+
+      const total = processedData.reduce(
+        (acc: number, item: StrategicAlignmentData) =>
+          acc + item.operational_fee_sum,
+        0
       );
 
-      setDropDownValues(["همه مضامین", ...dropDownItems]);
+      const dataWithPercentage = processedData.map(
+        (item: StrategicAlignmentData) => ({
+          ...item,
+          percentage:
+            total > 0
+              ? Math.round((item.operational_fee_sum / total) * 100)
+              : 0,
+        })
+      );
+      setData(dataWithPercentage || []);
     } catch (error) {
       console.error("Error fetching strategic alignment data:", error);
     } finally {
@@ -178,174 +127,19 @@ export function StrategicAlignmentPopup({
     }
   };
 
-  const fetchDropDownItems = async (item: string) => {
-    try {
-      if (item !== "همه مضامین") {
-        const response = await apiService.select({
-          ProcessName: "project",
-          OutputFields: [
-            "value_technology_and_innovation",
-            "count(operational_fee)",
-          ],
-          Conditions: [
-            ["strategic_theme", "=", item, "and"],
-            ["start_date", ">=", date?.start || null, "and"],
-            ["start_date", "<=", date?.end || null],
-          ],
-          GroupBy: ["value_technology_and_innovation"],
-        });
-
-        const responseData =
-          typeof response.data === "string"
-            ? JSON.parse(response.data)
-            : response.data;
-        setBarItems(responseData);
-      } else fetchData();
-    } catch (error) {
-      console.error("Error fetching strategic alignment data:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  function reducer(state: DropDownConfig, action: Action): DropDownConfig {
-    switch (action.type) {
-      case "OPEN":
-        return { ...state, isOpen: true };
-      case "CLOSE":
-        return { ...state, isOpen: false };
-      case "SETVALUE":
-        return { ...state, dropDownItems: action.value };
-      case "SELECT":
-        return { ...state, selectedValue: action.value };
-      default:
-        return state;
-    }
-  }
-
-  const toggleMenuHandler = () => {
-    dispatch({
-      type: "OPEN",
-    });
-  };
-
-  const selectItem = (item: string) => {
-    dispatch({
-      type: "SELECT",
-      value: item,
-    });
-
-    dispatch({
-      type: "CLOSE",
-    });
-
-    fetchDropDownItems(item);
-  };
-
-  const setDropDownValues = (items: Array<string>) => {
-    dispatch({
-      type: "SETVALUE",
-      value: items,
-    });
-  };
-
-  const setBarItems = (responseData: any) => {
-    const processedData = responseData
-      .map((item: any) => ({
-        strategic_theme:
-          item.strategic_theme || item.value_technology_and_innovation || "N/A",
-        operational_fee_count: Math.max(0, Number(item.operational_fee_count)),
-      }))
-      .filter((item: StrategicAlignmentData) => item.strategic_theme !== "");
-
-    const total = processedData.reduce(
-      (acc: number, item: StrategicAlignmentData) =>
-        acc + item.operational_fee_count,
-      0
-    );
-
-    const dataWithPercentage = processedData.map(
-      (item: StrategicAlignmentData) => ({
-        ...item,
-        percentage:
-          total > 0
-            ? Math.round((item.operational_fee_count / total) * 100)
-            : 0,
-      })
-    );
-    setData(dataWithPercentage || []);
-  };
-
-  const dialogHandler = (status: boolean) => {
-    if (onOpenChange) onOpenChange(status);
-    dispatch({
-      type: "SELECT",
-      value: "همه مضامین",
-    });
-  };
-
-  useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        contentRef.current &&
-        !contentRef.current.contains(event.target as Node)
-      ) {
-        dispatch({
-          type: "CLOSE",
-        });
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [open]);
-
   return (
-    <Dialog open={open} onOpenChange={dialogHandler}>
+    <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="w-full max-w-4xl bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] text-white border-none">
-        <DialogHeader className="mb-10  w-full   border-b-2 border-gray-500/20">
-          <div>
-            <div className="flex">
-              <DropdownMenu
-                modal={true}
-                open={state.isOpen}
-                onOpenChange={toggleMenuHandler}
-              >
-                <DropdownMenuButton>{state.selectedValue}</DropdownMenuButton>
-
-                <DropdownMenuContent
-                  ref={contentRef}
-                  forceMount={true}
-                  className="w-56"
-                >
-                  {state.dropDownItems.map((item: string, key: number) => (
-                    <div
-                      onClick={() => selectItem(item)}
-                      key={`${key}-${item}`}
-                    >
-                      <DropdownMenuItem selected={state.selectedValue === item}>
-                        {item}
-                      </DropdownMenuItem>
-                    </div>
-                  ))}
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </div>
+        <DialogHeader className="border-b-3 mb-10 py-2 w-full pb-4  border-b-2 border-gray-500/20">
+          <DialogTitle className="ml-auto ">میزان انطباق راهبردی</DialogTitle>
         </DialogHeader>
 
         {loading ? (
           <ChartSkeleton />
         ) : (
           <>
-            <ResponsiveContainer width="100%" height={400}>
-              <ChartContainer
-                config={chartConfig}
-                className="aspect-auto h-96 w-full"
-              >
+            <ResponsiveContainer  width="100%" height={400}>
+              <ChartContainer  config={chartConfig} className="aspect-auto h-96 w-full">
                 <BarChart
                   data={data}
                   margin={{ left: 12, right: 12 }}
@@ -354,65 +148,49 @@ export function StrategicAlignmentPopup({
                   accessibilityLayer
                 >
                   <CartesianGrid vertical={false} stroke="#475569" />
-                  <XAxis
+               <XAxis
                     dataKey="strategic_theme"
                     tickLine={false}
                     axisLine={false}
                     tickMargin={10}
-                    interval={0}
-                    style={{ fill: "#94a3b8", fontSize: 14 }}
-                    tick={(props) => {
-                      const { x, y, payload } = props;
-                      return (
-                        <g transform={`translate(${x},${y})`}>
-                          <foreignObject width={80} height={20} x={-45} y={0}>
-                            <TruncatedText maxWords={2} text={payload.value} />
-                          </foreignObject>
-                        </g>
-                      );
-                    }}
+                    tick={{ fill: "#94a3b8", fontSize: 12 }}
                   />
                   <YAxis
                     domain={[0, 100]}
                     tickLine={false}
                     axisLine={false}
-                    tickMargin={20}
+                    tickMargin={8}
                     tick={{ fill: "#94a3b8", fontSize: 12 }}
                     tickFormatter={(value) =>
-                      `${formatNumber(Math.round(value))}`
+                      `${formatNumber(Math.round(value))}%`
                     }
-                    label={{
-                      value: "تعداد برنامه ها",
-                      angle: -90,
-                      position: "insideLeft",
-                      fill: "#94a3b8",
-                      fontSize: 11,
-                      offset: 0,
-                      dy: 0,
-                      style: { textAnchor: "middle" },
-                    }}
+                      label={{
+    value: "تعداد برنامه ها" , 
+    angle: -90,           
+    position: "insideLeft", 
+    fill: "#94a3b8",
+    fontSize: 14,
+    offset: 0,
+    dy: 0,                
+    style: { textAnchor: "middle" }, 
+  }}
                   />
 
-                  <Bar dataKey="percentage" radius={[8, 8, 0, 0]}>
+                  <Bar   dataKey="percentage" radius={[8, 8, 0, 0]}>
                     {data.map((entry, index) => (
-                      <Cell
-                        key={`cell-${index}`}
-                        fill={chartConfig.percentage.color}
-                      />
+                      <Cell key={`cell-${index}`} fill={chartConfig.percentage.color} />
                     ))}
                     <LabelList
                       dataKey="percentage"
                       position="top"
-                      offset={15}
                       style={{
                         fill: "#ffffff",
-                        fontSize: "16px",
+                        fontSize: "12px",
                         fontWeight: "bold",
                       }}
-                      formatter={(v: number) =>
-                        `${formatNumber(Math.round(v))}`
-                      }
+                      formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
                     />
+                    
                   </Bar>
                 </BarChart>
               </ChartContainer>

app/components/ecosystem/info-panel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import {
   Area,
   AreaChart,
@@ -10,12 +11,9 @@ import {
   XAxis,
   YAxis,
 } from "recharts";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { CustomBarChart } from "~/components/ui/custom-bar-chart";
-import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import { EventBus, formatNumber } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
+import { formatNumber } from "~/lib/utils";
 
 export interface CompanyDetails {
   id: string;
@@ -64,59 +62,38 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
   const [counts, setCounts] = useState<EcosystemCounts | null>(null);
   const [processData, setProcessData] = useState<ProcessActorsData[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-  // const [date, setDate] = useState<CalendarDate>();
-  const [date, setDate] = useStoredDate();
 
   useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
+    const fetchCounts = async () => {
+      setIsLoading(true);
+      try {
+        const [countsRes, processRes] = await Promise.all([
+          apiService.call<EcosystemCounts>({
+            ecosystem_count_function: {},
+          }),
+          apiService.call<ProcessActorsResponse[]>({
+            process_creating_actors_function: {},
+          }),
+        ]);
 
-    EventBus.on("dateSelected", handler);
+        setCounts(
+          JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0],
+        );
 
-    return () => {
-      EventBus.off("dateSelected", handler);
+        // Process the years data and fill missing years
+        const processedData = processYearsData(
+          JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors),
+        );
+        setProcessData(processedData);
+      } catch (err) {
+        console.error("Failed to fetch data:", err);
+      } finally {
+        setIsLoading(false);
+      }
     };
+    fetchCounts();
   }, []);
 
-  useEffect(() => {
-    if (date.end && date.start) fetchCounts();
-  }, [date]);
-
-  const fetchCounts = async () => {
-    setIsLoading(true);
-    try {
-      const [countsRes, processRes] = await Promise.all([
-        apiService.call<EcosystemCounts>({
-          ecosystem_count_function: {
-            start_date: date?.start || null,
-            end_date: date?.end || null,
-          },
-        }),
-        apiService.call<ProcessActorsResponse[]>({
-          process_creating_actors_function: {
-            start_date: date?.start || null,
-            end_date: date?.end || null,
-          },
-        }),
-      ]);
-
-      setCounts(
-        JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0]
-      );
-
-      // Process the years data and fill missing years
-      const processedData = processYearsData(
-        JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors)
-      );
-      setProcessData(processedData);
-    } catch (err) {
-      console.error("Failed to fetch data:", err);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   // Helper function to safely parse numbers
   const parseNumber = (value: string | undefined): number => {
     if (!value || value === "") return 0;
@@ -126,7 +103,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
 
   // Helper function to process years data and fill missing years
   const processYearsData = (
-    data: ProcessActorsResponse[]
+    data: ProcessActorsResponse[],
   ): ProcessActorsData[] => {
     if (!data || data.length === 0) return [];
 
@@ -144,7 +121,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         acc[item.start_year] = item.total_count;
         return acc;
       },
-      {} as Record<string, number>
+      {} as Record<string, number>,
     );
 
     for (let year = minYear; year <= maxYear; year++) {
@@ -190,7 +167,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.company_count) },
+        { label: "شرکت", value: parseNumber(counts.company_count) },
       ]
     : [];
 
@@ -279,7 +256,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
+                  className="absolute w-2 h-2 bg-green-400 rounded-full animate-pulse"
                   style={{
                     left: `${20 + i * 25}%`,
                     top: `${30 + Math.random() * 40}%`,
@@ -310,7 +287,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         {/* Actor Count Skeleton */}
         <CardHeader className="text-center pt-0 pb-4">
           <div className="w-36 h-5  rounded animate-pulse mx-auto mb-2"></div>
-          <div className="w-16 h-8 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
+          <div className="w-16 h-8 bg-green-400 bg-opacity-30 rounded animate-pulse mx-auto"></div>
         </CardHeader>
 
         {/* Bar Chart Skeleton */}
@@ -385,7 +362,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
+                  className="absolute w-2 h-2 bg-green-400 rounded-full animate-pulse"
                   style={{
                     left: `${20 + i * 25}%`,
                     top: `${30 + Math.random() * 40}%`,
@@ -401,7 +378,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         <CardContent className="pt-0 pb-6">
           <div className="bg-[rgba(255,255,255,0.1)] rounded-lg p-4 text-center">
             <div className="w-28 h-4 bg-gray-600 rounded animate-pulse mx-auto mb-1"></div>
-            <div className="w-12 h-6 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
+            <div className="w-12 h-6 bg-green-400 bg-opacity-30 rounded animate-pulse mx-auto"></div>
           </div>
         </CardContent>
       </Card>
@@ -424,22 +401,30 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
     <div className="space-y-4">
       <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]">
         <CardHeader className="text-center pt-4 pb-3 border-b-2 border-[#3F415A]">
-          <CardTitle className="font-persian text-base font-semibold text-white">
+          <CardTitle className="font-persian text-xl text-white">
             وضعیت زیست‌بوم فناوری و نوآوری
           </CardTitle>
         </CardHeader>
 
-        <CardHeader className="text-center pb-2 border-b-2 border-[#3F415A]">
-          <CardTitle className="font-persian text-sm text-white flex justify-between px-4">
+        {/* 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="font-bold text-3xl">
+            <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-sm text-white flex justify-between px-4">
+          <CardTitle className="font-persian text-xl text-white flex justify-between px-4">
             تعداد بازیگران
             <span className="font-bold text-3xl">
               {formatNumber(counts.actor_count)}
@@ -448,14 +433,13 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         </CardHeader>
 
         {/* Actor Count Display */}
-        <CardHeader className="text-right pt-4 mt-2 pb-2 text-sm font-semibold w-full">
+        <CardHeader className="text-right text-xl py-2 pb-4 font-bold w-full">
           تنوع بازیگران
         </CardHeader>
         {/* Middle - Bar Chart */}
         <CardContent className="flex-1 px-6 border-b-2 border-[#3F415A]">
           <div className="w-full">
             <CustomBarChart
-              hasPercent={false}
               data={barData.map((item) => ({
                 label: item.label,
                 value: item.value,
@@ -470,87 +454,55 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         </CardContent>
 
         {/* Area Chart Section */}
-        <CardContent className="p-2">
-          <div className="px-4">
-            <CardTitle className="font-persian text-sm font-semibold text-white mb-2">
+        <CardContent className="px-2 pb-4 border-b-2 border-[#3F415A] py-4">
+          <div className="mb-4">
+            <CardTitle className="font-persian text-lg text-white mb-2">
               روند ایجاد بازیگران در طول سال‌ها
             </CardTitle>
           </div>
-          <div className="h-42">
+          <div className="h-48">
             {processData.length > 0 ? (
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart
-                  accessibilityLayer
                   data={processData}
-                  margin={{ top: 25, right: 30, left: 0, bottom: 0 }}
+                  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
                 >
-                  <defs>
-                    <linearGradient
-                      id="fillDesktop"
-                      x1="0"
-                      y1="0"
-                      x2="0"
-                      y2="1"
-                    >
-                      <stop offset="0%" stopColor="#3AEA83" stopOpacity={1} />
-                      <stop offset="100%" stopColor="#3AEA83" stopOpacity={0} />
-                    </linearGradient>
-                  </defs>
-
                   <CartesianGrid
-                    vertical={false}
+                    strokeDasharray="3 3"
                     stroke="rgba(255,255,255,0.1)"
                   />
                   <XAxis
                     dataKey="year"
                     stroke="#9ca3af"
                     fontSize={12}
-                    tickLine={false}
-                    tickMargin={8}
-                    axisLine={false}
                     tickFormatter={formatPersianYear}
                   />
                   <YAxis
                     stroke="#9ca3af"
                     fontSize={12}
-                    tickMargin={12}
-                    tickLine={false}
-                    axisLine={false}
                     tickFormatter={(value) => formatNumber(value)}
                   />
-                  <Tooltip cursor={false} content={<></>} />
-
-                  {/* ✅ Use gradient for fill */}
+                  <Tooltip
+                    contentStyle={{
+                      backgroundColor: "#374151",
+                      border: "1px solid #6b7280",
+                      borderRadius: "6px",
+                      color: "#f3f4f6",
+                    }}
+                    labelFormatter={(value) =>
+                      `سال ${formatPersianYear(value.toString())}`
+                    }
+                    formatter={(value) => [
+                      formatNumber(value),
+                      "تعداد بازیگران",
+                    ]}
+                  />
                   <Area
                     type="monotone"
                     dataKey="value"
-                    stroke="#3AEA83"
-                    fill="url(#fillDesktop)"
+                    stroke="#34d399"
+                    fill="rgba(52, 211, 153, 0.25)"
                     strokeWidth={2}
-                    activeDot={({ cx, cy, payload }) => (
-                      <g>
-                        {/* Small circle */}
-                        <circle
-                          cx={cx}
-                          cy={cy}
-                          r={5}
-                          fill="#3AEA83"
-                          stroke="#fff"
-                          strokeWidth={2}
-                        />
-                        {/* Year label above point */}
-                        <text
-                          x={cx}
-                          y={cy - 10}
-                          textAnchor="middle"
-                          fontSize={12}
-                          fontWeight="bold"
-                          fill="#3AEA83"
-                        >
-                          {formatPersianYear(payload.year)}
-                        </text>
-                      </g>
-                    )}
                   />
                 </AreaChart>
               </ResponsiveContainer>
@@ -561,6 +513,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
             )}
           </div>
         </CardContent>
+
       </Card>
     </div>
   );

app/components/ecosystem/network-graph.tsx

@@ -1,19 +1,11 @@
+import React, { useEffect, useRef, useState, useCallback } from "react";
 import * as d3 from "d3";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useStoredDate } from "~/hooks/useStoredDate";
-import { EventBus } from "~/lib/utils";
-import type { CalendarDate } from "~/types/util.type";
-import { useAuth } from "../../contexts/auth-context";
 import apiService from "../../lib/api";
+import { useAuth } from "../../contexts/auth-context";
 
+// Get API base URL at module level to avoid process.env access in browser
 const API_BASE_URL =
-//بندر امام
-// import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
-//آپادانا
-import.meta.env.VITE_API_URL || "https://APADANA-IATM-back.pelekan.org/api";
-//نوری
-// import.meta.env.VITE_API_URL || "https://NOPC-IATM-back.pelekan.org/api";
-
+  import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
 
 export interface Node {
   id: string;
@@ -52,9 +44,9 @@ export interface CompanyDetails {
 
 export interface NetworkGraphProps {
   onNodeClick?: (node: CompanyDetails) => void;
-  onLoadingChange?: (loading: boolean) => void;
 }
 
+// Helper to robustly parse backend response
 function parseApiResponse(raw: any): any[] {
   let data = raw;
   try {
@@ -64,14 +56,12 @@ function parseApiResponse(raw: any): any[] {
   return Array.isArray(data) ? data : [];
 }
 
+// Check if we're in browser environment
 function isBrowser(): boolean {
   return typeof window !== "undefined";
 }
 
-export function NetworkGraph({
-  onNodeClick,
-  onLoadingChange,
-}: NetworkGraphProps) {
+export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
   const svgRef = useRef<SVGSVGElement | null>(null);
   const [nodes, setNodes] = useState<Node[]>([]);
   const [links, setLinks] = useState<Link[]>([]);
@@ -80,21 +70,7 @@ export function NetworkGraph({
   const [error, setError] = useState<string | null>(null);
   const { token } = useAuth();
 
-  // const [date, setDate] = useState<CalendarDate>();
-
-  const [date, setDate] = useStoredDate();
-  useEffect(() => {
-    const handler = (date: CalendarDate) => {
-      if (date) setDate(date);
-    };
-
-    EventBus.on("dateSelected", handler);
-
-    return () => {
-      EventBus.off("dateSelected", handler);
-    };
-  }, []);
-
+  // Ensure component only renders on client side
   useEffect(() => {
     if (isBrowser()) {
       const timer = setTimeout(() => setIsMounted(true), 100);
@@ -102,27 +78,7 @@ export function NetworkGraph({
     }
   }, []);
 
-  const getImageUrl = useCallback(
-    (stageid: number) => {
-      if (!token?.accessToken) return null;
-      return `${API_BASE_URL}/getimage?stageID=${stageid}&nameOrID=image&token=${token.accessToken}`;
-    },
-    [token?.accessToken]
-  );
-
-  const callAPI = useCallback(
-    async (stage_id: number) => {
-      return await apiService.call<any>({
-        get_values_workflow_function: {
-          stage_id: stage_id,
-          // start_date: date?.start || null,
-          // end_date: date?.end || null,
-        },
-      });
-    },
-    [date]
-  );
-
+  // Fetch data from API
   useEffect(() => {
     if (!isMounted) return;
 
@@ -133,45 +89,28 @@ export function NetworkGraph({
       setIsLoading(true);
       try {
         const res = await apiService.call<any[]>({
-          graph_production_function: {
-            start_date: date.start || null,
-            end_date: date.end || null,
-          },
+          graph_production_function: {},
         });
         if (aborted) return;
 
         const data = parseApiResponse(JSON.parse(res.data)?.graph_production);
         console.log(
           "All available fields in first item:",
-          Object.keys(data[0] || {})
+          Object.keys(data[0] || {}),
         );
 
-        // نود مرکزی
+        // Create center node
         const centerNode: Node = {
           id: "center",
-          // label: "پتروشیمی بندر امام",
-          // label: "پتروشیمی نوری",
-          label: "پتروشیمی آپادانا",
+          label: "پتروشیمی بندر امام", //مرکز زیست بوم
           category: "center",
           stageid: 0,
           isCenter: true,
         };
 
-        // دسته‌بندی‌ها
-        const categories = Array.from(
-          new Set(data.map((item: any) => item.category))
-        );
-
-        const categoryNodes: Node[] = categories.map((cat, index) => ({
-          id: `cat-${index}`,
-          label: cat,
-          category: cat,
-          stageid: -1,
-        }));
-
-        // نودهای نهایی
-        const finalNodes: Node[] = data.map((item: any) => ({
-          id: `node-${item.stageid}`,
+        // Create ecosystem nodes
+        const ecosystemNodes: Node[] = data.map((item: any) => ({
+          id: String(item.stageid),
           label: item.title,
           category: item.category,
           stageid: item.stageid,
@@ -179,16 +118,13 @@ export function NetworkGraph({
           rawData: item,
         }));
 
-        // لینک‌ها: مرکز → دسته‌بندی‌ها → نودهای نهایی
-        const graphLinks: Link[] = [
-          ...categoryNodes.map((cat) => ({ source: "center", target: cat.id })),
-          ...finalNodes.map((node) => {
-            const catIndex = categories.indexOf(node.category);
-            return { source: `cat-${catIndex}`, target: node.id };
-          }),
-        ];
+        // Create links (all nodes connected to center)
+        const graphLinks: Link[] = ecosystemNodes.map((node) => ({
+          source: "center",
+          target: node.id,
+        }));
 
-        setNodes([centerNode, ...categoryNodes, ...finalNodes]);
+        setNodes([centerNode, ...ecosystemNodes]);
         setLinks(graphLinks);
       } catch (err: any) {
         if (err.name !== "AbortError") {
@@ -206,19 +142,43 @@ export function NetworkGraph({
       aborted = true;
       controller.abort();
     };
-  }, [isMounted, token, getImageUrl, date]);
+  }, [isMounted, token]);
 
+  // Get image URL for a node
+  const getImageUrl = useCallback(
+    (stageid: number) => {
+      if (!token?.accessToken) return null;
+      return `${API_BASE_URL}/getimage?stageID=${stageid}&nameOrID=image&token=${token.accessToken}`;
+    },
+    [token?.accessToken],
+  );
+
+  // Import apiService for the onClick handler
+  const callAPI = useCallback(async (stage_id: number) => {
+    return await apiService.call<any>({
+      get_values_workflow_function: {
+        stage_id: stage_id,
+      },
+    });
+  }, []);
+
+  // Initialize D3 graph
   useEffect(() => {
-    if (!isMounted || !svgRef.current || isLoading || nodes.length === 0)
+    if (!isMounted || !svgRef.current || isLoading || nodes.length === 0) {
       return;
+    }
 
     const svg = d3.select(svgRef.current);
     const width = svgRef.current.clientWidth;
     const height = svgRef.current.clientHeight;
+
+    // Clear previous content
     svg.selectAll("*").remove();
 
+    // Create defs for patterns and filters
     const defs = svg.append("defs");
 
+    // Add glow filter for hover effect
     const filter = defs
       .append("filter")
       .attr("id", "glow")
@@ -236,27 +196,33 @@ export function NetworkGraph({
     feMerge.append("feMergeNode").attr("in", "coloredBlur");
     feMerge.append("feMergeNode").attr("in", "SourceGraphic");
 
-    const container = svg.append("g");
-
+    // Create zoom behavior
     const zoom = d3
       .zoom<SVGSVGElement, unknown>()
-      .scaleExtent([0.3, 2.5])
-      .on("zoom", (event) => container.attr("transform", event.transform));
+      .scaleExtent([0.8, 2.5]) // Limit zoom out to 1x, zoom in to 2.5x
+      .on("zoom", (event) => {
+        container.attr("transform", event.transform);
+      });
 
     svg.call(zoom);
 
+    // Create container group
+    const container = svg.append("g");
+
+    // Category colors
     const categoryToColor: Record<string, string> = {
       دانشگاه: "#3B82F6",
       مشاور: "#10B981",
       "دانش بنیان": "#F59E0B",
       استارتاپ: "#EF4444",
-      "تامین کننده": "#8B5CF6",
+      شرکت: "#8B5CF6",
       صندوق: "#06B6D4",
       شتابدهنده: "#9333EA",
       "مرکز نوآوری": "#F472B6",
       center: "#34D399",
     };
 
+    // Create force simulation
     const simulation = d3
       .forceSimulation<Node>(nodes)
       .force(
@@ -265,21 +231,16 @@ export function NetworkGraph({
           .forceLink<Node, Link>(links)
           .id((d) => d.id)
           .distance(150)
-          .strength(0.2)
+          .strength(0.1),
       )
       .force("charge", d3.forceManyBody().strength(-300))
       .force("center", d3.forceCenter(width / 2, height / 2))
-      .force(
-        "radial",
-        d3.forceRadial((d) => (d.isCenter ? 0 : 300), width / 2, height / 2)
-      )
       .force(
         "collision",
-        d3.forceCollide().radius((d) => (d.isCenter ? 50 : 35))
+        d3.forceCollide().radius((d) => (d.isCenter ? 40 : 30)),
       );
 
-    // Initial zoom to show entire graph
-    const initialScale = 0.6;
+    const initialScale = 0.85;
     const initialTranslate = [
       width / 2 - (width / 2) * initialScale,
       height / 2 - (height / 2) * initialScale,
@@ -288,69 +249,37 @@ export function NetworkGraph({
       zoom.transform,
       d3.zoomIdentity
         .translate(initialTranslate[0], initialTranslate[1])
-        .scale(initialScale)
+        .scale(initialScale),
     );
 
-    // Fix center node
+    // Fix center node position
     const centerNode = nodes.find((n) => n.isCenter);
-    const categoryNodes = nodes.filter((n) => !n.isCenter && n.stageid === -1);
-
     if (centerNode) {
-      const centerX = width / 2;
-      const centerY = height / 2;
-      centerNode.fx = centerX;
-      centerNode.fy = centerY;
-
-      const baseRadius = 450; // شعاع پایه
-      const variation = 100; // تغییر طول یکی در میان
-      const angleStep = (2 * Math.PI) / categoryNodes.length;
-
-      categoryNodes.forEach((catNode, i) => {
-        const angle = i * angleStep;
-        const radius = baseRadius + (i % 2 === 0 ? -variation : variation);
-        catNode.fx = centerX + radius * Math.cos(angle);
-        catNode.fy = centerY + radius * Math.sin(angle);
-      });
+      centerNode.fx = width / 2;
+      centerNode.fy = height / 2;
     }
 
-    // نودهای نهایی **هیچ fx/fy نداشته باشند**
-    // فقط forceLink آن‌ها را به دسته‌ها متصل نگه می‌دارد
-
-    // const finalNodes = nodes.filter(n => !n.isCenter && n.stageid !== -1);
-
-    // categoryNodes.forEach((catNode) => {
-    //   const childNodes = finalNodes.filter(n => n.category === catNode.category);
-    //   const childCount = childNodes.length;
-    //   const radius = 100; // فاصله از دسته
-    //   const angleStep = (2 * Math.PI) / childCount;
-
-    //   childNodes.forEach((node, i) => {
-    //     const angle = i * angleStep;
-    //     node.fx = catNode.fx! + radius * Math.cos(angle);
-    //     node.fy = catNode.fy! + radius * Math.sin(angle);
-    //   });
-    // });
-
-    // Curved links
+    // Create links
     const link = container
       .selectAll(".link")
       .data(links)
       .enter()
-      .append("path")
+      .append("line")
       .attr("class", "link")
       .attr("stroke", "#E2E8F0")
       .attr("stroke-width", 2)
-      .attr("stroke-opacity", 0.6)
-      .attr("fill", "none");
+      .attr("stroke-opacity", 0.6);
 
+    // Create node groups
     const nodeGroup = container
       .selectAll(".node")
       .data(nodes)
       .enter()
       .append("g")
       .attr("class", "node")
-      .style("cursor", (d) => (d.stageid === -1 ? "default" : "pointer"));
+      .style("cursor", "pointer");
 
+    // Add drag behavior
     const drag = d3
       .drag<SVGGElement, Node>()
       .on("start", (event, d) => {
@@ -372,100 +301,56 @@ export function NetworkGraph({
 
     nodeGroup.call(drag);
 
+    // Add node circles/rectangles
     nodeGroup.each(function (d) {
       const group = d3.select(this);
 
-      // if (d.isCenter) {
-      //   const rect = group
-      //     .append("rect")
-      //     .attr("width", 200)
-      //     .attr("height", 80)
-      //     .attr("x", -100) // نصف عرض جدید منفی
-      //     .attr("y", -40) // نصف ارتفاع جدید منفی
-      //     .attr("rx", 8)
-      //     .attr("ry", 8)
-      //     .attr("fill", categoryToColor[d.category] || "#94A3B8")
-      //     .attr("stroke", "#FFFFFF")
-      //     .attr("stroke-width", 3)
-      //     .style("pointer-events", "none");
+      if (d.isCenter) {
+        // Center node as rectangle
+        const rect = group
+          .append("rect")
+          .attr("width", 150)
+          .attr("height", 60)
+          .attr("x", -75)
+          .attr("y", -30)
+          .attr("rx", 8)
+          .attr("ry", 8)
+          .attr("fill", categoryToColor[d.category] || "#94A3B8")
+          .attr("stroke", "#FFFFFF")
+          .attr("stroke-width", 3)
+          .style("pointer-events", "none");
 
-      //   if (d.imageUrl || d.isCenter) {
-      //     const pattern = defs
-      //       .append("pattern")
-      //       .attr("id", `image-${d.id}`)
-      //       .attr("x", 0)
-      //       .attr("y", 0)
-      //       .attr("width", 1)
-      //       .attr("height", 1);
+        // Add center image if available
+        if (d.imageUrl || d.isCenter) {
+          const pattern = defs
+            .append("pattern")
+            .attr("id", `image-${d.id}`)
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", 1)
+            .attr("height", 1);
 
-      //     pattern
-      //       .append("image")
-      //       .attr("x", 0)
-      //       .attr("y", 0)
-      //       .attr("width", 200) // ← هم‌اندازه با مستطیل
-      //       .attr("height", 80)
-      //       .attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl)
-      //       .attr("preserveAspectRatio", "xMidYMid slice");
+          pattern
+            .append("image")
+            .attr("x", 0)
+            .attr("y", 0)
+            .attr("width", 150)
+            .attr("height", 60)
+            .attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl)
+            .attr("preserveAspectRatio", "xMidYMid slice");
 
-      //     rect.attr("fill", `url(#image-${d.id})`);
-      //   }
-      // } 
-      // راه حل ساده‌تر - ابعاد ثابت با حفظ نسبت
-if (d.isCenter) {
-
-  //آپادانا
-const fixedWidth = 198;
-const fixedHeight = 200; // یا می‌توانید براساس نسبت تصویر محاسبه کنید
-
-//بندر امام
-// const fixedWidth = 100;
-// const fixedHeight = 80; // یا می‌توانید براساس نسبت تصویر محاسبه کنید
-
-//نوری
-// const fixedWidth = 100;
-// const fixedHeight = 80; // یا می‌توانید براساس نسبت تصویر محاسبه کنید
-  
-  const rect = group
-    .append("rect")
-    .attr("width", fixedWidth)
-    .attr("height", fixedHeight)
-    .attr("x", -fixedWidth / 2)
-    .attr("y", -fixedHeight / 2)
-    .attr("rx", 8)
-    .attr("ry", 8)
-    .attr("fill", categoryToColor[d.category] || "#94A3B8")
-    .attr("stroke", "#FFFFFF")
-    .attr("stroke-width", 3)
-    .style("pointer-events", "none");
-
-  const pattern = defs
-    .append("pattern")
-    .attr("id", `image-${d.id}`)
-    .attr("x", 0)
-    .attr("y", 0)
-    .attr("width", 1)
-    .attr("height", 1);
-
-  pattern
-    .append("image")
-    .attr("x", 0)
-    .attr("y", 0)
-    .attr("width", fixedWidth)
-    .attr("height", fixedHeight)
-    .attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl)
-    .attr("preserveAspectRatio", "xMidYMid meet"); // حفظ نسبت تصویر
-
-  rect.attr("fill", `url(#image-${d.id})`);
-
-}
-      else {
+          rect.attr("fill", `url(#image-${d.id})`);
+        }
+      } else {
+        // Regular nodes as circles
         const circle = group
           .append("circle")
           .attr("r", 25)
-          .attr("fill", categoryToColor[d.category] || "#fff")
+          .attr("fill", categoryToColor[d.category] || "8#fff")
           .attr("stroke", "#FFFFFF")
           .attr("stroke-width", 3);
 
+        // Add node image if available
         if (d.imageUrl) {
           const pattern = defs
             .append("pattern")
@@ -482,8 +367,10 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
             .attr("width", 50)
             .attr("height", 50)
             .attr("href", d.imageUrl)
+            .attr("backgroundColor", "#fff")
             .attr("preserveAspectRatio", "xMidYMid slice");
 
+          // Create circular clip path
           defs
             .append("clipPath")
             .attr("id", `clip-${d.id}`)
@@ -497,33 +384,20 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
       }
     });
 
+    // Add labels below nodes
     const labels = nodeGroup
-    .append("text")
-    .text((d) => d.label)
-    .attr("text-anchor", "middle")
-    .attr("dy", (d) => {
-      if (d.isCenter) {
-
-        //آپادانا
-        const centerNodeHeight = 200; // ارتفاع نود مرکزی
-        
-        //بندر امام
-        // const centerNodeHeight = 80; // ارتفاع نود مرکزی
-
-        //نوری 
-        // const centerNodeHeight = 80; // ارتفاع نود مرکزی
-
-        return centerNodeHeight / 2 + 20; // نصف ارتفاع + فاصله 20px
-      }
-      return 45; // برای نودهای دیگر
-    })
-    .attr("font-size", (d) => (d.isCenter ? "14px" : "12px"))
-    .attr("font-weight", "bold")
-    .attr("fill", "#F9FAFB")
-    .attr("stroke", "rgba(17, 24, 39, 0.95)")
-    .attr("stroke-width", 4)
-    .attr("paint-order", "stroke");
+      .append("text")
+      .text((d) => d.label)
+      .attr("text-anchor", "middle")
+      .attr("dy", (d) => (d.isCenter ? 50 : 45))
+      .attr("font-size", (d) => (d.isCenter ? "14px" : "12px"))
+      .attr("font-weight", "bold")
+      .attr("fill", "#F9FAFB")
+      .attr("stroke", "rgba(17, 24, 39, 0.95)")
+      .attr("stroke-width", 4)
+      .attr("paint-order", "stroke");
 
+    // Add hover effects
     nodeGroup
       .on("mouseenter", function (event, d) {
         if (d.isCenter) return;
@@ -545,88 +419,79 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
           .attr("stroke-width", 3);
       });
 
+    // Add click handlers
     nodeGroup.on("click", async function (event, d) {
       event.stopPropagation();
 
-      // جلوگیری از کلیک روی مرکز و دسته‌بندی‌ها
-      if (d.isCenter || d.stageid === -1) return;
+      // Don't handle center node clicks
+      if (d.isCenter) return;
 
       if (onNodeClick && d.stageid) {
-        // Open dialog immediately with basic info
-        const basicDetails: CompanyDetails = {
-          id: d.id,
-          label: d.label,
-          category: d.category,
-          stageid: d.stageid,
-          fields: [],
-        };
-        onNodeClick(basicDetails);
-
-        // Start loading
-        onLoadingChange?.(true);
-
         try {
-          if (date.start && date.end) {
-            const res = await callAPI(d.stageid);
-            const responseData = JSON.parse(res.data);
-            const fieldValues =
-              JSON.parse(responseData?.getvalue)?.[0]?.FieldValues || [];
+          // Fetch detailed company data
+          const res = await callAPI(d.stageid);
 
-            const filteredFields = fieldValues.filter(
-              (field: any) =>
-                !["image", "img", "full_name", "about_collaboration"].includes(
-                  field.F.toLowerCase()
-                )
-            );
+          const responseData = JSON.parse(res.data);
+          const fieldValues =
+            JSON.parse(responseData?.getvalue)?.[0]?.FieldValues || [];
+          // Filter out image fields and find description
+          const filteredFields = fieldValues.filter(
+            (field: any) =>
+              !["image", "img", "full_name", "about_collaboration"].includes(
+                field.F.toLowerCase(),
+              ),
+          );
 
-            const descriptionField = fieldValues.find(
-              (field: any) =>
-                field.F.toLowerCase().includes("description") ||
-                field.F.toLowerCase().includes("about_collaboration") ||
-                field.F.toLowerCase().includes("about")
-            );
+          const descriptionField = fieldValues.find(
+            (field: any) =>
+              field.F.toLowerCase().includes("description") ||
+              field.F.toLowerCase().includes("about_collaboration") ||
+              field.F.toLowerCase().includes("about"),
+          );
 
-            const companyDetails: CompanyDetails = {
-              id: d.id,
-              label: d.label,
-              category: d.category,
-              stageid: d.stageid,
-              fields: filteredFields,
-              description: descriptionField?.V || undefined,
-            };
+          const companyDetails: CompanyDetails = {
+            id: d.id,
+            label: d.label,
+            category: d.category,
+            stageid: d.stageid,
+            fields: filteredFields,
+            description: descriptionField?.V || undefined,
+          };
 
-            onNodeClick(companyDetails);
-          }
+          onNodeClick(companyDetails);
         } catch (error) {
           console.error("Failed to fetch company details:", error);
-          // Keep the basic details already shown
-        } finally {
-          // Stop loading
-          onLoadingChange?.(false);
+          // Fallback to basic info
+          const basicDetails: CompanyDetails = {
+            id: d.id,
+            label: d.label,
+            category: d.category,
+            stageid: d.stageid,
+            fields: [],
+          };
+          onNodeClick(basicDetails);
         }
       }
     });
 
+    // Update positions on simulation tick
     simulation.on("tick", () => {
-      link.attr("d", (d: any) => {
-        const sx = (d.source as Node).x!;
-        const sy = (d.source as Node).y!;
-        const tx = (d.target as Node).x!;
-        const ty = (d.target as Node).y!;
-        const dx = tx - sx;
-        const dy = ty - sy;
-        const dr = Math.sqrt(dx * dx + dy * dy) * 1.2; // منحنی
-        return `M${sx},${sy}A${dr},${dr} 0 0,1 ${tx},${ty}`;
-      });
+      link
+        .attr("x1", (d) => (d.source as Node).x!)
+        .attr("y1", (d) => (d.source as Node).y!)
+        .attr("x2", (d) => (d.target as Node).x!)
+        .attr("y2", (d) => (d.target as Node).y!);
 
       nodeGroup.attr("transform", (d) => `translate(${d.x},${d.y})`);
     });
 
+    // Cleanup function
     return () => {
       simulation.stop();
     };
-  }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI, date]);
+  }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI]);
 
+  // Show error message
   if (error) {
     return (
       <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-gray-900 to-gray-800">
@@ -640,9 +505,10 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
     );
   }
 
+  // Don't render on server side
   if (!isMounted) {
     return (
-      <div className="w-full h-full flex items-center justify-center bg-transparent">
+      <div className="w-full h-full flex items-center justify-center bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]">
         <div className="text-white font-persian text-sm">
           در حال بارگذاری...
         </div>
@@ -652,12 +518,15 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
 
   if (isLoading) {
     return (
-      <div className="w-full h-full relative bg-transparent">
+      <div className="w-full h-full relative bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]">
+        {/* Skeleton Graph Container */}
         <div className="w-full h-full flex items-center justify-center relative">
+          {/* Center Node Skeleton */}
           <div className="w-12 h-12 rounded-lg bg-gray-600 animate-pulse relative z-10">
             <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-gray-500 to-gray-600 animate-pulse"></div>
           </div>
 
+          {/* Outer Ring Nodes Skeleton */}
           {Array.from({ length: 8 }).map((_, i) => {
             const angle = (i * 2 * Math.PI) / 8;
             const radius = 120;
@@ -678,25 +547,40 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
                 <div
                   className="absolute w-16 h-3 bg-gray-600 rounded animate-pulse"
                   style={{
-                    transform: `rotate(${(i * 360) / 8}deg) translateX(32px)`,
-                    transformOrigin: "left center",
+                    left: "50%",
+                    top: "40px",
+                    transform: "translateX(-50%)",
+                    animationDelay: `${i * 200 + 100}ms`,
+                  }}
+                ></div>
+                <div
+                  className="absolute w-0.5 bg-gray-600 animate-pulse opacity-30"
+                  style={{
+                    left: "50%",
+                    top: "50%",
+                    height: `${radius - 16}px`,
+                    transformOrigin: "top",
+                    transform: `translateX(-50%) rotate(${angle + Math.PI}rad)`,
+                    animationDelay: `${i * 100}ms`,
                   }}
                 ></div>
               </div>
             );
           })}
         </div>
+
+        <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2">
+          <div className="text-white font-persian text-sm animate-pulse">
+            در حال بارگذاری نمودار...
+          </div>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="w-full h-full">
-      <svg
-        ref={svgRef}
-        className="w-full h-full bg-transparent"
-        style={{ cursor: "grab" }}
-      />
+    <div className="w-full h-full relative bg-[linear-gradient(to_bottom_left,#464861,10%,#111628)] overflow-hidden">
+      <svg ref={svgRef} className="w-full h-full" style={{ minHeight: 500 }} />
     </div>
   );
 }

app/components/ui/Calendar.tsx

@@ -1,67 +0,0 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import React from "react";
-
-interface MonthItem {
-  id: string;
-  label: string;
-  start: string;
-  end: string;
-}
-
-// interface CurrentDay {
-//   start: string;
-//   end: string;
-//   month: string;
-// }
-
-interface CalendarProps {
-  title: string;
-  nextYearHandler: () => void;
-  prevYearHandler: () => void;
-  currentYear?: number;
-  monthList: Array<MonthItem>;
-  selectedDate?: string;
-  selectDateHandler: (item: MonthItem) => void;
-}
-
-export const Calendar: React.FC<CalendarProps> = ({
-  title,
-  nextYearHandler,
-  prevYearHandler,
-  currentYear,
-  monthList,
-  selectedDate,
-  selectDateHandler,
-}) => {
-  return (
-    <div className="filter-box bg-pr-gray  w-full px-1">
-      <header className="flex flex-row border-b border-[#5F6284] pb-1.5 justify-center">
-        <span className="font-light">{title}</span>
-        <div className="flex flex-row items-center gap-3">
-          <ChevronRight
-            className="inline-block w-6 h-6 cursor-pointer"
-            onClick={nextYearHandler}
-          />
-          <span className="font-light">{currentYear}</span>
-          <ChevronLeft
-            className="inline-block w-6 h-6 cursor-pointer"
-            onClick={prevYearHandler}
-          />
-        </div>
-      </header>
-      <div className="content flex flex-col gap-2 text-center pt-1 cursor-pointer">
-        {monthList.map((item, index) => (
-          <span
-            key={`${item.id}-${index}`}
-            className={`text-lg hover:bg-[#33364D] p-1 rounded-xl transition-all duration-300 ${
-              selectedDate === item.label ? `bg-[#33364D]` : ""
-            }`}
-            onClick={() => selectDateHandler(item)}
-          >
-            {item.label}
-          </span>
-        ))}
-      </div>
-    </div>
-  );
-};

app/components/ui/CustomCheckBox.tsx

@@ -1,33 +0,0 @@
-import { useId } from "react";
-
-interface CheckboxProps {
-  checked: boolean;
-  disabled?: boolean;
-  onChange?: (checked: boolean) => void;
-  className?: string;
-  id ?:string;
-}
-
-export default function CustomCheckBox({
-  checked,
-  disabled = false,
-  onChange,
-  className = "",
-  id
-}: CheckboxProps) {
-
-  const handleChange = (e: any) => {
-    onChange?.(e.target.checked);
-  };
-
-  return (
-    <input
-      id={id}
-      type="checkbox"
-      checked={checked}
-      disabled={disabled}
-      onChange={handleChange}
-      className={`form-checkbox ${className}`}
-    />
-  );
-}

app/components/ui/base-card.tsx

@@ -1,61 +0,0 @@
-import { cn } from "~/lib/utils";
-import { Card, CardContent, CardHeader, CardTitle } from "./card";
-
-interface BaseCardProps {
-  title?: string;
-  className?: string;
-  headerClassName?: string;
-  contentClassName?: string;
-  children: React.ReactNode;
-  icon?: React.ComponentType<{ className?: string }>;
-  withHeader?: boolean;
-}
-
-export function BaseCard({
-  title,
-  className,
-  headerClassName,
-  contentClassName,
-  children,
-  withHeader = false,
-  icon: Icon,
-}: BaseCardProps) {
-  return (
-    <Card
-      className={cn(
-        "bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-2 pb-0 grid items-center",
-        className
-      )}
-    >
-      {Icon && title ? (
-        <CardHeader
-          className={cn(
-            "border-b-2 border-gray-500/20 py-2 px-0 pb-4",
-            headerClassName
-          )}
-        >
-          <CardTitle className="text-white text-sm text-right font-persian px-4 my-auto items-center flex w-full justify-between">
-            {title} {<Icon />}{" "}
-          </CardTitle>
-        </CardHeader>
-      ) : withHeader && title ? (
-        <CardHeader
-          className={cn("pb-2 border-b-2 border-gray-500/20", headerClassName)}
-        >
-          <CardTitle className="text-white text-sm text-right font-persian px-4">
-            {title}
-          </CardTitle>
-        </CardHeader>
-      ) : title ? (
-        <div className="border-b-2 border-gray-500/20 pb-2">
-          <h3 className="text-sm font-bold text-white text-right font-persian px-4">
-            {title}
-          </h3>
-        </div>
-      ) : null}
-      <CardContent className={cn("py-2 px-4 ", contentClassName)}>
-        {children}
-      </CardContent>
-    </Card>
-  );
-}

app/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-card text-card-foreground shadow-sm ",
       className
     )}
     {...props}

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

@@ -1,4 +1,4 @@
-import { calculateNiceRange, formatNumber } from "~/lib/utils";
+import { formatNumber } from "~/lib/utils";
 
 export interface BarChartData {
   label: string;
@@ -18,7 +18,6 @@ interface CustomBarChartProps {
   showAxisLabels?: boolean;
   className?: string;
   loading?: boolean;
-  hasPercent?: boolean;
 }
 
 export function CustomBarChart({
@@ -29,17 +28,16 @@ export function CustomBarChart({
   showAxisLabels = true,
   className = "",
   loading = false,
-  hasPercent = true,
 }: CustomBarChartProps) {
-  // استفاده از nice numbers برای محاسبه دامنه مناسب
-  const values = data.map((item) => item.maxValue || item.value);
-  const { niceMax, ticks } = calculateNiceRange(values, 0, 5);
-  const globalMaxValue = niceMax;
+  // Calculate the maximum value across all data points for consistent scaling
+  const globalMaxValue = Math.max(
+    ...data.map((item) => item.maxValue || item.value)
+  );
 
   // Loading skeleton
   if (loading) {
     return (
-      <div className={`space-y-6 p-4 pt-0 ${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>
         )}
@@ -69,67 +67,92 @@ export function CustomBarChart({
 
   return (
     <div className={`space-y-6 ${className}`} style={{ height }}>
-      {title && (
-        <div className="border-b-[#3F415A] border-b-2">
-          <h3 className="text-sm font-semibold text-white font-persian text-right px-4 pb-3">
+      <div className="border-b">
+        {title && (
+          <h3 className="text-xl font-bold text-white font-persian text-right p-4">
             {title}
           </h3>
-        </div>
-      )}
+        )}
+      </div>
 
       <div className="space-y-4 px-4 pb-4">
         {data.map((item, index) => {
-          // محاسبه درصد بر اساس nice max value
           const percentage =
             globalMaxValue > 0 ? (item.value / globalMaxValue) * 100 : 0;
           const displayValue: any = item.value;
+
           return (
             <div key={index} className="flex items-center gap-3">
+              {/* Label */}
               <span
-                className={`font-persian text-sm font-normal min-w-[120px] text-left ${
+                className={`font-persian text-sm min-w-[160px] text-right ${
                   item.labelColor || "text-white"
                 }`}
               >
                 {item.label}
               </span>
+
+              {/* Bar Container */}
               <div
-                className={`${showAxisLabels && "bg-pr-gray"} flex-1 flex items-center gap-1  justify-start rounded-full  overflow-hidden ${barHeight}`}
+                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  ${
-                    item.color || "bg-pr-green"
+                  className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${
+                    item.color || "bg-emerald-400"
                   }`}
                   style={{
                     width: `${Math.min(percentage, 100)}%`,
                   }}
                 >
-                  <div className="inset-0 bg-gradient-to-r from-transparent to-white/10 rounded-full"></div>
+                  {/* Add a subtle gradient effect for better visual appeal */}
+                  <div className="absolute inset-0 bg-gradient-to-r from-transparent to-white/10 rounded-full"></div>
                 </div>
-
-                <span className={`text-base font-normal text-left text-white`}>
-                  {item.valuePrefix || ""}
-
-                  {formatNumber(parseFloat(displayValue))}
-                  {hasPercent ? "%" : ""}
-                  {item.valueSuffix || ""}
-                </span>
               </div>
+
+              {/* 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"
+                }`}
+              >
+                {item.valuePrefix || ""}
+                {formatNumber(parseFloat(displayValue))}%
+                {item.valueSuffix || ""}
+              </span>
             </div>
           );
         })}
 
-        {/* Axis Labels با استفاده از nice numbers */}
+        {/* Axis Labels */}
         {showAxisLabels && globalMaxValue > 0 && (
-          <div className="flex w-full items-center gap-3 mt-6">
-            <span className="min-w-[120px]"></span>
+          <div className="flex items-center gap-3 mt-6">
+            <span className="min-w-[160px]"></span>
             <div className="flex-1 flex justify-between pt-2 border-t border-gray-700">
-              {ticks.map((tick, index) => (
-                <span key={index} className="text-gray-400 text-xs">
-                  {formatNumber(tick)}%
-                </span>
-              ))}
+              <span className="text-gray-400 text-xs">{formatNumber(0)}</span>
+              <span className="text-gray-400 text-xs">
+                {formatNumber(Math.round(globalMaxValue / 4))}
+              </span>
+              <span className="text-gray-400 text-xs">
+                {formatNumber(Math.round(globalMaxValue / 2))}
+              </span>
+              <span className="text-gray-400 text-xs">
+                {formatNumber(Math.round((globalMaxValue * 3) / 4))}
+              </span>
+              <span className="text-gray-400 text-xs">
+                {formatNumber(Math.round(globalMaxValue))}
+              </span>
             </div>
-            <span className="min-w-[0px]"></span>
+            <span className="min-w-[60px]"></span>
           </div>
         )}
       </div>

app/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client";
+"use client"
 
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-import * as React from "react";
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/lib/utils"
 
-const Dialog = DialogPrimitive.Root;
+const Dialog = DialogPrimitive.Root
 
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal
 
-const DialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -26,8 +26,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -38,20 +38,20 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-6 w-6 cursor-pointer" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4 cursor-pointer" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
   className,
@@ -59,13 +59,13 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col p-4 space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-left",
       className
     )}
     {...props}
   />
-);
-DialogHeader.displayName = "DialogHeader";
+)
+DialogHeader.displayName = "DialogHeader"
 
 const DialogFooter = ({
   className,
@@ -78,8 +78,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-);
-DialogFooter.displayName = "DialogFooter";
+)
+DialogFooter.displayName = "DialogFooter"
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -93,8 +93,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -105,18 +105,18 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
   DialogPortal,
-  DialogTitle,
+  DialogOverlay,
+  DialogClose,
   DialogTrigger,
-};
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

app/components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client";
+"use client"
 
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronDown, Circle } from "lucide-react";
-import * as React from "react";
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
-import { cn } from "~/lib/utils";
+import { cn } from "~/lib/utils"
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenu = DropdownMenuPrimitive.Root
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -34,10 +34,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-));
+))
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+  DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -51,9 +52,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-));
+))
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+  DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -64,34 +65,32 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden mt-1 rounded-xl border border-gray-500 bg-pr-gray p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    selected?: boolean;
+    inset?: boolean
   }
->(({ className, inset, selected, ...props }, ref) => (
+>(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "cursor-pointer select-none  rounded-md px-2 py-1.5 text-sm outline-none transition-colors hover:bg-dark-blue  data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      selected && "bg-dark-blue text-white",
       className
     )}
     {...props}
   />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -113,9 +112,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+))
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+  DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -136,13 +135,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -154,8 +153,8 @@ const DropdownMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -166,8 +165,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({
   className,
@@ -178,43 +177,24 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  );
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-const DropdownMenuButton = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex items-center justify-between gap-2  text-sm outline-none border border-gray-500 p-3  rounded-xl min-w-50 max-w-72 group",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronDown className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
-  </DropdownMenuPrimitive.Trigger>
-));
-DropdownMenuButton.displayName = "DropdownMenuButton";
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
-  DropdownMenuButton,
-  DropdownMenuCheckboxItem,
+  DropdownMenuTrigger,
   DropdownMenuContent,
-  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
+  DropdownMenuCheckboxItem,
   DropdownMenuRadioItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-};
+  DropdownMenuRadioGroup,
+}

app/components/ui/form-field.tsx

@@ -3,7 +3,6 @@ import { cn } from "~/lib/utils";
 import { Eye, EyeOff, AlertCircle, CheckCircle2 } from "lucide-react";
 import { Input } from "./input";
 import { Label } from "./label";
-import CustomCheckbox from "./CustomCheckBox";
 
 interface BaseFieldProps {
   label?: string;
@@ -66,6 +65,12 @@ export function TextField({
       )}
 
       <div className="relative">
+        {leftIcon && (
+          <div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">
+            {leftIcon}
+          </div>
+        )}
+
         <Input
           id={id}
           type={type}
@@ -77,14 +82,39 @@ export function TextField({
           maxLength={maxLength}
           minLength={minLength}
           className={cn(
-            "w-full h-12 outline-none bg-white text-base text-[#5F6284] px-4 font-persian text-right transition-all duration-200",
+            "w-full h-12 px-4 font-persian text-right transition-all duration-200",
+            leftIcon && "pr-10",
+            (rightIcon || hasError || hasSuccess) && "pl-10",
+            hasError &&
+              "border-destructive focus:border-destructive focus:ring-destructive/20",
+            hasSuccess &&
+              "border-green-500 focus:border-green-500 focus:ring-green-500/20",
             className,
           )}
-          style={{boxShadow : "none"}}
         />
 
+        {(rightIcon || hasError || hasSuccess) && (
+          <div className="absolute left-3 top-1/2 transform -translate-y-1/2">
+            {hasError ? (
+              <AlertCircle className="h-4 w-4 text-destructive" />
+            ) : hasSuccess ? (
+              <CheckCircle2 className="h-4 w-4 text-green-500" />
+            ) : (
+              rightIcon && (
+                <span className="text-muted-foreground">{rightIcon}</span>
+              )
+            )}
+          </div>
+        )}
       </div>
 
+      {error && (
+        <p className="text-sm text-destructive font-persian flex items-center gap-1">
+          <AlertCircle className="h-3 w-3" />
+          {error}
+        </p>
+      )}
+
       {helper && !error && (
         <p className="text-sm text-muted-foreground font-persian">{helper}</p>
       )}
@@ -187,19 +217,17 @@ export function PasswordField({
           autoComplete={autoComplete}
           minLength={minLength}
           className={cn(
-            "w-full h-12 px-4 pl-10 bg-white text-base text-[#5F6284] font-persian text-right transition-all duration-200",
+            "w-full h-12 px-4 pl-10 font-persian text-right transition-all duration-200",
             hasError &&
               "border-destructive focus:border-destructive focus:ring-destructive/20",
             className,
           )}
-          style={{boxShadow : "none"}}
-
         />
 
         <button
           type="button"
           onClick={() => setShowPassword(!showPassword)}
-          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-black transition-colors"
+          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
           tabIndex={-1}
         >
           {showPassword ? (
@@ -290,17 +318,26 @@ export function CheckboxField({
 
   return (
     <div className={cn("space-y-2", containerClassName)}>
-      <div className="flex flex-row-reverse items-center gap-2">
-          <CustomCheckbox 
+      <div className="flex items-center gap-2">
+        <input
           id={id}
+          type="checkbox"
           checked={checked}
-          onChange={onChange}
-          />
+          onChange={(e) => onChange(e.target.checked)}
+          disabled={disabled}
+          className={cn(
+            sizes[size],
+            "text-[var(--color-login-primary)] bg-background border-input rounded focus:ring-[var(--color-login-primary)] focus:ring-2 accent-[var(--color-login-primary)] transition-all duration-200",
+            disabled && "opacity-50 cursor-not-allowed",
+            error && "border-destructive focus:ring-destructive",
+            className,
+          )}
+        />
         {label && (
           <Label
             htmlFor={id}
             className={cn(
-              "text-sm font-persian font-light text-white cursor-pointer",
+              "text-sm font-persian cursor-pointer",
               error ? "text-destructive" : "text-foreground",
               disabled && "opacity-50 cursor-not-allowed",
               required &&

app/components/ui/funnel-chart.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FunnelChart } from './funnel-chart';
+
+const mockData = [
+  { name: "تعداد کل", value: 250, label: "تعداد کل" },
+  { name: "نمونه موفق", value: 130, label: "نمونه موفق" },
+  { name: "محصولات موفق", value: 70, label: "محصولات موفق" },
+  { name: "بهبود یا تغییر موفق", value: 80, label: "بهبود یا تغییر موفق" },
+  { name: "محصول جدید", value: 50, label: "محصول جدید" },
+];
+
+describe('FunnelChart', () => {
+  it('renders funnel chart with correct data', () => {
+    render(<FunnelChart data={mockData} title="قيف فرآیند پروژه ها" />);
+    
+    expect(screen.getByText('قيف فرآیند پروژه ها')).toBeInTheDocument();
+    expect(screen.getByText('۱۰۰%')).toBeInTheDocument();
+    expect(screen.getByText('۲۵%')).toBeInTheDocument();
+    expect(screen.getByText('ابتدا فرآیند')).toBeInTheDocument();
+    expect(screen.getByText('انتها فرآیند')).toBeInTheDocument();
+  });
+
+  it('displays funnel data values correctly', () => {
+    render(<FunnelChart data={mockData} />);
+    
+    expect(screen.getByText('۲۵۰')).toBeInTheDocument();
+    expect(screen.getByText('۱۳۰')).toBeInTheDocument();
+    expect(screen.getByText('۷۰')).toBeInTheDocument();
+    expect(screen.getByText('۸۰')).toBeInTheDocument();
+    expect(screen.getByText('۵۰')).toBeInTheDocument();
+  });
+
+  it('renders without title when not provided', () => {
+    render(<FunnelChart data={mockData} />);
+    
+    expect(screen.queryByText('قيف فرآیند پروژه ها')).not.toBeInTheDocument();
+  });
+});

app/components/ui/funnel-chart.tsx

@@ -13,7 +13,6 @@ interface FunnelChartProps {
   title?: string;
   className?: string;
 }
-const greenColors = ["#3C9F71","#3BC47A","#3BC47A","#3BD77E","#3AEA83"]
 
 export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
   const maxValue = Math.max(...data.map(d => d.value));
@@ -21,22 +20,22 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
     if (!maxValue || maxValue <= 0) return 0;
     return Math.round((value / maxValue) * 100);
   };
-
+  
   return (
     <div className={`w-full ${className}`}>
       {title && (
-        <h3 className="text-sm px-4 font-semibold text-white mb-4 py-2 text-right border-b-2 border-gray-400/20">
+        <h3 className="text-lg font-semibold text-white mb-4 py-2 text-right border-b-2 border-gray-400/20">
           {title}
         </h3>
       )}
-
-      <div className="flex px-4 flex-col items-center gap-2 space-y-2">
+      
+      <div className="flex flex-col items-center gap-2 space-y-2">
         {/* Start Process Line */}
-        <div className="flex items-center w-full gap-10 mt-6 px-4">
-        <div className="text-sm font-normal text-[#5F6284] min-w-[max-content]">ابتدا فرآیند</div>
+        <div className="flex items-center w-full gap-10 mt-6">
+        <div className="text-lg text-gray-600 min-w-[max-content]">ابتدا فرآیند</div>
           <div className="flex items-center w-full gap-4">
             <div className="w-full h-0.5 bg-gray-600 relative">
-            <div className="text-base text-white font-semibold absolute left-1/2 -translate-x-1/2 top-[-1rem] -translate-y-1/2">۱۰۰%</div>
+            <div className="text-2xl text-white absolute left-1/2 -translate-x-1/2 top-[-1rem] -translate-y-1/2">۱۰۰%</div>
               <div className="absolute -top-1 left-0 w-1 h-3 bg-gray-600"></div>
               <div className="absolute -top-1 right-0 w-1 h-3 bg-gray-600"></div>
             </div>
@@ -48,20 +47,20 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
           {data.map((item, index) => {
             const widthPercentage = toPercent(item.value);
             const barWidth = Math.max(20, widthPercentage); // Minimum 20% width
-
+            
             return (
               <div key={index} className="grid  grid-cols-[6rem_1fr]  gap-2 w-full">
-                  <div className="text-sm font-light text-white font-persian cols-start-1 justify-self-start min-w-[max-content] text-center">
+                  <div className="text-lg text-white cols-start-1 justify-self-start font-thin min-w-[max-content] text-center">
                     {item.label}
                   </div>
-                <div className="flex items-center gap-10 w-full cols-start-2  justify-center">
+                <div className="flex items-center gap-10 w-full cols-start-2 flex items-center justify-center w-full">
                   <div className="flex items-center w-full">
                     <div style={{ width: `${(100 - barWidth) / 2}%` }} />
                     <div
                       className="bg-[#3BC47A] h-8  rounded-2xl flex items-center justify-center text-lg relative"
-                      style={{ width: `${barWidth}%` ,backgroundColor : `${greenColors[index]}`}}
+                      style={{ width: `${barWidth}%` }}
                     >
-                      <span className="text-pr-gray text-base font-semibold">
+                      <span className="text-[#3F415A] font-semibold">
                         {item.value.toLocaleString('fa-IR')}
                       </span>
                     </div>
@@ -74,15 +73,15 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
         </div>
 
         {/* End Process Line */}
-        <div className="flex items-center w-full gap-10 px-4">
-        <div className="text-sm text-[#5F6284] min-w-[max-content]">انتها فرآیند</div>
+        <div className="flex items-center w-full gap-10">
+        <div className="text-lg text-gray-600 min-w-[max-content]">انتها فرآیند</div>
           <div className="flex items-center w-full gap-4">
             {(() => {
               const lastValue = data[data.length - 1]?.value ?? 0;
               const percent = toPercent(lastValue);
               return (
                 <div style={{ width: `${percent}%` }} className={`mx-auto h-0.5 bg-gray-600 relative ${percent === 0 ? "hidden" : ""}`}>
-                  <div className="text-base font-semibold text-white absolute left-1/2 -translate-x-1/2 bottom-[-2.5rem] -translate-y-1">{formatNumber(percent)}%</div>
+                  <div className="text-2xl text-white absolute left-1/2 -translate-x-1/2 bottom-[-2.5rem] -translate-y-1">{formatNumber(percent)}%</div>
                   <div className="absolute -top-1 left-0 w-1 h-3 bg-gray-600"></div>
                   <div className="absolute -top-1 right-0 w-1 h-3 bg-gray-600"></div>
                 </div>

app/components/ui/metric-card.tsx

@@ -1,48 +0,0 @@
-import { formatNumber } from "~/lib/utils";
-import { BaseCard } from "./base-card";
-
-interface MetricCardProps {
-  title: string;
-  value: string | number;
-  percentValue?: string | number;
-  valueLabel?: string;
-  percentLabel?: string;
-}
-
-export function MetricCard({
-  title,
-  value,
-  percentValue,
-  valueLabel = "میلیون ریال",
-  percentLabel = "درصد به کل",
-}: MetricCardProps) {
-  return (
-    <BaseCard title={title} className="h-full">
-      <div className="flex items-center justify-center flex-col">
-        <div className="flex items-center gap-4 h-full">
-          <div className="text-center">
-            <p className="text-3xl font-bold text-green-400">
-              {formatNumber(value)}
-            </p>
-            <div className="text-xs text-gray-400 font-persian">
-              {valueLabel}
-            </div>
-          </div>
-          {percentValue !== undefined && (
-            <>
-              <span className="text-5xl font-thin text-gray-600">/</span>
-              <div className="text-center">
-                <p className="text-3xl font-bold text-green-400">
-                  {formatNumber(percentValue)}%
-                </p>
-                <div className="text-xs text-gray-400 font-persian">
-                  {percentLabel}
-                </div>
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </BaseCard>
-  );
-}

app/components/ui/progress.tsx

@@ -1,51 +1,26 @@
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-import { cn, formatNumber } from "~/lib/utils"
+import { cn } from "~/lib/utils"
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => {
-  // Dynamic scaling logic based on value ranges
-  const getScaledValue = (inputValue: number) => {
-    const numValue = Number(inputValue);
-    if (numValue <= 1) {
-      return numValue * 100;
-    }
-   else  if (numValue <= 10) {
-      return (numValue / 10) * 100;
-    } else if (numValue <= 50) {
-      return (numValue / 50) * 100;
-    }
-    else {
-      return numValue
-    }
-  };
-
-  const scaledValue = getScaledValue(Number(value) || 0);
-  const displayValue = Number(value) || 0;
-
-  return (
-    <ProgressPrimitive.Root
-      ref={ref}
-      className={cn(
-        "relative h-4 w-full overflow-hidden rounded-full bg-pr-gray",
-        className
-      )}
-      {...props}
-    >
-      <span className="left-0 text-sm absolute z-10 px-2 text-[#5F6284]">۰%</span>
-      <span className="w-full right-0 text-sm absolute z-10 px-2 text-[#5F6284]">
-        {formatNumber(displayValue.toFixed(2))}%
-      </span>
-      <ProgressPrimitive.Indicator
-        className="h-full w-full flex-1 bg-pr-green transition-all z-20"
-        style={{ transform: `translateX(-${100-scaledValue}%)` }}
-      />
-    </ProgressPrimitive.Root>
-  )
-})
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
 Progress.displayName = ProgressPrimitive.Root.displayName
 
 export { Progress }

app/components/ui/table.tsx

@@ -4,12 +4,11 @@ import { cn } from "~/lib/utils"
 
 interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   containerClassName?: string
-  containerRef?: React.RefObject<HTMLDivElement | null>
 }
 
 const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ className, containerClassName, containerRef, ...props }, ref) => (
-    <div ref={containerRef} className={cn("relative w-full", containerClassName)}>
+  ({ className, containerClassName, ...props }, ref) => (
+    <div className={cn("relative w-full", containerClassName)}>
       <table
         ref={ref}
         className={cn("w-full caption-bottom text-sm h-full", className)}

app/components/ui/tabs.tsx

@@ -81,7 +81,7 @@ export function TabsTrigger({
       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-pr-gray text-foreground shadow-sm"
+          ? "bg-gray-700 text-foreground shadow-sm"
           : "hover:bg-muted/50",
         className,
       )}

app/components/ui/tooltip.tsx

@@ -52,7 +52,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className={cn("bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",className)} />
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

app/components/ui/truncatedText.tsx

@@ -1,31 +0,0 @@
-import * as React from "react"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
-
-interface TruncatedTextProps {
-  text: string
-  maxWords?: number
-}
-
-export function TruncatedText({ text, maxWords = 4 }: TruncatedTextProps) {
-  const words = text.trim().split(/\s+/)
-  console.log(words)
-  const shouldTruncate = words.length > maxWords
-  const displayText = shouldTruncate ? words.slice(0, maxWords).join(" ") + " ..." : text
-
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <span className={`${words.length >= 4 ? "cursor-help" : ""} text-foreground`}>
-            {displayText}
-          </span>
-        </TooltipTrigger>
-        {shouldTruncate && (
-          <TooltipContent className="max-w-xs">
-            {text}
-          </TooltipContent>
-        )}
-      </Tooltip>
-    </TooltipProvider>
-  )
-}

app/hooks/useStoredDate.tsx

@@ -1,27 +0,0 @@
-import jalaali from "jalaali-js";
-import { useEffect, useState } from "react";
-import type { CalendarDate } from "~/types/util.type";
-
-const { jy } = jalaali.toJalaali(new Date());
-
-export function useStoredDate(): [
-  CalendarDate,
-  React.Dispatch<React.SetStateAction<CalendarDate>>,
-] {
-  const [date, setDate] = useState<CalendarDate>({});
-
-  useEffect(() => {
-    const storedDate = localStorage.getItem("dateSelected");
-
-    if (storedDate) {
-      setDate(JSON.parse(storedDate));
-    } else {
-      setDate({
-        start: `${jy}/01/01`,
-        end: `${jy}/12/30`,
-      });
-    }
-  }, [jy]);
-
-  return [date, setDate];
-}

app/lib/api.ts

@@ -162,24 +162,10 @@ class ApiService {
 
   // Innovation process function call wrapper
   public async call<T = any>(payload: any) {
-    //بندر امام
     const url = "https://inogen-back.pelekan.org/api/call";
-    //آپادانا
-    const url = "https://APADANA-IATM-back.pelekan.org/api/call";
-    //نوری
-    const url = "https://NOPC-IATM-back.pelekan.org/api/call";
     return this.postAbsolute<T>(url, payload);
   }
 
-
-  const API_BASE_URL =
-  //بندر امام
-  // import.meta.env.VITE_API_URL || "https://inogen-bpms-back.pelekan.org/api";
-  //آپادانا
-  import.meta.env.VITE_API_URL || "https://APADANA-IATM-back.pelekan.org/api";
-  //نوری
-  // import.meta.env.VITE_API_URL || "https://NOPC-IATM-back.pelekan.org/api";
-
   // GET request
   public async get<T = any>(endpoint: string): Promise<ApiResponse<T>> {
     return this.request<T>(endpoint, {

app/lib/utils.ts

@@ -1,7 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
-import EventEmitter from "events";
-import moment from "moment-jalaali";
 import { twMerge } from "tailwind-merge";
+import moment from "moment-jalaali";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -23,100 +22,10 @@ export const formatCurrency = (amount: string | number) => {
   return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
 };
 
-/**
- * محاسبه دامنه nice numbers برای محور Y نمودارها
- * @param values آرایه از مقادیر داده‌ها
- * @param minValue حداقل مقدار (پیش‌فرض: 0 برای داده‌های درصدی)
- * @param marginPercent درصد حاشیه اضافی (پیش‌فرض: 5%)
- * @returns شیء شامل حداکثر nice، فاصله tick ها، و آرایه tick ها
- */
-export function calculateNiceRange(
-  values: number[],
-  minValue: number = 0,
-  marginPercent: number = 5
-): {
-  niceMax: number;
-  tickInterval: number;
-  ticks: number[];
-} {
-  if (values.length === 0) {
-    return { niceMax: 100, tickInterval: 20, ticks: [0, 20, 40, 60, 80, 100] };
-  }
 
-  // پیدا کردن حداکثر مقدار در داده‌ها
-  const dataMax = Math.max(...values);
 
-  // اگر همه مقادیر صفر یا منفی هستند
-  if (dataMax <= 0) {
-    return { niceMax: 100, tickInterval: 20, ticks: [0, 20, 40, 60, 80, 100] };
-  }
-
-  // اضافه کردن حاشیه
-  const maxWithMargin = dataMax * (1 + marginPercent / 100);
-
-  // محاسبه nice upper limit
-  const niceMax = calculateNiceNumber(maxWithMargin, true);
-
-  // محاسبه فاصله مناسب tick ها بر اساس niceMax
-  const range = niceMax - minValue;
-  const targetTicks = 5; // هدف: 5 tick
-  const roughTickInterval = range / (targetTicks - 1);
-  const niceTickInterval = calculateNiceNumber(roughTickInterval, false);
-
-  // ایجاد آرایه tick ها
-  const ticks: number[] = [];
-  for (let i = minValue; i <= niceMax; i += niceTickInterval) {
-    ticks.push(Math.round(i));
-  }
-
-  // اطمینان از اینکه niceMax در آرایه tick ها باشد
-  if (ticks[ticks.length - 1] !== niceMax) {
-    ticks.push(niceMax);
-  }
-
-  return {
-    niceMax,
-    tickInterval: niceTickInterval,
-    ticks,
-  };
-}
-
-/**
- * محاسبه عدد nice (گرد و خوانا) بر اساس الگوریتم nice numbers
- * @param value مقدار ورودی
- * @param round آیا به سمت بالا گرد شود یا نه
- * @returns عدد nice
- */
-function calculateNiceNumber(value: number, round: boolean): number {
-  if (value <= 0) return 0;
-
-  // پیدا کردن قدرت 10
-  const exponent = Math.floor(Math.log10(value));
-  const fraction = value / Math.pow(10, exponent);
-
-  let niceFraction: number;
-
-  if (round) {
-    // برای حداکثر: به سمت بالا گرد می‌کنیم با دقت بیشتر
-    if (fraction <= 1.0) niceFraction = 1;
-    else if (fraction <= 2.0) niceFraction = 2;
-    else if (fraction <= 2.5) niceFraction = 2.5;
-    else if (fraction <= 5.0) niceFraction = 5;
-    else if (fraction <= 7.5) niceFraction = 7.5;
-    else niceFraction = 10;
-  } else {
-    // برای فاصله tick ها: اعداد ساده‌تر
-    if (fraction <= 1.0) niceFraction = 1;
-    else if (fraction <= 2.0) niceFraction = 2;
-    else if (fraction <= 5.0) niceFraction = 5;
-    else niceFraction = 10;
-  }
-
-  return niceFraction * Math.pow(10, exponent);
-}
-
-export const handleDataValue = (val: any): any => {
-  moment.loadPersian({ usePersianDigits: true });
+export const  handleDataValue = (val: any): any => {
+moment.loadPersian({ usePersianDigits: true });
   if (val == null) return val;
   if (
     typeof val === "string" &&
@@ -131,6 +40,4 @@ export const handleDataValue = (val: any): any => {
     return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
   }
   return val;
-};
-
-export const EventBus = new EventEmitter();
+}

app/routes/ecosystem.tsx

@@ -1,33 +1,27 @@
-import moment from "moment-jalaali";
+import type { Route } from "./+types/ecosystem";
 import React from "react";
 import { ProtectedRoute } from "~/components/auth/protected-route";
 import { DashboardLayout } from "~/components/dashboard/layout";
-import { InfoPanel } from "~/components/ecosystem/info-panel";
-import { NetworkGraph } from "~/components/ecosystem/network-graph";
-import { Card, CardContent } from "~/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from "~/components/ui/dialog";
+import { NetworkGraph } from "~/components/ecosystem/network-graph";
+import { InfoPanel } from "~/components/ecosystem/info-panel";
 import { useAuth } from "~/contexts/auth-context";
-import type { Route } from "./+types/ecosystem";
+import moment from "moment-jalaali";
 
 // Get API base URL at module level to avoid process.env access in browser
 const API_BASE_URL =
-//بندر امام
-// import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
-//آپادانا
-import.meta.env.VITE_API_URL || "https://APADANA-IATM-back.pelekan.org/api";
-//نوری
-// import.meta.env.VITE_API_URL || "https://NOPC-IATM-back.pelekan.org/api";
-
-
+  import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
 
 // Import the CompanyDetails type
-import { Hexagon } from "lucide-react";
 import type { CompanyDetails } from "~/components/ecosystem/network-graph";
+import { formatNumber } from "~/lib/utils";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -61,20 +55,10 @@ function handleValue(val: any): any {
 export default function EcosystemPage() {
   const [selectedCompany, setSelectedCompany] =
     React.useState<CompanyDetails | null>(null);
-  const [isDialogLoading, setIsDialogLoading] = React.useState(false);
   const { token } = useAuth();
 
   const closeDialog = () => {
     setSelectedCompany(null);
-    setIsDialogLoading(false);
-  };
-
-  const handleNodeClick = (company: CompanyDetails) => {
-    setSelectedCompany(company);
-  };
-
-  const handleLoadingChange = (loading: boolean) => {
-    setIsDialogLoading(loading);
   };
 
   // Construct image URL
@@ -85,19 +69,16 @@ export default function EcosystemPage() {
   return (
     <ProtectedRoute requireAuth={true}>
       <DashboardLayout title="زیست بوم فناوری">
-        <div>
+        <div className="p-4 lg:p-6">
           <div className="grid grid-cols-1 items-start lg:grid-cols-12 gap-4">
             <div className="lg:col-span-4">
               <InfoPanel selectedCompany={selectedCompany} />
             </div>
 
             <div className="lg:col-span-8 h-full">
-              <Card className="h-full overflow-hidden bg-transparent border-[#3F415A]">
-                <CardContent className="p-0 h-full bg-transparent">
-                  <NetworkGraph
-                    onNodeClick={handleNodeClick}
-                    onLoadingChange={handleLoadingChange}
-                  />
+              <Card className="h-full overflow-hidden">
+                <CardContent className="p-0 h-full">
+                  <NetworkGraph onNodeClick={setSelectedCompany} />
                 </CardContent>
               </Card>
             </div>
@@ -109,146 +90,104 @@ export default function EcosystemPage() {
           open={!!selectedCompany}
           onOpenChange={(open) => !open && closeDialog()}
         >
-          <DialogContent className="font-persian max-w-6xl min-h-max  bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
+          <DialogContent className="font-persian max-w-6xl max-h-[75vh] overflow-y-auto bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
             <DialogHeader>
-              <DialogTitle className="text-right border-b-2 border-gray-600 pt-2 pb-4 mr-4 text-sm font-semibold">
+              <DialogTitle className="text-right border-b-2   border-gray-600 py-2 mr-4 text-xl">
                 معرفی
                 <span> {selectedCompany?.category}</span>
               </DialogTitle>
+              <DialogDescription className="text-center text-green-400"></DialogDescription>
             </DialogHeader>
 
-            {isDialogLoading ? (
-              <div className="grid grid-cols-1 md:grid-cols-2 p-4 gap-6">
-                {/* Right Column - Loading Skeleton */}
-                <div className="space-y-4 p-6 border-l-2 border-gray-600">
-                  {/* Company Image & Title Skeleton */}
-                  <div className="flex justify-between px-10 items-center mb-4">
-                    <div className="h-8 bg-gray-600 rounded animate-pulse w-48"></div>
-                    <div className="w-12 h-12 bg-gray-600 rounded-2xl animate-pulse"></div>
-                  </div>
-                  {/* Description Skeleton */}
-                  <div className="p-4 rounded-lg space-y-2">
-                    <div className="h-4 bg-gray-600 rounded animate-pulse w-full"></div>
-                    <div className="h-4 bg-gray-600 rounded animate-pulse w-5/6"></div>
-                    <div className="h-4 bg-gray-600 rounded animate-pulse w-4/6"></div>
-                    <div className="h-4 bg-gray-600 rounded animate-pulse w-3/6"></div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {/* Right Column - Description */}
+              <div className="space-y-4 p-6 border-l-2 border-gray-600">
+                {/* Company Image */}
+                <div className="flex justify-between px-10 items-center text-3xl font-bold mb-4">
+                  {selectedCompany?.label || ""}
+                  {selectedCompany?.stageid && token?.accessToken ? (
+                    <img
+                      src={getImageUrl(selectedCompany.stageid)}
+                      alt={selectedCompany?.label || ""}
+                      className="w-14 h-14 object-cover rounded-2xl"
+                      onError={(e) => {
+                        // Hide image and show fallback on error
+                        e.currentTarget.style.display = "none";
+                        if (e.currentTarget.nextSibling) {
+                          (
+                            e.currentTarget.nextSibling as HTMLElement
+                          ).style.display = "flex";
+                        }
+                      }}
+                    />
+                  ) : null}
+                  <div
+                    className="w-24 h-24 rounded-full bg-gray-600 border-4 border-green-400 flex items-center justify-center"
+                    style={{
+                      display:
+                        selectedCompany?.stageid && token?.accessToken
+                          ? "none"
+                          : "flex",
+                    }}
+                  >
+                    <svg
+                      className="w-10 h-10 text-gray-400"
+                      fill="none"
+                      stroke="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+                      />
+                    </svg>
                   </div>
                 </div>
-                {/* Left Column - Loading Skeleton */}
-                <div className="space-y-2">
-                  <div className="h-6 bg-gray-600 rounded animate-pulse w-32"></div>
-                  <div className="space-y-3 px-2">
-                    {Array.from({ length: 6 }).map((_, index) => (
+                {selectedCompany?.description ? (
+                  <div className="p-4  rounded-lg">
+                    <p className="font-persian leading-relaxed">
+                      {selectedCompany.description}
+                    </p>
+                  </div>
+                ) : (
+                  <div className="text-gray-500 font-persian text-sm">
+                    توضیحات در دسترس نیست
+                  </div>
+                )}
+              </div>
+              {/* Left Column - Company Fields */}
+              <div className="space-y-2">
+                <h3 className="font-persian gap-1 flex text-lg font-bold">
+                  اطلاعات
+                  <span>{selectedCompany?.category}</span>
+                </h3>
+                {selectedCompany?.fields &&
+                selectedCompany.fields.length > 0 ? (
+                  <div className="space-y-3">
+                    {selectedCompany.fields.map((field, index) => (
                       <div
                         key={index}
                         className="flex justify-between items-center rounded-lg"
                       >
-                        <div className="flex items-center gap-1">
-                          <div className="h-4 w-4 bg-gray-600 rounded animate-pulse"></div>
-                          <div className="h-4 bg-gray-600 rounded animate-pulse w-24"></div>
-                        </div>
-                        <div className="h-4 bg-gray-600 rounded animate-pulse w-20"></div>
+                        <span className="font-persian font-light">
+                          {field.N}:
+                        </span>
+                        <span className="font-persian font-light text-right">
+                          {handleValue(field.V)}
+                          {field.U && <span className="mr-1">({field.U})</span>}
+                        </span>
                       </div>
                     ))}
                   </div>
-                </div>
-              </div>
-            ) : (
-              <div className="grid p-4 pb-6 grid-cols-1 md:grid-cols-2 gap-6">
-                {/* Right Column - Description */}
-                <div className="space-y-4 p-6 border-l-2 border-gray-600">
-                  {/* Company Image */}
-                  <div className="flex justify-between px-10 items-center text-3xl font-bold mb-4">
-                    {selectedCompany?.label || ""}
-                    {selectedCompany?.stageid && token?.accessToken ? (
-                      <img
-                        src={getImageUrl(selectedCompany.stageid)}
-                        alt={selectedCompany?.label || ""}
-                        className="w-12 h-12 object-cover rounded-2xl"
-                        onError={(e) => {
-                          // Hide image and show fallback on error
-                          e.currentTarget.style.display = "none";
-                          if (e.currentTarget.nextSibling) {
-                            (
-                              e.currentTarget.nextSibling as HTMLElement
-                            ).style.display = "flex";
-                          }
-                        }}
-                      />
-                    ) : null}
-                    <div
-                      className="w-24 h-24 rounded-full bg-gray-600 border-4 border-pr-green flex items-center justify-center"
-                      style={{
-                        display:
-                          selectedCompany?.stageid && token?.accessToken
-                            ? "none"
-                            : "flex",
-                      }}
-                    >
-                      <svg
-                        className="w-10 h-10 text-gray-400"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                        />
-                      </svg>
-                    </div>
+                ) : (
+                  <div className="text-gray-500 font-persian text-sm">
+                    اطلاعات تکمیلی در دسترس نیست
                   </div>
-                  {selectedCompany?.description ? (
-                    <div className="p-4  rounded-lg">
-                      <p className="font-persian text-sm font-normal leading-relaxed">
-                        {selectedCompany.description}
-                      </p>
-                    </div>
-                  ) : (
-                    <div className="text-gray-500 font-persian text-sm">
-                      توضیحات در دسترس نیست
-                    </div>
-                  )}
-                </div>
-                {/* Left Column - Company Fields */}
-                <div className="space-y-2">
-                  <h3 className="font-persian gap-1 flex text-sm font-semibold">
-                    اطلاعات
-                    <span>{selectedCompany?.category}</span>
-                  </h3>
-                  {selectedCompany?.fields &&
-                  selectedCompany.fields.length > 0 ? (
-                    <div className="space-y-3 px-2">
-                      {selectedCompany.fields.map((field, index) => (
-                        <div
-                          key={index}
-                          className="flex justify-between items-center rounded-lg"
-                        >
-                          <span className="font-persian flex items-center gap-1 text-sm font-light">
-                            <Hexagon className="text-pr-green h-4 w-4" />
-                            {field.N}:
-                          </span>
-                          <span className="text-right min-w-1/3">
-                            <span className="font-persian text-sm font-normal text-right">
-                              {handleValue(field.V)}
-                              {field.U && (
-                                <span className="mr-1">({field.U})</span>
-                              )}
-                            </span>
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <div className="text-gray-500 font-persian text-sm">
-                      اطلاعات تکمیلی در دسترس نیست
-                    </div>
-                  )}
-                </div>
+                )}
               </div>
-            )}
+            </div>
           </DialogContent>
         </Dialog>
       </DashboardLayout>

app/routes/manage-ideas-tech-page.tsx

@@ -3,7 +3,7 @@ import { ManageIdeasTechPage } from "~/components/dashboard/project-management/m
 
 export function meta() {
   return [
-    { title: "مدیریت فناوری و ایده ها" },
+    { title: "مدیریت فنواری و ایده ها" },
     { name: "description", content: "مدیریت پروژه‌های فناوری و نوآوری" },
   ];
 }

app/types/util.type.ts

@@ -1,6 +0,0 @@
-export interface CalendarDate {
-  start?: string;
-  end?: string;
-  sinceMonth?: string;
-  untilMonth?: string;
-}

package.json

@@ -26,7 +26,6 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "d3": "^7.9.0",
-    "file-saver": "^2.0.5",
     "graphology": "^0.26.0",
     "isbot": "^5.1.27",
     "lucide-react": "^0.525.0",
@@ -36,13 +35,11 @@
     "react-hot-toast": "^2.5.2",
     "react-router": "^7.7.0",
     "recharts": "^2.15.4",
-    "tailwind-merge": "^3.3.1",
-    "xlsx-js-style": "^1.2.0"
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@react-router/dev": "^7.7.0",
     "@tailwindcss/vite": "^4.1.4",
-    "@types/file-saver": "^2.0.7",
     "@types/node": "^20",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

public/font/IranYekanX.html

@@ -1,426 +0,0 @@
-<!doctype html>
-<html lang="fa">
-<head>
-<meta charset="utf-8">
-<title>IRANYekanX Family Type face: خانواده فونت ایران‌سنس</title>
-
-<meta name="fontiran.com:license" content="کد ۵ رقمی لایسنس">
-
-<link href="style.css" rel="stylesheet">
-</head>
-
-
-<body dir="rtl">
-<div class="wrapper">
-
-<div class="mainbox">
-<div class="titelbox">
-<h1>بِسْمِ اللهِ الرَّحْمَنِ الرَّحِيمِ</h1>
-</div>
-<div class="alphabet" style="line-height:200px" > د </div> 
-<div class="rightbox">
-<br>
- <span class="text-xlarge">ن وَالْقَلَمِ وَ مَا يَسْطُرُون</span>
-<br>
-<span class="text-xlarge"> نون؛ سوگند به قلم و آنچه می نويسند. </span>
- <br>
-<span class="text-large"> Noon. I swear by the pen and what the angels write </span>
-<br>
-<br>
-</div>
-</div>
-
-<div class="mainbox">
-
-<div class="titelbox" style="letter-spacing: 0px">
-<h1>نکاتی درباره تایپوگرافی وب</h1>
-</div>
-
-<div class="alphabet" style="line-height:250px" > ج </div> 
-<div class="rightbox">
-	<p>از زمان پیدایش نخستین وب سایت، متن ها یکی از اجزای مهم صفحات وب بودند. هر چند به مرور زمان با ورود تصاویر، صوت و فیلم کمی از بار مسئولیت متون کم شد اما هنوز جایگاه خود را از دست نداده اند و بخش مهمی از کار را به عهده دارند.</p>
-	<p>بسیاری از طراحان وب سایت به صورت تجربی بهترین ترکیب و ظاهر را برای نمایش متن ها انتخاب می کنند. اما اصولی وجود دارد که با رعایت آن ها، تاثیرپذیری و زیبایی سایت چند برابر خواهد شد.</p>
-	<p>در ادامه مطلب قصد داریم تعدادی از اصول مقدماتی تایپوگرافی را به اختصار مرور کنیم. هرچند بسیاری از دوستان با این نکات آشنا هستند؛ اما شاید مرور آن ها خالی از لطف نباشد.</p>
-</div> 
-
-
-</div> 
-
-<div class="mainbox">
-<div class="titelbox" style="letter-spacing: 0px">
-	<h1>تاثیر اندازه فونت و سلسله مراتب تگ‌ها</h1>
-</div>    
-    <div class="alphabet" style="line-height:170px"> ن </div> 
-    <div class="rightbox">
-	<p>فونت های داخل سایت باید به گونه ای قرار گیرند که کاربر به راحتی بتواند آن ها را بخواند. نوع فونت، وزن و کوچک (یا بزرگ) بودن اندازه آن ممکن است تمایل کاربر برای بازگشت به وب سایت را کاهش دهد. قواعد و قوانین زیادی برای انتخاب بهترین  فونت وجود دارد.</p>
-	<p>در زیر می توانید ۱۲ وزن مختلف <strong>خانواده فونت ایران‌سنس</strong> را در شرایط یکسان مشاهده کنید. لازم به ذکر است برای این صفحه از وزن معمولی (Normal) استفاده شده است.</p>
-    </div> 
-</div> 
-
-   
-<div class="mainbox">
-<div class="mainbox2">    
-	<div class="text-thin"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Thin)</div>
-	<div class="text-UltraLight"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (UltraLight)</div>
-	<div class="text-light"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Light)</div>
-	<div class="text-regular"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Regular)</div>
-	<div class="text-medium"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Medium)</div>
-	<div class="text-demibold"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (demiBold)</div>
-	<div class="text-bold"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Bold)</div>
-	<div class="text-extrabold"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (ExtraBold)</div>
-	<div class="text-black"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Black)</div>
-	<div class="text-extrablack"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (ExtraBlack)</div>
-	<div class="text-heavy"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Heavy)</div>
-</div> 
-</div>  
-
-<div class="mainboxnegativ">
-<div class="mainbox2">    
-	
-	<div class="text-thin"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Thin)</div>
-	<div class="text-UltraLight"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (UltraLight)</div>
-	<div class="text-light"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Light)</div>
-	<div class="text-regular"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Regular)</div>
-	<div class="text-medium"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Medium)</div>
-	<div class="text-demibold"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (demiBold)</div>
-	<div class="text-bold"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Bold)</div>
-	<div class="text-extrabold"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (ExtraBold)</div>
-	<div class="text-black"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Black)</div>
-		<div class="text-extrablack"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (ExtraBlack)</div>
-	<div class="text-heavy"  style="font-size:2.2em">من نه آنم که زبونی کشم از چرخ فلک (Heavy)</div>
-</div>
-</div>
-
-<div class="mainbox">
-<div class="titelbox" style="letter-spacing: 0px">
-	<h1>تگ‌های هدینگ</h1>
-</div>    
-    <div class="alphabet" style="line-height:180px"> و </div> 
-    <div class="rightbox">
-<p>در این بین، استفاده از تگ های هدینگ مناسب و رعایت سلسله مراتب آن ها، هم مفهوم نوشته را بهتر منتقل می کند و هم تاثیر قابل توجهی در نتایج موتورهای جستجو خواهد داشت. این نکته یکی از فاکتورهای مهم در بهینه سازی وب سایت برای موتورهای جستجو (Search Engine Optimization) است.</p>
-	<p>نمونه ای از خروجی تگ های هدینگ با سایز استاندارد مربوطه به فونت های فونت ایران‌سنس را در زیر مشاهده می کنید.</p>
- </div> 
-</div> 
-    
-<div class="mainbox">
-<div class="mainbox2"> 	
-	<h1>(H1) نابرده رنج گنج میسر نمی شود. No gain without pain </h1>
-	<h2>(H2) نابرده رنج گنج میسر نمی شود. No gain without pain</h2>
-	<h3>(H3) نابرده رنج گنج میسر نمی شود. No gain without pain</h3>
-	<h4>(H4) نابرده رنج گنج میسر نمی شود. No gain without pain </h4>
-	<h5>(H5) نابرده رنج گنج میسر نمی شود. No gain without pain</h5>
-	<h6>(H6) نابرده رنج گنج میسر نمی شود. No gain without pain</h6>
-</div>
-</div> 
-
-<div class="mainboxnegativ">
-<div class="mainbox2"> 	
-	<h1>(H1) نابرده رنج گنج میسر نمی شود. No gain without pain </h1>
-	<h2>(H2) نابرده رنج گنج میسر نمی شود. No gain without pain</h2>
-	<h3>(H3) نابرده رنج گنج میسر نمی شود. No gain without pain</h3>
-	<h4>(H4) نابرده رنج گنج میسر نمی شود. No gain without pain </h4>
-	<h5>(H5) نابرده رنج گنج میسر نمی شود. No gain without pain</h5>
-	<h6>(H6) نابرده رنج گنج میسر نمی شود. No gain without pain</h6>
-</div>
-</div>
-
-<div class="mainbox">
-<div class="titelbox" style="letter-spacing: 0px">
-	<h1>سطر و ستون بندی</h1>
-</div>    
-    <div class="alphabet" style="line-height:200px"> م </div> 
-    <div class="rightbox">
-<p>معمولاً هرگاه مقدار نوشته از یک سطر بیشتر شود ناگزیر به ستون بندی هستیم. و این کار ما را با چند متغییر مواجه خواهد کرد:</p>
-	<p>۱- <strong>عرض ستون‌های متنی</strong> که حاوی حداقل۷ کلمه باشد بهترین انتخاب است. اگر ستون کوتاه‌تر باشد چشم بیننده در اثر حرکت‌های زود به زود از پایان یک سطر به ابتدای سطر بعدی خسته خواهد شد. علاوه بر این لبه ستون‌هایی با عرض کم نیز همیشه دندانه ای و بی نظم خواهد بود. ستون‌هایی با عرض طولانی هم برای خواننده آزار دهنده است چرا که چشم در حرکت بازگشت از انتهای یک سطر به ابتدای سطر بعدی ممکن است دچار اشتباه شود.
-
-    <p>۲- <strong>لدینگ یا همان فاصله سطر </strong> هم در ستون بندی اهمیت دارد. ستون‌های فشرده اگرچه به لحاظ گرافیکی منسجم و زیبا هستند اما عمل خواندن را مختل می کنند و در مقابل، فاصله سطر زیاد نیز باعث نازیبایی و خستگی چشم خواننده می‌شود. فاصله سطر همیشه می تواند با توجه به نوع فونت و عرض ستون‌ها تغییر کند. بدین ترتیب که فونت‌هایی با دندانه‌های بلند‌تر و ستون‌هایی با عرض بیشتر به لدینگ بیشتری نیاز دارند.    
-    <p>۳- <strong>همترازی </strong> هم یکی از متغییرهای پر بحث در ستون بندی است. اما به طور کوتاه و خلاصه باید گفت که بهتر است در متن فارسی از همترازی یا همان Justification استفاده نکنید. این عمل اگرچه لبه پاراگراف شما را مرتب خواهد کرد اما تنظیمات فاصله حروف را تغییر خواهد داد و در نتیجه باعث کاهش خوانایی خواهد شد.                </div> 
-</div> 
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Thin)</div>     
-	<div class="farsiparagraph"><span class="text-thin">ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-thin">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX UltraLight)</div>     
-	<div class="farsiparagraph"><span class="text-UltraLight">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-UltraLight">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Light)</div>     
-	<div class="farsiparagraph"><span class="text-light">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-light">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Regular)</div>     
-	<div class="farsiparagraph"><span class="text-regular">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-regular">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Mediume)</div>     
-	<div class="farsiparagraph"><span class="text-medium">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-medium">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX DemiBold)</div>     
-	<div class="farsiparagraph"><span class="text-demibold">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-demibold">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Bold)</div>     
-	<div class="farsiparagraph"><span class="text-bold">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-bold">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX ExtraBold)</div>     
-	<div class="farsiparagraph"><span class="text-extrabold">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-extrabold">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Black)</div>     
-	<div class="farsiparagraph"><span class="text-black">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-black">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX ExtraBlack)</div>     
-	<div class="farsiparagraph"><span class="text-extrablack">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-extrablack">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox"> 
-<div class="mainbox2negativ">(IRANYekanX Heavy)</div>     
-	<div class="farsiparagraph"><span class="text-heavy">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-heavy">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-
-
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Thin)</div>     
-	<div class="farsiparagraph"><span class="text-thin">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-thin">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX UltraLight)</div>     
-	<div class="farsiparagraph"><span class="text-UltraLight">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-UltraLight">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Light)</div>     
-	<div class="farsiparagraph"><span class="text-light">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-light">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Regular)</div>     
-	<div class="farsiparagraph"><span class="text-regular">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-regular">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Mediume)</div>     
-	<div class="farsiparagraph"><span class="text-medium">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-medium">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX DemiBold)</div>     
-	<div class="farsiparagraph"><span class="text-demibold">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-demibold">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Bold)</div>     
-	<div class="farsiparagraph"><span class="text-bold">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-bold">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX ExtraBold)</div>     
-	<div class="farsiparagraph"><span class="text-extrabold">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-extrabold">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Black)</div>     
-	<div class="farsiparagraph"><span class="text-black">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-black">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX ExtraBlack)</div>     
-	<div class="farsiparagraph"><span class="text-extrablack">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-extrablack">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainboxnegativ"> 
-<div class="mainbox2negativ">(IRANYekanX Heavy)</div>     
-	<div class="farsiparagraph"><span class="text-heavy">
-ایران‌یکان IRANYekanX از ترکیب دو فونت پر طرفدار یکان و ایران‌سنس پدید آمده است. بخشی از منحنی‌های ایران‌سنس به ساختار عمودی و افقی یکان اضافه شده است تا ایران‌یکان IRANYekanX فونتی باشد که با وجود هندسی بودن خشک و مکانیکی نباشد. این فونت با سبک‌های طراحی کمینه‌گرا Minimal سازگاری خوبی دارد و همنشین مناسبی برای فونت‌های سن‌سریف لاتین است.	</span></div>
-
-<div class="englishparagraph"><span class="text-heavy">
-Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.</span></div>	  
-</div>
-
-<div class="mainbox">
-<div class="titelbox" style="letter-spacing: 0px">
-	<h1>اعداد و علائم در فونت فارسی</h1>
-</div>    
-    <div class="alphabet" style="line-height:470px"> ظ </div> 
-    <div class="rightbox">
-      <p><span class="text-xlarge">اعداد فارسی: <strong>۱۲۳۴۵۶۷۸۹۰</strong></span><br>
-        <span class="text-xlarge">اعداد عربی: <strong>۱۲۳٤٥٦۷۸۹۰</strong></span><br>
-      <span class="text-xlarge">اعداد انگلیسی: <strong>1234567890</strong></span></p>
-      <p>برای تایپ اعداد فارسی در محیط وب از <a href="http://fontiran.com/%d9%86%d8%b5%d8%a8-%da%a9%db%8c%d8%a8%d9%88%d8%b1%d8%af-%d9%81%d8%a7%d8%b1%d8%b3%db%8c-%d8%a7%d8%b3%d8%aa%d8%a7%d9%86%d8%af%d8%a7%d8%b1%d8%af-%d8%af%d8%b1-%d9%88%db%8c%d9%86%d8%af%d9%88%d8%b28-%d9%88/">کیبورد استاندارد فارسی</a> استفاده کنید. در ویندوز ۸ و یا بالاتر این کیبورد، با نام Persian(Standard)Keyboard در لیست کیبوردهای ویندوز وجود دارد. همچنین می توانید از <a href="http://persian-computing.ir/download/Iranian_Standard_Persian_Keyboard_(ISIRI_9147)_(Version_2.0).zip">این آدرس</a> آن را دانلود و نصب کنید.</p>
-      <span>
-      <p>با استفاده از کیبورد استاندارد می‌توانید ممیز فارسی را تایپ کنید.<br>
-        <span>میانبر این علامت کلیدهای <span class="text-medium">Shift+3</span> است. به این شکل: <strong class="text-xlarge">۳٫۱۴</strong></span><br>
-        <span >ممیز فارسی با علامت اسلش  تفاوت دارد :<strong class="text-xlarge">۳/۱۴</strong></span>
-</p>
-      <p>با استفاده از کیبورد استاندارد می‌توانید جداکننده هزارگان فارسی را تایپ کنید.<br>
-      <span>میانبر این علامت کلیدهای <strong>Shift+2</strong> است. به این شکل: <strong class="text-xlarge">۹٬۲۱۰٬۰۰۰</strong></span><br>
-        <span >این علامت با جدا کننده هزارگان انگلیسی تفاوت دارد : <strong class="text-xlarge">۹,۲۱۰,۰۰۰</strong></span>
-      </p>
-    </div> 
-</div>
-    
- <div class="mainbox">
-<div class="titelbox" style="letter-spacing: 0px">      
-	<h1> نسبت‌های طلایی</h1>
-</div>    
-    <div class="alphabet2">
-    <div style="padding-left:20px">
-	۳٫۷۷۷ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۲٫۳۳۵</span>
-	<br>
-	۶٫۱۱۲ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۳٫۷۷۷</span>
-	<br>
-	۹٫۸۸۹ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۶٫۱۱۲</span>
-	<br>
-	۱۶ &divide; ۱٫۶۱۸ = <span class="text-regular text-underline">۹٫۸۸۹</span>
-	<br>
-.......................................
-	<br>
-	۱۶ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۲۵٫۸۸۸</span>
-	<br>
-	۲۵٫۸۸۸ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۴۱٫۸۸۷</span>
-	<br>
-	۴۱٫۸۸۷ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۶۷٫۷۷۳</span>
-	<br>
-	۶۷٫۷۷۳ &times; ۱٫۶۱۸ = <span class="text-regular text-underline">۱۰۹٫۶۵۶</span>
-    </div>
-	</div>
-     <div class="rightbox">   
-	<p>اهمیت اندازه فونت در خوانایی و زیبا شدن صفحه وب سایت بر کسی پوشیده نیست. در کنار این بحث، موارد دیگری مانند ارتفاع خطوط، فاصله ها، ابعاد قسمت های مختلف و ... نیز در بحث تایپوگرافی اهمیت زیادی دارند.</p>
-	<p>برای محاسبه این اعداد می توانیم از سری اعداد متناسب (Modular Scale) استفاده کنیم. در حقیقت از تعدادی عدد پشت سر هم که بر اساس مضرب خاصی تشکیل شده اند برای تنظیمات ارتفاع خط، فاصله ها، ابعاد و ... استفاده می کنیم. نسبت (عدد) طلایی همان مضرب اعداد است.</p>
-	<p>به عنوان مثال می خواهیم از سایز 16px <strong>فونت ایران‌سنس</strong> به عنوان فونت و سایز اصلی متن صفحات استفاده کنیم. عدد فی (phi) یونانی که معادل ۱٫۶۱۸۰۳۳۹۸۸۷ (به اختصار ۱٫۶۱۸) است را به عنوان نسبت طلایی در نظر می گیریم. بنابراین سری اعدادی به شکل روبرو خواهیم داشت:</p>
-	
-	<p>
-	به کمک این اعداد و استفاده از آن ها در صفحات وب سایت خود می توانیم خوانایی و زیبایی آن را افزایش دهیم. علاوه بر آن، اگر از واحدهای نسبی مانند em استفاده شود، امکانات بیشتری در اختیار طراح و بازدیدکننده خواهد بود. البته <strong>سری اعداد بر مبنای نسبت طلایی</strong> فقط در تایپوگرافی وب سایت کاربرد ندارد.
-	این اعداد می تواند ادامه داشته باشد (<span class="text-regular text-underline">۱٬۲۱۵٫۹۸۱</span> ، <span class="text-regular text-underline">۱٬۹۶۷٫۴۵۷</span> ، <span class="text-regular text-underline">۳٬۱۸۳٫۳۴۵</span> و ...).
-	</p>
-  
-</div>    
-</div>    
-    
-	
-<div class="mainbox">
-<div class="rightbox">
-<br>
-در این فایل سعی کردیم همراه با یک مطلب آموزشی کوتاه، نحوه استفاده از خانواده فونت ایران‌سنس و پیش نمایشی از قسمت های مختلف آن را مرور کنیم.
-<br>
-برای مشاهده راهنمای نحوه قراردادن فونت ها در وب سایت خود، به <a href="http://fontiran.com/%d9%86%d8%b5%d8%a8-%d9%81%d9%88%d9%86%d8%aa-%d8%a7%db%8c%d8%b1%d8%a7%d9%86-%d8%b3%d9%86%d8%b3-iransans-%d8%b1%d9%88%db%8c-%d9%88%d8%a8%d8%b3%d8%a7%db%8c%d8%aa/" target="_blank">این آدرس</a> مراجعه کنید.
-<br>
-<br>
-<br>
-<br>
-<br>
-</div>
-<div class="alphabet" style="line-height:180px">ء</div>
-</div>
-
-    <br>
-	<div class="footer">
-    Copyright (c) 2021 by <a href="http://fontiran.com">www.fontiran.com</a> (Moslem Ebrahimi). All rights reserved.
-    <br>
-    To use this font, it is necessary to obtain the license from www.fontiran.com
-    
-	</div>
-</div>
-</body>
-</html>

public/font/fontiran.css

@@ -1,116 +0,0 @@
-/**
-*
-*	Name:			IRANYekanX Fonts
-*	Version:			2.4
-*	Author:			Moslem Ebrahimi (moslemebrahimi.com)
-*	Created on:		Aug 02, 2022
-*	Updated on:		Aug 02, 2022
-*	Website:			http://fontiran.com
-*	Copyright:		Commercial/Proprietary Software
---------------------------------------------------------------------------------------
-فونت ایران یکان X  یک نرم افزار مالکیتی محسوب می شود. جهت آگاهی از قوانین استفاده از این فونت ها لطفا به وب سایت (فونت ایران دات کام) مراجعه نمایید
---------------------------------------------------------------------------------------
-IRANYekanX fonts are considered a proprietary software. To gain information about the laws regarding the use of these fonts, please visit www.fontiran.com
---------------------------------------------------------------------------------------
-This set of fonts are used in this project under the license: (.....)
-------------------------------------------------------------------------------------- fonts/-
-*
-**/
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 100;
-    src:
-        url("/font/woff/IRANYekanX-Thin.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Thin.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 200;
-    src:
-        url("/font/woff/IRANYekanX-UltraLight.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-UltraLight.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 300;
-    src:
-        url("/font/woff/IRANYekanX-Light.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Light.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 500;
-    src:
-        url("/font/woff/IRANYekanX-Medium.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Medium.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 600;
-    src:
-        url("/font/woff/IRANYekanX-DemiBold.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-DemiBold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 800;
-    src:
-        url("/font/woff/IRANYekanX-ExtraBold.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-ExtraBold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 900;
-    src:
-        url("/font/woff/IRANYekanX-Black.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Black.woff2") format("woff2");
-}
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 950;
-    src:
-        url("/font/woff/IRANYekanX-ExtraBlack.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-ExtraBlack.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: 1000;
-    src:
-        url("/font/woff/IRANYekanX-Heavy.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Heavy.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: bold;
-    src:
-        url("/font/woff/IRANYekanX-Bold.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Bold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: IRANYekanX;
-    font-style: normal;
-    font-weight: normal;
-    src:
-        url("/font/woff/IRANYekanX-Regular.woff") format("woff"),
-        url("/font/woff2/IRANYekanX-Regular.woff2") format("woff2");
-}

public/font/fonttest.html

@@ -1,463 +0,0 @@
-<head>
-	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
-	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-	<meta http-equiv="X-UA-Compatible" content="IE=9" />
-	<title>IRANYekanX</title>
-	<style type="text/css" media="screen">
-		@font-face { font-family: 'WOFF IRANYekanX-Thin'; src: url('woff/IRANYekanX-Thin.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-UltraLight'; src: url('woff/IRANYekanX-UltraLight.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-Light'; src: url('woff/IRANYekanX-Light.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-Regular'; src: url('woff/IRANYekanX-Regular.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-Medium'; src: url('woff/IRANYekanX-Medium.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-DemiBold'; src: url('woff/IRANYekanX-DemiBold.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-Bold'; src: url('woff/IRANYekanX-Bold.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-ExtraBold'; src: url('woff/IRANYekanX-ExtraBold.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-Black'; src: url('woff/IRANYekanX-Black.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-ExtraBlack'; src: url('woff/IRANYekanX-ExtraBlack.woff'); }
-		@font-face { font-family: 'WOFF IRANYekanX-Heavy'; src: url('woff/IRANYekanX-Heavy.woff'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Thin'; src: url('woff2/IRANYekanX-Thin.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-UltraLight'; src: url('woff2/IRANYekanX-UltraLight.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Light'; src: url('woff2/IRANYekanX-Light.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Regular'; src: url('woff2/IRANYekanX-Regular.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Medium'; src: url('woff2/IRANYekanX-Medium.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-DemiBold'; src: url('woff2/IRANYekanX-DemiBold.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Bold'; src: url('woff2/IRANYekanX-Bold.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-ExtraBold'; src: url('woff2/IRANYekanX-ExtraBold.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Black'; src: url('woff2/IRANYekanX-Black.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-ExtraBlack'; src: url('woff2/IRANYekanX-ExtraBlack.woff2'); }
-		@font-face { font-family: 'WOFF2 IRANYekanX-Heavy'; src: url('woff2/IRANYekanX-Heavy.woff2'); }
-		
-		body { 
-			background: white;
-			color: black;
-		}
-		.features, .label, a, #controls {
-			font: normal normal normal small sans-serif;
-		}
-		.features .emojiButton {
-			vertical-align: -5%;
-			font-size: small;
-		}
-		.emojiButton {
-			cursor: pointer;
-		}
-		#flexbox {
-			display: flex;
-			flex-flow: column;
-			height: 100%;
-		}
-		#controls {
-			flex: 0 1 auto;
-			margin: 0;
-			padding: 0;
-			width: 100%;
-			border: 0px solid transparent;
-			height: auto;
-			user-select: none;
-			-moz-user-select: none;
-			-webkit-user-select: none;
-		}
-		#metricsLine {
-			background-color: #EEE;
-			border-top: 1px solid #AAA;
-			border-bottom: 1px solid #AAA;
-			width: 100%;
-			margin: 0.2em 0;
-			padding: 0 0;
-			font-size: 2em;
-			white-space: nowrap;
-			overflow-x: auto;
-			overflow-y: hidden;
-			text-overflow: none;
-			display: none;
-			scrollbar-width: none; /* Firefox */
-			-ms-overflow-style: none;  /* Internet Explorer 10+ */
-		}
-		#metricsLine::-webkit-scrollbar { /* WebKit */
-			width: 0;
-			height: 0;
-		}
-		#waterfall {
-			flex: 1 1 auto;
-			border: 0 solid transparent;
-			margin: 0;
-			padding: 0;
-			width: 100%;
-			color: black;
-			overflow-x: hidden;
-			overflow-y: scroll;
-			font-family: "WOFF IRANYekanX-Thin"; 
-			font-feature-settings: "kern" on, "liga" on, "calt" on;
-			-moz-font-feature-settings: "kern" on, "liga" on, "calt" on;
-			-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on;
-			-ms-font-feature-settings: "kern" on, "liga" on, "calt" on;
-			-o-font-feature-settings: "kern" on, "liga" on, "calt" on;
-		}
-		div, p	{
-			padding: 0;
-			margin: 0;
-		}
-		#waterfall p {
-			margin-bottom: 0.8em;
-			overflow-wrap: break-word;
-		}
-		.○ .sampletext {
-			-webkit-text-stroke: 1px black;
-			-webkit-text-fill-color: #FFF0;
-		}
-		.features, .label, a {
-			color: #888;
-		}
-		.label {
-			background-color: #ddd;
-			padding: 2px 3px;
-		}
-		
-		span#p08 { font-size: 08pt; padding: 08pt 0; }
-		span#p09 { font-size: 09pt; padding: 09pt 0; }
-		span#p10 { font-size: 10pt; padding: 10pt 0; }
-		span#p11 { font-size: 11pt; padding: 11pt 0; }
-		span#p12 { font-size: 12pt; padding: 12pt 0; }
-		span#p13 { font-size: 13pt; padding: 13pt 0; }
-		span#p14 { font-size: 14pt; padding: 14pt 0; }
-		span#p15 { font-size: 15pt; padding: 15pt 0; }
-		span#p16 { font-size: 16pt; padding: 16pt 0; }
-		span#largeParagraph { font-size: 32pt; padding: 32pt 0; }
-		span#veryLargeParagraph { font-size: 100pt; padding: 100pt 0; }
-		
-		.otFeatureLabel {
-			color: #666;
-			background-color: #ddd;
-			padding: 0.2em 0.5em 0.3em 0.5em;
-			margin: 0 .04em;
-			line-height: 2em;
-			border-radius: 0.3em;
-			border: 0;
-			text-align:center;
-		}
-		.otFeatureLabel, .otFeature {
-			position: relative;
-			opacity: 1;
-			pointer-events: auto;
-			white-space: nowrap;
-		}
-		.otFeatureLabel {
-			padding: 0.2em 0.5em 0.3em 0.5em;
-			margin: 0 .04em;
-			line-height: 2em;
-			color: #666;
-			background-color: #ddd;
-			border-radius: 0.3em;
-			border: 0;
-			text-align: center;
-			z-index: 6;
-		}
-		.wrapper {
-			width: auto;
-			overflow: hidden;
-			border: 0 solid transparent;
-		}
-		select {
-			float: left;
-			margin: 0 0.5em 0 0;
-			padding: 0;
-		}
-		input[type=text] {
-			border: 1px solid #999;
-			margin: 0;
-			width: 100%;
-		}
-		.features {
-			clear: left;
-		}
-		input[type=checkbox]:checked + label { 
-			visibility: visible;
-			color: #fff;
-			background-color: #888; 
-		}
-		.otFeature {
-			visibility: collapse;
-			margin: 0 -1em 0 0;
-		}
-		.otFeatureLabel .tooltip {
-			visibility: hidden;
-			background-color: #333;
-			color: white;
-			text-align: center;
-			padding: 0px 5px;
-			top: -2em;
-			left: 0;
-			position: absolute;
-			z-index: 8;
-		}
-		.otFeatureLabel:hover .tooltip {
-			visibility: visible;
-		}
-		#featureLine {
-			display: none;
-			border-bottom: 1px solid #999;
-			padding: 0.5em 0;
-			margin-bottom: 0.5em;
-		}
-		
-		/* Footer paragraph: */
-		#helptext {
-			color: black;
-			background-color: #ddd;
-			position: fixed;
-			bottom: 0;
-			padding: 2px
-			width: 100%;
-			font: x-small sans-serif;
-		}
-		
-		/* Dark Mode */
-		@media (prefers-color-scheme: dark) {
-			body { 
-				background: #333;
-			}
-			.features, .label, a, body, p, #metricsLine {
-				color: white;
-			}
-			.label {
-				background-color: black;
-				padding: 2px 3px;
-			}
-			.otFeatureLabel, input[type=text] {
-				color: white;
-				background-color: black;
-			}
-			input[type=checkbox]:checked + label { 
-				color: black;
-				background-color: #aaa;
-			}
-			#helptext {
-				background-color: #777;
-			}
-			.○ .sampletext {
-				-webkit-text-stroke: 1px white;
-				-webkit-text-fill-color: #0000;
-			}
-			#metricsLine {
-				background-color: #222;
-				border-color: #777;
-			}
-		}
-	</style>
-</head>
-<body onload="document.getElementById('textInput').focus();setCharset();">
-<div id="flexbox">
-<div id="controls">
-	<div>
-		<select size="1" id="fontFamilySelector" name="fontFamilySelector" onchange="changeFont()">
-			<option value="IRANYekanX-Thin.woff">WOFF IRANYekanX-Thin</option>
-			<option value="IRANYekanX-UltraLight.woff">WOFF IRANYekanX-UltraLight</option>
-			<option value="IRANYekanX-Light.woff">WOFF IRANYekanX-Light</option>
-			<option value="IRANYekanX-Regular.woff">WOFF IRANYekanX-Regular</option>
-			<option value="IRANYekanX-Medium.woff">WOFF IRANYekanX-Medium</option>
-			<option value="IRANYekanX-DemiBold.woff">WOFF IRANYekanX-DemiBold</option>
-			<option value="IRANYekanX-Bold.woff">WOFF IRANYekanX-Bold</option>
-			<option value="IRANYekanX-ExtraBold.woff">WOFF IRANYekanX-ExtraBold</option>
-			<option value="IRANYekanX-Black.woff">WOFF IRANYekanX-Black</option>
-			<option value="IRANYekanX-ExtraBlack.woff">WOFF IRANYekanX-ExtraBlack</option>
-			<option value="IRANYekanX-Heavy.woff">WOFF IRANYekanX-Heavy</option>
-			<option value="IRANYekanX-Thin.woff2">WOFF2 IRANYekanX-Thin</option>
-			<option value="IRANYekanX-UltraLight.woff2">WOFF2 IRANYekanX-UltraLight</option>
-			<option value="IRANYekanX-Light.woff2">WOFF2 IRANYekanX-Light</option>
-			<option value="IRANYekanX-Regular.woff2">WOFF2 IRANYekanX-Regular</option>
-			<option value="IRANYekanX-Medium.woff2">WOFF2 IRANYekanX-Medium</option>
-			<option value="IRANYekanX-DemiBold.woff2">WOFF2 IRANYekanX-DemiBold</option>
-			<option value="IRANYekanX-Bold.woff2">WOFF2 IRANYekanX-Bold</option>
-			<option value="IRANYekanX-ExtraBold.woff2">WOFF2 IRANYekanX-ExtraBold</option>
-			<option value="IRANYekanX-Black.woff2">WOFF2 IRANYekanX-Black</option>
-			<option value="IRANYekanX-ExtraBlack.woff2">WOFF2 IRANYekanX-ExtraBlack</option>
-			<option value="IRANYekanX-Heavy.woff2">WOFF2 IRANYekanX-Heavy</option>
-		</select>
-		<div class="wrapper" spellcheck="false">
-			<input type="text" value="Type Text Here." id="textInput" onclick="this.select();" onkeyup="updateParagraph()" />
-		</div>
-	</div>
-	<p class="features">
-		<a href="javascript:setCharset();">Charset</a>
-		<a href="javascript:setLat1();">Lat1</a>
-		&ensp;
-		<a href="https://caniuse.com/#feat=woff">woff</a>
-		<a href="https://caniuse.com/#feat=woff2">woff2</a>
-		&ensp;
-		<a onclick="toggleInverse();" id="invert" class="emojiButton">🔲</a>
-		<label><input type="checkbox" id="kern" value="kern" class="otFeature" onchange="updateFeatures()" checked><label for="kern" class="otFeatureLabel">kern</label>
-		<label><input type="checkbox" id="liga" value="liga" class="otFeature" onchange="updateFeatures()" checked><label for="liga" class="otFeatureLabel">liga/clig</label>
-		<label><input type="checkbox" id="calt" value="calt" class="otFeature" onchange="updateFeatures()" checked><label for="calt" class="otFeatureLabel">calt</label>
-		<input type="checkbox" id="numr" value="numr" class="otFeature" onchange="updateFeatures()"><label for="numr" class="otFeatureLabel">numr</label>
-		<input type="checkbox" id="dnom" value="dnom" class="otFeature" onchange="updateFeatures()"><label for="dnom" class="otFeatureLabel">dnom</label>
-		<input type="checkbox" id="frac" value="frac" class="otFeature" onchange="updateFeatures()"><label for="frac" class="otFeatureLabel">frac</label>
-		<input type="checkbox" id="init" value="init" class="otFeature" onchange="updateFeatures()"><label for="init" class="otFeatureLabel">init</label>
-		<input type="checkbox" id="medi" value="medi" class="otFeature" onchange="updateFeatures()"><label for="medi" class="otFeatureLabel">medi</label>
-		<input type="checkbox" id="fina" value="fina" class="otFeature" onchange="updateFeatures()"><label for="fina" class="otFeatureLabel">fina</label>
-		<input type="checkbox" id="rlig" value="rlig" class="otFeature" onchange="updateFeatures()"><label for="rlig" class="otFeatureLabel">rlig</label>
-		<input type="checkbox" id="dlig" value="dlig" class="otFeature" onchange="updateFeatures()"><label for="dlig" class="otFeatureLabel">dlig</label>
-		<input type="checkbox" id="salt" value="salt" class="otFeature" onchange="updateFeatures()"><label for="salt" class="otFeatureLabel">salt</label>
-		<input type="checkbox" id="ss01" value="ss01" class="otFeature" onchange="updateFeatures()"><label for="ss01" class="otFeatureLabel">ss01</label>
-		<input type="checkbox" id="ss02" value="ss02" class="otFeature" onchange="updateFeatures()"><label for="ss02" class="otFeatureLabel">ss02</label>
-		<input type="checkbox" id="ss03" value="ss03" class="otFeature" onchange="updateFeatures()"><label for="ss03" class="otFeatureLabel">ss03</label>
-		<input type="checkbox" id="ss04" value="ss04" class="otFeature" onchange="updateFeatures()"><label for="ss04" class="otFeatureLabel">ss04</label>
-		<label><input type="checkbox" value="show" onchange="updateFeatures();document.getElementById('featureLine').style.display=this.checked?'block':'none'">CSS</label>
-		<label><input type="checkbox" value="show" onchange="updateFeatures();document.getElementById('metricsLine').style.display=this.checked?'block':'none'">Metrics</label>
-	</p>
-	<p class="features" id="featureLine">font-feature-settings: "kern" on, "liga" on, "calt" on;</p>
-</div>
-<div id="waterfall" class="●">
-	<div id="metricsLine"></div>
-	<p><span class="label">08</span>&nbsp;<span class="sampletext" id="p08"></span></p>
-	<p><span class="label">09</span>&nbsp;<span class="sampletext" id="p09"></span></p>
-	<p><span class="label">10</span>&nbsp;<span class="sampletext" id="p10"></span></p>
-	<p><span class="label">11</span>&nbsp;<span class="sampletext" id="p11"></span></p>
-	<p><span class="label">12</span>&nbsp;<span class="sampletext" id="p12"></span></p>
-	<p><span class="label">13</span>&nbsp;<span class="sampletext" id="p13"></span></p>
-	<p><span class="label">14</span>&nbsp;<span class="sampletext" id="p14"></span></p>
-	<p><span class="label">15</span>&nbsp;<span class="sampletext" id="p15"></span></p>
-	<p><span class="label">16</span>&nbsp;<span class="sampletext" id="p16"></span></p>
-	<p><span class="sampletext" id="largeParagraph"></span></p>
-	<p><span class="sampletext" id="veryLargeParagraph"></span></p>
-</div>
-</div>
-
-<!-- Disclaimer -->
-<p id="helptext" onmouseleave="vanish(this);">
-	Ctrl-R: Reset Charset. Ctrl-L: Latin1. Ctrl-J: LTR/RTL. Ctrl-comma/period: step through fonts. Pull mouse across this note to make it disappear.
-</p>
-
-<script type="text/javascript">
-	const selector = document.getElementById("fontFamilySelector");
-	const selectorOptions = selector.options;
-	const selectorLength = selectorOptions.length;
-
-	document.addEventListener('keyup', keyAnalysis);
-	
-	function keyAnalysis(event) {
-		if (event.ctrlKey) {
-			if (event.code == 'KeyR') {
-				setCharset();
-			} else if (event.code == 'KeyL') {
-				setLat1();
-			} else if (event.code == 'KeyJ') {
-				toggleLeftRight();
-			} else if (event.code == 'Period') {
-				selector.selectedIndex = (selector.selectedIndex + 1) % selectorLength;
-				changeFont();
-			} else if (event.code == 'Comma') {
-				var newIndex = selector.selectedIndex - 1;
-				if (newIndex<0) {
-					newIndex = selectorLength - 1;
-				}
-				selector.selectedIndex = newIndex;
-				changeFont();
-			}
-		}
-	}
-	function updateParagraph() {
-		// update paragraph text based on user input:
-		const txt = document.getElementById('textInput');
-		const paragraphs = document.getElementsByClassName('sampletext');
-		for (i = 0; i < paragraphs.length; i++) {
-			paragraph = paragraphs[i];
-			paragraph.textContent = txt.value;
-		}
-		
-		// update other elements:
-		document.getElementById('metricsLine').textContent = txt.value;
-	}
-	function updateFeatures() {
-		// update features based on user input:
-		// first, get feature on/off line:
-		var cssCode = "";
-		var codeLine = "";
-		var checkboxes = document.getElementsByClassName("otFeature")
-		for (i = 0; i < checkboxes.length; i++) {
-			var checkbox = checkboxes[i];
-			codeLine += '"'+checkbox.id+'" ';
-			codeLine += checkbox.checked ? 'on, ' : 'off, ';
-			if (checkbox.name=="kern") {
-				cssCode += "font-kerning: "
-				cssCode += checkbox.checked ? 'normal; ' : 'none; ';
-			} else if (checkbox.name=="liga") {
-				codeLine += '"clig" '
-				codeLine += checkbox.checked ? 'on, ' : 'off, ';
-				cssCode += "font-variant-ligatures: "
-				cssCode += checkbox.checked ? 'common-ligatures contextual; ' : 'no-common-ligatures no-contextual; ';
-			} else if (checkbox.name=="dlig") {
-				cssCode += "font-variant-ligatures: "
-				cssCode += checkbox.checked ? 'discretionary-ligatures; ' : 'no-discretionary-ligatures; ';
-			} else if (checkbox.name=="hlig") {
-				cssCode += "font-variant-ligatures: "
-				cssCode += checkbox.checked ? 'historical-ligatures; ' : 'no-historical-ligatures; ';
-			}
-		}
-		codeLine = codeLine.slice(0, -2)
-		
-		// then, apply line for every browser:
-		const prefixes = ["","-moz-","-webkit-","-ms-","-o-",];
-		const suffix = "font-feature-settings: "
-		for (i = 0; i < prefixes.length; i++) {
-			var prefix = prefixes[i];
-			cssCode += prefix
-			cssCode += suffix
-			cssCode += codeLine
-			cssCode += "; "
-		}
-		
-		document.getElementById('waterfall').style.cssText = cssCode;
-		document.getElementById('featureLine').innerHTML = cssCode.replace(/;/g,";<br/>");
-		changeFont();
-	}
-	function changeFont() {
-		var selected_index = selector.selectedIndex;
-		var selected_option_text = selector.options[selected_index].text;
-		document.getElementById('waterfall').style.fontFamily = selected_option_text;
-	}
-	function setDefaultText(defaultText) {
-		document.getElementById('textInput').value = decodeEntities(defaultText);
-		updateParagraph();
-	}
-	function setLat1() {
-		const lat1 = "من نه آنم که زبونی کشم از چرخ فلک";
-		return setDefaultText(lat1);
-	}
-	function setCharset() {
-		const completeCharSet = 
-		'من نه آنم که زبونی کشم از چرخ فلک'
-		setDefaultText(completeCharSet);
-	}
-	function decodeEntities(string){
-		var elem = document.createElement('div');
-		elem.innerHTML = string;
-		return elem.textContent;
-	}
-	function vanish(item) {
-		item.style.setProperty("display", "none");
-	}
-	function toggleLeftRight() {
-		const waterfall = document.getElementById("waterfall");
-		if (waterfall.dir != "rtl") {
-			waterfall.dir = "rtl";
-			waterfall.align = "right";
-		} else {
-			waterfall.dir = "";
-			waterfall.align = "";
-		}
-	}
-	function toggleInverse() {
-		const testText = document.getElementById("waterfall");
-		if (testText) {
-			const link = document.getElementById("invert");
-			if (testText.className == "●") {
-				testText.className = "○";
-				link.textContent = "🔳";
-			} else {
-				testText.className = "●";
-				link.textContent = "🔲";
-			}
-		}
-	}
-</script>
-</body>

public/font/style.css

@@ -1,243 +0,0 @@
-@import url(fontiran.css); /* لینک فایلی که وظیفه بارگذاری فونت ها را برعهده دارد */
-body {
-	font-family: IRANYekanX  !important;
-	direction: rtl;
-	background-color: #cdcdcd;
-	margin: 0;
-}
-h1, h2, h3, h4, h5, h6,input, textarea {
-	font-family: IRANYekanX !important;
-}
-h1 {
-	font-weight: bold;
-}
-.wrapper {
-	max-width: 900px;
-	margin: 0 auto;
-}
-.ltr {
-	direction: ltr;
-}
-.text-right {
-	text-align: right;
-}
-.text-center {
-	text-align: center;
-}
-.text-left {
-	text-align: left;
-}
-.text-small {
-	font-size: 0.8em;
-}
-.text-xsmall {
-	font-size: 0.6em;
-}
-.text-large {
-	font-size: 1.2em;
-}
-.text-xlarge {
-	font-size: 1.4em;
-}
-.text-underline {
-	text-decoration:underline;
-}
-
-.text-thin {
-	font-weight: 100;
-}
-.text-UltraLight {
-	font-weight: 200;
-}
-.text-light {
-	font-weight: 300;
-}
-.text-regular {
-	font-weight: normal;
-}
-.text-medium {
-	font-weight: 500;
-}
-.text-demibold {
-	font-weight: 600;
-}
-.text-bold {
-	font-weight: bold;
-}
-
-.text-extrabold {
-	font-weight: 800;
-}
-.text-black {
-	font-weight: 900;
-}
-.text-extrablack {
-	font-weight: 950;
-}
-.text-heavy {
-	font-weight: 1000;
-}
-blockquote {
-	font-weight: 700;
-	padding: 10px;
-	border: 1px dashed #666666;
-}
-
-.mainbox {
-	width: 100%;
-	background-color: #EFEFEF;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #00adb5;
-}
-
-.mainboxnegativ {
-	width: 100%;
-	background-color: #303841;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #00adb5;
-	color: #F9F9F9;
-}
-
-.mainbox2 {
-	font-size: 1em;
-	width: 90%;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-.mainboxitalic {
-	font-size: 1em;
-	font-style: italic;
-	width: 90%;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-.mainbox3 {
-	width: 100%;
-	background-color: #DFDFDF;
-	display: table;
-	margin-bottom: 30px;
-	border-right: 8px solid #FF5EAA;
-}
-
-.mainbox2negativ {
-	font-size: 1em;
-	color: #F9F9F9;
-	background-color: #000000;
-	padding-right: 20px;
-}
-
-
-.farsiparagraph {
-	font-size: 1em;
-	width: 47%;
-	float:right;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-}
-
-.farsiparagraph_negativ {
-	font-size: 1em;
-	color: #F9F9F9;
-	background-color: #000000;
-	width: 47%;
-	float:right;
-	padding-right: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-}
-
-
-.englishparagraph {
-	font-size: 1em;
-	width: 47%;
-	float: left;
-	direction:ltr;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-
-}
-
-.englishparagraph_negativ {
-	font-size: 1em;
-	color: #F9F9F9;
-	background-color: #000000;
-	width: 47%;
-	float: left;
-	direction:ltr;
-	padding-left: 20px;
-	padding-top: 10px;
-	padding-bottom: 10px;
-
-
-}
-.rightbox {
-	width: 60%;
-	padding-right: 20px;
-	padding-left: 5px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #F7F7F7;
-
-}
-
-.titelbox {
-	width: 60%;
-	padding-right: 25px;
-	padding-left: 0px;
-	float: right;
-	margin-left: 10px;
-	margin-bottom: 0px;
-	min-width: 0px;
-	background-color: #d5d5d5;
-	color: #4B4B4B;
-}
-
-
-.lefttbox {
-	
-	padding-right: 20px;
-	padding-left: 4px;
-	float: right;
-	margin-bottom: 10px;
-	min-width: 0px;
-}
-
-.alphabet {
-	width: 35%;
-	float: left;
-	font-size: 20em;
-	text-align: center;
-	font-weight: 700;
-	color: #999999;
-}
-
-.alphabet2 {
-	width: 35%;
-	float: left;
-	direction: ltr;
-	font-size: 1.6em;
-	text-align: left;
-	font-weight: 600;
-	color: #333333;
-	margin-top: 100px;
-}
-.footer {
-	font-weight: 400;
-	font-size: 0.7em;
-	text-align: center;
-	direction: ltr;
-	margin-bottom: 0px;
-	padding-bottom: 0px;
-}

react-router.config.ts

@@ -1,5 +1,7 @@
 import type { Config } from "@react-router/dev/config";
 
 export default {
-  ssr: false,
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
 } satisfies Config;

tailwind.config.js

@@ -1,16 +1,9 @@
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
   theme: {
     extend: {
       colors: {
-        green: '#3AEA83',
-        blue: '#69C8EA',
-        red: '#F76276',
       }
     },
   },
-  plugins: [],
 };
+