feat: tags page

src/Pages/Tagging.tsx

@@ -6,17 +6,19 @@ import Button from "../components/Button/Button";
 import { useModalStore } from "../context/zustand-store/appStore";
 import { Popover } from "../components/PopOver/PopOver";
 import { Tooltip } from "../components/Tooltip/Tooltip";
-import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
-import { TagDetails } from "../partials/tagging/TagDetails";
 import { SubmitNewTags } from "../partials/tagging/SubmitNewTags";
+import { useNavigate } from "@tanstack/react-router";
+import { TAGS } from "../routes/paths";
+import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
 
 export default function Tagging() {
   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/",
+    api: "/tag/web/api/v1/tag_batch/",
     method: "get",
     queryKey: ["tagsList", tableInfo],
     params: {
@@ -42,7 +44,6 @@ export default function Tagging() {
           tableInfo.page === 1
             ? index + 1
             : index + tableInfo.page_size * (tableInfo.page - 1) + 1,
-          item?.tag_code || "-",
           item?.organization?.name || "بدون سازمان",
           item?.species_code === 1
             ? "گاو"
@@ -55,40 +56,39 @@ export default function Tagging() {
             : item?.species_code === 5
             ? "بز"
             : "نامشخص",
-          item?.status === "F"
-            ? "آزاد"
-            : item?.status === "A"
-            ? "پلاک شده"
-            : item?.status === "R"
-            ? "رزرو"
-            : "-",
-          item?.ownership_code || "-",
+          item?.serial_from || "-",
+          item?.serial_to || "-",
           <Popover key={item.id}>
-            <Tooltip title="جزئیات پلاک" position="right">
+            <Tooltip title="مشاهده پلاک ها" position="right">
               <Button
                 variant="detail"
-                page="tagging"
-                access="Tag-Details"
-                disabled={item?.status === "F"}
+                page="tags"
+                access="Show-Tags-Page"
                 onClick={() => {
-                  openModal({
-                    title: "جزئیات پلاک",
-                    content: <TagDetails tagId={item.id} />,
-                    isFullSize: true,
-                  });
+                  const path =
+                    TAGS +
+                    "/" +
+                    item?.id +
+                    "/" +
+                    item?.serial_from +
+                    "/" +
+                    item?.serial_to;
+                  navigate({ to: path });
                 }}
               />
             </Tooltip>
             <DeleteButtonForPopOver
               page="tagging"
               access="Delete-Tag"
-              api={`/tag/web/api/v1/tag/${item?.id}/`}
+              api={`/tag/web/api/v1/tag_batch/${item?.id}/`}
               getData={refetch}
             />
           </Popover>,
         ];
       });
       setTagsTableData(formattedData);
+    } else {
+      setTagsTableData([]);
     }
   }, [tagsData]);
 
