40b5ad6e3c
* Add ecosystem page with network graph and company info panel Co-authored-by: sd.eed1381 <sd.eed1381@gmail.com> * Add unpaid company highlighting to network graph with toggle Co-authored-by: sd.eed1381 <sd.eed1381@gmail.com> * fix id something * remove the useless files * update the graph * update the graph,fix the api ,also add some style and filters * Refactor process impacts chart to use new CustomBarChart component (#3) Co-authored-by: Cursor Agent <cursoragent@cursor.com> * fix somestyle , add charts in ecosystem --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com>
69 lines
2.7 KiB
TypeScript
69 lines
2.7 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 { Checkbox } from "~/components/ui/checkbox";
|
||
|
||
export function meta({}: Route.MetaArgs) {
|
||
return [
|
||
{ title: "زیست بوم فناوری" },
|
||
{ name: "description", content: "نمایش زیست بوم فناوری با گراف شبکهای شرکتها" },
|
||
];
|
||
}
|
||
|
||
export default function EcosystemPage() {
|
||
const [selectedCompany, setSelectedCompany] = React.useState<
|
||
| { id: string; label?: string; [key: string]: unknown }
|
||
| null
|
||
>(null);
|
||
const [highlightUnpaid, setHighlightUnpaid] = React.useState(false);
|
||
|
||
const closeDialog = () => setSelectedCompany(null);
|
||
|
||
return (
|
||
<ProtectedRoute requireAuth={true}>
|
||
<DashboardLayout title="زیست بوم فناوری">
|
||
<div className="p-4 lg:p-6">
|
||
<div className="grid grid-cols-1 items-start lg:grid-cols-12 gap-4">
|
||
|
||
<div className="lg:col-span-4">
|
||
{//<InfoPanel selectedCompany={selectedCompany} />
|
||
}
|
||
</div>
|
||
|
||
<div className="lg:col-span-8">
|
||
<Card className="h-[70vh] lg:h-[calc(100vh-220px)]">
|
||
<CardHeader className="pb-2 flex flex-row items-center justify-between gap-4">
|
||
<CardTitle className="font-persian text-base">گراف شبکهای شرکتها</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="p-0 h-full">
|
||
<NetworkGraph onNodeClick={setSelectedCompany} highlightUnpaid={highlightUnpaid} />
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
{/* Node info dialog */}
|
||
<Dialog open={!!selectedCompany} onOpenChange={(open) => !open && closeDialog()}>
|
||
<DialogContent className="font-persian">
|
||
<DialogHeader>
|
||
<DialogTitle>{selectedCompany?.label || "اطلاعات شرکت"}</DialogTitle>
|
||
<DialogDescription>
|
||
شناسه: {selectedCompany?.id}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<div className="space-y-2 text-sm">
|
||
<p>Test</p>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</DashboardLayout>
|
||
</ProtectedRoute>
|
||
);
|
||
} |