From 47a4c1be41cf30a72af0ae8b1b8ecd666f94988a Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Wed, 1 Nov 2023 14:25:45 +0700
Subject: [PATCH 1/3] Update hooks and add content for room page

---
 hotel-management/src/hooks/useFetch.ts        |  25 +-
 hotel-management/src/hooks/useForm.ts         |  24 +-
 hotel-management/src/hooks/useOutsideClick.ts |   6 +
 hotel-management/src/pages/Room.tsx           |  15 -
 hotel-management/src/pages/Room/Dialog.tsx    |  55 +++
 hotel-management/src/pages/Room/Form.tsx      | 334 ++++++++++++++++++
 hotel-management/src/pages/Room/Table.tsx     | 198 +++++++++++
 hotel-management/src/pages/Room/index.tsx     |  58 +++
 hotel-management/src/pages/Room/styled.ts     |  24 ++
 hotel-management/src/pages/User/Dialog.tsx    |   8 +-
 hotel-management/src/pages/User/Form.tsx      |  63 +++-
 hotel-management/src/pages/User/Table.tsx     |   6 +-
 hotel-management/src/pages/User/index.tsx     |   2 +-
 13 files changed, 770 insertions(+), 48 deletions(-)
 delete mode 100644 hotel-management/src/pages/Room.tsx
 create mode 100644 hotel-management/src/pages/Room/Dialog.tsx
 create mode 100644 hotel-management/src/pages/Room/Form.tsx
 create mode 100644 hotel-management/src/pages/Room/Table.tsx
 create mode 100644 hotel-management/src/pages/Room/index.tsx
 create mode 100644 hotel-management/src/pages/Room/styled.ts

diff --git a/hotel-management/src/hooks/useFetch.ts b/hotel-management/src/hooks/useFetch.ts
index eda4eea..59647c5 100644
--- a/hotel-management/src/hooks/useFetch.ts
+++ b/hotel-management/src/hooks/useFetch.ts
@@ -2,12 +2,25 @@ import { useEffect, useState } from 'react';
 
 // Constants
 import { BASE_URL } from '../constants/path';
-import { searchQuery } from '../helpers/utils';
 import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
 
-export const useFetch = (
+// Utils
+import { searchQuery } from '../helpers/utils';
+
+/**
+ *
+ * @param path The path of url
+ * @param columnSearch Column need to search
+ * @param keyWord The key word to search
+ * @param tempSortBy Sort by
+ * @param tempOrderBy Order by
+ * @param reload Fetch again
+ * @returns data: A data after fetch, isPending: A boolean indicating whether or not the progress of fetch data is done, errorMsg: A error message from the server.
+ */
+const useFetch = (
   path: string,
-  phoneNum: string,
+  columnSearch: string,
+  keyWord: string,
   tempSortBy: string,
   tempOrderBy: string,
   reload?: boolean,
@@ -35,7 +48,7 @@ export const useFetch = (
         : DEFAULT_ORDER_BY;
 
       // Query search
-      const query = searchQuery(phoneNum, sortBy, orderBy);
+      const query = searchQuery(columnSearch, keyWord, sortBy, orderBy);
 
       try {
         const response = await fetch(BASE_URL + path + '?' + query);
@@ -56,6 +69,8 @@ export const useFetch = (
     };
 
     fetchData();
-  }, [path, reload, phoneNum, tempOrderBy, tempSortBy]);
+  }, [path, reload, columnSearch, keyWord, tempOrderBy, tempSortBy]);
   return { data, isPending, errorMsg };
 };
+
+export { useFetch };
diff --git a/hotel-management/src/hooks/useForm.ts b/hotel-management/src/hooks/useForm.ts
index bc28fc7..c92c6e9 100644
--- a/hotel-management/src/hooks/useForm.ts
+++ b/hotel-management/src/hooks/useForm.ts
@@ -1,16 +1,11 @@
 import { useState, useEffect, useCallback, ChangeEvent } from 'react';
 
 // Utils
-import {
-  ERROR,
-  VALUE,
-  getPropValues,
-  isObject,
-  isRequired,
-} from '../helpers/utils';
+import { getPropValues, isObject, isRequired } from '../helpers/utils';
 
 // Types
 import { TKeyValue, TValidator } from '../globals/types';
