update: tag distribution details

src/Pages/TagDistributionDetails.tsx

@@ -1,12 +1,22 @@
-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 { 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";
 
+const speciesMap: Record<number, string> = {
+  1: "گاو",
+  2: "گاومیش",
+  3: "شتر",
+  4: "گوسفند",
+  5: "بز",
+};
+
 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}/`,
@@ -15,42 +25,126 @@ export default function TagDistribtutionDetails() {
     enabled: !!id,
   });
 
-  useEffect(() => {
+  const dist = data?.distributions;
-    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">
+    <Grid container column className="gap-4 mt-2">
+      <Grid isDashboard>
         <Table
-        title="جزئیات توزیع پلاک"
+          isDashboard
+          title="مشخصات توزیع پلاک"
           noSearch
           noPagination
           columns={[
-          "ردیف",
             "شناسه توزیع",
-          "شناسه پلاک",
+            "تاریخ ثبت",
+            "توزیع کننده",
+            "دریافت کننده",
+            "تعداد کل پلاک",
+            "پلاک های توزیع شده",
+            "پلاک های باقیمانده",
             "نوع توزیع",
-          "کد گونه",
+            "جزئیات توزیع",
-          "تعداد کل پلاک ها",
+          ]}
-          "تعداد توزیع شده",
+          rows={[
-          "تعداد باقیمانده",
+            [
-          "بازه سریال",
+              data?.dist_batch_identity ?? "-",
+              `${formatJustDate(data?.create_date) ?? "-"} (${
+                formatJustDate(data?.create_date)
+                  ? (formatJustTime(data?.create_date) ?? "-")
+                  : "-"
+              })`,
+              data?.assigner_org?.name ?? "-",
+              data?.assigned_org?.name ?? "-",
+              data?.total_tag_count?.toLocaleString() ?? "-",
+              data?.total_distributed_tag_count?.toLocaleString() ?? "-",
+              data?.remaining_tag_count?.toLocaleString() ?? "-",
+              data?.distribution_type === "batch"
+                ? "توزیع گروهی"
+                : "توزیع تصادفی",
+              <ShowMoreInfo key={data?.id} title="جزئیات توزیع">
+                <Grid container column className="gap-4 w-full">
+                  {dist?.map((opt: any, index: number) => (
+                    <Grid
+                      key={index}
+                      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>
+
+                      {data?.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>,
+            ],
           ]}
-        rows={tableData}
         />
       </Grid>
+    </Grid>
   );
 }