add: livestock active state filter

src/Pages/LiveStocks.tsx

@@ -11,21 +11,37 @@ import Button from "../components/Button/Button";
 import { LiveStockAddLiveStock } from "../partials/live-stock/LiveStockAddLiveStock";
 import { useDrawerStore } from "../context/zustand-store/appStore";
 import { CheckCircleIcon, XCircleIcon } from "@heroicons/react/24/outline";
+import AutoComplete from "../components/AutoComplete/AutoComplete";
 
 export default function LiveStocks() {
   const [pagesInfo, setPagesInfo] = useState({ page: 1, page_size: 10 });
   const [pagesTableData, setPagesTableData] = useState([]);
+  const [selectedStatusKeys, setSelectedStatusKeys] = useState<
+    (string | number)[]
+  >([]);
 
   const { openDrawer } = useDrawerStore();
 
+  const statusItems = [
+    { key: "", value: "همه" },
+    { key: "true", value: "فعال" },
+    { key: "false", value: "غیرفعال" },
+  ];
+
   const { herdid, name } = useParams({ strict: false });
+
+  const activeParam =
+    selectedStatusKeys.length && selectedStatusKeys[0] !== ""
+      ? { active: selectedStatusKeys[0] }
+      : {};
+
   const { data: pagesData, refetch } = useApiRequest({
     api: herdid
       ? `herd/web/api/v1/herd/${herdid}/live_stocks/`
       : "/livestock/web/api/v1/livestock/",
     method: "get",
-    params: pagesInfo,
+    params: { ...pagesInfo, ...activeParam },
-    queryKey: ["LiveStockFarmers", pagesInfo],
+    queryKey: ["LiveStockFarmers", pagesInfo, selectedStatusKeys],
   });
 
   useEffect(() => {
@@ -91,6 +107,18 @@ export default function LiveStocks() {
 
   return (
     <Grid container column>
+      <Grid container className="items-center gap-2">
+        <Grid>
+          <AutoComplete
+            inPage
+            size="small"
+            data={statusItems}
+            selectedKeys={selectedStatusKeys}
+            onChange={setSelectedStatusKeys}
+            title="فیلتر وضعیت"
+          />
+        </Grid>
+      </Grid>
       <Table
         className="mt-2"
         onChange={(e) => {