refactor_#2 (#13)
Reviewed-on: https://git.pelekan.org/Saeed0920/inogen/pulls/13 Co-authored-by: saeed0920 <sd.eed1381@gmail.com> Co-committed-by: saeed0920 <sd.eed1381@gmail.com>
This commit is contained in:
parent
efe32f8084
commit
aed286660a
23
app/app.css
23
app/app.css
|
|
@ -37,6 +37,7 @@
|
|||
--color-pr-green : #3AEA83;
|
||||
--color-pr-blue : #69C8EA;
|
||||
--color-pr-red : #F76276;
|
||||
--color-pr-gray : #3F415A;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -246,23 +247,6 @@ html[dir="rtl"] 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 */
|
||||
|
|
@ -434,20 +418,15 @@ html[dir="rtl"] body {
|
|||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
|
|||
import toast from "react-hot-toast";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
import { BaseCard } from "~/components/ui/base-card";
|
||||
import { Checkbox } from "~/components/ui/checkbox";
|
||||
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
|
||||
import {
|
||||
|
|
@ -36,6 +36,7 @@ import {
|
|||
import apiService from "~/lib/api";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { DashboardLayout } from "../layout";
|
||||
import { Card , CardContent} from "~/components/ui/card";
|
||||
|
||||
moment.loadPersian({ usePersianDigits: true });
|
||||
interface ProcessInnovationData {
|
||||
|
|
@ -49,6 +50,11 @@ interface ProcessInnovationData {
|
|||
amount_currency_reduction: string;
|
||||
Reduce_rate_failure: string;
|
||||
observer: string;
|
||||
// optional detailed fields returned by API
|
||||
project_description?: string;
|
||||
start_date?: string;
|
||||
done_date?: string;
|
||||
approved_budget?: string;
|
||||
}
|
||||
|
||||
interface ProjectStats {
|
||||
|
|
@ -152,7 +158,7 @@ export function ProcessInnovationPage() {
|
|||
stats.productionStopsPreventionSum
|
||||
),
|
||||
description: "تن افزایش یافته",
|
||||
icon: <CirclePause />,
|
||||
icon: CirclePause,
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
bottleneckremoval: {
|
||||
|
|
@ -160,7 +166,7 @@ export function ProcessInnovationPage() {
|
|||
title: "رفع گلوگاه",
|
||||
value: formatNumber(stats.bottleneckRemovalCount),
|
||||
description: "تعداد رفع گلوگاه",
|
||||
icon: <Funnel />,
|
||||
icon: Funnel,
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
currencyreduction: {
|
||||
|
|
@ -170,7 +176,7 @@ export function ProcessInnovationPage() {
|
|||
stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
|
||||
),
|
||||
description: "دلار کاهش یافته",
|
||||
icon: <DollarSign />,
|
||||
icon: DollarSign ,
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
frequentfailuresreduction: {
|
||||
|
|
@ -181,7 +187,7 @@ export function ProcessInnovationPage() {
|
|||
stats.frequentFailuresReductionSum
|
||||
),
|
||||
description: "مجموع درصد کاهش خرابی",
|
||||
icon: <Wrench />,
|
||||
icon: Wrench,
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
});
|
||||
|
|
@ -528,7 +534,7 @@ export function ProcessInnovationPage() {
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleProjectDetails(item)}
|
||||
className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
|
||||
className="text-pr-green hover:text-emerald-300 underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
|
||||
>
|
||||
جزئیات بیشتر
|
||||
</Button>
|
||||
|
|
@ -541,18 +547,18 @@ export function ProcessInnovationPage() {
|
|||
);
|
||||
case "project_no":
|
||||
return (
|
||||
<Badge variant="outline" className="font-mono">
|
||||
<Badge variant="outline" className="font-normal text-sm">
|
||||
{String(value)}
|
||||
</Badge>
|
||||
);
|
||||
case "title":
|
||||
return <span className="font-medium text-white">{String(value)}</span>;
|
||||
return <span className="font-normal text-sm text-white">{String(value)}</span>;
|
||||
case "project_status":
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<Badge
|
||||
variant={statusColor(value)}
|
||||
className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
|
||||
variant={statusColor(value as projectStatus)}
|
||||
className="font-normal text-base border-2 p-0 block w-2 h-2 rounded-full"
|
||||
style={{
|
||||
border: "none",
|
||||
}}
|
||||
|
|
@ -562,7 +568,7 @@ export function ProcessInnovationPage() {
|
|||
);
|
||||
case "project_rating":
|
||||
return (
|
||||
<Badge variant="outline" className="text-lg text-center border-none">
|
||||
<Badge variant="outline" className="text-base font-semibold text-center border-none">
|
||||
{formatNumber(String(value))}
|
||||
</Badge>
|
||||
);
|
||||
|
|
@ -590,11 +596,7 @@ export function ProcessInnovationPage() {
|
|||
{loading || statsLoading
|
||||
? // 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"
|
||||
>
|
||||
<CardContent className="p-2">
|
||||
<BaseCard key={`skeleton-${index}`} className="rounded-2xl overflow-hidden">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
|
||||
<div
|
||||
|
|
@ -616,80 +618,74 @@ export function ProcessInnovationPage() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</BaseCard>
|
||||
))
|
||||
: Object.entries(stateCard).map(([key, card]) => (
|
||||
<Card
|
||||
: Object.entries(stateCard).map(([key, card]) => {
|
||||
// map percent values for each card key
|
||||
const percentMap: Record<string, number | string | undefined> = {
|
||||
productionstopsprevention: stats.percentProductionStops,
|
||||
bottleneckremoval: stats.percentBottleneckRemoval,
|
||||
currencyreduction: stats.percentCurrencyReduction,
|
||||
frequentfailuresreduction: stats.percentFailuresReduction,
|
||||
};
|
||||
const percentValue = percentMap[key];
|
||||
|
||||
return (
|
||||
<BaseCard
|
||||
key={card.id}
|
||||
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
|
||||
title={card.title}
|
||||
className="border-gray-700/50"
|
||||
icon={card.icon}
|
||||
>
|
||||
<CardContent className="p-2">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
|
||||
<h3 className="text-lg font-bold text-white font-persian">
|
||||
{card.title}
|
||||
</h3>
|
||||
<div
|
||||
className={`p-3 gird placeitems-center rounded-full w-fit `}
|
||||
>
|
||||
{card.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col p-1">
|
||||
<p
|
||||
className={`text-3xl font-bold ${card.color} mb-1`}
|
||||
>
|
||||
{card.value}
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-3xl text-pr-green font-bold mb-1">
|
||||
{(card.value)}
|
||||
</p>
|
||||
<p className="text-sm text-gray-300 font-persian">
|
||||
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Process Impacts Chart */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
|
||||
<CardContent>
|
||||
<BaseCard className="rounded-2xl w-full overflow-hidden">
|
||||
<CustomBarChart
|
||||
title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
|
||||
loading={statsLoading}
|
||||
data={[
|
||||
{
|
||||
label: "کاهش توقفات تولید",
|
||||
value: stats.percentProductionStops || 0,
|
||||
color: "bg-emerald-400",
|
||||
value: Number(stats.percentProductionStops) || 0,
|
||||
labelColor: "text-white",
|
||||
},
|
||||
{
|
||||
label: "رفع گلوگاه تولید",
|
||||
value: stats.percentBottleneckRemoval || 0,
|
||||
color: "bg-emerald-400",
|
||||
value: Number(stats.percentBottleneckRemoval) || 0,
|
||||
labelColor: "text-white",
|
||||
},
|
||||
{
|
||||
label: "کاهش ارز بری",
|
||||
value: stats.percentCurrencyReduction || 0,
|
||||
color: "bg-emerald-400",
|
||||
value: Number(stats.percentCurrencyReduction) || 0,
|
||||
labelColor: "text-white",
|
||||
},
|
||||
{
|
||||
label: "کاهش خرابی پر تکرار",
|
||||
value: stats.percentFailuresReduction || 0,
|
||||
color: "bg-emerald-400",
|
||||
value: Number(stats.percentFailuresReduction) || 0,
|
||||
labelColor: "text-white",
|
||||
},
|
||||
]}
|
||||
barHeight="h-5"
|
||||
barHeight="h-6"
|
||||
showAxisLabels={true}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</BaseCard>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
|
|
@ -810,7 +806,7 @@ export function ProcessInnovationPage() {
|
|||
|
||||
{/* Footer */}
|
||||
|
||||
<div className="p-2 px-4 bg-gray-700/50">
|
||||
<div className="p-2 px-4 bg-[#3F415A]">
|
||||
<div className="flex gap-4 text-sm text-gray-300 font-persian justify-between sm:flex-col xl:flex-row">
|
||||
<div className="text-center gap-2 items-center xl:w-1/3 pr-36 sm:w-full">
|
||||
<div className="text-base text-gray-401 mb-1">
|
||||
|
|
@ -841,15 +837,15 @@ export function ProcessInnovationPage() {
|
|||
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
||||
<DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
|
||||
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian font-semibold text-sm text-right">
|
||||
شرح پروژه
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 flex justify-between text-right px-6">
|
||||
{/* Project Description */}
|
||||
<div className="flex-[4] border-l-2 border-gray-600">
|
||||
<h2 className="font-bold">{selectedProjectDetails?.title}</h2>
|
||||
<p className="text-gray-300 font-persian px-2 mt-2">
|
||||
<h2 className="font-bold text-base">{selectedProjectDetails?.title}</h2>
|
||||
<p className="text-white font-normal text-base font-persian px-2 mt-2">
|
||||
{selectedProjectDetails?.project_description || "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -859,11 +855,11 @@ export function ProcessInnovationPage() {
|
|||
<div className="font-bold text-right ">جزئیات پروژه</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<Building2 className="h-4 text-green-500" />
|
||||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||||
<Building2 className="h-4 text-green-500 text-sm font-light" />
|
||||
زمان شروع:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
<span className="text-white font-normal text-base font-persian">
|
||||
{selectedProjectDetails?.start_date
|
||||
? moment(
|
||||
selectedProjectDetails?.start_date,
|
||||
|
|
@ -874,11 +870,11 @@ export function ProcessInnovationPage() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<PickaxeIcon className="h-4 text-green-500" />
|
||||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||||
<PickaxeIcon className="h-4 text-green-500 text-sm font-light" />
|
||||
زمان پایان:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
<span className="text-white font-normal text-base font-persian">
|
||||
{selectedProjectDetails?.done_date
|
||||
? moment(
|
||||
selectedProjectDetails?.done_date,
|
||||
|
|
@ -889,27 +885,29 @@ export function ProcessInnovationPage() {
|
|||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<UsersIcon className="h-4 text-green-500" />
|
||||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||||
<UsersIcon className="h-4 text-green-500 text-sm font-light" />
|
||||
هزینه برآورد شده:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
{formatNumber(
|
||||
<span className="text-white font-normal text-base font-persian">
|
||||
{selectedProjectDetails?.approved_budget
|
||||
? formatNumber(
|
||||
Number(
|
||||
selectedProjectDetails?.approved_budget.replaceAll(
|
||||
selectedProjectDetails.approved_budget.replaceAll(
|
||||
",",
|
||||
""
|
||||
)
|
||||
)
|
||||
) || "-"}
|
||||
)
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<UserIcon className="h-4 text-green-500" />
|
||||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||||
<UserIcon className="h-4 text-green-500 text-sm font-light" />
|
||||
نفر مرتبط:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
<span className="text-white font-normal text-base font-persian">
|
||||
{selectedProjectDetails?.observer || "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useRef, useState, useMemo } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
|
|
@ -7,6 +7,7 @@ import {
|
|||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
|
|
@ -53,51 +54,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" },
|
||||
{
|
||||
|
|
@ -495,6 +496,149 @@ 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];
|
||||
|
|
@ -509,7 +653,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)}
|
||||
|
|
@ -520,55 +664,58 @@ 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"
|
||||
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)}
|
||||
|
|
@ -576,7 +723,7 @@ export function ProjectManagementPage() {
|
|||
);
|
||||
default:
|
||||
return (
|
||||
<span className="text-gray-300">
|
||||
<span className="font-light text-sm">
|
||||
{(value && String(value)) || "-"}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -592,14 +739,15 @@ export function ProjectManagementPage() {
|
|||
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="relative">
|
||||
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(100vh-200px)]">
|
||||
<div 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-gray-200 font-medium bg-[#3F415A] sticky top-0 z-20"
|
||||
style={{ width: column.width }}
|
||||
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
|
||||
|
|
@ -619,11 +767,13 @@ export function ProjectManagementPage() {
|
|||
</button>
|
||||
) : (
|
||||
column.label
|
||||
)}
|
||||
)
|
||||
}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
// Skeleton loading rows (compact)
|
||||
|
|
@ -635,7 +785,7 @@ export function ProjectManagementPage() {
|
|||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
|
||||
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" />
|
||||
|
|
@ -668,7 +818,7 @@ export function ProjectManagementPage() {
|
|||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
|
||||
className="text-right border-emerald-500/20 text-sm py-1 px-2 break-words"
|
||||
>
|
||||
{renderCellContent(project, column)}
|
||||
</TableCell>
|
||||
|
|
@ -677,15 +827,146 @@ export function ProjectManagementPage() {
|
|||
))
|
||||
)}
|
||||
</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 */}
|
||||
<div ref={observerRef} className="h-auto">
|
||||
{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>
|
||||
|
|
@ -693,12 +974,7 @@ export function ProjectManagementPage() {
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -401,21 +401,13 @@ 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">
|
||||
<CardTitle className="font-persian text-sm text-white flex justify-between px-4">
|
||||
تعداد تفاهم نامه ها
|
||||
<span className="font-bold text-3xl">
|
||||
{formatNumber(counts.mou_count)}
|
||||
|
|
@ -424,7 +416,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
</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,7 +425,7 @@ 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 */}
|
||||
|
|
@ -454,58 +446,78 @@ 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>
|
||||
</ResponsiveContainer>
|
||||
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400 font-persian">
|
||||
دادهای برای نمایش وجود ندارد
|
||||
|
|
|
|||
|
|
@ -508,7 +508,7 @@ 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,7 +518,7 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
|
|||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="w-full h-full relative bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]">
|
||||
<div className="w-full h-full relative bg-transparent">
|
||||
{/* Skeleton Graph Container */}
|
||||
<div className="w-full h-full flex items-center justify-center relative">
|
||||
{/* Center Node Skeleton */}
|
||||
|
|
@ -579,7 +579,7 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-full relative bg-[linear-gradient(to_bottom_left,#464861,10%,#111628)] overflow-hidden">
|
||||
<div className="w-full h-full relative bg-transparent overflow-hidden">
|
||||
<svg ref={svgRef} className="w-full h-full" style={{ minHeight: 500 }} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ interface BaseCardProps {
|
|||
headerClassName?: string;
|
||||
contentClassName?: string;
|
||||
children: React.ReactNode;
|
||||
icon ?: React.ComponentType<{ className?: string }>;
|
||||
withHeader?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -17,6 +18,7 @@ export function BaseCard({
|
|||
contentClassName,
|
||||
children,
|
||||
withHeader = false,
|
||||
icon : Icon,
|
||||
}: BaseCardProps) {
|
||||
return (
|
||||
<Card
|
||||
|
|
@ -25,7 +27,12 @@ export function BaseCard({
|
|||
className
|
||||
)}
|
||||
>
|
||||
{withHeader && title ? (
|
||||
{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>
|
||||
|
|
|
|||
|
|
@ -67,76 +67,56 @@ 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 p-4">
|
||||
{title}
|
||||
</h3>
|
||||
)}
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
<div className="space-y-4 px-4 pb-4">
|
||||
{data.map((item, index) => {
|
||||
const percentage =
|
||||
globalMaxValue > 0 ? (item.value / globalMaxValue) * 100 : 0;
|
||||
const displayValue: any = item.value;
|
||||
|
||||
return (
|
||||
<div key={index} className="flex items-center gap-3">
|
||||
{/* Label */}
|
||||
<span
|
||||
className={`font-persian text-sm min-w-[160px] text-right ${
|
||||
className={`font-persian text-sm font-normal min-w-[120px] text-right ${
|
||||
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"
|
||||
}`}
|
||||
className={`text-base font-normal text-left text-white`}
|
||||
>
|
||||
{item.valuePrefix || ""}
|
||||
{formatNumber(parseFloat(displayValue))}%
|
||||
{formatNumber(parseFloat(displayValue))}
|
||||
{item.valueSuffix || ""}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Axis Labels */}
|
||||
{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">
|
||||
|
|
@ -152,7 +132,7 @@ export function CustomBarChart({
|
|||
{formatNumber(Math.round(globalMaxValue))}
|
||||
</span>
|
||||
</div>
|
||||
<span className="min-w-[60px]"></span>
|
||||
<span className="min-w-[0px]"></span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -76,8 +76,8 @@ export default function EcosystemPage() {
|
|||
</div>
|
||||
|
||||
<div className="lg:col-span-8 h-full">
|
||||
<Card className="h-full overflow-hidden">
|
||||
<CardContent className="p-0 h-full">
|
||||
<Card className="h-full overflow-hidden bg-transparent border-[#3F415A]">
|
||||
<CardContent className="p-0 h-full bg-transparent">
|
||||
<NetworkGraph onNodeClick={setSelectedCompany} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
@ -92,11 +92,10 @@ export default function EcosystemPage() {
|
|||
>
|
||||
<DialogContent className="font-persian max-w-6xl max-h-[75vh] overflow-y-auto bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-right border-b-2 border-gray-600 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">
|
||||
|
|
@ -109,7 +108,7 @@ export default function EcosystemPage() {
|
|||
<img
|
||||
src={getImageUrl(selectedCompany.stageid)}
|
||||
alt={selectedCompany?.label || ""}
|
||||
className="w-14 h-14 object-cover rounded-2xl"
|
||||
className="w-12 h-12 object-cover rounded-2xl"
|
||||
onError={(e) => {
|
||||
// Hide image and show fallback on error
|
||||
e.currentTarget.style.display = "none";
|
||||
|
|
@ -147,7 +146,7 @@ export default function EcosystemPage() {
|
|||
</div>
|
||||
{selectedCompany?.description ? (
|
||||
<div className="p-4 rounded-lg">
|
||||
<p className="font-persian leading-relaxed">
|
||||
<p className="font-persian text-sm font-normal leading-relaxed">
|
||||
{selectedCompany.description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -159,22 +158,22 @@ export default function EcosystemPage() {
|
|||
</div>
|
||||
{/* Left Column - Company Fields */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-persian gap-1 flex text-lg font-bold">
|
||||
<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">
|
||||
<div className="space-y-3 px-4">
|
||||
{selectedCompany.fields.map((field, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between items-center rounded-lg"
|
||||
>
|
||||
<span className="font-persian font-light">
|
||||
<span className="font-persian text-sm font-light">
|
||||
{field.N}:
|
||||
</span>
|
||||
<span className="font-persian font-light text-right">
|
||||
<span className="font-persian text-sm font-light text-right">
|
||||
{handleValue(field.V)}
|
||||
{field.U && <span className="mr-1">({field.U})</span>}
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user