product-idea #10
|
|
@ -22,7 +22,13 @@ import { Badge } from "~/components/ui/badge";
|
||||||
import { Button } from "~/components/ui/button";
|
import { Button } from "~/components/ui/button";
|
||||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||||
import { Checkbox } from "~/components/ui/checkbox";
|
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 { FunnelChart } from "~/components/ui/funnel-chart";
|
||||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
|
||||||
import {
|
import {
|
||||||
|
|
@ -43,9 +49,10 @@ import {
|
||||||
TableRow,
|
TableRow,
|
||||||
} from "~/components/ui/table";
|
} from "~/components/ui/table";
|
||||||
import apiService from "~/lib/api";
|
import apiService from "~/lib/api";
|
||||||
import { formatNumber } from "~/lib/utils";
|
import { formatNumber, handleDataValue } from "~/lib/utils";
|
||||||
import { DashboardLayout } from "../layout";
|
import { DashboardLayout } from "../layout";
|
||||||
import { Skeleton } from "~/components/ui/skeleton";
|
import { Skeleton } from "~/components/ui/skeleton";
|
||||||
|
import { Tooltip as TooltipSh, TooltipTrigger, TooltipContent } from "~/components/ui/tooltip";
|
||||||
|
|
||||||
moment.loadPersian({ usePersianDigits: true });
|
moment.loadPersian({ usePersianDigits: true });
|
||||||
|
|
||||||
|
|
@ -130,7 +137,57 @@ const columns = [
|
||||||
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
|
{ 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() {
|
export function ProductInnovationPage() {
|
||||||
|
const [showPopup, setShowPopup] = useState(false);
|
||||||
const [projects, setProjects] = useState<ProductInnovationData[]>([]);
|
const [projects, setProjects] = useState<ProductInnovationData[]>([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [loadingMore, setLoadingMore] = useState(false);
|
const [loadingMore, setLoadingMore] = useState(false);
|
||||||
|
|
@ -138,7 +195,6 @@ export function ProductInnovationPage() {
|
||||||
const [pageSize] = useState(20);
|
const [pageSize] = useState(20);
|
||||||
const [hasMore, setHasMore] = useState(true);
|
const [hasMore, setHasMore] = useState(true);
|
||||||
const [totalCount, setTotalCount] = useState(0);
|
const [totalCount, setTotalCount] = useState(0);
|
||||||
const [actualTotalCount, setActualTotalCount] = useState(0);
|
|
||||||
const [statsLoading, setStatsLoading] = useState(false);
|
const [statsLoading, setStatsLoading] = useState(false);
|
||||||
const [stats, setStats] = useState<ProductInnovationStats>({
|
const [stats, setStats] = useState<ProductInnovationStats>({
|
||||||
new_products_revenue_share: 0,
|
new_products_revenue_share: 0,
|
||||||
|
|
@ -199,28 +255,30 @@ export function ProductInnovationPage() {
|
||||||
const observerRef = useRef<HTMLDivElement>(null);
|
const observerRef = useRef<HTMLDivElement>(null);
|
||||||
const fetchingRef = useRef(false);
|
const fetchingRef = useRef(false);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleProjectDetails = async (project: ProductInnovationData) => {
|
const handleProjectDetails = async (project: ProductInnovationData) => {
|
||||||
setSelectedProjectDetails(project);
|
setSelectedProjectDetails(project);
|
||||||
|
console.log(project)
|
||||||
setDetailsDialogOpen(true);
|
setDetailsDialogOpen(true);
|
||||||
await fetchPopupData(project.project_id);
|
await fetchPopupData(project);
|
||||||
};
|
};
|
||||||
|
|
||||||
const fetchPopupData = async (projectId: string) => {
|
const fetchPopupData = async (project: ProductInnovationData) => {
|
||||||
try {
|
try {
|
||||||
setPopupLoading(true);
|
setPopupLoading(true);
|
||||||
|
|
||||||
// Fetch popup stats
|
// Fetch popup stats
|
||||||
const statsResponse = await apiService.call({
|
const statsResponse = await apiService.call({
|
||||||
innovation_product_popup_function1: {
|
innovation_product_popup_function1: {
|
||||||
project_id: projectId
|
project_id: project.project_id
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (statsResponse.state === 0) {
|
if (statsResponse.state === 0) {
|
||||||
const statsData = JSON.parse(statsResponse.data);
|
const statsData = JSON.parse(statsResponse.data);
|
||||||
if (statsData.innovation_product_popup_function1 && statsData.innovation_product_popup_function1[0]) {
|
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"]
|
GroupBy: ["product_title", "full_season"]
|
||||||
});
|
});
|
||||||
|
|
||||||
if (chartResponse.state === 0) {
|
if (chartResponse.state === 0) {
|
||||||
const chartData = JSON.parse(chartResponse.data);
|
const chartData = JSON.parse(chartResponse.data);
|
||||||
if (Array.isArray(chartData)) {
|
if (Array.isArray(chartData)) {
|
||||||
// Set all data for line chart
|
// Set all data for line chart
|
||||||
setAllExportData(chartData);
|
|
||||||
|
|
||||||
// Filter data for the selected project (bar chart)
|
// Filter data for the selected project (bar chart)
|
||||||
const filteredData = chartData.filter(item =>
|
const filteredData = chartData.filter(item =>
|
||||||
item.product_title === selectedProjectDetails?.title
|
item.product_title === project?.title
|
||||||
);
|
);
|
||||||
|
setAllExportData(chartData);
|
||||||
setExportChartData(filteredData);
|
setExportChartData(filteredData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -486,16 +543,15 @@ export function ProductInnovationPage() {
|
||||||
|
|
||||||
// Transform data for line chart
|
// Transform data for line chart
|
||||||
const transformDataForLineChart = (data: any[]) => {
|
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))];
|
const products = [...new Set(data.map(item => item.product_title))];
|
||||||
|
|
||||||
return seasons.map(season => {
|
return seasons.map(season => {
|
||||||
const seasonData: any = { season };
|
const seasonData: any = { season };
|
||||||
products.forEach(product => {
|
products.forEach(product => {
|
||||||
const productData = data.find(item =>
|
const productData = data.find(item =>
|
||||||
item.product_title === product && item.full_season === season
|
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;
|
return seasonData;
|
||||||
});
|
});
|
||||||
|
|
@ -550,7 +606,8 @@ export function ProductInnovationPage() {
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
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"
|
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 (
|
return (
|
||||||
<DashboardLayout title="نوآوری در محصول">
|
<DashboardLayout title="نوآوری در محصول">
|
||||||
<div className="p-6 space-y-4 flex justify-center gap-4">
|
<div className="p-6 space-y-4 flex justify-center gap-4">
|
||||||
|
|
@ -619,7 +690,7 @@ export function ProductInnovationPage() {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-center flex-col p-1">
|
<div className="flex items-center justify-center flex-col p-1">
|
||||||
<div
|
<div
|
||||||
className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
|
className="h-8 bg-gray-600 rounded animate-pulse"
|
||||||
style={{ width: "40%" }}
|
style={{ width: "40%" }}
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
|
|
@ -631,7 +702,7 @@ export function ProductInnovationPage() {
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))
|
))
|
||||||
: Object.entries(stateCard).map(([key, card] , index) => (
|
: Object.entries(stateCard).map(([key, card], index) => (
|
||||||
<Card
|
<Card
|
||||||
key={card.id}
|
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"} `}
|
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) => (
|
{columns.map((column) => (
|
||||||
<TableCell
|
<TableCell
|
||||||
key={column.key}
|
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)}
|
{renderCellContent(project, column)}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
|
|
@ -823,7 +894,7 @@ export function ProductInnovationPage() {
|
||||||
<div className="p-2 px-4 bg-[#3F415A]">
|
<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="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-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)}
|
کل پروژه ها :{formatNumber(stats?.count_innovation_construction_inside_projects)}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<span className="block w-7 h-2.5 bg-pink-400 rounded-tr-xl rounded-br-xl"></span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center items-center gap-2">
|
<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">
|
<div className="font-bold">
|
||||||
{formatNumber(
|
{formatNumber(
|
||||||
((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0
|
((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0
|
||||||
|
|
@ -851,90 +922,283 @@ export function ProductInnovationPage() {
|
||||||
|
|
||||||
{/* Project Details Dialog */}
|
{/* Project Details Dialog */}
|
||||||
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
<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>
|
<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>
|
</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
|
<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 />
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6">
|
|
||||||
{/* Left Column - Project Description and Charts */}
|
{/* Left Column - Project Description and Charts */}
|
||||||
<div className="lg:col-span-2 space-y-6">
|
{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 */}
|
{/* Project Description */}
|
||||||
<div className="bg-gray-800/50 rounded-lg p-6">
|
<div className=" rounded-lg pt-4 flex w-full gap-2">
|
||||||
<h2 className="text-2xl font-bold text-white mb-4">
|
<Card
|
||||||
{selectedProjectDetails?.title}
|
className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] flex-1 backdrop-blur-sm border-gray-700/50 col-span-2"
|
||||||
</h2>
|
>
|
||||||
<p className="text-gray-300 font-persian leading-relaxed">
|
<CardContent className="p-2 h-full">
|
||||||
{selectedProjectDetails?.project_description || "-"}
|
<div className="grid grid-cols-2 justify-between gap-2 h-full">
|
||||||
</p>
|
<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">
|
||||||
{/* Project Timeline */}
|
میزان صادارت محصول جدید
|
||||||
<div className="mt-6">
|
</h3>
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<span className="text-sm text-gray-400">۱۴۰۴</span>
|
</div>
|
||||||
<span className="text-sm text-gray-400">۱۴۰۵</span>
|
|
||||||
<span className="text-sm text-gray-400">۱۴۰۶</span>
|
<div className="flex col-span-1 items-center row-start-2 my-auto col-start-1 justify-center flex-col p-1 my-auto">
|
||||||
<span className="text-sm text-gray-400">۱۴۰۷</span>
|
<p
|
||||||
</div>
|
className={`text-2xl font-bold mb-1`}
|
||||||
<div className="flex items-center space-x-4">
|
>
|
||||||
<div className="flex items-center space-x-2">
|
{formatNumber(Math.round(popupStats?.new_products_export > 0 ? popupStats?.new_products_export : 0)) || formatNumber(0)}
|
||||||
<div className="w-4 h-4 bg-emerald-500 rounded-full"></div>
|
</p>
|
||||||
<span className="text-sm text-white">ثبت ایده</span>
|
<p className="text-xs font-thin text-gray-300 font-persian">
|
||||||
</div>
|
میلیون ریال
|
||||||
<div className="flex-1 h-1 bg-gray-600"></div>
|
</p>
|
||||||
<div className="flex items-center space-x-2">
|
</div>
|
||||||
<div className="w-4 h-4 bg-emerald-500 rounded-full"></div>
|
<span className="text-gray-600 row-start-2 self-center col-start-2 font-thin text-5xl">/</span>
|
||||||
<span className="text-sm text-white">تحلیل بازار</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">
|
||||||
</div>
|
<p
|
||||||
<div className="flex-1 h-1 bg-gray-600"></div>
|
className={`text-2xl font-bold mb-1`}
|
||||||
<div className="flex items-center space-x-2">
|
>
|
||||||
<div className="w-4 h-4 bg-gray-600 rounded-full"></div>
|
{formatNumber(Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)) || formatNumber(0)}%
|
||||||
<span className="text-sm text-gray-400">توسعه</span>
|
</p>
|
||||||
</div>
|
<p className="text-xs font-thin text-gray-300 font-persian">
|
||||||
<div className="flex-1 h-1 bg-gray-600"></div>
|
درصد به کل صادرات
|
||||||
<div className="flex items-center space-x-2">
|
</p>
|
||||||
<div className="w-4 h-4 bg-gray-600 rounded-full"></div>
|
</div>
|
||||||
<span className="text-sm text-gray-400">تجاری سازی</span>
|
</div>
|
||||||
</div>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
<div className="text-xs text-emerald-400 mt-2">وضعیت فعلی: تحلیل بازار</div>
|
|
||||||
</div>
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Export Revenue Bar Chart */}
|
{/* Export Revenue Bar Chart */}
|
||||||
<div className="bg-gray-800/50 rounded-lg p-6">
|
<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 mb-4">ظرفیت صادر شده</h3>
|
<h3 className="text-lg font-semibold text-white">ظرفیت صادر شده</h3>
|
||||||
<div className="h-64">
|
<div className="h-60">
|
||||||
{popupLoading ? (
|
{popupLoading ? (
|
||||||
<div className="flex items-center justify-center h-full">
|
<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>
|
</div>
|
||||||
) : exportChartData.length > 0 ? (
|
) : exportChartData.length > 0 ? (
|
||||||
<CustomBarChart
|
<ResponsiveContainer width="100%" height="100%" >
|
||||||
title=""
|
<BarChart className="aspect-auto w-full"
|
||||||
loading={false}
|
data={sortedBarData}
|
||||||
data={exportChartData
|
barGap={15}
|
||||||
.sort((a, b) => {
|
barSize={30}
|
||||||
// Sort by season order
|
margin={{
|
||||||
const seasonOrder = ['بهار', 'تابستان', 'پاییز', 'زمستان'];
|
top : 18
|
||||||
const getSeasonIndex = (season: string) => {
|
}}
|
||||||
const year = season.split(' ')[1];
|
>
|
||||||
const seasonName = season.split(' ')[0];
|
<CartesianGrid vertical={false} stroke="#475569" />
|
||||||
return parseInt(year) * 4 + seasonOrder.indexOf(seasonName);
|
<XAxis
|
||||||
};
|
dataKey="label"
|
||||||
return getSeasonIndex(a.full_season) - getSeasonIndex(b.full_season);
|
tickLine={false}
|
||||||
})
|
axisLine={false}
|
||||||
.map(item => ({
|
stroke="#C3C3C3"
|
||||||
label: item.full_season,
|
tickMargin={8}
|
||||||
value: Math.round(item.export_revenue_sum / 1000000), // Convert to millions
|
tickFormatter={(value: string) => `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`}
|
||||||
color: "bg-emerald-400",
|
|
||||||
labelColor: "text-white"
|
|
||||||
}))}
|
|
||||||
barHeight="h-6"
|
|
||||||
showAxisLabels={true}
|
|
||||||
/>
|
/>
|
||||||
|
<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">
|
<div className="flex items-center justify-center h-full text-gray-400">
|
||||||
دادهای برای نمایش وجود ندارد
|
دادهای برای نمایش وجود ندارد
|
||||||
|
|
@ -944,52 +1208,90 @@ export function ProductInnovationPage() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Export Revenue Line Chart */}
|
{/* Export Revenue Line Chart */}
|
||||||
<div className="bg-gray-800/50 rounded-lg p-6">
|
<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 mb-4">ظرفیت صادر شده</h3>
|
<h3 className="text-lg font-semibold text-white">ظرفیت صادر شده</h3>
|
||||||
<div className="h-64">
|
<div className="h-60">
|
||||||
{popupLoading ? (
|
{popupLoading ? (
|
||||||
<div className="flex items-center justify-center h-full">
|
<div className="flex items-center justify-center ">
|
||||||
<div className="animate-pulse text-gray-400">در حال بارگذاری...</div>
|
<div className="animate-pulse my-auto text-gray-400">در حال بارگذاری...</div>
|
||||||
</div>
|
</div>
|
||||||
) : allExportData.length > 0 ? (
|
) : allExportData.length > 0 ? (
|
||||||
<ResponsiveContainer width="100%" height="100%">
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
<LineChart data={transformDataForLineChart(allExportData)}>
|
<LineChart
|
||||||
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
|
accessibilityLayer
|
||||||
<XAxis
|
className="aspect-auto w-full "
|
||||||
dataKey="season"
|
data={transformDataForLineChart(allExportData)}
|
||||||
stroke="#9CA3AF"
|
margin={{ top: 20, right: 30, left: 10, bottom: 50 }}
|
||||||
fontSize={12}
|
>
|
||||||
/>
|
<CartesianGrid vertical={false} stroke="#374151" />
|
||||||
<YAxis
|
<XAxis
|
||||||
stroke="#9CA3AF"
|
dataKey="season"
|
||||||
fontSize={12}
|
stroke="#9CA3AF"
|
||||||
domain={[0, 1000]}
|
fontSize={11}
|
||||||
/>
|
tick={({ x, y, payload }) => (
|
||||||
<Tooltip
|
<g transform={`translate(${x},${y + 10})`}>
|
||||||
contentStyle={{
|
<text
|
||||||
backgroundColor: '#1F2937',
|
x={-40}
|
||||||
border: '1px solid #374151',
|
y={15}
|
||||||
borderRadius: '8px',
|
dy={0}
|
||||||
color: '#F9FAFB'
|
textAnchor="end"
|
||||||
}}
|
fill="#9CA3AF"
|
||||||
/>
|
fontSize={11}
|
||||||
<Legend />
|
transform="rotate(-45)"
|
||||||
{[...new Set(allExportData.map(item => item.product_title))].slice(0, 5).map((product, index) => {
|
>
|
||||||
const colors = ['#10B981', '#EF4444', '#3B82F6', '#F59E0B', '#8B5CF6'];
|
{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 (
|
return (
|
||||||
<Line
|
<Line
|
||||||
key={product}
|
key={product.product_title}
|
||||||
type="monotone"
|
type="linear"
|
||||||
|
dot={false}
|
||||||
|
activeDot={{ r: 5 }}
|
||||||
dataKey={product}
|
dataKey={product}
|
||||||
stroke={colors[index % colors.length]}
|
stroke={colors[index % colors.length]}
|
||||||
strokeWidth={2}
|
strokeWidth={2}
|
||||||
dot={{ fill: colors[index % colors.length], strokeWidth: 2, r: 4 }}
|
|
||||||
name={`محصول ${index + 1}`}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
|
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center justify-center h-full text-gray-400">
|
<div className="flex items-center justify-center h-full text-gray-400">
|
||||||
دادهای برای نمایش وجود ندارد
|
دادهای برای نمایش وجود ندارد
|
||||||
|
|
@ -998,114 +1300,9 @@ export function ProductInnovationPage() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
|
||||||
|
|
@ -217,6 +217,7 @@ export function Sidebar({
|
||||||
if (item.id === "strategic-alignment") {
|
if (item.id === "strategic-alignment") {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
|
key={item.id}
|
||||||
className={cn(
|
className={cn(
|
||||||
"w-full text-right",
|
"w-full text-right",
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
48
app/components/ui/popover.tsx
Normal file
48
app/components/ui/popover.tsx
Normal 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 }
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { clsx, type ClassValue } from "clsx";
|
import { clsx, type ClassValue } from "clsx";
|
||||||
import { twMerge } from "tailwind-merge";
|
import { twMerge } from "tailwind-merge";
|
||||||
|
import moment from "moment-jalaali";
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs));
|
return twMerge(clsx(inputs));
|
||||||
|
|
@ -20,3 +21,23 @@ export const formatCurrency = (amount: string | number) => {
|
||||||
if (isNaN(numericAmount)) return "0 ریال";
|
if (isNaN(numericAmount)) return "0 ریال";
|
||||||
return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
"@radix-ui/react-dialog": "^1.1.14",
|
"@radix-ui/react-dialog": "^1.1.14",
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
"@radix-ui/react-dropdown-menu": "^2.1.15",
|
||||||
"@radix-ui/react-label": "^2.0.2",
|
"@radix-ui/react-label": "^2.0.2",
|
||||||
|
"@radix-ui/react-popover": "^1.1.15",
|
||||||
"@radix-ui/react-progress": "^1.1.7",
|
"@radix-ui/react-progress": "^1.1.7",
|
||||||
"@radix-ui/react-select": "^2.2.5",
|
"@radix-ui/react-select": "^2.2.5",
|
||||||
"@radix-ui/react-slot": "^1.0.2",
|
"@radix-ui/react-slot": "^1.0.2",
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,9 @@ importers:
|
||||||
'@radix-ui/react-label':
|
'@radix-ui/react-label':
|
||||||
specifier: ^2.0.2
|
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)
|
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':
|
'@radix-ui/react-progress':
|
||||||
specifier: ^1.1.7
|
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)
|
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':
|
'@types/react-dom':
|
||||||
optional: true
|
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':
|
'@radix-ui/react-popper@1.2.8':
|
||||||
resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
|
resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
|
|
@ -3009,6 +3025,29 @@ snapshots:
|
||||||
'@types/react': 19.1.12
|
'@types/react': 19.1.12
|
||||||
'@types/react-dom': 19.1.9(@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)':
|
'@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:
|
dependencies:
|
||||||
'@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
|
'@floating-ui/react-dom': 2.1.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user