Update components and constants folder

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

@@ -0,0 +1,39 @@
+import { memo } from 'react';
+
+// Styled
+import { StyledConfirmDelete } from './styled';
+
+// Component
+import Button from '@commonStyle/Button';
+
+interface IConfirmMessage {
+  message: string;
+  disabled: boolean;
+  onConfirm: () => void;
+  onCloseModal?: () => void;
+}
+
+const ConfirmMessage = memo(
+  ({ message, disabled, onConfirm, onCloseModal }: IConfirmMessage) => {
+    return (
+      <StyledConfirmDelete>
+        <p>{message}</p>
+
+        <div>
+          <Button variations="danger" disabled={disabled} onClick={onConfirm}>
+            Delete
+          </Button>
+          <Button
+            variations="secondary"
+            disabled={disabled}
+            onClick={onCloseModal}
+          >
+            Cancel
+          </Button>
+        </div>
+      </StyledConfirmDelete>
+    );
+  }
+);
+
+export default ConfirmMessage;

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

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledConfirmDelete = styled.div`
+  width: 450px;
+
+  & p {
+    font-size: var(--fs-sm);
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  & div {
+    display: flex;
+    justify-content: space-around;
+
+    padding-inline: 50px;
+  }
+`;
+
+export { StyledConfirmDelete };

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

@@ -5,19 +5,26 @@ import { StyledSearch } from './styled';
 
 // Hooks
 import { useDebounce } from '@hook/useDebounce';
+import { useSearchParams } from 'react-router-dom';
+import { Nullable } from '@type/common';
 
 interface ISearch {
   setPlaceHolder: string;
-  setValueSearch: (phone: string) => void;
 }
 
-const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
-  const [query, setQuery] = useState('');
-  const debounceValue = useDebounce<string>(query, 700);
+const Search = ({ setPlaceHolder }: ISearch) => {
+  const field = 'search';
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [query, setQuery] = useState<Nullable<string>>(null);
+  const debounceValue = useDebounce<Nullable<string>>(query, 700);
 
   useEffect(() => {
-    setValueSearch(debounceValue);
-  }, [debounceValue, setValueSearch]);
+    if (debounceValue !== null) {
+      searchParams.set(field, debounceValue);
+
+      setSearchParams(searchParams);
+    }
+  }, [debounceValue, searchParams, setSearchParams]);
 
   return (
     <StyledSearch

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

@@ -41,7 +41,7 @@ const Toast = ({
 Toast.defaultProps = {
   position: 'top-center',
   gutter: 12,
-  containerStyle: { margin: '8px', zIndex: 1 },
+  containerStyle: { margin: '8px', zIndex: 2000 },
   success: {
     duration: 3000,
   },