From d4d3d8d944cb19f046a418fd5cdb164ca55f9829 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 24 Oct 2023 15:38:47 +0700
Subject: [PATCH 1/3] Add content for user page

---
 hotel-management/src/commons/styles/Button.ts | 15 ++++
 .../src/commons/styles/Direction.ts           | 29 +++++++
 hotel-management/src/constants/sampleData.ts  | 68 ++++++++++++++++
 hotel-management/src/pages/User.tsx           | 15 ----
 hotel-management/src/pages/User/UserTable.tsx | 81 +++++++++++++++++++
 hotel-management/src/pages/User/index.tsx     | 22 +++++
 hotel-management/src/pages/User/styled.ts     | 20 +++++
 7 files changed, 235 insertions(+), 15 deletions(-)
 create mode 100644 hotel-management/src/commons/styles/Button.ts
 create mode 100644 hotel-management/src/commons/styles/Direction.ts
 create mode 100644 hotel-management/src/constants/sampleData.ts
 delete mode 100644 hotel-management/src/pages/User.tsx
 create mode 100644 hotel-management/src/pages/User/UserTable.tsx
 create mode 100644 hotel-management/src/pages/User/index.tsx
 create mode 100644 hotel-management/src/pages/User/styled.ts

diff --git a/hotel-management/src/commons/styles/Button.ts b/hotel-management/src/commons/styles/Button.ts
new file mode 100644
index 0000000..40ca5b3
--- /dev/null
+++ b/hotel-management/src/commons/styles/Button.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  padding: 10px 20px;
+
+  background-color: var(--primary-color);
+  color: var(--light-text);
+  text-transform: uppercase;
+  font-weight: 500;
+  cursor: pointer;
+
+  border-radius: var(--radius-md);
+`;
+
+export default Button;
diff --git a/hotel-management/src/commons/styles/Direction.ts b/hotel-management/src/commons/styles/Direction.ts
new file mode 100644
index 0000000..787a6e5
--- /dev/null
+++ b/hotel-management/src/commons/styles/Direction.ts
@@ -0,0 +1,29 @@
+import styled, { css } from 'styled-components';
+
+interface IDirection {
+  type?: 'vertical' | 'horizontal';
+}
+
+const Direction = styled.div<IDirection>`
+  display: flex;
+
+  ${(props) =>
+    props.type === 'horizontal' &&
+    css`
+      justify-content: space-between;
+      align-items: center;
+    `}
+
+  ${(props) =>
+    props.type === 'vertical' &&
+    css`
+      flex-direction: column;
+      gap: 20px;
+    `}
+`;
+
+Direction.defaultProps = {
+  type: 'vertical',
+};
+
+export default Direction;
diff --git a/hotel-management/src/constants/sampleData.ts b/hotel-management/src/constants/sampleData.ts
new file mode 100644
index 0000000..c851dec
--- /dev/null
+++ b/hotel-management/src/constants/sampleData.ts
@@ -0,0 +1,68 @@
+import { TUser } from '../globals/types';
+
+export const sampleData: TUser[] = [
+  {
+    id: '123',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '0937425123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '456',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '231',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '241',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '512',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '524',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '125',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+  {
+    id: '111',
+    name: 'Nezumi',
+    identifiedCode: '123',
+    phone: '123',
+    roomId: '246',
+    address: 'Da Nang',
+  },
+];
diff --git a/hotel-management/src/pages/User.tsx b/hotel-management/src/pages/User.tsx
deleted file mode 100644
index 6d85050..0000000
--- a/hotel-management/src/pages/User.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-const StyledUser = styled.main`
-  padding: 20px;
-`;
-
-const User = () => {
-  return (
-    <StyledUser>
-      <p>User page</p>
-    </StyledUser>
-  );
-};
-
-export default User;
diff --git a/hotel-management/src/pages/User/UserTable.tsx b/hotel-management/src/pages/User/UserTable.tsx
new file mode 100644
index 0000000..c5a6780
--- /dev/null
+++ b/hotel-management/src/pages/User/UserTable.tsx
@@ -0,0 +1,81 @@
+// 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 Empty from '../../components/Message';
+
+// Types
+import { TUser } from '../../globals/types';
+
+// Constants
+import { sampleData } from '../../constants/sampleData';
+
+type TUserModal = { user: TUser };
+
+const UserRow = ({ user }: TUserModal) => {
+  const handleOnClick = (id: string) => {
+    alert(`Id: ${id}`);
+  };
+
+  return (
+    <Table.Row>
+      <div>{user.id}</div>
+      <div>{user.name}</div>
+      <div>{user.identifiedCode}</div>
+      <div>{user.phone}</div>
+      <div>{user.roomId}</div>
+
+      <Menus.Menu>
+        <Menus.Toggle id={user.id} />
+
+        <Menus.List id={user.id}>
+          <Menus.Button
+            icon={<HiSquare2Stack />}
+            onClick={() => handleOnClick(user.id)}
+          >
+            Edit
+          </Menus.Button>
+          <Menus.Button
+            icon={<HiTrash />}
+            onClick={() => handleOnClick(user.id)}
+          >
+            Delete
+          </Menus.Button>
+        </Menus.List>
+      </Menus.Menu>
+    </Table.Row>
+  );
+};
+
+const UserTable = () => {
+  return sampleData.length > 0 ? (
+    <Direction>
+      <StyledOperationTable>
+        <p>Sort / Filter / Search table</p>
+      </StyledOperationTable>
+
+      <Menus>
+        <Table columns="10% 30% 20% 20% 10% 5%">
+          <Table.Header>
+            <div>Id</div>
+            <div>Name</div>
+            <div>Identified Code</div>
+            <div>Phone</div>
+            <div>Room</div>
+          </Table.Header>
+          <Table.Body<TUser>
+            data={sampleData}
+            render={(user: TUser) => <UserRow user={user} key={user.id} />}
+          />
+        </Table>
+      </Menus>
+    </Direction>
+  ) : (
+    <Empty>No data to show here!</Empty>
+  );
+};
+
+export default UserTable;
diff --git a/hotel-management/src/pages/User/index.tsx b/hotel-management/src/pages/User/index.tsx
new file mode 100644
index 0000000..d6cda30
--- /dev/null
+++ b/hotel-management/src/pages/User/index.tsx
@@ -0,0 +1,22 @@
+// Components
+import Direction from '../../commons/styles/Direction';
+import Button from '../../commons/styles/Button';
+import UserTable from './UserTable';
+
+// Styled
+import { StyledUser, Title } from './styled';
+
+const User = () => {
+  return (
+    <StyledUser>
+      <Direction type="horizontal">
+        <Title>List User</Title>
+        <Button>Add user</Button>
+      </Direction>
+
+      <UserTable />
+    </StyledUser>
+  );
+};
+
+export default User;
diff --git a/hotel-management/src/pages/User/styled.ts b/hotel-management/src/pages/User/styled.ts
new file mode 100644
index 0000000..1c1a707
--- /dev/null
+++ b/hotel-management/src/pages/User/styled.ts
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export const StyledUser = styled.main`
+  padding: 20px;
+  padding-bottom: 100px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+`;
+
+export const Title = styled.h2`
+  font-size: var(--fs-md);
+  color: var(--dark-text);
+  text-transform: capitalize;
+`;
+
+export const StyledOperationTable = styled.div`
+  text-align: right;
+`;

From 4a565e1d4bba205b3c51fd5cb065b8f03c3ed6e3 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 24 Oct 2023 15:52:27 +0700
Subject: [PATCH 2/3] Update styled code

---
 hotel-management/src/components/Table/styled.ts | 10 ++++++----
 hotel-management/src/pages/User/styled.ts       |  8 +++++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/hotel-management/src/components/Table/styled.ts b/hotel-management/src/components/Table/styled.ts
index 4906f3f..739542f 100644
--- a/hotel-management/src/components/Table/styled.ts
+++ b/hotel-management/src/components/Table/styled.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 // Interfaces
 import { ITable } from '../../globals/interfaces';
 
-export const StyledTable = styled.div`
+const StyledTable = styled.div`
   border: 1px solid var(--border-color);
 
   font-size: 20px;
@@ -17,11 +17,11 @@ const CommonRow = styled.div<ITable>`
   align-items: center;
 `;
 
-export const StyledBody = styled.div`
+const StyledBody = styled.div`
   font-size: var(--fs-sm-x);
 `;
 
