@argusoft/medplat-app-shell 1.0.6 → 1.0.8

package/src/views/custom-components/SideOverlay.jsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Drawer } from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import '@/views/custom-components/SideOverlay.scss';
+import useTrackEvent from '@/hooks/useTrackEvent';
+import { useSelector } from 'react-redux';
+import { getUseSkeleton } from '@/store/reducers/SkeletonReducer';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowCircleUp } from '@fortawesome/free-solid-svg-icons';
+
+export default function SideOverlay({
+  title,
+  onResetClick = () => {},
+  showSideBarTitle = true,
+  resetButtonLabel,
+  ModalProps = {},
+  FormBody,
+  handleOverlayState,
+  overlayOpen,
+  setHasMore = false,
+  isForm = true,
+  formProps,
+  dataTestId,
+}) {
+  const useSkeleton = useSelector(getUseSkeleton);
+  const trackEvent = useTrackEvent();
+  // console.log(overlayOpen);
+  return (
+    <div className="side-overlay">
+      {formProps?.isLoading && useSkeleton ? (
+        <div className="bg-gray-300 animate-pulse rounded-sm fixed top-1/2 right-0 transform -translate-y-1/2 w-8 h-20"></div>
+      ) : (
+        <>
+          {showSideBarTitle && (
+            <Grid className="button-container z-1200">
+              <Button
+                size="small"
+                className={`overlay-button ${overlayOpen ? 'overlay-active' : ''}`}
+                onClick={handleOverlayState}
+                data-testid={dataTestId}
+              >
+                {title}&nbsp;&nbsp;
+                <FontAwesomeIcon icon={faArrowCircleUp} className="" />
+              </Button>
+            </Grid>
+          )}
+        </>
+      )}
+
+      <Drawer
+        classes={{
+          paper: `overlay ${overlayOpen ? 'open' : ''} w-full sm:w-[350px]`,
+        }}
+        ModalProps={ModalProps}
+        anchor="right"
+        open={overlayOpen}
+        onClose={() => {
+          trackEvent('button_click', {
+            button_name: `${title}-close-button`,
+            button_type: 'filter_close',
+            button_id: dataTestId,
+          });
+          handleOverlayState();
+        }}
+      >
+        <div className="p-2.5 px-5 flex border-b font-medium text-lg justify-between">
+          {formProps?.isLoading && useSkeleton ? (
+            <div className="w-full flex">
+              <div className="bg-gray-300 animate-pulse rounded-sm h-[30px] w-[160px]"></div>
+            </div>
+          ) : (
+            title.toUpperCase()
+          )}
+          {resetButtonLabel && (
+            <Button
+              size="small"
+              className="reset-button"
+              variant="contained"
+              color="error"
+              onClick={onResetClick}
+              data-testid={`${dataTestId}-reset-button`}
+            >
+              {resetButtonLabel || 'Reset'}
+            </Button>
+          )}
+        </div>
+
+        <div className="overlay-body  overflow-y-auto max-h-[90vh]">
+          {isForm && FormBody && (
+            <FormBody handleOverlayState={handleOverlayState} setHasMore={setHasMore} {...formProps} />
+          )}
+          {!isForm && FormBody}
+        </div>
+      </Drawer>
+    </div>
+  );
+}
+
+SideOverlay.propTypes = {
+  title: PropTypes.any,
+  FormBody: PropTypes.any,
+  handleOverlayState: PropTypes.any,
+  overlayOpen: PropTypes.any,
+  setHasMore: PropTypes.any,
+  isForm: PropTypes.bool,
+  formProps: PropTypes.any,
+  dataTestId: PropTypes.any,
+  onResetClick: PropTypes.any,
+  resetButtonLabel: PropTypes.any,
+  ModalProps: PropTypes.any,
+  showSideBarTitle: PropTypes.bool,
+};

package/src/views/custom-components/SideOverlay.scss

