add: tag dist detail

src/Pages/TagDistributionDetails.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { useParams } from "@tanstack/react-router";
+import { useApiRequest } from "../utils/useApiRequest";
+import { Grid } from "../components/Grid/Grid";
+import Table from "../components/Table/Table";
+
+export default function TagDistribtutionDetails() {
+  const { id } = useParams({ strict: false });
+  const [tableData, setTableData] = useState([]);
+
+  const { data } = useApiRequest({
+    api: `/tag/web/api/v1/tag_distribution_batch/${id}/`,
+    method: "get",
+    queryKey: ["tagBatchInnerDashboard", id],
+    enabled: !!id,
+  });
+
+  useEffect(() => {
+    if (data?.distributions) {
+      const rows = data.distributions.map((item: any, index: number) => [
+        index + 1,
+        item?.dist_identity,
+        item?.batch_identity,
+        item?.distribution_type === "batch" ? "توزیع گروهی" : "توزیع تصادفی",
+        item?.species_code,
+        item?.total_tag_count,
+        item?.distributed_number,
+        item?.remaining_number,
+        `از ${item?.serial_from} تا ${item?.serial_to}`,
+      ]);
+      setTableData(rows);
+    }
+  }, [data]);
+
+  return (
+    <Grid container column className="gap-4">
+      <Table
+        title="جزئیات توزیع پلاک"
+        noSearch
+        noPagination
+        columns={[
+          "ردیف",
+          "شناسه توزیع",
+          "شناسه پلاک",
+          "نوع توزیع",
+          "کد گونه",
+          "تعداد کل پلاک ها",
+          "تعداد توزیع شده",
+          "تعداد باقیمانده",
+          "بازه سریال",
+        ]}
+        rows={tableData}
+      />
+    </Grid>
+  );
+}

src/partials/tagging/TagActiveDistributions.tsx

@@ -20,11 +20,14 @@ import Table from "../../components/Table/Table";
 import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";
 import { TableButton } from "../../components/TableButton/TableButton";
 import { DistributionSpeciesModal } from "./DistributionSpeciesModal";
+import { useNavigate } from "@tanstack/react-router";
+import { TAG_DISTRIBUTION } from "../../routes/paths";
 
 export default function TagActiveDistributions() {
   const { openModal } = useModalStore();
   const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
   const [tagsTableData, setTagsTableData] = useState([]);
+  const navigate = useNavigate();
 
   const { data: tagsData, refetch } = useApiRequest({
     api: "/tag/web/api/v1/tag_distribution_batch",
@@ -105,7 +108,7 @@ export default function TagActiveDistributions() {
                       variant="body2"
                       className="text-gray-700 dark:text-gray-300"
                     >
-                      {opt?.distributed_number?.toLocaleString()}
+                      {opt?.total_tag_count?.toLocaleString()}
                     </Typography>
                   </Grid>
 
@@ -126,6 +129,22 @@ export default function TagActiveDistributions() {
             </Grid>
           </ShowMoreInfo>,
           <Popover key={index}>
+            <Tooltip title="جزيٓیات توزیع" position="right">
+              <Button
+                variant="detail"
+                page="tag_distribution_detail"
+                access="Show-Tag-Distribution-Detail"
+                onClick={() => {
+                  const path =
+                    TAG_DISTRIBUTION +
+                    "/" +
+                    item?.dist_batch_identity +
+                    "/" +
+                    item?.id;
+                  navigate({ to: path });
+                }}
+              />
+            </Tooltip>
             <Tooltip title="ویرایش توزیع" position="right">
               <Button
                 variant="edit"

src/routes/paths.ts

@@ -54,4 +54,5 @@ export const UNITS_SETTINGS = "/unit-settings";
 export const TAGGING = "/tagging";
 export const TAGS = "/tags";
 export const TAG_DISTRIBUTION = "/tag-distribution";
+export const TAG_DISTRIBUTION_DETAIL = "/tag-distribution/$identity/$id";
 export const TAGS_BATCH = "/tags/$id/$from/$to";

src/utils/getCategoryParameters.ts

@@ -25,6 +25,7 @@ import SettingsOfUnits from "../Pages/SettingsOfUnits";
 import Tagging from "../Pages/Tagging";
 import Tags from "../Pages/Tags";
 import TagDistribtution from "../Pages/TagDistribution";
+import TagDistribtutionDetails from "../Pages/TagDistributionDetails";
 
 export const managementCategoryItems = [
   {
@@ -188,6 +189,11 @@ export const taggingCategoryItems = [
     path: R.TAG_DISTRIBUTION,
     component: TagDistribtution,
   },
+  {
+    name: "tag_distribution_detail",
+    path: R.TAG_DISTRIBUTION_DETAIL,
+    component: TagDistribtutionDetails,
+  },
 ];
 
 export const posCategoryItems = [

src/utils/getFaPermissions.ts

@@ -103,6 +103,9 @@ export function getFaPermissions(permission: string) {
     case "tag_distribution":
       faPermission = "توزیع پلاک";
       break;
+    case "tag_distribution_detail":
+      faPermission = "جزئیات توزیع پلاک";
+      break;
     default:
       break;
   }