fix: desinged bugs

This commit is contained in:
mehrdad_adabi 2025-08-31 06:34:29 +03:30
parent 28f22dd0d3
commit 12e85fdb08
3 changed files with 46 additions and 49 deletions

View File

@ -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>

View File

@ -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">

View File

@ -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))}