fix: desinged bugs
This commit is contained in:
parent
28f22dd0d3
commit
12e85fdb08
|
|
@ -19,15 +19,7 @@ import {
|
||||||
DialogHeader,
|
DialogHeader,
|
||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "~/components/ui/dialog";
|
} from "~/components/ui/dialog";
|
||||||
import {
|
import { ChevronUp, ChevronDown, RefreshCw } from "lucide-react";
|
||||||
ChevronUp,
|
|
||||||
ChevronDown,
|
|
||||||
RefreshCw,
|
|
||||||
Building2,
|
|
||||||
PickaxeIcon,
|
|
||||||
UserIcon,
|
|
||||||
UsersIcon,
|
|
||||||
} from "lucide-react";
|
|
||||||
import apiService from "~/lib/api";
|
import apiService from "~/lib/api";
|
||||||
import toast from "react-hot-toast";
|
import toast from "react-hot-toast";
|
||||||
import {
|
import {
|
||||||
|
|
@ -172,6 +164,7 @@ export function DigitalInnovationPage() {
|
||||||
resourceProductivity: 0,
|
resourceProductivity: 0,
|
||||||
resourceProductivityPercent: 0,
|
resourceProductivityPercent: 0,
|
||||||
avarageProjectScore: 0,
|
avarageProjectScore: 0,
|
||||||
|
countInnovationDigitalProjects: 0,
|
||||||
});
|
});
|
||||||
const [sortConfig, setSortConfig] = useState<SortConfig>({
|
const [sortConfig, setSortConfig] = useState<SortConfig>({
|
||||||
field: "start_date",
|
field: "start_date",
|
||||||
|
|
@ -476,7 +469,9 @@ export function DigitalInnovationPage() {
|
||||||
payload?.resource_productivity_percent
|
payload?.resource_productivity_percent
|
||||||
),
|
),
|
||||||
avarageProjectScore: parseNum(payload?.average_project_score),
|
avarageProjectScore: parseNum(payload?.average_project_score),
|
||||||
countInnovationDigitalProjects: parseNum(payload?.count_innovation_digital_projects),
|
countInnovationDigitalProjects: parseNum(
|
||||||
|
payload?.count_innovation_digital_projects
|
||||||
|
),
|
||||||
};
|
};
|
||||||
setActualTotalCount(normalized.countInnovationDigitalProjects);
|
setActualTotalCount(normalized.countInnovationDigitalProjects);
|
||||||
setStats(normalized);
|
setStats(normalized);
|
||||||
|
|
@ -649,7 +644,7 @@ export function DigitalInnovationPage() {
|
||||||
Array.from({ length: 4 }).map((_, index) => (
|
Array.from({ length: 4 }).map((_, index) => (
|
||||||
<Card
|
<Card
|
||||||
key={`skeleton-${index}`}
|
key={`skeleton-${index}`}
|
||||||
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
|
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
|
||||||
>
|
>
|
||||||
<CardContent className="p-0">
|
<CardContent className="p-0">
|
||||||
<div className="flex flex-col justify-between gap-2">
|
<div className="flex flex-col justify-between gap-2">
|
||||||
|
|
@ -711,11 +706,12 @@ export function DigitalInnovationPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Process Impacts Chart */}
|
{/* Process Impacts Chart */}
|
||||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
|
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-12rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
|
||||||
{/* <CardContent > */}
|
{/* <CardContent > */}
|
||||||
<CustomBarChart
|
<CustomBarChart
|
||||||
title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
|
title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
|
||||||
loading={statsLoading}
|
loading={statsLoading}
|
||||||
|
height="100%"
|
||||||
data={[
|
data={[
|
||||||
{
|
{
|
||||||
label: DigitalCardLabel.decreasCost,
|
label: DigitalCardLabel.decreasCost,
|
||||||
|
|
@ -870,7 +866,7 @@ export function DigitalInnovationPage() {
|
||||||
<div className="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
|
<div className="flex flex-row gap-4 text-sm text-gray-300 font-persian justify-between">
|
||||||
<div className="text-center gap-2 items-center w-1/3 pr-16">
|
<div className="text-center gap-2 items-center w-1/3 pr-16">
|
||||||
<div className="text-base text-gray-401 mb-1">
|
<div className="text-base text-gray-401 mb-1">
|
||||||
کل پروژه ها : {formatNumber(actualTotalCount)}
|
کل پروژه ها : {formatNumber(actualTotalCount)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -103,7 +103,6 @@ interface InnovationStats {
|
||||||
count_innovation_green_projects: number;
|
count_innovation_green_projects: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
interface Params {
|
interface Params {
|
||||||
icon: any;
|
icon: any;
|
||||||
label: string;
|
label: string;
|
||||||
|
|
@ -137,7 +136,6 @@ enum projectStatus {
|
||||||
finish = "پایان یافته",
|
finish = "پایان یافته",
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ key: "select", label: "", sortable: false, width: "50px" },
|
{ key: "select", label: "", sortable: false, width: "50px" },
|
||||||
{ key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
|
{ key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
|
||||||
|
|
@ -617,19 +615,19 @@ export function GreenInnovationPage() {
|
||||||
);
|
);
|
||||||
case "title":
|
case "title":
|
||||||
return <span className="font-medium text-white">{String(value)}</span>;
|
return <span className="font-medium text-white">{String(value)}</span>;
|
||||||
case "project_status":
|
case "project_status":
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Badge
|
<Badge
|
||||||
variant={statusColor(value)}
|
variant={statusColor(value)}
|
||||||
className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
|
className="font-medium border-2 p-0 block w-2 h-2 rounded-full"
|
||||||
style={{
|
style={{
|
||||||
border: "none",
|
border: "none",
|
||||||
}}
|
}}
|
||||||
></Badge>
|
></Badge>
|
||||||
{String(value)}
|
{String(value)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
case "project_rating":
|
case "project_rating":
|
||||||
return (
|
return (
|
||||||
<Badge variant="outline" className="text-lg text-center border-none">
|
<Badge variant="outline" className="text-lg text-center border-none">
|
||||||
|
|
@ -684,7 +682,7 @@ export function GreenInnovationPage() {
|
||||||
<DashboardLayout title="نوآوری سبز">
|
<DashboardLayout title="نوآوری سبز">
|
||||||
<div className="p-6 space-y-4">
|
<div className="p-6 space-y-4">
|
||||||
{/* Stats Cards */}
|
{/* Stats Cards */}
|
||||||
<div className="flex gap-6 mb-6">
|
<div className="flex gap-6 mb-5">
|
||||||
<div className="flex flex-col gap-11 h-full w-1/2">
|
<div className="flex flex-col gap-11 h-full w-1/2">
|
||||||
{/* Stats Grid */}
|
{/* Stats Grid */}
|
||||||
{loading || statsLoading
|
{loading || statsLoading
|
||||||
|
|
@ -756,7 +754,7 @@ export function GreenInnovationPage() {
|
||||||
{/* Process Impacts Chart */}
|
{/* Process Impacts Chart */}
|
||||||
|
|
||||||
{statsLoading ? (
|
{statsLoading ? (
|
||||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-24.3rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
|
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-25rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
|
||||||
<CardContent className="p-0 h-full">
|
<CardContent className="p-0 h-full">
|
||||||
<div className="border-b-2 border-gray-500/20">
|
<div className="border-b-2 border-gray-500/20">
|
||||||
<div className="w-full p-4 px-6">
|
<div className="w-full p-4 px-6">
|
||||||
|
|
@ -799,7 +797,7 @@ export function GreenInnovationPage() {
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
) : (
|
) : (
|
||||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-26rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
|
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-[calc(90vh-27rem)] backdrop-blur-sm rounded-lg w-full overflow-hidden">
|
||||||
<CardContent className="p-0 h-full overflow-hidden">
|
<CardContent className="p-0 h-full overflow-hidden">
|
||||||
<div className="border-b-2 border-gray-500/20">
|
<div className="border-b-2 border-gray-500/20">
|
||||||
<div className="w-full p-4 px-6">
|
<div className="w-full p-4 px-6">
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,7 @@ export function CustomBarChart({
|
||||||
}: CustomBarChartProps) {
|
}: CustomBarChartProps) {
|
||||||
// Calculate the maximum value across all data points for consistent scaling
|
// Calculate the maximum value across all data points for consistent scaling
|
||||||
const globalMaxValue = Math.max(
|
const globalMaxValue = Math.max(
|
||||||
...data.map((item) => item.maxValue || item.value),
|
...data.map((item) => item.maxValue || item.value)
|
||||||
);
|
);
|
||||||
|
|
||||||
// Loading skeleton
|
// Loading skeleton
|
||||||
|
|
@ -43,7 +43,7 @@ export function CustomBarChart({
|
||||||
<div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
|
<div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4 flex flex-col gap-4">
|
||||||
{Array.from({ length: 4 }).map((_, index) => (
|
{Array.from({ length: 4 }).map((_, index) => (
|
||||||
<div key={index} className="flex items-center gap-3">
|
<div key={index} className="flex items-center gap-3">
|
||||||
{/* Label skeleton */}
|
{/* Label skeleton */}
|
||||||
|
|
@ -86,8 +86,9 @@ export function CustomBarChart({
|
||||||
<div key={index} className="flex items-center gap-3">
|
<div key={index} className="flex items-center gap-3">
|
||||||
{/* Label */}
|
{/* Label */}
|
||||||
<span
|
<span
|
||||||
className={`font-persian text-sm min-w-[160px] text-right ${item.labelColor || "text-white"
|
className={`font-persian text-sm min-w-[160px] text-right ${
|
||||||
}`}
|
item.labelColor || "text-white"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
{item.label}
|
{item.label}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -97,8 +98,9 @@ export function CustomBarChart({
|
||||||
className={`flex-1 flex items-center bg-gray-700 rounded-full relative overflow-hidden ${barHeight}`}
|
className={`flex-1 flex items-center bg-gray-700 rounded-full relative overflow-hidden ${barHeight}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${item.color || "bg-emerald-400"
|
className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${
|
||||||
}`}
|
item.color || "bg-emerald-400"
|
||||||
|
}`}
|
||||||
style={{
|
style={{
|
||||||
width: `${Math.min(percentage, 100)}%`,
|
width: `${Math.min(percentage, 100)}%`,
|
||||||
}}
|
}}
|
||||||
|
|
@ -110,18 +112,19 @@ export function CustomBarChart({
|
||||||
|
|
||||||
{/* Value Label */}
|
{/* Value Label */}
|
||||||
<span
|
<span
|
||||||
className={`font-bold text-sm min-w-[60px] text-left ${item.color?.includes("emerald")
|
className={`font-bold text-sm min-w-[60px] text-left ${
|
||||||
? "text-emerald-400"
|
item.color?.includes("emerald")
|
||||||
: item.color?.includes("blue")
|
? "text-emerald-400"
|
||||||
? "text-blue-400"
|
: item.color?.includes("blue")
|
||||||
: item.color?.includes("purple")
|
? "text-blue-400"
|
||||||
? "text-purple-400"
|
: item.color?.includes("purple")
|
||||||
: item.color?.includes("red")
|
? "text-purple-400"
|
||||||
? "text-red-400"
|
: item.color?.includes("red")
|
||||||
: item.color?.includes("yellow")
|
? "text-red-400"
|
||||||
? "text-yellow-400"
|
: item.color?.includes("yellow")
|
||||||
: "text-emerald-400"
|
? "text-yellow-400"
|
||||||
}`}
|
: "text-emerald-400"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
{item.valuePrefix || ""}
|
{item.valuePrefix || ""}
|
||||||
{formatNumber(parseFloat(displayValue))}
|
{formatNumber(parseFloat(displayValue))}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user