fix: green inivation designed bugs

This commit is contained in:
MehrdadAdabi 2025-08-30 18:21:46 +03:30
parent 69cea7a06c
commit 28f22dd0d3
2 changed files with 147 additions and 110 deletions

View File

@ -69,6 +69,7 @@ interface DigitalInnovationMetrics {
reduce_energy_consumption_percent: string; reduce_energy_consumption_percent: string;
resource_productivity: string; resource_productivity: string;
resource_productivity_percent: string; resource_productivity_percent: string;
average_project_score?: number;
} }
// Normalized interface for digital innovation stats // Normalized interface for digital innovation stats
@ -82,6 +83,8 @@ interface DigitalInnovationStats {
reduceEnergyConsumptionPercent: number; reduceEnergyConsumptionPercent: number;
resourceProductivity: number; resourceProductivity: number;
resourceProductivityPercent: number; resourceProductivityPercent: number;
avarageProjectScore: number;
countInnovationDigitalProjects: number;
} }
enum DigitalCardLabel { enum DigitalCardLabel {
@ -168,6 +171,7 @@ export function DigitalInnovationPage() {
reduceEnergyConsumptionPercent: 0, reduceEnergyConsumptionPercent: 0,
resourceProductivity: 0, resourceProductivity: 0,
resourceProductivityPercent: 0, resourceProductivityPercent: 0,
avarageProjectScore: 0,
}); });
const [sortConfig, setSortConfig] = useState<SortConfig>({ const [sortConfig, setSortConfig] = useState<SortConfig>({
field: "start_date", field: "start_date",
@ -177,7 +181,7 @@ export function DigitalInnovationPage() {
new Set() new Set()
); );
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false); const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
const [avarage, setAvarage] = useState<number>(0); // const [avarage, setAvarage] = useState<number>(0);
const observerRef = useRef<HTMLDivElement>(null); const observerRef = useRef<HTMLDivElement>(null);
const fetchingRef = useRef(false); const fetchingRef = useRef(false);
@ -288,7 +292,6 @@ export function DigitalInnovationPage() {
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
}); });
// console.log(JSON.parse(response.data));
if (response.state === 0) { if (response.state === 0) {
const dataString = response.data; const dataString = response.data;
if (dataString && typeof dataString === "string") { if (dataString && typeof dataString === "string") {
@ -297,7 +300,7 @@ export function DigitalInnovationPage() {
if (Array.isArray(parsedData)) { if (Array.isArray(parsedData)) {
if (reset) { if (reset) {
setProjects(parsedData); setProjects(parsedData);
calculateAverage(parsedData); // calculateAverage(parsedData);
setTotalCount(parsedData.length); setTotalCount(parsedData.length);
} else { } else {
setProjects((prev) => [...prev, ...parsedData]); setProjects((prev) => [...prev, ...parsedData]);
@ -422,8 +425,6 @@ export function DigitalInnovationPage() {
const parsedData = JSON.parse(dataString); const parsedData = JSON.parse(dataString);
if (Array.isArray(parsedData) && parsedData[0]) { if (Array.isArray(parsedData) && parsedData[0]) {
const count = parsedData[0].project_no_count || 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 })); setStats((prev) => ({ ...prev, totalProjects: count }));
} }
} catch (parseError) { } catch (parseError) {
@ -440,7 +441,7 @@ export function DigitalInnovationPage() {
const fetchStats = async () => { const fetchStats = async () => {
try { try {
setStatsLoading(true); setStatsLoading(true);
const raw = await apiService.callInnovationProcess<any>({ const raw = await apiService.call<any>({
innovation_digital_function: {}, innovation_digital_function: {},
}); });
@ -474,8 +475,10 @@ export function DigitalInnovationPage() {
resourceProductivityPercent: parseNum( resourceProductivityPercent: parseNum(
payload?.resource_productivity_percent payload?.resource_productivity_percent
), ),
avarageProjectScore: parseNum(payload?.average_project_score),
countInnovationDigitalProjects: parseNum(payload?.count_innovation_digital_projects),
}; };
setActualTotalCount(normalized.countInnovationDigitalProjects);
setStats(normalized); setStats(normalized);
} catch (error) { } catch (error) {
console.error("Error fetching stats:", error); console.error("Error fetching stats:", error);
@ -532,7 +535,7 @@ export function DigitalInnovationPage() {
} }
}, [rating]); }, [rating]);
const ststusColor = (status: projectStatus): any => { const statusColor = (status: projectStatus): any => {
let el = null; let el = null;
switch (status) { switch (status) {
case projectStatus.contract: case projectStatus.contract:
@ -597,7 +600,7 @@ export function DigitalInnovationPage() {
return ( return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Badge <Badge
variant={ststusColor(value)} variant={statusColor(value)}
className="font-medium border-2 p-0 block w-2 h-2 rounded-full" className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
style={{ style={{
border: "none", border: "none",
@ -625,22 +628,22 @@ export function DigitalInnovationPage() {
} }
}; };
const calculateAverage = (data: Array<ProcessInnovationData>) => { // const calculateAverage = (data: Array<ProcessInnovationData>) => {
let number = 0; // let number = 0;
data.map( // data.map(
(item: ProcessInnovationData) => (number = number + +item.project_rating) // (item: ProcessInnovationData) => (number = number + +item.project_rating)
); // );
setAvarage(number / data.length); // setAvarage(number / data.length);
}; // };
return ( return (
<DashboardLayout title="نوآوری دیجیتال"> <DashboardLayout title="نوآوری دیجیتال">
<div className="flex flex-row gap-8 justify-between p-6 space-y-4 h-full"> <div className="grid grid-cols-2 gap-8 justify-between p-6 space-y-4 h-full">
{/* Stats Cards */} {/* Stats Cards */}
<div className="flex flex-col gap-4 w-full"> <div className="flex flex-col justify-between gap-5 w-full mb-0 h-[calc(90vh-12rem)]">
<div className="space-y-6 w-full"> <div className="space-y-6 w-full">
{/* Stats Grid */} {/* Stats Grid */}
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-5">
{loading || statsLoading {loading || statsLoading
? // Loading skeleton for stats cards - matching new design ? // Loading skeleton for stats cards - matching new design
Array.from({ length: 4 }).map((_, index) => ( Array.from({ length: 4 }).map((_, index) => (
@ -648,18 +651,18 @@ export function DigitalInnovationPage() {
key={`skeleton-${index}`} 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"
> >
<CardContent className="p-2"> <CardContent className="p-0">
<div className="flex flex-col justify-between gap-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"> <div className="flex justify-between items-center border-b-2 px-6 py-4 border-gray-500/20">
<div <div
className="h-6 bg-gray-600 rounded animate-pulse" className="h-6 bg-gray-600 rounded animate-pulse"
style={{ width: "60%" }} 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 className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
</div> </div>
</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 <div
className="h-8 bg-gray-600 rounded mb-1 animate-pulse" className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
style={{ width: "40%" }} style={{ width: "40%" }}
@ -678,19 +681,19 @@ export function DigitalInnovationPage() {
key={card.id} key={card.id}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50" 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 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 border-gray-500/20">
<h3 className="text-lg font-bold text-white font-persian"> <h3 className="text-lg font-bold text-white font-persian py-4">
{card.title} {card.title}
</h3> </h3>
<div <div
className={`p-3 gird placeitems-center rounded-full w-fit `} className={`gird placeitems-center rounded-full w-fit`}
> >
{card.icon} {card.icon}
</div> </div>
</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 <p
className={`text-3xl font-bold ${card.color} mb-1`} className={`text-3xl font-bold ${card.color} mb-1`}
> >
@ -708,7 +711,7 @@ export function DigitalInnovationPage() {
</div> </div>
{/* Process Impacts Chart */} {/* Process Impacts Chart */}
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden"> <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
{/* <CardContent > */} {/* <CardContent > */}
<CustomBarChart <CustomBarChart
title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای" title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
@ -747,10 +750,10 @@ export function DigitalInnovationPage() {
</div> </div>
{/* Data Table */} {/* 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"> <CardContent className="p-0">
<div className="relative"> <div className="relative h-full">
<Table containerClassName="overflow-auto custom-scrollbar h-[calc(90vh-270px)]"> <Table containerClassName="overflow-auto custom-scrollbar w-full h-[calc(90vh-15rem)]">
<TableHeader> <TableHeader>
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">
{columns.map((column) => ( {columns.map((column) => (
@ -864,30 +867,29 @@ export function DigitalInnovationPage() {
{/* Footer */} {/* Footer */}
<div className="p-2 px-4 bg-gray-700/50"> <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="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
<div className="text-center gap-2 items-center flex"> <div className="text-center gap-2 items-center w-1/3 pr-16">
<div className="text-base text-gray-401 mb-1"> <div className="text-base text-gray-401 mb-1">
کل پروژه ها :{formatNumber(actualTotalCount)} کل پروژه ها : {formatNumber(actualTotalCount)}
</div> </div>
</div> </div>
{/* Project number column - empty */}
<div></div> <div className="flex items-center flex-row gap-4 status w-1/2 justify-center">
{/* Title column - empty */} <div className="flex flex-row-reverse">
<div></div> <span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
{/* Project status column - empty */} <span className="block w-7 h-2.5 bg-purple-500 "></span>
<div className="flex items-center flex-row-reverse status "> <span className="block w-7 h-2.5 bg-cyan-300 "></span>
<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-pink-400 rounded-tr-xl rounded-br-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> </div>
<div className="font-bold"> <div className="flex justify-center items-center gap-2">
{formatNumber(((avarage ?? 0) as number).toFixed?.(1) ?? 0)} <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> </div>

View File

@ -99,27 +99,10 @@ interface InnovationStats {
waste_reduction_percent: number; waste_reduction_percent: number;
water_recovery_reduction: number; water_recovery_reduction: number;
water_recovery_reduction_percent: number; water_recovery_reduction_percent: number;
average_project_score:number average_project_score: number;
count_innovation_green_projects: number;
} }
interface GreenInnovationState {
water: {
value: any;
percent: number;
};
food: {
value: any;
percent: number;
};
power: {
value: any;
percent: number;
};
oil: {
value: any;
percent: number;
};
}
interface Params { interface Params {
icon: any; icon: any;
@ -145,6 +128,16 @@ interface ChartDataItem {
amt: number; // max value or target amt: number; // max value or target
} }
enum projectStatus {
propozal = "پروپوزال",
contract = "پیشنویس قرارداد",
inprogress = "در حال انجام",
stop = "متوقف شده",
mafasa = "مرحله مفاصا",
finish = "پایان یافته",
}
const columns = [ const columns = [
{ key: "select", label: "", sortable: false, width: "50px" }, { key: "select", label: "", sortable: false, width: "50px" },
{ key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" }, { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
@ -179,7 +172,7 @@ export function GreenInnovationPage() {
field: "start_date", field: "start_date",
direction: "asc", direction: "asc",
}); });
const [tblAvarage , setTblAvarage] = useState<number>(0); const [tblAvarage, setTblAvarage] = useState<number>(0);
const [selectedProjects, setSelectedProjects] = useState<Set<string>>( const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
new Set() new Set()
); );
@ -215,7 +208,7 @@ export function GreenInnovationPage() {
value: 0, value: 0,
suffix: "متر مربع", suffix: "متر مربع",
percent: 0, percent: 0,
} },
}); });
const [sustainabilityStats, setSustainabilityStats] = useState<StatsCard>({ const [sustainabilityStats, setSustainabilityStats] = useState<StatsCard>({
pollution: { pollution: {
@ -431,7 +424,6 @@ export function GreenInnovationPage() {
const parsedData = JSON.parse(dataString); const parsedData = JSON.parse(dataString);
if (Array.isArray(parsedData) && parsedData[0]) { if (Array.isArray(parsedData) && parsedData[0]) {
const count = parsedData[0].project_no_count || 0; const count = parsedData[0].project_no_count || 0;
setActualTotalCount(count);
// Keep stats in sync if backend stats not yet loaded // Keep stats in sync if backend stats not yet loaded
setStats((prev) => ({ ...prev, totalProjects: count })); setStats((prev) => ({ ...prev, totalProjects: count }));
} }
@ -510,9 +502,11 @@ export function GreenInnovationPage() {
percent: formatNumber(parseNum(stats.waste_reduction_percent)), percent: formatNumber(parseNum(stats.waste_reduction_percent)),
}, },
avarage: stats.average_project_score avarage: stats.average_project_score,
countInnovationGreenProjects: stats.count_innovation_green_projects,
}; };
setTblAvarage(normalized.avarage) setActualTotalCount(normalized.countInnovationGreenProjects);
setTblAvarage(normalized.avarage);
setPageData(normalized); setPageData(normalized);
} catch (error) { } catch (error) {
console.error("Error fetching stats:", error); console.error("Error fetching stats:", error);
@ -623,18 +617,19 @@ export function GreenInnovationPage() {
); );
case "title": case "title":
return <span className="font-medium text-white">{String(value)}</span>; return <span className="font-medium text-white">{String(value)}</span>;
case "project_status": case "project_status":
return ( return (
<Badge <div className="flex items-center gap-1">
variant="outline" <Badge
className="font-medium border-2" variant={statusColor(value)}
style={{ className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
border: "none", style={{
}} border: "none",
> }}
{String(value)} ></Badge>
</Badge> {String(value)}
); </div>
);
case "project_rating": case "project_rating":
return ( return (
<Badge variant="outline" className="text-lg text-center border-none"> <Badge variant="outline" className="text-lg text-center border-none">
@ -654,6 +649,30 @@ export function GreenInnovationPage() {
} }
}; };
const statusColor = (status: projectStatus): any => {
let el = null;
switch (status) {
case projectStatus.contract:
el = "teal";
break;
case projectStatus.finish:
el = "info";
break;
case projectStatus.stop:
el = "warning";
break;
case projectStatus.inprogress:
el = "teal";
break;
case projectStatus.mafasa:
el = "destructive";
break;
case projectStatus.propozal:
el = "info";
}
return el;
};
const [chartData, setChartData] = useState<Array<ChartDataItem>>([ const [chartData, setChartData] = useState<Array<ChartDataItem>>([
{ name: recycleParams.water.label, pv: 70, amt: 80 }, { name: recycleParams.water.label, pv: 70, amt: 80 },
{ name: recycleParams.power.label, pv: 45, amt: 60 }, { name: recycleParams.power.label, pv: 45, amt: 60 },
@ -673,7 +692,7 @@ export function GreenInnovationPage() {
Array.from({ length: 2 }).map((_, index) => ( Array.from({ length: 2 }).map((_, index) => (
<Card <Card
key={`skeleton-${index}`} 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-lg overflow-hidden"
> >
<CardContent className="p-0 h-48"> <CardContent className="p-0 h-48">
<div className="flex flex-col gap-2 h-full"> <div className="flex flex-col gap-2 h-full">
@ -700,7 +719,7 @@ export function GreenInnovationPage() {
: Object.entries(sustainabilityStats).map(([key, value]) => ( : Object.entries(sustainabilityStats).map(([key, value]) => (
<Card <Card
key={key} key={key}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-2xl backdrop-blur-sm border-gray-700/50" className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50"
> >
<CardContent className="p-0 h-full"> <CardContent className="p-0 h-full">
<div className="flex flex-col justify-between gap-2 h-full"> <div className="flex flex-col justify-between gap-2 h-full">
@ -737,7 +756,7 @@ export function GreenInnovationPage() {
{/* Process Impacts Chart */} {/* Process Impacts Chart */}
{statsLoading ? ( {statsLoading ? (
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden"> <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-24.3rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
<CardContent className="p-0 h-full"> <CardContent className="p-0 h-full">
<div className="border-b-2 border-gray-500/20"> <div className="border-b-2 border-gray-500/20">
<div className="w-full p-4 px-6"> <div className="w-full p-4 px-6">
@ -745,7 +764,7 @@ export function GreenInnovationPage() {
</div> </div>
</div> </div>
<div className="content grid gap-6 h-max p-8 box-border items-center justify-between sm:grid-cols-1 xl:grid-cols-[30%_70%]"> <div className="content grid gap-6 h-full p-8 box-border items-center justify-between sm:grid-cols-1 xl:grid-cols-[30%_70%]">
<div className="params flex flex-col gap-3.5"> <div className="params flex flex-col gap-3.5">
{[...Array(3)].map((_, paramIndex) => ( {[...Array(3)].map((_, paramIndex) => (
<div <div
@ -780,7 +799,7 @@ export function GreenInnovationPage() {
</CardContent> </CardContent>
</Card> </Card>
) : ( ) : (
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden"> <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-26rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
<CardContent className="p-0 h-full overflow-hidden"> <CardContent className="p-0 h-full overflow-hidden">
<div className="border-b-2 border-gray-500/20"> <div className="border-b-2 border-gray-500/20">
<div className="w-full p-4 px-6"> <div className="w-full p-4 px-6">
@ -861,7 +880,7 @@ export function GreenInnovationPage() {
position: "top", position: "top",
fill: "#fff", fill: "#fff",
fontWeight: "bold", fontWeight: "bold",
formatter: (value:any) => `${value}%`, formatter: (value: any) => `${value}%`,
}} }}
/> />
</BarChart> </BarChart>
@ -872,7 +891,7 @@ export function GreenInnovationPage() {
</Card> </Card>
)} )}
<Card className="w-1/3 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"> <Card className="w-1/3 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-lg overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="border-b-2 border-gray-500/20"> <div className="border-b-2 border-gray-500/20">
<div className="flex flex-row justify-between w-full p-4"> <div className="flex flex-row justify-between w-full p-4">
@ -890,9 +909,7 @@ export function GreenInnovationPage() {
</div> </div>
</div> </div>
<div <div className={"flex flex-col gap-3 p-4overflow-y-hidden p-4"}>
className={'flex flex-col gap-3 p-4overflow-y-hidden p-4'}
>
{statsLoading {statsLoading
? Array.from({ length: 10 }).map((_, index) => ( ? Array.from({ length: 10 }).map((_, index) => (
<div key={index} className="flex gap-2 items-center"> <div key={index} className="flex gap-2 items-center">
@ -915,7 +932,7 @@ export function GreenInnovationPage() {
</div> </div>
{/* Data Table */} {/* Data Table */}
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden"> <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative"> <div className="relative">
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]"> <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
@ -1019,8 +1036,34 @@ export function GreenInnovationPage() {
</div> </div>
</CardContent> </CardContent>
{/* Footer */}
<div className="p-2 px-4 bg-gray-700/50"> <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-36">
<div className="text-base text-gray-401 mb-1">
کل پروژه ها :{formatNumber(actualTotalCount)}
</div>
</div>
<div className="flex items-center flex-row gap-20 status justify-center w-2/3">
<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(
((tblAvarage ?? 0) as number).toFixed?.(1) ?? 0
)}
</div>
</div>
</div>
</div>
</div>
{/* <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="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-center gap-2 items-center flex">
<div className="text-base text-gray-401 mb-1"> <div className="text-base text-gray-401 mb-1">
@ -1029,13 +1072,7 @@ export function GreenInnovationPage() {
{formatNumber(stats?.totalProjects || actualTotalCount)} {formatNumber(stats?.totalProjects || actualTotalCount)}
</div> </div>
</div> </div>
{/* Project number column - empty */}
<div></div>
{/* Title column - empty */}
<div></div>
{/* Project status column - empty */}
<div></div>
{/* Project rating column - show average */}
<div className="flex justify-center items-center gap-2"> <div className="flex justify-center items-center gap-2">
<div className="text-base text-gray-400 mb-1"> <div className="text-base text-gray-400 mb-1">
{" "} {" "}
@ -1049,10 +1086,8 @@ export function GreenInnovationPage() {
)} )}
</div> </div>
</div> </div>
{/* Details column - show total count */}
</div> </div>
</div> </div> */}
</Card> </Card>
</div> </div>