831 lines
32 KiB
TypeScript
831 lines
32 KiB
TypeScript
import { ChevronDown, ChevronUp, RefreshCw, Eye, Star } from "lucide-react";
|
||
import { useCallback, useEffect, useRef, useState, useMemo } from "react";
|
||
import toast from "react-hot-toast";
|
||
import { Badge } from "~/components/ui/badge";
|
||
import { Button } from "~/components/ui/button";
|
||
import { Card, CardContent } from "~/components/ui/card";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "~/components/ui/dialog";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "~/components/ui/table";
|
||
import apiService from "~/lib/api";
|
||
import { formatCurrency, formatNumber } from "~/lib/utils";
|
||
import { DashboardLayout } from "../layout";
|
||
|
||
interface IdeaData {
|
||
idea_title: string;
|
||
idea_registration_date: string;
|
||
idea_status: string;
|
||
increased_revenue: string;
|
||
full_name: string;
|
||
personnel_number: string;
|
||
management: string;
|
||
deputy: string;
|
||
innovator_team_members: string;
|
||
innovation_type: string;
|
||
idea_originality: string;
|
||
idea_axis: string;
|
||
idea_description: string;
|
||
idea_current_status_description: string;
|
||
idea_execution_benefits: string;
|
||
process_improvements: string;
|
||
}
|
||
|
||
interface PersonRanking {
|
||
full_name: string;
|
||
full_name_count: number;
|
||
ranking: number;
|
||
stars: number;
|
||
}
|
||
|
||
interface SortConfig {
|
||
field: string;
|
||
direction: "asc" | "desc";
|
||
}
|
||
|
||
type ColumnDef = {
|
||
key: string;
|
||
label: string;
|
||
sortable: boolean;
|
||
width: string;
|
||
};
|
||
|
||
const columns: ColumnDef[] = [
|
||
{ key: "idea_title", label: "عنوان ایده", sortable: true, width: "250px" },
|
||
{ key: "idea_registration_date", label: "تاریخ ثبت ایده", sortable: true, width: "180px" },
|
||
{ key: "idea_status", label: "وضعیت ایده", sortable: true, width: "150px" },
|
||
{ key: "increased_revenue", label: "درآمد حاصل از ایده", sortable: true, width: "180px" },
|
||
{ key: "details", label: "جزئیات بیشتر", sortable: false, width: "120px" },
|
||
];
|
||
|
||
export function ManageIdeasTechPage() {
|
||
const [ideas, setIdeas] = useState<IdeaData[]>([]);
|
||
const [loading, setLoading] = useState(false);
|
||
const [loadingMore, setLoadingMore] = useState(false);
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [pageSize] = useState(10);
|
||
const [hasMore, setHasMore] = useState(true);
|
||
const [totalCount, setTotalCount] = useState(0);
|
||
const [actualTotalCount, setActualTotalCount] = useState(0);
|
||
const [selectedIdea, setSelectedIdea] = useState<IdeaData | null>(null);
|
||
const [isDetailsOpen, setIsDetailsOpen] = useState(false);
|
||
const [sortConfig, setSortConfig] = useState<SortConfig>({
|
||
field: "idea_title",
|
||
direction: "asc",
|
||
});
|
||
|
||
// People ranking state
|
||
const [peopleRanking, setPeopleRanking] = useState<PersonRanking[]>([]);
|
||
const [loadingPeople, setLoadingPeople] = useState(false);
|
||
|
||
const observerRef = useRef<HTMLDivElement>(null);
|
||
const fetchingRef = useRef(false);
|
||
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||
const scrollContainerRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
const fetchIdeas = 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: "idea",
|
||
OutputFields: [
|
||
"idea_title",
|
||
"idea_registration_date",
|
||
"idea_status",
|
||
"increased_revenue",
|
||
"full_name",
|
||
"personnel_number",
|
||
"management",
|
||
"deputy",
|
||
"innovator_team_members",
|
||
"innovation_type",
|
||
"idea_originality",
|
||
"idea_axis",
|
||
"idea_description",
|
||
"idea_current_status_description",
|
||
"idea_execution_benefits",
|
||
"process_improvements",
|
||
],
|
||
Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
|
||
Sorts: [[sortConfig.field, sortConfig.direction]],
|
||
Conditions: [],
|
||
});
|
||
|
||
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) {
|
||
setIdeas(parsedData);
|
||
setTotalCount(parsedData.length);
|
||
} else {
|
||
setIdeas((prev) => [...prev, ...parsedData]);
|
||
setTotalCount((prev) => prev + parsedData.length);
|
||
}
|
||
setHasMore(parsedData.length === pageSize);
|
||
} else {
|
||
if (reset) {
|
||
setIdeas([]);
|
||
setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} catch (parseError) {
|
||
console.error("Error parsing idea data:", parseError);
|
||
if (reset) {
|
||
setIdeas([]);
|
||
setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} else {
|
||
if (reset) {
|
||
setIdeas([]);
|
||
setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} else {
|
||
toast.error(response.message || "خطا در دریافت اطلاعات ایدهها");
|
||
if (reset) {
|
||
setIdeas([]);
|
||
setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
}
|
||
} catch (error) {
|
||
console.error("Error fetching ideas:", error);
|
||
toast.error("خطا در دریافت اطلاعات ایدهها");
|
||
if (reset) {
|
||
setIdeas([]);
|
||
setTotalCount(0);
|
||
}
|
||
setHasMore(false);
|
||
} finally {
|
||
setLoading(false);
|
||
setLoadingMore(false);
|
||
fetchingRef.current = false;
|
||
}
|
||
};
|
||
|
||
const loadMore = useCallback(() => {
|
||
if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
|
||
setCurrentPage((prev) => prev + 1);
|
||
}
|
||
}, [hasMore, loading, loadingMore]);
|
||
|
||
useEffect(() => {
|
||
fetchIdeas(true);
|
||
fetchTotalCount();
|
||
fetchPeopleRanking();
|
||
}, [sortConfig]);
|
||
|
||
useEffect(() => {
|
||
if (currentPage > 1) {
|
||
fetchIdeas(false);
|
||
}
|
||
}, [currentPage]);
|
||
|
||
// Infinite scroll observer with debouncing
|
||
useEffect(() => {
|
||
const scrollContainer = scrollContainerRef.current;
|
||
|
||
const handleScroll = () => {
|
||
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
|
||
|
||
if (scrollTimeoutRef.current) {
|
||
clearTimeout(scrollTimeoutRef.current);
|
||
}
|
||
|
||
scrollTimeoutRef.current = setTimeout(() => {
|
||
const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
|
||
const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
|
||
|
||
if (scrollPercentage >= 0.95) {
|
||
loadMore();
|
||
}
|
||
}, 150);
|
||
};
|
||
|
||
if (scrollContainer) {
|
||
scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
|
||
}
|
||
|
||
return () => {
|
||
if (scrollContainer) {
|
||
scrollContainer.removeEventListener("scroll", handleScroll);
|
||
}
|
||
if (scrollTimeoutRef.current) {
|
||
clearTimeout(scrollTimeoutRef.current);
|
||
}
|
||
};
|
||
}, [loadMore, hasMore, loadingMore]);
|
||
|
||
const handleSort = (field: string) => {
|
||
fetchingRef.current = false;
|
||
setSortConfig((prev) => ({
|
||
field,
|
||
direction:
|
||
prev.field === field && prev.direction === "asc" ? "desc" : "asc",
|
||
}));
|
||
setCurrentPage(1);
|
||
setIdeas([]);
|
||
setHasMore(true);
|
||
};
|
||
|
||
const fetchTotalCount = async () => {
|
||
try {
|
||
const response = await apiService.select({
|
||
ProcessName: "idea",
|
||
OutputFields: ["count(idea_title)"],
|
||
Conditions: [],
|
||
});
|
||
|
||
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]) {
|
||
setActualTotalCount(parsedData[0].idea_title_count || 0);
|
||
}
|
||
} catch (parseError) {
|
||
console.error("Error parsing count data:", parseError);
|
||
}
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("Error fetching total count:", error);
|
||
}
|
||
};
|
||
|
||
const fetchPeopleRanking = async () => {
|
||
try {
|
||
setLoadingPeople(true);
|
||
|
||
const response = await apiService.select({
|
||
ProcessName: "idea",
|
||
OutputFields: ["full_name", "count(full_name)"],
|
||
GroupBy: ["full_name"],
|
||
});
|
||
|
||
if (response.state === 0) {
|
||
const dataString = response.data;
|
||
if (dataString && typeof dataString === "string") {
|
||
try {
|
||
const parsedData = JSON.parse(dataString);
|
||
if (Array.isArray(parsedData)) {
|
||
// Calculate rankings and stars
|
||
const counts = parsedData.map(item => item.full_name_count);
|
||
const maxCount = Math.max(...counts);
|
||
const minCount = Math.min(...counts);
|
||
|
||
// Sort by count first (highest first)
|
||
const sortedData = parsedData.sort((a, b) => b.full_name_count - a.full_name_count);
|
||
|
||
const rankedPeople = [];
|
||
let currentRank = 1;
|
||
let sum = 1;
|
||
|
||
for (let i = 0; i < sortedData.length; i++) {
|
||
const item = sortedData[i];
|
||
|
||
// If this is not the first person and their count is different from previous
|
||
if (i > 0 && sortedData[i - 1].full_name_count !== item.full_name_count) {
|
||
currentRank = sum + 1; // New rank based on position
|
||
sum++;
|
||
}
|
||
const normalizedScore = maxCount === minCount
|
||
? 1
|
||
: (item.full_name_count - minCount) / (maxCount - minCount);
|
||
const stars = Math.max(1, Math.round(normalizedScore * 5));
|
||
|
||
rankedPeople.push({
|
||
full_name: item.full_name,
|
||
full_name_count: item.full_name_count,
|
||
ranking: currentRank,
|
||
stars: stars,
|
||
});
|
||
}
|
||
setPeopleRanking(rankedPeople);
|
||
}
|
||
} catch (parseError) {
|
||
console.error("Error parsing people ranking data:", parseError);
|
||
}
|
||
}
|
||
} else {
|
||
toast.error(response.message || "خطا در دریافت اطلاعات رتبهبندی افراد");
|
||
}
|
||
} catch (error) {
|
||
console.error("Error fetching people ranking:", error);
|
||
toast.error("خطا در دریافت اطلاعات رتبهبندی افراد");
|
||
} finally {
|
||
setLoadingPeople(false);
|
||
}
|
||
};
|
||
|
||
const toPersianDigits = (input: string | number): string => {
|
||
const str = String(input);
|
||
const map: Record<string, string> = {
|
||
"0": "۰",
|
||
"1": "۱",
|
||
"2": "۲",
|
||
"3": "۳",
|
||
"4": "۴",
|
||
"5": "۵",
|
||
"6": "۶",
|
||
"7": "۷",
|
||
"8": "۸",
|
||
"9": "۹",
|
||
};
|
||
return str.replace(/[0-9]/g, (d) => map[d] ?? d);
|
||
};
|
||
|
||
const formatDate = (dateString: string | null) => {
|
||
if (!dateString || dateString === "null" || dateString.trim() === "") {
|
||
return "-";
|
||
}
|
||
|
||
const raw = String(dateString).trim();
|
||
const jalaliPattern = /^(\d{4})[\/](\d{1,2})[\/](\d{1,2})$/;
|
||
const jalaliMatch = raw.match(jalaliPattern);
|
||
if (jalaliMatch) {
|
||
const [, y, m, d] = jalaliMatch;
|
||
const mm = m.padStart(2, "0");
|
||
const dd = d.padStart(2, "0");
|
||
return toPersianDigits(`${y}/${mm}/${dd}`);
|
||
}
|
||
|
||
try {
|
||
const parsed = new Date(raw);
|
||
if (isNaN(parsed.getTime())) return "-";
|
||
return new Intl.DateTimeFormat("fa-IR-u-ca-persian", {
|
||
year: "numeric",
|
||
month: "2-digit",
|
||
day: "2-digit",
|
||
}).format(parsed);
|
||
} catch {
|
||
return "-";
|
||
}
|
||
};
|
||
|
||
// Color palette for idea status
|
||
const statusColorPalette = ["#3AEA83", "#69C8EA", "#F76276", "#FFD700", "#A757FF", "#E884CE", "#C3BF8B", "#FB7185"];
|
||
|
||
// Build a mapping of status value -> color based on loaded ideas
|
||
const statusColorMap = useMemo(() => {
|
||
const map: Record<string, string> = {};
|
||
const seenStatuses = new Set<string>();
|
||
|
||
ideas.forEach((idea) => {
|
||
const status = String(idea.idea_status || "").trim();
|
||
if (status && !seenStatuses.has(status)) {
|
||
seenStatuses.add(status);
|
||
}
|
||
});
|
||
|
||
const statusArray = Array.from(seenStatuses).sort();
|
||
statusArray.forEach((status, index) => {
|
||
map[status] = statusColorPalette[index % statusColorPalette.length];
|
||
});
|
||
|
||
return map;
|
||
}, [ideas]);
|
||
|
||
const getStatusColor = (status: string) => {
|
||
const statusValue = String(status || "").trim();
|
||
return statusColorMap[statusValue] || "#6B7280";
|
||
};
|
||
|
||
const handleShowDetails = (idea: IdeaData) => {
|
||
setSelectedIdea(idea);
|
||
setIsDetailsOpen(true);
|
||
};
|
||
|
||
const renderCellContent = (item: IdeaData, column: ColumnDef) => {
|
||
const value = (item as any)[column.key];
|
||
|
||
switch (column.key) {
|
||
case "idea_title":
|
||
return (
|
||
<span className="text-sm text-white">{String(value)}</span>
|
||
);
|
||
case "idea_registration_date":
|
||
return (
|
||
<span className="text-white text-sm">
|
||
{formatDate(String(value))}
|
||
</span>
|
||
);
|
||
case "idea_status":
|
||
return (
|
||
<span className="flex items-center justify-end flex-row-reverse gap-1 w-full">
|
||
<span className="text-white text-sm">
|
||
{!!value ? String(value) : "-"}
|
||
</span>
|
||
<span
|
||
style={{
|
||
backgroundColor: getStatusColor(String(value)),
|
||
display: !value ? "none" : "block",
|
||
}}
|
||
className="inline-block w-2 h-2 rounded-full"
|
||
/>
|
||
</span>
|
||
);
|
||
case "increased_revenue":
|
||
return (
|
||
<span className="text-sm text-white w-full">
|
||
{formatCurrency(String(value || "0")).replace("ریال" , "")}
|
||
</span>
|
||
);
|
||
case "details":
|
||
return (
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => handleShowDetails(item)}
|
||
className="underline text-pr-green underline-offset-4 text-sm hover:bg-emerald-500/20"
|
||
>
|
||
جزئیات بیشتر
|
||
</Button> );
|
||
default:
|
||
return (
|
||
<span className="text-white text-sm">
|
||
{(value && String(value)) || "-"}
|
||
</span>
|
||
);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<DashboardLayout title="مدیریت ایده های فناوری و نوآوری">
|
||
<div className="space-y-6 h-full">
|
||
<div className="grid grid-cols-1 grid-rows-2 lg:grid-cols-3 gap-4 h-full">
|
||
{/* People Ranking Table */}
|
||
<div className="lg:col-span-1">
|
||
<h3 className="text-base text-center my-4 font-persian font-bold text-foreground">
|
||
رتبه بندی نوآوران
|
||
</h3>
|
||
<Card className="bg-transparent border-none rounded-xl overflow-hidden">
|
||
<CardContent className="p-0 ">
|
||
<div className="relative max-h-[calc(100vh-200px)] overflow-auto custom-scrollbar">
|
||
<Table>
|
||
<TableHeader className="sticky top-0 z-50 bg-pr-gray">
|
||
<TableRow className="bg-pr-gray">
|
||
<TableHead className="text-center font-persian font-semibold text-white bg-pr-gray sticky top-0 z-20 w-16">
|
||
رتبه
|
||
</TableHead>
|
||
<TableHead className="text-right font-persian text-white font-semibold bg-pr-gray sticky top-0 z-20">
|
||
ایده پرداز
|
||
</TableHead>
|
||
<TableHead className="text-center font-persian font-semibold bg-pr-gray text-white sticky top-0 z-20 w-24">
|
||
امتیاز
|
||
</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
<TableBody>
|
||
{loadingPeople ? (
|
||
Array.from({ length: 10 }).map((_, index) => (
|
||
<TableRow key={`skeleton-${index}`} className="text-sm leading-tight h-12">
|
||
<TableCell className="text-center py-2 px-2">
|
||
<div className="w-6 h-6 bg-muted rounded-full animate-pulse mx-auto" />
|
||
</TableCell>
|
||
<TableCell className="text-right py-2 px-4">
|
||
<div className="h-4 bg-muted rounded animate-pulse w-3/4" />
|
||
</TableCell>
|
||
<TableCell className="text-center py-2 px-2">
|
||
<div className="flex items-center justify-center gap-1">
|
||
{Array.from({ length: 5 }).map((_, starIndex) => (
|
||
<div key={starIndex} className="w-3 h-3 bg-muted rounded animate-pulse" />
|
||
))}
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
) : peopleRanking.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell colSpan={3} className="text-center py-8">
|
||
<span className="text-muted-foreground font-persian">
|
||
هیچ دادهای یافت نشد
|
||
</span>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
peopleRanking.map((person) => (
|
||
<TableRow key={person.full_name} className="text-sm leading-tight h-10 not-last:border-b-pr-gray border-border">
|
||
<TableCell className="text-center py-2 px-2">
|
||
<div className="flex items-center justify-center text-white text-sm mx-auto">
|
||
{toPersianDigits(person.ranking)}
|
||
</div>
|
||
</TableCell>
|
||
<TableCell className="text-right py-2 px-4">
|
||
<span className="font-persian font-medium text-foreground">
|
||
{person.full_name}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell className="text-center py-4 px-2">
|
||
<div className="flex mx-4 flex-row-reverse items-center justify-center gap-1">
|
||
{Array.from({ length: 5 }).map((_, starIndex) => (
|
||
<Star
|
||
key={starIndex}
|
||
className={`w-5 h-5 ${
|
||
starIndex < person.stars
|
||
? "text-pr-green fill-pr-green"
|
||
: "text-pr-gray"
|
||
}`}
|
||
/>
|
||
))}
|
||
</div>
|
||
</TableCell>
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
<div className="p-4 bg-pr-gray">
|
||
<div className="text-sm text-white font-semibold font-persian text-right mr-16">
|
||
کل افراد: {toPersianDigits(peopleRanking.length)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
{/* Main Ideas Table */}
|
||
<div className="col-span-2 row-span-1">
|
||
<h3 className="text-base text-center my-4 font-persian font-bold text-foreground">
|
||
لیست ایده ها
|
||
</h3>
|
||
<Card className="bg-transparent backdrop-blur-sm rounded-xl overflow-hidden">
|
||
<CardContent className="p-0">
|
||
<div className="relative">
|
||
<Table
|
||
containerRef={scrollContainerRef}
|
||
containerClassName="overflow-auto custom-scrollbar max-h-[calc(50vh-100px)]"
|
||
>
|
||
<TableHeader className="sticky top-0 z-50 bg-pr-gray">
|
||
<TableRow className="bg-pr-gray">
|
||
{columns.map((column) => (
|
||
<TableHead
|
||
key={column.key}
|
||
className="font-persian whitespace-nowrap text-white text-sm text-center font-semibold bg-pr-gray sticky top-0 z-20"
|
||
style={{ width: column.width }}
|
||
>
|
||
{column.sortable ? (
|
||
<button
|
||
onClick={() => handleSort(column.key)}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<span>{column.label}</span>
|
||
{column.key === "increased_revenue" && (
|
||
<span className="text-[#ACACAC] text-right font-light text-[8px]">میلیون <br/>ریال</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 ? (
|
||
Array.from({ length: 20 }).map((_, index) => (
|
||
<TableRow
|
||
key={`skeleton-${index}`}
|
||
className="text-sm leading-tight h-12"
|
||
>
|
||
{columns.map((column) => (
|
||
<TableCell
|
||
key={column.key}
|
||
className="text-right whitespace-nowrap border-success/20 py-2 px-4"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-3 h-3 bg-muted rounded-full animate-pulse" />
|
||
<div
|
||
className="h-3 bg-muted rounded animate-pulse"
|
||
style={{ width: `${Math.random() * 60 + 40}%` }}
|
||
/>
|
||
</div>
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
))
|
||
) : ideas.length === 0 ? (
|
||
<TableRow>
|
||
<TableCell
|
||
colSpan={columns.length}
|
||
className="text-center py-8"
|
||
>
|
||
<span className="text-muted-foreground font-persian">
|
||
هیچ ایدهای یافت نشد
|
||
</span>
|
||
</TableCell>
|
||
</TableRow>
|
||
) : (
|
||
ideas.map((idea, index) => (
|
||
<TableRow
|
||
key={`${idea.idea_title}-${index}`}
|
||
className="text-sm leading-tight h-12 not-last:border-b-[1px] border-b-pr-gray"
|
||
>
|
||
{columns.map((column) => (
|
||
<TableCell
|
||
key={column.key}
|
||
className="text-right text-sm text-white font-normal whitespace-nowrap py-2 px-4"
|
||
>
|
||
{renderCellContent(idea, column)}
|
||
</TableCell>
|
||
))}
|
||
</TableRow>
|
||
))
|
||
)}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
{/* Infinite scroll trigger */}
|
||
<div ref={observerRef} className="h-auto">
|
||
{loadingMore && (
|
||
<div className="flex items-center justify-center py-2">
|
||
<div className="flex items-center gap-2">
|
||
<RefreshCw className="w-4 h-4 animate-spin text-success" />
|
||
<span className="font-persian text-muted-foreground text-sm">
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</CardContent>
|
||
|
||
{/* Footer */}
|
||
<div className="p-4 bg-pr-gray">
|
||
<div className="flex items-center justify-between font-semibold text-sm text-white font-persian">
|
||
<span>کل ایدهها: {toPersianDigits(actualTotalCount)}</span>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Details Dialog */}
|
||
<Dialog open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
|
||
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle className="text-right font-persian text-xl">
|
||
جزئیات ایده: {selectedIdea?.idea_title}
|
||
</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
{selectedIdea && (
|
||
<div className="space-y-6 text-right font-persian">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
نام و نام خانوادگی
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.full_name || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
شماره پرسنلی
|
||
</label>
|
||
<p className="text-foreground">{toPersianDigits(selectedIdea.personnel_number) || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
مدیریت
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.management || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
معاونت مربوطه
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.deputy || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
نوع نوآوری
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.innovation_type || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
میزان اصالت ایده
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.idea_originality || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
محور ایده
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.idea_axis || "-"}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
اعضای تیم نوآور
|
||
</label>
|
||
<p className="text-foreground">{selectedIdea.innovator_team_members || "-"}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
شرح ایده
|
||
</label>
|
||
<p className="text-foreground leading-relaxed">
|
||
{selectedIdea.idea_description || "-"}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
توضیح وضعیت فعلی ایده
|
||
</label>
|
||
<p className="text-foreground leading-relaxed">
|
||
{selectedIdea.idea_current_status_description || "-"}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
مزایای اجرای ایده
|
||
</label>
|
||
<p className="text-foreground leading-relaxed">
|
||
{selectedIdea.idea_execution_benefits || "-"}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
بهبودهای فرآیندی
|
||
</label>
|
||
<p className="text-foreground leading-relaxed">
|
||
{selectedIdea.process_improvements || "-"}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium text-muted-foreground mb-1">
|
||
درآمد حاصل از ایده
|
||
</label>
|
||
<p className="text-success font-medium">
|
||
{formatCurrency(selectedIdea.increased_revenue)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
</DashboardLayout>
|
||
);
|
||
}
|