update manage wallet

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

@@ -24,21 +24,7 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
 import { RefreshCw } from 'lucide-react';
-
+import { CurrencyProps, GroupProps, initialStateWallet, validateFormsWallet } from './Types';
-interface CurrencyProps {
-  ID: string;
-  code: string;
-  name: string;
-  prefix: string;
-  status: string;
-}
-
-interface GroupProps {
-  id: string;
-  name: string;
-  description: string;
-  status: string;
-}
 
 const API_URL_WALLET = apiConfig.service_wallet;
 const API_URL_MASTER_DATA = apiConfig.service_master_data;
@@ -47,31 +33,15 @@ const AddDialog = () => {
   const { showAddDialog, handleAddDialog, selectedWallet } = useManageWalletContext();
   const { GetData, PostData } = useCallApi();
   const { reload } = useDataGrid();
-  const [alert, setAlert] = useState({
+  const [errors, setErrors] = useState<Record<string, string>>({});
-    show: false,
+  const [formField, setFormField] = useState(initialStateWallet);
-    message: ''
-  });
-  const initialState: {
-    name: string;
-    description: string;
-    status: string;
-    group: string[];
-    id_currency: string;
-  } = {
-    name: '',
-    description: '',
-    status: '',
-    group: [],
-    id_currency: ''
-  };
-  const [formField, setFormField] = useState(initialState);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
   const [groups, setGroups] = useState<GroupProps[]>([]);
 
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField(initialStateWallet);
-    setAlert({ show: false, message: '' });
+    setErrors({});
   };
 
   const handleGroupChange = (groupId: string) => {
@@ -115,8 +85,7 @@ const AddDialog = () => {
 
           doSaveLogActivity(createActivity);
         } else {
-          toast.error('Failed Create Wallet');
+          toast.error(response?.message);
-          setAlert({ show: true, message: response?.message });
         }
       } catch (error) {
         toast.error('Something went wrong, please try again.');
@@ -130,20 +99,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    if (
+    if (!validateFormsWallet(formField, setErrors)) {
-      formField.name.trim() === '' ||
-      formField.description.trim() === '' ||
-      formField.status.trim() === '' ||
-      formField.group.length === 0 ||
-      formField.id_currency.trim() === ''
-    ) {
-      setAlert({ show: true, message: 'Please fill in all required fields.' });
       return;
     }
-
+    console.log(formField);
-    // console.log(formField);
+    // doCreateWallet(e);
-    doCreateWallet(e);
-    setAlert({ show: false, message: '' });
   };
 
   const getCurrencyLists = async (sorting: any) => {
@@ -155,7 +115,6 @@ const AddDialog = () => {
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
-      // console.log('Currency: ', response?.data);
       setCurrencies(response?.data.list);
     } catch (error) {
       console.error('Error fetching currency', error);
@@ -171,13 +130,17 @@ const AddDialog = () => {
         order_field: sorting[0].id,
         order_direction: sorting[0].desc == false ? 'ASC' : 'DESC'
       });
-      // console.log('Group: ', response?.data);
       setGroups(response?.data.list);
     } catch (error) {
       console.error('Error fetching group', error);
     }
   };
 
