آماده سازی برای دو پتروشیمی دیگر

Reviewed-on: https://git.pelekan.org/Saeed0920/inogen/pulls/15
Co-authored-by: Saeed Abadiyan <sd.eed1381@gmail.com>
Co-committed-by: Saeed Abadiyan <sd.eed1381@gmail.com>

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 */}

ROUTER_SHADCN_IMPLEMENTATION.md

@@ -125,7 +125,6 @@ export default [
   index("routes/home.tsx"),                    // /
   route("login", "routes/login.tsx"),          // /login
   route("dashboard", "routes/dashboard.tsx"),  // /dashboard
-  route("dashboard/projects", "routes/dashboard.projects.tsx"), // /dashboard/projects
   route("404", "routes/404.tsx"),             // /404
   route("unauthorized", "routes/unauthorized.tsx"), // /unauthorized
   route("*", "routes/$.tsx"),                 // Catch-all for 404s
@@ -257,8 +256,6 @@ useEffect(() => {
 ```tsx
 // app/components/dashboard/dashboard-layout.tsx
 <nav className="hidden md:flex items-center space-x-8 space-x-reverse">
-  <NavigationLink to="/dashboard" label="داشبورد" />
-  <NavigationLink to="/dashboard/projects" label="پروژه‌ها" />
 </nav>
 ```
 
@@ -298,7 +295,6 @@ Both shadcn/ui components and React Router navigation are fully responsive:
 {/* Mobile-friendly navigation */}
 <nav className="hidden md:flex items-center space-x-8 space-x-reverse">
   <NavigationLink to="/dashboard" label="داشبورد" />
-  <NavigationLink to="/dashboard/projects" label="پروژه‌ها" />
 </nav>
 
 {/* Mobile logo for small screens */}

app/app.css

@@ -1,13 +1,7 @@
+@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;
@@ -33,17 +27,38 @@
   --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;
@@ -63,6 +78,7 @@ 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);
@@ -82,9 +98,13 @@ 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 :#3AEA83;
+  --color-pr-gray: #3f415a;
+  --color-pr-green: var(--color-green);
 
   /* Light theme colors */
   --background: #ffffff;
@@ -106,6 +126,7 @@ html[dir="rtl"] body {
   --border: #e5e5e5;
   --input: #e5e5e5;
   --ring: #22c55e;
+  --dark-blue: #33364d;
 
   /* Primary color scale */
   --color-primary-50: #f0fdf4;
@@ -201,7 +222,7 @@ html[dir="rtl"] body {
   --color-dark-950: #020617;
 
   /* Login specific colors */
-  --color-login-primary: #3aea83;
+  --color-login-primary: var(--color-green);
   --color-login-dark-start: #464861;
   --color-login-dark-end: #111628;
 }
@@ -237,29 +258,11 @@ 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: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
+  font-family: "IRANYekanX";
 }
 
 /* Custom utility classes */
@@ -419,25 +422,73 @@ 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: .5px solid transparent;
+  border: 0.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 {
-  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);
+}
+
+: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;
 }

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 font-bold"
+              className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 text-base font-semibold"
             >
               {isLoading ? (
                 <>
@@ -212,7 +212,10 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
       {/* Right Side - Branding */}
       <LoginSidebar>
         <LoginBranding
-          brandName="پتروشیمی بندر امام"
+          brandName="پتروشیمی آپادانا"
+          // brandName="پتروشیمی نوری"
+          // brandName="پتروشیمی بندر امام"
+          engSub="Inception by Fara"
           companyName="توسعه‌یافته توسط شرکت رهپویان دانش و فناوری فرا"
           logo={<img src="/brand2.svg"/>}
         />

app/components/auth/login-layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { cn } from "~/lib/utils";
 
+
 interface LoginLayoutProps {
   children: React.ReactNode;
   className?: string;
@@ -75,12 +76,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-lg font-medium font-persian">{title}</h1>
-        <h2 className="text-white text-2xl sm:text-3xl font-bold font-persian leading-relaxed">
+        <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">
           {subtitle}
         </h2>
         {description && (
-          <p className="text-slate-300 text-sm font-persian leading-relaxed  mx-auto">
+          <p className="text-slate-300 text-sm text-[#ACACAC] font-persian leading-relaxed  mx-auto">
             {description}
           </p>
         )}
@@ -94,6 +95,7 @@ interface LoginBrandingProps {
   companyName: string;
   logo?: React.ReactNode;
   className?: string;
+  engSub ?: string;
 }
 
 export function LoginBranding({
@@ -101,22 +103,35 @@ export function LoginBranding({
   companyName,
   logo,
   className,
+  engSub
 }: LoginBrandingProps) {
   return (
     <>
-      {/* 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>
+<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>
+
+
+
+
 
       {/* Bottom Section */}
       <div className="flex flex-col gap-2 mb-4 items-end justify-end">
         {logo && <div className="flex items-center">{logo}</div>}
-        <div className="text-slate-800 text-sm font-persian leading-relaxed max-w-xs">
+        <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">
           {companyName}
         </div>
         {/* Logo */}

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

@@ -0,0 +1,211 @@
+//این فایل مخصوص
+//شماتیک آپادانا
+
+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/d3-image-info1.tsx

@@ -0,0 +1,213 @@
+//این فایل مخصوص
+//شماتیک بندر امام
+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

@@ -0,0 +1,211 @@
+//این فایل مخصوص
+//شماتیک نوری
+
+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

@@ -0,0 +1,94 @@
+import React from "react";
+import { formatNumber } from "~/lib/utils";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "~/components/ui/tooltip"
+
+interface DataItem {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface DashboardCustomBarChartProps {
+  title: string;
+  data: DataItem[];
+  loading?: boolean;
+}
+
+export function DashboardCustomBarChart({
+  title,
+  data,
+  loading = false,
+}: DashboardCustomBarChartProps) {
+  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">
+          {title}
+        </h3>
+        <div className="space-y-3">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="animate-pulse">
+              <div className="h-12 bg-gray-600/30 rounded-lg"></div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  // Calculate the maximum value for scaling
+  const maxValue = Math.max(...data.map((item) => item.value));
+
+  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">
+        {title}
+      </h3>
+      <div className="px-4">
+        {data.map((item, index) => {
+          const widthPercentage =
+            maxValue > 0 ? (item.value / maxValue) * 100 : 0;
+
+          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">
+                {/* 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`}
+                  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>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

app/components/dashboard/dashboard-layout.tsx

@@ -144,145 +144,8 @@ export function DashboardHome() {
                 <path d="m22 21-3-3" />
               </svg>
             </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">24</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +2 از ماه گذشته
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium font-persian">
-                پروژه‌های فعال
-              </CardTitle>
-              <svg
-                className="h-4 w-4 text-muted-foreground"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-              >
-                <rect width="20" height="14" x="2" y="5" rx="2" />
-                <path d="M2 10h20" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">12</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +1 از هفته گذشته
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium font-persian">
-                پروژه‌های تکمیل شده
-              </CardTitle>
-              <svg
-                className="h-4 w-4 text-muted-foreground"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">8</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +3 از ماه گذشته
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium font-persian">
-                درصد موفقیت
-              </CardTitle>
-              <svg
-                className="h-4 w-4 text-muted-foreground"
-                fill="none"
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M12 2v20m8-10H4" />
-              </svg>
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">85%</div>
-              <p className="text-xs text-muted-foreground font-persian">
-                +5% از ماه گذشته
-              </p>
-            </CardContent>
           </Card>
         </div>
-
-        {/* Recent Projects */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="font-persian">پروژه‌های اخیر</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-4">
-              {[
-                {
-                  name: "سیستم مدیریت محتوا",
-                  status: "در حال انجام",
-                  progress: 75,
-                },
-                { name: "اپلیکیشن موبایل", status: "تکمیل شده", progress: 100 },
-                {
-                  name: "پلتفرم تجارت الکترونیک",
-                  status: "شروع شده",
-                  progress: 25,
-                },
-                {
-                  name: "سیستم مدیریت مالی",
-                  status: "در حال بررسی",
-                  progress: 10,
-                },
-              ].map((project, index) => (
-                <div
-                  key={index}
-                  className="flex items-center space-x-4 space-x-reverse"
-                >
-                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-gray-900 dark:text-white font-persian">
-                      {project.name}
-                    </p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">
-                      {project.status}
-                    </p>
-                  </div>
-                  <div className="flex items-center space-x-2 space-x-reverse">
-                    <div className="w-16 bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                      <div
-                        className="bg-green-600 h-2 rounded-full"
-                        style={{ width: `${project.progress}%` }}
-                      ></div>
-                    </div>
-                    <span className="text-sm text-gray-500 dark:text-gray-400">
-                      {project.progress}%
-                    </span>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
       </div>
     </DashboardLayout>
   );

app/components/dashboard/header.tsx

@@ -1,42 +1,403 @@
-import { useEffect, useState } from "react";
-import { useAuth } from "~/contexts/auth-context";
-import { Link } from "react-router";
-import { cn } from "~/lib/utils";
-import { Button } from "~/components/ui/button";
+import { saveAs } from "file-saver";
+import jalaali from "jalaali-js";
 import {
-PanelLeft,
-  Search,
-  Bell,
-  Settings,
-  User,
-  Moon,
-  Sun,
+  Calendar,
+  ChevronLeft,
+  FileChartColumnIncreasing,
   Menu,
-  ChevronDown,
-  Globe,
-  HelpCircle,
+  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 { useAuth } from "~/contexts/auth-context";
+import apiService from "~/lib/api";
+import { cn, EventBus, handleDataValue } from "~/lib/utils";
 
 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 [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
-  const [isNotificationOpen, setIsNotificationOpen] = useState(false);
+  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();
+  };
 
   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 */}
@@ -54,32 +415,130 @@ export function Header({
         )}
 
         {/* Page Title */}
-        <h1 className="text-xl flex items-center justify-center gap-4 font-bold text-white font-persian"><PanelLeft /> {title}</h1>
+        <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
+          )}
+        </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">
-          <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 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>
               </div>
-              <div className="text-xs text-gray-400 font-persian">
-                {user?.username}
+            ) : (
+              ""
+            )}
+
+            {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>
-            </div>
-            <ChevronDown className="h-3 w-3" />
-          </Button>
+              <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>
 
           {/* Profile Dropdown */}
           {isProfileMenuOpen && (
@@ -92,7 +551,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"
@@ -100,16 +559,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

@@ -0,0 +1,127 @@
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+  LabelList,
+} from "recharts";
+import { Card, CardContent } from "~/components/ui/card";
+import {
+  type ChartConfig,
+  ChartContainer,
+} from "~/components/ui/chart";
+import { formatNumber } from "~/lib/utils";
+
+export type CompanyChartDatum = {
+  category: string; // related_company
+  capacity: number; // percentage
+  revenue: number; // percentage
+  cost: number; // percentage
+};
+
+const chartConfig = {
+  capacity: {
+    label: "افزایش ظرفیت",
+    color: "#69C8EA",
+  },
+  revenue: {
+    label: "افزایش درآمد",
+    color: "#4ADE80", // Green-400
+  },
+  cost: {
+    label: "کاهش هزینه",
+    color: "#F87171", // Red-400
+  },
+} satisfies ChartConfig;
+
+
+export function InteractiveBarChart({
+  data,
+}: {
+  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">
+          <BarChart
+            accessibilityLayer
+            data={data}
+            margin={{   left: 12, right: 12 }}
+            barGap={25}
+            barSize={9}
+          >
+            <CartesianGrid vertical={false} stroke="#475569" />
+            <XAxis
+              dataKey="category"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              style={{ fill: "#ffffff", fontSize: 16 }}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={25}
+              style={{ fill: "#ACACAC", fontSize: 11 }}
+              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" }}
+                formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
+              />
+            </Bar>
+            <Bar dataKey="revenue" fill={chartConfig.revenue.color} radius={[8, 8, 0, 0]}>
+              <LabelList
+                dataKey="revenue"
+                position="top"
+                style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
+                formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
+              />
+            </Bar>
+            <Bar dataKey="cost" fill={chartConfig.cost.color} radius={[8, 8, 0, 0]}>
+              <LabelList
+                dataKey="cost"
+                position="top"
+                style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
+                formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
+              />
+            </Bar>
+          </BarChart>
+        </ChartContainer>
+
+        {/* Legend below chart */}
+        <div className="flex justify-center gap-8 mt-10">
+          <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>
+          </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>
+          </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>
+          </div>
+         
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

app/components/dashboard/layout.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { cn } from "~/lib/utils";
-import { Sidebar } from "./sidebar";
 import { Header } from "./header";
+import { Sidebar } from "./sidebar";
+import { StrategicAlignmentPopup } from "./strategic-alignment-popup";
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
@@ -16,6 +17,14 @@ 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 toggleSidebarCollapse = () => {
     setIsSidebarCollapsed(!isSidebarCollapsed);
@@ -28,7 +37,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" />
@@ -48,13 +57,20 @@ 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);
+          }}
         />
       </div>
 
@@ -64,21 +80,26 @@ export function DashboardLayout({
         <Header
           onToggleSidebar={toggleMobileSidebar}
           className="flex-shrink-0"
-          title={title}
+          title={currentTitle}
+          titleIcon={currentTitleIcon}
         />
 
         {/* 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">
+          <div className="relative h-full min-w-0 w-full z-10 overflow-x-hidden p-5">
             {children}
           </div>
         </main>
       </div>
+      <StrategicAlignmentPopup
+        open={isStrategicAlignmentPopupOpen}
+        onOpenChange={setIsStrategicAlignmentPopupOpen}
+      />
     </div>
   );
 }

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

@@ -1,10 +1,31 @@
-import { useState, useEffect, useCallback, useRef, useMemo } from "react";
-import { DashboardLayout } from "../layout";
-import { Card, CardContent } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
-import { Checkbox } from "~/components/ui/checkbox";
+import {
+  BrainCircuit,
+  ChevronDown,
+  ChevronUp,
+  Database,
+  Key,
+  LoaderCircle,
+  RefreshCw,
+  Sprout,
+  TrendingDown,
+  TrendingUp,
+  Zap,
+} from "lucide-react";
 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";
+import { CustomBarChart } from "~/components/ui/custom-bar-chart";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog";
 import {
   Table,
   TableBody,
@@ -13,34 +34,11 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "~/components/ui/dialog";
-import {
-  ChevronUp,
-  ChevronDown,
-  RefreshCw,
-  Building2,
-  PickaxeIcon,
-  UserIcon,
-  UsersIcon,
-} from "lucide-react";
+import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import toast from "react-hot-toast";
-import {
-  Database,
-  Zap,
-  TrendingDown,
-  TrendingUp,
-  Key,
-  Sprout,
-  BrainCircuit,
-  LoaderCircle,
-} from "lucide-react";
-import { CustomBarChart } from "~/components/ui/custom-bar-chart";
+import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
+import type { CalendarDate } from "~/types/util.type";
+import { DashboardLayout } from "../layout";
 
 moment.loadPersian({ usePersianDigits: true });
 
@@ -69,6 +67,7 @@ interface DigitalInnovationMetrics {
   reduce_energy_consumption_percent: string;
   resource_productivity: string;
   resource_productivity_percent: string;
+  average_project_score?: number;
 }
 
 // Normalized interface for digital innovation stats
@@ -82,6 +81,8 @@ interface DigitalInnovationStats {
   reduceEnergyConsumptionPercent: number;
   resourceProductivity: number;
   resourceProductivityPercent: number;
+  avarageProjectScore: number;
+  countInnovationDigitalProjects: number;
 }
 
 enum DigitalCardLabel {
@@ -154,7 +155,7 @@ export function DigitalInnovationPage() {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize] = useState(20);
   const [hasMore, setHasMore] = useState(true);
-  const [totalCount, setTotalCount] = useState(0);
+  const [date, setDate] = useStoredDate();
   const [actualTotalCount, setActualTotalCount] = useState(0);
   const [statsLoading, setStatsLoading] = useState(false);
   const [rating, setRating] = useState<ListItem[]>([]);
@@ -168,6 +169,8 @@ export function DigitalInnovationPage() {
     reduceEnergyConsumptionPercent: 0,
     resourceProductivity: 0,
     resourceProductivityPercent: 0,
+    avarageProjectScore: 0,
+    countInnovationDigitalProjects: 0,
   });
   const [sortConfig, setSortConfig] = useState<SortConfig>({
     field: "start_date",
@@ -177,9 +180,11 @@ export function DigitalInnovationPage() {
     new Set()
   );
   const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
-  const [avarage, setAvarage] = useState<number>(0);
+  // 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 = () => {
@@ -201,12 +206,7 @@ export function DigitalInnovationPage() {
     setDetailsDialogOpen(true);
   };
 
-  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);
-  };
+  // ...existing code...
 
   const statsCards: StatsCard[] = [
     {
@@ -215,7 +215,7 @@ export function DigitalInnovationPage() {
       value: formatNumber(stats.reduceCosts.toFixed?.(1) ?? stats.reduceCosts),
       description: "میلیون ریال کاهش یافته",
       icon: <TrendingDown />,
-      color: "text-emerald-400",
+      color: "text-pr-green",
     },
     {
       id: "bottleneck-removal",
@@ -223,7 +223,7 @@ export function DigitalInnovationPage() {
       value: formatNumber(stats.increasedRevenue),
       description: "میلیون ریال افزایش یافته",
       icon: <TrendingUp />,
-      color: "text-emerald-400",
+      color: "text-pr-green",
     },
 
     {
@@ -234,7 +234,7 @@ export function DigitalInnovationPage() {
       ),
       description: "هزار تن صرفه جوریی شده",
       icon: <Database />,
-      color: "text-emerald-400",
+      color: "text-pr-green",
     },
     {
       id: "frequent-failures-reduction",
@@ -245,7 +245,7 @@ export function DigitalInnovationPage() {
       ),
       description: "مگاوات کاهش یافته",
       icon: <Zap />,
-      color: "text-emerald-400",
+      color: "text-pr-green",
     },
   ];
 
@@ -284,11 +284,14 @@ export function DigitalInnovationPage() {
           "reduce_costs_percent",
         ],
         Sorts: [[sortConfig.field, sortConfig.direction]],
-        Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
+        Conditions: [
+          ["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
+          ["start_date", ">=", date?.start || null, "and"],
+          ["start_date", "<=", date?.end || null],
+        ],
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
       });
 
-      // console.log(JSON.parse(response.data));
       if (response.state === 0) {
         const dataString = response.data;
         if (dataString && typeof dataString === "string") {
@@ -297,17 +300,17 @@ export function DigitalInnovationPage() {
             if (Array.isArray(parsedData)) {
               if (reset) {
                 setProjects(parsedData);
-                calculateAverage(parsedData);
-                setTotalCount(parsedData.length);
+                // calculateAverage(parsedData);
+                // 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);
             }
@@ -315,14 +318,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);
         }
@@ -330,7 +333,7 @@ export function DigitalInnovationPage() {
         toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
         if (reset) {
           setProjects([]);
-          setTotalCount(0);
+          // setTotalCount(0);
         }
         setHasMore(false);
       }
@@ -339,7 +342,7 @@ export function DigitalInnovationPage() {
       toast.error("خطا در دریافت اطلاعات پروژه‌ها");
       if (reset) {
         setProjects([]);
-        setTotalCount(0);
+        // setTotalCount(0);
       }
       setHasMore(false);
     } finally {
@@ -351,45 +354,75 @@ export function DigitalInnovationPage() {
   };
 
   const loadMore = useCallback(() => {
-    if (!loadingMore && hasMore && !loading) {
+    if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [loadingMore, hasMore, loading]);
+  }, [hasMore, loading, loadingMore]);
 
   useEffect(() => {
-    fetchTable(true);
-    fetchTotalCount();
-    fetchStats();
-  }, [sortConfig]);
+    if (date?.start && date?.end) {
+      fetchTable(true);
+      fetchTotalCount();
+      fetchStats();
+    }
+  }, [sortConfig, date]);
 
   useEffect(() => {
-    if (currentPage > 1) {
+    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) {
       fetchTable(false);
     }
   }, [currentPage]);
 
+  // Infinite scroll observer with debouncing
   useEffect(() => {
-    const scrollContainer = document.querySelector(".overflow-auto");
+    const scrollContainer = scrollContainerRef.current;
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore || loadingMore) return;
+      if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
+        return;
 
-      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-      const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
-
-      if (scrollPercentage >= 0.9) {
-        loadMore();
+      // Clear previous timeout
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
       }
+
+      // 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);
+      scrollContainer.addEventListener("scroll", handleScroll, {
+        passive: true,
+      });
     }
 
     return () => {
       if (scrollContainer) {
         scrollContainer.removeEventListener("scroll", handleScroll);
       }
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
     };
   }, [loadMore, hasMore, loadingMore]);
 
@@ -400,19 +433,23 @@ export function DigitalInnovationPage() {
       direction:
         prev.field === field && prev.direction === "asc" ? "desc" : "asc",
     }));
-    fetchTotalCount();
+    fetchTotalCount(date?.start, date?.end);
     fetchStats();
     setCurrentPage(1);
     setProjects([]);
     setHasMore(true);
   };
 
-  const fetchTotalCount = async () => {
+  const fetchTotalCount = async (startDate?: string, endDate?: string) => {
     try {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
+        Conditions: [
+          ["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
+          ["start_date", ">=", date?.start || null, "and"],
+          ["start_date", "<=", date?.end || null],
+        ],
       });
 
       if (response.state === 0) {
@@ -422,8 +459,6 @@ export function DigitalInnovationPage() {
             const parsedData = JSON.parse(dataString);
             if (Array.isArray(parsedData) && parsedData[0]) {
               const count = parsedData[0].project_no_count || 0;
-              setActualTotalCount(count);
-              // Keep stats in sync if backend stats not yet loaded
               setStats((prev) => ({ ...prev, totalProjects: count }));
             }
           } catch (parseError) {
@@ -440,15 +475,39 @@ export function DigitalInnovationPage() {
   const fetchStats = async () => {
     try {
       setStatsLoading(true);
-      const raw = await apiService.callInnovationProcess<any>({
-        innovation_digital_function: {},
+      const raw = await apiService.call<any>({
+        innovation_digital_function: {
+          start_date: date?.start || null,
+          end_date: date?.end || null,
+        },
       });
 
-      let payload: DigitalInnovationMetrics = raw?.data;
-      if (typeof payload === "string") {
+      // let payload: DigitalInnovationMetrics = raw?.data;
+      // console.log("*-*-*-*" +payload);
+      // if (typeof payload === "string") {
+      //   try {
+      //     payload = JSON.parse(payload).innovation_digital_function;
+
+      //   } catch {}
+      // }
+
+      let payload: DigitalInnovationMetrics | null = null;
+
+      if (raw?.data) {
         try {
-          payload = JSON.parse(payload);
-        } catch {}
+          // مرحله اول: 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];
+          }
+        } catch (err) {
+          console.error("Error parsing API response:", err);
+        }
       }
 
       const parseNum = (v: unknown): number => {
@@ -474,8 +533,12 @@ export function DigitalInnovationPage() {
         resourceProductivityPercent: parseNum(
           payload?.resource_productivity_percent
         ),
+        avarageProjectScore: parseNum(payload?.average_project_score),
+        countInnovationDigitalProjects: parseNum(
+          payload?.count_innovation_digital_projects
+        ),
       };
-
+      setActualTotalCount(normalized.countInnovationDigitalProjects);
       setStats(normalized);
     } catch (error) {
       console.error("Error fetching stats:", error);
@@ -494,45 +557,35 @@ export function DigitalInnovationPage() {
   //   fetchStats();
   // };
 
-  const formatCurrency = (amount: string | number) => {
-    if (!amount) return "0 ریال";
-    const numericAmount =
-      typeof amount === "string"
-        ? parseFloat(amount.replace(/,/g, ""))
-        : amount;
-    if (isNaN(numericAmount)) return "0 ریال";
-    return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
-  };
+  // 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 ststusColor = (status: projectStatus): any => {
+  const statusColor = (status: projectStatus): any => {
     let el = null;
     switch (status) {
       case projectStatus.contract:
@@ -574,14 +627,14 @@ export function DigitalInnovationPage() {
             variant="ghost"
             size="sm"
             onClick={() => handleProjectDetails(item)}
-            className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto cursor-pointer"
+            className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
           >
             جزئیات بیشتر
           </Button>
         );
       case "amount_currency_reduction":
         return (
-          <span className="font-medium text-emerald-400">
+          <span className="font-medium text-pr-green">
             {formatCurrency(String(value))}
           </span>
         );
@@ -592,12 +645,14 @@ export function DigitalInnovationPage() {
           </Badge>
         );
       case "title":
-        return <span className="font-medium text-white">{String(value)}</span>;
+        return (
+          <span className="font-light text-sm text-white">{String(value)}</span>
+        );
       case "project_status":
         return (
           <div className="flex items-center gap-1">
             <Badge
-              variant={ststusColor(value)}
+              variant={statusColor(value)}
               className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
               style={{
                 border: "none",
@@ -625,41 +680,33 @@ export function DigitalInnovationPage() {
     }
   };
 
-  const calculateAverage = (data: Array<ProcessInnovationData>) => {
-    let number = 0;
-    data.map(
-      (item: ProcessInnovationData) => (number = number + +item.project_rating)
-    );
-    setAvarage(number / data.length);
-  };
-
   return (
     <DashboardLayout title="نوآوری دیجیتال">
-      <div className="flex flex-row gap-8 justify-between p-6 space-y-4 h-full">
+      <div className="space-y-4 grid  justify-between gap-7 pl-6 sm:grid-cols-1 xl:grid-cols-[40%_60%]">
         {/* Stats Cards */}
-        <div className="flex flex-col gap-4 w-full">
+        <div className="flex flex-col gap-6  w-full mb-0">
           <div className="space-y-6 w-full">
             {/* Stats Grid */}
-            <div className="grid grid-cols-2 gap-3">
-              {loading || statsLoading
+            <div className="grid grid-cols-2 gap-5">
+              {loading
                 ? // Loading skeleton for stats cards - matching new design
                   Array.from({ length: 4 }).map((_, index) => (
                     <Card
                       key={`skeleton-${index}`}
-                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
+                      className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]  backdrop-blur-sm rounded-2xl overflow-hidden !h-full"
                     >
-                      <CardContent className="p-2">
+                      <CardContent className="p-0">
                         <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="flex justify-between items-center border-b-2 px-6 py-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="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="flex items-center justify-center flex-col p-4">
                             <div
                               className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
                               style={{ width: "40%" }}
@@ -678,21 +725,21 @@ export function DigitalInnovationPage() {
                       key={card.id}
                       className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
                     >
-                      <CardContent className="p-2">
+                      <CardContent className="p-0">
                         <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">
+                          <div className="flex justify-between items-center border-b-2 px-6 border-gray-500/20">
+                            <h3 className="text-lg font-bold text-white font-persian  py-4">
                               {card.title}
                             </h3>
                             <div
-                              className={`p-3 gird placeitems-center rounded-full w-fit `}
+                              className={`gird placeitems-center rounded-full w-fit`}
                             >
                               {card.icon}
                             </div>
                           </div>
-                          <div className="flex items-center justify-center flex-col p-1">
+                          <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>
@@ -708,49 +755,49 @@ export function DigitalInnovationPage() {
           </div>
 
           {/* Process Impacts Chart */}
-          <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
+          <BaseCard className="rounded-xl w-full overflow-hidden">
             {/* <CardContent > */}
             <CustomBarChart
               title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
               loading={statsLoading}
+              // height="100%"
               data={[
                 {
                   label: DigitalCardLabel.decreasCost,
                   value: stats.reduceCostsPercent || 0,
-                  color: "bg-emerald-400",
+                  color: "bg-pr-green",
                   labelColor: "text-white",
                 },
                 {
                   label: DigitalCardLabel.increaseRevenue,
                   value: stats.increasedRevenuePercent || 0,
-                  color: "bg-emerald-400",
+                  color: "bg-pr-green",
                   labelColor: "text-white",
                 },
                 {
                   label: DigitalCardLabel.performance,
                   value: stats.resourceProductivityPercent || 0,
-                  color: "bg-emerald-400",
+                  color: "bg-pr-green",
                   labelColor: "text-white",
                 },
                 {
                   label: DigitalCardLabel.decreaseEnergy,
                   value: stats.reduceEnergyConsumptionPercent || 0,
-                  color: "bg-emerald-400",
+                  color: "bg-pr-green",
                   labelColor: "text-white",
                 },
               ]}
               barHeight="h-5"
               showAxisLabels={true}
             />
-            {/* </CardContent> */}
-          </Card>
+          </BaseCard>
         </div>
 
         {/* Data Table */}
-        <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden w-full h-max">
+        <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(90vh-270px)]">
+            <div className="relative h-full">
+              <Table containerClassName="overflow-auto custom-scrollbar w-full h-[calc(100vh-160px)] ">
                 <TableHeader>
                   <TableRow className="bg-[#3F415A]">
                     {columns.map((column) => (
@@ -863,47 +910,79 @@ export function DigitalInnovationPage() {
           </CardContent>
 
           {/* Footer */}
+
           <div className="p-2 px-4 bg-gray-700/50">
-            <div className="grid grid-cols-6 gap-4 text-sm text-gray-300 font-persian">
-              <div className="text-center gap-2 items-center flex">
-                <div className="text-base text-gray-401 mb-1">
-                  کل پروژه ها :{formatNumber(actualTotalCount)}
-                </div>
+            <div className="grid grid-cols-[minmax(100px,0fr)_minmax(80px,1fr)_minmax(100px,2fr)_minmax(10px,1fr)_minmax(100px,1fr)] text-sm text-gray-300 font-persian items-center ">
+              <div></div>
+
+              <div className="text-center text-gray-400 ">
+                کل پروژه‌ها:{" "}
+                <span className="font-bold">
+                  {formatNumber(actualTotalCount)}
+                </span>
               </div>
-              {/* Project number column - empty */}
-              <div></div>
-              {/* Title column - empty */}
-              <div></div>
-              {/* Project status column - empty */}
-              <div className="flex  items-center flex-row-reverse status ">
+
+              <div className="flex flex-row-reverse">
                 <span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
                 <span className="block w-7 h-2.5 bg-purple-500 "></span>
                 <span className="block w-7 h-2.5 bg-cyan-300 "></span>
                 <span className="block w-7 h-2.5 bg-pink-400 rounded-tr-xl rounded-br-xl"></span>
               </div>
-              {/* Project rating column - show average */}
-              <div className="flex justify-center items-center gap-2">
-                <div className="text-base text-gray-400 mb-1">
-                  میانگین امتیاز :‌
+
+              <div className="text-center text-gray-400 py-2">
+                میانگین:{" "}
+                <span className="font-bold">
+                  {formatNumber(
+                    ((stats.avarageProjectScore ?? 0) as number).toFixed?.(1) ??
+                      0
+                  )}
+                </span>
+              </div>
+
+              <div></div>
+            </div>
+          </div>
+
+          {/* <div className="p-2 px-4 bg-gray-700/50">
+            <div className="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
+              <div className="text-center gap-2 items-center  w-1/3 pr-16">
+                <div className="text-base text-gray-401 mb-1">
+                  کل پروژه ها : {formatNumber(actualTotalCount)}
                 </div>
-                <div className="font-bold">
-                  {formatNumber(((avarage ?? 0) as number).toFixed?.(1) ?? 0)}
+              </div>
+
+              <div className="flex  items-center flex-row gap-4 status w-3/5 justify-center">
+                <div className="flex flex-row-reverse">
+                  <span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
+                  <span className="block w-7 h-2.5 bg-purple-500 "></span>
+                  <span className="block w-7 h-2.5 bg-cyan-300 "></span>
+                  <span className="block w-7 h-2.5 bg-pink-400 rounded-tr-xl rounded-br-xl"></span>
+                </div>
+                <div className="flex justify-center items-center gap-2">
+                  <div className="text-base text-gray-400 mb-1">میانگین :‌</div>
+                  <div className="font-bold">
+                    {formatNumber(
+                      ((stats.avarageProjectScore ?? 0) as number).toFixed?.(
+                        1
+                      ) ?? 0
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </div> */}
         </Card>
       </div>
 
       {/* Project Details Dialog */}
       <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
-        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-5xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-6xl 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%]">
+          <div className="body grid grid-cols-[40%_20%_40%] pb-6">
             <div className="border-l-2 border-l-gray-600 px-6">
               <span className="title text-lg font-bold">
                 {dialogInfo?.title}
@@ -955,7 +1034,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-md font-bold">
+                <span className="text-lg font-bold">
                   توسعه قابلیت های دیجیتال:{" "}
                 </span>
                 <div className="flex flex-col gap-2">
@@ -1018,10 +1097,10 @@ export function DigitalInnovationPage() {
                 </div>
               </div>
             </div>
-            <div className="flex flex-col pr-7 gap-4">
+            <div className="flex flex-col px-6 gap-4">
               <div className="costBoard mx-auto w-full">
                 <div className="board o border border-gray-600 rounded-xl overflow-hidden flex flex-col">
-                  <span className="title bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">
+                  <span className="text-sm bg-[#3F415A]  text-white w-full p-2.5 pr-4 ">
                     کاهش هزینه ها
                   </span>
 

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

@@ -1,18 +1,29 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { DashboardLayout } from "../layout";
-import { Card, CardContent } from "~/components/ui/card";
+import { saveAs } from "file-saver";
+import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
+import { useCallback, useEffect, useMemo, 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 { ChevronUp, ChevronDown, RefreshCw } from "lucide-react";
+import { useStoredDate } from "~/hooks/useStoredDate";
 import apiService from "~/lib/api";
-import toast from "react-hot-toast";
+import {
+  EventBus,
+  formatCurrency,
+  formatNumber,
+  handleDataValue,
+} from "~/lib/utils";
+import type { CalendarDate } from "~/types/util.type";
+import { DashboardLayout } from "../layout";
 
 interface ProjectData {
   WorkflowID: number;
@@ -51,51 +62,51 @@ type ColumnDef = {
 };
 
 const columns: ColumnDef[] = [
-  { key: "title", label: "عنوان پروژه", sortable: true, width: "200px" },
+  { key: "title", label: "عنوان پروژه", sortable: true, width: "300px" },
   {
     key: "importance_project",
     label: "میزان اهمیت",
     sortable: true,
-    width: "150px",
+    width: "160px",
   },
   {
     key: "strategic_theme",
     label: "مضمون راهبردی",
     sortable: true,
-    width: "160px",
+    width: "200px",
   },
   {
     key: "value_technology_and_innovation",
     label: "ارزش فناوری و نوآوری",
     sortable: true,
-    width: "200px",
+    width: "220px",
   },
   {
     key: "type_of_innovation",
     label: "انواع نوآوری",
     sortable: true,
-    width: "140px",
+    width: "160px",
   },
-  { key: "innovation", label: "میزان نوآوری", sortable: true, width: "120px" },
+  { key: "innovation", label: "میزان نوآوری", sortable: true, width: "140px" },
   {
     key: "person_executing",
     label: "مسئول اجرا",
     sortable: true,
-    width: "140px",
+    width: "180px",
   },
   {
     key: "excellent_observer",
     label: "ناطر عالی",
     sortable: true,
-    width: "140px",
+    width: "180px",
   },
-  { key: "observer", label: "ناظر پروژه", sortable: true, width: "140px" },
-  { key: "moderator", label: "مجری", sortable: true, width: "140px" },
+  { key: "observer", label: "ناظر پروژه", sortable: true, width: "180px" },
+  { key: "moderator", label: "مجری", sortable: true, width: "180px" },
   {
     key: "executive_phase",
     label: "فاز اجرایی",
     sortable: true,
-    width: "140px",
+    width: "160px",
   },
   { key: "start_date", label: "تاریخ شروع", sortable: true, width: "120px" },
   {
@@ -164,6 +175,14 @@ 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
@@ -195,7 +214,10 @@ export function ProjectManagementPage() {
         OutputFields: outputFields,
         Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
         Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
-        Conditions: [],
+        Conditions: [
+          ["start_date", ">=", date?.start || null, "and"],
+          ["start_date", "<=", date?.end || null],
+        ],
       });
 
       if (response.state === 0) {
@@ -260,16 +282,29 @@ 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 (!loadingMore && hasMore && !loading) {
+    if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
       setCurrentPage((prev) => prev + 1);
     }
-  }, [loadingMore, hasMore, loading]);
+  }, [hasMore, loading, loadingMore]);
 
   useEffect(() => {
-    fetchProjects(true);
-    fetchTotalCount();
-  }, [sortConfig]);
+    if (date.end && date.start) {
+      fetchProjects(true);
+      fetchTotalCount();
+    }
+  }, [sortConfig, date]);
 
   useEffect(() => {
     if (currentPage > 1) {
@@ -277,30 +312,44 @@ export function ProjectManagementPage() {
     }
   }, [currentPage]);
 
-  // Infinite scroll observer
+  // Infinite scroll observer with debouncing
   useEffect(() => {
-    const scrollContainer = document.querySelector(".overflow-auto");
+    const scrollContainer = scrollContainerRef.current;
 
     const handleScroll = () => {
-      if (!scrollContainer || !hasMore || loadingMore) return;
+      if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
+        return;
 
-      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();
+      // Clear previous timeout
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
       }
+
+      // 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);
+      scrollContainer.addEventListener("scroll", handleScroll, {
+        passive: true,
+      });
     }
 
     return () => {
       if (scrollContainer) {
         scrollContainer.removeEventListener("scroll", handleScroll);
       }
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
     };
   }, [loadMore, hasMore, loadingMore]);
 
@@ -321,7 +370,10 @@ export function ProjectManagementPage() {
       const response = await apiService.select({
         ProcessName: "project",
         OutputFields: ["count(project_no)"],
-        Conditions: [],
+        Conditions: [
+          ["start_date", ">=", date?.start || null, "and"],
+          ["start_date", "<=", date?.end || null],
+        ],
       });
 
       if (response.state === 0) {
@@ -342,32 +394,16 @@ 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();
+  // };
 
-  const formatCurrency = (amount: string | number) => {
-    if (!amount) return "0 ریال";
-    // Remove commas and convert to number
-    const numericAmount =
-      typeof amount === "string"
-        ? parseFloat(amount.replace(/,/g, ""))
-        : amount;
-    if (isNaN(numericAmount)) return "0 ریال";
-    return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
-  };
-
-  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);
-  };
+  // ...existing code...
 
   const toPersianDigits = (input: string | number): string => {
     const str = String(input);
@@ -509,6 +545,160 @@ 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];
@@ -523,7 +713,7 @@ export function ProjectManagementPage() {
         return (
           <span
             dir="ltr"
-            className="font-medium flex justify-end gap-1 items-center"
+            className="flex justify-end gap-1 items-center"
             style={{ color }}
           >
             <span>روز</span> {toPersianDigits(days)}
@@ -534,55 +724,65 @@ 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">{String(value) || "-"}</span>
+            <span className="text-gray-300">
+              {!!value ? String(value) : "-"}
+            </span>
             <span
               style={{
-                backgroundColor: `${column.key === "strategic_theme" ? "#6D53FB" : column.key === "value_technology_and_innovation" ? "#A757FF" : column.key === "type_of_innovation" ? "#E884CE" : "#C3BF8B"}`,
+                backgroundColor: color,
+                display: !value ? "none" : "block",
               }}
-              className="inline-block w-2 h-2 rounded-full bg-emerald-400"
+              className="inline-block w-2 h-2 rounded-full"
             />
           </span>
         );
+      }
       case "approved_budget":
       case "budget_spent":
         return (
-          <span className="font-medium text-emerald-400">
+          <span className=" text-emerald-400 font-normal">
             {formatCurrency(String(value))}
           </span>
         );
       case "deviation_from_program":
       case "cost_deviation":
         return (
-          <span className="text-gray-300">{formatNumber(value as any)}</span>
+          <span className="text-sm font-normal">
+            {formatNumber(value as any)}
+          </span>
         );
       case "start_date":
       case "end_date":
       case "done_date":
         return (
-          <span className="text-gray-300">{formatDate(String(value))}</span>
+          <span className=" text-sm font-normal">
+            {formatDate(String(value))}
+          </span>
         );
       case "project_no":
         return (
-          <Badge
-            variant="outline"
-            className="font-mono text-emerald-400 border-emerald-500/50"
-          >
+          <Badge variant="teal" className="border-emerald-500/50">
             {String(value)}
           </Badge>
         );
       case "title":
-        return <span className="font-medium text-white">{String(value)}</span>;
+        return (
+          <span className="text-sm font-normal text-white">
+            {String(value)}
+          </span>
+        );
       case "importance_project":
         return (
           <Badge
             variant="outline"
-            className="font-medium border-2"
+            className="border-2 text-sm rounded-lg"
             style={{
               color: getImportanceColor(String(value)),
               borderColor: getImportanceColor(String(value)),
-              backgroundColor: `${getImportanceColor(String(value))}20`,
             }}
           >
             {String(value)}
@@ -590,108 +790,356 @@ export function ProjectManagementPage() {
         );
       default:
         return (
-          <span className="text-gray-300">
+          <span className="font-light text-sm">
             {(value && String(value)) || "-"}
           </span>
         );
     }
   };
 
-  const totalPages = Math.ceil(totalCount / pageSize);
+  // 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;
+  };
 
   return (
     <DashboardLayout title="مدیریت پروژه‌ها">
-      <div className="p-6 space-y-6">
+      <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> */}
+
         {/* 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">
-              <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
+                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" />
+                                )
                               ) : (
-                                <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.length === 0 ? (
-                    <TableRow>
-                      <TableCell
-                        colSpan={columns.length}
-                        className="text-center py-8"
-                      >
-                        <span className="text-gray-400 font-persian">
-                          هیچ پروژه‌ای یافت نشد
-                        </span>
-                      </TableCell>
+                                <div className="w-4 h-4" />
+                              )}
+                            </button>
+                          ) : (
+                            column.label
+                          )}
+                        </TableHead>
+                      ))}
                     </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 whitespace-nowrap border-emerald-500/20 py-1 px-2"
-                          >
-                            {renderCellContent(project, column)}
-                          </TableCell>
-                        ))}
+                  </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>
                       </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
+                    ) : (
+                      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]">
+                    <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" />;
+                      })}
+                    </TableRow>
+                  </TableFooter>
+                </Table>
+              </div>
             </div>
 
             {/* Infinite scroll trigger */}
@@ -699,20 +1147,13 @@ 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-4 animate-spin text-emerald-400" />
+                    <RefreshCw className="w-4 h-3 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/projects/project-detail.tsx

@@ -1,354 +0,0 @@
-import React from "react";
-import { DashboardLayout } from "../layout";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Badge } from "~/components/ui/badge";
-import {
-  ArrowRight,
-  Calendar,
-  User,
-  Users,
-  DollarSign,
-  Clock,
-  FileText,
-  Edit,
-  Trash2,
-} from "lucide-react";
-
-interface ProjectDetailProps {
-  projectId: string;
-}
-
-// Mock project data
-const mockProject = {
-  id: 1,
-  name: "پروژه توسعه اپلیکیشن موبایل",
-  manager: "علی احمدی",
-  team: "تیم توسعه موبایل",
-  status: "در حال انجام",
-  priority: "بالا",
-  startDate: "1403/01/15",
-  endDate: "1403/06/30",
-  budget: "500,000,000",
-  progress: 65,
-  description: "این پروژه شامل توسعه یک اپلیکیشن موبایل کراس پلتفرم برای مدیریت پروژه‌ها و وظایف می‌باشد. اپلیکیشن باید قابلیت‌های مختلفی از جمله مدیریت کاربران، گزارش‌گیری و نوتیفیکیشن را داشته باشد.",
-  teamMembers: [
-    { id: 1, name: "علی احمدی", role: "مدیر پروژه", avatar: "AA" },
-    { id: 2, name: "سارا کریمی", role: "توسعه‌دهنده فرانت‌اند", avatar: "SK" },
-    { id: 3, name: "محمد رضایی", role: "توسعه‌دهنده بک‌اند", avatar: "MR" },
-    { id: 4, name: "فاطمه موسوی", role: "طراح UI/UX", avatar: "FM" },
-  ],
-  milestones: [
-    { id: 1, title: "تحلیل نیازمندی‌ها", status: "تکمیل شده", date: "1403/01/30" },
-    { id: 2, title: "طراحی رابط کاربری", status: "تکمیل شده", date: "1403/02/15" },
-    { id: 3, title: "توسعه بک‌اند", status: "در حال انجام", date: "1403/04/01" },
-    { id: 4, title: "توسعه فرانت‌اند", status: "در حال انجام", date: "1403/05/01" },
-    { id: 5, title: "تست و رفع باگ", status: "در انتظار", date: "1403/06/01" },
-    { id: 6, title: "انتشار نهایی", status: "در انتظار", date: "1403/06/30" },
-  ],
-  tasks: [
-    { id: 1, title: "پیاده‌سازی سیستم احراز هویت", assignee: "محمد رضایی", status: "در حال انجام", priority: "بالا" },
-    { id: 2, title: "طراحی صفحه داشبورد", assignee: "سارا کریمی", status: "تکمیل شده", priority: "متوسط" },
-    { id: 3, title: "توسعه API گزارش‌گیری", assignee: "محمد رضایی", status: "در انتظار", priority: "بالا" },
-    { id: 4, title: "طراحی آیکون‌های اپلیکیشن", assignee: "فاطمه موسوی", status: "در حال انجام", priority: "پایین" },
-  ],
-};
-
-const statusColors = {
-  "در حال انجام": "info",
-  "تکمیل شده": "success",
-  "در انتظار": "warning",
-  "لغو شده": "destructive",
-} as const;
-
-const priorityColors = {
-  "بالا": "destructive",
-  "متوسط": "warning",
-  "پایین": "secondary",
-} as const;
-
-export function ProjectDetail({ projectId }: ProjectDetailProps) {
-  const project = mockProject; // In real app, fetch by projectId
-
-  return (
-    <DashboardLayout>
-      <div className="p-6 space-y-6">
-        {/* Breadcrumb */}
-        <div className="flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
-          <Button variant="ghost" size="sm" className="font-persian p-0 h-auto">
-            پروژه‌ها
-          </Button>
-          <ArrowRight className="w-4 h-4" />
-          <span className="font-persian text-gray-900 dark:text-white">
-            جزئیات پروژه
-          </span>
-        </div>
-
-        {/* Project Header */}
-        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white font-persian">
-              {project.name}
-            </h1>
-            <p className="text-gray-600 dark:text-gray-400 font-persian mt-2">
-              {project.description}
-            </p>
-          </div>
-
-          <div className="flex gap-2">
-            <Button variant="outline" className="font-persian">
-              <Edit className="w-4 h-4 ml-2" />
-              ویرایش پروژه
-            </Button>
-            <Button variant="destructive" className="font-persian">
-              <Trash2 className="w-4 h-4 ml-2" />
-              حذف پروژه
-            </Button>
-          </div>
-        </div>
-
-        {/* Project Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-blue-100 rounded-lg dark:bg-blue-900">
-                  <Calendar className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">تاریخ شروع</p>
-                  <p className="text-lg font-bold text-gray-900 dark:text-white font-persian">
-                    {project.startDate}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-green-100 rounded-lg dark:bg-green-900">
-                  <Clock className="w-5 h-5 text-green-600 dark:text-green-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">تاریخ پایان</p>
-                  <p className="text-lg font-bold text-gray-900 dark:text-white font-persian">
-                    {project.endDate}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-yellow-100 rounded-lg dark:bg-yellow-900">
-                  <DollarSign className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">بودجه</p>
-                  <p className="text-lg font-bold text-gray-900 dark:text-white font-persian">
-                    {project.budget} ریال
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-purple-100 rounded-lg dark:bg-purple-900">
-                  <FileText className="w-5 h-5 text-purple-600 dark:text-purple-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">پیشرفت</p>
-                  <p className="text-lg font-bold text-gray-900 dark:text-white font-persian">
-                    {project.progress}%
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Project Details */}
-          <div className="lg:col-span-2 space-y-6">
-            {/* Progress Bar */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-persian">پیشرفت پروژه</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  <div className="flex justify-between items-center">
-                    <span className="text-sm font-medium text-gray-500 dark:text-gray-400 font-persian">
-                      {project.progress}% تکمیل شده
-                    </span>
-                    <div className="flex items-center gap-2">
-                      <Badge variant={statusColors[project.status as keyof typeof statusColors]} className="font-persian">
-                        {project.status}
-                      </Badge>
-                      <Badge variant={priorityColors[project.priority as keyof typeof priorityColors]} className="font-persian">
-                        اولویت {project.priority}
-                      </Badge>
-                    </div>
-                  </div>
-                  <div className="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-700">
-                    <div
-                      className="bg-gradient-to-r from-blue-500 to-blue-600 h-3 rounded-full transition-all duration-500"
-                      style={{ width: `${project.progress}%` }}
-                    ></div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Milestones */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-persian">مراحل پروژه</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-4">
-                  {project.milestones.map((milestone) => (
-                    <div key={milestone.id} className="flex items-center justify-between p-3 border rounded-lg dark:border-gray-700">
-                      <div className="flex items-center space-x-3">
-                        <div
-                          className={`w-3 h-3 rounded-full ${
-                            milestone.status === "تکمیل شده"
-                              ? "bg-green-500"
-                              : milestone.status === "در حال انجام"
-                              ? "bg-blue-500"
-                              : "bg-gray-300"
-                          }`}
-                        ></div>
-                        <div className="text-right">
-                          <p className="font-medium text-gray-900 dark:text-white font-persian">
-                            {milestone.title}
-                          </p>
-                          <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">
-                            {milestone.date}
-                          </p>
-                        </div>
-                      </div>
-                      <Badge
-                        variant={statusColors[milestone.status as keyof typeof statusColors]}
-                        className="font-persian"
-                      >
-                        {milestone.status}
-                      </Badge>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Recent Tasks */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-persian">وظایف اخیر</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  {project.tasks.map((task) => (
-                    <div key={task.id} className="flex items-center justify-between p-3 border rounded-lg dark:border-gray-700">
-                      <div className="text-right">
-                        <p className="font-medium text-gray-900 dark:text-white font-persian">
-                          {task.title}
-                        </p>
-                        <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">
-                          مسئول: {task.assignee}
-                        </p>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Badge variant={statusColors[task.status as keyof typeof statusColors]} className="font-persian">
-                          {task.status}
-                        </Badge>
-                        <Badge variant={priorityColors[task.priority as keyof typeof priorityColors]} className="font-persian">
-                          {task.priority}
-                        </Badge>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* Sidebar */}
-          <div className="space-y-6">
-            {/* Project Info */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-persian">اطلاعات پروژه</CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-2">
-                  <User className="w-4 h-4 text-gray-500" />
-                  <div className="text-right">
-                    <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">مدیر پروژه</p>
-                    <p className="font-medium text-gray-900 dark:text-white font-persian">
-                      {project.manager}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Users className="w-4 h-4 text-gray-500" />
-                  <div className="text-right">
-                    <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">تیم</p>
-                    <p className="font-medium text-gray-900 dark:text-white font-persian">
-                      {project.team}
-                    </p>
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-2">
-                  <Calendar className="w-4 h-4 text-gray-500" />
-                  <div className="text-right">
-                    <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">مدت زمان</p>
-                    <p className="font-medium text-gray-900 dark:text-white font-persian">
-                      {project.startDate} تا {project.endDate}
-                    </p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Team Members */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="font-persian">اعضای تیم</CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-3">
-                  {project.teamMembers.map((member) => (
-                    <div key={member.id} className="flex items-center space-x-3">
-                      <div className="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-medium text-sm">
-                        {member.avatar}
-                      </div>
-                      <div className="text-right">
-                        <p className="font-medium text-gray-900 dark:text-white font-persian">
-                          {member.name}
-                        </p>
-                        <p className="text-sm text-gray-500 dark:text-gray-400 font-persian">
-                          {member.role}
-                        </p>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </DashboardLayout>
-  );
-}
-
-export default ProjectDetail;

app/components/dashboard/projects/projects-page.tsx

@@ -1,663 +0,0 @@
-import React, { useState } from "react";
-import { DashboardLayout } from "../layout";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
-import { Badge } from "~/components/ui/badge";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "~/components/ui/table";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "~/components/ui/dropdown-menu";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "~/components/ui/dialog";
-import { Label } from "~/components/ui/label";
-import { Textarea } from "~/components/ui/textarea";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import {
-  Plus,
-  Search,
-  Filter,
-  MoreHorizontal,
-  Edit,
-  Trash2,
-  Eye,
-  Calendar,
-  User,
-  DollarSign,
-  Clock,
-} from "lucide-react";
-
-// Mock data for projects
-const mockProjects = [
-  {
-    id: 1,
-    name: "پروژه توسعه اپلیکیشن موبایل",
-    manager: "علی احمدی",
-    team: "تیم توسعه موبایل",
-    status: "در حال انجام",
-    priority: "بالا",
-    startDate: "1403/01/15",
-    endDate: "1403/06/30",
-    budget: "500,000,000",
-    progress: 65,
-    description: "توسعه اپلیکیشن موبایل برای مدیریت پروژه‌ها",
-  },
-  {
-    id: 2,
-    name: "پیاده‌سازی سیستم مدیریت محتوا",
-    manager: "فاطمه کریمی",
-    team: "تیم بک‌اند",
-    status: "تکمیل شده",
-    priority: "متوسط",
-    startDate: "1402/10/01",
-    endDate: "1403/02/15",
-    budget: "750,000,000",
-    progress: 100,
-    description: "توسعه سیستم مدیریت محتوای وب",
-  },
-  {
-    id: 3,
-    name: "بهینه‌سازی پایگاه داده",
-    manager: "محمد رضایی",
-    team: "تیم دیتابیس",
-    status: "در انتظار",
-    priority: "بالا",
-    startDate: "1403/03/01",
-    endDate: "1403/05/30",
-    budget: "300,000,000",
-    progress: 0,
-    description: "بهینه‌سازی عملکرد پایگاه داده‌های موجود",
-  },
-  {
-    id: 4,
-    name: "راه‌اندازی سیستم مانیتورینگ",
-    manager: "سارا موسوی",
-    team: "تیم DevOps",
-    status: "در حال انجام",
-    priority: "متوسط",
-    startDate: "1403/02/01",
-    endDate: "1403/04/15",
-    budget: "400,000,000",
-    progress: 30,
-    description: "پیاده‌سازی سیستم نظارت و مانیتورینگ",
-  },
-  {
-    id: 5,
-    name: "توسعه پنل مدیریت",
-    manager: "رضا نوری",
-    team: "تیم فرانت‌اند",
-    status: "لغو شده",
-    priority: "پایین",
-    startDate: "1402/12/01",
-    endDate: "1403/03/01",
-    budget: "200,000,000",
-    progress: 25,
-    description: "توسعه پنل مدیریت برای ادمین‌ها",
-  },
-];
-
-const statusColors = {
-  "در حال انجام": "info",
-  "تکمیل شده": "success",
-  "در انتظار": "warning",
-  "لغو شده": "destructive",
-} as const;
-
-const priorityColors = {
-  بالا: "destructive",
-  متوسط: "warning",
-  پایین: "secondary",
-} as const;
-
-export function ProjectsPage() {
-  const [projects, setProjects] = useState(mockProjects);
-  const [searchTerm, setSearchTerm] = useState("");
-  const [filterStatus, setFilterStatus] = useState("همه");
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
-  const [editingProject, setEditingProject] = useState<any>(null);
-  const [newProject, setNewProject] = useState({
-    name: "",
-    manager: "",
-    team: "",
-    status: "در انتظار",
-    priority: "متوسط",
-    startDate: "",
-    endDate: "",
-    budget: "",
-    description: "",
-  });
-
-  const filteredProjects = projects.filter((project) => {
-    const matchesSearch =
-      project.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      project.manager.toLowerCase().includes(searchTerm.toLowerCase());
-    const matchesStatus =
-      filterStatus === "همه" || project.status === filterStatus;
-    return matchesSearch && matchesStatus;
-  });
-
-  const handleAddProject = () => {
-    const id = Math.max(...projects.map((p) => p.id)) + 1;
-    setProjects([...projects, { ...newProject, id, progress: 0 }]);
-    setNewProject({
-      name: "",
-      manager: "",
-      team: "",
-      status: "در انتظار",
-      priority: "متوسط",
-      startDate: "",
-      endDate: "",
-      budget: "",
-      description: "",
-    });
-    setIsAddDialogOpen(false);
-  };
-
-  const handleEditProject = (project: any) => {
-    setEditingProject(project);
-    setNewProject(project);
-    setIsAddDialogOpen(true);
-  };
-
-  const handleUpdateProject = () => {
-    setProjects(
-      projects.map((p) =>
-        p.id === editingProject.id
-          ? {
-              ...newProject,
-              id: editingProject.id,
-              progress: editingProject.progress,
-            }
-          : p,
-      ),
-    );
-    setEditingProject(null);
-    setNewProject({
-      name: "",
-      manager: "",
-      team: "",
-      status: "در انتظار",
-      priority: "متوسط",
-      startDate: "",
-      endDate: "",
-      budget: "",
-      description: "",
-    });
-    setIsAddDialogOpen(false);
-  };
-
-  const handleDeleteProject = (id: number) => {
-    setProjects(projects.filter((p) => p.id !== id));
-  };
-
-  return (
-    <DashboardLayout>
-      <div className="p-6 space-y-6">
-        {/* Page Header */}
-        <div className="flex justify-between items-start">
-          <div>
-            <h1 className="text-2xl font-bold text-white font-persian">
-              مدیریت پروژه‌ها
-            </h1>
-            <p className="text-gray-300 font-persian mt-1">
-              مدیریت و پیگیری پروژه‌های فناوری و نوآوری
-            </p>
-          </div>
-
-          <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
-            <DialogTrigger asChild>
-              <Button className="font-persian">
-                <Plus className="w-4 h-4 ml-2" />
-                پروژه جدید
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-md">
-              <DialogHeader>
-                <DialogTitle className="font-persian">
-                  {editingProject ? "ویرایش پروژه" : "پروژه جدید"}
-                </DialogTitle>
-                <DialogDescription className="font-persian">
-                  {editingProject
-                    ? "اطلاعات پروژه را ویرایش کنید."
-                    : "اطلاعات پروژه جدید را وارد کنید."}
-                </DialogDescription>
-              </DialogHeader>
-
-              <div className="grid gap-4 py-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="name" className="font-persian">
-                    نام پروژه
-                  </Label>
-                  <Input
-                    id="name"
-                    value={newProject.name}
-                    onChange={(e) =>
-                      setNewProject({ ...newProject, name: e.target.value })
-                    }
-                    className="font-persian"
-                    placeholder="نام پروژه را وارد کنید"
-                  />
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="manager" className="font-persian">
-                    مدیر پروژه
-                  </Label>
-                  <Input
-                    id="manager"
-                    value={newProject.manager}
-                    onChange={(e) =>
-                      setNewProject({ ...newProject, manager: e.target.value })
-                    }
-                    className="font-persian"
-                    placeholder="نام مدیر پروژه"
-                  />
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="team" className="font-persian">
-                    تیم
-                  </Label>
-                  <Input
-                    id="team"
-                    value={newProject.team}
-                    onChange={(e) =>
-                      setNewProject({ ...newProject, team: e.target.value })
-                    }
-                    className="font-persian"
-                    placeholder="نام تیم"
-                  />
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-2">
-                    <Label className="font-persian">وضعیت</Label>
-                    <Select
-                      value={newProject.status}
-                      onValueChange={(value) =>
-                        setNewProject({ ...newProject, status: value })
-                      }
-                    >
-                      <SelectTrigger className="font-persian">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="در انتظار">در انتظار</SelectItem>
-                        <SelectItem value="در حال انجام">
-                          در حال انجام
-                        </SelectItem>
-                        <SelectItem value="تکمیل شده">تکمیل شده</SelectItem>
-                        <SelectItem value="لغو شده">لغو شده</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-
-                  <div className="grid gap-2">
-                    <Label className="font-persian">اولویت</Label>
-                    <Select
-                      value={newProject.priority}
-                      onValueChange={(value) =>
-                        setNewProject({ ...newProject, priority: value })
-                      }
-                    >
-                      <SelectTrigger className="font-persian">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="بالا">بالا</SelectItem>
-                        <SelectItem value="متوسط">متوسط</SelectItem>
-                        <SelectItem value="پایین">پایین</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="grid gap-2">
-                    <Label htmlFor="startDate" className="font-persian">
-                      تاریخ شروع
-                    </Label>
-                    <Input
-                      id="startDate"
-                      value={newProject.startDate}
-                      onChange={(e) =>
-                        setNewProject({
-                          ...newProject,
-                          startDate: e.target.value,
-                        })
-                      }
-                      className="font-persian"
-                      placeholder="1403/01/01"
-                    />
-                  </div>
-
-                  <div className="grid gap-2">
-                    <Label htmlFor="endDate" className="font-persian">
-                      تاریخ پایان
-                    </Label>
-                    <Input
-                      id="endDate"
-                      value={newProject.endDate}
-                      onChange={(e) =>
-                        setNewProject({
-                          ...newProject,
-                          endDate: e.target.value,
-                        })
-                      }
-                      className="font-persian"
-                      placeholder="1403/06/01"
-                    />
-                  </div>
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="budget" className="font-persian">
-                    بودجه (ریال)
-                  </Label>
-                  <Input
-                    id="budget"
-                    value={newProject.budget}
-                    onChange={(e) =>
-                      setNewProject({ ...newProject, budget: e.target.value })
-                    }
-                    className="font-persian"
-                    placeholder="500,000,000"
-                  />
-                </div>
-
-                <div className="grid gap-2">
-                  <Label htmlFor="description" className="font-persian">
-                    توضیحات
-                  </Label>
-                  <Textarea
-                    id="description"
-                    value={newProject.description}
-                    onChange={(e) =>
-                      setNewProject({
-                        ...newProject,
-                        description: e.target.value,
-                      })
-                    }
-                    className="font-persian"
-                    placeholder="توضیحات پروژه"
-                  />
-                </div>
-              </div>
-
-              <DialogFooter>
-                <Button
-                  variant="outline"
-                  onClick={() => setIsAddDialogOpen(false)}
-                  className="font-persian"
-                >
-                  انصراف
-                </Button>
-                <Button
-                  onClick={
-                    editingProject ? handleUpdateProject : handleAddProject
-                  }
-                  className="font-persian"
-                >
-                  {editingProject ? "ویرایش" : "ایجاد"}
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
-        </div>
-
-        {/* Stats Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-blue-100 rounded-lg dark:bg-blue-900">
-                  <Calendar className="w-5 h-5 text-blue-600 dark:text-blue-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">
-                    کل پروژه‌ها
-                  </p>
-                  <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                    {projects.length}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-green-100 rounded-lg dark:bg-green-900">
-                  <Clock className="w-5 h-5 text-green-600 dark:text-green-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">
-                    در حال انجام
-                  </p>
-                  <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                    {projects.filter((p) => p.status === "در حال انجام").length}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-teal-100 rounded-lg dark:bg-teal-900">
-                  <User className="w-5 h-5 text-teal-600 dark:text-teal-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">
-                    تکمیل شده
-                  </p>
-                  <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                    {projects.filter((p) => p.status === "تکمیل شده").length}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className="p-4">
-              <div className="flex items-center space-x-2">
-                <div className="p-2 bg-yellow-100 rounded-lg dark:bg-yellow-900">
-                  <DollarSign className="w-5 h-5 text-yellow-600 dark:text-yellow-400" />
-                </div>
-                <div className="flex-1 text-right">
-                  <p className="text-sm text-gray-600 dark:text-gray-400 font-persian">
-                    در انتظار
-                  </p>
-                  <p className="text-2xl font-bold text-gray-900 dark:text-white">
-                    {projects.filter((p) => p.status === "در انتظار").length}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Filters and Search */}
-        <Card>
-          <CardHeader>
-            <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
-              <CardTitle className="font-persian">لیست پروژه‌ها</CardTitle>
-
-              <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
-                <div className="relative">
-                  <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
-                  <Input
-                    placeholder="جستجو در پروژه‌ها..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="pr-10 font-persian w-full sm:w-64"
-                  />
-                </div>
-
-                <Select value={filterStatus} onValueChange={setFilterStatus}>
-                  <SelectTrigger className="w-full sm:w-40">
-                    <Filter className="w-4 h-4 ml-2" />
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="همه">همه وضعیت‌ها</SelectItem>
-                    <SelectItem value="در حال انجام">در حال انجام</SelectItem>
-                    <SelectItem value="تکمیل شده">تکمیل شده</SelectItem>
-                    <SelectItem value="در انتظار">در انتظار</SelectItem>
-                    <SelectItem value="لغو شده">لغو شده</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-          </CardHeader>
-
-          <CardContent>
-            <div className="overflow-x-auto">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="font-persian">نام پروژه</TableHead>
-                    <TableHead className="font-persian">مدیر پروژه</TableHead>
-                    <TableHead className="font-persian">تیم</TableHead>
-                    <TableHead className="font-persian">وضعیت</TableHead>
-                    <TableHead className="font-persian">اولویت</TableHead>
-                    <TableHead className="font-persian">تاریخ شروع</TableHead>
-                    <TableHead className="font-persian">پیشرفت</TableHead>
-                    <TableHead className="font-persian">عملیات</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {filteredProjects.map((project) => (
-                    <TableRow key={project.id}>
-                      <TableCell className="font-medium font-persian">
-                        {project.name}
-                      </TableCell>
-                      <TableCell className="font-persian">
-                        {project.manager}
-                      </TableCell>
-                      <TableCell className="font-persian">
-                        {project.team}
-                      </TableCell>
-                      <TableCell>
-                        <Badge
-                          variant={
-                            statusColors[
-                              project.status as keyof typeof statusColors
-                            ]
-                          }
-                          className="font-persian"
-                        >
-                          {project.status}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>
-                        <Badge
-                          variant={
-                            priorityColors[
-                              project.priority as keyof typeof priorityColors
-                            ]
-                          }
-                          className="font-persian"
-                        >
-                          {project.priority}
-                        </Badge>
-                      </TableCell>
-                      <TableCell className="font-persian">
-                        {project.startDate}
-                      </TableCell>
-                      <TableCell>
-                        <div className="flex items-center space-x-2">
-                          <div className="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                            <div
-                              className="bg-blue-600 h-2 rounded-full transition-all"
-                              style={{ width: `${project.progress}%` }}
-                            ></div>
-                          </div>
-                          <span className="text-sm text-gray-600 dark:text-gray-400 min-w-[3rem]">
-                            {project.progress}%
-                          </span>
-                        </div>
-                      </TableCell>
-                      <TableCell>
-                        <DropdownMenu>
-                          <DropdownMenuTrigger asChild>
-                            <Button variant="ghost" className="h-8 w-8 p-0">
-                              <MoreHorizontal className="h-4 w-4" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent align="end">
-                            <DropdownMenuLabel className="font-persian">
-                              عملیات
-                            </DropdownMenuLabel>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem className="font-persian">
-                              <Eye className="ml-2 h-4 w-4" />
-                              مشاهده جزئیات
-                            </DropdownMenuItem>
-                            <DropdownMenuItem
-                              className="font-persian"
-                              onClick={() => handleEditProject(project)}
-                            >
-                              <Edit className="ml-2 h-4 w-4" />
-                              ویرایش
-                            </DropdownMenuItem>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem
-                              className="font-persian text-red-600"
-                              onClick={() => handleDeleteProject(project.id)}
-                            >
-                              <Trash2 className="ml-2 h-4 w-4" />
-                              حذف
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-            </div>
-
-            {filteredProjects.length === 0 && (
-              <div className="text-center py-8">
-                <p className="text-gray-500 dark:text-gray-400 font-persian">
-                  هیچ پروژه‌ای یافت نشد.
-                </p>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    </DashboardLayout>
-  );
-}
-
-export default ProjectsPage;

app/components/dashboard/sidebar.tsx

@@ -1,51 +1,39 @@
+import {
+  ChevronDown,
+  GalleryVerticalEnd,
+  House,
+  LightbulbIcon,
+  ListTodo,
+  LogOut,
+  Radar,
+  Settings,
+  Star,
+  Workflow,
+  DiscAlbum,
+  LucideLightbulb
+} from "lucide-react";
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router";
-import { cn } from "~/lib/utils";
-import { InogenLogo } from "~/components/ui/brand-logo";
 import { useAuth } from "~/contexts/auth-context";
-import {
-  GalleryVerticalEnd,
-  LayoutDashboard,
-  FolderOpen,
-  Users,
-  BarChart3,
-  Settings,
-  ChevronLeft,
-  ChevronDown,
-  FileText,
-  Calendar,
-  Bell,
-  User,
-  Database,
-  Shield,
-  HelpCircle,
-  LogOut,
-  ChevronRight,
-  Refrigerator,
-} from "lucide-react";
-import {
-  FolderKanban,
-  Box,
-  Package,
-  Workflow,
-  MonitorSmartphone,
-  Leaf,
-  Building2,
-  Globe,
-  Lightbulb,
-  Star,
-} from "lucide-react";
+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 {
   id: string;
   label: string;
-  icon: React.ComponentType<{ className?: string }>;
+  icon: React.ComponentType<{ className?: string }> | null;
   href?: string;
   children?: MenuItem[];
   badge?: string | number;
@@ -55,48 +43,48 @@ const menuItems: MenuItem[] = [
   {
     id: "dashboard",
     label: "صفحه اصلی",
-    icon: LayoutDashboard,
+    icon: House,
     href: "/dashboard",
   },
   {
     id: "project-management",
     label: "مدیریت اجرای پروژه‌ها",
-    icon: FolderKanban,
+    icon: ListTodo,
     href: "/dashboard/project-management",
   },
   {
     id: "innovation-basket",
     label: "سبد فناوری و نوآوری",
-    icon: Box,
+    icon: LightbulbIcon,
     children: [
       {
         id: "product-innovation",
         label: "نوآوری در محصول",
-        icon: Package,
+        icon: null,
         href: "/dashboard/innovation-basket/product-innovation",
       },
       {
         id: "process-innovation",
         label: "نوآوری در فرآیند",
-        icon: Workflow,
+        icon: null,
         href: "/dashboard/innovation-basket/process-innovation",
       },
       {
         id: "digital-innovation",
         label: "نوآوری دیجیتال",
-        icon: MonitorSmartphone,
+        icon: null,
         href: "/dashboard/innovation-basket/digital-innovation",
       },
       {
         id: "green-innovation",
         label: "نوآوری سبز",
-        icon: Leaf,
+        icon: null,
         href: "/dashboard/innovation-basket/green-innovation",
       },
       {
         id: "internal-innovation",
         label: "نوآوری ساخت داخل",
-        icon: Building2,
+        icon: null,
         href: "/dashboard/innovation-basket/internal-innovation",
       },
     ],
@@ -104,30 +92,30 @@ const menuItems: MenuItem[] = [
   {
     id: "ecosystem",
     label: "زیست بوم فناوری و نوآوری",
-    icon: Globe,
+    icon: Radar,
     href: "/dashboard/ecosystem",
   },
   {
     id: "ideas",
     label: "ایده‌های فناوری و نوآوری",
-    icon: Lightbulb,
-    href: "/dashboard/ideas",
+    icon: LucideLightbulb,
+    href: "/dashboard/manage-ideas-tech",
   },
-  {
-    id: "top-innovations",
-    label: "نوآور برتر",
-    icon: Star,
-    href: "/dashboard/top-innovations",
+    {
+    id: "strategic-alignment",
+    label: "میزان انطباق راهبردی",
+    icon: null,
+    href: "#", // This is not a route, it opens a popup
   },
 ];
 
 const bottomMenuItems: MenuItem[] = [
-  {
-    id: "settings",
-    label: "تنظیمات",
-    icon: Settings,
-    href: "/dashboard/settings",
-  },
+  // {
+  //   id: "settings",
+  //   label: "تنظیمات",
+  //   icon: Settings,
+  //   href: "/dashboard/settings",
+  // },
   {
     id: "logout",
     label: "خروج",
@@ -140,6 +128,8 @@ export function Sidebar({
   isCollapsed = false,
   onToggleCollapse,
   className,
+  onStrategicAlignmentClick,
+  onTitleChange,
 }: SidebarProps) {
   const location = useLocation();
   const [expandedItems, setExpandedItems] = useState<string[]>([]);
@@ -162,6 +152,35 @@ 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();
@@ -171,7 +190,7 @@ export function Sidebar({
     setExpandedItems((prev) => {
       // If trying to collapse, check if any child is active
       if (prev.includes(itemId)) {
-        const item = menuItems.find(menuItem => menuItem.id === itemId);
+        const item = menuItems.find((menuItem) => menuItem.id === itemId);
         if (item?.children) {
           const hasActiveChild = item.children.some(
             (child) => child.href && location.pathname === child.href
@@ -192,7 +211,7 @@ export function Sidebar({
     if (href && location.pathname === href) return true;
     if (children) {
       return children.some(
-        (child) => child.href && location.pathname === child.href,
+        (child) => child.href && location.pathname === child.href
       );
     }
     return false;
@@ -200,44 +219,74 @@ export function Sidebar({
 
   const renderMenuItem = (item: MenuItem, level = 0) => {
     const isActive = isActiveRoute(item.href, item.children);
-    const isExpanded = expandedItems.includes(item.id) ||
-      (item.children && item.children.some(child =>
-        child.href && location.pathname === child.href
-      ));
+    const isExpanded =
+      expandedItems.includes(item.id) ||
+      (item.children &&
+        item.children.some(
+          (child) => child.href && location.pathname === child.href
+        ));
     const hasChildren = item.children && item.children.length > 0;
 
     const ItemIcon = item.icon;
 
     const handleClick = () => {
-      if (item.id === "logout") {
+      // 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") {
         logout();
       } else if (hasChildren) {
         toggleExpanded(item.id);
       }
     };
 
+    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>
+      );
+    }
+
     return (
       <div key={item.id} className="relative">
-        {item.href && item.id !== "logout" ? (
+        {item.href && item.href !== "#" ? (
           <Link to={item.href} className="block">
             <div
               className={cn(
-                "flex items-center justify-between w-full py-2 px-3 rounded-lg transition-all duration-200 group",
+                "flex items-center justify-between rounded-none w-full py-2 px-3 transition-all duration-200 group",
                 level === 0 ? "mb-1" : "mb-0.5 mr-4",
                 isActive
-                  ? " 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",
+                  ? " text-pr-green border-r-2  border-pr-green"
+                  : "text-gray-300  hover:text-pr-green",
                 isCollapsed && level === 0 && "justify-center px-2",
-                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400",
+                item.id === "logout" && "hover:text-pr-red"
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
-                <ItemIcon
-                  className={cn(
-                    "w-5 h-5 flex-shrink-0",
-                    isActive ? "text-emerald-400" : "text-current",
-                  )}
-                />
+                {ItemIcon && (
+                  <ItemIcon
+                    className={cn(
+                      "w-5 h-5 flex-shrink-0",
+                      isActive ? "text-pr-green" : "text-current"
+                    )}
+                  />
+                )}
                 {!isCollapsed && (
                   <span className="font-persian text-sm font-medium truncate">
                     {item.label}
@@ -248,7 +297,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-emerald-400 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-pr-green text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-persian">
                       {item.badge}
                     </span>
                   )}
@@ -256,7 +305,7 @@ export function Sidebar({
                     <ChevronDown
                       className={cn(
                         "w-4 h-4 transition-transform duration-200",
-                        isExpanded ? "rotate-180" : "rotate-0",
+                        isExpanded ? "rotate-180" : "rotate-0"
                       )}
                     />
                   )}
@@ -269,30 +318,34 @@ export function Sidebar({
             className={cn(
               "w-full text-right",
               // Disable pointer cursor when child is active (cannot collapse)
-              item.children && item.children.some(child =>
-                child.href && location.pathname === child.href
-              ) && "cursor-not-allowed"
+              item.children &&
+                item.children.some(
+                  (child) => child.href && location.pathname === child.href
+                ) &&
+                "cursor-not-allowed"
             )}
             onClick={handleClick}
           >
             <div
               className={cn(
-                "flex items-center justify-between w-full py-2 px-3 rounded-lg transition-all duration-200 group",
+                "flex items-center justify-between w-full py-2 px-3 rounded-none transition-all duration-200 group",
                 level === 0 ? "mb-1" : "mb-0.5 mr-4",
                 isActive
-                  ? " 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",
+                  ? " text-pr-green border-r-2 border-pr-green"
+                  : "text-gray-300 cursor-pointer hover:text-pr-green",
                 isCollapsed && level === 0 && "justify-center px-2",
-                item.id === "logout" && "hover:bg-red-500/10 hover:text-red-400",
+                item.id === "logout" && "hover:text-pr-red"
               )}
             >
               <div className="flex items-center gap-3 min-w-0 flex-1">
-                <ItemIcon
-                  className={cn(
-                    "w-5 h-5 flex-shrink-0",
-                    isActive ? "text-emerald-400" : "text-current",
-                  )}
-                />
+                {ItemIcon && (
+                  <ItemIcon
+                    className={cn(
+                      "w-5 h-5 flex-shrink-0",
+                      isActive ? "text-pr-green" : "text-current"
+                    )}
+                  />
+                )}
                 {!isCollapsed && (
                   <span className="font-persian text-sm font-medium truncate">
                     {item.label}
@@ -303,7 +356,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-emerald-400 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-pr-green text-xs font-medium px-1.5 py-0.5 rounded-full min-w-[20px] text-center font-persian">
                       {item.badge}
                     </span>
                   )}
@@ -313,9 +366,13 @@ export function Sidebar({
                         "w-4 h-4 transition-transform duration-200",
                         isExpanded ? "rotate-180" : "rotate-0",
                         // Show different color when child is active (cannot collapse)
-                        item.children && item.children.some(child =>
-                          child.href && location.pathname === child.href
-                        ) ? "text-emerald-400" : "text-current"
+                        item.children &&
+                          item.children.some(
+                            (child) =>
+                              child.href && location.pathname === child.href
+                          )
+                          ? "text-pr-green"
+                          : "text-current"
                       )}
                     />
                   )}
@@ -324,14 +381,12 @@ export function Sidebar({
             </div>
           </button>
         )}
-
         {/* Submenu */}
         {hasChildren && isExpanded && !isCollapsed && (
           <div className="mt-1 space-y-0.5">
             {item.children?.map((child) => renderMenuItem(child, level + 1))}
           </div>
         )}
-
         {/* Tooltip for collapsed state */}
         {isCollapsed && level === 0 && (
           <div className="absolute right-full top-1/2 transform -translate-y-1/2 mr-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
@@ -352,7 +407,7 @@ export function Sidebar({
       className={cn(
         " backdrop-blur-sm h-full flex flex-col transition-all duration-300",
         isCollapsed ? "w-16" : "w-64",
-        className,
+        className
       )}
     >
       {/* Header */}
@@ -368,14 +423,19 @@ 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>
           ) : (
             <div className="flex justify-center w-full">
-              <InogenLogo size="sm" />
+              <GalleryVerticalEnd
+                color="black"
+                size={32}
+                strokeWidth={1}
+                className="bg-green-400 p-1.5 rounded-lg"
+              />
             </div>
           )}
         </div>
@@ -402,7 +462,7 @@ export function Sidebar({
       </div>
 
       {/* Collapse Toggle */}
-      {onToggleCollapse && (
+      {/* {onToggleCollapse && (
         <div className="p-3 border-t border-gray-500/30">
           <button
             onClick={onToggleCollapse}
@@ -411,7 +471,7 @@ export function Sidebar({
             <ChevronRight
               className={cn(
                 "w-4 h-4 text-gray-400 transition-transform duration-200",
-                isCollapsed ? "rotate-180" : "rotate-0",
+                isCollapsed ? "rotate-180" : "rotate-0"
               )}
             />
             {!isCollapsed && (
@@ -419,7 +479,7 @@ export function Sidebar({
             )}
           </button>
         </div>
-      )}
+      )} */}
     </div>
   );
 }

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

@@ -0,0 +1,425 @@
+import { useEffect, useReducer, useRef, useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  LabelList,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} 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 { 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;
+  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;
+}
+
+// ✅ Chart config for shadcn/ui
+const chartConfig = {
+  percentage: {
+    label: "",
+    color: "#3AEA83",
+  },
+};
+
+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">
+      {[...Array(9)].map((_, i) => (
+        <div key={i} className="flex flex-col items-center gap-1">
+          <Skeleton
+            className="w-10 bg-gray-700 rounded-md"
+            style={{ height: `${barHeights()}px` }}
+          />
+        </div>
+      ))}
+    </div>
+    {/* 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" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+      <Skeleton className="h-6 w-15 bg-gray-700 rounded" />
+    </div>
+  </div>
+);
+export function StrategicAlignmentPopup({
+  open,
+  onOpenChange,
+}: 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) {
+      fetchData();
+    }
+  }, [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],
+        ],
+      });
+
+      const responseData =
+        typeof response.data === "string"
+          ? JSON.parse(response.data)
+          : response.data;
+
+      setBarItems(responseData);
+      const dropDownItems = responseData.map(
+        (item: any) => item.strategic_theme
+      );
+
+      setDropDownValues(["همه مضامین", ...dropDownItems]);
+    } catch (error) {
+      console.error("Error fetching strategic alignment data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  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}>
+      <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>
+
+        {loading ? (
+          <ChartSkeleton />
+        ) : (
+          <>
+            <ResponsiveContainer width="100%" height={400}>
+              <ChartContainer
+                config={chartConfig}
+                className="aspect-auto h-96 w-full"
+              >
+                <BarChart
+                  data={data}
+                  margin={{ left: 12, right: 12 }}
+                  barGap={15}
+                  barSize={30}
+                  accessibilityLayer
+                >
+                  <CartesianGrid vertical={false} stroke="#475569" />
+                  <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>
+                      );
+                    }}
+                  />
+                  <YAxis
+                    domain={[0, 100]}
+                    tickLine={false}
+                    axisLine={false}
+                    tickMargin={20}
+                    tick={{ fill: "#94a3b8", fontSize: 12 }}
+                    tickFormatter={(value) =>
+                      `${formatNumber(Math.round(value))}`
+                    }
+                    label={{
+                      value: "تعداد برنامه ها",
+                      angle: -90,
+                      position: "insideLeft",
+                      fill: "#94a3b8",
+                      fontSize: 11,
+                      offset: 0,
+                      dy: 0,
+                      style: { textAnchor: "middle" },
+                    }}
+                  />
+
+                  <Bar dataKey="percentage" radius={[8, 8, 0, 0]}>
+                    {data.map((entry, index) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={chartConfig.percentage.color}
+                      />
+                    ))}
+                    <LabelList
+                      dataKey="percentage"
+                      position="top"
+                      offset={15}
+                      style={{
+                        fill: "#ffffff",
+                        fontSize: "16px",
+                        fontWeight: "bold",
+                      }}
+                      formatter={(v: number) =>
+                        `${formatNumber(Math.round(v))}`
+                      }
+                    />
+                  </Bar>
+                </BarChart>
+              </ChartContainer>
+            </ResponsiveContainer>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

app/components/ecosystem/info-panel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { useEffect, useState } from "react";
 import {
   Area,
   AreaChart,
@@ -11,9 +10,12 @@ 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 { formatNumber } from "~/lib/utils";
+import { EventBus, formatNumber } from "~/lib/utils";
+import type { CalendarDate } from "~/types/util.type";
 
 export interface CompanyDetails {
   id: string;
@@ -62,38 +64,59 @@ 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 fetchCounts = async () => {
-      setIsLoading(true);
-      try {
-        const [countsRes, processRes] = await Promise.all([
-          apiService.call<EcosystemCounts>({
-            ecosystem_count_function: {},
-          }),
-          apiService.call<ProcessActorsResponse[]>({
-            process_creating_actors_function: {},
-          }),
-        ]);
-
-        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);
-      }
+    const handler = (date: CalendarDate) => {
+      if (date) setDate(date);
+    };
+
+    EventBus.on("dateSelected", handler);
+
+    return () => {
+      EventBus.off("dateSelected", handler);
     };
-    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;
@@ -103,7 +126,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 [];
 
@@ -121,7 +144,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++) {
@@ -167,7 +190,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) },
       ]
     : [];
 
@@ -256,7 +279,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="absolute w-2 h-2 bg-green-400 rounded-full animate-pulse"
+                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
                   style={{
                     left: `${20 + i * 25}%`,
                     top: `${30 + Math.random() * 40}%`,
@@ -287,7 +310,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-green-400 bg-opacity-30 rounded animate-pulse mx-auto"></div>
+          <div className="w-16 h-8 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
         </CardHeader>
 
         {/* Bar Chart Skeleton */}
@@ -362,7 +385,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
               {Array.from({ length: 4 }).map((_, i) => (
                 <div
                   key={i}
-                  className="absolute w-2 h-2 bg-green-400 rounded-full animate-pulse"
+                  className="absolute w-2 h-2 bg-pr-green rounded-full animate-pulse"
                   style={{
                     left: `${20 + i * 25}%`,
                     top: `${30 + Math.random() * 40}%`,
@@ -378,7 +401,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-green-400 bg-opacity-30 rounded animate-pulse mx-auto"></div>
+            <div className="w-12 h-6 bg-pr-green bg-opacity-30 rounded animate-pulse mx-auto"></div>
           </div>
         </CardContent>
       </Card>
@@ -401,30 +424,22 @@ 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-xl text-white">
+          <CardTitle className="font-persian text-base font-semibold text-white">
             وضعیت زیست‌بوم فناوری و نوآوری
           </CardTitle>
         </CardHeader>
 
-        {/* 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="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">
+          <CardTitle className="font-persian text-sm 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-xl text-white flex justify-between px-4">
+          <CardTitle className="font-persian text-sm text-white flex justify-between px-4">
             تعداد بازیگران
             <span className="font-bold text-3xl">
               {formatNumber(counts.actor_count)}
@@ -433,13 +448,14 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         </CardHeader>
 
         {/* Actor Count Display */}
-        <CardHeader className="text-right text-xl py-2 pb-4 font-bold w-full">
+        <CardHeader className="text-right pt-4 mt-2 pb-2 text-sm font-semibold 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,
@@ -454,55 +470,87 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         </CardContent>
 
         {/* Area Chart Section */}
-        <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">
+        <CardContent className="p-2">
+          <div className="px-4">
+            <CardTitle className="font-persian text-sm font-semibold text-white mb-2">
               روند ایجاد بازیگران در طول سال‌ها
             </CardTitle>
           </div>
-          <div className="h-48">
+          <div className="h-42">
             {processData.length > 0 ? (
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart
+                  accessibilityLayer
                   data={processData}
-                  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+                  margin={{ top: 25, 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
-                    strokeDasharray="3 3"
+                    vertical={false}
                     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
-                    contentStyle={{
-                      backgroundColor: "#374151",
-                      border: "1px solid #6b7280",
-                      borderRadius: "6px",
-                      color: "#f3f4f6",
-                    }}
-                    labelFormatter={(value) =>
-                      `سال ${formatPersianYear(value.toString())}`
-                    }
-                    formatter={(value) => [
-                      formatNumber(value),
-                      "تعداد بازیگران",
-                    ]}
-                  />
+                  <Tooltip cursor={false} content={<></>} />
+
+                  {/* ✅ Use gradient for fill */}
                   <Area
                     type="monotone"
                     dataKey="value"
-                    stroke="#34d399"
-                    fill="rgba(52, 211, 153, 0.25)"
+                    stroke="#3AEA83"
+                    fill="url(#fillDesktop)"
                     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>
@@ -513,7 +561,6 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
             )}
           </div>
         </CardContent>
-
       </Card>
     </div>
   );

app/components/ecosystem/network-graph.tsx

@@ -1,11 +1,19 @@
-import React, { useEffect, useRef, useState, useCallback } from "react";
 import * as d3 from "d3";
-import apiService from "../../lib/api";
+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";
 
-// 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://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";
+
 
 export interface Node {
   id: string;
@@ -44,9 +52,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 {
@@ -56,12 +64,14 @@ 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 }: NetworkGraphProps) {
+export function NetworkGraph({
+  onNodeClick,
+  onLoadingChange,
+}: NetworkGraphProps) {
   const svgRef = useRef<SVGSVGElement | null>(null);
   const [nodes, setNodes] = useState<Node[]>([]);
   const [links, setLinks] = useState<Link[]>([]);
@@ -70,7 +80,21 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
   const [error, setError] = useState<string | null>(null);
   const { token } = useAuth();
 
-  // Ensure component only renders on client side
+  // 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);
+    };
+  }, []);
+
   useEffect(() => {
     if (isBrowser()) {
       const timer = setTimeout(() => setIsMounted(true), 100);
@@ -78,7 +102,27 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
     }
   }, []);
 
-  // Fetch data from API
+  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]
+  );
+
   useEffect(() => {
     if (!isMounted) return;
 
@@ -89,28 +133,45 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
       setIsLoading(true);
       try {
         const res = await apiService.call<any[]>({
-          graph_production_function: {},
+          graph_production_function: {
+            start_date: date.start || null,
+            end_date: date.end || null,
+          },
         });
         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,
         };
 
-        // Create ecosystem nodes
-        const ecosystemNodes: Node[] = data.map((item: any) => ({
-          id: String(item.stageid),
+        // دسته‌بندی‌ها
+        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}`,
           label: item.title,
           category: item.category,
           stageid: item.stageid,
@@ -118,13 +179,16 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
           rawData: item,
         }));
 
-        // Create links (all nodes connected to center)
-        const graphLinks: Link[] = ecosystemNodes.map((node) => ({
-          source: "center",
-          target: node.id,
-        }));
+        // لینک‌ها: مرکز → دسته‌بندی‌ها → نودهای نهایی
+        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 };
+          }),
+        ];
 
-        setNodes([centerNode, ...ecosystemNodes]);
+        setNodes([centerNode, ...categoryNodes, ...finalNodes]);
         setLinks(graphLinks);
       } catch (err: any) {
         if (err.name !== "AbortError") {
@@ -142,43 +206,19 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
       aborted = true;
       controller.abort();
     };
-  }, [isMounted, token]);
+  }, [isMounted, token, getImageUrl, date]);
 
-  // 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")
@@ -196,33 +236,27 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
     feMerge.append("feMergeNode").attr("in", "coloredBlur");
     feMerge.append("feMergeNode").attr("in", "SourceGraphic");
 
-    // Create zoom behavior
+    const container = svg.append("g");
+
     const zoom = d3
       .zoom<SVGSVGElement, unknown>()
-      .scaleExtent([0.8, 2.5]) // Limit zoom out to 1x, zoom in to 2.5x
-      .on("zoom", (event) => {
-        container.attr("transform", event.transform);
-      });
+      .scaleExtent([0.3, 2.5])
+      .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(
@@ -231,16 +265,21 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
           .forceLink<Node, Link>(links)
           .id((d) => d.id)
           .distance(150)
-          .strength(0.1),
+          .strength(0.2)
       )
       .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 ? 40 : 30)),
+        d3.forceCollide().radius((d) => (d.isCenter ? 50 : 35))
       );
 
-    const initialScale = 0.85;
+    // Initial zoom to show entire graph
+    const initialScale = 0.6;
     const initialTranslate = [
       width / 2 - (width / 2) * initialScale,
       height / 2 - (height / 2) * initialScale,
@@ -249,37 +288,69 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
       zoom.transform,
       d3.zoomIdentity
         .translate(initialTranslate[0], initialTranslate[1])
-        .scale(initialScale),
+        .scale(initialScale)
     );
 
-    // Fix center node position
+    // Fix center node
     const centerNode = nodes.find((n) => n.isCenter);
+    const categoryNodes = nodes.filter((n) => !n.isCenter && n.stageid === -1);
+
     if (centerNode) {
-      centerNode.fx = width / 2;
-      centerNode.fy = height / 2;
+      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);
+      });
     }
 
-    // Create links
+    // نودهای نهایی **هیچ 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
     const link = container
       .selectAll(".link")
       .data(links)
       .enter()
-      .append("line")
+      .append("path")
       .attr("class", "link")
       .attr("stroke", "#E2E8F0")
       .attr("stroke-width", 2)
-      .attr("stroke-opacity", 0.6);
+      .attr("stroke-opacity", 0.6)
+      .attr("fill", "none");
 
-    // Create node groups
     const nodeGroup = container
       .selectAll(".node")
       .data(nodes)
       .enter()
       .append("g")
       .attr("class", "node")
-      .style("cursor", "pointer");
+      .style("cursor", (d) => (d.stageid === -1 ? "default" : "pointer"));
 
-    // Add drag behavior
     const drag = d3
       .drag<SVGGElement, Node>()
       .on("start", (event, d) => {
@@ -301,56 +372,100 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
 
     nodeGroup.call(drag);
 
-    // Add node circles/rectangles
     nodeGroup.each(function (d) {
       const group = d3.select(this);
 
-      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.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");
 
-        // 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);
+      //   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", 150)
-            .attr("height", 60)
-            .attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl)
-            .attr("preserveAspectRatio", "xMidYMid slice");
+      //     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");
 
-          rect.attr("fill", `url(#image-${d.id})`);
-        }
-      } else {
-        // Regular nodes as circles
+      //     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 {
         const circle = group
           .append("circle")
           .attr("r", 25)
-          .attr("fill", categoryToColor[d.category] || "8#fff")
+          .attr("fill", categoryToColor[d.category] || "#fff")
           .attr("stroke", "#FFFFFF")
           .attr("stroke-width", 3);
 
-        // Add node image if available
         if (d.imageUrl) {
           const pattern = defs
             .append("pattern")
@@ -367,10 +482,8 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
             .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}`)
@@ -384,20 +497,33 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
       }
     });
 
-    // Add labels below nodes
     const labels = nodeGroup
-      .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");
+    .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");
 
-    // Add hover effects
     nodeGroup
       .on("mouseenter", function (event, d) {
         if (d.isCenter) return;
@@ -419,79 +545,88 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
           .attr("stroke-width", 3);
       });
 
-    // Add click handlers
     nodeGroup.on("click", async function (event, d) {
       event.stopPropagation();
 
-      // Don't handle center node clicks
-      if (d.isCenter) return;
+      // جلوگیری از کلیک روی مرکز و دسته‌بندی‌ها
+      if (d.isCenter || d.stageid === -1) 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 {
-          // Fetch detailed company data
-          const res = await callAPI(d.stageid);
+          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 || [];
 
-          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 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);
-          // Fallback to basic info
-          const basicDetails: CompanyDetails = {
-            id: d.id,
-            label: d.label,
-            category: d.category,
-            stageid: d.stageid,
-            fields: [],
-          };
-          onNodeClick(basicDetails);
+          // Keep the basic details already shown
+        } finally {
+          // Stop loading
+          onLoadingChange?.(false);
         }
       }
     });
 
-    // Update positions on simulation tick
     simulation.on("tick", () => {
-      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!);
+      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}`;
+      });
 
       nodeGroup.attr("transform", (d) => `translate(${d.x},${d.y})`);
     });
 
-    // Cleanup function
     return () => {
       simulation.stop();
     };
-  }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI]);
+  }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI, date]);
 
-  // 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">
@@ -505,10 +640,9 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
     );
   }
 
-  // Don't render on server side
   if (!isMounted) {
     return (
-      <div className="w-full h-full flex items-center justify-center bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]">
+      <div className="w-full h-full flex items-center justify-center bg-transparent">
         <div className="text-white font-persian text-sm">
           در حال بارگذاری...
         </div>
@@ -518,15 +652,12 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
 
   if (isLoading) {
     return (
-      <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 relative bg-transparent">
         <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;
@@ -547,40 +678,25 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
                 <div
                   className="absolute w-16 h-3 bg-gray-600 rounded animate-pulse"
                   style={{
-                    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`,
+                    transform: `rotate(${(i * 360) / 8}deg) translateX(32px)`,
+                    transformOrigin: "left center",
                   }}
                 ></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 relative bg-[linear-gradient(to_bottom_left,#464861,10%,#111628)] overflow-hidden">
-      <svg ref={svgRef} className="w-full h-full" style={{ minHeight: 500 }} />
+    <div className="w-full h-full">
+      <svg
+        ref={svgRef}
+        className="w-full h-full bg-transparent"
+        style={{ cursor: "grab" }}
+      />
     </div>
   );
 }

app/components/ui/Calendar.tsx

@@ -0,0 +1,67 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -14,8 +14,8 @@ const Card = React.forwardRef<
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const CardTitle = React.forwardRef<
     )}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,16 +53,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -73,7 +73,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

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

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

app/components/ui/dialog.tsx

@@ -1,18 +1,18 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "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 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",
+        "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",
         className
       )}
       {...props}
     >
       {children}
-      <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" />
+      <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" />
         <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 space-y-1.5 text-center sm:text-left",
+      "flex flex-col p-4 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,
-  DialogPortal,
-  DialogOverlay,
   DialogClose,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
   DialogDescription,
-}
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

app/components/ui/dropdown-menu.tsx

@@ -1,27 +1,27 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronDown, Circle } from "lucide-react";
+import * as React from "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,11 +34,10 @@ 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>,
@@ -52,9 +51,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -65,32 +64,34 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "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",
+        "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",
         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
+    inset?: boolean;
+    selected?: boolean;
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, selected, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "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",
+      "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",
       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>,
@@ -112,9 +113,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>,
@@ -135,13 +136,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
@@ -153,8 +154,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>,
@@ -165,8 +166,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,
@@ -177,24 +178,43 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+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";
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
+  DropdownMenuButton,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
+  DropdownMenuTrigger,
+};

app/components/ui/form-field.tsx

@@ -3,6 +3,7 @@ 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;
@@ -65,12 +66,6 @@ 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}
@@ -82,39 +77,14 @@ export function TextField({
           maxLength={maxLength}
           minLength={minLength}
           className={cn(
-            "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",
+            "w-full h-12 outline-none bg-white text-base text-[#5F6284] px-4 font-persian text-right transition-all duration-200",
             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>
       )}
@@ -217,17 +187,19 @@ export function PasswordField({
           autoComplete={autoComplete}
           minLength={minLength}
           className={cn(
-            "w-full h-12 px-4 pl-10 font-persian text-right transition-all duration-200",
+            "w-full h-12 px-4 pl-10 bg-white text-base text-[#5F6284] 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-foreground transition-colors"
+          className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-black transition-colors"
           tabIndex={-1}
         >
           {showPassword ? (
@@ -318,26 +290,17 @@ export function CheckboxField({
 
   return (
     <div className={cn("space-y-2", containerClassName)}>
-      <div className="flex items-center gap-2">
-        <input
+      <div className="flex flex-row-reverse items-center gap-2">
+          <CustomCheckbox 
           id={id}
-          type="checkbox"
           checked={checked}
-          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,
-          )}
-        />
+          onChange={onChange}
+          />
         {label && (
           <Label
             htmlFor={id}
             className={cn(
-              "text-sm font-persian cursor-pointer",
+              "text-sm font-persian font-light text-white cursor-pointer",
               error ? "text-destructive" : "text-foreground",
               disabled && "opacity-50 cursor-not-allowed",
               required &&

app/components/ui/funnel-chart.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { formatNumber } from "~/lib/utils";
+
+interface FunnelData {
+  name: string;
+  value: number;
+  label: string;
+  percentage?: string;
+}
+
+interface FunnelChartProps {
+  data: FunnelData[];
+  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));
+  const toPercent = (value: number) => {
+    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">
+          {title}
+        </h3>
+      )}
+
+      <div className="flex px-4 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-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="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>
+          </div>
+        </div>
+
+        {/* Funnel Bars */}
+        <div className="flex flex-col items-center space-y-1 gap-2 w-full max-w-md">
+          {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">
+                    {item.label}
+                  </div>
+                <div className="flex items-center gap-10 w-full cols-start-2  justify-center">
+                  <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]}`}}
+                    >
+                      <span className="text-pr-gray text-base font-semibold">
+                        {item.value.toLocaleString('fa-IR')}
+                      </span>
+                    </div>
+                    <div style={{ width: `${(100 - barWidth) / 2}%` }} />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </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-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="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>
+              );
+            })()}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/ui/metric-card.tsx

@@ -0,0 +1,48 @@
+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/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "~/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground 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 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

app/components/ui/progress.tsx

@@ -1,26 +1,51 @@
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 
-import { cn } from "~/lib/utils"
+import { cn, formatNumber } from "~/lib/utils"
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof 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>
-))
+>(({ 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>
+  )
+})
 Progress.displayName = ProgressPrimitive.Root.displayName
 
 export { Progress }

app/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "~/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-accent animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

app/components/ui/table.tsx

@@ -4,11 +4,12 @@ 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, ...props }, ref) => (
-    <div className={cn("relative w-full", containerClassName)}>
+  ({ className, containerClassName, containerRef, ...props }, ref) => (
+    <div ref={containerRef} 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

@@ -16,17 +16,23 @@ interface TabsProps {
   children: React.ReactNode;
 }
 
-export function Tabs({ defaultValue, value, onValueChange, className, children }: TabsProps) {
+export function Tabs({
+  defaultValue,
+  value,
+  onValueChange,
+  className,
+  children,
+}: TabsProps) {
   const [internalValue, setInternalValue] = useState(defaultValue || "");
-  
+
   const currentValue = value ?? internalValue;
   const handleValueChange = onValueChange ?? setInternalValue;
 
   return (
-    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
-      <div className={cn("w-full", className)}>
-        {children}
-      </div>
+    <TabsContext.Provider
+      value={{ value: currentValue, onValueChange: handleValueChange }}
+    >
+      <div className={cn("w-full", className)}>{children}</div>
     </TabsContext.Provider>
   );
 }
@@ -38,7 +44,12 @@ interface TabsListProps {
 
 export function TabsList({ className, children }: TabsListProps) {
   return (
-    <div className={cn("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", className)}>
+    <div
+      className={cn(
+        "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+        className,
+      )}
+    >
       {children}
     </div>
   );
@@ -51,7 +62,12 @@ interface TabsTriggerProps {
   children: React.ReactNode;
 }
 
-export function TabsTrigger({ value, className, disabled, children }: TabsTriggerProps) {
+export function TabsTrigger({
+  value,
+  className,
+  disabled,
+  children,
+}: TabsTriggerProps) {
   const context = useContext(TabsContext);
   if (!context) throw new Error("TabsTrigger must be used within Tabs");
 
@@ -64,8 +80,10 @@ export function TabsTrigger({ value, className, disabled, children }: TabsTrigge
       onClick={() => !disabled && context.onValueChange(value)}
       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-background text-foreground shadow-sm" : "hover:bg-muted/50",
-        className
+        isActive
+          ? "bg-pr-gray text-foreground shadow-sm"
+          : "hover:bg-muted/50",
+        className,
       )}
     >
       {children}
@@ -86,7 +104,12 @@ export function TabsContent({ value, className, children }: TabsContentProps) {
   if (context.value !== value) return null;
 
   return (
-    <div className={cn("mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", className)}>
+    <div
+      className={cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+    >
       {children}
     </div>
   );

app/components/ui/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "~/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...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.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

app/components/ui/truncatedText.tsx

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -39,6 +39,19 @@ class ApiService {
     this.token = null;
   }
 
+  private handleSessionExpired(message?: string) {
+    this.clearToken();
+    localStorage.removeItem("auth_token");
+    localStorage.removeItem("auth_user");
+    try {
+      sessionStorage.setItem("sessionExpired", "1");
+    } catch {}
+    if (message) {
+      toast.error(message);
+    }
+    window.location.href = "/login";
+  }
+
   private async request<T = any>(
     endpoint: string,
     options: RequestInit = {},
@@ -66,6 +79,11 @@ class ApiService {
       const response = await fetch(url, config);
       const data: ApiResponse<T> = await response.json();
 
+      if (data.errorCode === 301) {
+        this.handleSessionExpired("نشست شما منقضی شده است. لطفا دوباره وارد شوید.");
+        throw new Error(data.message || "Session expired");
+      }
+
       // Handle different response states
       if (!response.ok) {
         throw new Error(
@@ -91,13 +109,7 @@ class ApiService {
 
       // Handle authentication errors
       if (error instanceof Error && error.message.includes("401")) {
-        this.clearToken();
-        localStorage.removeItem("auth_token");
-        localStorage.removeItem("auth_user");
-        try {
-          sessionStorage.setItem("sessionExpired", "1");
-        } catch {}
-        window.location.href = "/login";
+        this.handleSessionExpired();
         throw error;
       }
 
@@ -128,6 +140,11 @@ class ApiService {
       const response = await fetch(fullUrl, config);
       const apiData: ApiResponse<T> = await response.json();
 
+      if (apiData.errorCode === 301) {
+        this.handleSessionExpired("نشست شما منقضی شده است. لطفا دوباره وارد شوید.");
+        throw new Error(apiData.message || "Session expired");
+      }
+
       if (!response.ok) {
         throw new Error(apiData?.message || `HTTP error! status: ${response.status}`);
       }
@@ -145,10 +162,24 @@ 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, {
@@ -269,22 +300,6 @@ class ApiService {
     return this.get("/projects");
   }
 
-  public async getProject(id: number) {
-    return this.get(`/projects/${id}`);
-  }
-
-  public async createProject(data: any) {
-    return this.post("/projects", data);
-  }
-
-  public async updateProject(id: number, data: any) {
-    return this.put(`/projects/${id}`, data);
-  }
-
-  public async deleteProject(id: number) {
-    return this.delete(`/projects/${id}`);
-  }
-
   // Dashboard methods
   public async getDashboardStats() {
     return this.get("/dashboard/stats");

app/lib/utils.ts

@@ -1,4 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
+import EventEmitter from "events";
+import moment from "moment-jalaali";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
@@ -6,8 +8,129 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export const formatNumber = (value: string | number) => {
-  if (!value) return "0";
+  // 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);
 };
+
+export const formatCurrency = (amount: string | number) => {
+  if (!amount) return "0 ریال";
+  // Remove commas and convert to number
+  const numericAmount =
+    typeof amount === "string" ? parseFloat(amount.replace(/,/g, "")) : amount;
+  if (isNaN(numericAmount)) return "0 ریال";
+  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 });
+  if (val == null) return val;
+  if (
+    typeof val === "string" &&
+    /^\d{4}[-/]\d{2}[-/]\d{2}( \d{2}:\d{2}(:\d{2})?)?$/.test(val)
+  ) {
+    return moment(val, "YYYY-MM-DD HH:mm:ss").format("YYYY/MM/DD");
+  }
+  if (
+    typeof val === "number" ||
+    (typeof val === "string" && /^-?\d+$/.test(val))
+  ) {
+    return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
+  }
+  return val;
+};
+
+export const EventBus = new EventEmitter();

app/routes.ts

@@ -1,4 +1,4 @@
-import { type RouteConfig, index, route } from "@react-router/dev/routes";
+import { type RouteConfig, route } from "@react-router/dev/routes";
 
 export default [
   route("login", "routes/login.tsx"),
@@ -7,13 +7,25 @@ export default [
   route(
     "dashboard/innovation-basket/process-innovation",
     "routes/innovation-basket.process-innovation.tsx"
+  ),
+   route(
+    "dashboard/innovation-basket/product-innovation",
+    "routes/innovation-basket.product-innovation.tsx"
+  ),
+  route(
+    "dashboard/innovation-basket/green-innovation",
+    "routes/green-innovation.tsx"
+  ),
+  route(
+    "/dashboard/innovation-basket/internal-innovation",
+    "routes/innovation-built-insider-page.tsx"
   ),
   route(
     "/dashboard/innovation-basket/digital-innovation",
     "routes/digital-innovation-page.tsx"
   ),
-  route("projects", "routes/projects.tsx"),
   route("dashboard/ecosystem", "routes/ecosystem.tsx"),
+  route("dashboard/manage-ideas-tech", "routes/manage-ideas-tech-page.tsx"),
   route("404", "routes/404.tsx"),
   route("unauthorized", "routes/unauthorized.tsx"),
   route("*", "routes/$.tsx"), // Catch-all route for 404s

app/routes/ecosystem.tsx

@@ -1,27 +1,33 @@
-import type { Route } from "./+types/ecosystem";
+import moment from "moment-jalaali";
 import React from "react";
 import { ProtectedRoute } from "~/components/auth/protected-route";
 import { DashboardLayout } from "~/components/dashboard/layout";
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { InfoPanel } from "~/components/ecosystem/info-panel";
+import { NetworkGraph } from "~/components/ecosystem/network-graph";
+import { Card, CardContent } 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 moment from "moment-jalaali";
+import type { Route } from "./+types/ecosystem";
 
 // 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://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 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 [
@@ -55,10 +61,20 @@ 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
@@ -69,16 +85,19 @@ export default function EcosystemPage() {
   return (
     <ProtectedRoute requireAuth={true}>
       <DashboardLayout title="زیست بوم فناوری">
-        <div className="p-4 lg:p-6">
+        <div>
           <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">
-                <CardContent className="p-0 h-full">
-                  <NetworkGraph onNodeClick={setSelectedCompany} />
+              <Card className="h-full overflow-hidden bg-transparent border-[#3F415A]">
+                <CardContent className="p-0 h-full bg-transparent">
+                  <NetworkGraph
+                    onNodeClick={handleNodeClick}
+                    onLoadingChange={handleLoadingChange}
+                  />
                 </CardContent>
               </Card>
             </div>
@@ -90,104 +109,146 @@ export default function EcosystemPage() {
           open={!!selectedCompany}
           onOpenChange={(open) => !open && closeDialog()}
         >
-          <DialogContent className="font-persian max-w-6xl max-h-[75vh] overflow-y-auto bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
+          <DialogContent className="font-persian max-w-6xl min-h-max  bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
             <DialogHeader>
-              <DialogTitle className="text-right border-b-2   border-gray-600 py-2 mr-4 text-xl">
+              <DialogTitle className="text-right border-b-2 border-gray-600 pt-2 pb-4 mr-4 text-sm font-semibold">
                 معرفی
                 <span> {selectedCompany?.category}</span>
               </DialogTitle>
-              <DialogDescription className="text-center text-green-400"></DialogDescription>
             </DialogHeader>
 
-            <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>
+            {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>
                 </div>
-                {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) => (
+                {/* 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) => (
                       <div
                         key={index}
                         className="flex justify-between items-center rounded-lg"
                       >
-                        <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 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>
                       </div>
                     ))}
                   </div>
-                ) : (
-                  <div className="text-gray-500 font-persian text-sm">
-                    اطلاعات تکمیلی در دسترس نیست
-                  </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>
+                  {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>
+            )}
           </DialogContent>
         </Dialog>
       </DashboardLayout>

app/routes/green-innovation.tsx

@@ -0,0 +1,17 @@
+import { ProtectedRoute } from "~/components/auth/protected-route";
+import GreenInnovationPage from "~/components/dashboard/project-management/green-innovation-page";
+
+export function meta() {
+  return [
+    { title: "نوآوری در فرآیند - سیستم مدیریت فناوری و نوآوری" },
+    { name: "description", content: "مدیریت پروژه‌های نوآوری در فرآیند" },
+  ];
+}
+
+export default function GreenInnovation() {
+  return (
+    <ProtectedRoute requireAuth={true}>
+      <GreenInnovationPage />
+    </ProtectedRoute>
+  );
+}

app/routes/innovation-basket.product-innovation.tsx

@@ -0,0 +1,17 @@
+import { ProductInnovationPage } from "~/components/dashboard/project-management/product-innovation-page";
+import { ProtectedRoute } from "~/components/auth/protected-route";
+
+export function meta() {
+  return [
+    { title: "نوآوری محصول - سیستم مدیریت فناوری و نوآوری" },
+    { name: "description", content: "مدیریت پروژه‌های نوآوری محصول" },
+  ];
+}
+
+export default function ProductInnovation() {
+  return (
+    <ProtectedRoute requireAuth={true}>
+      <ProductInnovationPage />
+    </ProtectedRoute>
+  );
+}

app/routes/innovation-built-insider-page.tsx

@@ -0,0 +1,17 @@
+import { ProtectedRoute } from "~/components/auth/protected-route";
+import InnovationBuiltInsidePage from "~/components/dashboard/project-management/innovation-built-inside-page";
+
+export function meta() {
+    return [
+        { title: "نوآوری در فرآیند - سیستم مدیریت فناوری و نوآوری" },
+        { name: "description", content: "مدیریت پروژه‌های نوآوری در فرآیند" },
+    ];
+}
+
+export default function InnovationBuiltInside() {
+    return (
+        <ProtectedRoute requireAuth={true}>
+            <InnovationBuiltInsidePage />
+        </ProtectedRoute>
+    );
+}

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

@@ -0,0 +1,17 @@
+import { ProtectedRoute } from "~/components/auth/protected-route";
+import { ManageIdeasTechPage } from "~/components/dashboard/project-management/mange-ideas-tech-page";
+
+export function meta() {
+  return [
+    { title: "مدیریت فناوری و ایده ها" },
+    { name: "description", content: "مدیریت پروژه‌های فناوری و نوآوری" },
+  ];
+}
+
+export default function ManageIdeasTech() {
+  return (
+    <ProtectedRoute requireAuth={true}>
+      <ManageIdeasTechPage />
+    </ProtectedRoute>
+  );
+}

app/routes/projects.tsx

@@ -1,18 +0,0 @@
-import type { Route } from "./+types/projects";
-import { ProjectsPage } from "~/components/dashboard/projects/projects-page";
-import { ProtectedRoute } from "~/components/auth/protected-route";
-
-export function meta({}: Route.MetaArgs) {
-  return [
-    { title: "پروژه‌ها - سیستم مدیریت فناوری و نوآوری" },
-    { name: "description", content: "مدیریت پروژه‌های فناوری و نوآوری" },
-  ];
-}
-
-export default function Projects() {
-  return (
-    <ProtectedRoute requireAuth={true}>
-      <ProjectsPage />
-    </ProtectedRoute>
-  );
-}

app/types/util.type.ts

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

package.json

@@ -4,7 +4,7 @@
   "type": "module",
   "scripts": {
     "build": "react-router build",
-    "dev": "react-router dev",
+    "dev": "react-router dev --port 3001",
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc"
   },
@@ -13,10 +13,12 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-router/node": "^7.7.0",
     "@react-router/serve": "^7.7.1",
     "@types/d3": "^7.4.3",
@@ -24,6 +26,7 @@
     "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",
@@ -33,11 +36,13 @@
     "react-hot-toast": "^2.5.2",
     "react-router": "^7.7.0",
     "recharts": "^2.15.4",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "xlsx-js-style": "^1.2.0"
   },
   "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

@@ -0,0 +1,426 @@
+<!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

@@ -0,0 +1,116 @@
+/**
+*
+*	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

@@ -0,0 +1,463 @@
+<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

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

tailwind.config.js

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