code

/* eslint-disable jsx-a11y/anchor-is-valid */
import './style.scss';

import { FC } from 'react';
import { Col, Nav, Row, Tab, Button } from 'react-bootstrap-v5';

import { selectLanguage, selectServiceScope } from '../../../../app/modules/auth';
import { TicketFlagResponse, TicketModel } from '../../../../app/modules/tickets';
import { ticketActions } from '../../../../app/modules/tickets/redux/TicketSlice';
import { toAbsoluteUrl } from '../../../../app/utils/helpers';
import { useAppDispatch, useAppSelector } from '../../../../setup/redux/Hooks';
import { Languages } from '../../../../app/utils/common/constants';
import { useTranslation } from 'react-i18next';

type Props = {
  data: TicketFlagResponse,
  loading?: boolean,
  onRefresh?: () => void,
}


const HeaderNotificationsMenu: React.FC<Props> = ({ data, loading, onRefresh }) => {
  const serviceScope = useAppSelector(selectServiceScope);
  const language = useAppSelector(selectLanguage);
  const rtlMode = language === Languages.ar ? true : false;
  const dispatch = useAppDispatch();
  const { t } = useTranslation();
  const handleOpenViewOrder = (ticketDetail: TicketModel) => {
    if(ticketDetail.packageId) {
      dispatch(ticketActions.setOpeningViewPackageModal(ticketDetail));
    } else {
      dispatch(ticketActions.setOpeningViewOrderModal(ticketDetail));
    }
  };

  return (
    <div
      className='menu menu-sub menu-sub-dropdown menu-column w-350px w-lg-375px'
      data-kt-menu='true'
    >
      <Tab.Container id="notification-app" defaultActiveKey="update">
        <Row className='app-notification'>
          <Col sm={12} className='rounded-top menu-tab' style={{ backgroundImage: `url('${toAbsoluteUrl('/media/misc/pattern-1.jpg')}')` }}>
            <div className='d-flex justify-content-between'>
              <h3 className='text-white fw-bold py-5 px-5'>
                {t('HEADER.MENU.NOTIFICATIONS')} <span className='fs-8 opacity-75 ps-3'>{data?.total || 0} {t('HEADER.MENU.REPORTS')}</span>
              </h3>
              <Button variant='' className='btn-sm' onClick={() => onRefresh?.()}>
                <i className="fas fa-sync text-white"></i>
              </Button>
            </div>

            <Nav variant="pills" className='ms-2'>
              <Nav.Item>
                <Nav.Link eventKey="log">{t('HEADER.MENU.LOGS')}</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="update">{t('HEADER.MENU.UPDATES')}</Nav.Link>
              </Nav.Item>
              <Nav.Item>
                <Nav.Link eventKey="alert">{t('HEADER.MENU.ALERTS')}</Nav.Link>
              </Nav.Item>
            </Nav>
          </Col>
          <Col sm={12} className='p-0 bg-white rounded-bottom'>
            <Tab.Content>
              <Tab.Pane eventKey="log">

                <div className='py-10 text-center border-top'>
                  <div className='text-muted'> No message today </div>
                </div>

              </Tab.Pane>
              <Tab.Pane eventKey="update">
                {loading ?
                  <div className='py-10 text-center border-top'>
                    <div className="spinner-border spinner-border-sm text-dark" role="status"></div>
                  </div>
                  :
                  <div className='overflow-auto mh-500px'>
                    {data.data.length > 0 ?

                      data.data.map((flag, index) => {
                        let major = serviceScope?.majorServices?.find(x => x.id === flag.majorId);

                        return (
                          <div className='noti-item' key={index} onClick={() => handleOpenViewOrder(flag)}>
                            <div dangerouslySetInnerHTML={{ __html: major?.svgIcon || '' }} className="major-svg"></div>
                            <div className='flex-root d-flex justify-content-between align-items-center p-2'>
                              <div className='w-100px'>
                                <div>{flag.customerName}</div>
                                <div>{flag.customerPhoneNumber}</div>
                              </div>
                            </div>
                            <div className={'badge badge-pill py-3 min px-3 w-200px  ' + flag.flagLevel}>
                              <div className='text-truncate'>{rtlMode ? flag.flagDescriptionAr : flag.flagDescription}</div>
                            </div>
                          </div>)
                      })
                      :
                      <div className='py-10 text-center border-top'>There aren't any flags</div>
                    }
                  </div>
                }

              </Tab.Pane>
              <Tab.Pane eventKey="alert">
                <div className='py-10 text-center border-top'>
                  <div className='text-muted'> No message today </div>
                </div>
              </Tab.Pane>
            </Tab.Content>
          </Col>
        </Row>
      </Tab.Container>
    </div >
  )
}

export { HeaderNotificationsMenu }

/* eslint-disable jsx-a11y/anchor-is-valid */
import { FC } from 'react';
import { Link } from 'react-router-dom';
import { Languages } from './Languages';
import { useDispatch } from 'react-redux';
import { useAppSelector } from '../../../../setup/redux/Hooks';
import { authActions, selectLanguage, selectUser } from '../../../../app/modules/auth/redux/AuthSlice';
import { toAbsoluteUrl } from '../../../../app/utils/helpers';

const HeaderUserMenu: FC = () => {
  const user = useAppSelector(selectUser);
  const language = useAppSelector(selectLanguage);

  const dispatch = useDispatch()
  const logout = () => {
    dispatch(authActions.logout())
  }

  return (
    <div
      className='menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg menu-state-primary fw-bold py-4 fs-6 w-275px'
      data-kt-menu='true'
    >
      <div className='menu-item px-3'>
        <div className='menu-content d-flex align-items-center px-3'>
          <div className='d-flex flex-column'>
            <div className='fw-bolder d-flex align-items-center fs-5'>
              {language === 'ar' ? user?.fullNameAr : user?.fullNameEn}
            </div>
            <a href='#' className='fw-bold text-muted text-hover-primary fs-7'>
              {user?.userType === '200' ? 'Service Provider' : 'Service Provider Admin'}
            </a>
          </div>
        </div>
      </div>
      <div className='separator my-2'></div>
      <Languages />
      <div className='separator my-2'></div>
      <div className='menu-item px-5'>
        <a onClick={logout} className='menu-link px-5'>
          Sign Out
        </a>
      </div>
    </div>
  )
}

export { HeaderUserMenu }