feat: select province while creating user

src/partials/users/SubmitNewUser.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useEffect, useRef } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
@@ -33,12 +33,15 @@ interface SubmitNewUserProps {
   item?: UserItem | null;
 }
 
-const getSchema = (isEdit: boolean) =>
+const getSchema = (isEdit: boolean, isAdmin: boolean) =>
   z.object({
     mobile: zValidateMobile("موبایل"),
     password: isEdit ? z.string().optional() : zValidateString("کلمه عبور"),
     fullname: zValidateString("نام کامل"),
     permissions: zValidateAutoComplete("دسترسی‌ها"),
+    province: isAdmin
+      ? zValidateAutoComplete("استان")
+      : z.array(z.union([z.string(), z.number()])).optional(),
     city: zValidateAutoComplete("شهر"),
   });
 
@@ -52,12 +55,17 @@ export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({
   const showToast = useToast();
   const { closeDrawer } = useDrawerStore();
   const isEdit = !!item;
-  const schema = useMemo(() => getSchema(isEdit), [isEdit]);
+  const hasAdminPermission = profile?.permissions?.includes("admin");
+  const schema = useMemo(
+    () => getSchema(isEdit, !!hasAdminPermission),
+    [isEdit, hasAdminPermission],
+  );
 
   const {
     control,
     handleSubmit,
     setValue,
+    watch,
     formState: { errors, isSubmitting },
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
@@ -67,6 +75,7 @@ export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({
           password: "",
           fullname: item.fullname ?? "",
           permissions: Array.isArray(item.permissions) ? item.permissions : [],
+          province: item.province ? [item.province] : [],
           city: item.city ? [item.city] : [],
         }
       : {
@@ -74,6 +83,7 @@ export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({
           password: "",
           fullname: "",
           permissions: [],
+          province: [],
           city: [],
         },
   });
@@ -88,14 +98,32 @@ export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({
     method: "put",
   });
 
+  const watchedProvince = watch("province");
+  const selectedProvince = hasAdminPermission
+    ? Array.isArray(watchedProvince) && watchedProvince.length > 0
+      ? String(watchedProvince[0])
+      : ""
+    : profile?.province || "";
+
+  const prevProvinceRef = useRef<string>(selectedProvince);
+  useEffect(() => {
+    if (hasAdminPermission && prevProvinceRef.current !== selectedProvince) {
+      setValue("city", []);
+      prevProvinceRef.current = selectedProvince;
+    }
+  }, [selectedProvince, hasAdminPermission, setValue]);
+
+  const provinceOptions = [
+    { key: "hamedan", value: "همدان" },
+    { key: "markazi", value: "مرکزی" },
+  ];
+
   const cityOptions = useMemo(() => {
-    return getCitiesOfProvinceInfo(profile?.province || "").map((item) => ({
+    return getCitiesOfProvinceInfo(selectedProvince).map((item) => ({
       key: item.en,
       value: item.fa,
     }));
-  }, [profile?.province]);
-
-  const hasAdminPermission = profile?.permissions?.includes("admin");
+  }, [selectedProvince]);
 
   const permissionOptions = useMemo(() => {
     const options = [
@@ -115,7 +143,11 @@ export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({
         fullname: data.fullname,
         pic: "",
         permissions: data.permissions as string[],
-        province: profile?.province,
+        province: hasAdminPermission
+          ? Array.isArray(data.province) && data.province.length > 0
+            ? String(data.province[0])
+            : ""
+          : profile?.province,
         city:
           Array.isArray(data.city) && data.city.length > 0
             ? String(data.city[0])
@@ -202,6 +234,31 @@ export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({
           )}
         />
 
+        {hasAdminPermission && (
+          <div className="w-full">
+            <Controller
+              name="province"
+              control={control}
+              render={({ field }) => (
+                <AutoComplete
+                  data={provinceOptions}
+                  selectedKeys={
+                    (Array.isArray(field.value) ? field.value : []) as (
+                      | string
+                      | number
+                    )[]
+                  }
+                  onChange={(keys) => setValue("province", keys as any)}
+                  title="استان را انتخاب کنید"
+                  error={!!errors.province}
+                  helperText={errors.province?.message}
+                  multiselect={false}
+                />
+              )}
+            />
+          </div>
+        )}
+
         <div className="w-full">
           <Controller
             name="city"