Compare commits
4 Commits
8749cebe7c
...
0dd1fe2ec2
| Author | SHA1 | Date | |
|---|---|---|---|
|
0dd1fe2ec2 | ||
|
|
efa46a02c2 | ||
|
|
bda2e62411 | ||
|
|
173176bbb5 |
|
|
@ -1,38 +1,7 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { DashboardLayout } from "./layout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { Progress } from "~/components/ui/progress";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
} from "recharts";
|
||||
import apiService from "~/lib/api";
|
||||
import jalaali from "jalaali-js";
|
||||
import { Book, CheckCircle } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import {
|
||||
Calendar,
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
Target,
|
||||
Lightbulb,
|
||||
DollarSign,
|
||||
Minus,
|
||||
CheckCircle,
|
||||
Book,
|
||||
} from "lucide-react";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
|
||||
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
|
||||
import { DashboardCustomBarChart } from "./dashboard-custom-bar-chart";
|
||||
import { InteractiveBarChart } from "./interactive-bar-chart";
|
||||
import { D3ImageInfo } from "./d3-image-info";
|
||||
import {
|
||||
Label,
|
||||
PolarGrid,
|
||||
|
|
@ -40,26 +9,53 @@ import {
|
|||
RadialBar,
|
||||
RadialBarChart,
|
||||
} from "recharts";
|
||||
import { ChartContainer } from "~/components/ui/chart";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
import { BaseCard } from "~/components/ui/base-card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { ChartContainer } from "~/components/ui/chart";
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
import { Progress } from "~/components/ui/progress";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
|
||||
import apiService from "~/lib/api";
|
||||
import { EventBus, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { D3ImageInfo } from "./d3-image-info";
|
||||
import { DashboardCustomBarChart } from "./dashboard-custom-bar-chart";
|
||||
import { InteractiveBarChart } from "./interactive-bar-chart";
|
||||
import { DashboardLayout } from "./layout";
|
||||
|
||||
export function DashboardHome() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [dashboardData, setDashboardData] = useState<any | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
// Chart and schematic data from select API
|
||||
const [companyChartData, setCompanyChartData] = useState<
|
||||
{ category: string; capacity: number; revenue: number; cost: number , costI : number,
|
||||
capacityI : number,
|
||||
revenueI : number }[]
|
||||
{
|
||||
category: string;
|
||||
capacity: number;
|
||||
revenue: number;
|
||||
cost: number;
|
||||
costI: number;
|
||||
capacityI: number;
|
||||
revenueI: number;
|
||||
}[]
|
||||
>([]);
|
||||
const [totalIncreasedCapacity, setTotalIncreasedCapacity] = useState<number>(0);
|
||||
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) setDate(date);
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDashboardData();
|
||||
}, []);
|
||||
}, [date]);
|
||||
|
||||
const fetchDashboardData = async () => {
|
||||
try {
|
||||
|
|
@ -68,12 +64,18 @@ export function DashboardHome() {
|
|||
|
||||
// Fetch top cards data
|
||||
const topCardsResponse = await apiService.call({
|
||||
main_page_first_function: {},
|
||||
main_page_first_function: {
|
||||
start_date: date.start || null,
|
||||
end_date: date.end || null,
|
||||
},
|
||||
});
|
||||
|
||||
// Fetch left section data
|
||||
const leftCardsResponse = await apiService.call({
|
||||
main_page_second_function: {},
|
||||
main_page_second_function: {
|
||||
start_date: date.start || null,
|
||||
end_date: date.end || null,
|
||||
},
|
||||
});
|
||||
|
||||
const topCardsResponseData = JSON.parse(topCardsResponse?.data);
|
||||
|
|
@ -106,6 +108,10 @@ export function DashboardHome() {
|
|||
"sum(pre_project_income)",
|
||||
"sum(increased_income_after_innovation)",
|
||||
],
|
||||
Conditions: [
|
||||
["start_date", ">=", date.start || null, "and"],
|
||||
["start_date", "<=", date.end || null],
|
||||
],
|
||||
GroupBy: ["related_company"],
|
||||
};
|
||||
|
||||
|
|
@ -124,12 +130,30 @@ export function DashboardHome() {
|
|||
let incCapacityTotal = 0;
|
||||
const chartRows = rows.map((r) => {
|
||||
const rel = r?.related_company ?? "-";
|
||||
const preFee = Number(r?.pre_innovation_fee_sum ?? 0) >= 0 ? r?.pre_innovation_fee_sum : 0;
|
||||
const costRed = Number(r?.innovation_cost_reduction_sum ?? 0) >= 0 ? r?.innovation_cost_reduction_sum : 0;
|
||||
const preCap = Number(r?.pre_project_production_capacity_sum ?? 0) >= 0 ? r?.pre_project_production_capacity_sum : 0;
|
||||
const incCap = Number(r?.increased_capacity_after_innovation_sum ?? 0) >= 0 ? r?.increased_capacity_after_innovation_sum : 0;
|
||||
const preInc = Number(r?.pre_project_income_sum ?? 0) >= 0 ? r?.pre_project_income_sum : 0;
|
||||
const incInc = Number(r?.increased_income_after_innovation_sum ?? 0) >= 0 ? r?.increased_income_after_innovation_sum : 0;
|
||||
const preFee =
|
||||
Number(r?.pre_innovation_fee_sum ?? 0) >= 0
|
||||
? r?.pre_innovation_fee_sum
|
||||
: 0;
|
||||
const costRed =
|
||||
Number(r?.innovation_cost_reduction_sum ?? 0) >= 0
|
||||
? r?.innovation_cost_reduction_sum
|
||||
: 0;
|
||||
const preCap =
|
||||
Number(r?.pre_project_production_capacity_sum ?? 0) >= 0
|
||||
? r?.pre_project_production_capacity_sum
|
||||
: 0;
|
||||
const incCap =
|
||||
Number(r?.increased_capacity_after_innovation_sum ?? 0) >= 0
|
||||
? r?.increased_capacity_after_innovation_sum
|
||||
: 0;
|
||||
const preInc =
|
||||
Number(r?.pre_project_income_sum ?? 0) >= 0
|
||||
? r?.pre_project_income_sum
|
||||
: 0;
|
||||
const incInc =
|
||||
Number(r?.increased_income_after_innovation_sum ?? 0) >= 0
|
||||
? r?.increased_income_after_innovation_sum
|
||||
: 0;
|
||||
|
||||
incCapacityTotal += incCap;
|
||||
|
||||
|
|
@ -141,14 +165,14 @@ export function DashboardHome() {
|
|||
capacity: isFinite(capacityPct) ? capacityPct : 0,
|
||||
revenue: isFinite(revenuePct) ? revenuePct : 0,
|
||||
cost: isFinite(costPct) ? costPct : 0,
|
||||
costI : costRed,
|
||||
capacityI : incCap,
|
||||
revenueI : incInc
|
||||
costI: costRed,
|
||||
capacityI: incCap,
|
||||
revenueI: incInc,
|
||||
};
|
||||
});
|
||||
|
||||
setCompanyChartData(chartRows);
|
||||
setTotalIncreasedCapacity(incCapacityTotal);
|
||||
// setTotalIncreasedCapacity(incCapacityTotal);
|
||||
} catch (error) {
|
||||
console.error("Error fetching dashboard data:", error);
|
||||
const errorMessage =
|
||||
|
|
@ -161,25 +185,24 @@ export function DashboardHome() {
|
|||
};
|
||||
|
||||
// RadialBarChart data for ideas visualization
|
||||
const getIdeasChartData = () => {
|
||||
if (!dashboardData?.topData)
|
||||
return [{ browser: "safari", visitors: 0, fill: "var(--color-safari)" }];
|
||||
// const getIdeasChartData = () => {
|
||||
// if (!dashboardData?.topData)
|
||||
// return [{ browser: "safari", visitors: 0, fill: "var(--color-safari)" }];
|
||||
|
||||
const registered = parseFloat(
|
||||
dashboardData.topData.registered_innovation_technology_idea || "0",
|
||||
);
|
||||
const ongoing = parseFloat(
|
||||
dashboardData.topData.ongoing_innovation_technology_ideas || "0",
|
||||
);
|
||||
const percentage =
|
||||
registered > 0 ? (ongoing / registered) * 100 : 0;
|
||||
// const registered = parseFloat(
|
||||
// dashboardData.topData.registered_innovation_technology_idea || "0"
|
||||
// );
|
||||
// const ongoing = parseFloat(
|
||||
// dashboardData.topData.ongoing_innovation_technology_ideas || "0"
|
||||
// );
|
||||
// const percentage = registered > 0 ? (ongoing / registered) * 100 : 0;
|
||||
|
||||
return [
|
||||
{ browser: "safari", visitors: percentage, fill: "var(--color-safari)" },
|
||||
];
|
||||
};
|
||||
// return [
|
||||
// { browser: "safari", visitors: percentage, fill: "var(--color-safari)" },
|
||||
// ];
|
||||
// };
|
||||
|
||||
const chartData = getIdeasChartData();
|
||||
// const chartData = getIdeasChartData();
|
||||
|
||||
const chartConfig = {
|
||||
visitors: {
|
||||
|
|
@ -323,20 +346,19 @@ export function DashboardHome() {
|
|||
visitors:
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
?.registered_innovation_technology_idea || "0"
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
?.ongoing_innovation_technology_ideas || "0"
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
"1"
|
||||
)) *
|
||||
100,
|
||||
100
|
||||
)
|
||||
: 0,
|
||||
fill: "var(--color-green)",
|
||||
|
|
@ -347,19 +369,18 @@ export function DashboardHome() {
|
|||
90 +
|
||||
((parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
?.registered_innovation_technology_idea || "0"
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
?.ongoing_innovation_technology_ideas || "0"
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
?.registered_innovation_technology_idea || "1"
|
||||
)) *
|
||||
100,
|
||||
100
|
||||
)
|
||||
: 0) /
|
||||
100) *
|
||||
|
|
@ -375,11 +396,7 @@ export function DashboardHome() {
|
|||
className="first:fill-pr-red last:fill-[#24273A]"
|
||||
polarRadius={[38, 31]}
|
||||
/>
|
||||
<RadialBar
|
||||
dataKey="visitors"
|
||||
background
|
||||
cornerRadius={5}
|
||||
/>
|
||||
<RadialBar dataKey="visitors" background cornerRadius={5} />
|
||||
<PolarRadiusAxis
|
||||
tick={false}
|
||||
tickLine={false}
|
||||
|
|
@ -405,22 +422,22 @@ export function DashboardHome() {
|
|||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"0",
|
||||
"0"
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
"0"
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
"1"
|
||||
)) *
|
||||
100,
|
||||
100
|
||||
)
|
||||
: 0,
|
||||
: 0
|
||||
)}
|
||||
</tspan>
|
||||
</text>
|
||||
|
|
@ -437,14 +454,14 @@ export function DashboardHome() {
|
|||
<div className="font-light text-sm">ثبت شده :</div>
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
?.registered_innovation_technology_idea || "0"
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 font-bold text-base">
|
||||
<div className="font-light text-sm">در حال اجرا :</div>
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
?.ongoing_innovation_technology_ideas || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -454,16 +471,34 @@ export function DashboardHome() {
|
|||
{/* Revenue Card */}
|
||||
<MetricCard
|
||||
title="افزایش درآمد مبتنی بر فناوری و نوآوری"
|
||||
value={dashboardData.topData?.technology_innovation_based_revenue_growth?.replaceAll("," , "") || "0"}
|
||||
percentValue={dashboardData.topData?.technology_innovation_based_revenue_growth_percent}
|
||||
value={
|
||||
dashboardData.topData?.technology_innovation_based_revenue_growth?.replaceAll(
|
||||
",",
|
||||
""
|
||||
) || "0"
|
||||
}
|
||||
percentValue={
|
||||
dashboardData.topData
|
||||
?.technology_innovation_based_revenue_growth_percent
|
||||
}
|
||||
percentLabel="درصد به کل درآمد"
|
||||
/>
|
||||
|
||||
{/* Cost Reduction Card */}
|
||||
<MetricCard
|
||||
title="کاهش هزینه ها مبتنی بر فناوری و نوآوری"
|
||||
value={Math.round(parseFloat(dashboardData.topData?.technology_innovation_based_cost_reduction?.replace(/,/g, "") || "0"))}
|
||||
percentValue={dashboardData.topData?.technology_innovation_based_cost_reduction_percent || "0"}
|
||||
value={Math.round(
|
||||
parseFloat(
|
||||
dashboardData.topData?.technology_innovation_based_cost_reduction?.replace(
|
||||
/,/g,
|
||||
""
|
||||
) || "0"
|
||||
)
|
||||
)}
|
||||
percentValue={
|
||||
dashboardData.topData
|
||||
?.technology_innovation_based_cost_reduction_percent || "0"
|
||||
}
|
||||
percentLabel="درصد به کل هزینه"
|
||||
/>
|
||||
|
||||
|
|
@ -480,7 +515,7 @@ export function DashboardHome() {
|
|||
browser: "budget",
|
||||
visitors: parseFloat(
|
||||
dashboardData.topData
|
||||
?.innovation_budget_achievement_percent || "0",
|
||||
?.innovation_budget_achievement_percent || "0"
|
||||
),
|
||||
fill: "var(--color-green)",
|
||||
},
|
||||
|
|
@ -503,11 +538,7 @@ export function DashboardHome() {
|
|||
className="first:fill-pr-red last:fill-[#24273A]"
|
||||
polarRadius={[38, 31]}
|
||||
/>
|
||||
<RadialBar
|
||||
dataKey="visitors"
|
||||
background
|
||||
cornerRadius={5}
|
||||
/>
|
||||
<RadialBar dataKey="visitors" background cornerRadius={5} />
|
||||
<PolarRadiusAxis
|
||||
tick={false}
|
||||
tickLine={false}
|
||||
|
|
@ -533,8 +564,8 @@ export function DashboardHome() {
|
|||
Math.round(
|
||||
dashboardData.topData
|
||||
?.innovation_budget_achievement_percent ||
|
||||
0,
|
||||
),
|
||||
0
|
||||
)
|
||||
)}
|
||||
</tspan>
|
||||
</text>
|
||||
|
|
@ -554,10 +585,10 @@ export function DashboardHome() {
|
|||
parseFloat(
|
||||
dashboardData.topData?.approved_innovation_budget_achievement_ratio?.replace(
|
||||
/,/g,
|
||||
"",
|
||||
) || "0",
|
||||
),
|
||||
),
|
||||
""
|
||||
) || "0"
|
||||
)
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-base font-bold mr-auto">
|
||||
|
|
@ -567,10 +598,10 @@ export function DashboardHome() {
|
|||
parseFloat(
|
||||
dashboardData.topData?.allocated_innovation_budget_achievement_ratio?.replace(
|
||||
/,/g,
|
||||
"",
|
||||
) || "0",
|
||||
),
|
||||
),
|
||||
""
|
||||
) || "0"
|
||||
)
|
||||
)
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -592,7 +623,10 @@ export function DashboardHome() {
|
|||
<TabsTrigger value="canvas" className="cursor-pointer">
|
||||
شماتیک
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="charts" className=" text-white cursor-pointer font-light ">
|
||||
<TabsTrigger
|
||||
value="charts"
|
||||
className=" text-white cursor-pointer font-light "
|
||||
>
|
||||
مقایسه ای
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
|
@ -605,14 +639,13 @@ export function DashboardHome() {
|
|||
<TabsContent value="canvas" className="w-ful h-full">
|
||||
<div className="p-4 h-full w-full">
|
||||
<D3ImageInfo
|
||||
companies={
|
||||
companyChartData.map((item) => {
|
||||
companies={companyChartData.map((item) => {
|
||||
const imageMap: Record<string, string> = {
|
||||
"بسپاران": "/besparan.png",
|
||||
"خوارزمی": "/khwarazmi.png",
|
||||
بسپاران: "/besparan.png",
|
||||
خوارزمی: "/khwarazmi.png",
|
||||
"فراورش 1": "/faravash1.png",
|
||||
"فراورش 2": "/faravash2.png",
|
||||
"کیمیا": "/kimia.png",
|
||||
کیمیا: "/kimia.png",
|
||||
"آب نیرو": "/abniro.png",
|
||||
};
|
||||
|
||||
|
|
@ -624,8 +657,7 @@ export function DashboardHome() {
|
|||
capacity: item?.capacityI || 0,
|
||||
revenue: item?.revenueI || 0,
|
||||
};
|
||||
})
|
||||
}
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
|
@ -643,7 +675,7 @@ export function DashboardHome() {
|
|||
|
||||
<Progress
|
||||
value={parseFloat(
|
||||
dashboardData.leftData?.technology_intensity,
|
||||
dashboardData.leftData?.technology_intensity
|
||||
)}
|
||||
className="h-4 flex-1"
|
||||
/>
|
||||
|
|
@ -661,21 +693,21 @@ export function DashboardHome() {
|
|||
{
|
||||
label: "اجرا شده",
|
||||
value: parseFloat(
|
||||
dashboardData?.leftData?.executed_project || "0",
|
||||
dashboardData?.leftData?.executed_project || "0"
|
||||
),
|
||||
color: "bg-pr-green",
|
||||
},
|
||||
{
|
||||
label: "در حال اجرا",
|
||||
value: parseFloat(
|
||||
dashboardData?.leftData?.in_progress_project || "0",
|
||||
dashboardData?.leftData?.in_progress_project || "0"
|
||||
),
|
||||
color: "bg-pr-blue",
|
||||
},
|
||||
{
|
||||
label: "برنامهریزی شده",
|
||||
value: parseFloat(
|
||||
dashboardData?.leftData?.planned_project || "0",
|
||||
dashboardData?.leftData?.planned_project || "0"
|
||||
),
|
||||
color: "bg-pr-red",
|
||||
},
|
||||
|
|
@ -700,7 +732,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.printed_books_count || "0",
|
||||
dashboardData.leftData?.printed_books_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -711,7 +743,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.registered_patents_count || "0",
|
||||
dashboardData.leftData?.registered_patents_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -722,7 +754,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.published_reports_count || "0",
|
||||
dashboardData.leftData?.published_reports_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -733,7 +765,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.printed_articles_count || "0",
|
||||
dashboardData.leftData?.printed_articles_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -757,7 +789,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.attended_conferences_count || "0",
|
||||
dashboardData.leftData?.attended_conferences_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -768,7 +800,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.attended_events_count || "0",
|
||||
dashboardData.leftData?.attended_events_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -779,7 +811,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.attended_exhibitions_count || "0",
|
||||
dashboardData.leftData?.attended_exhibitions_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -790,7 +822,7 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.organized_events_count || "0",
|
||||
dashboardData.leftData?.organized_events_count || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -800,7 +832,6 @@ export function DashboardHome() {
|
|||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import { useAuth } from "~/contexts/auth-context";
|
||||
import { Link } from "react-router";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
Calendar,
|
||||
ChevronLeft,
|
||||
Menu,
|
||||
PanelLeft,
|
||||
|
||||
Server,
|
||||
Settings,
|
||||
User,
|
||||
|
||||
Menu,
|
||||
ChevronDown,
|
||||
Server,
|
||||
ChevronLeft ,
|
||||
|
||||
} from "lucide-react";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { Link } from "react-router";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Calendar as CustomCalendar } from "~/components/ui/Calendar";
|
||||
import { useAuth } from "~/contexts/auth-context";
|
||||
import apiService from "~/lib/api";
|
||||
import { cn, EventBus } from "~/lib/utils";
|
||||
|
||||
interface HeaderProps {
|
||||
onToggleSidebar?: () => void;
|
||||
|
|
@ -24,6 +23,52 @@ interface HeaderProps {
|
|||
titleIcon?: React.ComponentType<{ className?: string }> | null;
|
||||
}
|
||||
|
||||
interface MonthItem {
|
||||
id: string;
|
||||
label: string;
|
||||
start: string;
|
||||
end: string;
|
||||
}
|
||||
|
||||
interface CurrentDay {
|
||||
start?: string;
|
||||
end?: string;
|
||||
sinceMonth?: string;
|
||||
fromMonth?: string;
|
||||
}
|
||||
|
||||
interface SelectedDate {
|
||||
since?: number;
|
||||
until?: number;
|
||||
}
|
||||
|
||||
const monthList: Array<MonthItem> = [
|
||||
{
|
||||
id: "month-1",
|
||||
label: "بهار",
|
||||
start: "01/01",
|
||||
end: "03/31",
|
||||
},
|
||||
{
|
||||
id: "month-2",
|
||||
label: "تابستان",
|
||||
start: "04/01",
|
||||
end: "06/31",
|
||||
},
|
||||
{
|
||||
id: "month-3",
|
||||
label: "پاییز",
|
||||
start: "07/01",
|
||||
end: "09/31",
|
||||
},
|
||||
{
|
||||
id: "month-4",
|
||||
label: "زمستان",
|
||||
start: "10/01",
|
||||
end: "12/29",
|
||||
},
|
||||
];
|
||||
|
||||
export function Header({
|
||||
onToggleSidebar,
|
||||
className,
|
||||
|
|
@ -31,25 +76,131 @@ export function Header({
|
|||
titleIcon,
|
||||
}: HeaderProps) {
|
||||
const { user } = useAuth();
|
||||
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
|
||||
const [isNotificationOpen, setIsNotificationOpen] = useState(false);
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
|
||||
const calendarRef = useRef<HTMLDivElement>(null);
|
||||
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState<boolean>(false);
|
||||
const [isNotificationOpen, setIsNotificationOpen] = useState<boolean>(false);
|
||||
const [openCalendar, setOpenCalendar] = useState<boolean>(false);
|
||||
const [currentYear, setCurrentYear] = useState<SelectedDate>({
|
||||
since: jy,
|
||||
until: jy,
|
||||
});
|
||||
|
||||
const [selectedDate, setSelectedDate] = useState<CurrentDay>({
|
||||
sinceMonth: "بهار",
|
||||
fromMonth: "زمستان",
|
||||
start: `${currentYear.since}/01/01`,
|
||||
end: `${currentYear.until}/12/30`,
|
||||
});
|
||||
|
||||
const redirectHandler = async () => {
|
||||
try {
|
||||
const getData = await apiService.post('/GenerateSsoCode')
|
||||
//const url = `http://localhost:3000/redirect/${getData.data}`;
|
||||
const getData = await apiService.post("/GenerateSsoCode");
|
||||
const url = `https://inogen-bpms.pelekan.org/redirect/${getData.data}`;
|
||||
window.open(url, "_blank");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
const nextFromYearHandler = () => {
|
||||
if (currentYear && (currentYear.since ?? 0) < (currentYear.until ?? 0)) {
|
||||
const data = {
|
||||
...currentYear,
|
||||
since: currentYear.since! + 1,
|
||||
};
|
||||
setCurrentYear(data);
|
||||
EventBus.emit("dateSelected", {
|
||||
...selectedDate,
|
||||
start: `${data.since}/${selectedDate.start?.split("/").slice(1).join("/")}`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const prevFromYearHandler = () => {
|
||||
const data = {
|
||||
...currentYear,
|
||||
since: currentYear.since! - 1,
|
||||
};
|
||||
setCurrentYear(data);
|
||||
EventBus.emit("dateSelected", {
|
||||
...selectedDate,
|
||||
start: `${data.since}/${selectedDate.start?.split("/").slice(1).join("/")}`,
|
||||
});
|
||||
};
|
||||
|
||||
const selectFromDateHandler = (val: MonthItem) => {
|
||||
const data = {
|
||||
...selectedDate,
|
||||
start: `${currentYear.since}/${val.start}`,
|
||||
sinceMonth: val.label,
|
||||
};
|
||||
setSelectedDate(data);
|
||||
EventBus.emit("dateSelected", data);
|
||||
};
|
||||
|
||||
const nextUntilYearHandler = () => {
|
||||
const data = {
|
||||
...currentYear,
|
||||
until: currentYear.until! + 1,
|
||||
};
|
||||
setCurrentYear(data);
|
||||
EventBus.emit("dateSelected", {
|
||||
...selectedDate,
|
||||
end: `${data.until}/${selectedDate?.end?.split("/").slice(1).join("/")}`,
|
||||
});
|
||||
};
|
||||
|
||||
const prevUntilYearHandler = () => {
|
||||
if (currentYear && (currentYear.since ?? 0) < (currentYear.until ?? 0)) {
|
||||
const data = {
|
||||
...currentYear,
|
||||
until: currentYear.until! - 1,
|
||||
};
|
||||
setCurrentYear(data);
|
||||
EventBus.emit("dateSelected", {
|
||||
...selectedDate,
|
||||
end: `${data.until}/${selectedDate.end?.split("/").slice(1).join("/")}`,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const selectUntilDateHandler = (val: MonthItem) => {
|
||||
const data = {
|
||||
...selectedDate,
|
||||
end: `${currentYear.until}/${val.end}`,
|
||||
fromMonth: val.label,
|
||||
};
|
||||
setSelectedDate(data);
|
||||
EventBus.emit("dateSelected", data);
|
||||
toggleCalendar();
|
||||
};
|
||||
|
||||
const toggleCalendar = () => {
|
||||
setOpenCalendar(!openCalendar);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (
|
||||
calendarRef.current &&
|
||||
!calendarRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setOpenCalendar(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
className={cn(
|
||||
"backdrop-blur-sm border-b border-gray-400/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30",
|
||||
className,
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Left Section */}
|
||||
|
|
@ -77,16 +228,66 @@ export function Header({
|
|||
<PanelLeft />
|
||||
)}
|
||||
{title.includes("-") ? (
|
||||
<span className="flex items-center gap-1">
|
||||
<div className="flex row items-center gap-4">
|
||||
<div className="flex items-center gap-1">
|
||||
{title.split("-")[0]}
|
||||
<ChevronLeft className="inline-block w-4 h-4" />
|
||||
{title.split("-")[1]}
|
||||
</span>
|
||||
) : (
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
title
|
||||
)}
|
||||
|
||||
)}
|
||||
</h1>
|
||||
|
||||
<div ref={calendarRef} className="flex flex-col gap-3 relative">
|
||||
<div
|
||||
onClick={toggleCalendar}
|
||||
className="flex flex-row w-full gap-2 items-center border border-pr-gray p-1.5 rounded-md px-2.5 min-w-64 cursor-pointer hover:bg-pr-gray/50 transition-all duration-300"
|
||||
>
|
||||
<Calendar size={20} />
|
||||
{selectedDate ? (
|
||||
<div className="flex flex-row justify-between w-full min-w-36 font-bold gap-1">
|
||||
<div className="flex flex-row gap-1.5 w-max">
|
||||
<span className="text-md">از</span>
|
||||
<span className="text-md">{selectedDate?.sinceMonth}</span>
|
||||
<span className="text-md">{currentYear.since}</span>
|
||||
</div>
|
||||
<div className="flex flex-row gap-1.5 w-max">
|
||||
<span className="text-md">تا</span>
|
||||
<span className="text-md">{selectedDate?.fromMonth}</span>
|
||||
<span className="text-md">{currentYear.until}</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
"تاریخ مورد نظر خود را انتخاب نمایید"
|
||||
)}
|
||||
</div>
|
||||
|
||||
{openCalendar && (
|
||||
<div className="flex flex-row gap-2.5 absolute top-14 right-[-40px] p-2.5 !pt-3.5 w-80 rounded-3xl overflow-hidden bg-pr-gray border-2 border-[#5F6284]">
|
||||
<CustomCalendar
|
||||
title="از"
|
||||
nextYearHandler={nextFromYearHandler}
|
||||
prevYearHandler={prevFromYearHandler}
|
||||
currentYear={currentYear?.since}
|
||||
monthList={monthList}
|
||||
selectedDate={selectedDate?.sinceMonth}
|
||||
selectDateHandler={selectFromDateHandler}
|
||||
/>
|
||||
<span className="w-0.5 h-[12.5rem] border border-[#5F6284] block "></span>
|
||||
<CustomCalendar
|
||||
title="تا"
|
||||
nextYearHandler={nextUntilYearHandler}
|
||||
prevYearHandler={prevUntilYearHandler}
|
||||
currentYear={currentYear?.until}
|
||||
monthList={monthList}
|
||||
selectedDate={selectedDate?.fromMonth}
|
||||
selectDateHandler={selectUntilDateHandler}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Section */}
|
||||
|
|
@ -94,14 +295,15 @@ export function Header({
|
|||
{/* User Menu */}
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
{
|
||||
user?.id === 2041 && <button
|
||||
{user?.id === 2041 && (
|
||||
<button
|
||||
className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
|
||||
onClick={redirectHandler}>
|
||||
onClick={redirectHandler}
|
||||
>
|
||||
<Server className="h-4 w-4" />
|
||||
ورود به میزکار مدیریت</button>
|
||||
}
|
||||
ورود به میزکار مدیریت
|
||||
</button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
|
|
@ -109,7 +311,6 @@ export function Header({
|
|||
onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
|
||||
className="flex items-center gap-2 text-gray-300"
|
||||
>
|
||||
|
||||
<div className="hidden sm:block text-right">
|
||||
<div className="text-sm font-medium font-persian">
|
||||
{user?.name} {user?.family}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Sidebar } from "./sidebar";
|
||||
import { Header } from "./header";
|
||||
import { Sidebar } from "./sidebar";
|
||||
import { StrategicAlignmentPopup } from "./strategic-alignment-popup";
|
||||
import apiService from "~/lib/api";
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
children: React.ReactNode;
|
||||
|
|
@ -18,9 +17,14 @@ export function DashboardLayout({
|
|||
}: DashboardLayoutProps) {
|
||||
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
|
||||
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
|
||||
const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] = useState(false);
|
||||
const [currentTitle, setCurrentTitle] = useState<string | undefined>(title ?? "صفحه اول");
|
||||
const [currentTitleIcon, setCurrentTitleIcon] = useState<React.ComponentType<{ className?: string }> | null | undefined>(undefined);
|
||||
const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] =
|
||||
useState(false);
|
||||
const [currentTitle, setCurrentTitle] = useState<string | undefined>(
|
||||
title ?? "صفحه اول"
|
||||
);
|
||||
const [currentTitleIcon, setCurrentTitleIcon] = useState<
|
||||
React.ComponentType<{ className?: string }> | null | undefined
|
||||
>(undefined);
|
||||
|
||||
const toggleSidebarCollapse = () => {
|
||||
setIsSidebarCollapsed(!isSidebarCollapsed);
|
||||
|
|
@ -30,8 +34,6 @@ export function DashboardLayout({
|
|||
setIsMobileSidebarOpen(!isMobileSidebarOpen);
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div
|
||||
className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden"
|
||||
|
|
@ -55,19 +57,20 @@ export function DashboardLayout({
|
|||
"fixed inset-y-0 right-0 z-50 flex flex-col lg:static lg:inset-auto lg:translate-x-0 transition-transform duration-300 ease-in-out",
|
||||
isMobileSidebarOpen
|
||||
? "translate-x-0"
|
||||
: "translate-x-full lg:translate-x-0",
|
||||
: "translate-x-full lg:translate-x-0"
|
||||
)}
|
||||
>
|
||||
<Sidebar
|
||||
isCollapsed={isSidebarCollapsed}
|
||||
onToggleCollapse={toggleSidebarCollapse}
|
||||
className="h-full flex-shrink-0 relative z-10"
|
||||
onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)}
|
||||
onStrategicAlignmentClick={() =>
|
||||
setIsStrategicAlignmentPopupOpen(true)
|
||||
}
|
||||
onTitleChange={(info) => {
|
||||
setCurrentTitle(info.title);
|
||||
setCurrentTitleIcon(info.icon ?? null);
|
||||
}}
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -85,7 +88,7 @@ export function DashboardLayout({
|
|||
<main
|
||||
className={cn(
|
||||
"flex-1 overflow-x-hidden overflow-y-auto focus:outline-none transition-all duration-300 min-w-0",
|
||||
className,
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="relative h-full min-w-0 w-full z-10 overflow-x-hidden p-5">
|
||||
|
|
@ -93,7 +96,10 @@ export function DashboardLayout({
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<StrategicAlignmentPopup open={isStrategicAlignmentPopupOpen} onOpenChange={setIsStrategicAlignmentPopupOpen} />
|
||||
<StrategicAlignmentPopup
|
||||
open={isStrategicAlignmentPopupOpen}
|
||||
onOpenChange={setIsStrategicAlignmentPopupOpen}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
BrainCircuit,
|
||||
ChevronDown,
|
||||
|
|
@ -12,7 +13,7 @@ import {
|
|||
Zap,
|
||||
} from "lucide-react";
|
||||
import moment from "moment-jalaali";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
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";
|
||||
|
|
@ -34,7 +35,8 @@ import {
|
|||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { DashboardLayout } from "../layout";
|
||||
|
||||
moment.loadPersian({ usePersianDigits: true });
|
||||
|
|
@ -146,13 +148,18 @@ const columns = [
|
|||
];
|
||||
|
||||
export function DigitalInnovationPage() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [projects, setProjects] = useState<DigitalInnovationMetrics[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize] = useState(20);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
// const [totalCount, setTotalCount] = useState(0);
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
const [actualTotalCount, setActualTotalCount] = useState(0);
|
||||
const [statsLoading, setStatsLoading] = useState(false);
|
||||
const [rating, setRating] = useState<ListItem[]>([]);
|
||||
|
|
@ -281,7 +288,11 @@ export function DigitalInnovationPage() {
|
|||
"reduce_costs_percent",
|
||||
],
|
||||
Sorts: [[sortConfig.field, sortConfig.direction]],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
});
|
||||
|
||||
|
|
@ -294,16 +305,16 @@ export function DigitalInnovationPage() {
|
|||
if (reset) {
|
||||
setProjects(parsedData);
|
||||
// calculateAverage(parsedData);
|
||||
setTotalCount(parsedData.length);
|
||||
// setTotalCount(parsedData.length);
|
||||
} else {
|
||||
setProjects((prev) => [...prev, ...parsedData]);
|
||||
setTotalCount((prev) => prev + parsedData.length);
|
||||
// setTotalCount((prev) => prev + parsedData.length);
|
||||
}
|
||||
setHasMore(parsedData.length === pageSize);
|
||||
} else {
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
|
@ -311,14 +322,14 @@ export function DigitalInnovationPage() {
|
|||
console.error("Error parsing project data:", parseError);
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
} else {
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
|
@ -326,7 +337,7 @@ export function DigitalInnovationPage() {
|
|||
toast.error(response.message || "خطا در دریافت اطلاعات پروژهها");
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
|
@ -335,7 +346,7 @@ export function DigitalInnovationPage() {
|
|||
toast.error("خطا در دریافت اطلاعات پروژهها");
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
} finally {
|
||||
|
|
@ -356,7 +367,15 @@ export function DigitalInnovationPage() {
|
|||
fetchTable(true);
|
||||
fetchTotalCount();
|
||||
fetchStats();
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -412,19 +431,23 @@ export function DigitalInnovationPage() {
|
|||
direction:
|
||||
prev.field === field && prev.direction === "asc" ? "desc" : "asc",
|
||||
}));
|
||||
fetchTotalCount();
|
||||
fetchStats();
|
||||
fetchTotalCount(date?.start, date?.end);
|
||||
fetchStats(date?.start, date?.end);
|
||||
setCurrentPage(1);
|
||||
setProjects([]);
|
||||
setHasMore(true);
|
||||
};
|
||||
|
||||
const fetchTotalCount = async () => {
|
||||
const fetchTotalCount = async (startDate?: string, endDate?: string) => {
|
||||
try {
|
||||
const response = await apiService.select({
|
||||
ProcessName: "project",
|
||||
OutputFields: ["count(project_no)"],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -451,7 +474,10 @@ export function DigitalInnovationPage() {
|
|||
try {
|
||||
setStatsLoading(true);
|
||||
const raw = await apiService.call<any>({
|
||||
innovation_digital_function: {},
|
||||
innovation_digital_function: {
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
|
||||
// let payload: DigitalInnovationMetrics = raw?.data;
|
||||
|
|
@ -529,33 +555,33 @@ export function DigitalInnovationPage() {
|
|||
// fetchStats();
|
||||
// };
|
||||
|
||||
const renderProgress = useMemo(() => {
|
||||
const total = 10;
|
||||
for (let i = 0; i < rating.length; i++) {
|
||||
const currentElm = rating[i];
|
||||
currentElm.house = [];
|
||||
const greenBoxes = Math.floor((total * currentElm.development) / 100);
|
||||
const partialPercent =
|
||||
(total * currentElm.development) / 100 - greenBoxes;
|
||||
for (let j = 0; j < greenBoxes; j++) {
|
||||
currentElm.house.push({
|
||||
index: j,
|
||||
color: "!bg-emerald-400",
|
||||
});
|
||||
}
|
||||
if (partialPercent != 0 && greenBoxes != 10)
|
||||
currentElm.house.push({
|
||||
index: greenBoxes + 1,
|
||||
style: `linear-gradient(
|
||||
to right,
|
||||
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%
|
||||
)`,
|
||||
});
|
||||
}
|
||||
}, [rating]);
|
||||
// const renderProgress = useMemo(() => {
|
||||
// const total = 10;
|
||||
// for (let i = 0; i < rating.length; i++) {
|
||||
// const currentElm = rating[i];
|
||||
// currentElm.house = [];
|
||||
// const greenBoxes = Math.floor((total * currentElm.development) / 100);
|
||||
// const partialPercent =
|
||||
// (total * currentElm.development) / 100 - greenBoxes;
|
||||
// for (let j = 0; j < greenBoxes; j++) {
|
||||
// currentElm.house.push({
|
||||
// index: j,
|
||||
// color: "!bg-emerald-400",
|
||||
// });
|
||||
// }
|
||||
// if (partialPercent != 0 && greenBoxes != 10)
|
||||
// currentElm.house.push({
|
||||
// index: greenBoxes + 1,
|
||||
// style: `linear-gradient(
|
||||
// to right,
|
||||
// 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%
|
||||
// )`,
|
||||
// });
|
||||
// }
|
||||
// }, [rating]);
|
||||
|
||||
const statusColor = (status: projectStatus): any => {
|
||||
let el = null;
|
||||
|
|
|
|||
|
|
@ -26,8 +26,9 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatNumber } from "~/lib/utils";
|
||||
|
||||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
Building2,
|
||||
ChevronDown,
|
||||
|
|
@ -46,6 +47,7 @@ import {
|
|||
import toast from "react-hot-toast";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import DashboardLayout from "../layout";
|
||||
|
||||
// moment.loadPersian({ usePersianDigits: true });
|
||||
|
|
@ -157,6 +159,7 @@ const columns = [
|
|||
];
|
||||
|
||||
export function GreenInnovationPage() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [projects, setProjects] = useState<GreenInnovationData[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
|
@ -166,6 +169,10 @@ export function GreenInnovationPage() {
|
|||
const [totalCount, setTotalCount] = useState(0);
|
||||
const [actualTotalCount, setActualTotalCount] = useState(0);
|
||||
const [statsLoading, setStatsLoading] = useState(false);
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
const [stats, setStats] = useState<stateCounter>();
|
||||
const [sortConfig, setSortConfig] = useState<SortConfig>({
|
||||
field: "start_date",
|
||||
|
|
@ -288,7 +295,11 @@ export function GreenInnovationPage() {
|
|||
"observer",
|
||||
],
|
||||
Sorts: [[sortConfig.field, sortConfig.direction]],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری سبز"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری سبز", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
});
|
||||
if (response.state === 0) {
|
||||
|
|
@ -350,6 +361,14 @@ export function GreenInnovationPage() {
|
|||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const loadMore = useCallback(() => {
|
||||
if (hasMore && !loading) {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
|
|
@ -359,11 +378,11 @@ export function GreenInnovationPage() {
|
|||
useEffect(() => {
|
||||
fetchProjects(true);
|
||||
fetchTotalCount();
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [selectedProjects]);
|
||||
}, [selectedProjects, date]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -416,7 +435,11 @@ export function GreenInnovationPage() {
|
|||
const response = await apiService.select({
|
||||
ProcessName: "project",
|
||||
OutputFields: ["count(project_no)"],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری سبز"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری سبز", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
if (response.state === 0) {
|
||||
const dataString = response.data;
|
||||
|
|
@ -448,6 +471,8 @@ export function GreenInnovationPage() {
|
|||
selectedProjects.size > 0
|
||||
? Array.from(selectedProjects).join(" , ")
|
||||
: "",
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
let payload: any = raw?.data;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ import {
|
|||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
|
||||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
|
|
@ -40,7 +41,8 @@ import {
|
|||
XAxis,
|
||||
} from "recharts";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import DashboardLayout from "../layout";
|
||||
|
||||
interface innovationBuiltInDate {
|
||||
|
|
@ -177,6 +179,7 @@ const dialogChartData = [
|
|||
];
|
||||
|
||||
export function InnovationBuiltInsidePage() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [projects, setProjects] = useState<innovationBuiltInDate[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
|
@ -191,6 +194,10 @@ export function InnovationBuiltInsidePage() {
|
|||
field: "start_date",
|
||||
direction: "asc",
|
||||
});
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
const [tblAvarage, setTblAvarage] = useState<number>(0);
|
||||
const [selectedProjects, setSelectedProjects] =
|
||||
useState<Set<string | number>>();
|
||||
|
|
@ -310,7 +317,11 @@ export function InnovationBuiltInsidePage() {
|
|||
"technology_maturity_level",
|
||||
],
|
||||
Sorts: [[sortConfig.field, sortConfig.direction]],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری ساخت داخل"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری ساخت داخل", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
});
|
||||
if (response.state === 0) {
|
||||
|
|
@ -416,13 +427,21 @@ export function InnovationBuiltInsidePage() {
|
|||
}
|
||||
}, [hasMore, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects(true);
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [selectedProjects]);
|
||||
}, [selectedProjects, date]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -480,6 +499,8 @@ export function InnovationBuiltInsidePage() {
|
|||
selectedProjects && selectedProjects?.size > 0
|
||||
? Array.from(selectedProjects).join(" , ")
|
||||
: "",
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
let payload: any = raw?.data;
|
||||
|
|
@ -624,7 +645,8 @@ export function InnovationBuiltInsidePage() {
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleProjectDetails(item)}
|
||||
className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto">
|
||||
className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
|
||||
>
|
||||
جزئیات بیشتر
|
||||
</Button>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,40 @@
|
|||
import { ChevronDown, ChevronUp, RefreshCw, Eye, Star, TrendingUp, Hexagon, Download } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState, useMemo, memo } from "react";
|
||||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Download,
|
||||
Hexagon,
|
||||
RefreshCw,
|
||||
Star,
|
||||
TrendingUp,
|
||||
} from "lucide-react";
|
||||
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
Label,
|
||||
LabelList,
|
||||
PolarGrid,
|
||||
PolarRadiusAxis,
|
||||
RadialBar,
|
||||
RadialBarChart,
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { BaseCard } from "~/components/ui/base-card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
import { ChartContainer, type ChartConfig } from "~/components/ui/chart";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog";
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -19,20 +44,9 @@ import {
|
|||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { DashboardLayout } from "../layout";
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
type ChartConfig,
|
||||
} from "~/components/ui/chart";
|
||||
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, CartesianGrid, LabelList, Cell, RadialBarChart, PolarGrid, RadialBar, PolarRadiusAxis } from "recharts";
|
||||
import { BaseCard } from "~/components/ui/base-card";
|
||||
import { Label } from "recharts"
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
|
||||
|
||||
|
||||
interface IdeaData {
|
||||
idea_title: string;
|
||||
|
|
@ -86,9 +100,19 @@ type ColumnDef = {
|
|||
|
||||
const columns: ColumnDef[] = [
|
||||
{ key: "idea_title", label: "عنوان ایده", sortable: true, width: "250px" },
|
||||
{ key: "idea_registration_date", label: "تاریخ ثبت ایده", sortable: true, width: "180px" },
|
||||
{
|
||||
key: "idea_registration_date",
|
||||
label: "تاریخ ثبت ایده",
|
||||
sortable: true,
|
||||
width: "180px",
|
||||
},
|
||||
{ key: "idea_status", label: "وضعیت ایده", sortable: true, width: "150px" },
|
||||
{ key: "increased_revenue", label: "درآمد حاصل از ایده", sortable: true, width: "180px" },
|
||||
{
|
||||
key: "increased_revenue",
|
||||
label: "درآمد حاصل از ایده",
|
||||
sortable: true,
|
||||
width: "180px",
|
||||
},
|
||||
{ key: "details", label: "جزئیات بیشتر", sortable: false, width: "120px" },
|
||||
];
|
||||
|
||||
|
|
@ -100,7 +124,15 @@ const VerticalBarChart = memo<{
|
|||
getChartStatusColor: (status: string) => string;
|
||||
toPersianDigits: (input: string | number) => string;
|
||||
formatNumber: (value: number) => string;
|
||||
}>(({ chartData, loadingChart, chartConfig, getChartStatusColor, toPersianDigits, formatNumber }) => {
|
||||
}>(
|
||||
({
|
||||
chartData,
|
||||
loadingChart,
|
||||
chartConfig,
|
||||
getChartStatusColor,
|
||||
toPersianDigits,
|
||||
formatNumber,
|
||||
}) => {
|
||||
if (loadingChart) {
|
||||
return (
|
||||
<div className="p-6 space-y-4">
|
||||
|
|
@ -112,7 +144,10 @@ const VerticalBarChart = memo<{
|
|||
{/* Y-axis labels */}
|
||||
<div className="absolute left-2 top-4 space-y-6">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="h-3 bg-gray-600 rounded animate-pulse w-6"></div>
|
||||
<div
|
||||
key={i}
|
||||
className="h-3 bg-gray-600 rounded animate-pulse w-6"
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
|
@ -138,18 +173,24 @@ const VerticalBarChart = memo<{
|
|||
if (!chartData.length) {
|
||||
return (
|
||||
<div className="p-6 text-center">
|
||||
<h3 className="text-lg font-persian font-semibold text-white mb-4">وضعیت ایده ها</h3>
|
||||
<h3 className="text-lg font-persian font-semibold text-white mb-4">
|
||||
وضعیت ایده ها
|
||||
</h3>
|
||||
<p className="text-gray-400 font-persian">هیچ دادهای یافت نشد</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Prepare data for recharts
|
||||
const rechartData = useMemo(() => chartData.map((item) => ({
|
||||
const rechartData = useMemo(
|
||||
() =>
|
||||
chartData.map((item) => ({
|
||||
status: item.idea_status,
|
||||
count: item.idea_status_count,
|
||||
fill: getChartStatusColor(item.idea_status),
|
||||
})), [chartData, getChartStatusColor]);
|
||||
})),
|
||||
[chartData, getChartStatusColor]
|
||||
);
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%">
|
||||
|
|
@ -167,9 +208,9 @@ const VerticalBarChart = memo<{
|
|||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: '#fff',
|
||||
fill: "#fff",
|
||||
fontSize: 14,
|
||||
fontFamily: 'inherit'
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
interval={0}
|
||||
angle={0}
|
||||
|
|
@ -181,9 +222,9 @@ const VerticalBarChart = memo<{
|
|||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{
|
||||
fill: '#9CA3AF',
|
||||
fill: "#9CA3AF",
|
||||
fontSize: 12,
|
||||
fontFamily: 'inherit'
|
||||
fontFamily: "inherit",
|
||||
}}
|
||||
tickFormatter={(value) => toPersianDigits(value)}
|
||||
label={{
|
||||
|
|
@ -197,10 +238,7 @@ const VerticalBarChart = memo<{
|
|||
style: { textAnchor: "middle" },
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="count"
|
||||
radius={[4, 4, 0, 0]}
|
||||
>
|
||||
<Bar dataKey="count" radius={[4, 4, 0, 0]}>
|
||||
<LabelList
|
||||
dataKey="count"
|
||||
position="top"
|
||||
|
|
@ -217,11 +255,13 @@ const VerticalBarChart = memo<{
|
|||
</ChartContainer>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const MemoizedVerticalBarChart = VerticalBarChart;
|
||||
|
||||
export function ManageIdeasTechPage() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [ideas, setIdeas] = useState<IdeaData[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
|
@ -236,6 +276,10 @@ export function ManageIdeasTechPage() {
|
|||
field: "idea_title",
|
||||
direction: "asc",
|
||||
});
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
|
||||
// People ranking state
|
||||
const [peopleRanking, setPeopleRanking] = useState<PersonRanking[]>([]);
|
||||
|
|
@ -293,7 +337,10 @@ export function ManageIdeasTechPage() {
|
|||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
Sorts: [[sortConfig.field, sortConfig.direction]],
|
||||
Conditions: [],
|
||||
Conditions: [
|
||||
["idea_registration_date", ">=", date?.start || null, "and"],
|
||||
["idea_registration_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -361,13 +408,21 @@ export function ManageIdeasTechPage() {
|
|||
}
|
||||
}, [hasMore, loading, loadingMore]);
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchIdeas(true);
|
||||
fetchTotalCount();
|
||||
fetchPeopleRanking();
|
||||
fetchChartData();
|
||||
fetchStatsData();
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -380,7 +435,8 @@ export function ManageIdeasTechPage() {
|
|||
const scrollContainer = scrollContainerRef.current;
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
|
||||
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
|
||||
return;
|
||||
|
||||
if (scrollTimeoutRef.current) {
|
||||
clearTimeout(scrollTimeoutRef.current);
|
||||
|
|
@ -397,7 +453,9 @@ export function ManageIdeasTechPage() {
|
|||
};
|
||||
|
||||
if (scrollContainer) {
|
||||
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
|
||||
scrollContainer.addEventListener("scroll", handleScroll, {
|
||||
passive: true,
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
|
|
@ -427,7 +485,10 @@ export function ManageIdeasTechPage() {
|
|||
const response = await apiService.select({
|
||||
ProcessName: "idea",
|
||||
OutputFields: ["count(idea_title)"],
|
||||
Conditions: [],
|
||||
Conditions: [
|
||||
["idea_registration_date", ">=", date?.start || null, "and"],
|
||||
["idea_registration_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -456,6 +517,10 @@ export function ManageIdeasTechPage() {
|
|||
ProcessName: "idea",
|
||||
OutputFields: ["full_name", "count(full_name)"],
|
||||
GroupBy: ["full_name"],
|
||||
Conditions: [
|
||||
["idea_registration_date", ">=", date?.start || null, "and"],
|
||||
["idea_registration_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -465,12 +530,14 @@ export function ManageIdeasTechPage() {
|
|||
const parsedData = JSON.parse(dataString);
|
||||
if (Array.isArray(parsedData)) {
|
||||
// Calculate rankings and stars
|
||||
const counts = parsedData.map(item => item.full_name_count);
|
||||
const counts = parsedData.map((item) => item.full_name_count);
|
||||
const maxCount = Math.max(...counts);
|
||||
const minCount = Math.min(...counts);
|
||||
|
||||
// Sort by count first (highest first)
|
||||
const sortedData = parsedData.sort((a, b) => b.full_name_count - a.full_name_count);
|
||||
const sortedData = parsedData.sort(
|
||||
(a, b) => b.full_name_count - a.full_name_count
|
||||
);
|
||||
|
||||
const rankedPeople = [];
|
||||
let currentRank = 1;
|
||||
|
|
@ -480,11 +547,15 @@ export function ManageIdeasTechPage() {
|
|||
const item = sortedData[i];
|
||||
|
||||
// If this is not the first person and their count is different from previous
|
||||
if (i > 0 && sortedData[i - 1].full_name_count !== item.full_name_count) {
|
||||
if (
|
||||
i > 0 &&
|
||||
sortedData[i - 1].full_name_count !== item.full_name_count
|
||||
) {
|
||||
currentRank = sum + 1; // New rank based on position
|
||||
sum++;
|
||||
}
|
||||
const normalizedScore = maxCount === minCount
|
||||
const normalizedScore =
|
||||
maxCount === minCount
|
||||
? 1
|
||||
: (item.full_name_count - minCount) / (maxCount - minCount);
|
||||
const stars = Math.max(1, Math.round(normalizedScore * 5));
|
||||
|
|
@ -503,7 +574,9 @@ export function ManageIdeasTechPage() {
|
|||
}
|
||||
}
|
||||
} else {
|
||||
toast.error(response.message || "خطا در دریافت اطلاعات رتبهبندی افراد");
|
||||
toast.error(
|
||||
response.message || "خطا در دریافت اطلاعات رتبهبندی افراد"
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching people ranking:", error);
|
||||
|
|
@ -521,6 +594,10 @@ export function ManageIdeasTechPage() {
|
|||
ProcessName: "idea",
|
||||
OutputFields: ["idea_status", "count(idea_status)"],
|
||||
GroupBy: ["idea_status"],
|
||||
Conditions: [
|
||||
["idea_registration_date", ">=", date?.start || null, "and"],
|
||||
["idea_registration_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -551,7 +628,10 @@ export function ManageIdeasTechPage() {
|
|||
setLoadingStats(true);
|
||||
|
||||
const response = await apiService.call({
|
||||
idea_page_function: {}
|
||||
idea_page_function: {
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -621,11 +701,14 @@ export function ManageIdeasTechPage() {
|
|||
};
|
||||
|
||||
// Chart configuration for shadcn/ui
|
||||
const chartConfig: ChartConfig = useMemo(() => ({
|
||||
const chartConfig: ChartConfig = useMemo(
|
||||
() => ({
|
||||
count: {
|
||||
label: "تعداد",
|
||||
},
|
||||
}), []);
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
// Color palette for idea status
|
||||
// Specific colors for idea statuses
|
||||
|
|
@ -644,7 +727,16 @@ export function ManageIdeasTechPage() {
|
|||
}
|
||||
}, []);
|
||||
|
||||
const statusColorPalette = ["#3AEA83", "#69C8EA", "#F76276", "#FFD700", "#A757FF", "#E884CE", "#C3BF8B", "#FB7185"];
|
||||
const statusColorPalette = [
|
||||
"#3AEA83",
|
||||
"#69C8EA",
|
||||
"#F76276",
|
||||
"#FFD700",
|
||||
"#A757FF",
|
||||
"#E884CE",
|
||||
"#C3BF8B",
|
||||
"#FB7185",
|
||||
];
|
||||
|
||||
// Build a mapping of status value -> color based on loaded ideas
|
||||
const statusColorMap = useMemo(() => {
|
||||
|
|
@ -681,9 +773,7 @@ export function ManageIdeasTechPage() {
|
|||
|
||||
switch (column.key) {
|
||||
case "idea_title":
|
||||
return (
|
||||
<span className="text-sm text-white">{String(value)}</span>
|
||||
);
|
||||
return <span className="text-sm text-white">{String(value)}</span>;
|
||||
case "idea_registration_date":
|
||||
return (
|
||||
<span className="text-white text-sm">
|
||||
|
|
@ -708,7 +798,7 @@ export function ManageIdeasTechPage() {
|
|||
case "increased_revenue":
|
||||
return (
|
||||
<span className="text-sm text-white w-full">
|
||||
{formatCurrency(String(value || "0")).replace("ریال" , "")}
|
||||
{formatCurrency(String(value || "0")).replace("ریال", "")}
|
||||
</span>
|
||||
);
|
||||
case "details":
|
||||
|
|
@ -720,7 +810,8 @@ export function ManageIdeasTechPage() {
|
|||
className="underline text-pr-green underline-offset-4 text-sm"
|
||||
>
|
||||
جزئیات بیشتر
|
||||
</Button> );
|
||||
</Button>
|
||||
);
|
||||
default:
|
||||
return (
|
||||
<span className="text-white text-sm">
|
||||
|
|
@ -730,12 +821,9 @@ export function ManageIdeasTechPage() {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<DashboardLayout title="مدیریت ایده های فناوری و نوآوری">
|
||||
<div className="space-y-6 h-full">
|
||||
|
||||
<div className="grid grid-cols-1 grid-rows-2 lg:grid-cols-3 gap-4 h-full">
|
||||
{/* People Ranking Table */}
|
||||
<div className="lg:col-span-1">
|
||||
|
|
@ -762,7 +850,10 @@ export function ManageIdeasTechPage() {
|
|||
<TableBody>
|
||||
{loadingPeople ? (
|
||||
Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={`skeleton-${index}`} className="text-sm leading-tight h-12">
|
||||
<TableRow
|
||||
key={`skeleton-${index}`}
|
||||
className="text-sm leading-tight h-12"
|
||||
>
|
||||
<TableCell className="text-center py-2 px-2">
|
||||
<div className="w-6 h-6 bg-muted rounded-full animate-pulse mx-auto" />
|
||||
</TableCell>
|
||||
|
|
@ -771,9 +862,14 @@ export function ManageIdeasTechPage() {
|
|||
</TableCell>
|
||||
<TableCell className="text-center py-2 px-2">
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
{Array.from({ length: 5 }).map((_, starIndex) => (
|
||||
<div key={starIndex} className="w-3 h-3 bg-muted rounded animate-pulse" />
|
||||
))}
|
||||
{Array.from({ length: 5 }).map(
|
||||
(_, starIndex) => (
|
||||
<div
|
||||
key={starIndex}
|
||||
className="w-3 h-3 bg-muted rounded animate-pulse"
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -788,7 +884,10 @@ export function ManageIdeasTechPage() {
|
|||
</TableRow>
|
||||
) : (
|
||||
peopleRanking.map((person) => (
|
||||
<TableRow key={person.full_name} className="text-sm leading-tight h-10 not-last:border-b-pr-gray border-border">
|
||||
<TableRow
|
||||
key={person.full_name}
|
||||
className="text-sm leading-tight h-10 not-last:border-b-pr-gray border-border"
|
||||
>
|
||||
<TableCell className="text-center py-2 px-2">
|
||||
<div className="flex items-center justify-center text-white text-sm mx-auto">
|
||||
{toPersianDigits(person.ranking)}
|
||||
|
|
@ -801,7 +900,8 @@ export function ManageIdeasTechPage() {
|
|||
</TableCell>
|
||||
<TableCell className="text-center py-4 px-2">
|
||||
<div className="flex mx-4 flex-row-reverse items-center justify-center gap-1">
|
||||
{Array.from({ length: 5 }).map((_, starIndex) => (
|
||||
{Array.from({ length: 5 }).map(
|
||||
(_, starIndex) => (
|
||||
<Star
|
||||
key={starIndex}
|
||||
className={`w-5 h-5 ${
|
||||
|
|
@ -810,7 +910,8 @@ export function ManageIdeasTechPage() {
|
|||
: "text-pr-gray"
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
|
@ -856,7 +957,10 @@ export function ManageIdeasTechPage() {
|
|||
>
|
||||
<span>{column.label}</span>
|
||||
{column.key === "increased_revenue" && (
|
||||
<span className="text-[#ACACAC] text-right font-light text-[8px]">میلیون <br/>ریال</span>
|
||||
<span className="text-[#ACACAC] text-right font-light text-[8px]">
|
||||
میلیون <br />
|
||||
ریال
|
||||
</span>
|
||||
)}
|
||||
{sortConfig.field === column.key ? (
|
||||
sortConfig.direction === "asc" ? (
|
||||
|
|
@ -891,7 +995,9 @@ export function ManageIdeasTechPage() {
|
|||
<div className="w-3 h-3 bg-muted rounded-full animate-pulse" />
|
||||
<div
|
||||
className="h-3 bg-muted rounded animate-pulse"
|
||||
style={{ width: `${Math.random() * 60 + 40}%` }}
|
||||
style={{
|
||||
width: `${Math.random() * 60 + 40}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
|
@ -931,9 +1037,7 @@ export function ManageIdeasTechPage() {
|
|||
</div>
|
||||
|
||||
{/* Infinite scroll trigger */}
|
||||
<div ref={observerRef} className="h-auto">
|
||||
|
||||
</div>
|
||||
<div ref={observerRef} className="h-auto"></div>
|
||||
</CardContent>
|
||||
|
||||
{/* Footer */}
|
||||
|
|
@ -947,14 +1051,17 @@ export function ManageIdeasTechPage() {
|
|||
<div className="flex items-center justify-center py-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-success" />
|
||||
<span className="font-persian text-muted-foreground text-sm">
|
||||
</span>
|
||||
<span className="font-persian text-muted-foreground text-sm"></span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Chart Section */}
|
||||
<BaseCard icon={TrendingUp} className="col-span-1 mt-12 row-start-2 col-start-3 row-span-1" title="نمودار ایدهها">
|
||||
<BaseCard
|
||||
icon={TrendingUp}
|
||||
className="col-span-1 mt-12 row-start-2 col-start-3 row-span-1"
|
||||
title="نمودار ایدهها"
|
||||
>
|
||||
<MemoizedVerticalBarChart
|
||||
chartData={chartData}
|
||||
loadingChart={loadingChart}
|
||||
|
|
@ -994,18 +1101,19 @@ export function ManageIdeasTechPage() {
|
|||
browser: "ideas",
|
||||
visitors:
|
||||
parseFloat(
|
||||
statsData?.registered_innovation_technology_idea || "0"
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"0"
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
statsData?.registered_innovation_technology_idea || "0",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"0"
|
||||
) /
|
||||
parseFloat(
|
||||
statsData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"1"
|
||||
)) *
|
||||
100,
|
||||
100
|
||||
)
|
||||
: 0,
|
||||
fill: "var(--color-green)",
|
||||
|
|
@ -1015,20 +1123,19 @@ export function ManageIdeasTechPage() {
|
|||
endAngle={
|
||||
90 +
|
||||
((parseFloat(
|
||||
statsData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"0"
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
statsData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
statsData?.ongoing_innovation_technology_ideas ||
|
||||
"0"
|
||||
) /
|
||||
parseFloat(
|
||||
statsData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"1"
|
||||
)) *
|
||||
100,
|
||||
100
|
||||
)
|
||||
: 0) /
|
||||
100) *
|
||||
|
|
@ -1072,24 +1179,21 @@ export function ManageIdeasTechPage() {
|
|||
%
|
||||
{formatNumber(
|
||||
parseFloat(
|
||||
statsData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"0",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"0"
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
statsData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
statsData?.ongoing_innovation_technology_ideas ||
|
||||
"0"
|
||||
) /
|
||||
parseFloat(
|
||||
statsData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"1"
|
||||
)) *
|
||||
100,
|
||||
100
|
||||
)
|
||||
: 0,
|
||||
: 0
|
||||
)}
|
||||
</tspan>
|
||||
</text>
|
||||
|
|
@ -1105,15 +1209,14 @@ export function ManageIdeasTechPage() {
|
|||
<span className="flex font-bold items-center gap-1 text-base">
|
||||
<div className="font-light text-sm">ثبت شده :</div>
|
||||
{formatNumber(
|
||||
statsData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
statsData?.registered_innovation_technology_idea ||
|
||||
"0"
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 font-bold text-base">
|
||||
<div className="font-light text-sm">در حال اجرا :</div>
|
||||
{formatNumber(
|
||||
statsData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
statsData?.ongoing_innovation_technology_ideas || "0"
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -1139,7 +1242,12 @@ export function ManageIdeasTechPage() {
|
|||
) : (
|
||||
<MetricCard
|
||||
title="درآمد افزایش یافته"
|
||||
value={statsData?.increased_revenue_from_ideas?.replaceAll("," , "") || "0"}
|
||||
value={
|
||||
statsData?.increased_revenue_from_ideas?.replaceAll(
|
||||
",",
|
||||
""
|
||||
) || "0"
|
||||
}
|
||||
percentValue={statsData?.increased_revenue_from_ideas_percent}
|
||||
percentLabel="درصد به کل درآمد"
|
||||
/>
|
||||
|
|
@ -1156,7 +1264,8 @@ export function ManageIdeasTechPage() {
|
|||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedIdea && <div className="flex w-full justify-center gap-4">
|
||||
{selectedIdea && (
|
||||
<div className="flex w-full justify-center gap-4">
|
||||
<div className="flex gap-4 flex-col text-right font-persian w-full border-l-2 border-l-pr-gray px-4 pb-4">
|
||||
{/* مشخصات ایده پردازان Section */}
|
||||
<div className="">
|
||||
|
|
@ -1166,39 +1275,59 @@ export function ManageIdeasTechPage() {
|
|||
<div className="flex flex-col gap-4 mr-5">
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]"/>
|
||||
<span className="text-white text-sm text-light">نام ایده پرداز:</span>
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">
|
||||
نام ایده پرداز:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{selectedIdea.full_name || "-"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.full_name || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">شماره پرسنلی:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
شماره پرسنلی:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{toPersianDigits(selectedIdea.personnel_number) || "۱۳۰۶۵۸۰۶"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{toPersianDigits(selectedIdea.personnel_number) ||
|
||||
"۱۳۰۶۵۸۰۶"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">مدیریت:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
مدیریت:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{selectedIdea.management || "مدیریت توسعه"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.management || "مدیریت توسعه"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">معاونت:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
معاونت:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{selectedIdea.deputy || "توسعه"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.deputy || "توسعه"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2 col-span-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">اعضای تیم:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
اعضای تیم:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.innovator_team_members || "رضا حسین پور, محمد رضا شیاطی, محمد مددی"}
|
||||
{selectedIdea.innovator_team_members ||
|
||||
"رضا حسین پور, محمد رضا شیاطی, محمد مددی"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1213,30 +1342,47 @@ export function ManageIdeasTechPage() {
|
|||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">تاریخ ثبت ایده:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
تاریخ ثبت ایده:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{formatDate(selectedIdea.idea_registration_date) || "-"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{formatDate(selectedIdea.idea_registration_date) ||
|
||||
"-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">نوع نوآوری:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
نوع نوآوری:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{selectedIdea.innovation_type || "-"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.innovation_type || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">اصالت ایده:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
اصالت ایده:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{selectedIdea.idea_originality || "-"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.idea_originality || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light min-w-max">محور ایده:</span>
|
||||
<span className="text-white text-sm text-light min-w-max">
|
||||
محور ایده:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal text-sm mr-10">{selectedIdea.idea_axis || "-"}</span>
|
||||
<span className="text-white font-normal text-sm mr-10">
|
||||
{selectedIdea.idea_axis || "-"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1249,33 +1395,38 @@ export function ManageIdeasTechPage() {
|
|||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">درآمد حاصل:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
درآمد حاصل:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white text-sm font-normal mr-10">{formatNumber(selectedIdea.increased_revenue) || "-"}
|
||||
<span className="text-white text-sm font-normal mr-10">
|
||||
{formatNumber(selectedIdea.increased_revenue) || "-"}
|
||||
<span className="text-[11px] mr-2 font-light">
|
||||
میلیون ریال
|
||||
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">مقاله چاپ شده:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
مقاله چاپ شده:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-normal cursor-pointer text-sm flex items-center gap-2 mr-10">
|
||||
<Download className="h-4 w-4" />
|
||||
|
||||
دانلود
|
||||
</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 items-center gap-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hexagon className="stroke-pr-green h-5 w-5 stroke-[1px]" />
|
||||
<span className="text-white text-sm text-light">پتنت ثبت شده:</span>
|
||||
<span className="text-white text-sm text-light">
|
||||
پتنت ثبت شده:
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white cursor-pointer font-normal text-sm flex items-center gap-2 mr-10">
|
||||
<Download className="h-4 w-4"/>
|
||||
<Download className="h-4 w-4" />
|
||||
دانلود
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -1283,7 +1434,6 @@ export function ManageIdeasTechPage() {
|
|||
</div>
|
||||
</div>
|
||||
<div className="w-full flex flex-col gap-8">
|
||||
|
||||
{/* شرح ایده Section */}
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-white mb-4">
|
||||
|
|
@ -1291,9 +1441,7 @@ export function ManageIdeasTechPage() {
|
|||
</h3>
|
||||
<div className="">
|
||||
<p className="text-white text-sm">
|
||||
{selectedIdea.idea_description ||
|
||||
"-"
|
||||
}
|
||||
{selectedIdea.idea_description || "-"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1305,9 +1453,7 @@ export function ManageIdeasTechPage() {
|
|||
</h3>
|
||||
<div className="">
|
||||
<p className="text-white leading-relaxed text-sm">
|
||||
{selectedIdea.idea_current_status_description ||
|
||||
"-"
|
||||
}
|
||||
{selectedIdea.idea_current_status_description || "-"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1319,9 +1465,7 @@ export function ManageIdeasTechPage() {
|
|||
</h3>
|
||||
<div>
|
||||
<p className="text-white leading-relaxed text-sm">
|
||||
{selectedIdea.idea_execution_benefits ||
|
||||
"-"
|
||||
}
|
||||
{selectedIdea.idea_execution_benefits || "-"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1333,15 +1477,13 @@ export function ManageIdeasTechPage() {
|
|||
</h3>
|
||||
<div>
|
||||
<p className="text-white leading-relaxed text-sm">
|
||||
{selectedIdea.process_improvements ||
|
||||
"-"
|
||||
}
|
||||
{selectedIdea.process_improvements || "-"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
Building2,
|
||||
ChevronDown,
|
||||
|
|
@ -35,7 +36,8 @@ import {
|
|||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { DashboardLayout } from "../layout";
|
||||
|
||||
moment.loadPersian({ usePersianDigits: true });
|
||||
|
|
@ -117,13 +119,18 @@ const columns = [
|
|||
];
|
||||
|
||||
export function ProcessInnovationPage() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [projects, setProjects] = useState<ProcessInnovationData[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize] = useState(20);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [totalCount, setTotalCount] = useState(0);
|
||||
// const [totalCount, setTotalCount] = useState(0);
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
const [actualTotalCount, setActualTotalCount] = useState(0);
|
||||
const [statsLoading, setStatsLoading] = useState(false);
|
||||
const [stats, setStats] = useState<InnovationStats>({
|
||||
|
|
@ -196,13 +203,13 @@ export function ProcessInnovationPage() {
|
|||
const fetchingRef = useRef(false);
|
||||
|
||||
// Selection handlers
|
||||
const handleSelectAll = () => {
|
||||
if (selectedProjects.size === projects.length) {
|
||||
setSelectedProjects(new Set());
|
||||
} else {
|
||||
setSelectedProjects(new Set(projects.map((p) => p.project_no)));
|
||||
}
|
||||
};
|
||||
// const handleSelectAll = () => {
|
||||
// if (selectedProjects.size === projects.length) {
|
||||
// setSelectedProjects(new Set());
|
||||
// } else {
|
||||
// setSelectedProjects(new Set(projects.map((p) => p.project_no)));
|
||||
// }
|
||||
// };
|
||||
|
||||
const handleSelectProject = (projectNo: string) => {
|
||||
const newSelected = new Set(selectedProjects);
|
||||
|
|
@ -256,7 +263,11 @@ export function ProcessInnovationPage() {
|
|||
"observer",
|
||||
],
|
||||
Sorts: [["start_date", "asc"]],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
});
|
||||
|
||||
|
|
@ -268,16 +279,16 @@ export function ProcessInnovationPage() {
|
|||
if (Array.isArray(parsedData)) {
|
||||
if (reset) {
|
||||
setProjects(parsedData);
|
||||
setTotalCount(parsedData.length);
|
||||
// setTotalCount(parsedData.length);
|
||||
} else {
|
||||
setProjects((prev) => [...prev, ...parsedData]);
|
||||
setTotalCount((prev) => prev + parsedData.length);
|
||||
// setTotalCount((prev) => prev + parsedData.length);
|
||||
}
|
||||
setHasMore(parsedData.length === pageSize);
|
||||
} else {
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
|
@ -285,14 +296,14 @@ export function ProcessInnovationPage() {
|
|||
console.error("Error parsing project data:", parseError);
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
} else {
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
|
@ -300,7 +311,7 @@ export function ProcessInnovationPage() {
|
|||
toast.error(response.message || "خطا در دریافت اطلاعات پروژهها");
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
}
|
||||
|
|
@ -309,7 +320,7 @@ export function ProcessInnovationPage() {
|
|||
toast.error("خطا در دریافت اطلاعات پروژهها");
|
||||
if (reset) {
|
||||
setProjects([]);
|
||||
setTotalCount(0);
|
||||
// setTotalCount(0);
|
||||
}
|
||||
setHasMore(false);
|
||||
} finally {
|
||||
|
|
@ -325,14 +336,22 @@ export function ProcessInnovationPage() {
|
|||
}
|
||||
}, [hasMore, loading]);
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects(true);
|
||||
fetchTotalCount();
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, [selectedProjects]);
|
||||
}, [selectedProjects, date]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -382,7 +401,11 @@ export function ProcessInnovationPage() {
|
|||
const response = await apiService.select({
|
||||
ProcessName: "project",
|
||||
OutputFields: ["count(project_no)"],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -416,6 +439,8 @@ export function ProcessInnovationPage() {
|
|||
selectedProjects.size > 0
|
||||
? Array.from(selectedProjects).join(" , ")
|
||||
: "",
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,46 +1,38 @@
|
|||
import {
|
||||
ArrowDownCircle,
|
||||
ArrowUpCircle,
|
||||
Building2,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
CirclePause,
|
||||
DollarSign,
|
||||
Funnel,
|
||||
Loader2,
|
||||
PickaxeIcon,
|
||||
RefreshCw,
|
||||
TrendingUp,
|
||||
UserIcon,
|
||||
UsersIcon,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { Bar, BarChart, LabelList } from "recharts";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
import { BaseCard } from "~/components/ui/base-card";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
import { Checkbox } from "~/components/ui/checkbox";
|
||||
import { Bar, BarChart, LabelList } from "recharts"
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
import {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
} from "~/components/ui/popover"
|
||||
PopoverTrigger,
|
||||
} from "~/components/ui/popover";
|
||||
|
||||
import { FunnelChart } from "~/components/ui/funnel-chart";
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
||||
import jalaali from "jalaali-js";
|
||||
import {
|
||||
CartesianGrid,
|
||||
Legend,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "~/components/ui/dialog";
|
||||
import { Label } from "~/components/ui/label";
|
||||
import { FunnelChart } from "~/components/ui/funnel-chart";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
|
|
@ -49,12 +41,11 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import { Tooltip as TooltipSh, TooltipTrigger } from "~/components/ui/tooltip";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatNumber, handleDataValue } from "~/lib/utils";
|
||||
import { EventBus, formatNumber, handleDataValue } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { DashboardLayout } from "../layout";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { Tooltip as TooltipSh, TooltipTrigger, TooltipContent } from "~/components/ui/tooltip";
|
||||
|
||||
|
||||
interface ProjectData {
|
||||
project_no: string;
|
||||
|
|
@ -139,15 +130,16 @@ const columns = [
|
|||
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
|
||||
];
|
||||
|
||||
|
||||
export default function Timeline( valueTimeLine : string) {
|
||||
export default function Timeline(valueTimeLine: string) {
|
||||
const stages = ["تجاری سازی", "توسعه", "تحلیل بازار", "ثبت ایده"];
|
||||
const currentStage = stages?.toReversed()?.findIndex((x : string) => x == valueTimeLine)
|
||||
const currentStage = stages
|
||||
?.toReversed()
|
||||
?.findIndex((x: string) => x == valueTimeLine);
|
||||
const per = () => {
|
||||
const main = stages?.findIndex((x) => x == "ثبت ایده")
|
||||
console.log( 'yay ' , 25 * main + 12.5);
|
||||
return 25 * main + 12.5
|
||||
}
|
||||
const main = stages?.findIndex((x) => x == "ثبت ایده");
|
||||
console.log("yay ", 25 * main + 12.5);
|
||||
return 25 * main + 12.5;
|
||||
};
|
||||
return (
|
||||
<div className="w-full p-4">
|
||||
{/* Year labels */}
|
||||
|
|
@ -160,12 +152,17 @@ export default function Timeline( valueTimeLine : string) {
|
|||
{/* Timeline bar */}
|
||||
<div className="relative rounded-lg flex mb-4 items-center">
|
||||
{stages.map((stage, index) => (
|
||||
<div key={stage} className="flex-1 flex flex-col items-center relative">
|
||||
<div
|
||||
key={stage}
|
||||
className="flex-1 flex flex-col items-center relative"
|
||||
>
|
||||
<TooltipSh>
|
||||
<TooltipTrigger asChild>
|
||||
<div
|
||||
className={`w-full py-2 text-center transition-colors duration-300 ${
|
||||
index <= currentStage ? "bg-[#3D7968] text-white" : "bg-[#3AEA83] text-slate-600"
|
||||
index <= currentStage
|
||||
? "bg-[#3D7968] text-white"
|
||||
: "bg-[#3AEA83] text-slate-600"
|
||||
}`}
|
||||
>
|
||||
<span className="mt-1 text-sm">{stage}</span>
|
||||
|
|
@ -176,25 +173,33 @@ export default function Timeline( valueTimeLine : string) {
|
|||
))}
|
||||
|
||||
{/* Vertical line showing current position */}
|
||||
{ valueTimeLine?.length > 0 && ( <> <div
|
||||
{valueTimeLine?.length > 0 && (
|
||||
<>
|
||||
{" "}
|
||||
<div
|
||||
className={`absolute top-0 h-[150%] bottom-0 w-[2px] bg-white rounded-full`}
|
||||
style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
|
||||
style={{
|
||||
left: `${(currentStage + 0.5) * (100 / stages.length)}%`,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-15 h-[max-content] translate-x-[-50%] text-xs text-gray-300 border-gray-400 rounded-md border px-2 bottom-0"
|
||||
style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
|
||||
>وضعیت فعلی</div>
|
||||
</> ) }
|
||||
|
||||
style={{
|
||||
left: `${(currentStage + 0.5) * (100 / stages.length)}%`,
|
||||
}}
|
||||
>
|
||||
وضعیت فعلی
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function ProductInnovationPage() {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
// const [showPopup, setShowPopup] = useState(false);
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [projects, setProjects] = useState<ProductInnovationData[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
|
@ -241,7 +246,7 @@ export function ProductInnovationPage() {
|
|||
description: "میلیون ریال",
|
||||
descriptionPercent: "درصد به کل درآمد",
|
||||
color: "text-[#3AEA83]",
|
||||
percent :0
|
||||
percent: 0,
|
||||
},
|
||||
newProductExports: {
|
||||
id: "newProductExports",
|
||||
|
|
@ -259,45 +264,53 @@ export function ProductInnovationPage() {
|
|||
},
|
||||
});
|
||||
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
const observerRef = useRef<HTMLDivElement>(null);
|
||||
const fetchingRef = useRef(false);
|
||||
|
||||
|
||||
|
||||
const handleProjectDetails = async (project: ProductInnovationData) => {
|
||||
setSelectedProjectDetails(project);
|
||||
console.log(project)
|
||||
setDetailsDialogOpen(true);
|
||||
await fetchPopupData(project);
|
||||
await fetchPopupData(project, date?.start, date?.end);
|
||||
};
|
||||
|
||||
const fetchPopupData = async (project: ProductInnovationData) => {
|
||||
const fetchPopupData = async (
|
||||
project: ProductInnovationData,
|
||||
startDate?: string,
|
||||
endDate?: string
|
||||
) => {
|
||||
try {
|
||||
setPopupLoading(true);
|
||||
|
||||
// Fetch popup stats
|
||||
const statsResponse = await apiService.call({
|
||||
innovation_product_popup_function1: {
|
||||
project_id: project.project_id
|
||||
}
|
||||
project_id: project.project_id,
|
||||
start_date: startDate || null,
|
||||
end_date: endDate || null,
|
||||
},
|
||||
});
|
||||
|
||||
if (statsResponse.state === 0) {
|
||||
const statsData = JSON.parse(statsResponse.data);
|
||||
if (statsData.innovation_product_popup_function1 && statsData.innovation_product_popup_function1[0]) {
|
||||
setPopupStats(JSON.parse(statsData.innovation_product_popup_function1)[0]);
|
||||
if (
|
||||
statsData.innovation_product_popup_function1 &&
|
||||
statsData.innovation_product_popup_function1[0]
|
||||
) {
|
||||
setPopupStats(
|
||||
JSON.parse(statsData.innovation_product_popup_function1)[0]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch export chart data
|
||||
const chartResponse = await apiService.select({
|
||||
ProcessName: "export_product_innovation",
|
||||
OutputFields: [
|
||||
"product_title",
|
||||
"full_season",
|
||||
"sum(export_revenue)"
|
||||
],
|
||||
GroupBy: ["product_title", "full_season"]
|
||||
OutputFields: ["product_title", "full_season", "sum(export_revenue)"],
|
||||
GroupBy: ["product_title", "full_season"],
|
||||
});
|
||||
if (chartResponse.state === 0) {
|
||||
const chartData = JSON.parse(chartResponse.data);
|
||||
|
|
@ -305,14 +318,13 @@ export function ProductInnovationPage() {
|
|||
// Set all data for line chart
|
||||
|
||||
// Filter data for the selected project (bar chart)
|
||||
const filteredData = chartData.filter(item =>
|
||||
item.product_title === project?.title
|
||||
const filteredData = chartData.filter(
|
||||
(item) => item.product_title === project?.title
|
||||
);
|
||||
setAllExportData(chartData);
|
||||
setExportChartData(filteredData);
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching popup data:", error);
|
||||
} finally {
|
||||
|
|
@ -358,10 +370,14 @@ export function ProductInnovationPage() {
|
|||
"knowledge_based_certificate_obtained",
|
||||
"knowledge_based_certificate_number",
|
||||
"certificate_obtain_date",
|
||||
"issuing_authority"
|
||||
"issuing_authority",
|
||||
],
|
||||
Sorts: [["start_date", "asc"]],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری در محصول"]],
|
||||
Conditions: [
|
||||
["type_of_innovation", "=", "نوآوری در محصول", "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
});
|
||||
|
||||
|
|
@ -427,8 +443,12 @@ export function ProductInnovationPage() {
|
|||
const fetchStats = async () => {
|
||||
try {
|
||||
setStatsLoading(true);
|
||||
|
||||
const raw = await apiService.call<any>({
|
||||
innovation_product_function: {},
|
||||
innovation_product_function: {
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
|
||||
let payload: any = JSON.parse(raw?.data);
|
||||
|
|
@ -444,21 +464,25 @@ export function ProductInnovationPage() {
|
|||
return 0;
|
||||
};
|
||||
|
||||
const data: Array<any> = JSON.parse(
|
||||
payload?.innovation_product_function
|
||||
);
|
||||
const data: Array<any> = JSON.parse(payload?.innovation_product_function);
|
||||
const stats = data[0];
|
||||
const normalized: ProductInnovationStats = {
|
||||
new_products_revenue_share: parseNum(stats?.new_products_revenue_share),
|
||||
new_products_revenue_share_percent: parseNum(stats?.new_products_revenue_share_percent),
|
||||
new_products_revenue_share_percent: parseNum(
|
||||
stats?.new_products_revenue_share_percent
|
||||
),
|
||||
import_impact: parseNum(stats?.import_impact),
|
||||
new_products_export: parseNum(stats?.new_products_export),
|
||||
all_funnel: parseNum(stats?.all_funnel),
|
||||
successful_sample_funnel: parseNum(stats?.successful_sample_funnel),
|
||||
successful_products_funnel: parseNum(stats?.successful_products_funnel),
|
||||
successful_improvement_or_change_funnel: parseNum(stats?.successful_improvement_or_change_funnel),
|
||||
successful_improvement_or_change_funnel: parseNum(
|
||||
stats?.successful_improvement_or_change_funnel
|
||||
),
|
||||
new_product_funnel: parseNum(stats?.new_product_funnel),
|
||||
count_innovation_construction_inside_projects: parseNum(stats?.count_innovation_construction_inside_projects),
|
||||
count_innovation_construction_inside_projects: parseNum(
|
||||
stats?.count_innovation_construction_inside_projects
|
||||
),
|
||||
average_project_score: parseNum(stats?.average_project_score),
|
||||
};
|
||||
|
||||
|
|
@ -487,13 +511,21 @@ export function ProductInnovationPage() {
|
|||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects(true);
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
}, [date]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -538,39 +570,42 @@ export function ProductInnovationPage() {
|
|||
setHasMore(true);
|
||||
};
|
||||
|
||||
|
||||
const formatCurrency = (amount: string | number) => {
|
||||
if (!amount) return "0 ریال";
|
||||
const numericAmount =
|
||||
typeof amount === "string"
|
||||
? parseFloat(amount.replace(/,/g, ""))
|
||||
: amount;
|
||||
if (isNaN(numericAmount)) return "0 ریال";
|
||||
return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
|
||||
};
|
||||
// const formatCurrency = (amount: string | number) => {
|
||||
// if (!amount) return "0 ریال";
|
||||
// const numericAmount =
|
||||
// typeof amount === "string"
|
||||
// ? parseFloat(amount.replace(/,/g, ""))
|
||||
// : amount;
|
||||
// if (isNaN(numericAmount)) return "0 ریال";
|
||||
// return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
|
||||
// };
|
||||
|
||||
// Transform data for line chart
|
||||
const transformDataForLineChart = (data: any[]) => {
|
||||
const seasons = [...new Set(data.map(item => item.full_season))];
|
||||
const products = [...new Set(data.map(item => item.product_title))];
|
||||
return seasons.map(season => {
|
||||
const seasons = [...new Set(data.map((item) => item.full_season))];
|
||||
const products = [...new Set(data.map((item) => item.product_title))];
|
||||
return seasons.map((season) => {
|
||||
const seasonData: any = { season };
|
||||
products.forEach(product => {
|
||||
const productData = data.find(item =>
|
||||
products.forEach((product) => {
|
||||
const productData = data.find(
|
||||
(item) =>
|
||||
item.product_title === product && item.full_season === season
|
||||
);
|
||||
seasonData[product] = productData?.export_revenue_sum > 0 && productData ? Math.round(productData?.export_revenue_sum) : 0;
|
||||
seasonData[product] =
|
||||
productData?.export_revenue_sum > 0 && productData
|
||||
? Math.round(productData?.export_revenue_sum)
|
||||
: 0;
|
||||
});
|
||||
return seasonData;
|
||||
});
|
||||
};
|
||||
|
||||
const getRatingColor = (rating: string | number) => {
|
||||
const numRating = typeof rating === "string" ? parseInt(rating) : rating;
|
||||
if (numRating >= 150) return "text-emerald-400";
|
||||
if (numRating >= 100) return "text-blue-400";
|
||||
return "text-red-400";
|
||||
};
|
||||
// const getRatingColor = (rating: string | number) => {
|
||||
// const numRating = typeof rating === "string" ? parseInt(rating) : rating;
|
||||
// if (numRating >= 150) return "text-emerald-400";
|
||||
// if (numRating >= 100) return "text-blue-400";
|
||||
// return "text-red-400";
|
||||
// };
|
||||
|
||||
const statusColor = (status: projectStatus): any => {
|
||||
let el = null;
|
||||
|
|
@ -615,7 +650,8 @@ export function ProductInnovationPage() {
|
|||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
handleProjectDetails(item)}}
|
||||
handleProjectDetails(item);
|
||||
}}
|
||||
className="text-emerald-400 underline underline-offset-4 font-ligth text-sm p-2 h-auto"
|
||||
>
|
||||
جزئیات بیشتر
|
||||
|
|
@ -628,7 +664,9 @@ export function ProductInnovationPage() {
|
|||
</Badge>
|
||||
);
|
||||
case "title":
|
||||
return <span className="font-light text-sm 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-sm font-light gap-1">
|
||||
|
|
@ -652,7 +690,11 @@ export function ProductInnovationPage() {
|
|||
</Badge>
|
||||
);
|
||||
default:
|
||||
return <span className="text-white text-sm font-light">{String(value) || "-"}</span>;
|
||||
return (
|
||||
<span className="text-white text-sm font-light">
|
||||
{String(value) || "-"}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -667,7 +709,8 @@ export function ProductInnovationPage() {
|
|||
})
|
||||
.map((item) => ({
|
||||
label: item.full_season,
|
||||
value: item.export_revenue_sum < 0 ? 0 : Math.round(item.export_revenue_sum) ,
|
||||
value:
|
||||
item.export_revenue_sum < 0 ? 0 : Math.round(item.export_revenue_sum),
|
||||
}));
|
||||
|
||||
return (
|
||||
|
|
@ -719,18 +762,27 @@ export function ProductInnovationPage() {
|
|||
value={stateCard.revenueNewProducts.value}
|
||||
percentValue={stateCard.revenueNewProducts.percent}
|
||||
valueLabel={stateCard.revenueNewProducts.description}
|
||||
percentLabel={stateCard.revenueNewProducts.descriptionPercent}
|
||||
percentLabel={
|
||||
stateCard.revenueNewProducts.descriptionPercent
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Second card */}
|
||||
<div>
|
||||
<BaseCard title={stateCard.newProductExports.title} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<BaseCard
|
||||
title={stateCard.newProductExports.title}
|
||||
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
|
||||
>
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold mb-1 text-pr-green">{stateCard.newProductExports.value}</p>
|
||||
<div className="text-xs text-gray-400 font-persian">{stateCard.newProductExports.description}</div>
|
||||
<p className="text-3xl font-bold mb-1 text-pr-green">
|
||||
{stateCard.newProductExports.value}
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
{stateCard.newProductExports.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -739,12 +791,19 @@ export function ProductInnovationPage() {
|
|||
|
||||
{/* Third card - basic BaseCard */}
|
||||
<div>
|
||||
<BaseCard title={stateCard.impactOnImports.title} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<BaseCard
|
||||
title={stateCard.impactOnImports.title}
|
||||
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
|
||||
>
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold mb-1 text-pr-red">{stateCard.impactOnImports.value}</p>
|
||||
<div className="text-xs text-gray-400 font-persian">{stateCard.impactOnImports.description}</div>
|
||||
<p className="text-3xl font-bold mb-1 text-pr-red">
|
||||
{stateCard.impactOnImports.value}
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
{stateCard.impactOnImports.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -902,7 +961,10 @@ export function ProductInnovationPage() {
|
|||
<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-sm font-semibold text-white">
|
||||
کل پروژه ها :{formatNumber(stats?.count_innovation_construction_inside_projects)}
|
||||
کل پروژه ها :
|
||||
{formatNumber(
|
||||
stats?.count_innovation_construction_inside_projects
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -917,7 +979,9 @@ export function ProductInnovationPage() {
|
|||
<div className="text-bold text-sm text-white">میانگین :</div>
|
||||
<div className="font-bold text-sm text-white">
|
||||
{formatNumber(
|
||||
((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0
|
||||
((stats.average_project_score ?? 0) as number).toFixed?.(
|
||||
1
|
||||
) ?? 0
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -941,29 +1005,47 @@ export function ProductInnovationPage() {
|
|||
<div className="space-y-4">
|
||||
{/* Stats Cards */}
|
||||
<div className="space-y-4">
|
||||
<h3 className="font-bold text-base">{selectedProjectDetails?.title}</h3>
|
||||
<p className="py-2">{selectedProjectDetails?.project_description}</p>
|
||||
<h3 className="font-bold text-base">
|
||||
{selectedProjectDetails?.title}
|
||||
</h3>
|
||||
<p className="py-2">
|
||||
{selectedProjectDetails?.project_description}
|
||||
</p>
|
||||
</div>
|
||||
<Timeline valueTimeLine={selectedProjectDetails?.current_status} />
|
||||
<Timeline
|
||||
valueTimeLine={selectedProjectDetails?.current_status}
|
||||
/>
|
||||
|
||||
{/* Technical Knowledge */}
|
||||
<div className=" rounded-lg py-2 mb-0">
|
||||
<h3 className="text-sm text-white font-semibold mb-2">دانش فنی محصول جدید</h3>
|
||||
<h3 className="text-sm text-white font-semibold mb-2">
|
||||
دانش فنی محصول جدید
|
||||
</h3>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-white font-light">توسعه درونزا</span>
|
||||
<span className="text-sm text-white font-light">
|
||||
توسعه درونزا
|
||||
</span>
|
||||
|
||||
<Checkbox
|
||||
checked={selectedProjectDetails?.developed_technology_type === "توسعه درونزا"}
|
||||
checked={
|
||||
selectedProjectDetails?.developed_technology_type ===
|
||||
"توسعه درونزا"
|
||||
}
|
||||
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-white font-light">همکاری فناورانه</span>
|
||||
<span className="text-sm text-white font-light">
|
||||
همکاری فناورانه
|
||||
</span>
|
||||
|
||||
<Checkbox
|
||||
checked={selectedProjectDetails?.developed_technology_type === "همکاری فناوری"}
|
||||
checked={
|
||||
selectedProjectDetails?.developed_technology_type ===
|
||||
"همکاری فناوری"
|
||||
}
|
||||
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -971,11 +1053,14 @@ export function ProductInnovationPage() {
|
|||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-white font-light">سایر</span>
|
||||
<Checkbox
|
||||
checked={selectedProjectDetails?.developed_technology_type === "سایر"}
|
||||
checked={
|
||||
selectedProjectDetails?.developed_technology_type ===
|
||||
"سایر"
|
||||
}
|
||||
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Standards */}
|
||||
|
|
@ -984,15 +1069,20 @@ export function ProductInnovationPage() {
|
|||
استانداردهای ملی و بینالمللی اخذ شده
|
||||
</h3>
|
||||
|
||||
{selectedProjectDetails?.obtained_standard_title && selectedProjectDetails?.obtained_standard_title.length > 0 ? (
|
||||
{selectedProjectDetails?.obtained_standard_title &&
|
||||
selectedProjectDetails?.obtained_standard_title.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{(Array.isArray(selectedProjectDetails?.obtained_standard_title)
|
||||
{(Array.isArray(
|
||||
selectedProjectDetails?.obtained_standard_title
|
||||
)
|
||||
? selectedProjectDetails?.obtained_standard_title
|
||||
: [selectedProjectDetails?.obtained_standard_title]
|
||||
).map((standard, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
|
||||
<span className="text-sm text-white font-light">{standard}</span>
|
||||
<span className="text-sm text-white font-light">
|
||||
{standard}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -1001,11 +1091,12 @@ export function ProductInnovationPage() {
|
|||
هیچ استانداردی ثبت نشده است.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Knowledge-based Certificate Button */}
|
||||
<div className="justify-self-centerr grid py-1 mx-auto">
|
||||
{selectedProjectDetails?.knowledge_based_certificate_obtained === "خیر" ? (
|
||||
{selectedProjectDetails?.knowledge_based_certificate_obtained ===
|
||||
"خیر" ? (
|
||||
<div className=" border border-pr-red mx-auto rounded-lg p-2 text-center">
|
||||
<button className="text-pr-red font-bold text-sm">
|
||||
گواهی دانشبنیان ندارد
|
||||
|
|
@ -1036,10 +1127,14 @@ export function ProductInnovationPage() {
|
|||
</p>
|
||||
<p className="text-sm text-white">
|
||||
<span className="font-bold">تاریخ اخذ: </span>
|
||||
{handleDataValue(selectedProjectDetails?.certificate_obtain_date) || "—"}
|
||||
{handleDataValue(
|
||||
selectedProjectDetails?.certificate_obtain_date
|
||||
) || "—"}
|
||||
</p>
|
||||
<p className="text-sm text-white">
|
||||
<span className="font-bold">مرجع صادرکننده: </span>
|
||||
<span className="font-bold">
|
||||
مرجع صادرکننده:{" "}
|
||||
</span>
|
||||
{selectedProjectDetails?.issuing_authority || "—"}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1081,16 +1176,32 @@ export function ProductInnovationPage() {
|
|||
<div className="rounded-lg pt-4 grid grid-cols-2 gap-4 w-full">
|
||||
<MetricCard
|
||||
title="میزان صادارت محصول جدید"
|
||||
value={Math.round(popupStats?.new_products_export > 0 ? popupStats?.new_products_export : 0)}
|
||||
percentValue={Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)}
|
||||
value={Math.round(
|
||||
popupStats?.new_products_export > 0
|
||||
? popupStats?.new_products_export
|
||||
: 0
|
||||
)}
|
||||
percentValue={Math.round(
|
||||
popupStats?.new_products_export_percent > 0
|
||||
? popupStats?.new_products_export_percent
|
||||
: 0
|
||||
)}
|
||||
valueLabel="میلیون ریال"
|
||||
percentLabel="درصد به کل صادرات"
|
||||
/>
|
||||
|
||||
<MetricCard
|
||||
title="تاثیر در واردات"
|
||||
value={Math.round(popupStats?.import_impact > 0 ? popupStats?.import_impact : 0)}
|
||||
percentValue={Math.round(popupStats?.import_impact_percent > 0 ? popupStats?.import_impact_percent : 0)}
|
||||
value={Math.round(
|
||||
popupStats?.import_impact > 0
|
||||
? popupStats?.import_impact
|
||||
: 0
|
||||
)}
|
||||
percentValue={Math.round(
|
||||
popupStats?.import_impact_percent > 0
|
||||
? popupStats?.import_impact_percent
|
||||
: 0
|
||||
)}
|
||||
valueLabel="میلیون ریال"
|
||||
percentLabel="درصد صرفه جویی"
|
||||
/>
|
||||
|
|
@ -1098,7 +1209,9 @@ export function ProductInnovationPage() {
|
|||
|
||||
{/* Export Revenue Bar Chart */}
|
||||
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">ظرفیت صادر شده</h3>
|
||||
<h3 className="text-sm font-semibold text-white">
|
||||
ظرفیت صادر شده
|
||||
</h3>
|
||||
<div className="h-60">
|
||||
{exportChartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
|
|
@ -1116,52 +1229,149 @@ export function ProductInnovationPage() {
|
|||
axisLine={false}
|
||||
stroke="#C3C3C3"
|
||||
tickMargin={8}
|
||||
tickFormatter={(value: string) => `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`}
|
||||
tickFormatter={(value: string) =>
|
||||
`${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll("٬", "")}`
|
||||
}
|
||||
fontSize={11}
|
||||
/>
|
||||
<YAxis tickLine={false} axisLine={false} stroke="#9CA3AF" fontSize={11} tick={{ dx: -50 }} tickFormatter={(value: number) => `${formatNumber(value)} میلیون`} />
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
stroke="#9CA3AF"
|
||||
fontSize={11}
|
||||
tick={{ dx: -50 }}
|
||||
tickFormatter={(value: number) =>
|
||||
`${formatNumber(value)} میلیون`
|
||||
}
|
||||
/>
|
||||
<Bar dataKey="value" fill="#10B981" radius={10}>
|
||||
<LabelList formatter={(value: number) => `${formatNumber(value)}`} position="top" offset={15} fill="F9FAFB" className="fill-foreground" fontSize={16} />
|
||||
<LabelList
|
||||
formatter={(value: number) =>
|
||||
`${formatNumber(value)}`
|
||||
}
|
||||
position="top"
|
||||
offset={15}
|
||||
fill="F9FAFB"
|
||||
className="fill-foreground"
|
||||
fontSize={16}
|
||||
/>
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">دادهای برای نمایش وجود ندارد</div>
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
دادهای برای نمایش وجود ندارد
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Export Revenue Line Chart */}
|
||||
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
|
||||
<h3 className="text-sm font-semibold text-white">ظرفیت صادر شده</h3>
|
||||
<h3 className="text-sm font-semibold text-white">
|
||||
ظرفیت صادر شده
|
||||
</h3>
|
||||
<div className="h-60">
|
||||
{allExportData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart className="aspect-auto w-full" data={transformDataForLineChart(allExportData)} margin={{ top: 20, right: 30, left: 10, bottom: 50 }}>
|
||||
<LineChart
|
||||
className="aspect-auto w-full"
|
||||
data={transformDataForLineChart(allExportData)}
|
||||
margin={{ top: 20, right: 30, left: 10, bottom: 50 }}
|
||||
>
|
||||
<CartesianGrid vertical={false} stroke="#374151" />
|
||||
<XAxis dataKey="season" stroke="#9CA3AF" fontSize={11} tick={({ x, y, payload }) => (
|
||||
<XAxis
|
||||
dataKey="season"
|
||||
stroke="#9CA3AF"
|
||||
fontSize={11}
|
||||
tick={({ x, y, payload }) => (
|
||||
<g transform={`translate(${x},${y + 10})`}>
|
||||
<text x={-40} y={15} dy={0} textAnchor="end" fill="#9CA3AF" fontSize={11} transform="rotate(-45)">{(payload as any).value}</text>
|
||||
<text
|
||||
x={-40}
|
||||
y={15}
|
||||
dy={0}
|
||||
textAnchor="end"
|
||||
fill="#9CA3AF"
|
||||
fontSize={11}
|
||||
transform="rotate(-45)"
|
||||
>
|
||||
{(payload as any).value}
|
||||
</text>
|
||||
</g>
|
||||
)} />
|
||||
<YAxis tickLine={false} axisLine={false} stroke="#9CA3AF" fontSize={11} tick={{ dx: -50 }} tickFormatter={(value) => `${formatNumber(value)} میلیون`} />
|
||||
<Tooltip formatter={(value: number) => `${formatNumber(value)} میلیون`} contentStyle={{ backgroundColor: "#1F2937", border: "1px solid #374151", borderRadius: "6px", padding: "6px 10px", fontSize: "11px", color: "#F9FAFB" }} />
|
||||
<Legend layout="vertical" verticalAlign="middle" align="right" iconType={"plainline"} className="!flex" wrapperStyle={{ fontSize: 11, paddingLeft: 12, gap: 10 }} />
|
||||
{[...new Set(allExportData.map((item) => item.product_title))].slice(0, 5).map((product, index) => {
|
||||
const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"];
|
||||
return <Line key={product} type="linear" dot={false} activeDot={{ r: 5 }} dataKey={product} stroke={colors[index % colors.length]} strokeWidth={2} />;
|
||||
)}
|
||||
/>
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
stroke="#9CA3AF"
|
||||
fontSize={11}
|
||||
tick={{ dx: -50 }}
|
||||
tickFormatter={(value) =>
|
||||
`${formatNumber(value)} میلیون`
|
||||
}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) =>
|
||||
`${formatNumber(value)} میلیون`
|
||||
}
|
||||
contentStyle={{
|
||||
backgroundColor: "#1F2937",
|
||||
border: "1px solid #374151",
|
||||
borderRadius: "6px",
|
||||
padding: "6px 10px",
|
||||
fontSize: "11px",
|
||||
color: "#F9FAFB",
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
layout="vertical"
|
||||
verticalAlign="middle"
|
||||
align="right"
|
||||
iconType={"plainline"}
|
||||
className="!flex"
|
||||
wrapperStyle={{
|
||||
fontSize: 11,
|
||||
paddingLeft: 12,
|
||||
gap: 10,
|
||||
}}
|
||||
/>
|
||||
{[
|
||||
...new Set(
|
||||
allExportData.map((item) => item.product_title)
|
||||
),
|
||||
]
|
||||
.slice(0, 5)
|
||||
.map((product, index) => {
|
||||
const colors = [
|
||||
"#10B981",
|
||||
"#EF4444",
|
||||
"#3B82F6",
|
||||
"#F59E0B",
|
||||
"#8B5CF6",
|
||||
];
|
||||
return (
|
||||
<Line
|
||||
key={product}
|
||||
type="linear"
|
||||
dot={false}
|
||||
activeDot={{ r: 5 }}
|
||||
dataKey={product}
|
||||
stroke={colors[index % colors.length]}
|
||||
strokeWidth={2}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400">دادهای برای نمایش وجود ندارد</div>
|
||||
<div className="flex items-center justify-center h-full text-gray-400">
|
||||
دادهای برای نمایش وجود ندارد
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import jalaali from "jalaali-js";
|
||||
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
|
||||
import { useCallback, useEffect, useRef, useState, useMemo } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Card, CardContent } from "~/components/ui/card";
|
||||
|
|
@ -13,8 +14,8 @@ import {
|
|||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency } from "~/lib/utils";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { DashboardLayout } from "../layout";
|
||||
|
||||
interface ProjectData {
|
||||
|
|
@ -153,6 +154,7 @@ const columns: ColumnDef[] = [
|
|||
];
|
||||
|
||||
export function ProjectManagementPage() {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [projects, setProjects] = useState<ProjectData[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
|
@ -169,6 +171,10 @@ export function ProjectManagementPage() {
|
|||
const fetchingRef = useRef(false);
|
||||
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
|
||||
const fetchProjects = async (reset = false) => {
|
||||
// Prevent concurrent API calls
|
||||
|
|
@ -200,7 +206,10 @@ export function ProjectManagementPage() {
|
|||
OutputFields: outputFields,
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
|
||||
Conditions: [],
|
||||
Conditions: [
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -265,6 +274,13 @@ export function ProjectManagementPage() {
|
|||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
const loadMore = useCallback(() => {
|
||||
if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
|
|
@ -274,7 +290,7 @@ export function ProjectManagementPage() {
|
|||
useEffect(() => {
|
||||
fetchProjects(true);
|
||||
fetchTotalCount();
|
||||
}, [sortConfig]);
|
||||
}, [sortConfig, date]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPage > 1) {
|
||||
|
|
@ -287,7 +303,8 @@ export function ProjectManagementPage() {
|
|||
const scrollContainer = scrollContainerRef.current;
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
|
||||
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current)
|
||||
return;
|
||||
|
||||
// Clear previous timeout
|
||||
if (scrollTimeoutRef.current) {
|
||||
|
|
@ -307,7 +324,9 @@ export function ProjectManagementPage() {
|
|||
};
|
||||
|
||||
if (scrollContainer) {
|
||||
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
|
||||
scrollContainer.addEventListener("scroll", handleScroll, {
|
||||
passive: true,
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
|
|
@ -337,7 +356,10 @@ export function ProjectManagementPage() {
|
|||
const response = await apiService.select({
|
||||
ProcessName: "project",
|
||||
OutputFields: ["count(project_no)"],
|
||||
Conditions: [],
|
||||
Conditions: [
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
if (response.state === 0) {
|
||||
|
|
@ -358,14 +380,14 @@ export function ProjectManagementPage() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchingRef.current = false; // Reset fetching state on refresh
|
||||
setCurrentPage(1);
|
||||
setProjects([]);
|
||||
setHasMore(true);
|
||||
fetchProjects(true);
|
||||
fetchTotalCount();
|
||||
};
|
||||
// const handleRefresh = () => {
|
||||
// fetchingRef.current = false; // Reset fetching state on refresh
|
||||
// setCurrentPage(1);
|
||||
// setProjects([]);
|
||||
// setHasMore(true);
|
||||
// fetchProjects(true);
|
||||
// fetchTotalCount();
|
||||
// };
|
||||
|
||||
// ...existing code...
|
||||
|
||||
|
|
@ -630,7 +652,7 @@ export function ProjectManagementPage() {
|
|||
.filter((v) => v !== null) as number[];
|
||||
res["remaining_time"] = remainingValues.length
|
||||
? Math.round(
|
||||
remainingValues.reduce((a, b) => a + b, 0) / remainingValues.length,
|
||||
remainingValues.reduce((a, b) => a + b, 0) / remainingValues.length
|
||||
)
|
||||
: null;
|
||||
|
||||
|
|
@ -644,7 +666,7 @@ export function ProjectManagementPage() {
|
|||
const num = Number(
|
||||
String(raw)
|
||||
.toString()
|
||||
.replace(/[^0-9.-]/g, ""),
|
||||
.replace(/[^0-9.-]/g, "")
|
||||
);
|
||||
return Number.isFinite(num) ? num : NaN;
|
||||
})
|
||||
|
|
@ -770,7 +792,10 @@ export function ProjectManagementPage() {
|
|||
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="relative">
|
||||
<div ref={scrollContainerRef} className="relative overflow-auto custom-scrollbar max-h-[calc(100vh-120px)]">
|
||||
<div
|
||||
ref={scrollContainerRef}
|
||||
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]">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import jalaali from "jalaali-js";
|
||||
import { useEffect, useReducer, useRef, useState } from "react";
|
||||
import {
|
||||
Bar,
|
||||
|
|
@ -12,7 +13,8 @@ import {
|
|||
import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
|
||||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { ChartContainer } from "../ui/chart";
|
||||
import {
|
||||
DropdownMenu,
|
||||
|
|
@ -116,6 +118,7 @@ export function StrategicAlignmentPopup({
|
|||
open,
|
||||
onOpenChange,
|
||||
}: StrategicAlignmentPopupProps) {
|
||||
const { jy } = jalaali.toJalaali(new Date());
|
||||
const [data, setData] = useState<StrategicAlignmentData[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const contentRef = useRef<HTMLDivElement | null>(null);
|
||||
|
|
@ -125,22 +128,35 @@ export function StrategicAlignmentPopup({
|
|||
dropDownItems: [],
|
||||
});
|
||||
|
||||
const [date, setDate] = useState<CalendarDate>({
|
||||
start: `${jy}/01/01`,
|
||||
end: `${jy}/12/30`,
|
||||
});
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
fetchData();
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fetchData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await apiService.select({
|
||||
ProcessName: "project",
|
||||
OutputFields: [
|
||||
"strategic_theme",
|
||||
"count(operational_fee)",
|
||||
],
|
||||
OutputFields: ["strategic_theme", "count(operational_fee)"],
|
||||
GroupBy: ["strategic_theme"],
|
||||
Conditions: [
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
});
|
||||
|
||||
const responseData =
|
||||
|
|
@ -170,7 +186,11 @@ export function StrategicAlignmentPopup({
|
|||
"value_technology_and_innovation",
|
||||
"count(operational_fee)",
|
||||
],
|
||||
Conditions: [["strategic_theme", "=", item]],
|
||||
Conditions: [
|
||||
["strategic_theme", "=", item, "and"],
|
||||
["start_date", ">=", date?.start || null, "and"],
|
||||
["start_date", "<=", date?.end || null],
|
||||
],
|
||||
GroupBy: ["value_technology_and_innovation"],
|
||||
});
|
||||
|
||||
|
|
@ -247,7 +267,9 @@ export function StrategicAlignmentPopup({
|
|||
(item: StrategicAlignmentData) => ({
|
||||
...item,
|
||||
percentage:
|
||||
total > 0 ? Math.round((item.operational_fee_count / total) * 100) : 0,
|
||||
total > 0
|
||||
? Math.round((item.operational_fee_count / total) * 100)
|
||||
: 0,
|
||||
})
|
||||
);
|
||||
setData(dataWithPercentage || []);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
|
|
@ -11,9 +10,11 @@ import {
|
|||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { EventBus, formatNumber } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
|
||||
export interface CompanyDetails {
|
||||
id: string;
|
||||
|
|
@ -62,27 +63,44 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
const [counts, setCounts] = useState<EcosystemCounts | null>(null);
|
||||
const [processData, setProcessData] = useState<ProcessActorsData[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [date, setDate] = useState<CalendarDate>();
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCounts();
|
||||
}, [date]);
|
||||
|
||||
const fetchCounts = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const [countsRes, processRes] = await Promise.all([
|
||||
apiService.call<EcosystemCounts>({
|
||||
ecosystem_count_function: {},
|
||||
ecosystem_count_function: {
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
}),
|
||||
apiService.call<ProcessActorsResponse[]>({
|
||||
process_creating_actors_function: {},
|
||||
process_creating_actors_function: {
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
setCounts(
|
||||
JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0],
|
||||
JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0]
|
||||
);
|
||||
|
||||
// Process the years data and fill missing years
|
||||
const processedData = processYearsData(
|
||||
JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors),
|
||||
JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors)
|
||||
);
|
||||
setProcessData(processedData);
|
||||
} catch (err) {
|
||||
|
|
@ -91,8 +109,6 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchCounts();
|
||||
}, []);
|
||||
|
||||
// Helper function to safely parse numbers
|
||||
const parseNumber = (value: string | undefined): number => {
|
||||
|
|
@ -103,7 +119,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
|
||||
// Helper function to process years data and fill missing years
|
||||
const processYearsData = (
|
||||
data: ProcessActorsResponse[],
|
||||
data: ProcessActorsResponse[]
|
||||
): ProcessActorsData[] => {
|
||||
if (!data || data.length === 0) return [];
|
||||
|
||||
|
|
@ -121,7 +137,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
acc[item.start_year] = item.total_count;
|
||||
return acc;
|
||||
},
|
||||
{} as Record<string, number>,
|
||||
{} as Record<string, number>
|
||||
);
|
||||
|
||||
for (let year = minYear; year <= maxYear; year++) {
|
||||
|
|
@ -462,7 +478,13 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
margin={{ top: 25, right: 30, left: 0, bottom: 0 }}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
|
||||
<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>
|
||||
|
|
@ -501,7 +523,14 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
activeDot={({ cx, cy, payload }) => (
|
||||
<g>
|
||||
{/* Small circle */}
|
||||
<circle cx={cx} cy={cy} r={5} fill="#3AEA83" stroke="#fff" strokeWidth={2} />
|
||||
<circle
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
r={5}
|
||||
fill="#3AEA83"
|
||||
stroke="#fff"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
{/* Year label above point */}
|
||||
<text
|
||||
x={cx}
|
||||
|
|
@ -517,8 +546,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
)}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="flex items-center justify-center h-full text-gray-400 font-persian">
|
||||
دادهای برای نمایش وجود ندارد
|
||||
|
|
@ -526,7 +554,6 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
|
|||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import * as d3 from "d3";
|
||||
import apiService from "../../lib/api";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { EventBus } from "~/lib/utils";
|
||||
import type { CalendarDate } from "~/types/util.type";
|
||||
import { useAuth } from "../../contexts/auth-context";
|
||||
import apiService from "../../lib/api";
|
||||
|
||||
const API_BASE_URL =
|
||||
import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
|
||||
|
|
@ -59,7 +61,10 @@ function isBrowser(): boolean {
|
|||
return typeof window !== "undefined";
|
||||
}
|
||||
|
||||
export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps) {
|
||||
export function NetworkGraph({
|
||||
onNodeClick,
|
||||
onLoadingChange,
|
||||
}: NetworkGraphProps) {
|
||||
const svgRef = useRef<SVGSVGElement | null>(null);
|
||||
const [nodes, setNodes] = useState<Node[]>([]);
|
||||
const [links, setLinks] = useState<Link[]>([]);
|
||||
|
|
@ -68,6 +73,15 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
const [error, setError] = useState<string | null>(null);
|
||||
const { token } = useAuth();
|
||||
|
||||
const [date, setDate] = useState<CalendarDate>();
|
||||
useEffect(() => {
|
||||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||||
if (date) {
|
||||
setDate(date);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isBrowser()) {
|
||||
const timer = setTimeout(() => setIsMounted(true), 100);
|
||||
|
|
@ -80,16 +94,21 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
if (!token?.accessToken) return null;
|
||||
return `${API_BASE_URL}/getimage?stageID=${stageid}&nameOrID=image&token=${token.accessToken}`;
|
||||
},
|
||||
[token?.accessToken],
|
||||
[token?.accessToken]
|
||||
);
|
||||
|
||||
const callAPI = useCallback(async (stage_id: number) => {
|
||||
const callAPI = useCallback(
|
||||
async (stage_id: number) => {
|
||||
return await apiService.call<any>({
|
||||
get_values_workflow_function: {
|
||||
stage_id: stage_id,
|
||||
start_date: date?.start || null,
|
||||
end_date: date?.end || null,
|
||||
},
|
||||
});
|
||||
}, []);
|
||||
},
|
||||
[date]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted) return;
|
||||
|
|
@ -108,7 +127,7 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
const data = parseApiResponse(JSON.parse(res.data)?.graph_production);
|
||||
console.log(
|
||||
"All available fields in first item:",
|
||||
Object.keys(data[0] || {}),
|
||||
Object.keys(data[0] || {})
|
||||
);
|
||||
|
||||
// نود مرکزی
|
||||
|
|
@ -121,7 +140,9 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
};
|
||||
|
||||
// دستهبندیها
|
||||
const categories = Array.from(new Set(data.map((item: any) => item.category)));
|
||||
const categories = Array.from(
|
||||
new Set(data.map((item: any) => item.category))
|
||||
);
|
||||
|
||||
const categoryNodes: Node[] = categories.map((cat, index) => ({
|
||||
id: `cat-${index}`,
|
||||
|
|
@ -170,7 +191,8 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
}, [isMounted, token, getImageUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMounted || !svgRef.current || isLoading || nodes.length === 0) return;
|
||||
if (!isMounted || !svgRef.current || isLoading || nodes.length === 0)
|
||||
return;
|
||||
|
||||
const svg = d3.select(svgRef.current);
|
||||
const width = svgRef.current.clientWidth;
|
||||
|
|
@ -225,12 +247,18 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
.forceLink<Node, Link>(links)
|
||||
.id((d) => d.id)
|
||||
.distance(150)
|
||||
.strength(0.2),
|
||||
.strength(0.2)
|
||||
)
|
||||
.force("charge", d3.forceManyBody().strength(-300))
|
||||
.force("center", d3.forceCenter(width / 2, height / 2))
|
||||
.force("radial", d3.forceRadial(d => d.isCenter ? 0 : 300, width/2, height/2))
|
||||
.force("collision", d3.forceCollide().radius((d) => (d.isCenter ? 50 : 35)));
|
||||
.force(
|
||||
"radial",
|
||||
d3.forceRadial((d) => (d.isCenter ? 0 : 300), width / 2, height / 2)
|
||||
)
|
||||
.force(
|
||||
"collision",
|
||||
d3.forceCollide().radius((d) => (d.isCenter ? 50 : 35))
|
||||
);
|
||||
|
||||
// Initial zoom to show entire graph
|
||||
const initialScale = 0.6;
|
||||
|
|
@ -242,12 +270,12 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
zoom.transform,
|
||||
d3.zoomIdentity
|
||||
.translate(initialTranslate[0], initialTranslate[1])
|
||||
.scale(initialScale),
|
||||
.scale(initialScale)
|
||||
);
|
||||
|
||||
// Fix center node
|
||||
const centerNode = nodes.find(n => n.isCenter);
|
||||
const categoryNodes = nodes.filter(n => !n.isCenter && n.stageid === -1);
|
||||
const centerNode = nodes.find((n) => n.isCenter);
|
||||
const categoryNodes = nodes.filter((n) => !n.isCenter && n.stageid === -1);
|
||||
|
||||
if (centerNode) {
|
||||
const centerX = width / 2;
|
||||
|
|
@ -270,22 +298,20 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
// نودهای نهایی **هیچ fx/fy نداشته باشند**
|
||||
// فقط forceLink آنها را به دستهها متصل نگه میدارد
|
||||
|
||||
// const finalNodes = nodes.filter(n => !n.isCenter && n.stageid !== -1);
|
||||
|
||||
// const finalNodes = nodes.filter(n => !n.isCenter && n.stageid !== -1);
|
||||
|
||||
// categoryNodes.forEach((catNode) => {
|
||||
// const childNodes = finalNodes.filter(n => n.category === catNode.category);
|
||||
// const childCount = childNodes.length;
|
||||
// const radius = 100; // فاصله از دسته
|
||||
// const angleStep = (2 * Math.PI) / childCount;
|
||||
|
||||
// childNodes.forEach((node, i) => {
|
||||
// const angle = i * angleStep;
|
||||
// node.fx = catNode.fx! + radius * Math.cos(angle);
|
||||
// node.fy = catNode.fy! + radius * Math.sin(angle);
|
||||
// });
|
||||
// });
|
||||
// categoryNodes.forEach((catNode) => {
|
||||
// const childNodes = finalNodes.filter(n => n.category === catNode.category);
|
||||
// const childCount = childNodes.length;
|
||||
// const radius = 100; // فاصله از دسته
|
||||
// const angleStep = (2 * Math.PI) / childCount;
|
||||
|
||||
// childNodes.forEach((node, i) => {
|
||||
// const angle = i * angleStep;
|
||||
// node.fx = catNode.fx! + radius * Math.cos(angle);
|
||||
// node.fy = catNode.fy! + radius * Math.sin(angle);
|
||||
// });
|
||||
// });
|
||||
|
||||
// Curved links
|
||||
const link = container
|
||||
|
|
@ -305,7 +331,7 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
.enter()
|
||||
.append("g")
|
||||
.attr("class", "node")
|
||||
.style("cursor", d => d.stageid === -1 ? "default" : "pointer");
|
||||
.style("cursor", (d) => (d.stageid === -1 ? "default" : "pointer"));
|
||||
|
||||
const drag = d3
|
||||
.drag<SVGGElement, Node>()
|
||||
|
|
@ -437,7 +463,6 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
.attr("stroke-width", 3);
|
||||
});
|
||||
|
||||
|
||||
nodeGroup.on("click", async function (event, d) {
|
||||
event.stopPropagation();
|
||||
|
||||
|
|
@ -467,15 +492,15 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
const filteredFields = fieldValues.filter(
|
||||
(field: any) =>
|
||||
!["image", "img", "full_name", "about_collaboration"].includes(
|
||||
field.F.toLowerCase(),
|
||||
),
|
||||
field.F.toLowerCase()
|
||||
)
|
||||
);
|
||||
|
||||
const descriptionField = fieldValues.find(
|
||||
(field: any) =>
|
||||
field.F.toLowerCase().includes("description") ||
|
||||
field.F.toLowerCase().includes("about_collaboration") ||
|
||||
field.F.toLowerCase().includes("about"),
|
||||
field.F.toLowerCase().includes("about")
|
||||
);
|
||||
|
||||
const companyDetails: CompanyDetails = {
|
||||
|
|
@ -592,5 +617,4 @@ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps
|
|||
);
|
||||
}
|
||||
|
||||
|
||||
export default NetworkGraph;
|
||||
67
app/components/ui/Calendar.tsx
Normal file
67
app/components/ui/Calendar.tsx
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import React from "react";
|
||||
|
||||
interface MonthItem {
|
||||
id: string;
|
||||
label: string;
|
||||
start: string;
|
||||
end: string;
|
||||
}
|
||||
|
||||
// interface CurrentDay {
|
||||
// start: string;
|
||||
// end: string;
|
||||
// month: string;
|
||||
// }
|
||||
|
||||
interface CalendarProps {
|
||||
title: string;
|
||||
nextYearHandler: () => void;
|
||||
prevYearHandler: () => void;
|
||||
currentYear?: number;
|
||||
monthList: Array<MonthItem>;
|
||||
selectedDate?: string;
|
||||
selectDateHandler: (item: MonthItem) => void;
|
||||
}
|
||||
|
||||
export const Calendar: React.FC<CalendarProps> = ({
|
||||
title,
|
||||
nextYearHandler,
|
||||
prevYearHandler,
|
||||
currentYear,
|
||||
monthList,
|
||||
selectedDate,
|
||||
selectDateHandler,
|
||||
}) => {
|
||||
return (
|
||||
<div className="filter-box bg-pr-gray w-full px-1">
|
||||
<header className="flex flex-row border-b border-[#5F6284] pb-1.5 justify-center">
|
||||
<span className="font-light">{title}</span>
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<ChevronRight
|
||||
className="inline-block w-6 h-6 cursor-pointer"
|
||||
onClick={nextYearHandler}
|
||||
/>
|
||||
<span className="font-light">{currentYear}</span>
|
||||
<ChevronLeft
|
||||
className="inline-block w-6 h-6 cursor-pointer"
|
||||
onClick={prevYearHandler}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
<div className="content flex flex-col gap-2 text-center pt-1 cursor-pointer">
|
||||
{monthList.map((item, index) => (
|
||||
<span
|
||||
key={`${item.id}-${index}`}
|
||||
className={`text-lg hover:bg-[#33364D] p-1 rounded-xl transition-all duration-300 ${
|
||||
selectedDate === item.label ? `bg-[#33364D]` : ""
|
||||
}`}
|
||||
onClick={() => selectDateHandler(item)}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import EventEmitter from "events";
|
||||
import moment from "moment-jalaali";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
|
|
@ -22,8 +23,6 @@ export const formatCurrency = (amount: string | number) => {
|
|||
return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* محاسبه دامنه nice numbers برای محور Y نمودارها
|
||||
* @param values آرایه از مقادیر دادهها
|
||||
|
|
@ -117,7 +116,7 @@ function calculateNiceNumber(value: number, round: boolean): number {
|
|||
}
|
||||
|
||||
export const handleDataValue = (val: any): any => {
|
||||
moment.loadPersian({ usePersianDigits: true });
|
||||
moment.loadPersian({ usePersianDigits: true });
|
||||
if (val == null) return val;
|
||||
if (
|
||||
typeof val === "string" &&
|
||||
|
|
@ -132,4 +131,6 @@ moment.loadPersian({ usePersianDigits: true });
|
|||
return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
|
||||
}
|
||||
return val;
|
||||
}
|
||||
};
|
||||
|
||||
export const EventBus = new EventEmitter();
|
||||
|
|
|
|||
6
app/types/util.type.ts
Normal file
6
app/types/util.type.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export interface CalendarDate {
|
||||
start: string;
|
||||
end: string;
|
||||
sinceMonth?: string;
|
||||
untilMonth?: string;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user