Remove unnecessary code, refactor, fix bug and add section comment

hotel-management/src/pages/Account/styled.ts

@@ -33,4 +33,9 @@ const FormArea = styled.div`
   margin-top: 50px;
 `
 
-export { Title, StyledAccount, FormArea, SubTitle };
+export {
+  Title,
+  StyledAccount,
+  FormArea,
+  SubTitle
+};

hotel-management/src/pages/Booking/BookingForm.tsx

@@ -32,16 +32,18 @@ interface IBookingFormProp {
 }
 
 const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
-  const { roomsAvailable, usersAvailable, dispatch } = useUserRoomAvailable();
+  const {
+    roomsAvailable,
+    usersAvailable,
+    dispatch
+  } = useUserRoomAvailable();
   const { isCreating, createBooking } = useCreateBooking();
   const { isUpdating, updateBooking } = useUpdateBooking();
   const isLoading = isCreating || isUpdating;
   const { id: editId, ...editValues } = { ...booking };
-  const [ amountValue, setAmountValue ] = useState(
-    editValues.amount
-      ? formatCurrency(editValues.amount)
-      : '$0.00'
-    );
+  const [amountValue, setAmountValue] = useState(
+    editValues.amount ? formatCurrency(editValues.amount) : '$0.00'
+  );
   const formMethods = useForm<IBooking>({
     defaultValues: editId
       ? {
@@ -177,15 +179,12 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
     const startDate = new Date(getValues().startDate);
     const endDate = new Date(getValues().endDate);
 
-    if(startDate >= endDate) {
+    if (startDate >= endDate) {
       setValue('endDate', '');
     }
   }, [setValue, getValues]);
 
-  const startDateValidate = useMemo(
-    () => new Date().toISOString().split('T')[0],
-    []
-  );
+  const startDateValidate = new Date().toISOString().split('T')[0];
 
   const endDateValidate = () => {
     if (getValues('startDate')) {
@@ -201,7 +200,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
   return (
     <FormProvider {...formMethods}>
       <Form onSubmit={handleSubmit(onSubmit)}>
-        <Form.Row label="User" error={errors?.userId?.message}>
+        <Form.Row label="User:" error={errors?.userId?.message}>
           {userOptions.length ? (
             <Select
               ariaLabel="user-select"
@@ -218,7 +217,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
           )}
         </Form.Row>
 
-        <Form.Row label="Room" error={errors?.roomId?.message}>
+        <Form.Row label="Room:" error={errors?.roomId?.message}>
           {roomOptions.length ? (
             <Select
               ariaLabel="user-select"
@@ -234,7 +233,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
           )}
         </Form.Row>
 
-        <Form.Row label="Start Date" error={errors?.startDate?.message}>
+        <Form.Row label="Start Date:" error={errors?.startDate?.message}>
           <Input
             type="date"
             id="startDate"
@@ -251,7 +250,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
           />
         </Form.Row>
 
-        <Form.Row label="End Date" error={errors?.endDate?.message}>
+        <Form.Row label="End Date:" error={errors?.endDate?.message}>
           <Input
             type="date"
             id="endDate"
@@ -269,7 +268,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
           />
         </Form.Row>
 
-        <Form.Row label="Amount">
+        <Form.Row label="Amount:">
           <Input
             type="hidden"
             id="amount"
@@ -289,7 +288,11 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
             name="submit"
             disabled={!isDirty || !isValid || isLoading}
           >
-            {!editId ? 'Add' : 'Save'}
+            {
+              !editId
+                ? 'Add'
+                : 'Save'
+            }
           </Form.Button>
           <Form.Button
             type="button"

hotel-management/src/pages/Booking/BookingRow.tsx

@@ -29,8 +29,15 @@ interface IBookingRow {
 
 const BookingRow = ({ booking }: IBookingRow) => {
   const { checkOutBooking } = useCheckOut();
-  const { id, users, startDate, endDate, rooms, amount, status } = booking;
-  const statusText = status ? 'Check in' : 'Check out';
+  const {
+    id,
+    users,
+    startDate,
+    endDate,
+    rooms,
+    amount,
+    status
+  } = booking;
   const formattedPrice = useMemo(() => formatCurrency(amount), [amount]);
   const renderEditBtn = useCallback(
     (onCloseModal: () => void) => (
@@ -79,7 +86,11 @@ const BookingRow = ({ booking }: IBookingRow) => {
       </div>
       <div>{rooms?.name}</div>
       <div>{formattedPrice}</div>
-      <div>{statusText}</div>
+      <div>{
+          status
+            ? 'Check in'
+            : 'Check out'
+        }</div>
 
       <div>
         <Modal>

hotel-management/src/pages/Booking/styled.ts

@@ -21,4 +21,8 @@ const StyledOperationTable = styled.div`
   justify-content: flex-end;
 `;
 
-export { StyledBooking, Title, StyledOperationTable };
+export {
+  StyledBooking,
+  Title,
+  StyledOperationTable
+};

hotel-management/src/pages/Login/index.tsx

@@ -3,9 +3,6 @@ import { Navigate } from 'react-router-dom';
 // Styled
 import { LoginLayout, StyledLogo, TitleStyled } from './styled';
 
-// Assets
-import logo from '@assets/images/logo.png';
-
 // Components
 import LoginForm from './LoginForm';
 
@@ -21,7 +18,7 @@ const Login = () => {
 
   return (
     <LoginLayout>
-      <StyledLogo src={logo} />
+      <StyledLogo src={'./assets/images/logo.png'} />
       <TitleStyled>Log In</TitleStyled>
 
       <LoginForm />

hotel-management/src/pages/Login/styled.ts

@@ -40,4 +40,10 @@ const FieldInput = styled.input`
   width: 300px;
 `
 
-export { LoginLayout, StyledLogo, TitleStyled, StyledLoginForm, FieldInput };
+export {
+  LoginLayout,
+  StyledLogo,
+  TitleStyled,
+  StyledLoginForm,
+  FieldInput
+};

hotel-management/src/pages/NotFound/NotFound.tsx

@@ -0,0 +1,21 @@
+import { useNavigate } from 'react-router-dom';
+
+// Styled
+import { Button, Heading, StyledNotFound } from '.';
+
+
+const NotFound = () => {
+  const useMoveBack = () => {
+    const navigate = useNavigate();
+    return () => navigate(-1);
+  };
+
+  return (
+    <StyledNotFound>
+      <Heading>The page not found!</Heading>
+      <Button onClick={useMoveBack}>Go back!</Button>
+    </StyledNotFound>
+  );
+};
+
+export default NotFound;

hotel-management/src/pages/NotFound/index.tsx

@@ -1,5 +1,4 @@
-import { useNavigate } from 'react-router-dom';
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const StyledNotFound = styled.div`
   height: 100vh;
@@ -27,20 +26,8 @@ const Button = styled.button`
   border-radius: var(--radius-sm);
 `;
 
-const useMoveBack = () => {
-  const navigate = useNavigate();
-  return () => navigate(-1);
-};
-
-const NotFound = () => {
-  const onBack = useMoveBack();
-
-  return (
-    <StyledNotFound>
-      <Heading>The page not found!</Heading>
-      <Button onClick={onBack}>Go back!</Button>
-    </StyledNotFound>
-  );
-};
-
-export default NotFound;
+export {
+  StyledNotFound,
+  Heading,
+  Button,
+}

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

@@ -26,11 +26,13 @@ interface IRoomRow {
 }
 
 const RoomRow = ({ room }: IRoomRow) => {
-  const { id, name, price, status } = room;
+  const {
+    id,
+    name,
+    price,
+    status
+  } = room;
   const { setIsDeleteRoom } = useSetIsDeleteRoom();
-  const statusText = status 
-    ? 'Unavailable' 
-    : 'Available';
   const formattedPrice = useMemo(() => formatCurrency(price), [price]);
   const renderEditBtn = useCallback(
     (onCloseModal: () => void) => (
@@ -42,11 +44,11 @@ const RoomRow = ({ room }: IRoomRow) => {
   );
   const renderDeleteBtn = useCallback(
     (onCloseModal: () => void) => (
-      <Menus.Button icon={<HiTrash />} onClick={onCloseModal}>
+      <Menus.Button icon={<HiTrash />} onClick={onCloseModal} disabled={status}>
         Delete
       </Menus.Button>
     ),
-    []
+    [status]
   );
 
   return (
@@ -54,7 +56,11 @@ const RoomRow = ({ room }: IRoomRow) => {
       <div>{id}</div>
       <div>{name}</div>
       <div>{formattedPrice}</div>
-      <div>{statusText}</div>
+      <div>{
+        status 
+          ? 'Unavailable' 
+          : 'Available'
+      }</div>
 
       <div>
         <Modal>

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

@@ -26,7 +26,11 @@ import Pagination from '@component/Pagination';
 
 const RoomTable = () => {
   const columnName = ['Id', 'Name', 'Price', 'Status'];
-  const { isLoading, rooms, count } = useRooms();
+  const {
+    isLoading,
+    rooms,
+    count
+  } = useRooms();
 
   const renderRoomRow = useCallback(
     (room: IRoom) => <RoomRow room={room} key={room.id} />,

hotel-management/src/pages/Room/styled.ts

@@ -21,4 +21,8 @@ const StyledOperationTable = styled.div`
   justify-content: flex-end;
 `;
 
-export { StyledRoom, Title, StyledOperationTable };
+export {
+  StyledRoom,
+  Title,
+  StyledOperationTable
+};

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

@@ -18,7 +18,12 @@ interface IUserRow {
 }
 
 const UserRow = ({ user }: IUserRow) => {
-  const { id, name, phone, isBooked } = user;
+  const {
+    id,
+    name,
+    phone,
+    isBooked
+  } = user;
   const { setIsDeleteUser } = useIsDeleteUser();
 
   const renderEditBtn = useCallback(
@@ -32,11 +37,11 @@ const UserRow = ({ user }: IUserRow) => {
 
   const renderDeleteBtn = useCallback(
     (onCloseModal: () => void) => (
-      <Menus.Button icon={<HiTrash />} onClick={onCloseModal}>
+      <Menus.Button icon={<HiTrash />} onClick={onCloseModal} disabled={isBooked}>
         Delete
       </Menus.Button>
     ),
-    []
+    [isBooked]
   );
   return (
     <Table.Row>

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

@@ -25,8 +25,17 @@ import { useUsers } from '@hook/users/useUsers';
 import Pagination from '@component/Pagination';
 
 const UserTable = () => {
-  const columnName = ['Id', 'Name', 'Phone', 'Is Booked'];
-  const { isLoading, users, count } = useUsers();
+  const columnName = [
+    'Id',
+    'Name',
+    'Phone',
+    'Is Booked'
+  ];
+  const {
+    isLoading,
+    users,
+    count
+  } = useUsers();
 
   const renderUserRow = useCallback(
     (user: IUser) => (
@@ -52,7 +61,7 @@ const UserTable = () => {
 
         {users && users.length ? (
           <Menus>
-            <Table columns="10% 35% 30% 15% 10%">
+            <Table columns="10% 35% 30% 15% 5%">
               <Table.Header headerColumn={columnName} />
               <Table.Body<IUser> data={users} render={renderUserRow} />
               <Table.Footer>

hotel-management/src/pages/User/styled.ts

@@ -21,4 +21,8 @@ const StyledOperationTable = styled.div`
   justify-content: flex-end;
 `;
 
-export { StyledUser, Title, StyledOperationTable };
+export {
+  StyledUser,
+  Title,
+  StyledOperationTable
+};