Update components and constants folder

hotel-management/src/commons/styles/Button.ts

@@ -1,9 +1,25 @@
-import styled, { css } from 'styled-components';
+import styled, { RuleSet, css } from 'styled-components';
 
-type TButtonStyle = 'primary' | 'secondary';
+interface IVariations {
+  [key: string]: RuleSet<object>;
+}
+
+const variations: IVariations = {
+  primary: css`
+    background-color: var(--primary-color);
+    color: var(--light-text);
+  `,
+  secondary: css`
+    background-color: var(--secondary-btn-color);
+  `,
+  danger: css`
+    background-color: var(--danger-btn-color);
+    color: var(--light-text);
+  `,
+} as const;
 
 interface IButtonStyle {
-  styled?: TButtonStyle;
+  variations?: keyof typeof variations;
 }
 
 const Button = styled.button<IButtonStyle>`
@@ -16,22 +32,16 @@ const Button = styled.button<IButtonStyle>`
 
   border-radius: var(--radius-md);
 
-  ${(props) =>
+  ${(props) => variations[props.variations!]}
-    props.styled === 'primary' &&
-    css`
-      background-color: var(--primary-color);
-      color: var(--light-text);
-    `}
 
-  ${(props) =>
+  &:disabled,
-    props.styled === 'secondary' &&
+  &[disabled] {
-    css`
+    cursor: no-drop;
-      background-color: var(--secondary-btn-color);
+  }
-    `}
 `;
 
 Button.defaultProps = {
-  styled: 'primary',
+  variations: 'primary',
 };
 
 export default Button;

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 Search = ({ setPlaceHolder }: ISearch) => {
-  const [query, setQuery] = useState('');
+  const field = 'search';
-  const debounceValue = useDebounce<string>(query, 700);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [query, setQuery] = useState<Nullable<string>>(null);
+  const debounceValue = useDebounce<Nullable<string>>(query, 700);
 
   useEffect(() => {
-    setValueSearch(debounceValue);
+    if (debounceValue !== null) {
-  }, [debounceValue, setValueSearch]);
+      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,
   },

hotel-management/src/constants/commons.ts

@@ -8,18 +8,10 @@ const USER_PAGE = {
       value: 'name',
       label: 'Sort by name',
     },
-    {
-      value: 'identifiedCode',
-      label: 'Sort by identified code',
-    },
     {
       value: 'phone',
       label: 'Sort by phone',
     },
-    {
-      value: 'roomId',
-      label: 'Sort by room',
-    },
   ],
 };
 
@@ -45,28 +37,15 @@ const ROOM_PAGE = {
       label: 'Sort by name',
     },
     {
-      value: 'finalPrice',
+      value: 'price',
       label: 'Sort by price',
     },
   ],
 };
 
-const INIT_VALUE_USER_FORM = {
-  name: '',
-  id: 0,
-  identifiedCode: '',
-  phone: '',
-};
-
-const INIT_VALUE_ROOM_FORM = {
-  name: '',
-  id: 0,
-  price: 0,
-  discount: 0,
-};
-
 const FORM = {
   EDIT: 'edit',
+  DELETE: 'delete',
   USER: 'user-form',
   ROOM: 'room-form',
 };
@@ -83,6 +62,4 @@ export {
   FORM,
   REGEX,
   ORDERBY_OPTIONS,
-  INIT_VALUE_USER_FORM,
-  INIT_VALUE_ROOM_FORM,
 };

hotel-management/src/constants/config.ts

@@ -1,5 +1,6 @@
-const TIME_OUT_SEC = 1;
 const DEFAULT_SORT_BY = 'id';
 const DEFAULT_ORDER_BY = 'asc';
+const supabaseUrl = 'https://pjqujsjzzdrlrgqbxepe.supabase.co'
+const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
 
-export { TIME_OUT_SEC, DEFAULT_SORT_BY, DEFAULT_ORDER_BY };
+export { DEFAULT_SORT_BY, DEFAULT_ORDER_BY, supabaseKey, supabaseUrl };

hotel-management/src/constants/messages.ts

@@ -1,17 +1,15 @@
 const ADD_SUCCESS = 'Add success';
-const EDIT_SUCCESS = 'Edit success';
+const UPDATE_SUCCESS = 'Update success';
 const CONFIRM_MESSAGE = 'Do you want to checkout this user?';
 const CONFIRM_DELETE = 'Are you sure to delete it?'
 const DELETE_SUCCESS = 'Delete success';
 const CHECKOUT_SUCCESS = 'Check out success';
-const DENIED_ACTION = "Can't checkout user not in room!";
 
 export {
   ADD_SUCCESS,
-  EDIT_SUCCESS,
+  UPDATE_SUCCESS,
   CONFIRM_MESSAGE,
   CONFIRM_DELETE,
   DELETE_SUCCESS,
   CHECKOUT_SUCCESS,
-  DENIED_ACTION
 };

hotel-management/src/constants/path.ts

@@ -2,6 +2,3 @@ export const DASHBOARD = '/dashboard';
 export const USER = '/user';
 export const ROOM = '/room';
 export const OTHER_PATH = '*';
-export const BASE_URL = 'https://hotel-management-api.loiphan.com/';
-export const USER_PATH = 'users';
-export const ROOM_PATH = 'rooms';

hotel-management/src/constants/responseStatus.ts

@@ -1,11 +0,0 @@
-const STATUS_CODE = {
-  OK: 200,
-  CREATE: 201,
-  NOT_FOUND: 404,
-};
-
-const RESPONSE_MESSAGE = {
-  UPDATE_SUCCESS: 'Update success',
-};
-
-export { STATUS_CODE, RESPONSE_MESSAGE };