add: tags filters

src/Pages/Tagging.tsx

@@ -32,7 +32,9 @@ export default function Tagging() {
   const navigate = useNavigate();
 
   const { data: tagsData, refetch } = useApiRequest({
-    api: `/tag/web/api/v1/tag_batch/?species_code=${selectedSpecie[0]}`,
+    api: `/tag/web/api/v1/tag_batch/?species_code=${
+      selectedSpecie.length ? selectedSpecie[0] : ""
+    }`,
     method: "get",
     queryKey: ["tagsList", tableInfo, selectedSpecie],
     params: { ...tableInfo },
@@ -70,6 +72,8 @@ export default function Tagging() {
             : "نامشخص",
           item?.serial_from || "-",
           item?.serial_to || "-",
+          item?.total_distributed_tags || 0,
+          item?.total_remaining_tags || 0,
           <Popover key={item.id}>
             <Tooltip title="مشاهده پلاک ها" position="right">
               <Button
@@ -276,6 +280,8 @@ export default function Tagging() {
           "گونه",
           "از بازه سریال",
           "تا بازه سریال",
+          "پلاک های توزیع شده",
+          "پلاک های باقیمانده",
           "عملیات",
         ]}
         rows={tagsTableData}

src/Pages/Tags.tsx

@@ -9,12 +9,22 @@ import { Tooltip } from "../components/Tooltip/Tooltip";
 import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
 import { TagDetails } from "../partials/tagging/TagDetails";
 import { useParams } from "@tanstack/react-router";
+import { TableButton } from "../components/TableButton/TableButton";
+
+const speciesMap: Record<number, string> = {
+  1: "گاو",
+  2: "گاومیش",
+  3: "شتر",
+  4: "گوسفند",
+  5: "بز",
+};
 
 export default function Tags() {
   const { openModal } = useModalStore();
   const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
   const [tagsTableData, setTagsTableData] = useState([]);
   const { id, from, to } = useParams({ strict: false });
+
   const { data: tagsData, refetch } = useApiRequest({
     api: `/tag/web/api/v1/tag/${id ? id + "/tags_by_batch" : ""}`,
     method: "get",
@@ -25,7 +35,9 @@ export default function Tags() {
   });
 
   const { data: tagDashboardData } = useApiRequest({
-    api: "/tag/web/api/v1/tag/tag_dashboard/",
+    api: id
+      ? `/tag/web/api/v1/tag_batch/${id}/inner_dashboard`
+      : "/tag/web/api/v1/tag/tag_dashboard/",
     method: "get",
     queryKey: ["tagDashboard"],
   });
@@ -89,36 +101,140 @@ export default function Tags() {
 
   return (
     <Grid container column className="gap-4 mt-2">
-      <Grid isDashboard>
+      {tagDashboardData && (
-        <Table
+        <Grid isDashboard>
-          isDashboard
+          <Table
-          title="خلاصه اطلاعات"
+            isDashboard
-          noPagination
+            title="خلاصه اطلاعات"
-          noSearch
+            noPagination
-          columns={[
+            noSearch
-            "تعداد کل",
+            columns={
-            "تعداد پلاک های آزاد",
+              id
-            "تعداد پلاک شده",
+                ? [
-            "گاو",
+                    "تعداد پلاک",
-            "گاومیش",
+                    "پلاک های توزیع شده",
-            "شتر",
+                    "تعداد پلاک های گروه پلاک",
-            "گوسفند",
+                    "تعداد پلاک های توزیع شده",
-            "بز",
+                    "تعداد پلاک های باقیمانده",
-          ]}
+                    "آمار گونه ای",
-          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,
+                    "بز",
-            ],
+                  ]
-          ]}
+            }
-        />
+            rows={
-      </Grid>
+              id
+                ? [
+                    [
+                      tagDashboardData?.batch_count?.toLocaleString() || 0,
+                      tagDashboardData?.has_distributed_batches_number?.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>,
+                    ],
+                  ]
+                : [
+                    [
+                      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,
+                    ],
+                  ]
+            }
+          />
+        </Grid>
+      )}
 
       <Table
         className="mt-2"
@@ -140,3 +256,78 @@ export default function Tags() {
     </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>
+  );
+}