From 65605de709975ee63bd72b9e89d2bf6e2269f870 Mon Sep 17 00:00:00 2001
From: abdelmounaim lallouache <abdelmounaim.lallouache@gmail.com>
Date: Sat, 27 Jan 2024 01:04:12 -0600
Subject: [PATCH] updated detail modal

---
 .../Dashboard/TimeOffRequestDetailModal.jsx   | 67 ++++++++++++-------
 1 file changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/components/Dashboard/TimeOffRequestDetailModal.jsx b/src/components/Dashboard/TimeOffRequestDetailModal.jsx
index 60fd79ae3f..19a6ddfb5a 100644
--- a/src/components/Dashboard/TimeOffRequestDetailModal.jsx
+++ b/src/components/Dashboard/TimeOffRequestDetailModal.jsx
@@ -1,10 +1,9 @@
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';
 import moment from 'moment';
 import 'moment-timezone';
 import { useSelector, useDispatch } from 'react-redux';
 import { hideTimeOffRequestModal } from '../../actions/timeOffRequestAction';
 
-
 const TimeOffRequestDetailModal = () => {
   const { isOpen, data } = useSelector(state => state.timeOffRequests.timeOffModal);
   const dispatch = useDispatch();
@@ -17,27 +16,49 @@ const TimeOffRequestDetailModal = () => {
       <Modal isOpen={isOpen} toggle={() => detailModalClose()} returnFocusAfterClose={true}>
         <ModalHeader toggle={() => detailModalClose()}>Time Off Details</ModalHeader>
         <ModalBody className="time-off-detail-modal">
-          <h4 className="time-off-detail-modal-title">
-            {data?.onVacation
-              ? `${data?.name} Is Not Available this Week`
-              : `${data?.name} Is Not Available Next Week`}
-          </h4>
-          <div className="time-off-detail-modal-section">
-            <h5 className="time-off-detail-modal-sub-heading">Starting from:</h5>
-            <p className="time-off-detail-modal-sub-section">
-              {moment(data?.startingDate).format('YYYY-MM-DD')}
-            </p>
-          </div>
-          <div className="time-off-detail-modal-section">
-            <h5 className="time-off-detail-modal-sub-heading">Until:</h5>
-            <p className="time-off-detail-modal-sub-section">
-              {moment(data?.endingDate).format('YYYY-MM-DD')}
-            </p>
-          </div>
-          <div className="time-off-detail-modal-section">
-            <h5 className="time-off-detail-modal-sub-heading">For The Following reason:</h5>
-            <p className="time-off-detail-modal-sub-section">{data?.reason}</p>
-          </div>
+          <Row>
+            <Col>
+              <p className="time-off-detail-modal-title">
+                {data?.onVacation
+                  ? `${data?.name} Is Not Available this Week`
+                  : `${data?.name} Is Not Available Next Week`}
+              </p>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <p>
+                {data?.onVacation
+                  ? `${data?.name} Is on vacation:`
+                  : `${data?.name} Is going on vacation:`}
+              </p>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <p className="time-off-detail-modal-sub-heading">From:</p>
+              <p className="time-off-detail-modal-sub-section">
+                {moment(data?.startingDate).format('YYYY-MM-DD')}
+              </p>
+            </Col>
+          </Row>
+          {/* <div className="time-off-detail-modal-section">
+            
+          </div> */}
+          <Row>
+            <Col>
+              <p className="time-off-detail-modal-sub-heading">To:</p>
+              <p className="time-off-detail-modal-sub-section">
+                {moment(data?.endingDate).format('YYYY-MM-DD')}
+              </p>
+            </Col>
+          </Row>
+          <Row>
+            <Col>
+              <p className="time-off-detail-modal-sub-heading">For The Following reason:</p>
+              <p className="time-off-detail-modal-sub-section">{data?.reason}</p>
+            </Col>
+          </Row>
         </ModalBody>
       </Modal>
     </div>