Update table component

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

@@ -7,6 +7,7 @@ import {
   StyledTable,
 } from './styled';
 import Pagination from '../Pagination';
+import { TbArrowNarrowRight } from 'react-icons/tb';
 
 const parseWidthString = (columnsWidth: number[]): string => {
   let result: string = '';
@@ -46,6 +47,18 @@ const Table = <T,>({ rows, columns, count }: Props<T>) => {
         {columns.map((column, columnIndex) => {
           const value = row[column.key as keyof typeof row] as string;
 
+          if (column.isDateValue) {
+            return (
+              <div
+                style={{ display: 'flex', alignItems: 'center' }}
+                key={`cell-${columnIndex}`}
+              >
+                {value[0]} &nbsp; <TbArrowNarrowRight />
+                &nbsp; {value[1]}
+              </div>
+            );
+          }
+
           return <div key={`cell-${columnIndex}`}>{value}</div>;
         })}
       </StyledRow>

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

@@ -26,6 +26,10 @@ const StyledBody = styled.div`
 const StyledRow = styled(CommonRow)`
   padding: 20px;
 
+  &.active {
+    background-color: red;
+  }
+
   &:not(:last-child) {
     border-bottom: 1px solid var(--border-color);
   }

hotel-management/src/contexts/ItemSelected.ts

@@ -0,0 +1,35 @@
+import { Dispatch, createContext } from 'react';
+
+export type TItemSelectAction = 'setData' | 'removeData';
+
+interface IAction<T> {
+  type: TItemSelectAction;
+  payload: T;
+}
+
+interface IItemSelect {
+  data?: any;
+  dispatch?: Dispatch<IAction<unknown>>;
+}
+
+const ItemSelectContext = createContext<IItemSelect>({});
+
+const itemSelectReducer =
+  <T>() =>
+  (state: T, action: IAction<T>) => {
+    switch (action.type) {
+      // Init data for the first load
+      case 'setData': {
+        const tempData = { ...state };
+
+        return {
+          data: tempData,
+        };
+      }
+
+      default:
+        throw new Error('Action unknown');
+    }
+  };
+
+export { itemSelectReducer, ItemSelectContext };

hotel-management/src/hooks/useItemSelected.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+
+// Contexts
+import { ItemSelectContext } from '@src/contexts/ItemSelected';
+
+/**
+ * The hooks check the place call is in UserRoomAvailableProvider or not
+ * @returns The context of UserRoomAvailableContext
+ */
+const useItemSelect = () => {
+  const context = useContext(ItemSelectContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'ItemSelectContext was used outside of ItemSelectContextProvider'
+    );
+  }
+
+  return context;
+};
+
+export { useItemSelect };

hotel-management/src/pages/Booking/BookingTable.tsx

@@ -14,10 +14,11 @@ import { useBookings } from '@src/hooks/bookings/useBookings';
 // Types
 import { ColumnProps } from '@src/types/common';
 import { formatCurrency } from '@src/helpers/helper';
+import { useItemSelect } from '@src/hooks/useItemSelected';
 
 interface IBookingTable {
   user: string;
-  date: string;
+  date: string[];
   room: string;
   amount: string;
   status: string;
@@ -25,16 +26,19 @@ interface IBookingTable {
 }
 
 const BookingTable = () => {
+  const { dispatch } = useItemSelect();
+
   const columns: ColumnProps[] = [
     {
       key: 'user',
       title: 'User',
-      width: 15,
+      width: 10,
     },
     {
       key: 'date',
       title: 'Date',
       width: 25,
+      isDateValue: true,
     },
     {
       key: 'room',
@@ -49,19 +53,21 @@ const BookingTable = () => {
     {
       key: 'status',
       title: 'Status',
-      width: 15,
+      width: 20,
     },
   ];
 
   const { isLoading, bookings, count } = useBookings();
 
   const tempBookings = bookings?.map((booking) => ({
-    date: 'Error',
+    date: [booking.startDate, booking.endDate],
     amount: formatCurrency(booking.amount),
     room: booking.rooms!.name,
     user: booking.users!.name,
     status: booking.status ? 'Check in' : 'Check out',
-    onClick: () => console.log(booking),
+    onClick: () => {
+      dispatch!({type: 'setData', payload: booking})
+    },
   }));
 
   return (  

hotel-management/src/pages/Booking/index.tsx

@@ -17,21 +17,23 @@ const Booking = () => {
       <Direction type="horizontal">
         <Title>List Booking</Title>
 
-        <Modal>
+        <div style={{ display: 'flex', gap: '15px' }}>
-          <Modal.Open
+          <Modal>
-            modalName={FORM.BOOKING}
+            <Modal.Open
-            renderChildren={(onCloseModal) => (
+              modalName={FORM.BOOKING}
-              <Button onClick={onCloseModal}>Add booking</Button>
+              renderChildren={(onCloseModal) => (
-            )}
+                <Button onClick={onCloseModal}>Add booking</Button>
-          />
+              )}
-          <Modal.Window
+            />
-            name={FORM.BOOKING}
+            <Modal.Window
-            title="Add form"
+              name={FORM.BOOKING}
-            renderChildren={(onCloseModal) => (
+              title="Add form"
-              <BookingForm onCloseModal={onCloseModal} />
+              renderChildren={(onCloseModal) => (
-            )}
+                <BookingForm onCloseModal={onCloseModal} />
-          />
+              )}
-        </Modal>
+            />
+          </Modal>
+        </div>
       </Direction>
 
       <BookingTable />

hotel-management/src/types/common.ts

@@ -16,6 +16,7 @@ interface ColumnProps {
   key: string;
   title: string;
   width: number;
+  isDateValue?: boolean;
 }
 
 type TDirection = 'vertical' | 'horizontal';