Implement pagination for table user and room

hotel-management/src/components/Form/index.tsx

@@ -7,6 +7,7 @@ import {
   Error,
   Label,
   StyledFormRow,
+  FormBtn,
 } from './styled';
 
 interface IFormProps {
@@ -29,7 +30,6 @@ const Form = ({ children, onSubmit, id }: IFormProps) => {
   );
 };
 
-
 const FormRow = ({ label, error, children }: IFormRow) => {
   return (
     <StyledFormRow>
@@ -44,5 +44,6 @@ const FormRow = ({ label, error, children }: IFormRow) => {
 
 Form.Row = FormRow;
 Form.Action = StyledActionBtn;
+Form.Button = FormBtn;
 
 export default Form;

hotel-management/src/components/Form/styled.ts

@@ -1,3 +1,4 @@
+import Button from '@commonStyle/Button';
 import styled from 'styled-components';
 
 const StyledForm = styled.form`
@@ -35,4 +36,13 @@ const Error = styled.p`
   width: 220px;
 `;
 
-export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error };
+const FormBtn = styled(Button)`
+  width: 100%;
+
+  &:disabled,
+  &[disabled] {
+    background-color: var(--disabled-btn-color);
+  }
+`;
+
+export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error, FormBtn };

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

@@ -1,7 +1,4 @@
-import styled from 'styled-components';
-
 // Styled
-import Button from '@commonStyle/Button.ts';
 import Input from '@commonStyle/Input.ts';
 
 // Types
@@ -25,16 +22,6 @@ import { useForm } from 'react-hook-form';
 import { useCreateRoom } from '@hook/rooms/useCreateRoom.ts';
 import { useUpdateRoom } from '@hook/rooms/useUpdateRoom.ts';
 
-const FormBtn = styled(Button)`
-  width: 100%;
-
-  &:disabled,
-  &[disabled] {
-    background-color: var(--disabled-btn-color);
-    cursor: no-drop;
-  }
-`;
-
 interface IRoomFormProp {
   onCloseModal?: () => void;
   room?: IRoom;
@@ -115,7 +102,7 @@ const RoomForm = ({ onCloseModal, room }: IRoomFormProp) => {
       </Form.Row>
 
       <Form.Action>
-        <FormBtn
+        <Form.Button
           type="submit"
           name="submit"
           disabled={!isDirty || !isValid || isLoading}
@@ -125,10 +112,10 @@ const RoomForm = ({ onCloseModal, room }: IRoomFormProp) => {
               ? 'Add' 
               : 'Save'
           }
-        </FormBtn>
+        </Form.Button>
-        <FormBtn type="button" variations="secondary" onClick={onCloseModal}>
+        <Form.Button type="button" variations="secondary" onClick={onCloseModal}>
           Close
-        </FormBtn>
+        </Form.Button>
       </Form.Action>
     </Form>
   );

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

@@ -22,10 +22,11 @@ import Spinner from '@commonStyle/Spinner';
 
 // Hooks
 import { useRooms } from '@hook/rooms/useRooms';
+import Pagination from '@component/Pagination';
 
 const RoomTable = () => {
   const columnName = ['Id', 'Name', 'Price', 'Status'];
-  const { isLoading, rooms } = useRooms();
+  const { isLoading, rooms, count } = useRooms();
 
   const renderRoomRow = useCallback(
     (room: IRoom) => <RoomRow room={room} key={room.id} />,
@@ -49,6 +50,9 @@ const RoomTable = () => {
             <Table columns="10% 40% 20% 20% 5%">
               <Table.Header headerColumn={columnName} />
               <Table.Body<IRoom> data={rooms} render={renderRoomRow} />
+              <Table.Footer>
+                <Pagination count={count!}/>
+              </Table.Footer>
             </Table>
           </Menus>
         ) : (

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

@@ -19,9 +19,6 @@ import {
 } from '@constant/formValidateMessage.ts';
 import { REGEX } from '@constant/commons.ts';
 
-// Styled
-import { FormBtn } from './styled.ts';
-
 // Types
 import { IUser } from '@type/users.ts';
 
@@ -106,7 +103,7 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => {
         </Form.Row>
 
         <Form.Action>
-          <FormBtn
+          <Form.Button
             type="submit"
             name="submit"
             disabled={!isDirty || !isValid || isLoading}
@@ -116,10 +113,10 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => {
                 ? 'Add' 
                 : 'Save'
             }
-          </FormBtn>
+          </Form.Button>
-          <FormBtn type="button" variations="secondary" onClick={onCloseModal}>
+          <Form.Button type="button" variations="secondary" onClick={onCloseModal}>
             Close
-          </FormBtn>
+          </Form.Button>
         </Form.Action>
       </Form>
     </FormProvider>

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

@@ -22,10 +22,11 @@ import Spinner from '@commonStyle/Spinner';
 
 // Hooks
 import { useUsers } from '@hook/users/useUsers';
+import Pagination from '@component/Pagination';
 
 const UserTable = () => {
   const columnName = ['Id', 'Name', 'Phone', 'Is Booked'];
-  const { isLoading, users } = useUsers();
+  const { isLoading, users, count } = useUsers();
 
   const renderUserRow = useCallback(
     (user: IUser) => (
@@ -54,6 +55,9 @@ const UserTable = () => {
             <Table columns="10% 35% 30% 15% 10%">
               <Table.Header headerColumn={columnName} />
               <Table.Body<IUser> data={users} render={renderUserRow} />
+              <Table.Footer>
+                <Pagination count={count!}/>
+              </Table.Footer>
             </Table>
           </Menus>
         ) : (

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

@@ -1,8 +1,5 @@
 import styled from 'styled-components';
 
-// Components
-import Button from '../../commons/styles/Button';
-
 const StyledUser = styled.main`
   padding: 20px;
   padding-bottom: 100px;
@@ -24,14 +21,4 @@ const StyledOperationTable = styled.div`
   justify-content: flex-end;
 `;
 
-const FormBtn = styled(Button)`
+export { StyledUser, Title, StyledOperationTable };
-  width: 100%;
-
-  &:disabled,
-  &[disabled] {
-    background-color: var(--disabled-btn-color);
-    cursor: no-drop;
-  }
-`;
-
-export { StyledUser, Title, StyledOperationTable, FormBtn };