fix editdialog transfertype

src/pages/transfer/transfertype/blocks/EditDialog.tsx

@@ -69,8 +69,7 @@ const EditDialog = () => {
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
 
-    const [isLoadingWallets, setIsLoadingWallets] = useState(false);
+  const [isLoadingWallets, setIsLoadingWallets] = useState(false);
-  
 
   const initialState: {
     name: string;
@@ -122,6 +121,10 @@ const EditDialog = () => {
           permission: prevState.permission.filter((id) => id !== groupId)
         };
       } else {
+        // Hapus error permission ketika user memilih group
+        if (errors.permission && prevState.permission.length === 0) {
+          setErrors((prev) => ({ ...prev, permission: '' }));
+        }
         return {
           ...prevState,
           permission: [...prevState.permission, groupId]
@@ -138,7 +141,8 @@ const EditDialog = () => {
       { key: 'wallet_destination', label: 'To Account' },
       { key: 'status', label: 'Status' },
       { key: 'status_approval', label: 'Status Approval' },
-      { key: 'status_kind', label: 'Status Kind' }
+      { key: 'status_kind', label: 'Status Kind' },
+      { key: 'permission', label: 'Group' }
     ];
 
     const newErrors: Record<string, string> = {};
@@ -146,9 +150,11 @@ const EditDialog = () => {
 
     requiredFields.forEach(({ key, label }) => {
       if (
-        formField[key as keyof typeof formField] === '' ||
+        key === 'permission'
-        formField[key as keyof typeof formField] === null ||
+          ? !formField[key] || formField[key].length === 0
-        formField[key as keyof typeof formField] === undefined
+          : formField[key as keyof typeof formField] === '' ||
+            formField[key as keyof typeof formField] === null ||
+            formField[key as keyof typeof formField] === undefined
       ) {
         newErrors[key] = `${label} is required`;
         // Show toast for each required field
@@ -228,9 +234,7 @@ const EditDialog = () => {
         return false;
       }
     } catch (error) {
-      toast.error(
+      toast.error(error instanceof Error ? error.message : 'Failed to Update Transfer Type');
-        error instanceof Error ? error.message : 'Failed to Update Transfer Type'
-      )
       return false;
     }
   }, [formField, selectedTransferType]);
@@ -369,36 +373,35 @@ const EditDialog = () => {
     }
   }, [showEditDialog]);
   const renderSelectWithLoading = (
-      value: string,
+    value: string,
-      onChangeHandler: (value: string) => void,
+    onChangeHandler: (value: string) => void,
-      options: { id: string; name: string }[] | null,
+    options: { id: string; name: string }[] | null,
-      placeholder: string,
+    placeholder: string,
-      isLoading: boolean
+    isLoading: boolean
-    ) => {
+  ) => {
-      return (
+    return (
-        <Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
+      <Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
-          <SelectTrigger>
+        <SelectTrigger>
-            {isLoading ? (
+          {isLoading ? (
-              <div className="flex items-center">
+            <div className="flex items-center">
-                <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
+              <div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
-                <span className="ml-2">Loading...</span>
+              <span className="ml-2">Loading...</span>
-              </div>
+            </div>
-            ) : (
+          ) : (
-              <SelectValue placeholder={placeholder} />
+            <SelectValue placeholder={placeholder} />
-            )}
+          )}
-          </SelectTrigger>
+        </SelectTrigger>
-          <SelectContent>
+        <SelectContent>
-            {options &&
+          {options &&
-              options.map((option) => (
+            options.map((option) => (
-                <SelectItem value={option.id} key={option.id}>
+              <SelectItem value={option.id} key={option.id}>
-                  {option.name}
+                {option.name}
-                </SelectItem>
+              </SelectItem>
-              ))}
+            ))}
-          </SelectContent>
+        </SelectContent>
-        </Select>
+      </Select>
-      );
+    );
-    };
+  };
-
 
   return (
     <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
@@ -462,7 +465,7 @@ const EditDialog = () => {
                 </div>
 
                 <div className="w-full">
-                <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
+                  <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Description
                       <span className="text-red-500">*</span>
@@ -564,13 +567,13 @@ const EditDialog = () => {
                       <span className="text-red-500">*</span>
                     </label>
                     <div className="grow flex flex-col">
-                    {renderSelectWithLoading(
+                      {renderSelectWithLoading(
-                      formField.wallet_origin,
+                        formField.wallet_origin,
-                      (value) => setFormField({ ...formField, wallet_origin: value }),
+                        (value) => setFormField({ ...formField, wallet_origin: value }),
-                      wallets,
+                        wallets,
-                      'Select Wallet',
+                        'Select Wallet',
-                      isLoadingWallets
+                        isLoadingWallets
-                    )}
+                      )}
                       {errors.wallet_origin && (
                         <span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
                       )}
@@ -592,7 +595,9 @@ const EditDialog = () => {
                           setErrors((prev) => ({ ...prev, wallet_destination: '' }));
                         }}
                       >
-                        <SelectTrigger className={errors.wallet_destination ? 'border-red-500' : ''}>
+                        <SelectTrigger
+                          className={errors.wallet_destination ? 'border-red-500' : ''}
+                        >
                           <SelectValue placeholder="Select Wallet" />
                         </SelectTrigger>
                         <SelectContent>
@@ -604,7 +609,9 @@ const EditDialog = () => {
                         </SelectContent>
                       </Select>
                       {errors.wallet_destination && (
-                        <span className="text-red-500 text-xs mt-1">{errors.wallet_destination}</span>
+                        <span className="text-red-500 text-xs mt-1">
+                          {errors.wallet_destination}
+                        </span>
                       )}
                     </div>
                   </div>
@@ -759,9 +766,11 @@ const EditDialog = () => {
                         placeholder="No groups selected"
                         value={selectedPermissionNames || ''}
                         readOnly
-                        className="bg-gray-100 mb-2"
+                        className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
                       />
-
+                      {errors.permission && (
+                        <span className="text-red-500 text-xs mt-2">{errors.permission}</span>
+                      )}
                       <div className="border rounded-md p-3 max-h-48 overflow-y-auto">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
                           {groups.map((group) => (
@@ -786,11 +795,7 @@ const EditDialog = () => {
                 </div>
 
                 <div className="flex justify-end pt-2.5 gap-5">
-                  <Button 
+                  <Button variant={'outline'} type="button" onClick={() => resetForm()}>
-                    variant={'outline'} 
-                    type="button" 
-                    onClick={() => resetForm()}
-                  >
                     Reset
                   </Button>
                   <Button variant={'default'} type="submit" disabled={isSubmitting}>