add popup for innvation ,also fix the zoom initial in graph popup
This commit is contained in:
parent
a51f8b3105
commit
ba7a2499f1
|
|
@ -5,6 +5,7 @@ import { Button } from "~/components/ui/button";
|
|||
import { Badge } from "~/components/ui/badge";
|
||||
import { Checkbox } from "~/components/ui/checkbox";
|
||||
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
|
||||
import moment from "moment-jalaali";
|
||||
import type { BarChartData } from "~/components/ui/custom-bar-chart";
|
||||
import {
|
||||
Table,
|
||||
|
|
@ -25,11 +26,17 @@ import {
|
|||
ChevronDown,
|
||||
RefreshCw,
|
||||
ExternalLink,
|
||||
Building2,
|
||||
PickaxeIcon,
|
||||
UserIcon,
|
||||
UsersIcon,
|
||||
} from "lucide-react";
|
||||
import apiService from "~/lib/api";
|
||||
import toast from "react-hot-toast";
|
||||
import {Funnel, Wrench , CirclePause , DollarSign} from "lucide-react"
|
||||
import { Funnel, Wrench, CirclePause, DollarSign } from "lucide-react";
|
||||
import ProjectDetail from "../projects/project-detail";
|
||||
|
||||
moment.loadPersian({ usePersianDigits: true });
|
||||
interface ProcessInnovationData {
|
||||
project_no: string;
|
||||
title: string;
|
||||
|
|
@ -39,6 +46,7 @@ interface ProcessInnovationData {
|
|||
throat_removal: string;
|
||||
amount_currency_reduction: string;
|
||||
Reduce_rate_failure: string;
|
||||
observer: string;
|
||||
}
|
||||
|
||||
interface SortConfig {
|
||||
|
|
@ -72,9 +80,19 @@ const columns = [
|
|||
{ key: "select", label: "", sortable: false, width: "50px" },
|
||||
{ key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
|
||||
{ key: "title", label: "عنوان پروژه", sortable: true, width: "400px" },
|
||||
{ key: "project_status", label: "وضعیت پروژه", sortable: true, width: "140px" },
|
||||
{ key: "project_rating", label: "امتیاز پروژه", sortable: true, width: "140px" },
|
||||
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" }
|
||||
{
|
||||
key: "project_status",
|
||||
label: "وضعیت پروژه",
|
||||
sortable: true,
|
||||
width: "140px",
|
||||
},
|
||||
{
|
||||
key: "project_rating",
|
||||
label: "امتیاز پروژه",
|
||||
sortable: true,
|
||||
width: "140px",
|
||||
},
|
||||
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
|
||||
];
|
||||
|
||||
export function ProcessInnovationPage() {
|
||||
|
|
@ -103,9 +121,12 @@ export function ProcessInnovationPage() {
|
|||
field: "start_date",
|
||||
direction: "asc",
|
||||
});
|
||||
const [selectedProjects, setSelectedProjects] = useState<Set<string>>(new Set());
|
||||
const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
||||
const [selectedProjectDetails, setSelectedProjectDetails] = useState<ProcessInnovationData | null>(null);
|
||||
const [selectedProjectDetails, setSelectedProjectDetails] =
|
||||
useState<ProcessInnovationData | null>(null);
|
||||
const observerRef = useRef<HTMLDivElement>(null);
|
||||
const fetchingRef = useRef(false);
|
||||
|
||||
|
|
@ -114,7 +135,7 @@ export function ProcessInnovationPage() {
|
|||
if (selectedProjects.size === projects.length) {
|
||||
setSelectedProjects(new Set());
|
||||
} else {
|
||||
setSelectedProjects(new Set(projects.map(p => p.project_no)));
|
||||
setSelectedProjects(new Set(projects.map((p) => p.project_no)));
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -129,6 +150,7 @@ export function ProcessInnovationPage() {
|
|||
};
|
||||
|
||||
const handleProjectDetails = (project: ProcessInnovationData) => {
|
||||
console.log(project);
|
||||
setSelectedProjectDetails(project);
|
||||
setDetailsDialogOpen(true);
|
||||
};
|
||||
|
|
@ -145,9 +167,12 @@ export function ProcessInnovationPage() {
|
|||
{
|
||||
id: "production-stops-prevention",
|
||||
title: "جلوگیری از توقفات تولید",
|
||||
value: formatNumber(stats.productionStopsPreventionSum.toFixed?.(1) ?? stats.productionStopsPreventionSum),
|
||||
value: formatNumber(
|
||||
stats.productionStopsPreventionSum.toFixed?.(1) ??
|
||||
stats.productionStopsPreventionSum,
|
||||
),
|
||||
description: "ظرفیت افزایش یافته",
|
||||
icon: <CirclePause/>,
|
||||
icon: <CirclePause />,
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
{
|
||||
|
|
@ -156,25 +181,30 @@ export function ProcessInnovationPage() {
|
|||
value: formatNumber(stats.bottleneckRemovalCount),
|
||||
description: "تعداد رفع گلوگاه",
|
||||
icon: <Funnel />,
|
||||
color: "text-emerald-400"
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
id: "currency-reduction",
|
||||
title: "کاهش ارز بری",
|
||||
value: formatNumber(stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum),
|
||||
value: formatNumber(
|
||||
stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum,
|
||||
),
|
||||
description: "دلار کاهش یافته",
|
||||
icon: <DollarSign/>,
|
||||
icon: <DollarSign />,
|
||||
color: "text-emerald-400",
|
||||
},
|
||||
{
|
||||
id: "frequent-failures-reduction",
|
||||
title: "کاهش خرابیهای پرتکرار",
|
||||
value: formatNumber(stats.frequentFailuresReductionSum.toFixed?.(1) ?? stats.frequentFailuresReductionSum),
|
||||
value: formatNumber(
|
||||
stats.frequentFailuresReductionSum.toFixed?.(1) ??
|
||||
stats.frequentFailuresReductionSum,
|
||||
),
|
||||
description: "مجموع درصد کاهش خرابی",
|
||||
icon: <Wrench/>,
|
||||
icon: <Wrench />,
|
||||
color: "text-emerald-400",
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
const fetchProjects = async (reset = false) => {
|
||||
|
|
@ -184,7 +214,7 @@ export function ProcessInnovationPage() {
|
|||
|
||||
try {
|
||||
fetchingRef.current = true;
|
||||
|
||||
|
||||
if (reset) {
|
||||
setLoading(true);
|
||||
setCurrentPage(1);
|
||||
|
|
@ -201,16 +231,22 @@ export function ProcessInnovationPage() {
|
|||
"title",
|
||||
"project_status",
|
||||
"project_rating",
|
||||
"reduce_prevention_production_stops",
|
||||
"throat_removal",
|
||||
"reduce_prevention_production_stops",
|
||||
"amount_currency_reduction",
|
||||
"Reduce_rate_failure",
|
||||
"project_description",
|
||||
"start_date",
|
||||
"done_date",
|
||||
"approved_budget",
|
||||
"observer",
|
||||
],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
Sorts: [[sortConfig.field, sortConfig.direction]],
|
||||
Sorts: [["start_date", "asc"]],
|
||||
Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
|
||||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||||
});
|
||||
|
||||
console.log(JSON.parse(response.data));
|
||||
if (response.state === 0) {
|
||||
const dataString = response.data;
|
||||
if (dataString && typeof dataString === "string") {
|
||||
|
|
@ -289,26 +325,26 @@ export function ProcessInnovationPage() {
|
|||
}, [currentPage]);
|
||||
|
||||
useEffect(() => {
|
||||
const scrollContainer = document.querySelector('.overflow-auto');
|
||||
|
||||
const scrollContainer = document.querySelector(".overflow-auto");
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!scrollContainer || !hasMore || loadingMore) return;
|
||||
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
|
||||
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
|
||||
|
||||
|
||||
if (scrollPercentage >= 0.9) {
|
||||
loadMore();
|
||||
}
|
||||
};
|
||||
|
||||
if (scrollContainer) {
|
||||
scrollContainer.addEventListener('scroll', handleScroll);
|
||||
scrollContainer.addEventListener("scroll", handleScroll);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (scrollContainer) {
|
||||
scrollContainer.removeEventListener('scroll', handleScroll);
|
||||
scrollContainer.removeEventListener("scroll", handleScroll);
|
||||
}
|
||||
};
|
||||
}, [loadMore, hasMore, loadingMore]);
|
||||
|
|
@ -359,13 +395,14 @@ export function ProcessInnovationPage() {
|
|||
try {
|
||||
setStatsLoading(true);
|
||||
const raw = await apiService.callInnovationProcess<any>({
|
||||
innovation_process_function: {
|
||||
},
|
||||
innovation_process_function: {},
|
||||
});
|
||||
|
||||
let payload: any = raw?.data;
|
||||
if (typeof payload === "string") {
|
||||
try { payload = JSON.parse(payload); } catch {}
|
||||
try {
|
||||
payload = JSON.parse(payload);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const parseNum = (v: unknown): number => {
|
||||
|
|
@ -382,14 +419,24 @@ export function ProcessInnovationPage() {
|
|||
const normalized: InnovationStats = {
|
||||
totalProjects: parseNum(payload?.count_innovation_process_projects),
|
||||
averageScore: parseNum(payload?.average_project_score),
|
||||
productionStopsPreventionSum: parseNum(payload?.sum_stopping_production),
|
||||
productionStopsPreventionSum: parseNum(
|
||||
payload?.sum_stopping_production,
|
||||
),
|
||||
bottleneckRemovalCount: parseNum(payload?.count_throat_removal),
|
||||
currencyReductionSum: parseNum(payload?.sum_reduction_value_currency),
|
||||
frequentFailuresReductionSum: parseNum(payload?.sum_reducing_breakdowns),
|
||||
percentProductionStops: parseNum(payload?.percent_sum_stopping_production),
|
||||
frequentFailuresReductionSum: parseNum(
|
||||
payload?.sum_reducing_breakdowns,
|
||||
),
|
||||
percentProductionStops: parseNum(
|
||||
payload?.percent_sum_stopping_production,
|
||||
),
|
||||
percentBottleneckRemoval: parseNum(payload?.percent_throat_removal),
|
||||
percentCurrencyReduction: parseNum(payload?.percent_reduction_value_currency),
|
||||
percentFailuresReduction: parseNum(payload?.percent_reducing_breakdowns),
|
||||
percentCurrencyReduction: parseNum(
|
||||
payload?.percent_reduction_value_currency,
|
||||
),
|
||||
percentFailuresReduction: parseNum(
|
||||
payload?.percent_reducing_breakdowns,
|
||||
),
|
||||
};
|
||||
|
||||
setStats(normalized);
|
||||
|
|
@ -443,7 +490,7 @@ export function ProcessInnovationPage() {
|
|||
const getRatingColor = (rating: string) => {
|
||||
const ratingNum = parseFloat(rating);
|
||||
if (isNaN(ratingNum)) return "#6B7280";
|
||||
|
||||
|
||||
if (ratingNum >= 8) return "#3AEA83";
|
||||
if (ratingNum >= 6) return "#69C8EA";
|
||||
if (ratingNum >= 4) return "#FFD700";
|
||||
|
|
@ -481,10 +528,7 @@ export function ProcessInnovationPage() {
|
|||
);
|
||||
case "project_no":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-mono"
|
||||
>
|
||||
<Badge variant="outline" className="font-mono">
|
||||
{String(value)}
|
||||
</Badge>
|
||||
);
|
||||
|
|
@ -496,7 +540,7 @@ export function ProcessInnovationPage() {
|
|||
variant="outline"
|
||||
className="font-medium border-2"
|
||||
style={{
|
||||
border:"none",
|
||||
border: "none",
|
||||
}}
|
||||
>
|
||||
{String(value)}
|
||||
|
|
@ -504,10 +548,7 @@ export function ProcessInnovationPage() {
|
|||
);
|
||||
case "project_rating":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-lg text-center border-none"
|
||||
>
|
||||
<Badge variant="outline" className="text-lg text-center border-none">
|
||||
{formatNumber(String(value))}
|
||||
</Badge>
|
||||
);
|
||||
|
|
@ -529,187 +570,215 @@ export function ProcessInnovationPage() {
|
|||
<div className="p-6 space-y-4">
|
||||
{/* Stats Cards */}
|
||||
<div className="flex gap-6">
|
||||
<div className="space-y-6 w-full">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{loading || statsLoading ? (
|
||||
// Loading skeleton for stats cards - matching new design
|
||||
Array.from({ length: 4 }).map((_, index) => (
|
||||
<Card key={`skeleton-${index}`} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden">
|
||||
<CardContent className="p-2">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
|
||||
<div className="h-6 bg-gray-600 rounded animate-pulse" style={{ width: '60%' }} />
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full w-fit">
|
||||
<div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
|
||||
<div className="space-y-6 w-full">
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{loading || statsLoading
|
||||
? // Loading skeleton for stats cards - matching new design
|
||||
Array.from({ length: 4 }).map((_, index) => (
|
||||
<Card
|
||||
key={`skeleton-${index}`}
|
||||
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
|
||||
>
|
||||
<CardContent className="p-2">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
|
||||
<div
|
||||
className="h-6 bg-gray-600 rounded animate-pulse"
|
||||
style={{ width: "60%" }}
|
||||
/>
|
||||
<div className="p-3 bg-emerald-500/20 rounded-full w-fit">
|
||||
<div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col p-1">
|
||||
<div
|
||||
className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
|
||||
style={{ width: "40%" }}
|
||||
/>
|
||||
<div
|
||||
className="h-4 bg-gray-600 rounded animate-pulse"
|
||||
style={{ width: "80%" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col p-1">
|
||||
<div className="h-8 bg-gray-600 rounded mb-1 animate-pulse" style={{ width: '40%' }} />
|
||||
<div className="h-4 bg-gray-600 rounded animate-pulse" style={{ width: '80%' }} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
statsCards.map((card) => (
|
||||
<Card key={card.id} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="p-2">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
|
||||
<h3 className="text-lg font-bold text-white font-persian">
|
||||
{card.title}
|
||||
</h3>
|
||||
<div className={`p-3 gird placeitems-center rounded-full w-fit `}>
|
||||
{card.icon}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
: statsCards.map((card) => (
|
||||
<Card
|
||||
key={card.id}
|
||||
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
|
||||
>
|
||||
<CardContent className="p-2">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
|
||||
<h3 className="text-lg font-bold text-white font-persian">
|
||||
{card.title}
|
||||
</h3>
|
||||
<div
|
||||
className={`p-3 gird placeitems-center rounded-full w-fit `}
|
||||
>
|
||||
{card.icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col p-1">
|
||||
<p
|
||||
className={`text-3xl font-bold ${card.color} mb-1`}
|
||||
>
|
||||
{card.value}
|
||||
</p>
|
||||
<p className="text-sm text-gray-300 font-persian">
|
||||
{card.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col p-1">
|
||||
<p className={`text-3xl font-bold ${card.color} mb-1`}>
|
||||
{card.value}
|
||||
</p>
|
||||
<p className="text-sm text-gray-300 font-persian">
|
||||
{card.description}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Process Impacts Chart */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
|
||||
<CardContent className="p-4">
|
||||
<CustomBarChart
|
||||
title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
|
||||
loading={statsLoading}
|
||||
data={[
|
||||
{
|
||||
label: "کاهش توقفات تولید",
|
||||
value: stats.percentProductionStops || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white"
|
||||
},
|
||||
{
|
||||
label: "رفع گلوگاه تولید",
|
||||
value: stats.percentBottleneckRemoval || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white"
|
||||
},
|
||||
{
|
||||
label: "کاهش ارز بری",
|
||||
value: stats.percentCurrencyReduction || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white"
|
||||
},
|
||||
{
|
||||
label: "کاهش خرابی پر تکرار",
|
||||
value: stats.percentFailuresReduction || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white"
|
||||
}
|
||||
]}
|
||||
barHeight="h-5"
|
||||
showAxisLabels={true}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
{/* Process Impacts Chart */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl w-full overflow-hidden">
|
||||
<CardContent className="p-4">
|
||||
<CustomBarChart
|
||||
title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
|
||||
loading={statsLoading}
|
||||
data={[
|
||||
{
|
||||
label: "کاهش توقفات تولید",
|
||||
value: stats.percentProductionStops || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white",
|
||||
},
|
||||
{
|
||||
label: "رفع گلوگاه تولید",
|
||||
value: stats.percentBottleneckRemoval || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white",
|
||||
},
|
||||
{
|
||||
label: "کاهش ارز بری",
|
||||
value: stats.percentCurrencyReduction || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white",
|
||||
},
|
||||
{
|
||||
label: "کاهش خرابی پر تکرار",
|
||||
value: stats.percentFailuresReduction || 0,
|
||||
color: "bg-emerald-400",
|
||||
labelColor: "text-white",
|
||||
},
|
||||
]}
|
||||
barHeight="h-5"
|
||||
showAxisLabels={true}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Data Table */}
|
||||
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
<div className="relative">
|
||||
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
|
||||
<TableHeader>
|
||||
<TableRow className="bg-[#3F415A]">
|
||||
{columns.map((column) => (
|
||||
<TableHead
|
||||
key={column.key}
|
||||
className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A]"
|
||||
style={{ width: column.width }}
|
||||
>
|
||||
{column.key === "select" ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={selectedProjects.size === projects.length && projects.length > 0}
|
||||
onCheckedChange={handleSelectAll}
|
||||
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
|
||||
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
|
||||
<TableHeader>
|
||||
<TableRow className="bg-[#3F415A]">
|
||||
{columns.map((column) => (
|
||||
<TableHead
|
||||
key={column.key}
|
||||
className="text-right font-persian whitespace-nowrap text-gray-200 font-medium sticky top-0 z-20 bg-[#3F415A]"
|
||||
style={{ width: column.width }}
|
||||
>
|
||||
{column.key === "select" ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<Checkbox
|
||||
checked={
|
||||
selectedProjects.size === projects.length &&
|
||||
projects.length > 0
|
||||
}
|
||||
onCheckedChange={handleSelectAll}
|
||||
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
|
||||
/>
|
||||
</div>
|
||||
) : column.sortable ? (
|
||||
<button
|
||||
onClick={() => handleSort(column.key)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>{column.label}</span>
|
||||
{sortConfig.field === column.key ? (
|
||||
sortConfig.direction === "asc" ? (
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
)
|
||||
) : (
|
||||
<div className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
column.label
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
// Skeleton loading rows (compact)
|
||||
Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow
|
||||
key={`skeleton-${index}`}
|
||||
className="text-sm leading-tight h-8"
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
|
||||
<div
|
||||
className="h-2.5 bg-gray-600 rounded animate-pulse"
|
||||
style={{ width: `${Math.random() * 60 + 40}%` }}
|
||||
/>
|
||||
</div>
|
||||
) : column.sortable ? (
|
||||
<button
|
||||
onClick={() => handleSort(column.key)}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>{column.label}</span>
|
||||
{sortConfig.field === column.key ? (
|
||||
sortConfig.direction === "asc" ? (
|
||||
<ChevronUp className="w-4 h-4" />
|
||||
) : (
|
||||
<ChevronDown className="w-4 h-4" />
|
||||
)
|
||||
) : (
|
||||
<div className="w-4 h-4" />
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
column.label
|
||||
)}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
// Skeleton loading rows (compact)
|
||||
Array.from({ length: 10 }).map((_, index) => (
|
||||
<TableRow key={`skeleton-${index}`} className="text-sm leading-tight h-8">
|
||||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
|
||||
<div className="h-2.5 bg-gray-600 rounded animate-pulse" style={{ width: `${Math.random() * 60 + 40}%` }} />
|
||||
</div>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : projects.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="text-center py-8"
|
||||
>
|
||||
<span className="text-gray-400 font-persian">
|
||||
هیچ پروژهای یافت نشد
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
) : (
|
||||
projects.map((project, index) => (
|
||||
<TableRow key={`${project.project_no}-${index}`} className="text-sm leading-tight h-8">
|
||||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key==="select" ? "flex justify-center items-center" :""}`}
|
||||
>
|
||||
{renderCellContent(project, column)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
))
|
||||
) : projects.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell
|
||||
colSpan={columns.length}
|
||||
className="text-center py-8"
|
||||
>
|
||||
<span className="text-gray-400 font-persian">
|
||||
هیچ پروژهای یافت نشد
|
||||
</span>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
projects.map((project, index) => (
|
||||
<TableRow
|
||||
key={`${project.project_no}-${index}`}
|
||||
className="text-sm leading-tight h-8"
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
|
||||
>
|
||||
{renderCellContent(project, column)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{/* Infinite scroll trigger */}
|
||||
|
|
@ -718,8 +787,7 @@ export function ProcessInnovationPage() {
|
|||
<div className="flex items-center justify-center py-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
|
||||
<span className="font-persian text-gray-300 text-xs">
|
||||
</span>
|
||||
<span className="font-persian text-gray-300 text-xs"></span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -752,8 +820,12 @@ export function ProcessInnovationPage() {
|
|||
{/* Footer */}
|
||||
<div className="p-2 px-4 bg-gray-700/50">
|
||||
<div className="grid grid-cols-6 gap-4 text-sm text-gray-300 font-persian">
|
||||
<div className="text-center gap-2 items-center flex">
|
||||
<div className="text-base text-gray-401 mb-1"> کل پروژه ها : {formatNumber(stats.totalProjects || actualTotalCount)}</div>
|
||||
<div className="text-center gap-2 items-center flex">
|
||||
<div className="text-base text-gray-401 mb-1">
|
||||
{" "}
|
||||
کل پروژه ها :{" "}
|
||||
{formatNumber(stats.totalProjects || actualTotalCount)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Project number column - empty */}
|
||||
<div></div>
|
||||
|
|
@ -763,128 +835,105 @@ export function ProcessInnovationPage() {
|
|||
<div></div>
|
||||
{/* Project rating column - show average */}
|
||||
<div className="flex justify-center items-center gap-2">
|
||||
<div className="text-base text-gray-400 mb-1"> میانگین امتیاز :</div>
|
||||
<div className="text-base text-gray-400 mb-1">
|
||||
{" "}
|
||||
میانگین امتیاز :
|
||||
</div>
|
||||
<div className="font-bold">
|
||||
{formatNumber(((stats.averageScore ?? 0) as number).toFixed?.(1) ?? (stats.averageScore ?? 0))}
|
||||
{formatNumber(
|
||||
((stats.averageScore ?? 0) as number).toFixed?.(1) ??
|
||||
stats.averageScore ??
|
||||
0,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Details column - show total count */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Project Details Dialog */}
|
||||
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
||||
<DialogContent className="bg-[#2A2D3E] border-gray-700 max-w-2xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-4xl max-h-[80vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-white font-persian text-right">
|
||||
جزئیات پروژه
|
||||
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
|
||||
شرح پروژه
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{selectedProjectDetails && (
|
||||
<div className="space-y-6 text-right">
|
||||
{/* Project Header */}
|
||||
<div className="bg-gray-700/30 rounded-lg p-4">
|
||||
<h3 className="text-lg font-bold text-white font-persian mb-2">
|
||||
{selectedProjectDetails.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-mono text-emerald-400 border-emerald-500/50"
|
||||
>
|
||||
{selectedProjectDetails.project_no}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-medium border-2"
|
||||
style={{
|
||||
color: getStatusColor(selectedProjectDetails.project_status),
|
||||
borderColor: getStatusColor(selectedProjectDetails.project_status),
|
||||
backgroundColor: `${getStatusColor(selectedProjectDetails.project_status)}20`,
|
||||
}}
|
||||
>
|
||||
{selectedProjectDetails.project_status}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="space-y-4 flex justify-between text-right px-6">
|
||||
{/* Project Description */}
|
||||
<div className="flex-[4] border-l-2 border-gray-600">
|
||||
<h2 className="font-bold">{selectedProjectDetails?.title}</h2>
|
||||
<p className="text-gray-300 font-persian px-2 mt-2">
|
||||
{selectedProjectDetails?.project_description || "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Project Details */}
|
||||
<div className="flex flex-[3] gap-2 flex-col px-4">
|
||||
<div className="font-bold text-right ">جزئیات پروژه</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<Building2 className="h-4 text-green-500" />
|
||||
زمان شروع:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
{selectedProjectDetails?.start_date
|
||||
? moment(
|
||||
selectedProjectDetails?.start_date,
|
||||
"YYYY-MM-DD",
|
||||
).format("YYYY/MM/DD")
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Project Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="bg-gray-700/20 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
|
||||
امتیاز پروژه
|
||||
</h4>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-lg font-bold border-2"
|
||||
style={{
|
||||
color: getRatingColor(selectedProjectDetails.project_rating),
|
||||
borderColor: getRatingColor(selectedProjectDetails.project_rating),
|
||||
backgroundColor: `${getRatingColor(selectedProjectDetails.project_rating)}20`,
|
||||
}}
|
||||
>
|
||||
{formatNumber(selectedProjectDetails.project_rating)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-700/20 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
|
||||
کاهش توقفات تولید
|
||||
</h4>
|
||||
<span className="text-lg font-bold text-blue-400">
|
||||
{formatNumber(selectedProjectDetails.reduce_prevention_production_stops)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-700/20 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
|
||||
رفع گلوگاه تولید
|
||||
</h4>
|
||||
<span className="text-lg font-bold text-blue-400">
|
||||
{formatNumber(selectedProjectDetails.throat_removal)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-700/20 rounded-lg p-4">
|
||||
<h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
|
||||
کاهش ارز بری
|
||||
</h4>
|
||||
<span className="text-lg font-bold text-emerald-400">
|
||||
{formatCurrency(selectedProjectDetails.amount_currency_reduction)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-700/20 rounded-lg p-4 col-span-2">
|
||||
<h4 className="text-sm font-medium text-gray-300 font-persian mb-2">
|
||||
کاهش خرابی پر تکرار
|
||||
</h4>
|
||||
<span className="text-lg font-bold text-blue-400">
|
||||
{formatNumber(selectedProjectDetails.Reduce_rate_failure)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<PickaxeIcon className="h-4 text-green-500" />
|
||||
زمان پایان:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
{selectedProjectDetails?.done_date
|
||||
? moment(
|
||||
selectedProjectDetails?.done_date,
|
||||
"YYYY-MM-DD",
|
||||
).format("YYYY/MM/DD")
|
||||
: "-"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-3 pt-4 border-t border-gray-700">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDetailsDialogOpen(false)}
|
||||
className="border-gray-600 text-gray-300 hover:bg-gray-700"
|
||||
>
|
||||
بستن
|
||||
</Button>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<UsersIcon className="h-4 text-green-500" />
|
||||
هزینه برآورد شده:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
{formatNumber(
|
||||
Number(
|
||||
selectedProjectDetails?.approved_budget.replaceAll(
|
||||
",",
|
||||
"",
|
||||
),
|
||||
),
|
||||
) || "-"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-gray-300 font-persian mb-2 flex items-center gap-1">
|
||||
<UserIcon className="h-4 text-green-500" />
|
||||
نفر مرتبط:
|
||||
</h4>
|
||||
<span className="text-white font-bold font-persian">
|
||||
{selectedProjectDetails?.observer || "-"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
|
|||
// Create zoom behavior
|
||||
const zoom = d3
|
||||
.zoom<SVGSVGElement, unknown>()
|
||||
.scaleExtent([1, 2.5]) // Limit zoom out to 1x, zoom in to 2.5x
|
||||
.scaleExtent([0.8, 2.5]) // Limit zoom out to 1x, zoom in to 2.5x
|
||||
.on("zoom", (event) => {
|
||||
container.attr("transform", event.transform);
|
||||
});
|
||||
|
|
@ -240,6 +240,18 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
|
|||
d3.forceCollide().radius((d) => (d.isCenter ? 40 : 30)),
|
||||
);
|
||||
|
||||
const initialScale = 0.85;
|
||||
const initialTranslate = [
|
||||
width / 2 - (width / 2) * initialScale,
|
||||
height / 2 - (height / 2) * initialScale,
|
||||
];
|
||||
svg.call(
|
||||
zoom.transform,
|
||||
d3.zoomIdentity
|
||||
.translate(initialTranslate[0], initialTranslate[1])
|
||||
.scale(initialScale),
|
||||
);
|
||||
|
||||
// Fix center node position
|
||||
const centerNode = nodes.find((n) => n.isCenter);
|
||||
if (centerNode) {
|
||||
|
|
@ -424,19 +436,13 @@ export function NetworkGraph({ onNodeClick }: NetworkGraphProps) {
|
|||
// Filter out image fields and find description
|
||||
const filteredFields = fieldValues.filter(
|
||||
(field: any) =>
|
||||
![
|
||||
"image",
|
||||
"img",
|
||||
"des",
|
||||
"dec",
|
||||
"description",
|
||||
"collaboration",
|
||||
].includes(field.F.toLowerCase()),
|
||||
!["image", "img", "full_name"].includes(field.F.toLowerCase()),
|
||||
);
|
||||
|
||||
const descriptionField = fieldValues.find(
|
||||
(field: any) =>
|
||||
field.F.toLowerCase().includes("description") ||
|
||||
field.F.toLowerCase().includes("collaboration") ||
|
||||
field.F.toLowerCase().includes("about"),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
"@radix-ui/react-slot": "^1.0.2",
|
||||
"@react-router/node": "^7.7.0",
|
||||
"@react-router/serve": "^7.7.1",
|
||||
"@sigma/node-image": "^3.0.0",
|
||||
"@types/d3": "^7.4.3",
|
||||
"chart.js": "^4.5.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
|
|
@ -32,7 +31,6 @@
|
|||
"react-hot-toast": "^2.5.2",
|
||||
"react-router": "^7.7.0",
|
||||
"recharts": "^3.1.2",
|
||||
"sigma": "^3.0.2",
|
||||
"tailwind-merge": "^3.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -32,9 +32,6 @@ importers:
|
|||
'@react-router/serve':
|
||||
specifier: ^7.7.1
|
||||
version: 7.8.0(react-router@7.7.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(typescript@5.8.3)
|
||||
'@sigma/node-image':
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.0(sigma@3.0.2(graphology-types@0.24.8))
|
||||
'@types/d3':
|
||||
specifier: ^7.4.3
|
||||
version: 7.4.3
|
||||
|
|
@ -77,9 +74,6 @@ importers:
|
|||
recharts:
|
||||
specifier: ^3.1.2
|
||||
version: 3.1.2(@types/react@19.1.8)(react-dom@19.1.0(react@19.1.0))(react-is@19.1.1)(react@19.1.0)(redux@5.0.1)
|
||||
sigma:
|
||||
specifier: ^3.0.2
|
||||
version: 3.0.2(graphology-types@0.24.8)
|
||||
tailwind-merge:
|
||||
specifier: ^3.3.1
|
||||
version: 3.3.1
|
||||
|
|
@ -974,11 +968,6 @@ packages:
|
|||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@sigma/node-image@3.0.0':
|
||||
resolution: {integrity: sha512-i4WLNPugDY4jgQEZtNSiSVj4HHXOraciXLtlgdygeUxMVEhH8PJ/+Q1vQ9f/SlKFnZQ+7vH3HnsSDW6FD9aP+g==}
|
||||
peerDependencies:
|
||||
sigma: '>=3.0.0-beta.10'
|
||||
|
||||
'@standard-schema/spec@1.0.0':
|
||||
resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
|
||||
|
||||
|
|
@ -1659,11 +1648,6 @@ packages:
|
|||
graphology-types@0.24.8:
|
||||
resolution: {integrity: sha512-hDRKYXa8TsoZHjgEaysSRyPdT6uB78Ci8WnjgbStlQysz7xR52PInxNsmnB7IBOM1BhikxkNyCVEFgmPKnpx3Q==}
|
||||
|
||||
graphology-utils@2.5.2:
|
||||
resolution: {integrity: sha512-ckHg8MXrXJkOARk56ZaSCM1g1Wihe2d6iTmz1enGOz4W/l831MBCKSayeFQfowgF8wd+PQ4rlch/56Vs/VZLDQ==}
|
||||
peerDependencies:
|
||||
graphology-types: '>=0.23.0'
|
||||
|
||||
graphology@0.26.0:
|
||||
resolution: {integrity: sha512-8SSImzgUUYC89Z042s+0r/vMibY7GX/Emz4LDO5e7jYXhuoWfHISPFJYjpRLUSJGq6UQ6xlenvX1p/hJdfXuXg==}
|
||||
peerDependencies:
|
||||
|
|
@ -2198,9 +2182,6 @@ packages:
|
|||
resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
|
||||
engines: {node: '>= 0.4'}
|
||||
|
||||
sigma@3.0.2:
|
||||
resolution: {integrity: sha512-/BUbeOwPGruiBOm0YQQ6ZMcLIZ6tf/W+Jcm7dxZyAX0tK3WP9/sq7/NAWBxPIxVahdGjCJoGwej0Gdrv0DxlQQ==}
|
||||
|
||||
signal-exit@4.1.0:
|
||||
resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
|
||||
engines: {node: '>=14'}
|
||||
|
|
@ -3282,10 +3263,6 @@ snapshots:
|
|||
'@rollup/rollup-win32-x64-msvc@4.45.1':
|
||||
optional: true
|
||||
|
||||
'@sigma/node-image@3.0.0(sigma@3.0.2(graphology-types@0.24.8))':
|
||||
dependencies:
|
||||
sigma: 3.0.2(graphology-types@0.24.8)
|
||||
|
||||
'@standard-schema/spec@1.0.0': {}
|
||||
|
||||
'@standard-schema/utils@0.3.0': {}
|
||||
|
|
@ -4009,10 +3986,6 @@ snapshots:
|
|||
|
||||
graphology-types@0.24.8: {}
|
||||
|
||||
graphology-utils@2.5.2(graphology-types@0.24.8):
|
||||
dependencies:
|
||||
graphology-types: 0.24.8
|
||||
|
||||
graphology@0.26.0(graphology-types@0.24.8):
|
||||
dependencies:
|
||||
events: 3.3.0
|
||||
|
|
@ -4503,13 +4476,6 @@ snapshots:
|
|||
side-channel-map: 1.0.1
|
||||
side-channel-weakmap: 1.0.2
|
||||
|
||||
sigma@3.0.2(graphology-types@0.24.8):
|
||||
dependencies:
|
||||
events: 3.3.0
|
||||
graphology-utils: 2.5.2(graphology-types@0.24.8)
|
||||
transitivePeerDependencies:
|
||||
- graphology-types
|
||||
|
||||
signal-exit@4.1.0: {}
|
||||
|
||||
source-map-js@1.2.1: {}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user