updated detail modal

OneCommunityGlobal · Jan 27, 2024 · 65605de · 65605de
1 parent ade0898
commit 65605de
Showing 1 changed file with 44 additions and 23 deletions.
diff --git 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>