Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product-idea #10

Merged
Saeed0920 merged 7 commits from product-idea into main 2025-09-13 16:48:58 +03:30
Conversation 0 Commits 7 Files Changed 6 +538 -231
6 changed files with 538 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

653
app/components/dashboard/project-management/product-innovation-page.tsx
View File

@ -22,7 +22,13 @@ import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Checkbox } from "~/components/ui/checkbox";
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
import { Bar, BarChart, LabelList } from "recharts"
import {
Popover,
PopoverTrigger,
PopoverContent,
} from "~/components/ui/popover"
import { FunnelChart } from "~/components/ui/funnel-chart";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
import {
@ -43,9 +49,10 @@ import {
TableRow,
} from "~/components/ui/table";
import apiService from "~/lib/api";
import { formatNumber } from "~/lib/utils";
import { formatNumber, handleDataValue } from "~/lib/utils";
import { DashboardLayout } from "../layout";
import { Skeleton } from "~/components/ui/skeleton";
import { Tooltip as TooltipSh, TooltipTrigger, TooltipContent } from "~/components/ui/tooltip";
moment.loadPersian({ usePersianDigits: true });
@ -130,7 +137,57 @@ const columns = [
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
];
export default function Timeline() {
const stages = ["تجاری سازی", "توسعه", "تحلیل بازار", "ثبت ایده"];
const currentStage = 1; // index of current stage
return (
<div className="w-full p-4">
{/* Year labels */}
<div className="grid grid-cols-4 place-items-center border-b border-gray-300/40 mb-2 items-center text-slate-300 font-thin text-sm">
<span>۱۴۰۷</span>
<span>۱۴۰۶</span>
<span>۱۴۰۵</span>
<span>۱۴۰۴</span>
</div>
{/* Timeline bar */}
<div className="relative rounded-lg flex mb-4 items-center">
{stages.map((stage, index) => (
<div key={stage} className="flex-1 flex flex-col items-center relative">
<TooltipSh>
<TooltipTrigger asChild>
<div
className={`w-full py-2 text-center transition-colors duration-300 ${
index <= currentStage ? "bg-[#3D7968] text-white" : "bg-[#3AEA83] text-slate-600"
}`}
>
<span className="mt-1 text-sm">{stage}</span>
</div>
</TooltipTrigger>
</TooltipSh>
</div>
))}
{/* Vertical line showing current position */}
<div
className="absolute left-[37%] top-0 h-[150%] bottom-0 w-[2px] bg-white rounded-full"
style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
/>
<div
className="absolute top-15 h-[max-content] translate-x-[-50%] text-xs text-gray-300 border-gray-400 rounded-md border px-2 bottom-0"
style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
>وضعیت فعلی</div>
</div>
</div>
);
}
export function ProductInnovationPage() {
const [showPopup, setShowPopup] = useState(false);
const [projects, setProjects] = useState<ProductInnovationData[]>([]);
const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);
@ -138,7 +195,6 @@ export function ProductInnovationPage() {
const [pageSize] = useState(20);
const [hasMore, setHasMore] = useState(true);
const [totalCount, setTotalCount] = useState(0);
const [actualTotalCount, setActualTotalCount] = useState(0);
const [statsLoading, setStatsLoading] = useState(false);
const [stats, setStats] = useState<ProductInnovationStats>({
new_products_revenue_share: 0,
@ -200,27 +256,29 @@ export function ProductInnovationPage() {
const fetchingRef = useRef(false);
const handleProjectDetails = async (project: ProductInnovationData) => {
setSelectedProjectDetails(project);
console.log(project)
setDetailsDialogOpen(true);
await fetchPopupData(project.project_id);
await fetchPopupData(project);
};
const fetchPopupData = async (projectId: string) => {
const fetchPopupData = async (project: ProductInnovationData) => {
try {
setPopupLoading(true);
// Fetch popup stats
const statsResponse = await apiService.call({
innovation_product_popup_function1: {
project_id: projectId
project_id: project.project_id
}
});
if (statsResponse.state === 0) {
const statsData = JSON.parse(statsResponse.data);
if (statsData.innovation_product_popup_function1 && statsData.innovation_product_popup_function1[0]) {
setPopupStats(statsData.innovation_product_popup_function1[0]);
setPopupStats(JSON.parse(statsData.innovation_product_popup_function1)[0]);
}
}
@ -234,17 +292,16 @@ export function ProductInnovationPage() {
],
GroupBy: ["product_title", "full_season"]
});
if (chartResponse.state === 0) {
const chartData = JSON.parse(chartResponse.data);
if (Array.isArray(chartData)) {
// Set all data for line chart
setAllExportData(chartData);
// Filter data for the selected project (bar chart)
const filteredData = chartData.filter(item =>
item.product_title === selectedProjectDetails?.title
item.product_title === project?.title
);
setAllExportData(chartData);
setExportChartData(filteredData);
}
}
@ -486,16 +543,15 @@ export function ProductInnovationPage() {
// Transform data for line chart
const transformDataForLineChart = (data: any[]) => {
const seasons = [...new Set(data.map(item => item.full_season))].sort();
const seasons = [...new Set(data.map(item => item.full_season))];
const products = [...new Set(data.map(item => item.product_title))];
return seasons.map(season => {
const seasonData: any = { season };
products.forEach(product => {
const productData = data.find(item =>
item.product_title === product && item.full_season === season
);
seasonData[product] = productData ? Math.round(productData.export_revenue_sum / 1000000) : 0;
seasonData[product] = productData?.export_revenue_sum > 0 && productData ? Math.round(productData?.export_revenue_sum) : 0;
});
return seasonData;
});
@ -550,7 +606,8 @@ export function ProductInnovationPage() {
<Button
variant="ghost"
size="sm"
onClick={() => handleProjectDetails(item)}
onClick={() => {
handleProjectDetails(item)}}
className="text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 p-2 h-auto"
>
جزئیات بیشتر
@ -591,6 +648,20 @@ export function ProductInnovationPage() {
}
};
const seasonOrder = ["بهار", "تابستان", "پاییز", "زمستان"];
const sortedBarData = exportChartData
.sort((a, b) => {
const getSeasonIndex = (s: string) => {
const [seasonName, year] = s.split(" ");
return parseInt(year) * 4 + seasonOrder.indexOf(seasonName);
};
return getSeasonIndex(a.full_season) - getSeasonIndex(b.full_season);
})
.map((item) => ({
label: item.full_season,
value: item.export_revenue_sum < 0 ? 0 : Math.round(item.export_revenue_sum) ,
}));
return (
<DashboardLayout title="نوآوری در محصول">
<div className="p-6 space-y-4 flex justify-center gap-4">
@ -619,7 +690,7 @@ export function ProductInnovationPage() {
</div>
<div className="flex items-center justify-center flex-col p-1">
<div
className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
className="h-8 bg-gray-600 rounded animate-pulse"
style={{ width: "40%" }}
/>
<div
@ -631,7 +702,7 @@ export function ProductInnovationPage() {
</CardContent>
</Card>
))
: Object.entries(stateCard).map(([key, card] , index) => (
: Object.entries(stateCard).map(([key, card], index) => (
<Card
key={card.id}
className={`bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50 ${index !== 0 ? "row-start-2 " : "col-span-2"} `}
@ -794,7 +865,7 @@ export function ProductInnovationPage() {
{columns.map((column) => (
<TableCell
key={column.key}
className="text-center whitespace-nowrap border-emerald-500/20 py-1 px-2"
className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2`}
>
{renderCellContent(project, column)}
</TableCell>
@ -823,7 +894,7 @@ export function ProductInnovationPage() {
<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">
<div className="text-base text-gray-401">
کل پروژه ها :{formatNumber(stats?.count_innovation_construction_inside_projects)}
</div>
</div>
@ -836,7 +907,7 @@ export function ProductInnovationPage() {
<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="text-base text-gray-400">میانگین :‌</div>
<div className="font-bold">
{formatNumber(
((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0
@ -851,90 +922,283 @@ export function ProductInnovationPage() {
{/* Project Details Dialog */}
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
<DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-7xl max-h-[90vh] overflow-y-auto">
<DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-7xl max-h-[95vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
جزئیات پروژه
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-2 font-persian text-right">
شرح پروژه
</DialogTitle>
</DialogHeader>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
{/* Left Column - Project Description and Charts */}
<div className="lg:col-span-2 space-y-6">
{/* Project Description */}
<div className="bg-gray-800/50 rounded-lg p-6">
<h2 className="text-2xl font-bold text-white mb-4">
{selectedProjectDetails?.title}
</h2>
<p className="text-gray-300 font-persian leading-relaxed">
{selectedProjectDetails?.project_description || "-"}
</p>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 px-6 py-2">
{/* right Column - Stats Cards and Details */}
<div className="space-y-4">
{/* Stats Cards */}
<div className="space-y-4">
<h3 className="font-bold text-lg">{selectedProjectDetails?.title}</h3>
<p className="py-2">{selectedProjectDetails?.project_description}</p>
</div>
<Timeline />
{/* Project Timeline */}
<div className="mt-6">
<div className="flex items-center justify-between mb-4">
<span className="text-sm text-gray-400">۱۴۰۴</span>
<span className="text-sm text-gray-400">۱۴۰۵</span>
<span className="text-sm text-gray-400">۱۴۰۶</span>
<span className="text-sm text-gray-400">۱۴۰۷</span>
{/* Technical Knowledge */}
<div className=" rounded-lg py-2 mb-0">
<h3 className="text-sm text-gray-400 mb-2">دانش فنی محصول جدید</h3>
<div className="flex gap-4 items-center">
<div className="flex items-center gap-2">
<span className="text-sm text-white">توسعه درونزا</span>
<Checkbox
checked={selectedProjectDetails?.developed_technology_type === "توسعه درونزا"}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-white">همکاری فناورانه</span>
<Checkbox
checked={selectedProjectDetails?.developed_technology_type === "همکاری فناوری"}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-white">سایر</span>
<Checkbox
checked={selectedProjectDetails?.developed_technology_type === "سایر"}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
</div>
</div>
</div>
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<div className="w-4 h-4 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">ثبت ایده</span>
</div>
<div className="flex-1 h-1 bg-gray-600"></div>
<div className="flex items-center space-x-2">
<div className="w-4 h-4 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">تحلیل بازار</span>
</div>
<div className="flex-1 h-1 bg-gray-600"></div>
<div className="flex items-center space-x-2">
<div className="w-4 h-4 bg-gray-600 rounded-full"></div>
<span className="text-sm text-gray-400">توسعه</span>
</div>
<div className="flex-1 h-1 bg-gray-600"></div>
<div className="flex items-center space-x-2">
<div className="w-4 h-4 bg-gray-600 rounded-full"></div>
<span className="text-sm text-gray-400">تجاری سازی</span>
</div>
</div>
<div className="text-xs text-emerald-400 mt-2">وضعیت فعلی: تحلیل بازار</div>
{/* Standards */}
<div className="rounded-lg py-4">
<h3 className="text-sm text-gray-400 mb-4">
استانداردهای ملی و بین‌المللی اخذ شده
</h3>
{selectedProjectDetails?.obtained_standard_title && selectedProjectDetails?.obtained_standard_title.length > 0 ? (
<div className="space-y-2">
{(Array.isArray(selectedProjectDetails?.obtained_standard_title)
? selectedProjectDetails?.obtained_standard_title
: [selectedProjectDetails?.obtained_standard_title]
).map((standard, index) => (
<div key={index} className="flex items-center gap-2">
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">{standard}</span>
</div>
))}
</div>
) : (
<p className="text-sm text-gray-500">
هیچ استانداردی ثبت نشده است.
</p>
)}
</div>
{/* Knowledge-based Certificate Button */}
<div className="justify-self-centerr py-1 mx-auto">
{selectedProjectDetails?.knowledge_based_certificate_obtained === "خیر" ? (
<div className=" border border-red-600 rounded-lg p-2 text-center">
<button className="text-red-400 font-medium">
گواهی دانش‌بنیان ندارد
</button>
</div>
) : (
<Card className="justify-self-center border-emerald-600 bg-transparent py-0">
<CardContent className="p-2 text-center">
<Popover>
<PopoverTrigger asChild>
<Button
variant="default"
className=" text-emerald-400 hover:bg-transparent cursor-pointer bg-transparent"
>
مشاهده اطلاعات گواهی دانش‌بنیان
</Button>
</PopoverTrigger>
<PopoverContent
className="w-64 bg-gray-900 border border-gray-700 text-right"
align="center"
>
<div className="space-y-2">
<p className="text-sm text-white">
<span className="font-bold">شماره گواهی: </span>
{selectedProjectDetails?.knowledge_based_certificate_number ||
"—"}
</p>
<p className="text-sm text-white">
<span className="font-bold">تاریخ اخذ: </span>
{handleDataValue(selectedProjectDetails?.certificate_obtain_date) || "—"}
</p>
<p className="text-sm text-white">
<span className="font-bold">مرجع صادرکننده: </span>
{selectedProjectDetails?.issuing_authority || "—"}
</p>
</div>
</PopoverContent>
</Popover>
</CardContent>
</Card>
)}
</div>
</div>
{/* Left Column - Project Description and Charts */}
{popupLoading ? (
<div className="lg:col-span-2 border-r-2 flex flex-col gap-2 pr-4 pb-2 border-r-[#5F6284]/50">
<div className="rounded-lg pt-4 flex w-full gap-2">
<Card className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2">
<CardContent className="p-2 h-full">
<Skeleton className="h-full w-full" />
</CardContent>
</Card>
<Card className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2">
<CardContent className="p-2 h-full">
<Skeleton className="h-full w-full" />
</CardContent>
</Card>
</div>
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
<Skeleton className="h-8 w-1/3 mb-4" />
<Skeleton className="h-60 w-full" />
</div>
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
<Skeleton className="h-8 w-1/3 mb-4" />
<Skeleton className="h-60 w-full" />
</div>
</div>
) : (
<div className="lg:col-span-2 border-r-2 flex flex-col gap-2 pr-4 pb-2 border-r-[#5F6284]/50">
{/* Project Description */}
<div className=" rounded-lg pt-4 flex w-full gap-2">
<Card
className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2"
>
<CardContent className="p-2 h-full">
<div className="grid grid-cols-2 justify-between gap-2 h-full">
<div className="flex justify-between rows-start-1 col-span-2 items-center border-b-2 mx-4 border-gray-500/20">
<h3 className="text-lg text-white font-persian py-2">
میزان صادارت محصول جدید
</h3>
</div>
<div className="flex col-span-1 items-center row-start-2 my-auto col-start-1 justify-center flex-col p-1 my-auto">
<p
className={`text-2xl font-bold mb-1`}
>
{formatNumber(Math.round(popupStats?.new_products_export > 0 ? popupStats?.new_products_export : 0)) || formatNumber(0)}
</p>
<p className="text-xs font-thin text-gray-300 font-persian">
میلیون ریال
</p>
</div>
<span className="text-gray-600 row-start-2 self-center col-start-2 font-thin text-5xl">/</span>
<div className="flex col-span-1 items-center row-start-2 my-auto col-start-2 justify-center flex-col p-1 my-auto">
<p
className={`text-2xl font-bold mb-1`}
>
{formatNumber(Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)) || formatNumber(0)}%
</p>
<p className="text-xs font-thin text-gray-300 font-persian">
درصد به کل صادرات
</p>
</div>
</div>
</CardContent>
</Card>
<Card
className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2"
>
<CardContent className="p-2 h-full">
<div className="grid grid-cols-2 justify-between gap-2 h-full">
<div className="flex justify-between rows-start-1 col-span-2 items-center border-b-2 mx-4 border-gray-500/20">
<h3 className="text-lg text-white font-persian py-2">
تاثیر در واردات
</h3>
</div>
<div className="flex col-span-1 items-center row-start-2 my-auto col-start-1 justify-center flex-col p-1 my-auto">
<p
className={`text-2xl font-bold mb-1`}
>
{formatNumber(Math.round(popupStats?.import_impact > 0 ? popupStats?.import_impact : 0)) || formatNumber(0)}
</p>
<p className="text-xs font-thin text-gray-300 font-persian">
میلیون ریال
</p>
</div>
<span className="text-gray-600 row-start-2 self-center col-start-2 font-thin text-5xl">/</span>
<div className="flex col-span-1 items-center row-start-2 my-auto col-start-2 justify-center flex-col p-1 my-auto">
<p
className={`text-2xl font-bold mb-1`}
>
{formatNumber(Math.round(popupStats?.import_impact_percent > 0 ? popupStats?.import_impact_percent : 0)) || formatNumber(0)}%
</p>
<p className="text-xs font-thin text-gray-300 font-persian">
درصد صرفه جویی
</p>
</div>
</div>
</CardContent>
</Card>
</div>
{/* Export Revenue Bar Chart */}
<div className="bg-gray-800/50 rounded-lg p-6">
<h3 className="text-lg font-semibold text-white mb-4">ظرفیت صادر شده</h3>
<div className="h-64">
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
<h3 className="text-lg font-semibold text-white">ظرفیت صادر شده</h3>
<div className="h-60">
{popupLoading ? (
<div className="flex items-center justify-center h-full">
<div className="animate-pulse text-gray-400">در حال بارگذاری...</div>
<div className="animate-pulse my-auto text-gray-400">در حال بارگذاری...</div>
</div>
) : exportChartData.length > 0 ? (
<CustomBarChart
title=""
loading={false}
data={exportChartData
.sort((a, b) => {
// Sort by season order
const seasonOrder = ['بهار', 'تابستان', 'پاییز', 'زمستان'];
const getSeasonIndex = (season: string) => {
const year = season.split(' ')[1];
const seasonName = season.split(' ')[0];
return parseInt(year) * 4 + seasonOrder.indexOf(seasonName);
};
return getSeasonIndex(a.full_season) - getSeasonIndex(b.full_season);
})
.map(item => ({
label: item.full_season,
value: Math.round(item.export_revenue_sum / 1000000), // Convert to millions
color: "bg-emerald-400",
labelColor: "text-white"
}))}
barHeight="h-6"
showAxisLabels={true}
<ResponsiveContainer width="100%" height="100%" >
<BarChart className="aspect-auto w-full"
data={sortedBarData}
barGap={15}
barSize={30}
margin={{
top : 18
}}
>
<CartesianGrid vertical={false} stroke="#475569" />
<XAxis
dataKey="label"
tickLine={false}
axisLine={false}
stroke="#C3C3C3"
tickMargin={8}
tickFormatter={(value: string) => `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`}
/>
<YAxis
tickLine={false}
axisLine={false}
stroke="#9CA3AF"
fontSize={11} tick={{ dx: -50 }} tickFormatter={(value: number) => `${formatNumber(value)} میلیون`}/>
<Bar
dataKey="value"
fill="#10B981"
radius={10}
>
<LabelList
formatter={(value : number) => `${formatNumber(value)}`}
position="top"
offset={15}
fill="F9FAFB"
className="fill-foreground"
fontSize={16}
/>
</Bar>
</BarChart>
</ResponsiveContainer>
) : (
<div className="flex items-center justify-center h-full text-gray-400">
داده‌ای برای نمایش وجود ندارد
@ -944,52 +1208,90 @@ export function ProductInnovationPage() {
</div>
{/* Export Revenue Line Chart */}
<div className="bg-gray-800/50 rounded-lg p-6">
<h3 className="text-lg font-semibold text-white mb-4">ظرفیت صادر شده</h3>
<div className="h-64">
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
<h3 className="text-lg font-semibold text-white">ظرفیت صادر شده</h3>
<div className="h-60">
{popupLoading ? (
<div className="flex items-center justify-center h-full">
<div className="animate-pulse text-gray-400">در حال بارگذاری...</div>
<div className="flex items-center justify-center ">
<div className="animate-pulse my-auto text-gray-400">در حال بارگذاری...</div>
</div>
) : allExportData.length > 0 ? (
<ResponsiveContainer width="100%" height="100%">
<LineChart data={transformDataForLineChart(allExportData)}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis
dataKey="season"
stroke="#9CA3AF"
fontSize={12}
/>
<YAxis
stroke="#9CA3AF"
fontSize={12}
domain={[0, 1000]}
/>
<Tooltip
contentStyle={{
backgroundColor: '#1F2937',
border: '1px solid #374151',
borderRadius: '8px',
color: '#F9FAFB'
}}
/>
<Legend />
{[...new Set(allExportData.map(item => item.product_title))].slice(0, 5).map((product, index) => {
const colors = ['#10B981', '#EF4444', '#3B82F6', '#F59E0B', '#8B5CF6'];
<LineChart
accessibilityLayer
className="aspect-auto w-full "
data={transformDataForLineChart(allExportData)}
margin={{ top: 20, right: 30, left: 10, bottom: 50 }}
>
<CartesianGrid vertical={false} stroke="#374151" />
<XAxis
dataKey="season"
stroke="#9CA3AF"
fontSize={11}
tick={({ x, y, payload }) => (
<g transform={`translate(${x},${y + 10})`}>
<text
x={-40}
y={15}
dy={0}
textAnchor="end"
fill="#9CA3AF"
fontSize={11}
transform="rotate(-45)"
>
{payload.value}
</text>
</g>
)}
/>
<YAxis
tickLine={false}
axisLine={false}
stroke="#9CA3AF"
fontSize={11}
tick={{ dx: -50 }}
tickFormatter={(value) => `${formatNumber(value)} میلیون`} // 👈 اضافه کردن M کنار اعداد
/>
<Tooltip
formatter={(value : number) => `${formatNumber(value)} میلیون`}
contentStyle={{
backgroundColor: "#1F2937",
border: "1px solid #374151",
borderRadius: "6px",
padding: "6px 10px",
fontSize: "11px",
color: "#F9FAFB",
}}
/>
<Legend
layout="vertical"
verticalAlign="middle"
align="right"
iconType={"plainline"}display={"flex !important"}
className="!flex"
wrapperStyle={{ fontSize: 11 , paddingLeft : 12 , display : "flex !important" , gap : 10} }
/>
{[...new Set(allExportData.map((item) => item.product_title))]
.slice(0, 5)
.map((product, index) => {
const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"];
return (
<Line
key={product}
type="monotone"
key={product.product_title}
type="linear"
dot={false}
activeDot={{ r: 5 }}
dataKey={product}
stroke={colors[index % colors.length]}
strokeWidth={2}
dot={{ fill: colors[index % colors.length], strokeWidth: 2, r: 4 }}
name={`محصول ${index + 1}`}
/>
);
})}
</LineChart>
</ResponsiveContainer>
</LineChart>
</ResponsiveContainer>
) : (
<div className="flex items-center justify-center h-full text-gray-400">
داده‌ای برای نمایش وجود ندارد
@ -998,114 +1300,9 @@ export function ProductInnovationPage() {
</div>
</div>
</div>
)}
{/* Right Column - Stats Cards and Details */}
<div className="space-y-6">
{/* Stats Cards */}
<div className="space-y-4">
<div className="bg-gray-800/50 rounded-lg p-4">
<h3 className="text-sm text-gray-400 mb-2">میزان صادارت محصول جدید</h3>
{popupLoading ? (
<div className="animate-pulse">
<div className="h-8 bg-gray-600 rounded mb-2"></div>
<div className="h-4 bg-gray-600 rounded mb-2"></div>
<div className="h-6 bg-gray-600 rounded"></div>
</div>
) : (
<>
<div className="text-2xl font-bold text-emerald-400 mb-1">
{formatNumber(popupStats.new_products_export)}
</div>
<div className="text-sm text-gray-300">میلیون ریال</div>
<div className="text-lg font-bold text-red-400 mt-2">
{formatNumber(popupStats.new_products_export_percent)}%
</div>
<div className="text-xs text-gray-400">درصد به کل صادرات</div>
</>
)}
</div>
<div className="bg-gray-800/50 rounded-lg p-4">
<h3 className="text-sm text-gray-400 mb-2">تاثیر در واردات</h3>
{popupLoading ? (
<div className="animate-pulse">
<div className="h-8 bg-gray-600 rounded mb-2"></div>
<div className="h-4 bg-gray-600 rounded mb-2"></div>
<div className="h-6 bg-gray-600 rounded"></div>
</div>
) : (
<>
<div className="text-2xl font-bold text-emerald-400 mb-1">
{formatNumber(popupStats.import_impact)}
</div>
<div className="text-sm text-gray-300">میلیون ریال</div>
<div className="text-lg font-bold text-red-400 mt-2">
{formatNumber(popupStats.import_impact_percent)}%
</div>
<div className="text-xs text-gray-400">درصد صرفه جویی</div>
</>
)}
</div>
</div>
{/* Technical Knowledge */}
<div className="bg-gray-800/50 rounded-lg p-4">
<h3 className="text-sm text-gray-400 mb-4">دانش فنی محصول جدید</h3>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<Checkbox
checked={false}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
<span className="text-sm text-white">توسعه درونزا</span>
</div>
<div className="flex items-center space-x-3">
<Checkbox
checked={true}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
<span className="text-sm text-white">همکاری فناورانه</span>
</div>
<div className="flex items-center space-x-3">
<Checkbox
checked={true}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
<span className="text-sm text-white">سایر</span>
</div>
</div>
</div>
{/* Standards */}
<div className="bg-gray-800/50 rounded-lg p-4">
<h3 className="text-sm text-gray-400 mb-4">استانداردهای ملی و بین المللی اخذ شده</h3>
<div className="space-y-2">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">استاندارد ملی شماره یک</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">استاندارد بین المللی شماره یک</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">استاندارد ملی شماره یک</span>
</div>
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white">استاندارد ملی شماره یک</span>
</div>
</div>
</div>
{/* Knowledge-based Certificate Button */}
<div className="bg-red-600/20 border border-red-600 rounded-lg p-4 text-center">
<button className="text-red-400 font-medium">
گواهی دانش بنیان ندارد
</button>
</div>
</div>
</div>
</DialogContent>
</Dialog>

1
app/components/dashboard/sidebar.tsx
View File

@ -217,6 +217,7 @@ export function Sidebar({
if (item.id === "strategic-alignment") {
return (
<button
key={item.id}
className={cn(
"w-full text-right",
)}

48
app/components/ui/popover.tsx Normal file
View File

@ -0,0 +1,48 @@
"use client"
import * as React from "react"
import * as PopoverPrimitive from "@radix-ui/react-popover"
import { cn } from "~/lib/utils"
function Popover({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
return <PopoverPrimitive.Root data-slot="popover" {...props} />
}
function PopoverTrigger({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
}
function PopoverContent({
className,
align = "center",
sideOffset = 4,
...props
}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
return (
<PopoverPrimitive.Portal>
<PopoverPrimitive.Content
data-slot="popover-content"
align={align}
sideOffset={sideOffset}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
className
)}
{...props}
/>
</PopoverPrimitive.Portal>
)
}
function PopoverAnchor({
...props
}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
}
export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

21
app/lib/utils.ts
View File

@ -1,5 +1,6 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
import moment from "moment-jalaali";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
@ -20,3 +21,23 @@ export const formatCurrency = (amount: string | number) => {
if (isNaN(numericAmount)) return "0 ریال";
return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
};
export const handleDataValue = (val: any): any => {
moment.loadPersian({ usePersianDigits: true });
if (val == null) return val;
if (
typeof val === "string" &&
/^\d{4}[-/]\d{2}[-/]\d{2}( \d{2}:\d{2}(:\d{2})?)?$/.test(val)
) {
return moment(val, "YYYY-MM-DD HH:mm:ss").format("YYYY/MM/DD");
}
if (
typeof val === "number" ||
(typeof val === "string" && /^-?\d+$/.test(val))
) {
return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
}
return val;
}

1
package.json
View File

@ -13,6 +13,7 @@
"@radix-ui/react-dialog": "^1.1.14",
"@radix-ui/react-dropdown-menu": "^2.1.15",
"@radix-ui/react-label": "^2.0.2",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-progress": "^1.1.7",
"@radix-ui/react-select": "^2.2.5",
"@radix-ui/react-slot": "^1.0.2",

39
pnpm-lock.yaml
View File

@ -20,6 +20,9 @@ importers:
'@radix-ui/react-label':
specifier: ^2.0.2
version: 2.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-popover':
specifier: ^1.1.15
version: 1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-progress':
specifier: ^1.1.7
version: 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@ -645,6 +648,19 @@ packages:
'@types/react-dom':
optional: true
'@radix-ui/react-popover@1.1.15':
resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-popper@1.2.8':
resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
peerDependencies:
@ -3009,6 +3025,29 @@ snapshots:
'@types/react': 19.1.12
'@types/react-dom': 19.1.9(@types/react@19.1.12)
'@radix-ui/react-popover@1.1.15(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
dependencies:
'@radix-ui/primitive': 1.1.3
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.12)(react@19.1.1)
'@radix-ui/react-context': 1.1.2(@types/react@19.1.12)(react@19.1.1)
'@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.12)(react@19.1.1)
'@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-id': 1.1.1(@types/react@19.1.12)(react@19.1.1)
'@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-presence': 1.1.5(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
'@radix-ui/react-slot': 1.2.3(@types/react@19.1.12)(react@19.1.1)
'@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.12)(react@19.1.1)
aria-hidden: 1.2.6
react: 19.1.1
react-dom: 19.1.1(react@19.1.1)
react-remove-scroll: 2.7.1(@types/react@19.1.12)(react@19.1.1)
optionalDependencies:
'@types/react': 19.1.12
'@types/react-dom': 19.1.9(@types/react@19.1.12)
'@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.12))(@types/react@19.1.12)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)':
dependencies:
'@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)