Refactor code, fix UI and logic code

hotel-management/src/components/AppLayout.tsx

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-import { Outlet } from 'react-router-dom';
-
-// Components
-import Header from './Header';
-import Sidebar from './Sidebar';
-
-const StyledAppLayout = styled.div`
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  grid-template-rows: auto 1fr;
-  height: 100vh;
-`;
-
-const Main = styled.main`
-  border: 1px solid var(--border-color);
-
-  overflow: scroll;
-`;
-
-const AppLayout = () => {
-  return (
-    <StyledAppLayout>
-      <Header />
-      <Sidebar />
-      <Main>
-        <Outlet />
-      </Main>
-    </StyledAppLayout>
-  );
-};
-
-export default AppLayout;

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

@@ -0,0 +1,22 @@
+import { Outlet } from 'react-router-dom';
+
+// Components
+import Header from '../Header';
+import Sidebar from '../Sidebar';
+
+// Styled
+import { Main, StyledAppLayout } from './styled';
+
+const AppLayout = () => {
+  return (
+    <StyledAppLayout>
+      <Header />
+      <Sidebar />
+      <Main>
+        <Outlet />
+      </Main>
+    </StyledAppLayout>
+  );
+};
+
+export default AppLayout;

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

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const StyledAppLayout = styled.div`
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  grid-template-rows: auto 1fr;
+  height: 100vh;
+`;
+
+const Main = styled.main`
+  border: 1px solid var(--border-color);
+
+  overflow: scroll;
+`;
+
+export { StyledAppLayout, Main };

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

