Add sidebar component

hotel-management/src/pages/Dashboard.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const StyledDashboard = styled.main`
+  padding: 20px;
+`;
+
+const Dashboard = () => {
+  return (
+    <StyledDashboard>
+      <p>This page currently still develop. Please try again later!</p>
+    </StyledDashboard>
+  );
+};
+
+export default Dashboard;

hotel-management/src/pages/NotFound.tsx

@@ -0,0 +1,46 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+
+const StyledNotFound = styled.div`
+  height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 30px;
+`;
+
+const Heading = styled.h1`
+  font-size: 40px;
+  color: var(--primary-color);
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+
+  background-color: var(--primary-color);
+  color: var(--light-text);
+  text-transform: uppercase;
+  font-weight: 500;
+
+  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;

hotel-management/src/pages/Room.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const StyledRoom = styled.main`
+  padding: 20px;
+`;
+
+const Room = () => {
+  return (
+    <StyledRoom>
+      <p>Room page</p>
+    </StyledRoom>
+  );
+};
+
+export default Room;

hotel-management/src/pages/User.tsx

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+const StyledUser = styled.main`
+  padding: 20px;
+`;
+
+const User = () => {
+  return (
+    <StyledUser>
+      <p>User page</p>
+    </StyledUser>
+  );
+};
+
+export default User;