Merge branch 'main' of https://git.pelekan.org/Saeed0920/inogen into product-idea

app/components/dashboard/project-management/digital-innovation-page.tsx

@@ -441,12 +441,37 @@ export function DigitalInnovationPage() {
         innovation_digital_function: {},
       });
 
-      let payload: DigitalInnovationMetrics = raw?.data;
-      if (typeof payload === "string") {
+
+
+      // let payload: DigitalInnovationMetrics = raw?.data;
+      // console.log("*-*-*-*" +payload);
+      // if (typeof payload === "string") {
+      //   try {
+      //     payload = JSON.parse(payload).innovation_digital_function;
+          
+      //   } catch {}
+      // }
+
+      let payload: DigitalInnovationMetrics | null = null;
+
+      if (raw?.data) {
         try {
-          payload = JSON.parse(payload);
-        } catch {}
+          // مرحله اول: data رو از string به object تبدیل کن
+          const parsedData = JSON.parse(raw.data);
+  
+          // مرحله دوم: innovation_digital_function رو که خودش string هست parse کن
+          const arr = JSON.parse(parsedData.innovation_digital_function);
+  
+          // مرحله سوم: اولین خانه آرایه رو بردار
+          if (Array.isArray(arr) && arr.length > 0) {
+            payload = arr[0];
           }
+        } catch (err) {
+          console.error("Error parsing API response:", err);
+        }
+      }
+
+
 
       const parseNum = (v: unknown): number => {
         if (v == null) return 0;

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

@@ -23,6 +23,12 @@ import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { Checkbox } from "~/components/ui/checkbox";
 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);
@@ -202,6 +259,7 @@ export function ProductInnovationPage() {
 
   const handleProjectDetails = async (project: ProductInnovationData) => {
     setSelectedProjectDetails(project);
+    console.log(project)
     setDetailsDialogOpen(true);
     await fetchPopupData(project);
   };
@@ -220,7 +278,7 @@ export function ProductInnovationPage() {
       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,7 +292,6 @@ export function ProductInnovationPage() {
         ],
         GroupBy: ["product_title", "full_season"]
       });
-
       if (chartResponse.state === 0) {
         const chartData = JSON.parse(chartResponse.data);
         if (Array.isArray(chartData)) {
@@ -865,177 +922,244 @@ 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">
-            
-             {/* Right Column - Stats Cards and Details */}
-             <div className="space-y-6">
+          <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">
-                <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">
-                        {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">
-                        {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>
+            <h3 className="font-bold text-lg">{selectedProjectDetails?.title}</h3>
+            <p className="py-2">{selectedProjectDetails?.project_description}</p>
               </div>
+        <Timeline />
 
               {/* 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"
-                    />
+              <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>
-                  </div>
-                  <div className="flex items-center space-x-3">
+
     <Checkbox
-                      checked={true}
+      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>
-                  </div>
-                  <div className="flex items-center space-x-3">
+
     <Checkbox
-                      checked={true}
+      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="bg-gray-800/50 rounded-lg p-4">
-                <h3 className="text-sm text-gray-400 mb-4">استانداردهای ملی و بین المللی اخذ شده</h3>
+              <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">
-                  <div className="flex items-center space-x-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">استاندارد ملی شماره یک</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>
+          <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="bg-red-600/20 border border-red-600 rounded-lg p-4 text-center">
+               <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 */}
-            <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 */}
-              <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=" 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>
                     
-                {/* 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>
                   </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 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>
-                    <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>
+                  <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>
-                  <div className="text-xs text-emerald-400 mt-2">وضعیت فعلی: تحلیل بازار</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 ? (
-                    <ResponsiveContainer width="100%"  >
+                    <ResponsiveContainer width="100%" height="100%" >
                     <BarChart className="aspect-auto w-full"
                     data={sortedBarData}  
                     barGap={15}  
@@ -1084,12 +1208,12 @@ 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%">
@@ -1176,6 +1300,7 @@ export function ProductInnovationPage() {
                 </div>
               </div>
             </div>
+          )}
 
            
           </div>

app/components/ui/popover.tsx

@@ -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 }

app/lib/utils.ts

@@ -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;
+}

package.json

@@ -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",

pnpm-lock.yaml

@@ -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)