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