+import { ERROR, VALUE } from '../constants/variables';
 
 /**
  * Custom hooks to validate your Form...
@@ -36,11 +31,11 @@ const useForm = (
   useEffect(() => {
     setInitialErrorState(initialValue);
     setDisable(true);
+    setDirty(getPropValues(stateSchema));
 
     // If initial value true, setValues again from stateSchema
     // and enabled button
     if (initialValue) {
-      setValues({});
       setValues(getPropValues(stateSchema, VALUE));
       setDisable(false);
     }
@@ -116,10 +111,19 @@ const useForm = (
     (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       setIsDirty(true);
 
+      let error = '';
       const name = (event.target! as HTMLInputElement).name;
-      const value = (event.target! as HTMLInputElement).value;
+      let value: string | boolean = '';
 
-      const error = validateFormFields(name, value);
+      if ((event.target! as HTMLInputElement).type === 'checkbox') {
+        value = (event.target! as HTMLInputElement).checked;
+      } else {
+        value = (event.target! as HTMLInputElement).value;
+      }
+
+      if (typeof value === 'string') {
+        error = validateFormFields(name, value)!;
+      }
 
       setValues((prevState) => ({ ...prevState, [name]: value }));
       setErrors((prevState) => ({ ...prevState, [name]: error }));
diff --git a/hotel-management/src/hooks/useOutsideClick.ts b/hotel-management/src/hooks/useOutsideClick.ts
index c7278d5..bc6e040 100644
--- a/hotel-management/src/hooks/useOutsideClick.ts
+++ b/hotel-management/src/hooks/useOutsideClick.ts
@@ -1,5 +1,11 @@
 import { useEffect, useRef } from 'react';
 
+/**
+ * Custom hook to call handler when click outside element
+ * @param handler Handler function
+ * @param listeningCapturing A boolean value indicating that events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. If not specified, defaults to false.
+ * @returns Return a mutable ref object
+ */
 export const useOutsideClick = (
   handler: () => void,
   listeningCapturing = true,
diff --git a/hotel-management/src/pages/Room.tsx b/hotel-management/src/pages/Room.tsx
deleted file mode 100644
index a7185f5..0000000
--- a/hotel-management/src/pages/Room.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const StyledRoom = styled.main`
-  padding: 20px;
-`;
-
-const Room = () => {
-  return (
-    <StyledRoom>
-      <p>Room page</p>
-    </StyledRoom>
-  );
-};
-
-export default Room;
diff --git a/hotel-management/src/pages/Room/Dialog.tsx b/hotel-management/src/pages/Room/Dialog.tsx
new file mode 100644
index 0000000..5fd8f99
--- /dev/null
+++ b/hotel-management/src/pages/Room/Dialog.tsx
@@ -0,0 +1,55 @@
+import { forwardRef, useEffect } from 'react';
+
+// Components
+import Dialog from '../../components/Dialog';
+import RoomForm from './Form';
+
+// Interfaces
+import { IDialogProps } from '../../globals/interfaces';
+
+// Types
+import { TRoom } from '../../globals/types';
+
+const RoomDialog = forwardRef((props, ref) => {
+  const dialogRef = ref as React.MutableRefObject<
+    HTMLDialogElement | undefined
+  >;
+  // prettier-ignore
+  const { 
+    onClose,
+    setReload,
+    reload,
+    data,
+    isAdd 
+  } = props;
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      dialogRef.current.addEventListener('click', (e: MouseEvent) => {
+        const dialogDimensions = dialogRef.current!.getBoundingClientRect();
+        if (
+          e.clientX < dialogDimensions.left ||
+          e.clientX > dialogDimensions.right ||
+          e.clientY < dialogDimensions.top ||
+          e.clientY > dialogDimensions.bottom
+        ) {
+          dialogRef.current!.close();
+        }
+      });
+    }
+  }, [dialogRef]);
+
+  return (
+    <Dialog title={'Add room'} onClose={onClose} ref={dialogRef}>
+      <RoomForm
+        onClose={onClose!}
+        reload={reload!}
+        setReload={setReload!}
+        room={data}
+        isAdd={isAdd!}
+      />
+    </Dialog>
+  );
+}) as React.FC<IDialogProps<TRoom>>;
+
+export default RoomDialog;
diff --git a/hotel-management/src/pages/Room/Form.tsx b/hotel-management/src/pages/Room/Form.tsx
new file mode 100644
index 0000000..4a744c6
--- /dev/null
+++ b/hotel-management/src/pages/Room/Form.tsx
@@ -0,0 +1,334 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import toast from 'react-hot-toast';
+
+// Styled
+import Input from '../../commons/styles/Input.ts';
+import TextArea from '../../commons/styles/TextArea.ts';
+
+// Components
+import Form from '../../components/Form/index.tsx';
+import FormRow from '../../components/FormRow/index.tsx';
+import Button from '../../commons/styles/Button.ts';
+
+// Types
+import {
+  TKeyValue,
+  TRoom,
+  TStateSchema,
+  TValidator,
+} from '../../globals/types.ts';
+
+// Hooks
+import useForm from '../../hooks/useForm.ts';
+
+// Utils
+import {
+  isValidNumber,
+  isValidString,
+  skipCheck,
+} from '../../helpers/validators.ts';
+import { addValidator, getValueFromObj } from '../../helpers/utils.ts';
+import { sendRequest } from '../../helpers/sendRequest.ts';
+
+// Constants
+import { STATUS_CODE } from '../../constants/statusCode.ts';
+import {
+  ADD_SUCCESS,
+  EDIT_SUCCESS,
+  errorMsg,
+} from '../../constants/messages.ts';
+import { ROOM_PATH } from '../../constants/path.ts';
+
+const FormBtn = styled(Button)`
+  width: 100%;
+
+  &:disabled,
+  &[disabled] {
+    background-color: var(--disabled-btn-color);
+  }
+`;
+
+interface IRoomFormProp {
+  onClose: () => void;
+  reload: boolean;
+  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  room?: TRoom | null;
+  isAdd: boolean;
+}
+
+const RoomForm = ({
+  onClose,
+  reload,
+  setReload,
+  room,
+  isAdd,
+}: IRoomFormProp) => {
+  const [reset, setReset] = useState(true);
+
+  if (isAdd) {
+    // If this is add form, reset value
+    room = null;
+  }
+
+  // prettier-ignore
+  const initialValue: string = isAdd 
+    ? '' 
+    : room! 
+    && room.id;
+
+  const {
+    idValue,
+    nameValue,
+    amountValue,
+    priceValue,
+    discountValue,
+    statusValue,
+    descriptionValue,
+  } = getValueFromObj<TRoom>(room);
+
+  // Define your state schema
+  const stateSchema: TStateSchema = {
+    id: { value: idValue || '' },
+    name: { value: nameValue || '', error: '' },
+    amount: { value: amountValue || '', error: '' },
+    price: { value: priceValue || '', error: '' },
+    discount: { value: discountValue || '', error: '' },
+    status: { value: statusValue || '', error: '' },
+    description: { value: descriptionValue || '', error: '' },
+  };
+
+  // prettier-ignore
+  const stateValidatorSchema: TValidator = {
+    name: addValidator({ 
+      validatorFunc: isValidString, 
+      prop: 'name' 
+    }),
+    amount: addValidator({
+      validatorFunc: isValidNumber,
+      prop: 'amount',
+    }),
+    price: addValidator({
+      validatorFunc: isValidNumber,
+      prop: 'price',
+    }),
+    discount: addValidator({ 
+      validatorFunc: isValidNumber, 
+      prop: 'discount' 
+    }),
+    status: addValidator({
+      validatorFunc: skipCheck,
+      prop: 'status',
+      required: false,
+    }),
+    description: addValidator({ 
+      validatorFunc: isValidString, 
+      prop: 'description' 
+    }),
+  };
+
+  // Submit form
+  const onSubmitForm = async (state: TKeyValue) => {
+    try {
+      if (isAdd) {
+        // Add request
+        const response = await sendRequest(
+          ROOM_PATH,
+          JSON.stringify(state),
+          'POST',
+        );
+
+        if (response.statusCode === STATUS_CODE.CREATE) {
+          toast.success(ADD_SUCCESS);
+
+          onResetForm();
+        } else {
+          throw new Error(errorMsg(response.statusCode, response.msg));
+        }
+      } else {
+        // Edit request
+        const response = await sendRequest(
+          ROOM_PATH + `/${room!.id}`,
+          JSON.stringify(state),
+          'PUT',
+        );
+
+        if (response.statusCode == STATUS_CODE.OK) {
+          toast.success(EDIT_SUCCESS);
+        } else {
+          throw new Error(errorMsg(response.statusCode, response.msg));
+        }
+      }
+      // Reload table data
+      setReload(!reload);
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      }
+    }
+
+    onClose();
+  };
+
+  // Close and reset form
+  const closeAndReset = () => {
+    onClose();
+    onResetForm();
+  };
+
+  console.log(initialValue);
+
+  // prettier-ignore
+  const { 
+    values,
+    errors,
+    dirty,
+    handleOnChange,
+    handleOnSubmit,
+    disable }  =
+    useForm(
+      stateSchema,
+      stateValidatorSchema,
+      onSubmitForm,
+      initialValue
+    );
+
+  // prettier-ignore
+  const {
+    id,
+    name, 
+    amount,
+    price,
+    discount, 
+    status,
+    description 
+  } = values;
+
+  // Clear form value when this is a add form
+  useEffect(() => {
+    if (isAdd) {
+      Object.keys(values).forEach((key) => (values[key] = ''));
+    }
+  }, [isAdd]); // eslint-disable-line
+
+  // Reset form
+  const onResetForm = () => {
+    setReset(!reset);
+    Object.keys(values).forEach((key) => (values[key] = ''));
+  };
+
+  return (
+    <Form onSubmit={handleOnSubmit}>
+      <Input type="hidden" name="id" value={id as string} />
+      <FormRow
+        label="Name"
+        error={
+          // prettier-ignore
+          errors.name && dirty.name 
+            ? (errors.name as string) 
+            : ''
+        }
+      >
+        <Input
+          type="text"
+          name="name"
+          value={name as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Amount"
+        // prettier-ignore
+        error={
+          errors.amount && dirty.amount 
+            ? (errors.amount as string) 
+            : ''
+          }
+      >
+        <Input
+          type="text"
+          name="amount"
+          value={amount as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Price"
+        error={
+          // prettier-ignore
+          errors.price && dirty.price 
+            ? (errors.price as string) 
+            : ''
+        }
+      >
+        <Input
+          type="text"
+          name="price"
+          value={price as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Discount"
+        error={
+          // prettier-ignore
+          errors.roomId && dirty.roomId
+            ? (errors.roomId as string) 
+            : ''
+        }
+      >
+        <Input
+          type="text"
+          name="discount"
+          value={discount as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow label="Status">
+        <Input
+          type="checkbox"
+          name="status"
+          checked={status as boolean}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <FormRow
+        label="Description"
+        error={
+          // prettier-ignore
+          errors.description && dirty.description 
+            ? (errors.description as string) 
+            : ''
+        }
+      >
+        <TextArea
+          name="description"
+          rows={3}
+          value={description as string}
+          onChange={handleOnChange}
+        />
+      </FormRow>
+
+      <Form.Action>
+        <FormBtn type="submit" name="submit" disabled={disable}>
+          {
+            // prettier-ignore
+            isAdd
+              ? 'Add'
+              : 'Edit'
+          }
+        </FormBtn>
+        <FormBtn type="button" styled="secondary" onClick={closeAndReset}>
+          Close
+        </FormBtn>
+      </Form.Action>
+    </Form>
+  );
+};
+
+export default RoomForm;
diff --git a/hotel-management/src/pages/Room/Table.tsx b/hotel-management/src/pages/Room/Table.tsx
new file mode 100644
index 0000000..57bbbbb
--- /dev/null
+++ b/hotel-management/src/pages/Room/Table.tsx
@@ -0,0 +1,198 @@
+import { useSearchParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
+
+// Components
+import { HiSquare2Stack } from 'react-icons/hi2';
+import { HiTrash } from 'react-icons/hi';
+import { StyledOperationTable } from './styled';
+import Menus from '../../components/Menus/Menus';
+import Table from '../../components/Table';
+import Direction from '../../commons/styles/Direction';
+import Message from '../../components/Message';
+import Search from '../../components/Search';
+import SortBy from '../../components/SortBy';
+import OrderBy from '../../components/OrderBy';
+
+// Types
+import { TRoom } from '../../globals/types';
+
+// Constants
+import { useFetch } from '../../hooks/useFetch';
+import { ROOM_PATH } from '../../constants/path';
+import { STATUS_CODE } from '../../constants/statusCode';
+import { CONFIRM_DELETE, DELETE_SUCCESS } from '../../constants/messages';
+import { ROOM_PAGE } from '../../constants/variables';
+
+// Styled
+import Spinner from '../../commons/styles/Spinner';
+
+// Utils
+import { sendRequest } from '../../helpers/sendRequest';
+
+interface IRoomRow {
+  room: TRoom;
+  openFormDialog: () => void;
+  setRoom: React.Dispatch<React.SetStateAction<TRoom | null>>;
+  reload: boolean;
+  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const RoomRow = ({
+  room,
+  openFormDialog,
+  setRoom,
+  reload,
+  setReload,
+}: IRoomRow) => {
+  const handleOnEdit = (room: TRoom) => {
+    setRoom(room);
+    openFormDialog();
+  };
+
+  const handleOnDelete = async (room: TRoom) => {
+    if (confirm(CONFIRM_DELETE)) {
+      const response = await sendRequest(
+        ROOM_PATH + `/${room.id}`,
+        null,
+        'DELETE',
+      );
+
+      if (response.statusCode === STATUS_CODE.OK) {
+        toast.success(DELETE_SUCCESS);
+
+        // Reload table
+        setReload(!reload);
+      }
+    }
+  };
+
+  const { id, name, amount, price, discount, status } = room;
+
+  // prettier-ignore
+  const statusText = status
+    ? 'Valid' 
+    : 'Invalid';
+
+  return (
+    <Table.Row>
+      <div>{id}</div>
+      <div>{name}</div>
+      <div>{amount}</div>
+      <div>{price}</div>
+      <div>{discount}</div>
+      <div>{statusText}</div>
+
+      <Menus.Menu>
+        <Menus.Toggle id={id} />
+
+        <Menus.List id={id}>
+          <Menus.Button
+            icon={<HiSquare2Stack />}
+            onClick={() => handleOnEdit(room)}
+          >
+            Edit
+          </Menus.Button>
+          <Menus.Button icon={<HiTrash />} onClick={() => handleOnDelete(room)}>
+            Delete
+          </Menus.Button>
+        </Menus.List>
+      </Menus.Menu>
+    </Table.Row>
+  );
+};
+
+interface IRoomTable {
+  reload: boolean;
+  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  openFormDialog: () => void;
+  setRoom?: React.Dispatch<React.SetStateAction<TRoom | null>>;
+}
+
+const RoomTable = ({
+  reload,
+  setReload,
+  openFormDialog,
+  setRoom,
+}: IRoomTable) => {
+  const [nameSearch, setNameSearch] = useState('');
+  const [searchParams] = useSearchParams();
+  const [rooms, setRooms] = useState<TRoom[]>([]);
+  const sortByValue = searchParams.get('sortBy')
+    ? searchParams.get('sortBy')!
+    : '';
+  const orderByValue = searchParams.get('orderBy')
+    ? searchParams.get('orderBy')!
+    : '';
+
+  const { data, isPending, errorMsg } = useFetch(
+    'rooms',
+    'name',
+    nameSearch,
+    sortByValue,
+    orderByValue,
+    reload,
+  );
+
+  useEffect(() => {
+    if (data) {
+      setRooms(data);
+    } else {
+      setRooms([]);
+    }
+
+    if (errorMsg) {
+      console.error(errorMsg);
+    }
+  }, [data, errorMsg]);
+
+  return (
+    <>
+      <Direction>
+        <StyledOperationTable>
+          <OrderBy options={ROOM_PAGE.ORDERBY_OPTIONS} />
+
+          <SortBy options={ROOM_PAGE.SORTBY_OPTIONS} />
+          <Search
+            setValueSearch={setNameSearch}
+            setPlaceHolder="Search by name..."
+          />
+        </StyledOperationTable>
+
+        {isPending && <Spinner />}
+
+        {rooms.length ? (
+          <Menus>
+            <Table columns="10% 20% 20% 20% 10% 10% 5%">
+              <Table.Header>
+                <div>Id</div>
+                <div>Name</div>
+                <div>Amount</div>
+                <div>Price</div>
+                <div>Discount</div>
+                <div>Status</div>
+              </Table.Header>
+              <Table.Body<TRoom>
+                data={rooms}
+                render={(room: TRoom) => (
+                  <RoomRow
+                    room={room}
+                    key={room.id}
+                    reload={reload}
+                    setReload={setReload}
+                    openFormDialog={openFormDialog}
+                    setRoom={setRoom!}
+                  />
+                )}
+              />
+            </Table>
+          </Menus>
+        ) : (
+          !isPending && <Message>No data to show here!</Message>
+        )}
+      </Direction>
+    </>
+  );
+};
+
+export default RoomTable;
diff --git a/hotel-management/src/pages/Room/index.tsx b/hotel-management/src/pages/Room/index.tsx
new file mode 100644
index 0000000..84da1a0
--- /dev/null
+++ b/hotel-management/src/pages/Room/index.tsx
@@ -0,0 +1,58 @@
+import { useRef, useState } from 'react';
+
+// Components
+import Direction from '../../commons/styles/Direction';
+import Button from '../../commons/styles/Button';
+import RoomTable from './Table';
+
+// Styled
+import { StyledRoom, Title } from './styled';
+import RoomDialog from './Dialog';
+
+// Types
+import { TRoom } from '../../globals/types';
+
+const Room = () => {
+  const dialogRef = useRef<HTMLDialogElement>();
+  const [reload, setReload] = useState(true);
+  const [room, setRoom] = useState<TRoom | null>(null);
+  const [isAdd, setIsAdd] = useState(false);
+
+  const openFormDialog = (isAddForm: boolean = false) => {
+    setIsAdd(isAddForm);
+    dialogRef.current?.showModal();
+  };
+
+  const closeFormDialog = () => {
+    dialogRef.current?.close();
+  };
+
+  return (
+    <>
+      <StyledRoom>
+        <Direction type="horizontal">
+          <Title>List Room</Title>
+          <Button onClick={() => openFormDialog(true)}>Add room</Button>
+        </Direction>
+
+        <RoomTable
+          reload={reload}
+          setReload={setReload}
+          openFormDialog={() => openFormDialog()}
+          setRoom={setRoom}
+        />
+      </StyledRoom>
+
+      <RoomDialog
+        onClose={closeFormDialog}
+        ref={dialogRef}
+        setReload={setReload}
+        reload={reload}
+        data={room}
+        isAdd={isAdd}
+      />
+    </>
+  );
+};
+
+export default Room;
diff --git a/hotel-management/src/pages/Room/styled.ts b/hotel-management/src/pages/Room/styled.ts
new file mode 100644
index 0000000..8381a4c
--- /dev/null
+++ b/hotel-management/src/pages/Room/styled.ts
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const StyledRoom = styled.main`
+  padding: 20px;
+  padding-bottom: 100px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+`;
+
+const Title = styled.h2`
+  font-size: var(--fs-md);
+  color: var(--dark-text);
+  text-transform: capitalize;
+`;
+
+const StyledOperationTable = styled.div`
+  display: flex;
+  gap: 30px;
+  justify-content: flex-end;
+`;
+
+export { StyledRoom, Title, StyledOperationTable };
diff --git a/hotel-management/src/pages/User/Dialog.tsx b/hotel-management/src/pages/User/Dialog.tsx
index b869266..ca21dcb 100644
--- a/hotel-management/src/pages/User/Dialog.tsx
+++ b/hotel-management/src/pages/User/Dialog.tsx
@@ -6,17 +6,19 @@ import UserForm from './Form';
 
 // Interfaces
 import { IDialogProps } from '../../globals/interfaces';
+import { TUser } from '../../globals/types';
 
 const UserDialog = forwardRef((props, ref) => {
   const dialogRef = ref as React.MutableRefObject<
     HTMLDialogElement | undefined
   >;
+
   // prettier-ignore
   const { 
     onClose,
     setReload,
     reload,
-    user,
+    data,
     isAdd 
   } = props;
 
@@ -42,11 +44,11 @@ const UserDialog = forwardRef((props, ref) => {
         onClose={onClose!}
         reload={reload!}
         setReload={setReload!}
-        user={user}
+        user={data}
         isAdd={isAdd!}
       />
     </Dialog>
   );
-}) as React.FC<IDialogProps>;
+}) as React.FC<IDialogProps<TUser>>;
 
 export default UserDialog;
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index 5b2ff1d..cafc107 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -24,12 +24,12 @@ import useForm from '../../hooks/useForm';
 
 // Utils
 import {
-  isValidAddress,
+  isValidString,
   isValidNumber,
   isValidPhoneNumber,
-  isValidString,
+  isValidName,
 } from '../../helpers/validators';
-import { addValidator, getValueUser } from '../../helpers/utils.ts';
+import { addValidator, getValueFromObj } from '../../helpers/utils.ts';
 import { sendRequest } from '../../helpers/sendRequest.ts';
 
 // Constants
@@ -66,26 +66,57 @@ const UserForm = ({
   isAdd,
 }: IUserFormProp) => {
   const [reset, setReset] = useState(true);
+
+  if (isAdd) {
+    // If this is add form, reset value
+    user = null;
+  }
+
   // prettier-ignore
   const initialValue: string = isAdd 
     ? '' 
     : user! 
     && user.id;
 
+  const {
+    idValue,
+    nameValue,
+    identifiedCodeValue,
+    phoneValue,
+    roomIdValue,
+    addressValue,
+  } = getValueFromObj<TUser>(user);
+
   // Define your state schema
+  // prettier-ignore
   const stateSchema: TStateSchema = {
-    id: { value: getValueUser(user, 'id') },
-    name: { value: getValueUser(user, 'name'), error: '' },
-    identifiedCode: { value: getValueUser(user, 'identifiedCode'), error: '' },
-    phone: { value: getValueUser(user, 'phone'), error: '' },
-    roomId: { value: getValueUser(user, 'roomId'), error: '' },
-    address: { value: getValueUser(user, 'address'), error: '' },
+    id: { value: idValue || '' },
+    name: { 
+      value: nameValue || '',
+      error: '' ,
+    },
+    identifiedCode: {
+      value: identifiedCodeValue || '',
+      error: '',
+    },
+    phone: { 
+      value: phoneValue || '',
+       error: '',
+    },
+    roomId: { 
+      value: roomIdValue || '',
+      error: '' ,
+    },
+    address: { 
+      value: addressValue || '',
+      error: ''
+    },
   };
 
   // prettier-ignore
   const stateValidatorSchema: TValidator = {
     name: addValidator({ 
-      validatorFunc: isValidString, 
+      validatorFunc: isValidName, 
       prop: 'full name' 
     }),
     identifiedCode: addValidator({
@@ -101,7 +132,7 @@ const UserForm = ({
       prop: 'room number' 
     }),
     address: addValidator({ 
-      validatorFunc: isValidAddress, 
+      validatorFunc: isValidString, 
       prop: 'address' 
     }),
   };
@@ -122,6 +153,8 @@ const UserForm = ({
         } else {
           throw new Error(errorMsg(response.statusCode, response.msg));
         }
+
+        onResetForm();
       } else {
         // Edit request
         const response = await sendRequest(
@@ -138,7 +171,6 @@ const UserForm = ({
       }
       // Reload table data
       setReload(!reload);
-      onResetForm();
     } catch (error: unknown) {
       if (error instanceof Error) {
         toast.error(error.message);
@@ -280,7 +312,12 @@ const UserForm = ({
 
       <Form.Action>
         <FormBtn type="submit" name="submit" disabled={disable}>
-          Add
+          {
+            // prettier-ignore
+            isAdd
+              ? 'Add'
+              : 'Edit'
+          }
         </FormBtn>
         <FormBtn type="button" styled="secondary" onClick={closeAndReset}>
           Close
diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx
index e48ade1..d666743 100644
--- a/hotel-management/src/pages/User/Table.tsx
+++ b/hotel-management/src/pages/User/Table.tsx
@@ -121,6 +121,7 @@ const UserTable = ({
 
   const { data, isPending, errorMsg } = useFetch(
     'users',
+    'phone',
     phoneSearch,
     sortByValue,
     orderByValue,
@@ -146,7 +147,10 @@ const UserTable = ({
           <OrderBy options={USER_PAGE.ORDERBY_OPTIONS} />
 
           <SortBy options={USER_PAGE.SORTBY_OPTIONS} />
-          <Search setPhoneSearch={setPhoneSearch} />
+          <Search
+            setValueSearch={setPhoneSearch}
+            setPlaceHolder="Search by phone..."
+          />
         </StyledOperationTable>
 
         {isPending && <Spinner />}
diff --git a/hotel-management/src/pages/User/index.tsx b/hotel-management/src/pages/User/index.tsx
index 1163f29..b18d3be 100644
--- a/hotel-management/src/pages/User/index.tsx
+++ b/hotel-management/src/pages/User/index.tsx
@@ -48,7 +48,7 @@ const User = () => {
         ref={dialogRef}
         setReload={setReload}
         reload={reload}
-        user={user}
+        data={user}
         isAdd={isAdd}
       />
     </>

From ba28e476393653146270a5aac8a0a4eb2084eb89 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Wed, 1 Nov 2023 14:37:21 +0700
Subject: [PATCH 2/3] Fix code style format

---
 hotel-management/src/hooks/useForm.ts      |  2 ++
 hotel-management/src/pages/Room/Form.tsx   | 35 +++++++++++++++++-----
 hotel-management/src/pages/User/Dialog.tsx |  2 ++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/hotel-management/src/hooks/useForm.ts b/hotel-management/src/hooks/useForm.ts
index c92c6e9..362aaee 100644
--- a/hotel-management/src/hooks/useForm.ts
+++ b/hotel-management/src/hooks/useForm.ts
@@ -5,6 +5,8 @@ import { getPropValues, isObject, isRequired } from '../helpers/utils';
 
 // Types
 import { TKeyValue, TValidator } from '../globals/types';
+
+// Constants
 import { ERROR, VALUE } from '../constants/variables';
 
 /**
diff --git a/hotel-management/src/pages/Room/Form.tsx b/hotel-management/src/pages/Room/Form.tsx
index 4a744c6..40ca36b 100644
--- a/hotel-management/src/pages/Room/Form.tsx
+++ b/hotel-management/src/pages/Room/Form.tsx
@@ -88,14 +88,35 @@ const RoomForm = ({
   } = getValueFromObj<TRoom>(room);
 
   // Define your state schema
+  // prettier-ignore
   const stateSchema: TStateSchema = {
-    id: { value: idValue || '' },
-    name: { value: nameValue || '', error: '' },
-    amount: { value: amountValue || '', error: '' },
-    price: { value: priceValue || '', error: '' },
-    discount: { value: discountValue || '', error: '' },
-    status: { value: statusValue || '', error: '' },
-    description: { value: descriptionValue || '', error: '' },
+    id: { 
+      value: idValue || '' 
+    },
+    name: { 
+      value: nameValue || '',
+      error: '' 
+    },
+    amount: { 
+      value: amountValue || '',
+      error: '' 
+    },
+    price: { 
+      value: priceValue || '',
+      error: '' 
+    },
+    discount: { 
+      value: discountValue || '',
+      error: '' 
+    },
+    status: { 
+      value: statusValue || '',
+      error: '' 
+    },
+    description: { 
+      value: descriptionValue || '',
+      error: '' 
+    },
   };
 
   // prettier-ignore
diff --git a/hotel-management/src/pages/User/Dialog.tsx b/hotel-management/src/pages/User/Dialog.tsx
index ca21dcb..2bf726f 100644
--- a/hotel-management/src/pages/User/Dialog.tsx
+++ b/hotel-management/src/pages/User/Dialog.tsx
@@ -6,6 +6,8 @@ import UserForm from './Form';
 
 // Interfaces
 import { IDialogProps } from '../../globals/interfaces';
+
+// Types
 import { TUser } from '../../globals/types';
 
 const UserDialog = forwardRef((props, ref) => {

From 52595e8a5da15c518393f2b85ce2920f0d69d4d9 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Wed, 1 Nov 2023 14:55:39 +0700
Subject: [PATCH 3/3] Hot fix value in form not show

---
 hotel-management/src/helpers/utils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index 1dcbbd7..b774f80 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -87,7 +87,9 @@ const getValueFromObj = <T>(obj: T | null = null): TKeyString => {
     for (const key of Object.keys(obj)) {
       const tempValue = obj[key as keyof typeof obj];
       const value: string | boolean | number =
-        typeof tempValue === 'boolean' || typeof tempValue === 'string'
+        typeof tempValue === 'boolean' ||
+        typeof tempValue === 'string' ||
+        typeof tempValue === 'number'
           ? tempValue
           : '';