Saeed Abadiyan
a5ae3cc813
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>
248 lines
10 KiB
TypeScript
248 lines
10 KiB
TypeScript
import type { Route } from "./+types/ecosystem";
|
||
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 {
|
||
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";
|
||
|
||
// 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 the CompanyDetails type
|
||
import type { CompanyDetails } from "~/components/ecosystem/network-graph";
|
||
import { formatNumber } from "~/lib/utils";
|
||
import { Hexagon } from "lucide-react";
|
||
|
||
export function meta({}: Route.MetaArgs) {
|
||
return [
|
||
{ title: "زیست بوم فناوری" },
|
||
{
|
||
name: "description",
|
||
content: "نمایش زیست بوم فناوری با گراف شبکهای شرکتها",
|
||
},
|
||
];
|
||
}
|
||
|
||
moment.loadPersian({ usePersianDigits: true });
|
||
|
||
function handleValue(val: any): any {
|
||
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 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
|
||
const getImageUrl = (stageid: number) => {
|
||
return `${API_BASE_URL}/getimage?stageID=${stageid}&nameOrID=image&token=${token?.accessToken}`;
|
||
};
|
||
|
||
return (
|
||
<ProtectedRoute requireAuth={true}>
|
||
<DashboardLayout title="زیست بوم فناوری">
|
||
<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 bg-transparent border-[#3F415A]">
|
||
<CardContent className="p-0 h-full bg-transparent">
|
||
<NetworkGraph onNodeClick={handleNodeClick} onLoadingChange={handleLoadingChange} />
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Node info dialog */}
|
||
<Dialog
|
||
open={!!selectedCompany}
|
||
onOpenChange={(open) => !open && closeDialog()}
|
||
>
|
||
<DialogContent className="font-persian max-w-6xl min-h-max bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
|
||
<DialogHeader>
|
||
<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>
|
||
</DialogHeader>
|
||
|
||
{isDialogLoading ? (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 p-4 gap-6">
|
||
{/* Right Column - Loading Skeleton */}
|
||
<div className="space-y-4 p-6 border-l-2 border-gray-600">
|
||
{/* Company Image & Title Skeleton */}
|
||
<div className="flex justify-between px-10 items-center mb-4">
|
||
<div className="h-8 bg-gray-600 rounded animate-pulse w-48"></div>
|
||
<div className="w-12 h-12 bg-gray-600 rounded-2xl animate-pulse"></div>
|
||
</div>
|
||
{/* Description Skeleton */}
|
||
<div className="p-4 rounded-lg space-y-2">
|
||
<div className="h-4 bg-gray-600 rounded animate-pulse w-full"></div>
|
||
<div className="h-4 bg-gray-600 rounded animate-pulse w-5/6"></div>
|
||
<div className="h-4 bg-gray-600 rounded animate-pulse w-4/6"></div>
|
||
<div className="h-4 bg-gray-600 rounded animate-pulse w-3/6"></div>
|
||
</div>
|
||
</div>
|
||
{/* Left Column - Loading Skeleton */}
|
||
<div className="space-y-2">
|
||
<div className="h-6 bg-gray-600 rounded animate-pulse w-32"></div>
|
||
<div className="space-y-3 px-2">
|
||
{Array.from({ length: 6 }).map((_, index) => (
|
||
<div
|
||
key={index}
|
||
className="flex justify-between items-center rounded-lg"
|
||
>
|
||
<div className="flex items-center gap-1">
|
||
<div className="h-4 w-4 bg-gray-600 rounded animate-pulse"></div>
|
||
<div className="h-4 bg-gray-600 rounded animate-pulse w-24"></div>
|
||
</div>
|
||
<div className="h-4 bg-gray-600 rounded animate-pulse w-20"></div>
|
||
</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>
|
||
</ProtectedRoute>
|
||
);
|
||
}
|