-export const StyledRow = styled(CommonRow)`
+const StyledRow = styled(CommonRow)`
   padding: 20px;
 
   &:not(:last-child) {
@@ -29,7 +29,7 @@ export const StyledRow = styled(CommonRow)`
   }
 `;
 
-export const StyledHeader = styled(CommonRow)`
+const StyledHeader = styled(CommonRow)`
   padding: 10px 20px;
 
   border-bottom: 1px solid var(--border-color);
@@ -41,3 +41,5 @@ export const StyledHeader = styled(CommonRow)`
   text-transform: capitalize;
   font-weight: 600;
 `;
+
+export { StyledBody, StyledHeader, StyledRow, StyledTable };
diff --git a/hotel-management/src/pages/User/styled.ts b/hotel-management/src/pages/User/styled.ts
index 1c1a707..f8323fe 100644
--- a/hotel-management/src/pages/User/styled.ts
+++ b/hotel-management/src/pages/User/styled.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const StyledUser = styled.main`
+const StyledUser = styled.main`
   padding: 20px;
   padding-bottom: 100px;
 
@@ -9,12 +9,14 @@ export const StyledUser = styled.main`
   gap: 30px;
 `;
 
-export const Title = styled.h2`
+const Title = styled.h2`
   font-size: var(--fs-md);
   color: var(--dark-text);
   text-transform: capitalize;
 `;
 
-export const StyledOperationTable = styled.div`
+const StyledOperationTable = styled.div`
   text-align: right;
 `;
+
+export { StyledUser, Title, StyledOperationTable };

From fe58213bca716aa2c36e29ff6e680b973baa9132 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 24 Oct 2023 17:01:38 +0700
Subject: [PATCH 3/3] Update and optimized code

---
 hotel-management/src/pages/User/UserTable.tsx | 29 +++++++++----------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/hotel-management/src/pages/User/UserTable.tsx b/hotel-management/src/pages/User/UserTable.tsx
index c5a6780..279c7f8 100644
--- a/hotel-management/src/pages/User/UserTable.tsx
+++ b/hotel-management/src/pages/User/UserTable.tsx
@@ -5,7 +5,7 @@ import { StyledOperationTable } from './styled';
 import Menus from '../../components/Menus/Menus';
 import Table from '../../components/Table';
 import Direction from '../../commons/styles/Direction';
-import Empty from '../../components/Message';
+import Message from '../../components/Message';
 
 // Types
 import { TUser } from '../../globals/types';
@@ -20,28 +20,27 @@ const UserRow = ({ user }: TUserModal) => {
     alert(`Id: ${id}`);
   };
 
+  const { id, name, identifiedCode, phone, roomId } = user;
+
   return (
     <Table.Row>
-      <div>{user.id}</div>
-      <div>{user.name}</div>
-      <div>{user.identifiedCode}</div>
-      <div>{user.phone}</div>
-      <div>{user.roomId}</div>
+      <div>{id}</div>
+      <div>{name}</div>
+      <div>{identifiedCode}</div>
+      <div>{phone}</div>
+      <div>{roomId}</div>
 
       <Menus.Menu>
-        <Menus.Toggle id={user.id} />
+        <Menus.Toggle id={id} />
 
-        <Menus.List id={user.id}>
+        <Menus.List id={id}>
           <Menus.Button
             icon={<HiSquare2Stack />}
-            onClick={() => handleOnClick(user.id)}
+            onClick={() => handleOnClick(id)}
           >
             Edit
           </Menus.Button>
-          <Menus.Button
-            icon={<HiTrash />}
-            onClick={() => handleOnClick(user.id)}
-          >
+          <Menus.Button icon={<HiTrash />} onClick={() => handleOnClick(id)}>
             Delete
           </Menus.Button>
         </Menus.List>
@@ -51,7 +50,7 @@ const UserRow = ({ user }: TUserModal) => {
 };
 
 const UserTable = () => {
-  return sampleData.length > 0 ? (
+  return sampleData.length ? (
     <Direction>
       <StyledOperationTable>
         <p>Sort / Filter / Search table</p>
@@ -74,7 +73,7 @@ const UserTable = () => {
       </Menus>
     </Direction>
   ) : (
-    <Empty>No data to show here!</Empty>
+    <Message>No data to show here!</Message>
   );
 };