@@ -0,0 +1,42 @@
+.side-overlay {
+  position: relative;
+}
+
+.button-container {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.overlay-button {
+  background-color: #4caf50 !important;
+  color: #fff !important;
+  padding: 2px 20px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  transform: rotate(90deg);
+  transform-origin: top right;
+  position: absolute;
+  right: 0;
+  top: 0;
+  white-space: nowrap;
+}
+
+.overlay {
+  width: 350px;
+  top: 0;
+  bottom: 0;
+}
+
+.overlay-active {
+  right: 350px;
+}
+
+.overlay-footer {
+  margin-top: 2rem;
+  margin-right: 1rem;
+  display: flex;
+  justify-content: flex-end;
+}

package/src/views/custom-components/calendar.scss

@@ -0,0 +1,571 @@
+.doctor-appointments {
+  height: calc(100vh - 138px) !important;
+
+  .left-box {
+    background-color: var(--color-background2);
+    padding: 12px;
+    border-radius: 10px;
+    height: 100%;
+  }
+
+  .left-box-new {
+    background-color: var(--color-background2);
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    height: 100%;
+  }
+
+  .right-box {
+    background-color: var(--color-background2);
+    padding: 12px;
+    border-radius: 10px;
+    height: 100%;
+  }
+}
+
+// full calendar customization for Today -view
+
+.doctor-appointments {
+  .left-box,
+  .left-box-new {
+    .blocked_day {
+      background-color: #e6eef1 !important;
+    }
+    .fc-timegrid-more-link {
+      height: 50px;
+    }
+    .fc-timegrid-body tr {
+      height: 50px;
+    }
+
+    .fc-filterButton-button {
+      background-color: #29bf91;
+      color: #ffffff;
+      margin: 3px 15px !important;
+      padding: 4.8px 7.8px !important;
+
+      &:active,
+      &:focus {
+        background-color: #29bf91;
+        box-shadow: none;
+      }
+    }
+
+    .fc-daygrid-more-link {
+      display: none;
+    }
+
+    .small-screen-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.3rem;
+      /* Optional: Adds space between items */
+      align-items: center;
+      justify-content: center;
+    }
+
+    .fc-toolbar-title {
+      color: var(--color-primary);
+      font-weight: 500;
+      line-height: 28px;
+    }
+
+    .fc-header-toolbar {
+      width: 100%;
+      margin-bottom: 0.5rem;
+      // padding: 5px;
+    }
+
+    .fc-toolbar-title {
+      color: var(--color-primary);
+      font-weight: 500;
+      line-height: 28px;
+    }
+
+    .fc-toolbar-chunk {
+      display: flex;
+      // margin-right: 5px;
+    }
+
+    .fc-toolbar-chunk:nth-child(1) {
+      width: 45%;
+      min-width: fit-content;
+    }
+
+    .fc-toolbar-chunk:nth-child(2) {
+      width: 25%;
+      min-width: fit-content;
+      margin-left: 7px;
+    }
+
+    .fc-toolbar-chunk:nth-child(3) {
+      width: 30%;
+      min-width: fit-content;
+      justify-content: space-around;
+      margin-right: 7px;
+    }
+
+    .fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
+      margin-left: 0em;
+    }
+
+    .fc-button-group {
+      .fc-button {
+        width: 33%;
+        padding: 9px;
+      }
+
+      // button{
+      //   padding: 9px;
+      // }
+    }
+
+    .fc-today-button {
+      width: 50px;
+    }
+
+    // event details
+    .fc-patient-name {
+      margin: 0 0 0 2px;
+      line-height: 19px;
+      font-weight: 500;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .fc-event {
+      background-color: transparent !important;
+      border: none !important;
+      display: flex;
+      cursor: pointer;
+    }
+
+    .fc-day-today {
+      background-color: var(--color-background2);
+    }
+
+    .fc-scrollgrid {
+      border-left: none !important;
+    }
+
+    // .fc-scroller {
+    //   scrollbar-width: none;
+    // }
+
+    .fc-scroller {
+      overflow: auto auto !important;
+    }
+
+    .fc-timegrid-slot-label-cushion {
+      line-height: 14px;
+      font-weight: 500;
+      color: var(--color-primary);
+      margin: auto 0;
+    }
+
+    // event item take equivalent visual space
+    .fc-event-main {
+      display: flex;
+      height: fit-content !important;
+      cursor: pointer;
+      // margin: auto 0;
+      width: 100%;
+      background-color: transparent !important;
+    }
+
+    .fc-button-group button {
+      width: 90px;
+      height: 40px;
+      background-color: var(--color-background2) !important;
+      color: var(--color-primary) !important;
+      border: 0.73px solid #e6eef1 !important;
+      padding: 10px;
+      border-radius: 6px 0 0 6px;
+      box-shadow: none !important;
+    }
+
+    .fc-button-group .fc-button-active {
+      background-color: #e6eef1 !important;
+    }
+
+    .fc-timegrid-event-harness > .fc-timegrid-event {
+      position: absolute;
+    }
+
+    .fc-col-header-cell {
+      line-height: 15px;
+      font-weight: 500;
+      color: var(--color-primary);
+    }
+
+    .fc-timegrid-event-harness-inset .fc-timegrid-event,
+    .fc-timegrid-event.fc-event-mirror,
+    .fc-timegrid-more-link {
+      box-shadow: none !important;
+    }
+    colgroup col {
+      width: 70px !important;
+      background-color: var(--color-background2);
+    }
+
+    // previous and next button
+    .fc-prev-button,
+    .fc-next-button {
+      width: 35px !important;
+      height: 35px !important;
+      padding: 0 !important;
+      border-radius: 6px !important;
+
+      .fc-icon {
+        color: var(--color-primary);
+      }
+    }
+
+    .fc-next-button {
+      margin-left: 10px !important;
+    }
+
+    // Today button
+    .fc-today-button {
+      background-color: var(--color-primary) !important;
+      width: 70px !important;
+      height: 35px !important;
+      margin-right: 10px !important;
+      margin-left: 10px !important;
+    }
+
+    // table header for current date
+    .fc-col-header {
+      .fc-day-today {
+        background-color: var(--color-primary) !important;
+        color: white;
+      }
+    }
+
+    // calendar resize fix when sidebar collapse
+    .fc-col-header,
+    .fc-daygrid-body,
+    .fc-scrollgrid-sync-table,
+    .fc-timegrid-body,
+    .fc-timegrid-body table {
+      width: 100% !important;
+    }
+
+    .fc-daygrid-event {
+      background-color: transparent;
+    }
+
+    // month view change cell height
+    .fc-scrollgrid-sync-table {
+      .fc-scrollgrid-sync-inner {
+        height: 112px !important;
+        min-height: 112px !important;
+      }
+    }
+
+    .fc-scrollgrid-section-body {
+      .fc-day {
+        height: 112px !important;
+        min-height: 112px !important;
+      }
+    }
+
+    .fc-listWeek-view {
+      overflow-x: auto;
+    }
+
+    .fc-listWeek-button {
+      border-radius: 0 6px 6px 0 !important;
+    }
+
+    .fc-list-table .fc-list-event:hover td.fc-list-event-time {
+      border-radius: 20px 0 0 20px;
+    }
+
+    .fc-list-table .fc-list-event:hover td.fc-list-event-title {
+      border-radius: 0 20px 20px 0;
+    }
+
+    .fc-list-event {
+      border-radius: 10px;
+      box-shadow: 0 2px 3px rgba(180, 179, 179, 0.3);
+      border: none !important;
+      margin: 10px;
+    }
+
+    .fc-list-event,
+    .fc-list-day-cushion {
+      td {
+        border: none;
+      }
+    }
+
+    .fc-list-event-time {
+      width: 15%;
+      line-height: 19px;
+      display: flex;
+      align-items: center;
+    }
+
+    .fc-list-event-title {
+      width: 85%;
+
+      .list-patient-name {
+        // width: 100%;
+        line-height: 19px;
+        font-weight: 500;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: #616161;
+      }
+
+      .list-patient-detail {
+        line-height: 19px;
+        font-weight: 400;
+        // overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        color: #616161;
+      }
+    }
+
+    .fc-list-event-dot {
+      display: none;
+    }
+
+    .fc-list-day {
+      .fc-list-day-cushion {
+        background-color: var(--color-background2);
+      }
+
+      .fc-list-day-text {
+        color: var(--color-primary);
+        font-weight: 600;
+        line-height: 20px;
+      }
+
+      .fc-list-day-side-text {
+        color: var(--color-primary);
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+
+    .appointment-count {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background-color: #29bf91;
+      color: white;
+      font-weight: 500;
+    }
+  }
+}
+
+.doctor-appointments {
+  .left-box,
+  .left-box-new {
+    // existing styles here
+
+    @media (max-width: 1200px) {
+      .fc-patient-name {
+        font-size: 12px;
+      }
+
+      .fc-toolbar-title {
+        font-size: 12px;
+      }
+
+      .fc-timegrid-slot-label-cushion {
+        font-size: 9px;
+      }
+
+      .fc-button-group {
+        .fc-button {
+          font-size: 12px;
+        }
+      }
+
+      .fc-today-button {
+        font-size: 12px;
+      }
+
+      .fc-list-day {
+        .fc-list-day-cushion {
+          background-color: var(--color-background2);
+        }
+
+        .fc-list-day-text {
+          font-size: 12px;
+        }
+
+        .fc-list-day-side-text {
+          font-size: 12px;
+        }
+      }
+
+      .fc-list-event-title {
+        width: 85%;
+
+        .list-patient-name {
+          font-size: 12px;
+        }
+
+        .list-patient-detail {
+          font-size: 12px;
+        }
+      }
+
+      .fc-list-event-time {
+        font-size: 9px;
+      }
+
+      .appointment-count {
+        font-size: 14px;
+      }
+
+      .fc-col-header-cell {
+        font-size: 11px;
+      }
+    }
+
+    @media (min-width: 1201px) and (max-width: 1536px) {
+      .fc-patient-name {
+        font-size: 13px;
+      }
+
+      .fc-toolbar-title {
+        font-size: 13px;
+      }
+
+      .fc-timegrid-slot-label-cushion {
+        font-size: 10px;
+      }
+
+      .fc-button-group {
+        .fc-button {
+          font-size: 13px;
+        }
+      }
+
+      .fc-today-button {
+        font-size: 13px;
+      }
+
+      .fc-list-day {
+        .fc-list-day-cushion {
+          background-color: var(--color-background2);
+        }
+
+        .fc-list-day-text {
+          font-size: 13px;
+        }
+
+        .fc-list-day-side-text {
+          font-size: 13px;
+        }
+      }
+
+      .fc-list-event-title {
+        width: 85%;
+
+        .list-patient-name {
+          font-size: 13px;
+        }
+
+        .list-patient-detail {
+          font-size: 13px;
+        }
+      }
+
+      .fc-list-event-time {
+        font-size: 10px;
+      }
+
+      .appointment-count {
+        font-size: 15px;
+      }
+
+      .fc-col-header-cell {
+        font-size: 12px;
+      }
+    }
+
+    @media (min-width: 1537px) {
+      .fc-patient-name {
+        font-size: 14px;
+      }
+
+      .fc-toolbar-title {
+        font-size: 14px;
+      }
+
+      .fc-timegrid-slot-label-cushion {
+        font-size: 11px;
+      }
+
+      .fc-button-group {
+        .fc-button {
+          font-size: 14px;
+        }
+      }
+
+      .fc-today-button {
+        font-size: 14px;
+      }
+
+      .fc-list-day {
+        .fc-list-day-cushion {
+          background-color: var(--color-background2);
+        }
+
+        .fc-list-day-text {
+          font-size: 14px;
+        }
+
+        .fc-list-day-side-text {
+          font-size: 14px;
+        }
+      }
+
+      .fc-list-event-title {
+        width: 85%;
+
+        .list-patient-name {
+          font-size: 14px;
+        }
+
+        .list-patient-detail {
+          font-size: 14px;
+        }
+      }
+
+      .fc-list-event-time {
+        font-size: 11px;
+      }
+
+      .appointment-count {
+        font-size: 16px;
+      }
+
+      .fc-col-header-cell {
+        font-size: 13px;
+      }
+    }
+  }
+}
+
+.appointment-card {
+  padding: 12px;
+  border-radius: 10px;
+  border: none;
+  box-shadow: none;
+  line-height: normal;
+  background-color: #f2f6f8;
+  margin: 15px 0;
+}