Add content for user page

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;

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;

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',
+  },
+];

hotel-management/src/pages/User.tsx

@@ -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;

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;

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;

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;
+`;