add: organization type filter

src/Pages/Organizations.tsx

@@ -6,12 +6,12 @@ import { OrganizationsTypes } from "../partials/management/OrganizationsTypes";
 
 export default function Organizations() {
   const tabItems = [
-    { label: "سازمان ها" },
     {
       label: "نهاد",
       page: "organizations",
       access: "Show-Organization-Type",
     },
+    { label: "سازمان ها" },
   ];
 
   const [selectedTab, setSelectedTab] = useState<number>(0);
@@ -22,7 +22,7 @@ export default function Organizations() {
   return (
     <Grid container column className="gap-2">
       <Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
-      {selectedTab === 0 ? <OrganizationsList /> : <OrganizationsTypes />}
+      {selectedTab === 0 ? <OrganizationsTypes /> : <OrganizationsList />}
     </Grid>
   );
 }

src/partials/management/OrganizationsList.tsx

@@ -3,6 +3,7 @@ import { Grid } from "../../components/Grid/Grid";
 import Button from "../../components/Button/Button";
 import { AddOrganization } from "./AddOrganization";
 import AutoComplete from "../../components/AutoComplete/AutoComplete";
+import { FormApiBasedAutoComplete } from "../../components/FormItems/FormApiBasedAutoComplete";
 import Table from "../../components/Table/Table";
 import { useModalStore } from "../../context/zustand-store/appStore";
 import { useApiRequest } from "../../utils/useApiRequest";
@@ -19,6 +20,9 @@ export const OrganizationsList = () => {
   const [selectedProvinceKeys, setSelectedProvinceKeys] = useState<
     (string | number)[]
   >([]);
+  const [selectedOrganizationType, setSelectedOrganizationType] = useState<
+    string | number
+  >("");
   const [params, setParams] = useState({ page: 1, page_size: 10 });
   const [tableData, setTableData] = useState([]);
   const { profile } = useUserProfileStore();
@@ -32,11 +36,16 @@ export const OrganizationsList = () => {
 
   const { data: apiData, refetch } = useApiRequest({
     api: selectedProvinceKeys?.length
-      ? `/auth/api/v1/organization/organizations_by_province?province=${selectedProvinceKeys[0]}`
-      : "/auth/api/v1/organization/",
+      ? `/auth/api/v1/organization/organizations_by_province?province=${selectedProvinceKeys[0]}${selectedOrganizationType ? `&org_type=${selectedOrganizationType}` : ""}`
+      : `/auth/api/v1/organization/${selectedOrganizationType ? `?org_type=${selectedOrganizationType}` : ""}`,
     method: "get",
     params: params,
-    queryKey: ["organizations", params, selectedProvinceKeys],
+    queryKey: [
+      "organizations",
+      params,
+      selectedProvinceKeys,
+      selectedOrganizationType,
+    ],
   });
 
   useEffect(() => {
@@ -159,6 +168,16 @@ export const OrganizationsList = () => {
             ایجاد سازمان
           </Button>
         </Grid>
+        <Grid>
+          <FormApiBasedAutoComplete
+            size="small"
+            title="فیلتر نهاد"
+            api={`auth/api/v1/organization-type`}
+            keyField="id"
+            valueField="name"
+            onChange={(r) => setSelectedOrganizationType(r)}
+          />
+        </Grid>
         {profile?.organization?.type?.org_type_field === "CO" && (
           <Grid>
             <AutoComplete