fix group field to read only

src/pages/master/wallet/blocks/EditDialog.tsx

@@ -52,13 +52,13 @@ const EditDialog = () => {
     name: string;
     description: string;
     status: string;
-    group: string[];
+    group: string;
     currency_id: string;
   } = {
     name: '',
     description: '',
     status: '',
-    group: [],
+    group: '',
     currency_id: ''
   };
   const [formField, setFormField] = useState(initialState);
@@ -70,26 +70,6 @@ const EditDialog = () => {
     setAlert({ show: false, message: '' });
   };
 
-  const handleGroupChange = (groupId: string) => {
-    setFormField((prevState) => {
-      const isSelected = prevState.group.includes(groupId);
-
-      if (isSelected) {
-        // Remove the group if already selected
-        return {
-          ...prevState,
-          group: prevState.group.filter((id) => id !== groupId)
-        };
-      } else {
-        // Add the group if not selected
-        return {
-          ...prevState,
-          group: [...prevState.group, groupId]
-        };
-      }
-    });
-  };
-
   const doUpdateWallet = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -118,7 +98,7 @@ const EditDialog = () => {
       formField.name.trim() === '' ||
       formField.description.trim() === '' ||
       formField.status.trim() === '' ||
-      formField.currency_id.trim() === '' ||
+      formField.currency_id === '' ||
       formField.group.length === 0
     ) {
       setAlert({ show: true, message: 'Please fill in all required fields.' });
@@ -126,7 +106,7 @@ const EditDialog = () => {
     }
 
     console.log(formField);
-    doUpdateWallet(e);
+    // doUpdateWallet(e);
     setAlert({ show: false, message: '' });
   };
 
@@ -143,8 +123,8 @@ const EditDialog = () => {
         description: response?.data.description,
         status: response?.data.status,
         currency_id: response?.data.currency_id,
-        groups: Array.isArray(response?.data.groups)
+        group: Array.isArray(response?.data.group)
-          ? response?.data.group.map((group: any) => group.id)
+          ? response?.data.group.map((target: any) => target.name)
           : []
       }));
     }
@@ -300,19 +280,7 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Groups<span className="text-red-500">*</span>
                     </label>
-                    <div className="flex flex-wrap gap-3">
+                    <Input type="text" value={formField.group} readOnly />
-                      {groups.map((group) => (
-                        <label key={group.id} className="inline-flex items-center">
-                          <input
-                            type="checkbox"
-                            className="h-4 w-4"
-                            checked={formField.group?.includes(group.id)}
-                            onChange={() => handleGroupChange(group.id)}
-                          />
-                          <span className="ml-2">{group.name}</span>
-                        </label>
-                      ))}
-                    </div>
                   </div>
                 </div>