feat: edit distribution from distribution

src/Pages/TagDistributionDetails.tsx

@@ -1,11 +1,17 @@
+import { useEffect, useState } from "react";
 import { useParams } from "@tanstack/react-router";
 import { Bars3Icon, CubeIcon, SparklesIcon } from "@heroicons/react/24/outline";
 import { useApiRequest } from "../utils/useApiRequest";
+import { useModalStore } from "../context/zustand-store/appStore";
 import { formatJustDate, formatJustTime } from "../utils/formatTime";
 import ShowMoreInfo from "../components/ShowMoreInfo/ShowMoreInfo";
 import { Grid } from "../components/Grid/Grid";
 import Typography from "../components/Typography/Typography";
 import Table from "../components/Table/Table";
+import { Popover } from "../components/PopOver/PopOver";
+import Button from "../components/Button/Button";
+import { Tooltip } from "../components/Tooltip/Tooltip";
+import { DistributeFromDistribution } from "../partials/tagging/DistributeFromDistribution";
 
 const speciesMap: Record<number, string> = {
   1: "گاو",
@@ -17,14 +23,171 @@ const speciesMap: Record<number, string> = {
 
 export default function TagDistribtutionDetails() {
   const { id } = useParams({ strict: false });
+  const { openModal } = useModalStore();
+  const [childTableInfo, setChildTableInfo] = useState({
+    page: 1,
+    page_size: 10,
+  });
+  const [childTableData, setChildTableData] = useState([]);
 
-  const { data } = useApiRequest({
+  const { data, refetch: refetchData } = useApiRequest({
     api: `/tag/web/api/v1/tag_distribution_batch/${id}/`,
     method: "get",
     queryKey: ["tagBatchInnerDashboard", id],
     enabled: !!id,
   });
 
+  const { data: childData, refetch: refetchChildList } = useApiRequest({
+    api: `/tag/web/api/v1/tag_distribution_batch/${id}/child_list/`,
+    method: "get",
+    queryKey: ["tagDistributionChildList", id, childTableInfo],
+    params: {
+      ...childTableInfo,
+    },
+    enabled: !!id,
+  });
+
+  const handleUpdate = () => {
+    refetchData();
+    refetchChildList();
+  };
+
+  useEffect(() => {
+    if (childData?.results) {
+      const formattedData = childData.results.map(
+        (item: any, index: number) => {
+          const dist = item?.distributions;
+
+          return [
+            childTableInfo.page === 1
+              ? index + 1
+              : index +
+                childTableInfo.page_size * (childTableInfo.page - 1) +
+                1,
+            item?.dist_batch_identity ?? "-",
+            `${formatJustDate(item?.create_date) ?? "-"} (${
+              formatJustDate(item?.create_date)
+                ? (formatJustTime(item?.create_date) ?? "-")
+                : "-"
+            })`,
+            item?.assigner_org?.name ?? "-",
+            item?.assigned_org?.name ?? "-",
+            item?.total_tag_count?.toLocaleString() ?? "-",
+            item?.total_distributed_tag_count?.toLocaleString() ?? "-",
+            item?.remaining_tag_count?.toLocaleString() ?? "-",
+            item?.distribution_type === "batch"
+              ? "توزیع گروهی"
+              : "توزیع تصادفی",
+            <ShowMoreInfo key={item?.id} title="جزئیات توزیع">
+              <Grid container column className="gap-4 w-full">
+                {dist?.map((opt: any, idx: number) => (
+                  <Grid
+                    key={idx}
+                    container
+                    column
+                    className="gap-3 w-full rounded-xl border border-gray-200 dark:border-gray-700 p-4"
+                  >
+                    <Grid container className="gap-2 items-center">
+                      <SparklesIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
+                      <Typography variant="body2" className="font-medium">
+                        گونه:
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        className="text-gray-700 dark:text-gray-300"
+                      >
+                        {speciesMap[opt?.species_code] ?? "-"}
+                      </Typography>
+                    </Grid>
+
+                    {item?.distribution_type === "batch" &&
+                      opt?.serial_from != null && (
+                        <Grid container className="gap-2 items-center">
+                          <Bars3Icon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
+                          <Typography variant="body2" className="font-medium">
+                            بازه سریال:
+                          </Typography>
+                          <Typography
+                            variant="body2"
+                            className="text-gray-600 dark:text-gray-400"
+                          >
+                            از {opt?.serial_from ?? "-"} تا{" "}
+                            {opt?.serial_to ?? "-"}
+                          </Typography>
+                        </Grid>
+                      )}
+
+                    <Grid container className="gap-2 items-center">
+                      <CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
+                      <Typography variant="body2" className="font-medium">
+                        تعداد پلاک:
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        className="text-gray-700 dark:text-gray-300"
+                      >
+                        {opt?.total_tag_count?.toLocaleString() ?? "-"}
+                      </Typography>
+                    </Grid>
+                    <Grid container className="gap-2 items-center">
+                      <CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
+                      <Typography variant="body2" className="font-medium">
+                        پلاک های توزیع شده:
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        className="text-gray-700 dark:text-gray-300"
+                      >
+                        {opt?.distributed_number?.toLocaleString() ?? "-"}
+                      </Typography>
+                    </Grid>
+                    <Grid container className="gap-2 items-center">
+                      <CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
+                      <Typography variant="body2" className="font-medium">
+                        پلاک های باقیمانده:
+                      </Typography>
+                      <Typography
+                        variant="body2"
+                        className="text-gray-700 dark:text-gray-300"
+                      >
+                        {opt?.remaining_number?.toLocaleString() ?? "-"}
+                      </Typography>
+                    </Grid>
+                  </Grid>
+                ))}
+              </Grid>
+            </ShowMoreInfo>,
+            <Popover key={`popover-${item?.id}`}>
+              <Tooltip title="ویرایش توزیع" position="right">
+                <Button
+                  variant="edit"
+                  page="tag_distribution"
+                  access="Submit-Tag-Distribution"
+                  onClick={() => {
+                    openModal({
+                      title: "ویرایش توزیع",
+                      content: (
+                        <DistributeFromDistribution
+                          getData={handleUpdate}
+                          item={item}
+                          isEdit
+                          parentDistributions={data?.distributions}
+                        />
+                      ),
+                    });
+                  }}
+                />
+              </Tooltip>
+            </Popover>,
+          ];
+        },
+      );
+      setChildTableData(formattedData);
+    } else {
+      setChildTableData([]);
+    }
+  }, [childData, childTableInfo]);
+
   const dist = data?.distributions;
 
   return (
@@ -145,6 +308,28 @@ export default function TagDistribtutionDetails() {
           ]}
         />
       </Grid>
+
+      <Table
+        className="mt-2"
+        onChange={setChildTableInfo}
+        count={childData?.count || 0}
+        isPaginated
+        title="توزیع های مجدد"
+        columns={[
+          "ردیف",
+          "شناسه توزیع",
+          "تاریخ ثبت",
+          "توزیع کننده",
+          "دریافت کننده",
+          "تعداد کل پلاک",
+          "پلاک های توزیع شده",
+          "پلاک های باقیمانده",
+          "نوع توزیع",
+          "جزئیات توزیع",
+          "عملیات",
+        ]}
+        rows={childTableData}
+      />
     </Grid>
   );
 }

src/partials/tagging/DistributeFromDistribution.tsx

@@ -27,7 +27,12 @@ type ParentDistItem = {
   label?: string;
 };
 
-export const DistributeFromDistribution = ({ item, getData }: any) => {
+export const DistributeFromDistribution = ({
+  item,
+  getData,
+  isEdit,
+  parentDistributions,
+}: any) => {
   const showToast = useToast();
   const { closeModal } = useModalStore();
 
@@ -54,12 +59,12 @@ export const DistributeFromDistribution = ({ item, getData }: any) => {
     api: `/tag/web/api/v1/tag_distribution_batch/${item?.id}/`,
     method: "get",
     queryKey: ["tagDistributionBatchDetail", item?.id],
-    enabled: !!item?.id,
+    enabled: !!item?.id && !isEdit,
   });
 
   const mutation = useApiMutation({
-    api: `/tag/web/api/v1/tag_distribution/${item?.id}/distribute_distribution/`,
+    api: `/tag/web/api/v1/tag_distribution/${item?.id}/${isEdit ? "edit_" : ""}distribute_distribution/`,
-    method: "post",
+    method: isEdit ? "put" : "post",
   });
 
   const { data: speciesData } = useApiRequest({
@@ -70,9 +75,11 @@ export const DistributeFromDistribution = ({ item, getData }: any) => {
   });
 
   useEffect(() => {
-    const sourceDistributions = item?.distributions?.length
+    const sourceDistributions = isEdit
-      ? item.distributions
+      ? parentDistributions
-      : batchDetail?.distributions;
+      : item?.distributions?.length
+        ? item.distributions
+        : batchDetail?.distributions;
 
     if (!sourceDistributions?.length) {
       setDists([]);
@@ -96,9 +103,32 @@ export const DistributeFromDistribution = ({ item, getData }: any) => {
     });
 
     setDists(parentDists);
-    setCounts({});
+
-    setSelectedSpeciesKeys([]);
+    if (isEdit && item?.distributions?.length) {
-  }, [item?.distributions, batchDetail?.distributions]);
+      const defaultCounts: Record<number, number | ""> = {};
+      const defaultSpeciesKeys: (string | number)[] = [];
+
+      parentDists.forEach((pd) => {
+        const childDist = item.distributions.find(
+          (cd: any) =>
+            cd.parent_tag_distribution === pd.id ||
+            cd.species_code === pd.species_code,
+        );
+        if (childDist) {
+          defaultCounts[pd.id] = childDist.total_tag_count || 0;
+          if (!defaultSpeciesKeys.includes(pd.species_code)) {
+            defaultSpeciesKeys.push(pd.species_code);
+          }
+        }
+      });
+
+      setCounts(defaultCounts);
+      setSelectedSpeciesKeys(defaultSpeciesKeys);
+    } else {
+      setCounts({});
+      setSelectedSpeciesKeys([]);
+    }
+  }, [item?.distributions, batchDetail?.distributions, parentDistributions]);
 
   const speciesOptions = () =>
     speciesData?.results?.map((opt: any) => ({
@@ -145,7 +175,12 @@ export const DistributeFromDistribution = ({ item, getData }: any) => {
         dists: distsPayload,
       });
 
-      showToast("توزیع از توزیع با موفقیت انجام شد", "success");
+      showToast(
+        isEdit
+          ? "ویرایش توزیع با موفقیت انجام شد"
+          : "توزیع از توزیع با موفقیت انجام شد",
+        "success",
+      );
       getData();
       closeModal();
     } catch (error: any) {
@@ -188,6 +223,7 @@ export const DistributeFromDistribution = ({ item, getData }: any) => {
           control={control}
           render={() => (
             <FormApiBasedAutoComplete
+              defaultKey={item?.assigned_org?.id}
               title="انتخاب سازمان (دریافت‌کننده)"
               api={`auth/api/v1/organization/organizations_by_province?exclude=PSP&province=${item?.assigner_org?.province}`}
               keyField="id"