add: specie filter

src/Pages/Tagging.tsx

@@ -11,6 +11,7 @@ import { useNavigate } from "@tanstack/react-router";
 import { TAGS } from "../routes/paths";
 import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
 import { TableButton } from "../components/TableButton/TableButton";
+import AutoComplete from "../components/AutoComplete/AutoComplete";
 
 const speciesMap: Record<number, string> = {
   1: "گاو",
@@ -24,12 +25,16 @@ export default function Tagging() {
   const { openModal } = useModalStore();
   const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
   const [tagsTableData, setTagsTableData] = useState<any[]>([]);
+  const [selectedSpecie, setSelectedSpecie] = useState<
+    (string | number)[] | any
+  >([]);
+
   const navigate = useNavigate();
 
   const { data: tagsData, refetch } = useApiRequest({
-    api: "/tag/web/api/v1/tag_batch/",
+    api: `/tag/web/api/v1/tag_batch/?species_code=${selectedSpecie[0]}`,
     method: "get",
-    queryKey: ["tagsList", tableInfo],
+    queryKey: ["tagsList", tableInfo, selectedSpecie],
     params: { ...tableInfo },
   });
 
@@ -114,6 +119,22 @@ export default function Tagging() {
     }
   }, [tagsData, tableInfo.page, tableInfo.page_size, refetch]);
 
+  const { data: speciesData } = useApiRequest({
+    api: "/livestock/web/api/v1/livestock_species",
+    method: "get",
+    params: { page: 1, pageSize: 1000 },
+    queryKey: ["species"],
+  });
+
+  const speciesOptions = () => {
+    return speciesData?.results?.map((opt: any) => {
+      return {
+        key: opt?.value,
+        value: opt?.name,
+      };
+    });
+  };
+
   return (
     <Grid container column className="gap-4 mt-2 rtl">
       <Grid>
@@ -231,7 +252,18 @@ export default function Tagging() {
           ]}
         />
       </Grid>
-
+      <Grid container className="items-center gap-2">
+        <Grid>
+          {speciesOptions() && (
+            <AutoComplete
+              data={speciesOptions()}
+              selectedKeys={selectedSpecie}
+              onChange={setSelectedSpecie}
+              title="گونه"
+            />
+          )}
+        </Grid>
+      </Grid>
       <Table
         className="mt-2"
         onChange={setTableInfo}