version changed to 02.57

src/Pages/Tagging.tsx

@@ -10,24 +10,31 @@ import { SubmitNewTags } from "../partials/tagging/SubmitNewTags";
 import { useNavigate } from "@tanstack/react-router";
 import { TAGS } from "../routes/paths";
 import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
+import { TableButton } from "../components/TableButton/TableButton";
+
+const speciesMap: Record<number, string> = {
+  1: "گاو",
+  2: "گاومیش",
+  3: "شتر",
+  4: "گوسفند",
+  5: "بز",
+};
 
 export default function Tagging() {
   const { openModal } = useModalStore();
   const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
-  const [tagsTableData, setTagsTableData] = useState([]);
+  const [tagsTableData, setTagsTableData] = useState<any[]>([]);
   const navigate = useNavigate();
 
   const { data: tagsData, refetch } = useApiRequest({
     api: "/tag/web/api/v1/tag_batch/",
     method: "get",
     queryKey: ["tagsList", tableInfo],
-    params: {
-      ...tableInfo,
-    },
+    params: { ...tableInfo },
   });
 
   const { data: tagDashboardData, refetch: updateDashboard } = useApiRequest({
-    api: "/tag/web/api/v1/tag/tag_dashboard/",
+    api: "/tag/web/api/v1/tag_batch/main_dashboard/",
     method: "get",
     queryKey: ["tagDashboard"],
   });
@@ -92,7 +99,6 @@ export default function Tagging() {
                 }}
               />
             </Tooltip>
-
             <DeleteButtonForPopOver
               page="tagging"
               access="Delete-Tag"
@@ -106,10 +112,10 @@ export default function Tagging() {
     } else {
       setTagsTableData([]);
     }