+  const selectedGroups = groups
+    .filter((g) => formField.group.includes(g.id))
+    .map((g) => g.name)
+    .join(', ');
+
   useEffect(() => {
     getCurrencyLists([{ id: 'name', desc: false }]);
     getGroupLists([{ id: 'name', desc: false }]);
@@ -198,12 +161,6 @@ const AddDialog = () => {
         </DialogHeader>
         <DialogBody className="scrollable">
           <div className="flex flex-col">
-            {alert.show && (
-              <Alert variant="danger">
-                <h3>{alert.message}</h3>
-              </Alert>
-            )}
-
             <form onSubmit={handleSubmit}>
               <div className="card-body grid gap-5">
                 <div className="w-full">
@@ -212,12 +169,17 @@ const AddDialog = () => {
                       Wallet Name<span className="text-red-500">*</span>
                     </label>
                     <Input
+                      className={errors.name ? 'border-red-500' : ''}
                       type="text"
                       value={formField.name}
-                      onChange={(e) => setFormField({ ...formField, name: e.target.value })}
+                      onChange={(e) => {
+                        setFormField({ ...formField, name: e.target.value });
+                        setErrors({ ...errors, name: '' });
+                      }}
                       placeholder="Wallet Name"
                     />
                   </div>
+                  {errors.name && <div className="text-red-500 text-xs mt-1">{errors.name}</div>}
                 </div>
 
                 <div className="w-full">
@@ -226,12 +188,19 @@ const AddDialog = () => {
                       Description<span className="text-red-500">*</span>
                     </label>
                     <Input
+                      className={errors.description ? 'border-red-500' : ''}
                       type="text"
                       value={formField.description}
-                      onChange={(e) => setFormField({ ...formField, description: e.target.value })}
+                      onChange={(e) => {
+                        setFormField({ ...formField, description: e.target.value });
+                        setErrors({ ...errors, description: '' });
+                      }}
                       placeholder="Description"
                     />
                   </div>
+                  {errors.description && (
+                    <div className="text-red-500 text-xs mt-1">{errors.description}</div>
+                  )}
                 </div>
 
                 <div className="w-full">
@@ -241,9 +210,12 @@ const AddDialog = () => {
                     </label>
                     <Select
                       value={formField.status}
-                      onValueChange={(value) => setFormField({ ...formField, status: value })}
+                      onValueChange={(value) => {
+                        setFormField({ ...formField, status: value });
+                        setErrors({ ...errors, status: '' });
+                      }}
                     >
-                      <SelectTrigger>
+                      <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
                         <SelectValue placeholder="Select Status" />
                       </SelectTrigger>
                       <SelectContent>
@@ -252,6 +224,9 @@ const AddDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
+                  {errors.status && (
+                    <div className="text-red-500 text-xs mt-1">{errors.status}</div>
+                  )}
                 </div>
 
                 <div className="w-full">
@@ -261,9 +236,12 @@ const AddDialog = () => {
                     </label>
                     <Select
                       value={formField.id_currency}
-                      onValueChange={(value) => setFormField({ ...formField, id_currency: value })}
+                      onValueChange={(value) => {
+                        setFormField({ ...formField, id_currency: value });
+                        setErrors({ ...errors, id_currency: '' });
+                      }}
                     >
-                      <SelectTrigger>
+                      <SelectTrigger className={errors.id_currency ? 'border-red-500' : ''}>
                         <SelectValue placeholder="Select Currency Type" />
                       </SelectTrigger>
                       <SelectContent>
@@ -275,6 +253,9 @@ const AddDialog = () => {
                       </SelectContent>
                     </Select>
                   </div>
+                  {errors.id_currency && (
+                    <div className="text-red-500 text-xs mt-1">{errors.id_currency}</div>
+                  )}
                 </div>
 
                 <div className="w-full">
@@ -282,21 +263,40 @@ const AddDialog = () => {
                     <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">
+                    <div className="relative w-full">
-                      {groups.map((group) => (
+                      <Input
-                        <label key={group.id} className="inline-flex items-center">
+                        type="text"
-                          <input
+                        placeholder="No groups selected"
-                            type="checkbox"
+                        value={selectedGroups || ''}
-                            className="h-4 w-4"
+                        readOnly
-                            checked={formField.group.includes(group.id)}
+                        className="bg-gray-100 mb-2"
-                            onChange={() => handleGroupChange(group.id)}
                       />
-                          <span className="ml-2">{group.name}</span>
+                      {errors.group && (
+                        <div className="text-red-500 text-xs mt-1">{errors.group}</div>
+                      )}
+
+                      <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) => (
+                            <div key={group.id} className="flex items-center space-x-2">
+                              <Checkbox
+                                id={`group-${group.id}`}
+                                checked={formField.group.includes(group.id)}
+                                onCheckedChange={() => handleGroupChange(group.id)}
+                              />
+                              <label
+                                htmlFor={`group-${group.id}`}
+                                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                              >
+                                {group.name}
                               </label>
+                            </div>
                           ))}
                         </div>
                       </div>
                     </div>
+                  </div>
+                </div>
 
                 <div className="flex justify-end gap-5">
                   <Button type="button" variant="outline" onClick={resetForm}>