From aee720312511d3049fd41e3507252ac30b98693e Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Tue, 25 Feb 2025 10:41:33 +0700
Subject: [PATCH] refactor: form access type

---
 .../access/access-type/blocks/AddDialog.tsx   | 173 ++----------------
 .../hooks/ManageAccessTypeContext.tsx         |  30 +--
 2 files changed, 24 insertions(+), 179 deletions(-)

diff --git a/src/pages/access/access-type/blocks/AddDialog.tsx b/src/pages/access/access-type/blocks/AddDialog.tsx
index 19189e0..eaa6d16 100644
--- a/src/pages/access/access-type/blocks/AddDialog.tsx
+++ b/src/pages/access/access-type/blocks/AddDialog.tsx
@@ -21,22 +21,11 @@ import {
 } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
 
-interface CreateTransferTypeParams {
-  transfer_type_name: string;
-  description: string;
-  from_account: string;
-  to_account: string;
-  minimal_amount: number;
-  maximum_amount: number;
-  otp_threshold: number;
-  maximum_transaction_perDay: number;
-}
-
 const API_URL = apiConfig.service_dashboard;
 
 const AddDialog = () => {
   const parentRef = useRef<any | null>(null);
-  const { showAddDialog, handleAddDialog, accounts } = useManageAccessTypeContext();
+  const { showAddDialog, handleAddDialog, accessTypes } = useManageAccessTypeContext();
   const { reload } = useDataGrid();
   const { PostData, PutData } = useCallApi();
   const [alert, setAlert] = useState({
@@ -45,14 +34,9 @@ const AddDialog = () => {
   });
 
   const initialState = {
-    transfer_type_name: '',
+    name: '',
     description: '',
-    from_account: '',
-    to_account: '',
-    minimal_amount: 0,
-    maximum_amount: 0,
-    otp_threshold: 0,
-    maximum_transaction_perDay: 0
+    internal_name: ''
   };
 
   const [formField, setFormField] = useState(initialState);
@@ -64,17 +48,11 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     // setIsSubmitting(true);
-    const payload = {
-      transfer_type_name: formField.transfer_type_name,
-      description: formField.description,
-      from_account: formField.from_account,
-      to_account: formField.to_account,
-      minimal_amount: formField.minimal_amount,
-      maximum_amount: formField.maximum_amount,
-      otp_threshold: formField.otp_threshold,
-      maximum_transaction_perDay: formField.maximum_transaction_perDay
-    };
-    console.log(payload);
+    console.log(formField);
+  };
+
+  const handleReset = () => {
+    setFormField(initialState);
   };
 
   return (
@@ -84,7 +62,7 @@ const AddDialog = () => {
           <div className="flex items-center justify-between flex-wrap grow">
             <div className="flex flex-col justify-center">
               <h1 className="text-xl font-semibold leading-none text-gray-900">
-                Create Transfer Type
+                Create Access Type
               </h1>
               <div className="flex items-center gap-2 text-sm font-normal text-gray-700"></div>
             </div>
@@ -110,16 +88,14 @@ const AddDialog = () => {
               <div className="card-body grid gap-5 p-0">
                 <div className="w-full">
                   <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">
-                      Transfer Type Name
-                    </label>
+                    <label className="form-label flex items-center gap-1 max-w-56">Name</label>
                     <Input
                       className="input"
                       type="text"
                       autoComplete="off"
-                      value={formField.transfer_type_name}
+                      value={formField.name}
                       onChange={({ target }) =>
-                        setFormField((prev) => ({ ...prev, transfer_type_name: target.value }))
+                        setFormField((prev) => ({ ...prev, name: target.value }))
                       }
                     />
                   </div>
@@ -142,140 +118,25 @@ const AddDialog = () => {
                   </div>
                 </div>
 
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">From Account</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.from_account}
-                        onValueChange={(target) =>
-                          setFormField((prev) => ({ ...prev, from_account: target }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {accounts.map((account, idx) => (
-                            <SelectItem value={account.name} key={account.id}>
-                              {account.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <div className="flex items-center flex-wrap gap-2.5">
-                    <label className="form-label max-w-56">To Account</label>
-
-                    <div className="grow">
-                      <Select
-                        value={formField.to_account}
-                        onValueChange={(target) =>
-                          setFormField((prev) => ({ ...prev, to_account: target }))
-                        }
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {accounts.map((account, idx) => (
-                            <SelectItem value={account.name} key={account.id}>
-                              {account.name}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                </div>
-
                 <div className="w-full">
                   <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">
-                      Minimal Amount
+                      Internal Name
                     </label>
                     <Input
                       className="input"
-                      type="number"
+                      type="text"
                       autoComplete="off"
-                      value={formField.minimal_amount}
+                      value={formField.internal_name}
                       onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          minimal_amount: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <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">
-                      Maximum Amount
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.maximum_amount}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_amount: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <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">
-                      OTP Threshold
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.otp_threshold}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          otp_threshold: Number(target.value)
-                        }))
-                      }
-                    />
-                  </div>
-                </div>
-
-                <div className="w-full">
-                  <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">
-                      Maximum Transaction / day
-                    </label>
-                    <Input
-                      className="input"
-                      type="number"
-                      autoComplete="off"
-                      value={formField.maximum_transaction_perDay}
-                      onChange={({ target }) =>
-                        setFormField((prev) => ({
-                          ...prev,
-                          maximum_transaction_perDay: Number(target.value)
-                        }))
+                        setFormField((prev) => ({ ...prev, internal_name: target.value }))
                       }
                     />
                   </div>
                 </div>
 
                 <div className="flex justify-end pt-2.5 gap-5">
-                  <Button variant={'outline'} type="reset">
+                  <Button variant={'outline'} type="reset" onClick={handleReset}>
                     Reset
                   </Button>
                   <Button variant={'default'} type="submit">
diff --git a/src/pages/access/access-type/hooks/ManageAccessTypeContext.tsx b/src/pages/access/access-type/hooks/ManageAccessTypeContext.tsx
index 1cf9649..f0226e7 100644
--- a/src/pages/access/access-type/hooks/ManageAccessTypeContext.tsx
+++ b/src/pages/access/access-type/hooks/ManageAccessTypeContext.tsx
@@ -13,26 +13,20 @@ interface SelectedUser {
   description: string;
 }
 
-interface AccountProps {
+interface AccessTypeProps {
   id: string;
   name: string;
+  internal_name: string;
+  description: string;
 }
 
-const accounts: string[] = [
-  'eMoney Account',
-  'Topup Account',
-  'Merchant Account',
-  'Deposit Account',
-  'Cash out/in'
-];
-
 interface ContextProps {
   showEditDialog: boolean;
   handleEditDialog: (show: boolean, selected_user: string | null) => void;
   showAddDialog: boolean;
   handleAddDialog: (show: boolean) => void;
   selectedUser: string | null;
-  accounts: AccountProps[];
+  accessTypes: AccessTypeProps[];
 }
 
 const initialProps: ContextProps = {
@@ -41,7 +35,7 @@ const initialProps: ContextProps = {
   showAddDialog: false,
   handleAddDialog: () => {},
   selectedUser: null,
-  accounts: []
+  accessTypes: []
 };
 
 const ManageAccessTypeContext = createContext<ContextProps>(initialProps);
@@ -51,19 +45,9 @@ const ManageAccessTypeContextProvider = ({ children }: { children: React.ReactNo
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showAddDialog, setShowAddDialog] = useState(false);
   const [selectedUser, setSelectedUser] = useState<string | null>(null);
-  const [accounts, setAccount] = useState<AccountProps[]>([]);
+  const [accessTypes, setAccessTypes] = useState<AccessTypeProps[]>([]);
   const { GetData } = useCallApi();
 
-  useEffect(() => {
-    setAccount([
-      { id: '1', name: 'eMoney Account' },
-      { id: '2', name: 'Topup Account' },
-      { id: '3', name: 'Merchant Account' },
-      { id: '4', name: 'Deposit Account' },
-      { id: '5', name: 'Cash in/out Account' }
-    ]);
-  }, []);
-
   const handleEditDialog = useCallback((show: boolean, selected_user: string | null) => {
     setSelectedUser(show ? selected_user : null);
     setShowEditDialog(show);
@@ -155,7 +139,7 @@ const ManageAccessTypeContextProvider = ({ children }: { children: React.ReactNo
           showAddDialog,
           handleAddDialog,
           selectedUser,
-          accounts
+          accessTypes
         }}
       >
         <Toaster expand visibleToasts={9} duration={3000} />