Refactor code, fix UI and logic code

hotel-management/src/pages/Room/Form.tsx

@@ -24,6 +24,7 @@ import useForm from '../../hooks/useForm.ts';
 
 // Utils
 import {
+  isValidDiscount,
   isValidNumber,
   isValidString,
   skipCheck,
@@ -35,6 +36,7 @@ import { sendRequest } from '../../helpers/sendRequest.ts';
 import { STATUS_CODE } from '../../constants/statusCode.ts';
 import {
   ADD_SUCCESS,
+  DISCOUNT_FIELD_ERROR,
   EDIT_SUCCESS,
   errorMsg,
 } from '../../constants/messages.ts';
@@ -46,6 +48,7 @@ const FormBtn = styled(Button)`
   &:disabled,
   &[disabled] {
     background-color: var(--disabled-btn-color);
+    cursor: no-drop;
   }
 `;
 
@@ -134,8 +137,8 @@ const RoomForm = ({
       prop: 'price',
     }),
     discount: addValidator({ 
-      validatorFunc: isValidNumber, 
-      prop: 'discount' 
+      validatorFunc: isValidDiscount, 
+      customErrorMsg: DISCOUNT_FIELD_ERROR
     }),
     status: addValidator({
       validatorFunc: skipCheck,
@@ -305,8 +308,8 @@ const RoomForm = ({
         label="Discount"
         error={
           // prettier-ignore
-          errors.roomId && dirty.roomId
-            ? (errors.roomId as string) 
+          errors.discount && dirty.discount
+            ? (errors.discount as string) 
             : ''
         }
       >
@@ -350,7 +353,7 @@ const RoomForm = ({
             // prettier-ignore
             isAdd
               ? 'Add'
-              : 'Edit'
+              : 'Save'
           }
         </FormBtn>
         <FormBtn type="button" styled="secondary" onClick={closeAndReset}>

hotel-management/src/pages/Room/Table.tsx

@@ -125,7 +125,7 @@ const RoomTable = ({
     ? searchParams.get('orderBy')!
     : '';
 
-  const { data, isPending, errorMsg } = useFetch(
+  const { data, isPending, errorFetchMsg } = useFetch(
     'rooms',
     'name',
     nameSearch,
@@ -141,10 +141,10 @@ const RoomTable = ({
       setRooms([]);
     }
 
-    if (errorMsg) {
-      console.error(errorMsg);
+    if (errorFetchMsg) {
+      console.error(errorFetchMsg);
     }
-  }, [data, errorMsg]);
+  }, [data, errorFetchMsg]);
 
   return (
     <>

hotel-management/src/pages/User/Form.tsx

@@ -39,6 +39,11 @@ import {
   errorMsg,
 } from '../../constants/messages.ts';
 import { USER_PATH } from '../../constants/path.ts';
+import Select from '../../components/Select/index.tsx';
+import { useFetch } from '../../hooks/useFetch.ts';
+
+// Interfaces
+import { ISelectOptions } from '../../globals/interfaces.ts';
 
 const FormBtn = styled(Button)`
   width: 100%;
@@ -46,6 +51,7 @@ const FormBtn = styled(Button)`
   &:disabled,
   &[disabled] {
     background-color: var(--disabled-btn-color);
+    cursor: no-drop;
   }
 `;
 
@@ -65,6 +71,27 @@ const UserForm = ({
   isAdd,
 }: IUserFormProp) => {
   const [reset, setReset] = useState(true);
+  const [options, setOptions] = useState<ISelectOptions[]>();
+  const { data, errorFetchMsg } = useFetch('rooms');
+
+  useEffect(() => {
+    if (data) {
+      const tempData = data as TKeyValue[];
+      const tempOptions: ISelectOptions[] = [];
+      tempData.forEach((item) => {
+        tempOptions.push({
+          label: item.name! as string,
+          value: item.id! as string,
+        });
+      });
+
+      setOptions(tempOptions);
+    }
+
+    if (errorFetchMsg) {
+      toast.error(errorFetchMsg);
+    }
+  }, [data, errorFetchMsg]);
 
   if (isAdd) {
     // If this is add form, reset value
@@ -294,11 +321,17 @@ const UserForm = ({
             : ''
         }
       >
-        <Input
+        {/* <Input
           type="text"
           name="roomId"
           value={roomId as string}
           onChange={handleOnChange}
+        /> */}
+        <Select
+          name="roomId"
+          value={roomId as string}
+          onChange={handleOnChange}
+          options={options!}
         />
       </FormRow>
 
@@ -325,7 +358,7 @@ const UserForm = ({
             // prettier-ignore
             isAdd
               ? 'Add'
-              : 'Edit'
+              : 'Save'
           }
         </FormBtn>
         <FormBtn type="button" styled="secondary" onClick={closeAndReset}>

hotel-management/src/pages/User/Table.tsx

@@ -22,13 +22,13 @@ import { useFetch } from '../../hooks/useFetch';
 import { USER_PATH } from '../../constants/path';
 import { STATUS_CODE } from '../../constants/statusCode';
 import { CONFIRM_DELETE, DELETE_SUCCESS } from '../../constants/messages';
+import { USER_PAGE } from '../../constants/variables';
 
 // Styled
 import Spinner from '../../commons/styles/Spinner';
 
 // Utils
 import { sendRequest } from '../../helpers/sendRequest';
-import { USER_PAGE } from '../../constants/variables';
 
 interface IUserRow {
   user: TUser;
@@ -119,7 +119,7 @@ const UserTable = ({
     ? searchParams.get('orderBy')!
     : '';
 
-  const { data, isPending, errorMsg } = useFetch(
+  const { data, isPending, errorFetchMsg } = useFetch(
     'users',
     'phone',
     phoneSearch,
@@ -135,10 +135,10 @@ const UserTable = ({
       setUsers([]);
     }
 
-    if (errorMsg) {
-      console.error(errorMsg);
+    if (errorFetchMsg) {
+      console.error(errorFetchMsg);
     }
-  }, [data, errorMsg]);
+  }, [data, errorFetchMsg]);
 
   return (
     <>
@@ -163,7 +163,7 @@ const UserTable = ({
                 <div>Name</div>
                 <div>Identified Code</div>
                 <div>Phone</div>
-                <div>Room</div>
+                <div>Room Id</div>
               </Table.Header>
               <Table.Body<TUser>
                 data={users}