-  }, [tagsData]);
+  }, [tagsData, tableInfo.page, tableInfo.page_size, refetch]);
 
   return (
-    <Grid container column className="gap-4 mt-2">
+    <Grid container column className="gap-4 mt-2 rtl">
       <Grid>
         <Button
           size="small"
@@ -134,25 +140,93 @@ export default function Tagging() {
           noPagination
           noSearch
           columns={[
-            "تعداد کل",
-            "تعداد پلاک های آزاد",
-            "تعداد پلاک شده",
-            "گاو",
-            "گاومیش",
-            "شتر",
-            "گوسفند",
-            "بز",
+            "تعداد گروه پلاک",
+            "پلاک‌های تولیدشده",
+            "پلاک توزیع شده",
+            "پلاک باقی‌مانده",
+            "جزئیات گونه ها",
           ]}
           rows={[
             [
-              tagDashboardData?.count?.toLocaleString() || 0,
-              tagDashboardData?.free_count?.toLocaleString() || 0,
-              tagDashboardData?.assign_count?.toLocaleString() || 0,
-              tagDashboardData?.cow_count?.toLocaleString() || 0,
-              tagDashboardData?.buffalo_count?.toLocaleString() || 0,
-              tagDashboardData?.camel_count?.toLocaleString() || 0,
-              tagDashboardData?.sheep_count?.toLocaleString() || 0,
-              tagDashboardData?.goat_count?.toLocaleString() || 0,
+              tagDashboardData?.batch_count?.toLocaleString() || 0,
+              tagDashboardData?.tag_count_created_by_batch?.toLocaleString() ||
+                0,
+              tagDashboardData?.total_distributed_tags?.toLocaleString() || 0,
+              tagDashboardData?.total_remaining_tags?.toLocaleString() || 0,
+              <TableButton
+                key="species-stats"
+                size="small"
+                onClick={() =>
+                  openModal({
+                    title: "آمار گونه‌ای",
+                    isFullSize: true,
+                    content: (
+                      <BatchBySpeciesModal
+                        batchData={
+                          tagDashboardData?.batch_data_by_species || []
+                        }
+                        onRowAction={(row) => {
+                          openModal({
+                            title: `جزئیات ${
+                              speciesMap[row?.species_code] ?? "-"
+                            }`,
+                            content: (
+                              <div className="space-y-3">
+                                <div className="flex items-center justify-between text-sm">
+                                  <span className="text-gray-600 dark:text-gray-300">
+                                    تعداد بچ
+                                  </span>
+                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                    {row?.batch_count?.toLocaleString?.() ?? 0}
+                                  </span>
+                                </div>
+                                <div className="flex items-center justify-between text-sm">
+                                  <span className="text-gray-600 dark:text-gray-300">
+                                    پلاک تولید شده
+                                  </span>
+                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                    {row?.tag_count_created_by_batch?.toLocaleString?.() ??
+                                      0}
+                                  </span>
+                                </div>
+                                <div className="flex items-center justify-between text-sm">
+                                  <span className="text-gray-600 dark:text-gray-300">
+                                    پلاک توزیع شده
+                                  </span>
+                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                    {row?.total_distributed_tags?.toLocaleString?.() ??
+                                      0}
+                                  </span>
+                                </div>
+                                <div className="flex items-center justify-between text-sm">
+                                  <span className="text-gray-600 dark:text-gray-300">
+                                    پلاک باقی‌مانده
+                                  </span>
+                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                    {row?.total_remaining_tags?.toLocaleString?.() ??
+                                      0}
+                                  </span>
+                                </div>
+                                <div className="flex items-center justify-between text-sm">
+                                  <span className="text-gray-600 dark:text-gray-300">
+                                    بچ‌های توزیع‌شده
+                                  </span>
+                                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                                    {row?.has_distributed_batches_number?.toLocaleString?.() ??
+                                      0}
+                                  </span>
+                                </div>
+                              </div>
+                            ),
+                          });
+                        }}
+                      />
+                    ),
+                  })
+                }
+              >
+                مشاهده
+              </TableButton>,
             ],
           ]}
         />
@@ -167,7 +241,7 @@ export default function Tagging() {
         columns={[
           "ردیف",
           "سازمان ثبت کننده",
-          "کد گونه",
+          "گونه",
           "از بازه سریال",
           "تا بازه سریال",
           "عملیات",
@@ -177,3 +251,78 @@ export default function Tagging() {
     </Grid>
   );
 }
+
+function BatchBySpeciesModal({
+  batchData = [],
+}: {
+  batchData: Array<any>;
+  onRowAction?: (row: any, index: number) => void;
+}) {
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+        {batchData?.map((row, idx) => {
+          const speciesName = speciesMap[row?.species_code] ?? "-";
+          return (
+            <div
+              key={idx}
+              className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-4 flex flex-col"
+            >
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <div className="w-2 h-2 rounded-full bg-primary/70"></div>
+                  <span className="text-sm font-bold text-gray-900 dark:text-gray-100">
+                    {speciesName}
+                  </span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-600 dark:text-gray-300">
+                    تعداد گروه پلاک
+                  </span>
+                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                    {row?.batch_count?.toLocaleString?.() ?? 0}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-600 dark:text-gray-300">
+                    گروه پلاک های توزیع‌شده
+                  </span>
+                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                    {row?.has_distributed_batches_number?.toLocaleString?.() ??
+                      0}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-600 dark:text-gray-300">
+                    پلاک تولید شده
+                  </span>
+                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                    {row?.tag_count_created_by_batch?.toLocaleString?.() ?? 0}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-600 dark:text-gray-300">
+                    پلاک توزیع شده
+                  </span>
+                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                    {row?.total_distributed_tags?.toLocaleString?.() ?? 0}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-600 dark:text-gray-300">
+                    پلاک باقی‌مانده
+                  </span>
+                  <span className="font-semibold text-gray-900 dark:text-gray-100">
+                    {row?.total_remaining_tags?.toLocaleString?.() ?? 0}
+                  </span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/partials/tagging/DistributionSpeciesModal.tsx

@@ -0,0 +1,54 @@
+export const DistributionSpeciesModal = ({ items }: { items: any[] }) => {
+  const speciesMap: Record<number, string> = {
+    1: "گاو",
+    2: "گاومیش",
+    3: "شتر",
+    4: "گوسفند",
+    5: "بز",
+  };
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {items?.map((item, index) => (
+          <div
+            key={index}
+            className="rounded-xl border border-gray-200 dark:border-gray-700 p-4
+                         bg-white dark:bg-gray-800
+                         hover:shadow-sm transition"
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                گونه
+              </span>
+              <span className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+                {speciesMap[item?.species_code] ?? "-"}
+              </span>
+            </div>
+
+            <div className="h-px bg-gray-100 dark:bg-gray-700 my-2" />
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  تعداد توزیع
+                </span>
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                  {item?.dist_count?.toLocaleString() ?? 0}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  تعداد پلاک
+                </span>
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                  {item?.tag_count?.toLocaleString() ?? 0}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

src/partials/tagging/TagActiveDistributions.tsx

@@ -18,6 +18,8 @@ import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverB
 import { SubmitTagDistribution } from "./SubmitTagDistribution";
 import Table from "../../components/Table/Table";
 import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";
+import { TableButton } from "../../components/TableButton/TableButton";
+import { DistributionSpeciesModal } from "./DistributionSpeciesModal";
 
 export default function TagActiveDistributions() {
   const { openModal } = useModalStore();
@@ -208,6 +210,7 @@ export default function TagActiveDistributions() {
             "پلاک های دریافتی",
             "توزیع های دریافتی",
             "توزیع های ارسالی",
+            "جزئیات",
           ]}
           rows={[
             [
@@ -217,6 +220,19 @@ export default function TagActiveDistributions() {
               tagDashboardData?.total_recieved_distributions?.toLocaleString() ||
                 0,
               tagDashboardData?.total_sent_distributions?.toLocaleString() || 0,
+              <TableButton
+                size="small"
+                onClick={() => {
+                  openModal({
+                    title: "جزئیات",
+                    content: (
+                      <DistributionSpeciesModal
+                        items={tagDashboardData?.items}
+                      />
+                    ),
+                  });
+                }}
+              />,
             ],
           ]}
         />

src/partials/tagging/TagCanceledDistributions.tsx

@@ -18,6 +18,8 @@ import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverB
 
 import Table from "../../components/Table/Table";
 import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";
+import { TableButton } from "../../components/TableButton/TableButton";
+import { DistributionSpeciesModal } from "./DistributionSpeciesModal";
 
 export default function TagCanceledDistributions() {
   const { openModal } = useModalStore();
@@ -173,6 +175,7 @@ export default function TagCanceledDistributions() {
             "پلاک های دریافتی",
             "توزیع های دریافتی",
             "توزیع های ارسالی",
+            "جزئیات",
           ]}
           rows={[
             [
@@ -182,6 +185,19 @@ export default function TagCanceledDistributions() {
               tagDashboardData?.total_recieved_distributions?.toLocaleString() ||
                 0,
               tagDashboardData?.total_sent_distributions?.toLocaleString() || 0,
+              <TableButton
+                size="small"
+                onClick={() => {
+                  openModal({
+                    title: "جزئیات",
+                    content: (
+                      <DistributionSpeciesModal
+                        items={tagDashboardData?.items}
+                      />
+                    ),
+                  });
+                }}
+              />,
             ],
           ]}
         />

src/version.txt

@@ -1 +1 @@
-02.56
+02.57