diff --git a/hotel-management/public/robots.txt b/hotel-management/public/robots.txt new file mode 100644 index 0000000..54a57c2 --- /dev/null +++ b/hotel-management/public/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://example.com/sitemap.xml diff --git a/hotel-management/src/assets/fonts/Cabin.ttf b/hotel-management/src/assets/fonts/Cabin.ttf new file mode 100644 index 0000000..f5edbaa Binary files /dev/null and b/hotel-management/src/assets/fonts/Cabin.ttf differ diff --git a/hotel-management/src/assets/fonts/Cabin.woff2 b/hotel-management/src/assets/fonts/Cabin.woff2 new file mode 100644 index 0000000..8384087 Binary files /dev/null and b/hotel-management/src/assets/fonts/Cabin.woff2 differ diff --git a/hotel-management/src/assets/fonts/Poppins-Bold.ttf b/hotel-management/src/assets/fonts/Poppins-Bold.ttf deleted file mode 100644 index 00559ee..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-Bold.ttf and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-Bold.woff2 b/hotel-management/src/assets/fonts/Poppins-Bold.woff2 deleted file mode 100644 index 13e0e28..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-Bold.woff2 and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-Medium.ttf b/hotel-management/src/assets/fonts/Poppins-Medium.ttf deleted file mode 100644 index 6bcdcc2..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-Medium.ttf and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-Medium.woff2 b/hotel-management/src/assets/fonts/Poppins-Medium.woff2 deleted file mode 100644 index 406acb6..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-Medium.woff2 and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-Regular.ttf b/hotel-management/src/assets/fonts/Poppins-Regular.ttf deleted file mode 100644 index 9f0c71b..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-Regular.ttf and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-Regular.woff2 b/hotel-management/src/assets/fonts/Poppins-Regular.woff2 deleted file mode 100644 index 964d6d2..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-Regular.woff2 and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-SemiBold.ttf b/hotel-management/src/assets/fonts/Poppins-SemiBold.ttf deleted file mode 100644 index 74c726e..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-SemiBold.ttf and /dev/null differ diff --git a/hotel-management/src/assets/fonts/Poppins-SemiBold.woff2 b/hotel-management/src/assets/fonts/Poppins-SemiBold.woff2 deleted file mode 100644 index 9e4d0c0..0000000 Binary files a/hotel-management/src/assets/fonts/Poppins-SemiBold.woff2 and /dev/null differ diff --git a/hotel-management/src/components/AppLayout.tsx b/hotel-management/src/components/AppLayout.tsx deleted file mode 100644 index c34ae29..0000000 --- a/hotel-management/src/components/AppLayout.tsx +++ /dev/null @@ -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 ( - -
- -
- -
- - ); -}; - -export default AppLayout; diff --git a/hotel-management/src/components/AppLayout/index.tsx b/hotel-management/src/components/AppLayout/index.tsx new file mode 100644 index 0000000..49b39e7 --- /dev/null +++ b/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 ( + +
+ +
+ +
+ + ); +}; + +export default AppLayout; diff --git a/hotel-management/src/components/AppLayout/styled.ts b/hotel-management/src/components/AppLayout/styled.ts new file mode 100644 index 0000000..87fbadd --- /dev/null +++ b/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 }; diff --git a/hotel-management/src/components/Form/index.tsx b/hotel-management/src/components/Form/index.tsx index 0d2de0b..5fe4a93 100644 --- a/hotel-management/src/components/Form/index.tsx +++ b/hotel-management/src/components/Form/index.tsx @@ -1,3 +1,4 @@ +// Styled import { StyledActionBtn, StyledForm } from './styled'; interface IFormProps { diff --git a/hotel-management/src/components/FormRow/index.tsx b/hotel-management/src/components/FormRow/index.tsx index 3a4a1f5..11b62ae 100644 --- a/hotel-management/src/components/FormRow/index.tsx +++ b/hotel-management/src/components/FormRow/index.tsx @@ -1,3 +1,4 @@ +// Styled import { Error, Label, StyledFormRow } from './styled'; interface IFormRow { diff --git a/hotel-management/src/components/FormRow/styled.ts b/hotel-management/src/components/FormRow/styled.ts index 6563746..d37bbf4 100644 --- a/hotel-management/src/components/FormRow/styled.ts +++ b/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 }; diff --git a/hotel-management/src/components/Header/index.tsx b/hotel-management/src/components/Header/index.tsx new file mode 100644 index 0000000..2d20917 --- /dev/null +++ b/hotel-management/src/components/Header/index.tsx @@ -0,0 +1,16 @@ +// Components +import HeaderMenu from '../HeaderMenu'; + +// Styled +import { StyledHeader } from './styled'; + +const Header = () => { + return ( + +

