add loading in graph ,also fix the graph

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

@@ -548,7 +548,7 @@ export function DigitalInnovationPage() {
           index: greenBoxes + 1,
           style: `linear-gradient(
             to right,
-            oklch(76.5% 0.177 163.223) 0%, 
+            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%

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

@@ -616,22 +616,22 @@ export function ProductInnovationPage() {
             size="sm"
             onClick={() => {
               handleProjectDetails(item)}}
-            className="text-emerald-400 underline underline-offset-4 font-ligth text-base hover:bg-emerald-500/20 p-2 h-auto"
+            className="text-emerald-400 underline underline-offset-4 font-ligth text-sm hover:bg-emerald-500/20 p-2 h-auto"
           >
             جزئیات بیشتر
           </Button>
         );
       case "project_no":
         return (
-          <Badge variant="outline" className="font-mono text-base font-light">
+          <Badge variant="outline" className="font-mono text-sm font-light">
             {String(value)}
           </Badge>
         );
       case "title":
-        return <span className="font-light text-base 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 text-base font-light gap-1">
+          <div className="flex items-center text-sm font-light gap-1">
             <Badge
               variant={statusColor(value as projectStatus)}
               className="font-semibold text-base border-2 p-0 block w-2 h-2 rounded-full"
@@ -652,7 +652,7 @@ export function ProductInnovationPage() {
           </Badge>
         );
       default:
-        return <span className="text-white text-base font-light">{String(value) || "-"}</span>;
+        return <span className="text-white text-sm font-light">{String(value) || "-"}</span>;
     }
   };
 

app/components/dashboard/sidebar.tsx

@@ -8,6 +8,9 @@ import {
   Radar,
   Settings,
   Star,
+  Workflow,
+  DiscAlbum,
+  LucideLightbulb
 } from "lucide-react";
 import React, { useState } from "react";
 import { Link, useLocation } from "react-router";
@@ -95,16 +98,10 @@ const menuItems: MenuItem[] = [
   {
     id: "ideas",
     label: "ایده‌های فناوری و نوآوری",
-    icon: House,
+    icon: LucideLightbulb,
     href: "/dashboard/manage-ideas-tech",
   },
-  {
+    {
-    id: "top-innovations",
-    label: "نوآور برتر",
-    icon: Star,
-    href: "/dashboard/top-innovations",
-  },
-  {
     id: "strategic-alignment",
     label: "میزان انطباق راهبردی",
     icon: null,

app/components/ecosystem/info-panel.tsx

@@ -256,7 +256,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 +287,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         {/* Actor Count Skeleton */}
         <CardHeader className="text-center pt-0 pb-4">
           <div className="w-36 h-5  rounded animate-pulse mx-auto mb-2"></div>
-          <div className="w-16 h-8 bg-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 +362,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 +378,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
         <CardContent className="pt-0 pb-6">
           <div className="bg-[rgba(255,255,255,0.1)] rounded-lg p-4 text-center">
             <div className="w-28 h-4 bg-gray-600 rounded animate-pulse mx-auto mb-1"></div>
-            <div className="w-12 h-6 bg-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>

app/components/ecosystem/network-graph.tsx

@@ -43,6 +43,7 @@ export interface CompanyDetails {
 
 export interface NetworkGraphProps {
   onNodeClick?: (node: CompanyDetails) => void;
+  onLoadingChange?: (loading: boolean) => void;
 }
 
 function parseApiResponse(raw: any): any[] {
@@ -58,7 +59,7 @@ 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[]>([]);
@@ -441,6 +442,19 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
       if (d.isCenter) return;
 
       if (onNodeClick && d.stageid) {
+        // Open dialog immediately with basic info
+        const basicDetails: CompanyDetails = {
+          id: d.id,
+          label: d.label,
+          category: d.category,
+          stageid: d.stageid,
+          fields: [],
+        };
+        onNodeClick(basicDetails);
+        
+        // Start loading
+        onLoadingChange?.(true);
+        
         try {
           const res = await callAPI(d.stageid);
           const responseData = JSON.parse(res.data);
@@ -473,14 +487,10 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
           onNodeClick(companyDetails);
         } catch (error) {
           console.error("Failed to fetch company details:", error);
-          const basicDetails: CompanyDetails = {
+          // Keep the basic details already shown
-            id: d.id,
+        } finally {
-            label: d.label,
+          // Stop loading
-            category: d.category,
+          onLoadingChange?.(false);
-            stageid: d.stageid,
-            fields: [],
-          };
-          onNodeClick(basicDetails);
         }
       }
     });

app/components/ui/table.tsx

@@ -4,7 +4,7 @@ import { cn } from "~/lib/utils"
 
 interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
   containerClassName?: string
-  containerRef?: React.RefObject<HTMLDivElement>
+  containerRef?: React.RefObject<HTMLDivElement | null>
 }
 
 const Table = React.forwardRef<HTMLTableElement, TableProps>(

app/routes/ecosystem.tsx

@@ -56,10 +56,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
@@ -70,7 +80,7 @@ export default function EcosystemPage() {
   return (
     <ProtectedRoute requireAuth={true}>
       <DashboardLayout title="زیست بوم فناوری">
-        <div className="">
+        <div>
           <div className="grid grid-cols-1 items-start lg:grid-cols-12 gap-4">
             <div className="lg:col-span-4">
               <InfoPanel selectedCompany={selectedCompany} />
@@ -79,7 +89,7 @@ export default function EcosystemPage() {
             <div className="lg:col-span-8 h-full">
               <Card className="h-full overflow-hidden bg-transparent border-[#3F415A]">
                 <CardContent className="p-0 h-full bg-transparent">
-                  <NetworkGraph onNodeClick={setSelectedCompany} />
+                  <NetworkGraph onNodeClick={handleNodeClick} onLoadingChange={handleLoadingChange} />
                 </CardContent>
               </Card>
             </div>
@@ -91,7 +101,7 @@ 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 pt-2 pb-4 mr-4 text-sm font-semibold">
                 معرفی
@@ -99,98 +109,136 @@ export default function EcosystemPage() {
               </DialogTitle>
             </DialogHeader>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            {isDialogLoading ? (
-              {/* Right Column - Description */}
+              <div className="grid grid-cols-1 md:grid-cols-2 p-4 gap-6">
-              <div className="space-y-4 p-6 border-l-2 border-gray-600">
+                {/* Right Column - Loading Skeleton */}
-                {/* Company Image */}
+                <div className="space-y-4 p-6 border-l-2 border-gray-600">
-                <div className="flex justify-between px-10 items-center text-3xl font-bold mb-4">
+                  {/* Company Image & Title Skeleton */}
-                  {selectedCompany?.label || ""}
+                  <div className="flex justify-between px-10 items-center mb-4">
-                  {selectedCompany?.stageid && token?.accessToken ? (
+                    <div className="h-8 bg-gray-600 rounded animate-pulse w-48"></div>
-                    <img
+                    <div className="w-12 h-12 bg-gray-600 rounded-2xl animate-pulse"></div>
-                      src={getImageUrl(selectedCompany.stageid)}
+                  </div>
-                      alt={selectedCompany?.label || ""}
+                  {/* Description Skeleton */}
-                      className="w-12 h-12 object-cover rounded-2xl"
+                  <div className="p-4 rounded-lg space-y-2">
-                      onError={(e) => {
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-full"></div>
-                        // Hide image and show fallback on error
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-5/6"></div>
-                        e.currentTarget.style.display = "none";
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-4/6"></div>
-                        if (e.currentTarget.nextSibling) {
+                    <div className="h-4 bg-gray-600 rounded animate-pulse w-3/6"></div>
-                          (
-                            e.currentTarget.nextSibling as HTMLElement
-                          ).style.display = "flex";
-                        }
-                      }}
-                    />
-                  ) : null}
-                  <div
-                    className="w-24 h-24 rounded-full bg-gray-600 border-4 border-green-400 flex items-center justify-center"
-                    style={{
-                      display:
-                        selectedCompany?.stageid && token?.accessToken
-                          ? "none"
-                          : "flex",
-                    }}
-                  >
-                    <svg
-                      className="w-10 h-10 text-gray-400"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
-                      />
-                    </svg>
                   </div>
                 </div>
-                {selectedCompany?.description ? (
+                {/* Left Column - Loading Skeleton */}
-                  <div className="p-4  rounded-lg">
+                <div className="space-y-2">
-                    <p className="font-persian text-sm font-normal leading-relaxed">
+                  <div className="h-6 bg-gray-600 rounded animate-pulse w-32"></div>
-                      {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) => (
+                    {Array.from({ length: 6 }).map((_, 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">
+                        <div className="flex items-center gap-1">
-                          <Hexagon className="text-pr-green h-4 w-4" />
+                          <div className="h-4 w-4 bg-gray-600 rounded animate-pulse"></div>
-                          {field.N}:
+                          <div className="h-4 bg-gray-600 rounded animate-pulse w-24"></div>
-                        </span>
+                        </div>
-                        <span className="text-right min-w-1/3">
+                        <div className="h-4 bg-gray-600 rounded animate-pulse w-20"></div>
-                          <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>
-                  <div className="text-gray-500 font-persian text-sm">
-                    اطلاعات تکمیلی در دسترس نیست
-                  </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>