@@ -150,11 +150,10 @@ export default function Tagging() {
         title="پلاک کوبی"
         columns={[
           "ردیف",
-          "پلاک",
           "سازمان ثبت کننده",
           "کد گونه",
-          "وضعیت",
-          "کد مالکیت ثبتی",
+          "از بازه سریال",
+          "تا بازه سریال",
           "عملیات",
         ]}
         rows={tagsTableData}

src/Pages/Tags.tsx

@@ -0,0 +1,142 @@
+import { useEffect, useState } from "react";
+import { useApiRequest } from "../utils/useApiRequest";
+import { Grid } from "../components/Grid/Grid";
+import Table from "../components/Table/Table";
+import Button from "../components/Button/Button";
+import { useModalStore } from "../context/zustand-store/appStore";
+import { Popover } from "../components/PopOver/PopOver";
+import { Tooltip } from "../components/Tooltip/Tooltip";
+import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
+import { TagDetails } from "../partials/tagging/TagDetails";
+import { useParams } from "@tanstack/react-router";
+
+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",
+    queryKey: ["tagsList", tableInfo],
+    params: {
+      ...tableInfo,
+    },
+  });
+
+  const { data: tagDashboardData } = useApiRequest({
+    api: "/tag/web/api/v1/tag/tag_dashboard/",
+    method: "get",
+    queryKey: ["tagDashboard"],
+  });
+
+  useEffect(() => {
+    if (tagsData?.results) {
+      const formattedData = tagsData.results.map((item: any, index: number) => {
+        return [
+          tableInfo.page === 1
+            ? index + 1
+            : index + tableInfo.page_size * (tableInfo.page - 1) + 1,
+          item?.tag_code || "-",
+          item?.organization?.name || "بدون سازمان",
+          item?.species_code === 1
+            ? "گاو"
+            : item?.species_code === 2
+            ? "گاومیش"
+            : item?.species_code === 3
+            ? "شتر"
+            : item?.species_code === 4
+            ? "گوسفند"
+            : item?.species_code === 5
+            ? "بز"
+            : "نامشخص",
+          item?.status === "F"
+            ? "آزاد"
+            : item?.status === "A"
+            ? "پلاک شده"
+            : item?.status === "R"
+            ? "رزرو"
+            : "-",
+          item?.ownership_code || "-",
+          <Popover key={item.id}>
+            <Tooltip title="جزئیات پلاک" position="right">
+              <Button
+                variant="detail"
+                page="tagging"
+                access="Tag-Details"
+                disabled={item?.status === "F"}
+                onClick={() => {
+                  openModal({
+                    title: "جزئیات پلاک",
+                    content: <TagDetails tagId={item.id} />,
+                    isFullSize: true,
+                  });
+                }}
+              />
+            </Tooltip>
+            <DeleteButtonForPopOver
+              page="tagging"
+              access="Delete-Tag"
+              api={`/tag/web/api/v1/tag/${item?.id}/`}
+              getData={refetch}
+            />
+          </Popover>,
+        ];
+      });
+      setTagsTableData(formattedData);
+    }
+  }, [tagsData]);
+
+  return (
+    <Grid container column className="gap-4 mt-2">
+      <Grid isDashboard>
+        <Table
+          isDashboard
+          title="خلاصه اطلاعات"
+          noPagination
+          noSearch
+          columns={[
+            "تعداد کل",
+            "تعداد پلاک های آزاد",
+            "تعداد پلاک شده",
+            "گاو",
+            "گاومیش",
+            "شتر",
+            "گوسفند",
+            "بز",
+          ]}
+          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,
+            ],
+          ]}
+        />
+      </Grid>
+
+      <Table
+        className="mt-2"
+        onChange={setTableInfo}
+        count={tagsData?.count || 0}
+        isPaginated
+        title={!id ? "لیست پلاک" : "لیست پلاک های بازه " + from + " تا " + to}
+        columns={[
+          "ردیف",
+          "پلاک",
+          "سازمان ثبت کننده",
+          "کد گونه",
+          "وضعیت",
+          "کد مالکیت ثبتی",
+          "عملیات",
+        ]}
+        rows={tagsTableData}
+      />
+    </Grid>
+  );
+}

src/routes/paths.ts

@@ -52,3 +52,5 @@ export const UNITS_SETTINGS = "/unit-settings";
 
 //TAGGING
 export const TAGGING = "/tagging";
+export const TAGS = "/tags";
+export const TAGS_BATCH = "/tags/$id/$from/$to";

src/utils/getCategoryParameters.ts

@@ -23,6 +23,7 @@ import Cooperatives from "../Pages/Cooperatives";
 import CooperativeRanchers from "../Pages/CooperativeRanchers";
 import SettingsOfUnits from "../Pages/SettingsOfUnits";
 import Tagging from "../Pages/Tagging";
+import Tags from "../Pages/Tags";
 
 export const managementCategoryItems = [
   {
@@ -171,6 +172,16 @@ export const taggingCategoryItems = [
     path: R.TAGGING,
     component: Tagging,
   },
+  {
+    name: "tags",
+    path: R.TAGS,
+    component: Tags,
+  },
+  {
+    name: "tags",
+    path: R.TAGS_BATCH,
+    component: Tags,
+  },
 ];
 
 export const posCategoryItems = [

src/utils/getFaPermissions.ts

@@ -97,6 +97,9 @@ export function getFaPermissions(permission: string) {
     case "tagging":
       faPermission = "پلاک کوبی";
       break;
+    case "tags":
+      faPermission = "پلاک ها";
+      break;
     default:
       break;
   }