1048 lines
39 KiB
TypeScript
1048 lines
39 KiB
TypeScript
import {
|
||
Building2,
|
||
ChevronDown,
|
||
ChevronUp,
|
||
CirclePause,
|
||
DollarSign,
|
||
Funnel,
|
||
PickaxeIcon,
|
||
RefreshCw,
|
||
UserIcon,
|
||
UsersIcon,
|
||
Wrench,
|
||
} from "lucide-react";
|
||
import moment from "moment-jalaali";
|
||
import { useCallback, useEffect, useRef, useState } from "react";
|
||
import toast from "react-hot-toast";
|
||
import { Badge } from "~/components/ui/badge";
|
||
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 { CustomBarChart } from "~/components/ui/custom-bar-chart";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "~/components/ui/dialog";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "~/components/ui/table";
|
||
import { useStoredDate } from "~/hooks/useStoredDate";
|
||
import apiService from "~/lib/api";
|
||
import { EventBus, formatNumber } from "~/lib/utils";
|
||
import type { CalendarDate } from "~/types/util.type";
|
||
import { DashboardLayout } from "../layout";
|
||
|
||
moment.loadPersian({ usePersianDigits: true });
|
||
interface ProcessInnovationData {
|
||
project_no: string;
|
||
project_id: string;
|
||
title: string;
|
||
project_status: string;
|
||
project_rating: string;
|
||
reduce_prevention_production_stops: string;
|
||
throat_removal: string;
|
||
amount_currency_reduction: string;
|
||
Reduce_rate_failure: string;
|
||
observer: string;
|
||
// optional detailed fields returned by API
|
||
project_description?: string;
|
||
start_date?: string;
|
||
done_date?: string;
|
||
approved_budget?: string;
|
||
}
|
||
|
||
interface ProjectStats {
|
||
average_project_score: string;
|
||
count_innovation_process_projects: number;
|
||
count_throat_removal: number;
|
||
percent_reducing_breakdowns: string;
|
||
percent_reduction_value_currency: string;
|
||
percent_sum_stopping_production: string;
|
||
percent_throat_removal: string;
|
||
percent_operating_cost_before_innovation: string;
|
||
sum_reducing_breakdowns: number;
|
||
sum_reduction_value_currency: number;
|
||
sum_stopping_production: number;
|
||
sum_operating_cost_reduction: number;
|
||
}
|
||
|
||
interface SortConfig {
|
||
field: string;
|
||
direction: "asc" | "desc";
|
||
}
|
||
|
||
enum projectStatus {
|
||
propozal = "پروپوزال",
|
||
contract = "پیشنویس قرارداد",
|
||
inprogress = "در حال انجام",
|
||
stop = "متوقف شده",
|
||
mafasa = "مرحله مفاصا",
|
||
finish = "پایان یافته",
|
||
}
|
||
|
||
interface InnovationStats {
|
||
totalProjects: number;
|
||
averageScore: number;
|
||
productionStopsPreventionSum: number; // مجموع جلوگیری از توقفات تولید
|
||
bottleneckRemovalCount: number; // تعداد رفع گلوگاه
|
||
currencyReductionSum: number; // مجموع کاهش ارز بری (میلیون ریال)
|
||
frequentFailuresReductionSum: number; // مجموع کاهش خرابی های پرتکرار
|
||
percentProductionStops: number | string; // درصد مقایسهای جلوگیری از توقفات تولید
|
||
reductionCostOprationSum: number; // مجموع کاهش هزینه عملیاتی
|
||
percentBottleneckRemoval: number | string; // درصد مقایسهای رفع گلوگاه
|
||
percentCurrencyReduction: number | string; // درصد مقایسهای کاهش ارز بری
|
||
percentFailuresReduction: number | string; // درصد مقایسهای کاهش خرابیهای پرتکرار
|
||
percentOperatingCostBeforeInnovation: number | string; // درصد مقایسهای کاهش هزینه عملیاتی
|
||
}
|
||
|
||
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" },
|
||
];
|
||
|
||
export function ProcessInnovationPage() {
|
||
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 [date, setDate] = useStoredDate();
|
||
const [actualTotalCount, setActualTotalCount] = useState(0);
|
||
const [statsLoading, setStatsLoading] = useState(false);
|
||
const [stats, setStats] = useState<InnovationStats>({
|
||
totalProjects: 0,
|
||
averageScore: 0,
|
||
productionStopsPreventionSum: 0,
|
||
reductionCostOprationSum: 0,
|
||
bottleneckRemovalCount: 0,
|
||
currencyReductionSum: 0,
|
||
frequentFailuresReductionSum: 0,
|
||
percentProductionStops: 0,
|
||
percentBottleneckRemoval: 0,
|
||
percentCurrencyReduction: 0,
|
||
percentFailuresReduction: 0,
|
||
percentOperatingCostBeforeInnovation: 0,
|
||
});
|
||
const [sortConfig, setSortConfig] = useState<SortConfig>({
|
||
field: "start_date",
|
||
direction: "asc",
|
||
});
|
||
const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
|
||
new Set()
|
||
);
|
||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
||
const [selectedProjectDetails, setSelectedProjectDetails] =
|
||
useState<ProcessInnovationData | null>(null);
|
||
|
||
const [stateCard, setStateCard] = useState({
|
||
productionstopsprevention: {
|
||
id: "productionstopsprevention",
|
||
title: "توقفات تولید",
|
||
value: formatNumber(
|
||
stats.productionStopsPreventionSum.toFixed?.(1) ??
|
||
stats.productionStopsPreventionSum
|
||
),
|
||
description: "تن افزایش یافته",
|
||
icon: CirclePause,
|
||
color: "text-pr-green",
|
||
},
|
||
bottleneckremoval: {
|
||
id: "bottleneckremoval",
|
||
title: "گلوگاه ها",
|
||
value: formatNumber(stats.bottleneckRemovalCount),
|
||
description: "تعداد رفع گلوگاه",
|
||
icon: Funnel,
|
||
color: "text-pr-green",
|
||
},
|
||
currencyreduction: {
|
||
id: "currencyreduction",
|
||
title: "ارز بری",
|
||
value: formatNumber(
|
||
stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
|
||
),
|
||
description: "دلار کاهش یافته",
|
||
icon: DollarSign,
|
||
color: "text-pr-green",
|
||
},
|
||
decreaseCurrencyOperation: {
|
||
id: "decreaseCurrencyOperation",
|
||
title: "هزینه های عملیاتی",
|
||
value: formatNumber(
|
||
stats.reductionCostOprationSum.toFixed?.(0) ??
|
||
stats.reductionCostOprationSum
|
||
),
|
||
description: "میلیون ریال کاهش یافته",
|
||
icon: DollarSign,
|
||
color: "text-pr-green",
|
||
},
|
||
frequentfailuresreduction: {
|
||
id: "frequentfailuresreduction",
|
||
title: "خرابی های پرتکرار",
|
||
value: formatNumber(
|
||
stats.frequentFailuresReductionSum.toFixed?.(1) ??
|
||
stats.frequentFailuresReductionSum
|
||
),
|
||
description: "خرابی پر تکرار کاهش یافته",
|
||
icon: Wrench,
|
||
color: "text-pr-green",
|
||
},
|
||
});
|
||
|
||
const observerRef = useRef<HTMLDivElement>(null);
|
||
const fetchingRef = useRef(false);
|
||
|
||
const handleSelectProject = (projectNo: string) => {
|
||
const newSelected = new Set(selectedProjects);
|
||
if (newSelected.has(projectNo)) {
|
||
newSelected.delete(projectNo);
|
||
} else {
|
||
newSelected.add(projectNo);
|
||
}
|
||
setSelectedProjects(newSelected);
|
||
};
|
||
|
||
const handleProjectDetails = (project: ProcessInnovationData) => {
|
||
setSelectedProjectDetails(project);
|
||
setDetailsDialogOpen(true);
|
||
};
|
||
|
||
// Stats cards data - computed from projects data
|
||
const fetchProjects = async (reset = false) => {
|
||
if (fetchingRef.current) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
fetchingRef.current = true;
|
||
|
||
if (reset) {
|
||
setLoading(true);
|
||
setCurrentPage(1);
|
||
} else {
|
||
setLoadingMore(true);
|
||
}
|
||
|
||
const pageToFetch = reset ? 1 : currentPage;
|
||
|
||
const response = await apiService.select({
|
||
ProcessName: "project",
|
||
OutputFields: [
|
||
"project_no",
|
||
"project_id",
|
||
"title",
|
||
"project_status",
|
||
"project_rating",
|
||
"throat_removal",
|
||
"reduce_prevention_production_stops",
|
||
"amount_currency_reduction",
|
||
"Reduce_rate_failure",
|
||
"project_description",
|
||
"start_date",
|
||
"done_date",
|
||
"approved_budget",
|
||
"observer",
|
||
],
|
||
Sorts: [["start_date", "asc"]],
|
||
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) {
|
||
const dataString = response.data;
|
||
if (dataString && typeof dataString === "string") {
|
||
try {
|
||
const parsedData = JSON.parse(dataString);
|
||
if (Array.isArray(parsedData)) {
|
||
if (reset) {
|
||
setProjects(parsedData);
|
||
// setTotalCount(parsedData.length);
|
||
} else {
|
||
setProjects((prev) => [...prev, ...parsedData]);
|
||
// setTotalCount((prev) => prev + parsedData.length);
|
||
}
|
||
setHasMore(parsedData.length === pageSize);
|
||
} else {
|
||
if (reset) {
|
||
setProjects([]);
|
||
// setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} catch (parseError) {
|
||
console.error("Error parsing project data:", parseError);
|
||
if (reset) {
|
||
setProjects([]);
|
||
// setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} else {
|
||
if (reset) {
|
||
setProjects([]);
|
||
// setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} else {
|
||
toast.error(response.message || "خطا در دریافت اطلاعات پروژهها");
|
||
if (reset) {
|
||
setProjects([]);
|
||
// setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} catch (error) {
|
||
console.error("Error fetching projects:", error);
|
||
toast.error("خطا در دریافت اطلاعات پروژهها");
|
||
if (reset) {
|
||
setProjects([]);
|
||
// setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
} finally {
|
||
setLoading(false);
|
||
setLoadingMore(false);
|
||
fetchingRef.current = false;
|
||
}
|
||
};
|
||
|
||
const loadMore = useCallback(() => {
|
||
if (hasMore && !loading) {
|
||
setCurrentPage((prev) => prev + 1);
|
||
}
|
||
}, [hasMore, loading]);
|
||
|
||
useEffect(() => {
|
||
EventBus.on("dateSelected", (date: CalendarDate) => {
|
||
if (date) {
|
||
setDate(date);
|
||
}
|
||
});
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (date?.start && date?.end) {
|
||
fetchProjects(true);
|
||
fetchTotalCount();
|
||
}
|
||
}, [sortConfig, date]);
|
||
|
||
useEffect(() => {
|
||
if (date?.start && date?.end) fetchStats();
|
||
}, [selectedProjects, date]);
|
||
|
||
useEffect(() => {
|
||
if (currentPage > 1) {
|
||
fetchProjects(false);
|
||
}
|
||
}, [currentPage]);
|
||
|
||
useEffect(() => {
|
||
const scrollContainer = document.querySelector(".overflow-auto");
|
||
|
||
const handleScroll = () => {
|
||
if (!scrollContainer || !hasMore) return;
|
||
|
||
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
|
||
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
|
||
|
||
if (scrollPercentage == 1) {
|
||
loadMore();
|
||
}
|
||
};
|
||
|
||
if (scrollContainer) {
|
||
scrollContainer.addEventListener("scroll", handleScroll);
|
||
}
|
||
|
||
return () => {
|
||
if (scrollContainer) {
|
||
scrollContainer.removeEventListener("scroll", handleScroll);
|
||
}
|
||
};
|
||
}, [loadMore, hasMore, loadingMore]);
|
||
|
||
const handleSort = (field: string) => {
|
||
fetchingRef.current = false;
|
||
setSortConfig((prev) => ({
|
||
field,
|
||
direction:
|
||
prev.field === field && prev.direction === "asc" ? "desc" : "asc",
|
||
}));
|
||
setCurrentPage(1);
|
||
setProjects([]);
|
||
setHasMore(true);
|
||
};
|
||
|
||
const fetchTotalCount = async () => {
|
||
try {
|
||
const response = await apiService.select({
|
||
ProcessName: "project",
|
||
OutputFields: ["count(project_no)"],
|
||
Conditions: [
|
||
["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
|
||
["start_date", ">=", date?.start || null, "and"],
|
||
["start_date", "<=", date?.end || null],
|
||
],
|
||
});
|
||
|
||
if (response.state === 0) {
|
||
const dataString = response.data;
|
||
if (dataString && typeof dataString === "string") {
|
||
try {
|
||
const parsedData = JSON.parse(dataString);
|
||
if (Array.isArray(parsedData) && parsedData[0]) {
|
||
const count = parsedData[0].project_no_count || 0;
|
||
setActualTotalCount(count);
|
||
// Keep stats in sync if backend stats not yet loaded
|
||
setStats((prev) => ({ ...prev, totalProjects: count }));
|
||
}
|
||
} catch (parseError) {
|
||
console.error("Error parsing count data:", parseError);
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("Error fetching total count:", error);
|
||
}
|
||
};
|
||
|
||
// Fetch aggregated stats from backend call API (innovation_process_function)
|
||
const fetchStats = async () => {
|
||
try {
|
||
setStatsLoading(true);
|
||
const raw = await apiService.call<any>({
|
||
innovation_process_function: {
|
||
project_ids:
|
||
selectedProjects.size > 0
|
||
? Array.from(selectedProjects).join(" , ")
|
||
: "",
|
||
start_date: date?.start || null,
|
||
end_date: date?.end || null,
|
||
},
|
||
});
|
||
|
||
let payload: any = raw?.data;
|
||
if (typeof payload === "string") {
|
||
try {
|
||
payload = JSON.parse(payload);
|
||
} catch {}
|
||
}
|
||
|
||
const parseNum = (v: unknown): any => {
|
||
const convertNumber = typeof v === "number" ? Math.max(0, v) : 0;
|
||
if (v == null) return 0;
|
||
if (typeof v === "number") return convertNumber;
|
||
if (typeof v === "string") {
|
||
const cleaned = v.replace(/,/g, "").trim();
|
||
const n = parseFloat(cleaned);
|
||
return isNaN(n) ? 0 : convertNumber;
|
||
}
|
||
return 0;
|
||
};
|
||
|
||
const data: Array<ProjectStats> = JSON.parse(
|
||
payload?.innovation_process_function
|
||
);
|
||
const stats = data[0];
|
||
const normalized: InnovationStats = {
|
||
totalProjects: parseNum(stats?.count_innovation_process_projects),
|
||
averageScore: parseFloat(data[0].average_project_score),
|
||
productionStopsPreventionSum: parseNum(stats?.sum_stopping_production),
|
||
reductionCostOprationSum: parseNum(stats?.sum_operating_cost_reduction),
|
||
bottleneckRemovalCount: parseNum(stats?.count_throat_removal),
|
||
currencyReductionSum: parseNum(stats?.sum_reduction_value_currency),
|
||
frequentFailuresReductionSum: parseNum(stats?.sum_reducing_breakdowns),
|
||
percentProductionStops: stats?.percent_sum_stopping_production,
|
||
percentOperatingCostBeforeInnovation:
|
||
stats?.percent_operating_cost_before_innovation,
|
||
percentBottleneckRemoval: stats?.percent_throat_removal,
|
||
percentCurrencyReduction: stats?.percent_reduction_value_currency,
|
||
percentFailuresReduction: stats?.percent_reducing_breakdowns,
|
||
};
|
||
setStateCard((prev) => ({
|
||
...prev,
|
||
bottleneckremoval: {
|
||
...prev.bottleneckremoval,
|
||
value: formatNumber(normalized.bottleneckRemovalCount),
|
||
},
|
||
productionstopsprevention: {
|
||
...prev.productionstopsprevention,
|
||
value: formatNumber(normalized.productionStopsPreventionSum),
|
||
},
|
||
frequentfailuresreduction: {
|
||
...prev.frequentfailuresreduction,
|
||
value: formatNumber(normalized.frequentFailuresReductionSum),
|
||
},
|
||
currencyreduction: {
|
||
...prev.currencyreduction,
|
||
value: formatNumber(normalized.currencyReductionSum),
|
||
},
|
||
decreaseCurrencyOperation: {
|
||
...prev.decreaseCurrencyOperation,
|
||
value: formatNumber(normalized.reductionCostOprationSum),
|
||
},
|
||
}));
|
||
setStats(normalized);
|
||
} catch (error) {
|
||
console.error("Error fetching stats:", error);
|
||
} finally {
|
||
setStatsLoading(false);
|
||
}
|
||
};
|
||
|
||
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 statusColor = (status: projectStatus): any => {
|
||
let el = null;
|
||
switch (status) {
|
||
case projectStatus.contract:
|
||
el = "teal";
|
||
break;
|
||
case projectStatus.finish:
|
||
el = "info";
|
||
break;
|
||
case projectStatus.stop:
|
||
el = "warning";
|
||
break;
|
||
case projectStatus.inprogress:
|
||
el = "teal";
|
||
break;
|
||
case projectStatus.mafasa:
|
||
el = "destructive";
|
||
break;
|
||
case projectStatus.propozal:
|
||
el = "info";
|
||
}
|
||
return el;
|
||
};
|
||
|
||
const renderCellContent = (item: ProcessInnovationData, column: any) => {
|
||
const value = item[column.key as keyof ProcessInnovationData];
|
||
|
||
switch (column.key) {
|
||
case "select":
|
||
return (
|
||
<Checkbox
|
||
checked={selectedProjects.has(item.project_id)}
|
||
onCheckedChange={() => handleSelectProject(item.project_id)}
|
||
className="data-[state=checked]:bg-pr-green data-[state=checked]:border-pr-green"
|
||
/>
|
||
);
|
||
case "details":
|
||
return (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleProjectDetails(item)}
|
||
className="text-pr-green underline-offset-4 underline font-normal p-2 h-auto"
|
||
>
|
||
جزئیات بیشتر
|
||
</Button>
|
||
);
|
||
case "amount_currency_reduction":
|
||
return (
|
||
<span className="font-medium text-pr-green">
|
||
{formatCurrency(String(value))}
|
||
</span>
|
||
);
|
||
case "project_no":
|
||
return (
|
||
<Badge variant="outline" className="font-normal text-sm">
|
||
{String(value)}
|
||
</Badge>
|
||
);
|
||
case "title":
|
||
return (
|
||
<span className="font-normal text-sm text-white">
|
||
{String(value)}
|
||
</span>
|
||
);
|
||
case "project_status":
|
||
return (
|
||
<div className="flex items-center gap-1">
|
||
<Badge
|
||
variant={statusColor(value as projectStatus)}
|
||
className="font-normal text-base border-2 p-0 block w-2 h-2 rounded-full"
|
||
style={{
|
||
border: "none",
|
||
}}
|
||
></Badge>
|
||
{String(value)}
|
||
</div>
|
||
);
|
||
case "project_rating":
|
||
return (
|
||
<Badge
|
||
variant="outline"
|
||
className="text-base font-semibold text-center border-none"
|
||
>
|
||
{formatNumber(String(value))}
|
||
</Badge>
|
||
);
|
||
case "reduce_prevention_production_stops":
|
||
case "throat_removal":
|
||
case "Reduce_rate_failure":
|
||
return (
|
||
<span className="font-medium text-blue-400">
|
||
{formatNumber(String(value))}
|
||
</span>
|
||
);
|
||
default:
|
||
return <span className="text-gray-300">{String(value) || "-"}</span>;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<DashboardLayout title="نوآوری در فرآیند">
|
||
<div className="flex flex-col gap-4">
|
||
{/* Stats Cards */}
|
||
<div className="flex gap-4">
|
||
<div className="space-y-4 w-full">
|
||
{/* Stats Grid */}
|
||
<div className="h-full">
|
||
{loading || statsLoading ? (
|
||
// Skeleton cards
|
||
<div className="flex flex-wrap justify-between gap-3">
|
||
{Array.from({ length: 6 }).map((_, index) => (
|
||
<BaseCard
|
||
key={`skeleton-${index}`}
|
||
className="rounded-2xl overflow-hidden w-full sm:w-[48%] md:w-[30%]"
|
||
>
|
||
<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 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>
|
||
</BaseCard>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col h-full gap-5">
|
||
<div className="flex flex-row gap-4 h-full">
|
||
<BaseCard
|
||
key={stateCard.productionstopsprevention.id}
|
||
title={stateCard.productionstopsprevention.title}
|
||
className="border-gray-700/50 w-full"
|
||
icon={stateCard.productionstopsprevention.icon}
|
||
>
|
||
<div className="flex items-center justify-center flex-col">
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-center">
|
||
<p className="text-3xl text-pr-green font-bold mb-1">
|
||
{stateCard.productionstopsprevention.value}
|
||
</p>
|
||
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
|
||
{stateCard.productionstopsprevention.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BaseCard>
|
||
|
||
<BaseCard
|
||
key={stateCard.frequentfailuresreduction.id}
|
||
title={stateCard.frequentfailuresreduction.title}
|
||
className="border-gray-700/50 w-full"
|
||
icon={stateCard.frequentfailuresreduction.icon}
|
||
>
|
||
<div className="flex items-center justify-center flex-col">
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-center">
|
||
<p className="text-3xl text-pr-green font-bold mb-1">
|
||
{stateCard.frequentfailuresreduction.value}
|
||
</p>
|
||
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
|
||
{stateCard.frequentfailuresreduction.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BaseCard>
|
||
</div>
|
||
<div className="flex flex-row gap-4 h-full">
|
||
<BaseCard
|
||
key={stateCard.currencyreduction.id}
|
||
title={stateCard.currencyreduction.title}
|
||
className="border-gray-700/50 w-full"
|
||
icon={stateCard.currencyreduction.icon}
|
||
>
|
||
<div className="flex items-center justify-center flex-col">
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-center">
|
||
<p className="text-3xl text-pr-green font-bold mb-1">
|
||
{stateCard.currencyreduction.value}
|
||
</p>
|
||
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
|
||
{stateCard.currencyreduction.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BaseCard>
|
||
<BaseCard
|
||
key={stateCard.decreaseCurrencyOperation.id}
|
||
title={stateCard.decreaseCurrencyOperation.title}
|
||
className="border-gray-700/50 w-full"
|
||
icon={stateCard.decreaseCurrencyOperation.icon}
|
||
>
|
||
<div className="flex items-center justify-center flex-col">
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-center">
|
||
<p className="text-3xl text-pr-green font-bold mb-1">
|
||
{stateCard.decreaseCurrencyOperation.value}
|
||
</p>
|
||
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
|
||
{stateCard.decreaseCurrencyOperation.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BaseCard>
|
||
<BaseCard
|
||
key={stateCard.bottleneckremoval.id}
|
||
title={stateCard.bottleneckremoval.title}
|
||
className="border-gray-700/50 w-full"
|
||
icon={stateCard.bottleneckremoval.icon}
|
||
>
|
||
<div className="flex items-center justify-center flex-col">
|
||
<div className="flex items-center gap-4">
|
||
<div className="text-center">
|
||
<p className="text-3xl text-pr-green font-bold mb-1">
|
||
{stateCard.bottleneckremoval.value}
|
||
</p>
|
||
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
|
||
{stateCard.bottleneckremoval.description}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</BaseCard>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Process Impacts Chart */}
|
||
{/* نمودار با الگوریتم Nice Numbers:
|
||
مثلاً اگر دادهها [10, 35, 63, 18] باشند:
|
||
- حداکثر: 63، با حاشیه 5% = 66.15
|
||
- Nice Max: 75 (گرد و خوانا)
|
||
- Ticks: [0, 20, 40, 60, 75]
|
||
این باعث میشود نمودار زیباتر و خواناتر باشد */}
|
||
<BaseCard className="rounded-xl w-full overflow-hidden">
|
||
<CustomBarChart
|
||
title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
|
||
loading={statsLoading}
|
||
data={[
|
||
{
|
||
label: "توقفات تولید",
|
||
value: Number(stats.percentProductionStops) || 0,
|
||
labelColor: "text-white",
|
||
},
|
||
{
|
||
label: "رفع گلوگاه تولید",
|
||
value: Number(stats.percentBottleneckRemoval) || 0,
|
||
labelColor: "text-white",
|
||
},
|
||
{
|
||
label: "ارز بری",
|
||
value: Number(stats.percentCurrencyReduction) || 0,
|
||
labelColor: "text-white",
|
||
},
|
||
{
|
||
label: "خرابی پر تکرار",
|
||
value: Number(stats.percentFailuresReduction) || 0,
|
||
labelColor: "text-white",
|
||
},
|
||
{
|
||
label: "هزینه های عملیاتی",
|
||
value:
|
||
Number(stats.percentOperatingCostBeforeInnovation) || 0,
|
||
labelColor: "text-white",
|
||
},
|
||
]}
|
||
barHeight="h-5"
|
||
showAxisLabels={true}
|
||
/>
|
||
</BaseCard>
|
||
</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-420px)]">
|
||
<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">
|
||
<span></span>
|
||
</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-pr-green 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>
|
||
</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-pr-green py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
|
||
>
|
||
{renderCellContent(project, column)}
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
{/* Infinite scroll trigger */}
|
||
<div ref={observerRef} className="h-auto">
|
||
{loadingMore && (
|
||
<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-pr-green" />
|
||
<span className="font-persian text-gray-300 text-xs"></span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
|
||
{/* Footer */}
|
||
|
||
<div className="p-2 px-4 bg-[#3F415A]">
|
||
<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-base text-gray-401 mb-1">
|
||
کل پروژه ها :{formatNumber(actualTotalCount)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center flex-row gap-20 status justify-center xl:w-2/3 sm:w-full">
|
||
<div className="flex flex-row-reverse">
|
||
<span className="block w-7 h-2.5 bg-violet-500 rounded-tl-xl rounded-bl-xl"></span>
|
||
<span className="block w-7 h-2.5 bg-purple-500 "></span>
|
||
<span className="block w-7 h-2.5 bg-cyan-300 "></span>
|
||
<span className="block w-7 h-2.5 bg-pink-400 rounded-tr-xl rounded-br-xl"></span>
|
||
</div>
|
||
<div className="flex justify-center items-center gap-2">
|
||
<div className="text-base text-gray-400 mb-1">میانگین :</div>
|
||
<div className="font-bold">
|
||
{formatNumber(((stats.averageScore ?? 0) as number) ?? 0)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Project Details Dialog */}
|
||
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
||
<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 mr-4 border-b-2 border-gray-600 pb-4 font-persian font-semibold text-sm text-right">
|
||
شرح پروژه
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
<div className="space-y-4 flex justify-between text-right p-6">
|
||
{/* Project Description */}
|
||
<div className="flex-[4] border-l-2 border-gray-600">
|
||
<h2 className="font-bold text-base">
|
||
{selectedProjectDetails?.title}
|
||
</h2>
|
||
<p className="text-white font-normal text-base 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-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||
<Building2 className="h-4 text-pr-green text-sm font-light" />
|
||
زمان شروع:
|
||
</h4>
|
||
<span className="text-white font-normal text-base font-persian">
|
||
{selectedProjectDetails?.start_date
|
||
? moment(
|
||
selectedProjectDetails?.start_date,
|
||
"YYYY-MM-DD"
|
||
).format("YYYY/MM/DD")
|
||
: "-"}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||
<PickaxeIcon className="h-4 text-pr-green text-sm font-light" />
|
||
زمان پایان:
|
||
</h4>
|
||
<span className="text-white font-normal text-base font-persian">
|
||
{selectedProjectDetails?.done_date
|
||
? moment(
|
||
selectedProjectDetails?.done_date,
|
||
"YYYY-MM-DD"
|
||
).format("YYYY/MM/DD")
|
||
: "-"}
|
||
</span>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between">
|
||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||
<UsersIcon className="h-4 text-pr-green text-sm font-light" />
|
||
هزینه برآورد شده:
|
||
</h4>
|
||
<span className="text-white font-normal text-base font-persian">
|
||
{selectedProjectDetails?.approved_budget
|
||
? formatNumber(
|
||
Number(
|
||
selectedProjectDetails.approved_budget.replaceAll(
|
||
",",
|
||
""
|
||
)
|
||
)
|
||
)
|
||
: "-"}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center justify-between">
|
||
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
|
||
<UserIcon className="h-4 text-pr-green text-sm font-light" />
|
||
نفر مرتبط:
|
||
</h4>
|
||
<span className="text-white font-normal text-base font-persian">
|
||
{selectedProjectDetails?.observer || "-"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</DashboardLayout>
|
||
);
|
||
}
|