Hi, Admin!

+ + + ); +}; + +export default Header; diff --git a/hotel-management/src/components/Header.tsx b/hotel-management/src/components/Header/styled.ts similarity index 53% rename from hotel-management/src/components/Header.tsx rename to hotel-management/src/components/Header/styled.ts index f5f794c..304040e 100644 --- a/hotel-management/src/components/Header.tsx +++ b/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 ( - -

Hi, Admin!

- - - ); -}; - -export default Header; +export { StyledHeader }; diff --git a/hotel-management/src/components/HeaderMenu.tsx b/hotel-management/src/components/HeaderMenu.tsx deleted file mode 100644 index e412c09..0000000 --- a/hotel-management/src/components/HeaderMenu.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import styled from 'styled-components'; - -// Components -import { IoPersonCircleOutline } from 'react-icons/io5'; -import { HiOutlineLogout } from 'react-icons/hi'; -import ButtonIcon from '../commons/styles/ButtonIcon'; - -const StyledHeaderMenu = styled.ul` - display: flex; - gap: 10px; -`; - -const HeaderMenu = () => { - return ( - - - - - - - - - ); -}; - -export default HeaderMenu; diff --git a/hotel-management/src/components/HeaderMenu/index.tsx b/hotel-management/src/components/HeaderMenu/index.tsx new file mode 100644 index 0000000..3e24e4b --- /dev/null +++ b/hotel-management/src/components/HeaderMenu/index.tsx @@ -0,0 +1,26 @@ +// Components +import { IoPersonCircleOutline } from 'react-icons/io5'; +import { HiOutlineLogout } from 'react-icons/hi'; +import ButtonIcon from '../../commons/styles/ButtonIcon'; + +// Styled +import { StyledHeaderMenu } from './styled'; + +const HeaderMenu = () => { + return ( + +
  • + + + +
    • +
  • + + + +
    • +     + ); +}; + +export default HeaderMenu; diff --git a/hotel-management/src/components/HeaderMenu/styled.ts b/hotel-management/src/components/HeaderMenu/styled.ts new file mode 100644 index 0000000..9715f1f --- /dev/null +++ b/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 }; diff --git a/hotel-management/src/components/Menus/Menus.tsx b/hotel-management/src/components/Menus/Menus.tsx index 0230649..feb529a 100644 --- a/hotel-management/src/components/Menus/Menus.tsx +++ b/hotel-management/src/components/Menus/Menus.tsx @@ -37,7 +37,7 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => { }; return ( - + ); diff --git a/hotel-management/src/components/Message/index.tsx b/hotel-management/src/components/Message/index.tsx new file mode 100644 index 0000000..bcc0b4f --- /dev/null +++ b/hotel-management/src/components/Message/index.tsx @@ -0,0 +1,8 @@ +// Styled +import { StyledMessage } from './styled'; + +const Message = ({ children }: { children: string }) => { + return {children}; +}; + +export default Message; diff --git a/hotel-management/src/components/Message.tsx b/hotel-management/src/components/Message/styled.ts similarity index 50% rename from hotel-management/src/components/Message.tsx rename to hotel-management/src/components/Message/styled.ts index 307efb4..10cc192 100644 --- a/hotel-management/src/components/Message.tsx +++ b/hotel-management/src/components/Message/styled.ts @@ -6,8 +6,4 @@ const StyledMessage = styled.p` padding: 20px; `; -const Message = ({ children }: { children: string }) => { - return {children}; -}; - -export default Message; +export { StyledMessage }; diff --git a/hotel-management/src/components/Nav/index.tsx b/hotel-management/src/components/Nav/index.tsx new file mode 100644 index 0000000..4de47fa --- /dev/null +++ b/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 ( + + + + Dashboard + + + + User + + + + Room + + + ); +}; + +export default Nav; diff --git a/hotel-management/src/components/Nav.tsx b/hotel-management/src/components/Nav/styled.ts similarity index 50% rename from hotel-management/src/components/Nav.tsx rename to hotel-management/src/components/Nav/styled.ts index 5bd3202..52ee29d 100644 --- a/hotel-management/src/components/Nav.tsx +++ b/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 ( - - - - Dashboard - - - - User - - - - Room - - - ); -}; - -export default Nav; +export { StyledNav, StyledNavLink }; diff --git a/hotel-management/src/components/OrderBy.tsx b/hotel-management/src/components/OrderBy/index.tsx similarity index 52% rename from hotel-management/src/components/OrderBy.tsx rename to hotel-management/src/components/OrderBy/index.tsx index b4563a0..e8f0716 100644 --- a/hotel-management/src/components/OrderBy.tsx +++ b/hotel-management/src/components/OrderBy/index.tsx @@ -1,38 +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` - 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: { @@ -41,7 +11,7 @@ interface IOrderProps { }[]; } -const OrderBy = ({ options }: IOrderProps) => { +const OrderBy = memo(({ options }: IOrderProps) => { const field = 'orderBy'; const [searchParams, setSearchParams] = useSearchParams(); @@ -67,6 +37,6 @@ const OrderBy = ({ options }: IOrderProps) => { ))} ); -}; +}); export default OrderBy; diff --git a/hotel-management/src/components/OrderBy/styled.ts b/hotel-management/src/components/OrderBy/styled.ts new file mode 100644 index 0000000..ea3325b --- /dev/null +++ b/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` + 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 }; diff --git a/hotel-management/src/components/Search.tsx b/hotel-management/src/components/Search/index.tsx similarity index 52% rename from hotel-management/src/components/Search.tsx rename to hotel-management/src/components/Search/index.tsx index ddc1585..544a832 100644 --- a/hotel-management/src/components/Search.tsx +++ b/hotel-management/src/components/Search/index.tsx @@ -1,19 +1,12 @@ -import { 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 { memo, useEffect, useState } from 'react'; +import { StyledSearch } from './styled'; interface ISearch { setPlaceHolder: string; - setValueSearch: React.Dispatch>; + setValueSearch: (phone: string) => void; } -const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => { +const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => { const [query, setQuery] = useState(''); useEffect(() => { @@ -30,6 +23,6 @@ const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => { placeholder={setPlaceHolder} /> ); -}; +}); export default Search; diff --git a/hotel-management/src/components/Search/styled.ts b/hotel-management/src/components/Search/styled.ts new file mode 100644 index 0000000..cf468b2 --- /dev/null +++ b/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 }; diff --git a/hotel-management/src/components/Select.tsx b/hotel-management/src/components/Select.tsx deleted file mode 100644 index a1a42c6..0000000 --- a/hotel-management/src/components/Select.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import styled from 'styled-components'; - -interface ISelect { - options: { - value: string; - label: string; - }[]; - value: string; - onChange: React.ChangeEventHandler; -} - -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 ( - - {options.map((option) => ( - - ))} - - ); -}; - -export default Select; diff --git a/hotel-management/src/components/Select/index.tsx b/hotel-management/src/components/Select/index.tsx new file mode 100644 index 0000000..448c2be --- /dev/null +++ b/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; + name?: string; +} + +const Select = ({ options, value, onChange, name }: ISelect) => { + if (!options) return; + + return ( + + {options.map((option) => ( + + ))} + + ); +}; + +export default Select; diff --git a/hotel-management/src/components/Select/styled.ts b/hotel-management/src/components/Select/styled.ts new file mode 100644 index 0000000..93b089c --- /dev/null +++ b/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 }; diff --git a/hotel-management/src/components/Sidebar/index.tsx b/hotel-management/src/components/Sidebar/index.tsx new file mode 100644 index 0000000..3b0c4d2 --- /dev/null +++ b/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 ( + + Hotel Management +