add: tags filter

src/Pages/Tags.tsx

@@ -10,6 +10,7 @@ import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButt
 import { TagDetails } from "../partials/tagging/TagDetails";
 import { useParams } from "@tanstack/react-router";
 import { TableButton } from "../components/TableButton/TableButton";
+import AutoComplete from "../components/AutoComplete/AutoComplete";
 
 const speciesMap: Record<number, string> = {
   1: "گاو",
@@ -19,18 +20,26 @@ const speciesMap: Record<number, string> = {
   5: "بز",
 };
 
+const statusOptions = [
+  { key: "F", value: "آزاد" },
+  { key: "A", value: "پلاک شده" },
+  { key: "R", value: "رزرو" },
+];
+
 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 [selectedStatus, setSelectedStatus] = useState<(string | number)[]>([]);
 
   const { data: tagsData, refetch } = useApiRequest({
     api: `/tag/web/api/v1/tag/${id ? id + "/tags_by_batch" : ""}`,
     method: "get",
-    queryKey: ["tagsList", tableInfo],
+    queryKey: ["tagsList", tableInfo, selectedStatus],
     params: {
       ...tableInfo,
+      status: selectedStatus.length ? selectedStatus[0] : undefined,
     },
   });
 
@@ -236,6 +245,17 @@ export default function Tags() {
         </Grid>
       )}
 
+      <Grid container className="items-center gap-2">
+        <Grid>
+          <AutoComplete
+            data={statusOptions}
+            selectedKeys={selectedStatus}
+            onChange={setSelectedStatus}
+            title="فیلتر پلاک ها"
+          />
+        </Grid>
+      </Grid>
+
       <Table
         className="mt-2"
         onChange={setTableInfo}