@@ -1,3 +1,4 @@
+// Styled
 import { StyledActionBtn, StyledForm } from './styled';
 
 interface IFormProps {

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

@@ -1,3 +1,4 @@
+// Styled
 import { Error, Label, StyledFormRow } from './styled';
 
 interface IFormRow {

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

@@ -16,6 +16,8 @@ const Error = styled.p`
   color: var(--error-text);
   font-size: var(--fs-sm-2x);
   margin-top: 5px;
+  padding-inline: 5px;
+  width: 220px;
 `;
 
 export { StyledFormRow, Label, Error };

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

@@ -0,0 +1,16 @@
+// Components
+import HeaderMenu from '../HeaderMenu';
+
+// Styled
+import { StyledHeader } from './styled';
+
+const Header = () => {
+  return (
+    <StyledHeader>
+      <p>Hi, Admin!</p>
+      <HeaderMenu />
+    </StyledHeader>
+  );
+};
+
+export default Header;

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

@@ -1,8 +1,5 @@
 import styled from 'styled-components';
 
-// Components
-import HeaderMenu from './HeaderMenu';
-
 const StyledHeader = styled.header`
   border-bottom: 1px solid var(--border-color);
   padding: 20px 40px;
@@ -13,13 +10,4 @@ const StyledHeader = styled.header`
   gap: 30px;
 `;
 
-const Header = () => {
-  return (
-    <StyledHeader>
-      <p>Hi, Admin!</p>
-      <HeaderMenu />
-    </StyledHeader>
-  );
-};
-
-export default Header;
+export { StyledHeader };

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

@@ -1,14 +1,10 @@
-import styled from 'styled-components';
-
 // Components
 import { IoPersonCircleOutline } from 'react-icons/io5';
 import { HiOutlineLogout } from 'react-icons/hi';
-import ButtonIcon from '../commons/styles/ButtonIcon';
+import ButtonIcon from '../../commons/styles/ButtonIcon';
 
-const StyledHeaderMenu = styled.ul`
-  display: flex;
-  gap: 10px;
-`;
+// Styled
+import { StyledHeaderMenu } from './styled';
 
 const HeaderMenu = () => {
   return (

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledHeaderMenu = styled.ul`
+  display: flex;
+  gap: 10px;
+`;
+
+export { StyledHeaderMenu };

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

@@ -0,0 +1,8 @@
+// Styled
+import { StyledMessage } from './styled';
+
+const Message = ({ children }: { children: string }) => {
+  return <StyledMessage>{children}</StyledMessage>;
+};
+
+export default Message;

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

@@ -6,8 +6,4 @@ const StyledMessage = styled.p`
   padding: 20px;
 `;
 
-const Message = ({ children }: { children: string }) => {
-  return <StyledMessage>{children}</StyledMessage>;
-};
-
-export default Message;
+export { StyledMessage };

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

@@ -0,0 +1,28 @@
+// Components
+import { MdSpaceDashboard } from 'react-icons/md';
+import { HiUsers } from 'react-icons/hi2';
+import { BsHouseDoorFill } from 'react-icons/bs';
+
+// Styled
+import { StyledNav, StyledNavLink } from './styled';
+
+const Nav = () => {
+  return (
+    <StyledNav>
+      <StyledNavLink to={'/dashboard'}>
+        <MdSpaceDashboard />
+        <span>Dashboard</span>
+      </StyledNavLink>
+      <StyledNavLink to={'/user'}>
+        <HiUsers />
+        <span>User</span>
+      </StyledNavLink>
+      <StyledNavLink to={'/room'}>
+        <BsHouseDoorFill />
+        <span>Room</span>
+      </StyledNavLink>
+    </StyledNav>
+  );
+};
+
+export default Nav;

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

@@ -1,11 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 
-// Components
-import { MdSpaceDashboard } from 'react-icons/md';
-import { HiUsers } from 'react-icons/hi2';
-import { BsHouseDoorFill } from 'react-icons/bs';
-
 const StyledNav = styled.nav`
   margin-top: 70px;
   display: flex;
@@ -38,23 +33,4 @@ const StyledNavLink = styled(NavLink)`
   }
 `;
 
-const Nav = () => {
-  return (
-    <StyledNav>
-      <StyledNavLink to={'/dashboard'}>
-        <MdSpaceDashboard />
-        <span>Dashboard</span>
-      </StyledNavLink>
-      <StyledNavLink to={'/user'}>
-        <HiUsers />
-        <span>User</span>
-      </StyledNavLink>
-      <StyledNavLink to={'/room'}>
-        <BsHouseDoorFill />
-        <span>Room</span>
-      </StyledNavLink>
-    </StyledNav>
-  );
-};
-
-export default Nav;
+export { StyledNav, StyledNavLink };

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

@@ -1,39 +1,8 @@
 import { memo } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import styled, { css } from 'styled-components';
 
-const StyledOrder = styled.div`
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  padding: 5px;
-  display: flex;
-  gap: 10px;
-`;
-
-interface IOrderBtn {
-  active: boolean;
-}
-
-const OrderButton = styled.button<IOrderBtn>`
-  border: none;
-
-  ${(props) =>
-    props.active &&
-    css`
-      background-color: var(--primary-color);
-      color: var(--light-text);
-    `}
-
-  border-radius: var(--radius-sm);
-  font-weight: 500;
-  font-size: var(--fs-sm-x);
-  padding: 5px 10px;
-  transition: all 0.3s;
-
-  &:hover:not(:disabled) {
-    background-color: var(--hover-dark-background-color);
-  }
-`;
+// Styled
+import { OrderButton, StyledOrder } from './styled';
 
 interface IOrderProps {
   options: {

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

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+
+const StyledOrder = styled.div`
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 5px;
+  display: flex;
+  gap: 10px;
+`;
+
+interface IOrderBtn {
+  active: boolean;
+}
+
+const OrderButton = styled.button<IOrderBtn>`
+  border: none;
+  cursor: pointer;
+
+  ${(props) =>
+    props.active &&
+    css`
+      background-color: var(--primary-color);
+      color: var(--light-text);
+      cursor: no-drop;
+    `}
+
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+  font-size: var(--fs-sm-x);
+  padding: 5px 10px;
+  transition: all 0.3s;
+
+  &:hover:not(:disabled) {
+    background-color: var(--hover-dark-background-color);
+  }
+`;
+
+export { StyledOrder, OrderButton };

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

@@ -1,12 +1,5 @@
 import { memo, useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-const StyledSearch = styled.input`
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--border-color);
-  font-size: var(--fs-sm-x);
-  padding: 5px 10px;
-`;
+import { StyledSearch } from './styled';
 
 interface ISearch {
   setPlaceHolder: string;

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const StyledSearch = styled.input`
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  font-size: var(--fs-sm-x);
+  padding: 5px 10px;
+`;
+
+export { StyledSearch };

hotel-management/src/components/Select.tsx

@@ -1,32 +0,0 @@
-import styled from 'styled-components';
-
-interface ISelect {
-  options: {
-    value: string;
-    label: string;
-  }[];
-  value: string;
-  onChange: React.ChangeEventHandler<HTMLSelectElement>;
-}
-
-const StyledSelect = styled.select`
-  font-size: var(--fs-sm-x);
-  padding: 5px 10px;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  font-weight: 500;
-`;
-
-const Select = ({ options, value, onChange }: ISelect) => {
-  return (
-    <StyledSelect value={value} onChange={onChange} aria-label="Sort">
-      {options.map((option) => (
-        <option value={option.value} key={option.value}>
-          {option.label}
-        </option>
-      ))}
-    </StyledSelect>
-  );
-};
-
-export default Select;

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

@@ -0,0 +1,30 @@
+import { ISelectOptions } from '../../globals/interfaces';
+import { StyledSelect } from './styled';
+
+interface ISelect {
+  options: ISelectOptions[];
+  value: string;
+  onChange: React.ChangeEventHandler<HTMLSelectElement>;
+  name?: string;
+}
+
+const Select = ({ options, value, onChange, name }: ISelect) => {
+  if (!options) return;
+
+  return (
+    <StyledSelect
+      value={value}
+      onChange={onChange}
+      aria-label="Sort"
+      name={name}
+    >
+      {options.map((option) => (
+        <option value={option.value} key={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </StyledSelect>
+  );
+};
+
+export default Select;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const StyledSelect = styled.select`
+  font-size: var(--fs-sm-x);
+  padding: 5px 10px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-weight: 500;
+`;
+
+export { StyledSelect };

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

@@ -0,0 +1,16 @@
+// Components
+import Nav from '../Nav';
+
+// Styled
+import { Heading, StyledSidebar } from './styled';
+
+const Sidebar = () => {
+  return (
+    <StyledSidebar>
+      <Heading>Hotel Management</Heading>
+      <Nav />
+    </StyledSidebar>
+  );
+};
+
+export default Sidebar;

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

@@ -1,8 +1,5 @@
 import styled from 'styled-components';
 
-// Components
-import Nav from './Nav';
-
 const StyledSidebar = styled.aside`
   padding: 50px 20px;
 
@@ -17,13 +14,4 @@ const Heading = styled.h1`
   color: var(--primary-color);
 `;
 
-const Sidebar = () => {
-  return (
-    <StyledSidebar>
-      <Heading>Hotel Management</Heading>
-      <Nav />
-    </StyledSidebar>
-  );
-};
-
-export default Sidebar;
+export { StyledSidebar, Heading };

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

@@ -1,7 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 
 // Components
-import Select from './Select';
+import Select from '../Select';
 import { memo } from 'react';
 
 interface ISortByProps {