\r\n
\r\n ) : (\r\n \r\n \r\n {t(JSON.stringify(navItem?.title?.toUpperCase())?.replace(/\\\"/g, ''))}\r\n \r\n
\r\n\r\n \r\n
\r\n ))}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default function DefaultNavbar() {\r\n const [openNavbar, setOpenNavbar] = useState(false);\r\n const [localStore, setLocalStore] = useState('');\r\n const { t, i18n } = useTranslation();\r\n const {\r\n GetByCategory,\r\n catArticles,\r\n GetLatest,\r\n GetHistory,\r\n GetPress,\r\n historyArticles,\r\n latestArticles,\r\n pressArticles,\r\n GetBySlug,\r\n slugArticle,\r\n } = useArticleContext();\r\n const { GetAllVideos } = useVideoContext();\r\n const { GetLibraries } = useLibraryContext();\r\n const { GetAllPorts } = usePortContext();\r\n const { GetAboutUsPage } = useAboutContext();\r\n const { getServices } = useServiceContext();\r\n const { getFacility } = useFacilityContext();\r\n\r\n if (localStore == null || localStore == undefined) {\r\n localStore = \"en\";\r\n localStorage.setItem(\"locale\", \"en\");\r\n }\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n setLocalStore(localStoreVar);\r\n var pathname = window.location.pathname;\r\n if (pathname == '/announcement' && localStore == 'en') {\r\n window.open('/', '_self');\r\n }\r\n }, [localStore]);\r\n\r\n function ChangeLanguage() {\r\n if (localStore == 'en') {\r\n i18n.changeLanguage('ar');\r\n localStorage.setItem('locale', 'ar');\r\n setLocalStore('ar');\r\n document.body.dir = 'rtl';\r\n RefreshData('ar');\r\n } else if (localStore == 'ar') {\r\n i18n.changeLanguage('en');\r\n localStorage.setItem('locale', 'en');\r\n setLocalStore('en');\r\n document.body.dir = 'ltr';\r\n RefreshData('en');\r\n }\r\n }\r\n\r\n function RefreshData(locale) {\r\n var url = window.location.pathname;\r\n if (url == '/media-center') {\r\n GetByCategory('News', locale);\r\n GetByCategory('Mawani-Newsletter', locale);\r\n GetByCategory('Photos', locale);\r\n GetAllVideos(locale);\r\n GetLibraries(locale);\r\n }\r\n if (url == '/ports') {\r\n GetAllPorts(locale);\r\n }\r\n if (url == '/about-us') {\r\n GetAboutUsPage(locale);\r\n }\r\n if (url == '/e-services') {\r\n getServices(locale);\r\n getFacility(locale);\r\n }\r\n if (url == '/') {\r\n GetByCategory('Mawani-Newsletter', locale);\r\n GetLatest(locale);\r\n GetHistory(locale);\r\n GetPress(locale);\r\n }\r\n if (url == '/history') {\r\n GetByCategory('Mawani-Newsletter', locale);\r\n }\r\n if (url == '/article') {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n let code = urlParams.get('a');\r\n GetBySlug(code, locale);\r\n }\r\n }\r\n\r\n return (\r\n \r\n setOpenNavbar(!openNavbar)}\r\n color=\"white\"\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('Customer Portal')}\r\n \r\n
\r\n )}\r\n {localStore && localStore === 'ar' && (\r\n \r\n \r\n
\r\n \r\n \r\n {t('Customer Portal')}\r\n \r\n
\r\n )}\r\n \r\n );\r\n};\r\n","export default __webpack_public_path__ + \"static/media/facebook.286cdd58.svg\";","export default __webpack_public_path__ + \"static/media/linkedin.fa7e5607.svg\";","export default __webpack_public_path__ + \"static/media/twitter.895a4ae7.svg\";","export default __webpack_public_path__ + \"static/media/instagram.f004eec4.svg\";","export default __webpack_public_path__ + \"static/media/youtube.98cefa3e.svg\";","export default __webpack_public_path__ + \"static/media/tiktok.b48c7688.svg\";","import styles from './Information.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nimport facebook from './../../../../src/assets/img/icons/facebook.svg';\r\nimport linkedin from './../../../../src/assets/img/icons/linkedin.svg';\r\nimport twitter from './../../../../src/assets/img/icons/twitter.svg';\r\nimport instagram from './../../../../src/assets/img/icons/instagram.svg';\r\nimport youtube from './../../../../src/assets/img/icons/youtube.svg';\r\nimport tiktok from './../../../../src/assets/img/icons/tiktok.svg';\r\n\r\nexport default function SocialLinks() {\r\n const { t } = useTranslation();\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/Icon-02.526c963c.png\";","export default __webpack_public_path__ + \"static/media/Icon-03.fe48aa71.png\";","export default __webpack_public_path__ + \"static/media/Icon-04.c43e6c7a.png\";","import axios from 'axios';\r\n\r\nexport default axios.create({\r\n baseURL: process.env.REACT_APP_MAWANI_API_URL,\r\n headers: {\r\n 'Content-type': 'application/json',\r\n },\r\n});\r\n","export const sortBiddings = (biddings) =>{\r\n const nullDateBiddings = biddings?.filter(item => item.compFinalDateAr === null || item.compFinalDateAr?.trim()===\"\");\r\n const sortedBiddings = biddings?.filter(item => item.compFinalDateAr !== null && item.compFinalDateAr?.trim() !== \"\" );\r\n \r\n if(Array.isArray(sortedBiddings)){\r\n sortedBiddings?.sort(function (b1, b2) {\r\n if (new Date(b1.compFinalDateAr) > new Date(b2.compFinalDateAr)) {\r\n return -1;\r\n }\r\n if (new Date(b1.compFinalDateAr) < new Date(b2.compFinalDateAr)) {\r\n return 1;\r\n }\r\n return 0;\r\n });\r\n }\r\n \r\n return sortedBiddings?.concat(nullDateBiddings);\r\n}","import React, {\r\n createContext,\r\n useContext,\r\n useEffect,\r\n useState,\r\n useCallback,\r\n} from 'react';\r\nimport externalHttp from '../externalHttp';\r\nimport { sortBiddings } from 'utils/sortHelper';\r\nconst ExternalContext = createContext();\r\nexport const useExternalContext = () => {\r\n return useContext(ExternalContext);\r\n};\r\nexport const ExternalProvider = ({ children }) => {\r\n const [biddings, setBiddings] = useState('');\r\n const [captchaData, setCaptchaData] = useState('');\r\n const [vesselSearchData, setVesselSearchData] = useState(null);\r\n const [agentSearchData, setAgentSearchData] = useState(null);\r\n const [lookupsData, setLookupsData] = useState(null);\r\n const [transactionStatusData, setTransactionStatusData] = useState(null);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [mainCategoriesData, setMainCategoriesData] = useState(null);\r\n const [subCatergoriesData, setSubCatergoriesData] = useState(null);\r\n const [movableData, setMovableData] = useState(null);\r\n const [announcements, setAnnouncements] = useState([])\r\n\r\n const handleApiError = useCallback((error) => {\r\n console.error(error);\r\n setIsLoading(false);\r\n }, []);\r\n\r\n async function vesselSearch(data) {\r\n setVesselSearchData([]);\r\n if (!data) return;\r\n\r\n setIsLoading(true);\r\n await externalHttp\r\n .get('/searchVesselSchedule', {\r\n params: {\r\n TrafficType: data.Status,\r\n port: data.Port,\r\n ArrivalDate: data.StartDate,\r\n DepartureDate: data.EndDate,\r\n agent: data.AgentName,\r\n vessel: data.VesselName,\r\n captcha: data.captcha,\r\n },\r\n })\r\n .then((response) => {\r\n setVesselSearchData(response.data);\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n setVesselSearchData(error.response.data);\r\n handleApiError(error);\r\n });\r\n }\r\n\r\n async function agentSearch(data) {\r\n setAgentSearchData([]);\r\n if (!data) return;\r\n\r\n await externalHttp\r\n .get('/searchAgents', {\r\n params: {\r\n port: data.Port,\r\n title: data.AgentName,\r\n captcha: data.captcha,\r\n },\r\n })\r\n .then((response) => {\r\n setAgentSearchData(response.data);\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n setAgentSearchData(error.response.data);\r\n handleApiError(error);\r\n });\r\n }\r\n\r\n async function getCaptcha() {\r\n await externalHttp\r\n .get('/captcha')\r\n .then((response) => {\r\n setCaptchaData(response.data?.data || []);\r\n })\r\n .catch(handleApiError);\r\n }\r\n\r\n async function getLookups() {\r\n if (lookupsData) return;\r\n await externalHttp\r\n .get('/lookups')\r\n .then((response) => {\r\n console.log(response);\r\n setLookupsData(response.data?.data || {});\r\n })\r\n .catch(handleApiError);\r\n }\r\n\r\n async function getBiddings() {\r\n if (biddings?.length > 0) return;\r\n externalHttp\r\n .get('/biddings')\r\n .then((response) => {\r\n const biddings = sortBiddings(response.data?.data || []);\r\n setBiddings(biddings);\r\n setIsLoading(false);\r\n })\r\n .catch(handleApiError);\r\n }\r\n\r\n async function getTransactionStatus({ DocumentNumber, HDate, captcha }) {\r\n setTransactionStatusData(null);\r\n if (!DocumentNumber || !HDate || !captcha) return;\r\n\r\n setIsLoading(true);\r\n await externalHttp\r\n .get('/transactionStatus', {\r\n params: {\r\n DocumentNumber,\r\n HDate,\r\n captcha,\r\n },\r\n })\r\n .then((response) => {\r\n setTransactionStatusData(response.data || {});\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n setTransactionStatusData(error.response.data || {});\r\n handleApiError(error);\r\n });\r\n }\r\n\r\n async function submitJobsForm(data) {\r\n setIsLoading(true);\r\n return externalHttp\r\n .post('/applyJob', data)\r\n .then((response) => {\r\n setIsLoading(false);\r\n return response?.data;\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n return error?.response?.data;\r\n });\r\n }\r\n\r\n async function submitContactUsForm(data) {\r\n setIsLoading(true);\r\n return externalHttp\r\n .post('/contactUs', data)\r\n .then((response) => {\r\n setIsLoading(false);\r\n return response?.data;\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n return error?.response?.data;\r\n });\r\n }\r\n\r\n async function submitOrderForm(data) {\r\n setIsLoading(true);\r\n return externalHttp\r\n .post('/orderForm', data)\r\n .then((response) => {\r\n setIsLoading(false);\r\n return response?.data;\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n return error?.response?.data;\r\n });\r\n }\r\n\r\n async function getMainCategories() {\r\n if (mainCategoriesData?.length > 0) return;\r\n setIsLoading(true);\r\n await externalHttp\r\n .get('/mainCategories')\r\n .then((response) => {\r\n setMainCategoriesData(response?.data?.data || []);\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n });\r\n }\r\n\r\n async function getSubCategories({ mainCategory }) {\r\n setIsLoading(true);\r\n await externalHttp\r\n .get('/subCategories', {\r\n params: {\r\n maincategory: mainCategory,\r\n },\r\n })\r\n .then((response) => {\r\n setSubCatergoriesData(response?.data?.data || []);\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n });\r\n }\r\n\r\n async function getMovable({ subCategory }) {\r\n setIsLoading(true);\r\n await externalHttp\r\n .get('/movable', {\r\n params: {\r\n subCategory,\r\n },\r\n })\r\n .then((response) => {\r\n setMovableData(response?.data?.data || {});\r\n setIsLoading(false);\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n });\r\n }\r\n async function submitRemarksForm(data) {\r\n setIsLoading(true);\r\n return externalHttp\r\n .post('/remarks', data)\r\n .then((response) => {\r\n setIsLoading(false);\r\n return response?.data;\r\n })\r\n .catch((error) => {\r\n handleApiError(error);\r\n return error?.response?.data;\r\n });\r\n }\r\n\r\n async function getAnnouncements() {\r\n if (announcements?.length > 0) return;\r\n externalHttp\r\n .get('/getAnnouncements')\r\n .then((response) => {\r\n setAnnouncements(response.data?.data || []);\r\n setIsLoading(false);\r\n })\r\n .catch(handleApiError);\r\n }\r\n const value = {\r\n biddings,\r\n vesselSearch,\r\n vesselSearchData,\r\n agentSearch,\r\n agentSearchData,\r\n apiLoading: isLoading,\r\n getCaptcha,\r\n captchaData,\r\n lookupsData,\r\n getLookups,\r\n getBiddings,\r\n getTransactionStatus,\r\n transactionStatusData,\r\n submitJobsForm,\r\n submitContactUsForm,\r\n submitOrderForm,\r\n mainCategoriesData,\r\n subCatergoriesData,\r\n movableData,\r\n getMainCategories,\r\n getSubCategories,\r\n getMovable,\r\n submitRemarksForm,\r\n announcements,\r\n getAnnouncements\r\n };\r\n\r\n return (\r\n 
\r\n \r\n \r\n
\r\n );\r\n};\r\n","import chatbot from '../../../src/assets/img/chatbot/Icon-02.png';\r\nimport chat from '../../../src/assets/img/chatbot/Icon-03.png';\r\nimport callBack from '../../../src/assets/img/chatbot/Icon-04.png';\r\nimport { useExternalContext } from 'contexts/ExternalContext';\r\nimport { useForm } from 'react-hook-form';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Alert } from '@mui/material';\r\nimport { Loader } from 'components/Loader';\r\nimport styles from './ChatBot.module.scss';\r\nimport { useState, useEffect, useRef, useCallback } from 'react';\r\n// import close from '../../assets/img/close.svg';\r\n\r\nexport default function ChatBot() {\r\n const formRef = useRef(null);\r\n const { t, i18n } = useTranslation();\r\n var localStoreVar = localStorage.getItem('locale');\r\n\r\n const [clicked, setClicked] = useState(false);\r\n const [chatClicked, setChatClicked] = useState(false);\r\n const [callBackClicked, setCallBackClicked] = useState(false);\r\n let script = document.createElement('script');\r\n const {\r\n register,\r\n handleSubmit,\r\n formState: { errors },\r\n setError,\r\n reset,\r\n } = useForm();\r\n\r\n const { apiLoading, submitRemarksForm } = useExternalContext();\r\n const [success, setSuccess] = useState(null);\r\n useEffect(() => {\r\n i18n.changeLanguage(localStoreVar);\r\n }, [localStoreVar]);\r\n const buttonClicked = () => {\r\n setClicked((prev) => !prev);\r\n };\r\n const buttonChatClicked = () => {\r\n setChatClicked((prev) => !prev);\r\n };\r\n const buttonCallBackClicked = () => {\r\n setCallBackClicked((prev) => !prev);\r\n };\r\n const handleClose = () => {\r\n setClicked(false);\r\n setChatClicked(false);\r\n setCallBackClicked(false);\r\n };\r\n\r\n const load = () => {\r\n if (!window?.WebChat) setTimeout(load, 100);\r\n if (window?.WebChat)\r\n window?.WebChat.default({\r\n customData: { language: localStoreVar },\r\n socketUrl: 'https://uniithra.experiaapp.com',\r\n socketPath: '/ws',\r\n withRules: true,\r\n docViewer: true,\r\n initPayload: 'hello',\r\n title: localStoreVar === 'ar' ? 'المساعد الرقمي' : 'Digital Assistance',\r\n profileAvatar:\r\n 'https://objectstorage.me-jeddah-1.oraclecloud.com/n/axkrtyuep33x/b/ExperiaCDN/o/mawani.svg',\r\n openLauncherImage:\r\n 'https://objectstorage.me-jeddah-1.oraclecloud.com/n/axkrtyuep33x/b/ExperiaCDN/o/comment-dots.svg',\r\n closeImage:\r\n 'https://objectstorage.me-jeddah-1.oraclecloud.com/n/axkrtyuep33x/b/ExperiaCDN/o/angle-down.svg',\r\n showMessageDate: true,\r\n allowFileUpload: true,\r\n inputTextFieldHint:\r\n localStoreVar === 'ar' ? 'كيف اقدر اساعدك' : 'How can I help you',\r\n showCloseButton: true,\r\n params: {\r\n storage: 'session',\r\n },\r\n openOnLoad: true,\r\n // withRules: true,\r\n // docViewer: true,\r\n onWidgetEvent: {\r\n onChatClose: () => {\r\n document\r\n .getElementById('rasaWebchatPro')\r\n ?.setAttribute('style', 'display:none');\r\n setChatClicked(false);\r\n setClicked(false);\r\n setCallBackClicked(false);\r\n },\r\n },\r\n // mainColor:\r\n });\r\n document\r\n .getElementById('rasaWebchatPro')\r\n ?.setAttribute('style', 'display:block');\r\n };\r\n\r\n useEffect(() => {\r\n if (chatClicked) {\r\n const src =\r\n 'https://objectstorage.me-jeddah-1.oraclecloud.com/n/axkrtyuep33x/b/ExperiaCDN/o/index.js';\r\n script.src = src;\r\n script.async = true;\r\n document.body.appendChild(script);\r\n setTimeout(load, 200);\r\n return () => {\r\n document.body.removeChild(script);\r\n };\r\n }\r\n }, [localStoreVar, chatClicked]);\r\n\r\n const handleMin = () => {\r\n setClicked(true);\r\n setCallBackClicked(false);\r\n setChatClicked(false);\r\n };\r\n const onSubmit = async (data) => {\r\n setSuccess(null);\r\n\r\n console.log(data);\r\n\r\n const request = {\r\n name: data.name,\r\n phoneNumber: data.mobileNumber,\r\n details: data.details,\r\n };\r\n\r\n const resp = await submitRemarksForm(request);\r\n\r\n if (resp?.isSuccess === true) {\r\n reset();\r\n setSuccess(true);\r\n formRef.current?.scrollIntoView({ behavior: 'smooth' });\r\n } else {\r\n setSuccess(false);\r\n }\r\n };\r\n return (\r\n <>\r\n \r\n {clicked === false &&\r\n chatClicked === false &&\r\n callBackClicked === false && (\r\n \r\n )}\r\n {clicked === true &&\r\n chatClicked === false &&\r\n callBackClicked === false && (\r\n
SAUDI PORTS AUTHORITY',\r\n 'LEADING THE MARITIME TRANSPORT INDUSTRY TOWARDS OPPORTUNITIES',\r\n 'POSITIONING SAUDI ARABIA AS A GLOBAL LOGISTICS HUB',\r\n ];\r\n var messagesAR = [\r\n 'مرحبا بكم
في الهيئة العامة للموانئ',\r\n 'نُرسخ مكانة المملكة كمركز لوجستي عالمي ',\r\n 'نقود صناعة النقل البحري نحو محيط زاخر بالفرص',\r\n ];\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n setLocalStore(localStoreVar);\r\n if (localStoreVar == 'en') {\r\n document.body.dir = 'ltr';\r\n i18n.changeLanguage('en');\r\n } else if (localStoreVar == 'ar') {\r\n document.body.dir = 'rtl';\r\n i18n.changeLanguage('ar');\r\n } else {\r\n document.body.dir = 'ltr';\r\n i18n.changeLanguage('en');\r\n }\r\n }, [localStorage.getItem('locale')]);\r\n const wantHandler = (event) => {\r\n const value = event.target.value;\r\n if (value == 10) {\r\n setIWantCurrent(IWantListInvestor);\r\n } else if (value == 20) {\r\n setIWantCurrent(IWantListShipping);\r\n } else if (value == 30) {\r\n setIWantCurrent(IWantListOperator);\r\n }\r\n };\r\n const linkHandler = (event) => {\r\n const value = event.target.value;\r\n console.log(value);\r\n var link = '';\r\n if (value == t('Invest in Mawani Port')) {\r\n link = refPageList[0];\r\n } else if (value == t('Explore Regulations')) {\r\n link = refPageList[1];\r\n } else if (value == t('Obtain a new License')) {\r\n link = refPageList[2];\r\n } else if (value == t('Request for rental of facilities Dropdown')) {\r\n link = refPageList[3];\r\n } else if (value == t(\"Explore Mawani's E-services\")) {\r\n link = refPageList[4];\r\n }\r\n setWantLink(link);\r\n };\r\n\r\n return (\r\n\r\n \r\n
\r\n \r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/icn-license.644fd8bd.svg\";","export default __webpack_public_path__ + \"static/media/icn-envir.dac6f73b.svg\";","export default __webpack_public_path__ + \"static/media/icn-reg.88ab049c.svg\";","export default __webpack_public_path__ + \"static/media/icn-safety.41a9af96.svg\";","export default __webpack_public_path__ + \"static/media/info2.aff139cd.svg\";","export default __webpack_public_path__ + \"static/media/mawani_video.d6fa002e.mp4\";","import AliceCarousel from 'react-alice-carousel';\r\nimport { Player } from 'video-react';\r\nimport H6 from '@material-tailwind/react/Heading6';\r\nimport environment from '../../assets/img/icons/icn-envir.svg';\r\nimport licence from '../../assets/img/icons/icn-license.svg';\r\nimport regulations from '../../assets/img/icons/icn-reg.svg';\r\nimport safety from '../../assets/img/icons/icn-safety.svg';\r\nimport backArrow from '../../assets/img/backArrow.png';\r\nimport forwardArrow from '../../assets/img/forwardArrow.png';\r\nimport 'video-react/dist/video-react.css';\r\nimport 'react-alice-carousel/lib/alice-carousel.css';\r\nimport styles from './Home.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\nimport React, { useEffect, useState } from 'react';\r\nimport info from '../../../src/assets/img/icons/info2.svg';\r\nimport mawaniVideo from '../../assets/videos/mawani_video.mp4';\r\n\r\nexport default function ServiceSectionTitle({ heading, children }) {\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n return (\r\n \r\n \r\n \r\n 
\r\n \r\n
\r\n )}\r\n\r\n {callBackClicked === true && (\r\n \r\n \r\n {success && (\r\n \r\n {t('Message Sent')}\r\n \r\n )}\r\n {success === false && (\r\n \r\n {t('Something went wrong')}\r\n \r\n )}\r\n
\r\n \r\n );\r\n}\r\n","import classNames from 'classnames';\r\nimport styles from './Footer.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useState, useEffect, useRef, useCallback } from 'react';\r\nimport { usePortContext } from '../../contexts/PortContext.js';\r\nimport SocialLinks from 'components/home/Information/SocialLinks';\r\nimport { useHistory } from 'react-router-dom';\r\nimport ChatBot from './chatbot';\r\n\r\nexport default function Footer() {\r\n const { t, i18n } = useTranslation();\r\n const { ports, GetAllPorts } = usePortContext();\r\n const history = useHistory();\r\n\r\n var localStoreVar = localStorage.getItem('locale');\r\n const isArabicLocale = localStoreVar == 'ar';\r\n\r\n const footerPadding = classNames({\r\n [styles.footerListPadding]: !isArabicLocale,\r\n });\r\n\r\n useEffect(() => {\r\n i18n.changeLanguage(localStoreVar);\r\n GetAllPorts(localStoreVar);\r\n }, [localStoreVar]);\r\n\r\n const handleOnClickUrl = (urlHash) => {\r\n history.push(`/about-us#${urlHash}`);\r\n history.go(0);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/video.222ef922.mp4\";","export default __webpack_public_path__ + \"static/media/Home_Video.9d0cbe42.gif\";","import { fade } from '@material-ui/core';\r\nimport Markdown from 'markdown-to-jsx';\r\nimport React, {useEffect, useState } from 'react';\r\nimport styles from './fader.module.scss';\r\n\r\nconst Fader = ({text,interval}) => {\r\n const [messageIndex, setMessageIndex] = useState(0);\r\n const [fadeProp, setFadeProp] = useState(styles.fadeIn);\r\n useEffect(() => {\r\n const fades = setInterval(() => {\r\n setFadeProp(styles.fadeOut)\r\n },interval-1000)\r\n return () => { clearInterval(fades) }\r\n }, [fadeProp])\r\n\r\n useEffect(() => {\r\n const timeout = setInterval(() => {\r\n if (messageIndex >= text.length-1) {\r\n setMessageIndex(0);\r\n } else {\r\n setMessageIndex(messageIndex => messageIndex +1)\r\n }\r\n setFadeProp(styles.fadeIn);\r\n },interval)\r\n\r\n return () => { clearInterval(timeout) }\r\n\r\n }, [messageIndex])\r\n\r\n return (\r\n \r\n
\r\n {t('Callback')}
\r\n \r\n \r\n\r\n \r\n {errors.name && (\r\n \r\n {t('ERROR NAME')}\r\n \r\n )}\r\n
\r\n\r\n \r\n \r\n {errors.mobileNumber && (\r\n \r\n {t('ERROR MOBILE')}\r\n \r\n )}\r\n
\r\n \r\n {/*
\r\n )}\r\n */}\r\n \r\n {errors.details && (\r\n \r\n {t('ERROR DETAILS')}\r\n \r\n )}\r\n
\r\n {apiLoading && {text[messageIndex] && {text[messageIndex]} }
\r\n ) \r\n}\r\nexport default Fader;","import H3 from '@material-tailwind/react/Heading3';\r\nimport { FaSistrix } from 'react-icons/fa';\r\nimport { Select, MenuItem, FormControl, InputLabel } from '@mui/material';\r\n\r\nimport video from '../../assets/videos/video.mp4';\r\nimport home_gif from '../../assets/img/Home_Video.gif';\r\nimport styles from './Header.module.scss';\r\nimport { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Fader from './fader';\r\n\r\nexport default function Header() {\r\n const [wantLink, setWantLink] = useState('#');\r\n const [iWantCurrent, setIWantCurrent] = useState([]);\r\n const [refPageCurrent, setRefPageCurrent] = useState([]);\r\n const { t, i18n } = useTranslation();\r\n const [localStore, setLocalStore] = useState('');\r\n\r\n var IAmList = [\r\n { val: 10, title: t('Investor') },\r\n { val: 20, title: t('Shipping Agent') },\r\n { val: 30, title: t('Operator') },\r\n ];\r\n var IWantListInvestor = [\r\n t('Invest in Mawani Port'),\r\n t('Explore Regulations'),\r\n t('Request for rental of facilities Dropdown'),\r\n t(\"Explore Mawani's E-services\"),\r\n ];\r\n var IWantListInvestor = [\r\n { val: 10, title: t('Invest in Mawani Port') },\r\n { val: 20, title: t('Explore Regulations') },\r\n { val: 30, title: t('Request for rental of facilities Dropdown') },\r\n { val: 40, title: t(\"Explore Mawani's E-services\") },\r\n ];\r\n var IWantListShipping = [t('Obtain a new License'), t('Explore Regulations')];\r\n var IWantListShipping = [\r\n { val: 10, title: t('Obtain a new License') },\r\n { val: 20, title: t('Explore Regulations') },\r\n ];\r\n var IWantListOperator = [{ val: 10, title: t('Explore Regulations') }];\r\n var refPageList = [\r\n '/ports',\r\n '/regulations',\r\n '/e-services?o=license',\r\n '/e-services?o=request-for-rental-of-facilities',\r\n '/e-services',\r\n ];\r\n var messagesEN = [\r\n 'WELCOME TO SAUDI PORTS AUTHORITY',\r\n 'LEADING THE MARITIME TRANSPORT INDUSTRY TOWARDS OPPORTUNITIES',\r\n 'POSITIONING SAUDI ARABIA AS A GLOBAL LOGISTICS HUB',\r\n ];\r\n var messagesAR = [\r\n 'مرحبا بكم
في الهيئة العامة للموانئ',\r\n 'نُرسخ مكانة المملكة كمركز لوجستي عالمي ',\r\n 'نقود صناعة النقل البحري نحو محيط زاخر بالفرص',\r\n ];\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n setLocalStore(localStoreVar);\r\n if (localStoreVar == 'en') {\r\n document.body.dir = 'ltr';\r\n i18n.changeLanguage('en');\r\n } else if (localStoreVar == 'ar') {\r\n document.body.dir = 'rtl';\r\n i18n.changeLanguage('ar');\r\n } else {\r\n document.body.dir = 'ltr';\r\n i18n.changeLanguage('en');\r\n }\r\n }, [localStorage.getItem('locale')]);\r\n const wantHandler = (event) => {\r\n const value = event.target.value;\r\n if (value == 10) {\r\n setIWantCurrent(IWantListInvestor);\r\n } else if (value == 20) {\r\n setIWantCurrent(IWantListShipping);\r\n } else if (value == 30) {\r\n setIWantCurrent(IWantListOperator);\r\n }\r\n };\r\n const linkHandler = (event) => {\r\n const value = event.target.value;\r\n console.log(value);\r\n var link = '';\r\n if (value == t('Invest in Mawani Port')) {\r\n link = refPageList[0];\r\n } else if (value == t('Explore Regulations')) {\r\n link = refPageList[1];\r\n } else if (value == t('Obtain a new License')) {\r\n link = refPageList[2];\r\n } else if (value == t('Request for rental of facilities Dropdown')) {\r\n link = refPageList[3];\r\n } else if (value == t(\"Explore Mawani's E-services\")) {\r\n link = refPageList[4];\r\n }\r\n setWantLink(link);\r\n };\r\n\r\n return (\r\n
\r\n \r\n {/*
*/}\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {/*
\r\n );\r\n}\r\n","import ServiceSectionTitle from './ServiceSectionTitle';\r\nimport styles from \"./Home.module.scss\";\r\nimport React, { useEffect, useState } from \"react\";\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nexport default function ServiceSection() {\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, [])\r\n return (\r\n \r\n {t('SERVICES')}\r\n {heading}\r\n
\r\n\r\n\r\n
\r\n \r\n
*/}\r\n \r\n \r\n
\r\n \r\n 
\r\n
\r\n {t('REGULATIONS & CIRCULARS')}\r\n \r\n \r\n \r\n 
\r\n
\r\n {t('LICENCES & PERMITS')}\r\n \r\n\r\n \r\n \r\n 
\r\n
\r\n {t('ABOUT US')}\r\n \r\n\r\n {/* */}\r\n {/* */}\r\n {/* 
*/}\r\n {/*
*/}\r\n {/* {t(\"SAFETY & SECURITY\")} */}\r\n {/* */}\r\n {/**/}\r\n {/* */}\r\n {/* */}\r\n {/* 
*/}\r\n {/*
*/}\r\n {/* {t(\"ENVIROMENT & COMMUNITY\")} */}\r\n {/* */}\r\n {/**/}\r\n \r\n
\r\n );\r\n};\r\nexport default MediaCenter;\r\n","/**\r\n * Converts a date string to the format DD/MM/YYYY\r\n * @param {string} dateString - The date string to convert\r\n * @returns {string} The formatted date string\r\n */\r\nexport const formatDateToDayMonthYearString = (dateString: string): string => {\r\n const date = new Date(dateString+'T00:00:00');\r\n const day = date.getDate().toString().padStart(2, '0');\r\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\r\n const year = date.getUTCFullYear();\r\n\r\n if (!(day && month && year)) return dateString;\r\n return `${day}/${month}/${year}`;\r\n};\r\n\r\nexport const formatDateToTableFormat = (isoDateStr: string) => {\r\n const date = new Date(isoDateStr);\r\n const day = date.getDate().toString().padStart(2, '0');\r\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\r\n const year = date.getFullYear().toString();\r\n const hours = date.getHours() % 12 || 12;\r\n const minutes = date.getMinutes().toString().padStart(2, '0');\r\n const ampm = date.getHours() < 12 ? 'AM' : 'PM';\r\n return `${day}/${month}/${year} ${hours}:${minutes} ${ampm}`;\r\n};\r\n","import styles from './MediaCenter.module.scss';\r\nimport { useArticleContext } from 'contexts/ArticleContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useEffect } from 'react';\r\nimport { BASE_URL } from 'utils/constants';\r\nimport { formatDateToDayMonthYearString } from 'utils/format.string';\r\n\r\nconst News = ({ limit = null }) => {\r\n const { t, i18n } = useTranslation();\r\n const { GetLatest, latestArticles } = useArticleContext();\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n useEffect(() => {\r\n GetLatest(localStore);\r\n }, [localStore]);\r\n return (\r\n \r\n {videos &&\r\n videos\r\n ?.sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1) -\r\n new Date(a.attributes?.PublishDate || -1),\r\n )\r\n ?.slice(0, limit || videos.length)\r\n .map(({ id, attributes: { Summary, URL, Thumbnail } }, i) => (\r\n \r\n {Thumbnail != null && Thumbnail.data != null && (\r\n
\r\n \r\n
\r\n );\r\n};\r\nexport default News;\r\n","import styles from './MediaCenter.module.scss';\r\nimport { useArticleContext } from 'contexts/ArticleContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { BASE_URL } from 'utils/constants';\r\nimport { formatDateToDayMonthYearString } from 'utils/format.string';\r\n\r\nconst PressRelease = ({ limit = null }) => {\r\n const { t, i18n } = useTranslation();\r\n const { GetByCategoryPage, catArticles } = useArticleContext();\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n GetByCategoryPage('Photos', localStore);\r\n return (\r\n \r\n {latestArticles &&\r\n latestArticles\r\n ?.sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1) -\r\n new Date(a.attributes?.PublishDate || -1),\r\n )\r\n ?.slice(0, limit || latestArticles?.length)\r\n ?.map(\r\n (\r\n {\r\n id,\r\n attributes: {\r\n Title,\r\n Summary,\r\n PublishDate,\r\n Images,\r\n Slug,\r\n CardImage,\r\n },\r\n },\r\n i,\r\n ) => (\r\n
\r\n \r\n \r\n {t('Read More')}\r\n \r\n {Images != null && Images.data != null && (\r\n
\r\n ),\r\n )}\r\n \r\n {PublishDate && (\r\n
\r\n \r\n {formatDateToDayMonthYearString(PublishDate)}\r\n
\r\n )}\r\n {Title}
\r\n{Summary}
\r\n\r\n
\r\n );\r\n};\r\nexport default PressRelease;\r\n","import React, { createContext, useContext, useEffect, useState } from 'react';\r\nimport http from '../http';\r\nimport axios, { AxiosResponse } from 'axios';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { DEFAULT_LANGUAGE } from 'utils/constants';\r\nimport { StrapiMetaPaginationType } from 'types';\r\nimport { SingleNewsletterType } from '../components/MediaCenter/Newsletters/newsletters.types';\r\n\r\n\r\n// @ts-ignore\r\nconst NewsletterContext = createContext<{\r\n newsletters: SingleNewsletterType[];\r\n GetAllNewsletters: (locale: string) => void\r\n}>();\r\n\r\nexport const useNewsletterContext = () => {\r\n return useContext(NewsletterContext);\r\n};\r\n\r\nexport const NewsletterProvider = ({ children }: { children: React.ReactNode }) => {\r\n const [newsletters, setNewsletters] = useState\r\n {catArticles &&\r\n catArticles\r\n ?.sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1) -\r\n new Date(a.attributes?.PublishDate || -1),\r\n )\r\n ?.slice(0, limit || catArticles.length)\r\n .map(\r\n (\r\n {\r\n id,\r\n attributes: {\r\n Title,\r\n Summary,\r\n PublishDate,\r\n Images,\r\n Slug,\r\n CardImage,\r\n },\r\n },\r\n i,\r\n ) => (\r\n
\r\n \r\n \r\n {t('Browse Photo')}\r\n \r\n {Images != null && Images.data != null && (\r\n
\r\n ),\r\n )}\r\n \r\n {/*PublishDate && (\r\n
\r\n {/*\r\n {formatDateToDayMonthYearString(PublishDate)}\r\n
\r\n )*/}\r\n {Title}
\r\n{Summary}
*/}\r\n\r\n {newsletters &&\r\n newsletters\r\n .sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1).getTime() -\r\n new Date(a.attributes?.PublishDate || -1).getTime(),\r\n )\r\n .slice(0, limit ? limit : newsletters?.length || -1)\r\n .map(\r\n (\r\n {\r\n id,\r\n attributes: {\r\n Title,\r\n\r\n PublishDate,\r\n\r\n Thumbnail,\r\n NewsletterFile,\r\n },\r\n },\r\n i,\r\n ) => (\r\n
\r\n );\r\n};\r\nexport default Newsletters;\r\n","import styles from './MediaCenter.module.scss';\r\nimport { useLibraryContext } from 'contexts/LibraryContext';\r\nimport React, { useState, Component } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport clsx from 'clsx';\r\n\r\nconst InfoBox = ({ title, description, pdf }) => {\r\n const { t } = useTranslation();\r\n\r\n return (\r\n \r\n \r\n {Thumbnail != null && Thumbnail.data != null && (\r\n
\r\n ),\r\n )}\r\n \r\n {PublishDate && (\r\n
\r\n\r\n \r\n {formatDateToDayMonthYearString(PublishDate)}\r\n
\r\n )}\r\n {Title}
\r\n{title}
\r\n\r\n {pdf && (\r\n \r\n {t('Download PDF')}\r\n \r\n )}\r\n
\r\n \r\n );\r\n};\r\n\r\nconst Library = ({ limit = null }) => {\r\n const { t } = useTranslation();\r\n const { libraries, loadingCirculars } = useLibraryContext();\r\n const [state, setState] = useState({});\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nexport default Library;\r\n","import { useEffect, useState } from 'react';\r\nimport styles from './Home.module.scss';\r\nimport 'react-alice-carousel/lib/alice-carousel.css';\r\nimport { useArticleContext } from 'contexts/ArticleContext';\r\nimport { useVideoContext } from 'contexts/VideoContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Video from '../MediaCenter/MediaCenter';\r\nimport News from '../MediaCenter//News';\r\nimport Pictures from '../MediaCenter/PressRelease';\r\nimport Newsletters from '../MediaCenter/Newsletters/Newsletters';\r\nimport DigitalLibrary from '../MediaCenter/Library';\r\nimport clsx from 'clsx';\r\n\r\nexport default function MediaSection() {\r\n const [selectQuery, setSelectQuery] = useState('');\r\n const { t, i18n } = useTranslation();\r\n const {\r\n GetByCategoryPage,\r\n catArticles,\r\n GetLatestPage,\r\n GetHistoryPage,\r\n GetPressPage,\r\n historyArticles,\r\n latestArticles,\r\n pressArticles,\r\n } = useArticleContext();\r\n const { GetAllVideosPage, videos } = useVideoContext();\r\n\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n GetLatestPage(localStore);\r\n GetHistoryPage(localStore);\r\n GetPressPage(localStore);\r\n GetAllVideosPage(localStore);\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n const [activeBtn, setActiveButton] = useState({\r\n all: true,\r\n press: false,\r\n videos: false,\r\n });\r\n\r\n const tabs = [\r\n {\r\n slug: 'news',\r\n tabName: t('NEWS'),\r\n },\r\n {\r\n slug: 'video',\r\n tabName: t('VIDEOS'),\r\n },\r\n {\r\n slug: 'pictures',\r\n tabName: t('PICTURES'),\r\n },\r\n {\r\n slug: 'newsletter',\r\n tabName: t('MAWANI NEWSLETTER'),\r\n },\r\n {\r\n slug: 'library',\r\n tabName: t('DIGITAL LIBRARY'),\r\n },\r\n ];\r\n const [active, setActive] = useState(tabs[0].slug);\r\n\r\n useEffect(() => {\r\n if (active === 'news') {\r\n setSelectQuery('News');\r\n } else if (active === 'pictures') {\r\n setSelectQuery('Photos');\r\n } else if (active === 'video') {\r\n setSelectQuery('Video');\r\n } else if (active === 'newsletter') {\r\n setSelectQuery('Mawani-Newsletter');\r\n } else if (active === 'library') {\r\n setSelectQuery('library');\r\n }\r\n console.log('active*****', active);\r\n }, [active]);\r\n\r\n return (\r\n \r\n {loadingCirculars &&
\r\n {t('Loading')}...
}\r\n {libraries &&\r\n !loadingCirculars &&\r\n libraries\r\n ?.sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1) -\r\n new Date(a.attributes?.PublishDate || -1),\r\n )\r\n ?.slice(0, limit || libraries.length)\r\n .map(({ id, attributes: { Title, MediaFile, Description } }, i) => (\r\n\r\n
\r\n \r\n setState({ showModal: false })}\r\n type=\"button\"\r\n className=\"text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white\"\r\n data-modal-toggle=\"defaultModal\">\r\n \r\n \r\n \r\n {t('Close modal')}\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import H6 from '@material-tailwind/react/Heading6';\r\nimport React, { useEffect, useState } from \"react\";\r\nimport styles from './States.module.scss';\r\nimport CountUp from \"react-countup\";\r\nimport VisibilitySensor from 'react-visibility-sensor';\r\nimport states1 from '../../assets/img/states1.png';\r\nimport states2 from '../../assets/img/states2.png';\r\nimport states3 from '../../assets/img/states3.png';\r\nimport states4 from '../../assets/img/states4.png';\r\nimport states5 from '../../assets/img/states5.png';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst States = ({ className, ...rest }) => {\r\n const [viewPortEntered, setViewPortEntered] = useState(false);\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, [])\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n {active === 'news' && \r\n {t('MEDIA CENTER TITLE')}\r\n
\r\n\r\n\r\n {tabs.map((tab) => (\r\n {\r\n setActive(tab.slug);\r\n console.log('****onclick');\r\n }}\r\n className={clsx(styles.mediaSectionButton, 'uppercase')}\r\n style={{\r\n background: tab.slug === active ? '#00B2E3' : 'none',\r\n color: tab.slug === active ? 'white' : '#00B2E3',\r\n }}>\r\n {tab.tabName}\r\n \r\n ))}\r\n
\r\n \r\n \r\n window.open('/media-center?o=' + selectQuery, '_self')\r\n }>\r\n {t('View All')}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\nexport default States;\r\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAqLSURBVHgB7VtNctvIFX7dICQvEgtzAkPLlP+oRao8sqdMnSDS2ElVVqZPYPkElk5g+QSSV6lKRkP5BIZrbI2rshA1kitLMScIJzMLmSC653uNBgWSAAnoB5Zd86ok8Ke70f3h9fv5XlNQRfLNT98tKylbRdsLHS29vfnXgCqQGlUkfSl8iasmeqUVdfPaSUnXcGkoLX2qSCoDQWjhkyCaCX9uBguPc0G485+W70T6CG19qkgkVSVa+fjfnQQAy/s/rXTMCyGvUUVSnSZIZ06T7t45+FejQHMApb+iiqQyELCoOnaD5wjndcEOt6kiqRAE8rSmNzAOW9MaChJPAJhPFUklILCxowh+gXSwe+PB1rT2iwff14WgemNv05tmQ85DqjGMfftUNXWKNNdCm3Y91/OpAqkEBFdHnrmZUJ0i7QXFcYSWkU8VSCUgRELU+apErZhqh1GbL6IvPKpAKooT4sXs3lhpF2mtrrgxWELXqQIReV+wUeq5V5fpXG4inuDiRzpaKdrHutIAscVLOqNopbuz0S9BnpHN9Q692tVVTP4ZnaOUiBESaWAODTqjCCnoo7z6FC83sr6f5iK7eBJP6TMWDtDw/7nQlGtfJoIAz94t4tcvs9iE7PmkNoUNI9uIPx/+c8xQfQ2eYPQzbndn7x/+aP/MzzJyCe7P36U/W8wbM6c/lZDCIITu3MYM1Yb2NBMlEkTJ4mGrfjKxlod2e7Lmrg7391rSnR3qz3aH7cSdPUSUVvjJcf+P7tVmuq2g2ib6b0ztf9BqcP/Fn7abVFDKusihpxPJ2PVJ3R98fnzFthHOHJ1BxvcwskqtLyRuyHWRiwfba0KIJ5rETtxQN3Dx8X7rpLP2cWnAeARaiI790BNaL8Oe4L0IUm25v5eMZz9jDaojTN5BeNhN98erNtq2U23NtivcP5lTMh+t13dvPlijMiB8fbi9KmFV6QsReLnHeUZ+QrDU8sIZvYfenhv+PF9FNnfe0oAhDWGHNFa5e/3b+bx2uTYhWFjpCiUe46UXulfPNWiqSkLHXcMFLlJNjHUETZG7hy1YdN3Q1F/YvfG3QrH/ZRCrBUewC1u711ceT2o71Tu4DpkB4KI+K/sQWnesJK1PazsVhADsL1tWvGzcK0aSfnKxMYKPAs76gL2eIIXihJm+NEEK+IBH9FlI7E5r/V83irQuBAIbSVzaFPv6Sy9CyvvQ3jdFPVqZiHGfGeDRmP6yCbt2MpGtLmzEC7PNQLaDCJKOyeObGIQXP2y3UF775KAgjllJnnqPQh9GnAYRbAE5NeVugiml5xHkf2IQxP/S71TN9RwOricUfUfl1CBYO1EqZb2sUl1B9hLL7yBQtbVIwwQd1/6AEptEcVbetqmwTyZt1h2k3/taq/aV/q/tKhO2CwNhbMFCN0KNZGbQgmuTxnixO5tnVtkkMsJhFgs5y/cMTJuB6VMU/PsC85ZzAyFZNDiIZSz8dgij6QyYKCxF0b7S9BI0VBugBDMhdXquWsbiN4VWTT6fdA/UmBLKh38zZAlccpOBAV3GoJiAjYMgRSp4f47nmc4EAnN7AgvBwv8yvGim6ukNnmTgaNmu9altvcmQLB5uD71/e3MlGG3DwERC1Y2mCLrNV4ecZwwKGKWAInqlol7wfuHvHTqllAYhckMPQdIzBEmNOIw2StzVGvsZNBc/5aLltiJigeE/kwfEpK7CHzSO5yBp2ZGzrCkBKk0vUW7CV1MZgiEpDQIzufF2Ngt/AS3YyXvSo5JhGE2io4SzCWDbZstA1ScZRgsw/23xe9YUgN/Es7iPStMmnUKmQsYTD50/bpCUJoPk0yZY+FqW6o4K8/81chqJYQR4furrLu7eNZ9Bi/B66HiOIWoFDCPuxx6jiA0YAEIUz5X0lgp769O2ykQQoGI8GKuhOWqjaqI5KT9PFs02guJo0kutal+zWgtObGSbnyhsQjM2jPHBTVZ1R6FwK0y2yqdV7o/cIihiGBuoXYSRXsPLRwymo9TTH2493KGyICx+aGHf6zWQlB0JrjHryQ88AngGq9onhtHaiCmGcQiErHkMGUYyoKSML6h2RW9mov/vZG0fM75AURnahrms7V5/sF4YBGZm7P5qu6FYGl0Al75GFx5vE1hrGMYEMPYe7xfyNacICKPjDEDR7IpPNIVVH4bx1Y8jT9xohdKvGQip1EqWRoyBkKaplRRLafW34DDz7CcL56c9G8qtNFBcN0Q6y+eYfVZHFX5cytqX00BI5pI3Di+wFynYGsQTFhBjSxQKLbdOagwpIDLLB2O5Q8+ZaZhFgldMAOAnD/twZLWDKzrr0JCvdm9+2/jxxoONUU2xALAdecFEjOPOnspqWwCScbzRWibzn1xQ4Xm4jkBdQT9l78jzXMR8E040xZN6ozXOTBBE7AUGJfm7h9vP7eGKZPHzb1HOynOJ38RVap/PNWByqwlJmy7aFhEurJLROC6fmXEMoHlkLy/0HR7IOxRZeJ4Mmsa8Oabh72dCydugm3XoIyOLVPO44b4B4MM2nqBYZbWPHLEwafGJDA5pOTLgq6MtzaVUKRCEiNtrisdRNbkVjy+njsPzhGYs4GUbtmMND3LTzrtDGSdlc4Ml1gDea/DRL3ZvPlyl4tM3hvLKcdeAFQqn69joqoyYqjTbpXCYIZp04iQtQbyVF+4efreFZ93EejCO4DPTY/2z+QQprhkNEGKnHAAnBzH7cJ1mqPh0e+EzjAMR8cFPMRuZcdwwviafF5V3Nx424+q4WOXz1bB1/x1tMwYC3AxUKLb+qN6UPq/EnsKMI5xnJsGCN+FYo+yvWJI9LJV8xkGYktJUwJJtVkawniQ+gHaJse08rglCdvjCkVmR6s2omEKuNYaOq4/IVIL0Cyop8R4249RNvlKiojQqcdxiNUCPU/EZINhGQh7RKYUNE58HYM8Aw7TEVptOIdwP0epKMg60aY1OKazh5uqMgzBmGFndnKi8IRuV8zr19sOtFd4WO3RG4R+dmLhSONM1wapbt8pfnlQjxit0s7ZTDtss2jZZ+SLElubqzHZlfZ8JAmIDbuylj8Z9znJcIxt4cYI3LjL7w9gNMX9IX4BIy2A5IGeyv88Qzv/JxNmy1I+xqqhY8z3K3gecAq+jmxerZIKQxNnMFxS9YZz2zh0hPS6cMWrLRSAvKbyo3oy32XPn9srMy56raOe1yQTBHncx9FjRk2v2pJiHLK1Z5FgPT07Gv4NABVk+L7IoPlvJBzM5myw5L3PLvHmNgcDcAULd5zqO0QOOuZN0NE9MsoUUnHMNju3hi1uLEw5ZD5El6BMvau716AHutJhz1BSH4Oc9L2F4QvI84UR14TiP7JFa8HdiiatEoat5svWEsQll1HbC+Oc5tvDC/AMPbKi4novwVuiW4fWY7dXqJbKpjrlbre9LKe8j+uOkzOMwmKPAewfb4DKxwJhh3lIK3sn24XmhD2tM4yLmdYW6XcGMEaV+iJnFKptJSgw6TJknwrnCi7epc8NptpeyhfP8p2nyNk2KZnW4qHkxiIJvbgaBunDmlkeacMAROWRIzuQzZpKdiILcPgMO0HKSqDNwn0k1ixMiNTktfzHzikKqmz4Y/zfTbsobQYMzZAAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAURSURBVHgB7VpNUhtHFH6vZ6SwsaMbRF4mASx2RDiV4QRGwUlVVkEnAE5g6QSgE6CsUpWYiJzAooIFO6mMUlkinyBKssEaTb+815Js/WBAg6Qm0XxVqKcHHlP9qb+v37xuBItI10spBKoiBesnS9+UwRIUWIVOmU9SSbAIyyTcD0QkgGUSEOCxaVWntQVrJKR/Lz3n4e90erjzRf1wBywBwQK86o9JP/bRBSE04grX/YBKfDtF0F6pLH5bgxnDykzwnVhOWs0ElD/NNGIOZqSP4O6BBdiRg0KPiI7PmADpljttjQCSYAGWPEFdIOLjVZaF9LxOmwKiN2ABVkjgb3xXWod9Ya3+S5X9ocrdpnbVFliAFRIqi5ka+8AKX5ZBZgBAgwDXe/KYNawtkeIDSuuCXBNSQ4gBS7CaLP22/OwIifJIuLFWP7SyMliFVz1I9K7X6qWX7A305PxnDyzABQuQ7NAH3Futlh4FMT8hRslZWzVAJf5QhhnDCgk84Ka0ToyqDrg8I8j0QVEDLGDmniA5AQJ+3+0m+lvU+LSXO8wSM3t3EA9oxR9uswnmpE/EKwNijTR6PANqClCkYMjh1SKnW60fzla+a8AMMBMSxAN4kPzWCAkiOObr3MlSpjz8d94fpeT7lylocMkpX1neLMKUMVUSVtntHXRk8J68MTqB3pVl8aa4dP1wi9Pq55xaJoUM7b9dn+asmAoJovtWPL4n6z93m5wLFNy22i+vZJrj/J8n54c5QjODmA8qar+VnwYZEyWhT/dSIEnwAIpaQf4u6XBXIjno84vK55t5mCAmRkL6NU9hZb615HW6DwtDhqaXPYlM0i/uTEK/7vmnydN2t7I4PTPr9wvu1gL/beauEglNgkx933mwD0rJNA2t+3DPLiXart6ZlF+MTcKI7nnqaxe3bLwG9/sFmddxKpwubu7DmBiLhO7UP4BOGazGROxOUvdh8eXrFxvaUXth/eJWJKTrP6W6RVAPTN5P+VchGJ82BvOL20vkWhKM7mMP3+0PSKobbzu5Weg+LEQi7TaxX8C29G9DxgdJGE51bek+LIb94jqJjJDQr3tJdZXG7H3QfViMpOAUZM+GjgG8I6G7KySD96C75J0sbebgf4I12eZD3L7KL/CqV9z7rvuwuCoFj7f+LiDX9i7A0s7PfYBIRMprRvsUwDHMGZQDXyHLo1NjJCyfLmeyMGdgFRS5SY4UWmVpRFDm0IT2L415SLIEEDPrrqODX6UwYrzEfZADdD4GCv6Kt/9hH8k2++N5/7kgW+2mvhBbMHk+aH3cW6rS5y/2x40nFdROP3tWmER8DyMkcOWVEyP6xFzH4iKRImeLcs+YCaenUgs8unQTKQdp26gKlZhobjiewJH4WsuNbyHQlnmAY2qJxdXzkofv4+FyISEZaHMgnpw3I/GkGvxZuGv8tSR0gum4srTpDd9/tfj1SF5BmrLDSciH4gMfH52tDCZcd47nHazK0FI+TrwgOrgFEQkGEQkQkWAQkQARCQYRCRCRYBCRABEJBhEJEJFgEJEAEQkGEQkQkWAQkQARCQYRCRCRYHAFCfgnKHXRf4cLlw3ZoBkIbPtmm45cat4Yj+Ysc3MBms2b4zkWcfBe59kD8VwibvT9bjB+ZEhXxPdDjtin66UDuAFyTug29/5L8bL5IuOXvUjijckj3VK7MGdQTrCPSj01+w5y8tSJ0QbMHTpu4PJefbZ7JnA+wX7xL/Dk7ZMdvq/IAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAENSURBVHgBhVLLTcNAEH0zBKJwgg5MBUAHSwWICsgJuJECImwkCjAHDkYgLSVQAe6A0EHSATcu2JPZWTuRlViZi3fe/N8zobVxdoQDugfBAeQiKDMIcrymH20aNckJhvylrwRbTeb433N4ny7Y/FWyBoguMKqPUTwQhK4Un2vfBIOqDFsQbp6uQbW35JGcI89+O83DqkP+toZCGYOqiQUqTDaSg3nFGON4QO10JToz5y39RJ/91T/NyY47o/vMrydrgZT22ufT3oLbx0v7iswYwrGAxW+dYhjljZdTh4XAFPT4Qu8JeJjK8KtYkZ5E4e5UONkh3ECFe5kuqIObJqI0S2QOVOqvUeKwem4pXwImzFylXBovggAAAABJRU5ErkJggg==\"","export default __webpack_public_path__ + \"static/media/first.bc290037.jpg\";","export default __webpack_public_path__ + \"static/media/second.40957d19.jpeg\";","export default __webpack_public_path__ + \"static/media/third.1c35db4f.jpg\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAC9SURBVHgBlZLBCcJAFETn/4iCp5SQErSDWIk56VELEAxiAfEqCFqJKSEdGDvwqGL8DiQLHtSs77B8lplld2YFjiQN0ZUZBDEgcb1pBQwZtsuDk0kjjtDTI6cIH7ESjyDGbnGuDdPV6bv4zXSzYYDJegyxBK1IiECvCqnm8EWesXIdeBsYhuJPaLDcW21WKEz9DUCmuFcbDmW7lrGyQMU+vfD1o98mijssDq5pR90JY7YmOcn5NXL0eYuMB5MX1fc5EVRfLm8AAAAASUVORK5CYII=\"","import React, { useState, useEffect } from 'react';\r\nimport AliceCarousel from 'react-alice-carousel';\r\nimport 'react-alice-carousel/lib/alice-carousel.css';\r\nimport './styles.css';\r\nimport first from './../../assets/img/first.jpg';\r\nimport second from './../../assets/img/second.jpeg';\r\nimport third from './../../assets/img/third.jpg';\r\nimport donut from './../../assets/img/Ellipse143.png';\r\nimport dot from './../../assets/img/Ellipse145.png';\r\nimport styles from './Home.module.scss';\r\nimport { useArticleContext } from 'contexts/ArticleContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { BASE_URL } from 'utils/constants';\r\n\r\nexport default function ImageCarousel() {\r\n const { t, i18n } = useTranslation();\r\n const { GetLatestPage, latestArticles } = useArticleContext();\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n GetLatestPage(localStore);\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n const [count, setCount] = useState(0);\r\n const renderDotsItem = ({ isActive }) => {\r\n return isActive ? (\r\n \r\n \r\n
\r\n\r\n\r\n \r\n \r\n {({ countUpRef, start }) => (\r\n {\r\n if (isVisible) {\r\n setViewPortEntered(true);\r\n }\r\n }}\r\n delayedCall>\r\n \r\n \r\n )}\r\n \r\n {t(\"PORTS\")}\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n {({ countUpRef, start }) => (\r\n {\r\n if (isVisible) {\r\n setViewPortEntered(true);\r\n }\r\n }}\r\n delayedCall>\r\n \r\n \r\n )}\r\n \r\n {t(\"BERTHS\")}\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n {({ countUpRef, start }) => (\r\n {\r\n if (isVisible) {\r\n setViewPortEntered(true);\r\n }\r\n }}\r\n delayedCall>\r\n \r\n \r\n )}\r\n \r\n {t(\"SHIPS\")}\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n {({ countUpRef, start }) => (\r\n {\r\n if (isVisible) {\r\n setViewPortEntered(true);\r\n }\r\n }}\r\n delayedCall>\r\n \r\n \r\n )}\r\n \r\n {t(\"CONTAINERS\")}\r\n
\r\n\r\n \r\n 
\r\n
\r\n \r\n \r\n {({ countUpRef, start }) => (\r\n {\r\n if (isVisible) {\r\n setViewPortEntered(true);\r\n }\r\n }}\r\n delayedCall>\r\n \r\n \r\n )}\r\n \r\n {t(\"TONS\")}\r\n
\r\n\r\n\r\n \r\n 
\r\n
\r\n \r\n
\r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/1.e150916d.jpg\";","export default __webpack_public_path__ + \"static/media/2.e371f65d.jpg\";","export default __webpack_public_path__ + \"static/media/3.ccb0af6d.jpg\";","export default __webpack_public_path__ + \"static/media/4.559b95f1.jpg\";","import React from 'react';\r\nimport styles from './Home.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nexport default function HistoryTextBox({ textItem, slug }) {\r\n const { t, i18n } = useTranslation();\r\n\r\n return (\r\n \r\n
\r\n \r\n {\r\n setCount((count + 1) % 3);\r\n }}\r\n animationType=\"fadeout\"\r\n // autoPlayDirection={i18n.language === 'ar' ? 'rtl' : 'ltr'}\r\n disableButtonsControls\r\n autoPlay\r\n autoPlayInterval={5000}\r\n animationDuration={1000}>\r\n {latestArticles &&\r\n latestArticles\r\n .sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1) -\r\n new Date(a.attributes?.PublishDate || -1),\r\n )\r\n .slice(0, 6)\r\n .map((item, i) => {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {item.attributes.Title}\r\n
\r\n\r\n {item.attributes.Images != null &&\r\n item.attributes.Images.data != null && (\r\n
\r\n \r\n
\r\n {item.attributes.Summary}
\r\n \r\n {t('Read More')}\r\n \r\n\r\n \r\n {textItem}\r\n \r\n \r\n {t('Read More')}\r\n \r\n {/* todo: use article page instead */}\r\n
\r\n );\r\n}\r\n","import AliceCarousel from 'react-alice-carousel';\r\nimport 'react-alice-carousel/lib/alice-carousel.css';\r\nimport './hStyles.css';\r\nimport one from './../../assets/img/history/1.jpg';\r\nimport two from './../../assets/img/history/2.jpg';\r\nimport three from './../../assets/img/history/3.jpg';\r\nimport four from './../../assets/img/history/4.jpg';\r\nimport { useArticleContext } from 'contexts/ArticleContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport styles from './Home.module.scss';\r\nimport HistoryTextBox from './HistoryTextBox';\r\nimport { BASE_URL } from 'utils/constants';\r\n\r\nexport default function HistoryCarousel() {\r\n const { t, i18n } = useTranslation();\r\n const { GetByCategoryPage, catArticles } = useArticleContext();\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n GetByCategoryPage('History', localStore);\r\n const renderDotsItem = ({ isActive }) => {\r\n return isActive ? : ;\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n}\r\n","import styles from './Information.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nexport default function Information() {\r\n const { t } = useTranslation();\r\n return (\r\n \r\n {catArticles &&\r\n catArticles.length > 0 &&\r\n catArticles\r\n ?.sort(\r\n (a, b) =>\r\n new Date(b?.attributes?.PublishDate || -1) -\r\n new Date(a.attributes?.PublishDate || -1),\r\n )\r\n .slice(0, 1)\r\n .map((cat, i) => (\r\n \r\n
\r\n ))}\r\n \r\n
\r\n \r\n {cat?.attributes?.Title}\r\n
\r\n\r\n \r\n {cat?.attributes?.Images != null &&\r\n cat?.attributes?.Images?.data != null && (\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import { TextField } from '@mui/material';\r\nimport styles from './Subscribe.module.scss';\r\n\r\nexport default function Subscribe() {\r\n return (\r\n <>\r\n\r\n {/* \r\n
\r\n \r\n {/*} \r\n \r\n
\r\n {t('Fax')} {t('4053508-11-966')}\r\n
\r\n {t('po-box')} */}\r\n \r\n \r\n \r\n
\r\n\r\n {/* {t('Invest in Mawani')}
\r\n\r\n {t('Learn more about investment opportunities in Mawani Saudi.')}\r\n
\r\n */}\r\n{t('Connect with our Team')}
\r\n{t('Get in touch with our team all weekdays')}
{' '}\r\n{t('From 7am to 10pm')}
\r\n\r\n {t('Email')} :{' '}\r\n \r\n {t('mawanicare@mawani.gov.sa')}\r\n {' '}\r\n
\r\n
{t('Call us on: 199003')}
\r\n {/* {t('Phone')} :{' '}\r\n {t('4050005-11-966')}\r\n\r\n {t('Fax')} {t('4053508-11-966')}\r\n
\r\n {t('po-box')} */}\r\n \r\n \r\n \r\n
{t('Latest News')}
\r\n{t(\"Stay up to date with Mawani's progress in all sectors.\")}
\r\n \r\n\r\n
*/}\r\n \r\n
\r\n \r\n Invest in Mawani\r\n
\r\n \r\n Learn more about investment opportunities in Mawani Saudi.\r\n
\r\n \r\n \r\n Connect with our Team\r\n
\r\n \r\n Get in touch w our team of dreamers and does that are changing the\r\n world.\r\n
\r\n \r\n \r\n Latest News\r\n
\r\n \r\n Stay up to date with Mawani’s progress in all sectors.\r\n
\r\n \r\n
*/}\r\n\r\n \r\n \r\n \r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/marker.3a9f53ea.png\";","import { useState, useEffect } from 'react';\r\nimport {\r\n MapContainer,\r\n TileLayer,\r\n Popup,\r\n Marker as LMarker,\r\n} from 'react-leaflet';\r\nimport 'leaflet/dist/leaflet.css';\r\nimport L from 'leaflet';\r\nimport x from '../../assets/img/marker.png';\r\nimport { useTranslation } from 'react-i18next';\r\nimport styles from '../Ports/Ports.module.scss';\r\nimport { usePortContext } from 'contexts/PortContext';\r\nimport { MarkerLayer, Marker } from 'react-leaflet-marker';\r\n\r\nfunction PortNode({ port }) {\r\n const { t } = useTranslation();\r\n\r\n if (!port || !port.Longitude || !port.Latitude) return <>;\r\n return (\r\n \r\n
\r\n Subscribe and be the first to know
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n 
\r\n \r\n {port.Port}\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nfunction PortDetails({ data }) {\r\n const { t } = useTranslation();\r\n\r\n const details = [\r\n { title: t('Area'), value: data.area },\r\n { title: t('Berths'), value: data.berths },\r\n { title: t('Terminals'), value: data.terminals },\r\n { title: t('Capacity'), value: data.capacity },\r\n // { title: t('Operators'), value: data.operators },\r\n ];\r\n\r\n return (\r\n \r\n {details.map((detail) => {\r\n if (!detail.value) return null;\r\n return (\r\n <>\r\n \r\n {detail.title}\r\n
\r\n {port.Port}
\r\n\r\n
\r\n )\r\n }\r\n }\r\n return ()\r\n }\r\n return (\r\n \r\n \r\n
\r\n \r\n {t('PopUpTitle')}\r\n
\r\n \r\n \r\n \r\n {t('Read More')}\r\n \r\n
\r\n \r\n\r\n {/* temp */}\r\n {/* {i18n.language == 'ar' &&\r\n
\r\n );\r\n}","export default __webpack_public_path__ + \"static/media/MTLSLogo.b9d938e7.png\";","import { AxiosResponse } from 'axios';\r\nimport { StrapiMetaPaginationType } from '../../types';\r\nimport http from '../../http';\r\nimport { RelatedOrganizationType } from './relatedOrganization.types';\r\nexport const GetRelatedOrganization = (\r\n locale: string,\r\n) =>\r\n http\r\n .get(\r\n `/api/related-organizations?populate=deep&locale=${locale}&sort=DisplayOrder:asc`,\r\n )\r\n .then(\r\n (\r\n response: AxiosResponse<{\r\n data: RelatedOrganizationType[];\r\n }>,\r\n ) => response.data,\r\n );\r\n","import React from 'react';\r\nimport styles from './RelatedOrganizations.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\nimport MTLS from 'assets/img/logos/MTLSLogo.png';\r\nimport AliceCarousel from 'react-alice-carousel';\r\nimport { useQuery } from '@tanstack/react-query';\r\nimport { GetRelatedOrganization } from './relatedOrganization.api';\r\nimport { BASE_URL } from 'utils/constants';\r\n\r\nexport default function RelatedOrganizations() {\r\n const { t, i18n } = useTranslation();\r\n const locale = i18n.language || 'ar';\r\n React.useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n const { data } = useQuery(\r\n [\r\n 'related-organizations',\r\n {\r\n locale: i18n.language,\r\n },\r\n ],\r\n () => GetRelatedOrganization(i18n.language),\r\n { keepPreviousData: true },\r\n );\r\n const responsive = {\r\n 0: { items: 1 },\r\n 568: { items: 2 },\r\n 1024: { items: 4, itemsFit: 'fill' },\r\n };\r\n return (\r\n <>\r\n {data?.data && data?.data?.length > 0 &&\r\n < div className=\"container_max\">\r\n \r\n
\r\n // } * /}\r\n {/* temp */}\r\n\r\n {\r\n i18n.language == 'ar' && announcement?.length !== 0 && (\r\n \r\n \r\n
\r\n \r\n {t('PopUpTitle')}\r\n
\r\n {/* \r\n {t('PopUpTitleTwo')}\r\n
\r\n \r\n {t('PopUpAnnouncement')}\r\n
\r\n \r\n {t('PopUpBless')}\r\n
\r\n \r\n \r\n {t('Read More')}\r\n \r\n
\r\n \r\n {t('PopUpAnnouncementThree')}\r\n
\r\n \r\n {t('PopUpAnnouncementFour')}\r\n
\r\n \r\n \r\n {t('PopUpAnnouncementFive')}\r\n \r\n
\r\n \r\n {t('PopUpAnnouncementSix')}\r\n
\r\n \r\n {t('PopUpBless')}\r\n
\\\r\n {t('Related Organizations')}
\r\n \r\n {\r\n return
\r\n \r\n }\r\n \r\n );\r\n}\r\n","import Navbar from 'components/Navbar';\r\nimport DefaultFooter from 'components/Footer';\r\nimport Header from 'components/home/Header';\r\nimport ServiceSection from 'components/home/ServiceSection';\r\nimport MediaSection from 'components/home/MediaSection';\r\nimport States from 'components/home/States';\r\nimport ImageCarousel from 'components/home/ImageCarousel';\r\nimport HistoryCarousel from 'components/home/HistoryCarousel';\r\nimport KeepMeInformed from 'components/home/KeepMeInformed/index';\r\nimport Information from 'components/home/Information';\r\nimport Subscribe from 'components/home/Subscribe';\r\nimport Map from 'components/home/Map';\r\nimport PopUp from 'components/home/PopUp';\r\nimport RelatedOrganizations from 'components/home/RelatedOrganizations';\r\n\r\nexport default function Home() {\r\n return (\r\n <>\r\n {'<'}
\r\n }}\r\n renderNextButton={() => {\r\n return {'>'}
\r\n }}\r\n >\r\n {data?.data?.map((item, i) => {\r\n return (\r\n \r\n \r\n < img\r\n src={BASE_URL + item?.attributes?.Logo?.data?.attributes?.url}\r\n alt=\"logo for Related Organization\"\r\n className={styles.relatedImage}\r\n />\r\n \r\n
\r\n )\r\n })}\r\n \r\n \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n );\r\n};\r\nexport default About;\r\n","export default __webpack_public_path__ + \"static/media/OrgChartEng.8f62635f.jpg\";","import styles from './AboutUs.module.scss';\r\nimport chartEng from '../../assets/img/OrgChartEng.jpg';\r\nimport chartArb from '../../assets/img/OrgChartArb.jpeg';\r\nimport { useEffect, useState } from 'react';\r\nimport { useAboutContext } from 'contexts/AboutContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { BASE_URL } from 'utils/constants';\r\n\r\nconst Org = () => {\r\n const [buttonText, setButtonText] = useState();\r\n const [chart, setChart] = useState(chartEng);\r\n const { organizationChart, GetOrgChartPage } = useAboutContext();\r\n const { t, i18n } = useTranslation();\r\n\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n useEffect(() => {\r\n if (localStore == 'en') {\r\n setButtonText('Switch to Arabic Version');\r\n } else if (localStore == 'ar') {\r\n setButtonText('Switch to English Version');\r\n }\r\n }, []);\r\n //Handlers\r\n const languageHandler = () => {\r\n if (buttonText == 'Switch to Arabic Version') {\r\n setButtonText('Switch to English Version');\r\n localStorage.setItem('locale', 'ar');\r\n GetOrgChartPage('ar');\r\n } else if (buttonText == 'Switch to English Version') {\r\n setButtonText('Switch to Arabic Version');\r\n localStorage.setItem('locale', 'en');\r\n GetOrgChartPage('en');\r\n }\r\n };\r\n return (\r\n {abouts[0].attributes.AboutLabel}
\r\n )}\r\n\r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0].attributes.StrategyLabel}
\r\n )}\r\n\r\n\r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n {abouts[0].attributes.ValueLable}
\r\n )}\r\n\r\n\r\n
\r\n - \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0].attributes.ObjectivesLabel}
\r\n )}\r\n\r\n- \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0].attributes.PillarsLabel}
\r\n )}\r\n\r\n- \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0].attributes.PlansLabel}
\r\n )}\r\n- \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n {abouts[0].attributes.AmbitionsLabel}
\r\n )}\r\n- \r\n {abouts[0] != null && abouts[0].attributes != null && (\r\n
\r\n
\r\n );\r\n};\r\nexport default Org;\r\n","export default __webpack_public_path__ + \"static/media/OrgChartArb.f6d1a7b3.jpeg\";","export default __webpack_public_path__ + \"static/media/plus.72ed1d66.svg\";","export default __webpack_public_path__ + \"static/media/minus.65a37d7f.svg\";","export default __webpack_public_path__ + \"static/media/info.7ac7479b.svg\";","export default __webpack_public_path__ + \"static/media/organogram.f6b36ea4.svg\";","export default __webpack_public_path__ + \"static/media/service.8323be28.svg\";","export default __webpack_public_path__ + \"static/media/board.94e8cd0c.svg\";","\r\nimport './AboutUs.module.scss';\r\nimport About from './About';\r\nimport Board from './Board';\r\nimport Org from './Org';\r\nimport Services from './Services';\r\nimport styles from './AboutUs.module.scss';\r\nimport info from '../../../src/assets/img/icons/info.svg'\r\nimport organo from '../../../src/assets/img/icons/organogram.svg'\r\nimport board from '../../../src/assets/img/icons/board.svg'\r\nimport service from '../../../src/assets/img/icons/service.svg'\r\nimport { FaGavel, FaSearch, FaRegFileAlt, FaFileInvoiceDollar, FaExternalLinkAlt, FaQuestionCircle, FaCompressAlt } from 'react-icons/fa';\r\n\r\nexport const components = [\r\n {\r\n icon: \r\n \r\n {buttonText}\r\n \r\n \r\n
\r\n {t('Organizational Chart')}
\r\n \r\n\r\n 
*/}\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n}\r\n","import { styled } from '@mui/system';\r\nimport TabsUnstyled from '@mui/base/TabsUnstyled';\r\nimport TabsListUnstyled from '@mui/base/TabsListUnstyled';\r\nimport TabPanelUnstyled from '@mui/base/TabPanelUnstyled';\r\nimport { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';\r\nimport TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';\r\nimport styles from './AboutUs.module.scss';\r\nimport { components } from './aboutus.constants';\r\nimport { Fragment, useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst Tab = styled(TabUnstyled)`\r\n cursor: pointer;\r\n padding: 15px 20px;\r\n\r\n border: 1px solid #e3e3e3;\r\n font-family: 'themixarabicPlain', sans-serif;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n align-items: center;\r\n font-size: 17px;\r\n\r\n transition: 0.2s;\r\n\r\n &:hover {\r\n color: #fff;\r\n background: #2d6a80;\r\n border-color: #2d6a80;\r\n\r\n img {\r\n filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(176deg)\r\n brightness(150%) contrast(150%);\r\n }\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n @media (max-width: 767px) {\r\n font-size: 16px;\r\n\r\n line-height: 20px;\r\n }\r\n\r\n @media (max-width: 639px) {\r\n }\r\n\r\n &.${tabUnstyledClasses.selected} {\r\n color: #fff;\r\n background: #2d6a80;\r\n border-color: #2d6a80;\r\n\r\n img {\r\n filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(176deg)\r\n brightness(150%) contrast(150%);\r\n }\r\n }\r\n\r\n &.${buttonUnstyledClasses.disabled} {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n`;\r\n\r\nconst TabPanel = styled(TabPanelUnstyled)``;\r\n\r\nconst TabsList = styled(TabsListUnstyled)`\r\n margin-bottom: 55px;\r\n display: grid;\r\n grid-gap: 20px;\r\n\r\n grid-template-columns: repeat(4, 1fr);\r\n @media (max-width: 639px) {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n @media (max-width: 767px) {\r\n margin-bottom: 30px;\r\n }\r\n`;\r\n\r\nlet defaultView = 0;\r\nif (window.location.hash) {\r\n if (window.location.hash.includes('board')) {\r\n defaultView = 1;\r\n }\r\n if (window.location.hash.includes('chart')) {\r\n defaultView = 2;\r\n }\r\n if (window.location.hash.includes('services')) {\r\n defaultView = 3;\r\n }\r\n}\r\nexport default function AboutUsComp() {\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n return (\r\n <>\r\n \r\n\r\n {t('Services & Capabilities')}
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n */}\r\n \r\n \r\n );\r\n })}\r\n {/* \r\n <>+}\r\n aria-controls=\"panel2bh-content\"\r\n id=\"panel2bh-header\">\r\n \r\n \r\n \r\n \r\n \r\n \r\n <>+}\r\n aria-controls=\"panel3bh-content\"\r\n id=\"panel3bh-header\">\r\n \r\n \r\n \r\n \r\n */}\r\n
\r\n \r\n {services &&\r\n services.map((item) => {\r\n count++;\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {item.attributes.Title}\r\n \r\n {expanded === 'panel' + count ? (\r\n 
\r\n ) : (\r\n 
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Berths, Wharfs, and Multipurpose Built Terminals \r\n {expanded === 'panel1' ? : }\r\n
\r\n \r\n
\r\n \r\n The Saudi Ports Authority (Mawani) is the government authority responsible for the efficient, professional running of Saudi Arabia’s ports. With a combined total of 290 berths, the Kingdom’s ports comprise the Middle East’s largest seaport network that not only contributes a great deal to national growth, but also showcases the Kingdom’s formidable regional and international standing. \r\n
\r\n\r\n Each terminal contains one or more berths, and can readily accommodate any form of vessel, which is what drove Mawani to provide specialized terminals for various types of loads, including containers, general cargos, refrigerated and frozen cargos, bulk cargo, roll-on/roll-off cargos, and livestock. \r\n
\r\n\r\n Most of the Kingdom’s ports have their own special zones, such as bonded storage and re-export, vessel repair facilities, indoor and outdoor storage, equipment depots, and service and maintenance centers. \r\n
\r\n\r\n
\r\n \r\n \r\n Security, Safety, and the Environment \r\n {expanded === 'panel2' ? : }\r\n
\r\n \r\n
\r\n \r\n Saudi ports are safe havens to work and invest in. Mawani has redoubled its efforts to keep people, properties, the environment and operations at national ports safe. This is thanks to the implementation of state-of-the-art safety measures and information, navigation, antipollution, fire, and security systems adhered to by all operators. Mawani also complies to all International Ship and Port Facility Security Code (ISPS) rules and regulations, including the installation of security and CCTV systems, luggage scanners, and fire safety systems. Perimeter walls, controlled-access gates, and hydraulically operated blockers are standard, as are dedicated telecommunications, hydrographic surveys of seaport waters, and vessel tracking systems. Security patrol, safety, and ambulance vehicles are also supplied to all ports. \r\n
\r\n\r\n Mawani also ensures a safe working and investment environment with the help of the Industrial Security Department of the Ministry of Interior, which handles the three primary domains of workplace wellbeing: security, safety, and firefighting. Mawani constantly evaluates the security status of each facility it oversees. It has also developed security and emergency plans accordingly with ideally designed and applied response and control plans, along with training for Industrial Security personnel. \r\n
\r\n\r\n Mawani works to upgrade the performance of its emergency response teams with specialized training for any potential seaport accidents. \r\n
\r\n\r\n As well as ensuring the competence of response teams through both training and simulation exercises. \r\n
\r\n\r\n The Authority also applies global best practices to limit the environmental impact of each port and any vessels on the surrounding marine habitat. \r\n
\r\n\r\n
\r\n \r\n \r\n Passenger Terminals \r\n {expanded === 'panel3' ? : }\r\n
\r\n \r\n
\r\n \r\n It has been said that there are no second chances for first impressions, and nothing communicates people’s culture as strongly to visitors as do their passenger terminals. Mawani has spared no effort to ensure that passenger terminals are as welcoming to travelers to the Kingdom – especially pilgrims – as they can be. The warmth with which they are received reflects the extent of the Kingdom’s care for each pilgrim’s wellbeing, with every possible luxury and comfort being made available to them. \r\n
\r\n\r\n As part of its efforts to support the National Transport and Logistics Strategy (NTLS), Mawani has boosted its involvement in empowering the maritime tourism sector with new and better-developed passenger terminals and dedicated berths for cruise ships. \r\n
\r\n\r\n
\r\n \r\n
\r\n {t('About Us')}
\r\n\r\n
\r\n \r\n );\r\n}\r\n","export default __webpack_public_path__ + \"static/media/Dammam_Port.7f30653c.jpg\";","import { useEffect, useState } from 'react';\r\nimport React from 'react';\r\nimport styles from './Ports.module.scss';\r\nimport { usePortContext } from 'contexts/PortContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport RasTanuraBackgroundImage from '../../assets/img/ports/Dammam_Port.jpg';\r\nimport { BASE_URL } from '../../utils/constants';\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nexport default function Ports() {\r\n const { ports } = usePortContext();\r\n const { t, i18n } = useTranslation();\r\n\r\n const { search } = useLocation();\r\n const query = new URLSearchParams(search);\r\n const queryPort = query.get('port');\r\n const queryPortIndex =\r\n queryPort &&\r\n ports.indexOf(ports.find((port) => queryPort == port.attributes.Port));\r\n\r\n const [active, setActive] = useState(null);\r\n\r\n const [width, setWidth] = React.useState(window.innerWidth);\r\n const breakpoint = 620;\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n window.addEventListener('resize', () => setWidth(window.innerWidth));\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (queryPortIndex > 0) setActive(queryPortIndex);\r\n }, [queryPortIndex]);\r\n\r\n useEffect(() => {\r\n window.scrollTo({\r\n top: 0,\r\n behavior: 'smooth',\r\n });\r\n }, [active]);\r\n\r\n if (!ports || ports?.length <= 0) return ;\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {components.map((item, index) => (\r\n \r\n {item.icon}\r\n {/* {item.title} */}\r\n {t(\r\n JSON.stringify(item.title.props.children).replace(\r\n /\\\"/g,\r\n '',\r\n ),\r\n )}\r\n \r\n ))}\r\n \r\n
\r\n \r\n {components.map((item, index) => (\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n {ports[active]?.attributes?.Terminals}\r\n
\r\n \r\n )}\r\n {ports[active]?.attributes?.Capacity && (\r\n <>\r\n \r\n
\r\n \r\n {t('Saudi Ports')}\r\n
\r\n \r\n {t(\r\n 'Serve as vital economic and commercial streams, and they play a key role in the growth of regional and global trade movement',\r\n )}\r\n \r\n\r\n {ports.map((port, index) => {\r\n let portclass = port?.attributes?.Port?.toLowerCase()?.replaceAll(\r\n ' ',\r\n '-',\r\n );\r\n let classes = `${styles.portItem} ${styles[portclass]} ${index === active ? styles.activePort : \"\"}`;\r\n return (\r\n setActive(index)}\r\n style={{\r\n backgroundImage: `url(${\r\n port.attributes?.CoverImage?.data?.attributes?.url\r\n ? `${BASE_URL}${port.attributes?.CoverImage.data.attributes.url}`\r\n : RasTanuraBackgroundImage\r\n })`,\r\n \r\n }}>\r\n \r\n {port?.attributes?.Port}\r\n \r\n
\r\n );\r\n })}\r\n {ports[active]?.attributes.Description}
\r\n\r\n\r\n \r\n {t('Terminals')}\r\n
\r\n \r\n \r\n \r\n {ports[active]?.attributes?.Berths}\r\n
\r\n \r\n )}\r\n {ports[active]?.attributes?.Terminals && (\r\n <>\r\n \r\n {active != null && (\r\n
\r\n \r\n {t('ASSETS AND FACILITIES')}\r\n
\r\n )}\r\n\r\n \r\n {t('Berths')}\r\n
\r\n \r\n \r\n {ports[active]?.attributes.Area}\r\n
\r\n \r\n )}\r\n {ports[active]?.attributes?.Berths && (\r\n <>\r\n \r\n {ports[active]?.attributes?.Area && (\r\n <>\r\n \r\n {t('Area')}\r\n
\r\n \r\n {active != null && (\r\n
\r\n
\r\n )}\r\n \r\n {t('Ports Contact Us:')}\r\n
\r\n{ports[active]?.attributes?.ContactUsTitle}
\r\n\r\n {t('Tel')} {ports[active]?.attributes?.TelNo} {t('Fax')}{' '}\r\n {ports[active]?.attributes.FaxNo}\r\n
\r\n{ports[active]?.attributes?.PostalAddress}
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n const UnderConstruction = () => {\r\n const { t, i18n } = useTranslation();\r\n // useEffect(() => {\r\n // var localStoreVar = localStorage.getItem('locale');\r\n // i18n.changeLanguage(localStoreVar);\r\n // },[])\r\n return (\r\n
\r\n
\r\n )\r\n }\r\n export default UnderConstruction;","\r\nimport { styled } from '@mui/system';\r\nimport TabsUnstyled from '@mui/base/TabsUnstyled';\r\nimport TabsListUnstyled from '@mui/base/TabsListUnstyled';\r\nimport TabPanelUnstyled from '@mui/base/TabPanelUnstyled';\r\nimport { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';\r\nimport TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';\r\nimport { useEffect, useState } from 'react';\r\nimport { biddings } from './eservice.constants';\r\nimport styles from './EServices.module.scss';\r\nimport UnderConstruction from './UnderConstruction';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst Biddings = () => {\r\n const Tab = styled(TabUnstyled)`\r\n cursor: pointer;\r\n padding: 9px 14px;\r\n border: 1px solid #bbb;\r\n font-family: \"themixarabicPlain\",sans-serif;\r\n border-radius: 45px;\r\n font-size: 17px;\r\n margin-right: 7px;\r\n margin-left: 7px;\r\n margin-bottom: 12px;\r\n text-transform: none;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n color: #000;\r\n transition: .2s;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n &:hover {\r\n color: #fff;\r\n background: #2D6A80;\r\n border-color: #2D6A80;\r\n \r\n }\r\n\r\n @media(max-width:767px) {\r\n font-size:16px;\r\n\r\n line-height:20px;\r\n \r\n }\r\n \r\n @media(max-width:639px) {\r\n \r\n \r\n }\r\n\r\n &.${tabUnstyledClasses.selected} {\r\n color: #fff;\r\n background: #2D6A80;\r\n border-color: #2D6A80;\r\n\r\n\r\n \r\n }\r\n\r\n &.${buttonUnstyledClasses.disabled} {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n`;\r\n\r\nconst TabPanel = styled(TabPanelUnstyled)`\r\n\r\n`;\r\n\r\nconst TabsList = styled(TabsListUnstyled)`\r\nmargin-top:20px;\r\n\r\n`;\r\nconst [selectQuery,setSelectQuery] = useState(0);\r\nconst { t, i18n } = useTranslation();\r\nuseEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n},[])\r\n return (\r\n {t(\"Under Construction\")}
\r\n{t(\"This service is coming soon.\")}
\r\n\r\n \r\n
\r\n );\r\n};\r\nexport default Biddings;\r\n","import { useQuery } from '@tanstack/react-query';\r\nimport styles from './Announcement.module.scss';\r\nimport { GetAnnouncements } from './Announcement.api';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Markdown from 'markdown-to-jsx';\r\n\r\nconst Announcement = () => {\r\n const { i18n, t } = useTranslation();\r\n const { data, isError, isLoading } = useQuery(\r\n [\r\n 'announcements',\r\n {\r\n locale: i18n.language,\r\n },\r\n ],\r\n () => GetAnnouncements(i18n.language),\r\n { keepPreviousData: true },\r\n );\r\n\r\n return (\r\n <>\r\n {data?.data &&\r\n data?.data?.length > 0 &&\r\n data?.data?.map((item) => {\r\n const currentDate = new Date();\r\n const day = currentDate.getUTCDate();\r\n const month = currentDate.getUTCMonth();\r\n const year = currentDate.getUTCFullYear();\r\n const hours = currentDate.getUTCHours();\r\n const minutes = currentDate.getUTCMinutes();\r\n const seconds = currentDate.getUTCSeconds();\r\n const milliseconds = currentDate.getUTCMilliseconds();\r\n\r\n const now = Date.UTC(\r\n year,\r\n month,\r\n day,\r\n hours,\r\n minutes,\r\n seconds,\r\n milliseconds,\r\n );\r\n\r\n if (\r\n new Date(item?.attributes?.StartDate)?.getTime() <= now &&\r\n new Date(item?.attributes?.EndDate)?.getTime() >= now\r\n ) {\r\n return (\r\n {t('Biddings')}
\r\n\r\n
\r\n \r\n \r\n {biddings.map((item, index) => (\r\n \r\n {t(item.title)}\r\n \r\n ))}\r\n \r\n
\r\n \r\n {biddings.map((item, index) => (\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n \r\n {/* {content}
*/}\r\n \r\n
\r\n );\r\n }\r\n })}\r\n \r\n );\r\n};\r\n\r\nexport default Announcement;\r\n","import { AxiosResponse } from 'axios';\r\nimport http from '../../../http';\r\nimport { Announcement } from './Announcement.types';\r\n\r\nexport const GetAnnouncements = (\r\n locale: string\r\n) =>\r\n http\r\n .get(\r\n `/api/announcements?populate=*&locale=${locale}`,\r\n )\r\n .then(\r\n (\r\n response: AxiosResponse<{\r\n data: Announcement[];\r\n }>,\r\n ) => response.data,\r\n );\r\n","import styles from './EServices.module.scss';\r\nimport { useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Announcement from './Announcement/Announcement';\r\n\r\nconst Invoice = () => {\r\n const { t, i18n } = useTranslation();\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n return (\r\n \r\n {item?.attributes?.Title && (\r\n
\r\n \r\n {item?.attributes?.Title}\r\n
\r\n )}\r\n {item.attributes?.Description && (\r\n \r\n {item.attributes?.Description} \r\n
\r\n )}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Invoice;\r\n","import styles from './EServices.module.scss';\r\nimport { useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Announcement from './Announcement/Announcement';\r\n\r\nconst NewInvoice = () => {\r\n const { t, i18n } = useTranslation();\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n return (\r\n {t('Invoices of owners of goods Service')}
\r\n\r\n\r\n
\r\n\r\n {t('Access to the service')}\r\n \r\n
\r\n \r\n {t(\r\n 'This service allows owners of goods and beneficiaries to issue invoices from Saudi Ports Authority’s website through commercial ports invoices system.',\r\n )}\r\n
\r\n\r\n {/*\r\n {i18n.language === 'ar' && (\r\n\r\n 
\r\n
\r\n )*/}\r\n {/*remove at friday morning */}\r\n \r\n
\r\n تنبيه
\r\n يوم الجمعة 21 يوليو,2023 من الساعة 1 مساء حتى 3 مساء\r\n
\r\n \r\n {t('Invoice issuance steps:')}\r\n
\r\n
\r\n \r\n
\r\n {t('1')}
\r\n \r\n {t('Access invoice service system')}\r\n
\r\n \r\n
\r\n {t('2')}
\r\n \r\n {t('Enter username and password')}\r\n
\r\n \r\n
\r\n {t('3')}
\r\n \r\n {t(\r\n 'Enquire about bills information by entering the numbers of the manifest and the bill',\r\n )}\r\n
\r\n \r\n
\r\n {t('4')}
\r\n \r\n {t('Enter delivery permission number and print invoice')}\r\n
\r\n \r\n
\r\n {t('5')}
\r\n {t('Pay bill through SADAD')}
\r\n \r\n
- \r\n {/*
- \r\n To access the service directly, please click on the following\r\n link{' '}\r\n
- \r\n
\r\n {t('Instructions')}\r\n
- \r\n
- \r\n {t(\r\n 'For the service to function properly, it is recommended to use the (Explorer-FireFox) browser, and a Java support application must be available on the device.',\r\n )}\r\n \r\n
- \r\n {t('If the application is not available, please click ')}\r\n
- \r\n {t(\r\n 'In case you have difficulty using the service, please click ',\r\n )}\r\n
- \r\n
- \r\n {t(\r\n 'To pay bills of the General Ports Authority through Mada-Visa-MasterCard cards via the electronic payment service at the link ',\r\n )}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default NewInvoice;\r\n","import styles from './EServices.module.scss';\r\nconst license1 = (props) => {\r\nreturn (\r\n<>\r\n{props.detail[0] != null && props.detail[0].attributes != null && }\r\n\r\n)\r\n}\r\nexport default license1;\r\n\r\n","export default __webpack_public_path__ + \"static/media/service-license-flow.cde63060.png\";","export default __webpack_public_path__ + \"static/media/service-license-flow2.7055d8dc.png\";","import styles from './EServices.module.scss';\r\nconst license2 = (props) => {\r\nreturn (\r\n <>\r\n {props.detail[0] != null && props.detail[0].attributes != null && }\r\n \r\n)\r\n}\r\nexport default license2;\r\n\r\n\r\n\r\n","import styles from './EServices.module.scss';\r\nimport serviceImage from \"../../assets/img/service-license-flow.png\";\r\nimport serviceImage2 from \"../../assets/img/service-license-flow2.png\";\r\nimport { styled } from '@mui/system';\r\nimport TabsUnstyled from '@mui/base/TabsUnstyled';\r\nimport TabsListUnstyled from '@mui/base/TabsListUnstyled';\r\nimport TabPanelUnstyled from '@mui/base/TabPanelUnstyled';\r\nimport { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';\r\nimport TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';\r\nimport { useEffect, useState } from 'react';\r\nimport license1 from './license1'\r\nimport license2 from './license2'\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useServiceContext } from 'contexts/eServiceContext';\r\n\r\nconst License = () => {\r\n const { licenses, } = useServiceContext();\r\n console.log(licenses)\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n},[])\r\n const [selectQuery,setSelectQuery] = useState(0);\r\n const Tab = styled(TabUnstyled)`\r\n cursor: pointer;\r\n padding: 12px 16px 12px 0px;\r\n display: flex;\r\n width: 100%;\r\n border-bottom: 1px solid;\r\n text-align: left;\r\n &:hover {\r\n font-family: \"themixarabicBold\", sans-serif;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n @media(max-width: 767px) {\r\n text-align: center;\r\n padding: 9px 20px;\r\n border: solid 1px #bbb;\r\n font-family: \"themixarabicPlain\", sans-serif;\r\n border-radius: 45px;\r\n font-size: 16px;\r\n margin-right: 15px;\r\n margin-bottom: 12px;\r\n text-transform: none;\r\n width: auto;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n color: #000;\r\n }\r\n\r\n &.${tabUnstyledClasses.selected} {\r\n color: #48a2b8;\r\n display: flex;\r\n \r\n font-family: \"themixarabicBold\", sans-serif;\r\n \r\n @media(max-width: 767px) {\r\n border-color: #2D6A80;\r\n background: #2D6A80;\r\n color: #fff;\r\n }\r\n }\r\n\r\n &.${buttonUnstyledClasses.disabled} {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n`;\r\n\r\nconst TabPanel = styled(TabPanelUnstyled)`\r\n \r\n`;\r\n\r\nconst TabsList = styled(TabsListUnstyled)`\r\n\r\n\r\n @media(max-width:767px) {\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-bottom: 20px;\r\n }\r\n`;\r\nconst components = [\r\n {\r\n title: t(\"Shipping agent license\"),\r\n component: license1, \r\n },\r\n{\r\n title: t(\"Ship chandelling license\"),\r\n component: license2, \r\n },\r\n\r\n]\r\n return (\r\n {t(\"New version of Invoices of Owners of Goods Service 'Trial Version'\")}
\r\n\r\n\r\n
\r\n\r\n {t('Access to the service')}\r\n \r\n
\r\n \r\n {t(\r\n 'This service allows owners of goods and beneficiaries to issue invoices from Saudi Ports Authority’s website through commercial ports invoices system.',\r\n )}\r\n
\r\n\r\n {/*\r\n {i18n.language === 'ar' && (\r\n\r\n \r\n
\r\n )*/}\r\n {/*remove at friday morning */}\r\n \r\n
\r\n تنبيه
\r\n يوم الجمعة 21 يوليو,2023 من الساعة 1 مساء حتى 3 مساء\r\n
\r\n \r\n {t('Invoice issuance steps:')}\r\n
\r\n
\r\n \r\n
\r\n {t('1')}
\r\n \r\n {t('Access invoice service system')}\r\n
\r\n \r\n
\r\n {t('2')}
\r\n \r\n {t('Enter username and password')}\r\n
\r\n \r\n
\r\n {t('3')}
\r\n \r\n {t(\r\n 'Enquire about bills information by entering the numbers of the manifest and the bill',\r\n )}\r\n
\r\n \r\n
\r\n {t('4')}
\r\n \r\n {t('Enter delivery permission number and print invoice')}\r\n
\r\n \r\n
\r\n {t('5')}
\r\n {t('Pay bill through SADAD')}
\r\n \r\n
- \r\n {/*
- \r\n To access the service directly, please click on the following\r\n link{' '}\r\n
- \r\n
\r\n
- \r\n
- \r\n {t(\r\n 'The General Ports Authority bills can be paid through the SADAD service or through (Mada-Visa-MasterCard) cards via the electronic payment service at the link ',\r\n )}\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default License;\r\n","import styles from './EServices.module.scss';\r\n\r\nimport serviceImage from '../../assets/img/service-rental-flow.png';\r\nimport { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useFacilityContext } from 'contexts/FacilityContext';\r\n\r\nconst RentalFacilities = () => {\r\n const { facilities } = useFacilityContext();\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n return (\r\n {t(\"License System\")}
\r\n\r\n
\r\n \r\n{t(\"This service provides you with the necessary license to practice shipping agents and ship chandelling related activities in Saudi ports once fulfilling all the conditions and requirements.\")}\r\n
\r\n\r\n \r\n
\r\n\r\n \r\n {components.map((item, index) => (\r\n {item.title} \r\n ))}\r\n \r\n
\r\n \r\n {components.map((item, index) => (\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default RentalFacilities;\r\n","export default __webpack_public_path__ + \"static/media/service-rental-flow.290d4fd3.png\";","import styles from './EServices.module.scss';\r\nimport { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nconst Tracking = () => {\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n},[])\r\n return (\r\n {t('Request for rental of facilities')}
\r\n\r\n
\r\n \r\n {t(\r\n 'This service allows beneficiaries to submit a request for rental of facilities in ports affiliated to Saudi Ports Authority, and to follow up on the status of previous requests without the need to head for the ports or headquarters.',\r\n )}\r\n
\r\n\r\n {t('Steps for rental request')}:\r\n
\r\n\r\n
\r\n \r\n
\r\n {t('1')}
\r\n \r\n {t('Enter the Rental of Facility Service System')}\r\n
\r\n \r\n
\r\n {t('2')}
\r\n {t('Press new request')}
\r\n \r\n
\r\n {t('3')}
\r\n {t('Fill in the application')}
\r\n \r\n
\r\n {t('4')}
\r\n {t('Attach documents')}
\r\n \r\n
\r\n {t('5')}
\r\n {t('Submit request')}
\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n
\r\n
\r\n | \r\n | ||||
| \r\n {t('Near')}\r\n | \r\n\r\n {t('Far')}\r\n | \r\n\r\n {t('Outside')}\r\n | \r\n||
| \r\n {item.attributes.Port}\r\n | \r\n\r\n {item.attributes.Near}\r\n | \r\n\r\n {item.attributes.Far}\r\n | \r\n\r\n {item.attributes.Outside}\r\n | \r\n\r\n {item.attributes.RentalFee}\r\n | \r\n
| Jeddah Islamic Port | \r\n74 | \r\n34 | \r\n30 | \r\n100 | \r\n
| King Abdulaziz Port in Dammam | \r\n74 | \r\n34 | \r\n30 | \r\n100 | \r\n
| Jubail Commercial Port | \r\n39 | \r\n21 | \r\n- | \r\n60 | \r\n
| Yanbu Commercial Port | \r\n39 | \r\n24 | \r\n17 | \r\n60 | \r\n
| Jazan Port | \r\n29 | \r\n24 | \r\n17 | \r\n60 | \r\n
| King Fahad Industrial Port in Jubail | \r\n39 | \r\n18 | \r\n16 | \r\n60 | \r\n
| King Fahad Industrial Port in Yanbu | \r\n14 | \r\n4 | \r\n2 | \r\n60 | \r\n
| Ras Al-khair Port | \r\n14 | \r\n4 | \r\n2 | \r\n60 | \r\n
| Dhiba Port | \r\n29 | \r\n16 | \r\n10 | \r\n60 | \r\n
\r\n *{' '}\r\n {t(\r\n 'The value of leasing land for the activity of communication towers in ports, at a maximum price of 500 riyals per square meter',\r\n )}\r\n .\r\n
\r\n\r\n
\r\n \r\n {t('Facility Rental Request Service')}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Tracking;\r\n","export default __webpack_public_path__ + \"static/media/zip.cfa66479.svg\";","export default __webpack_public_path__ + \"static/media/Statistics_2019.25628de3.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2018.71e14634.zip\";","export default __webpack_public_path__ + \"static/media/statistics_2017_English.0c54f0ae.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2016_English.7e3148ee.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2015.4c427d9e.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2014.1b50cc15.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2013.9a062a3d.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2012.e0a7885f.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2011.e953712b.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2010.9dce9488.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2009.10e44028.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2008.3a8f2da9.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2007.ba1c036d.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2006.87a73427.zip\";","export default __webpack_public_path__ + \"static/media/Statistics_2005.f46b7516.zip\";","import styles from './EServices.module.scss';\r\nimport zip from \"../../assets/img/eservices/zip.svg\";\r\n\r\nimport zip2019 from \"../../assets/downloads/statistics/Statistics_2019.zip\"\r\nimport zip2018 from \"../../assets/downloads/statistics/Statistics_2018.zip\"\r\nimport zip2017 from \"../../assets/downloads/statistics/statistics_2017_English.zip\"\r\nimport zip2016 from \"../../assets/downloads/statistics/Statistics_2016_English.zip\"\r\nimport zip2015 from \"../../assets/downloads/statistics/Statistics_2015.zip\"\r\nimport zip2014 from \"../../assets/downloads/statistics/Statistics_2014.zip\"\r\nimport zip2013 from \"../../assets/downloads/statistics/Statistics_2013.zip\"\r\nimport zip2012 from \"../../assets/downloads/statistics/Statistics_2012.zip\"\r\nimport zip2011 from \"../../assets/downloads/statistics/Statistics_2011.zip\"\r\nimport zip2010 from \"../../assets/downloads/statistics/Statistics_2010.zip\"\r\nimport zip2009 from \"../../assets/downloads/statistics/Statistics_2009.zip\"\r\nimport zip2008 from \"../../assets/downloads/statistics/Statistics_2008.zip\"\r\nimport zip2007 from \"../../assets/downloads/statistics/Statistics_2007.zip\"\r\nimport zip2006 from \"../../assets/downloads/statistics/Statistics_2006.zip\"\r\nimport zip2005 from \"../../assets/downloads/statistics/Statistics_2005.zip\"\r\nimport { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nconst Statistics = () => {\r\n const { t, i18n } = useTranslation();\r\n const [pdfYear, setPdfYear] = useState(0);\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n },[])\r\n return (\r\n {t(\"Container Tracking\")}
\r\n \r\n\r\n
\r\n {t(\"E-service which allows beneficiaries to find the current location of containers on Google Maps, and to get information on the containers’ status from the port of export to the port of import, while it also allows beneficiaries to know the time required for the arrival of goods.\")}
\r\n\r\n \r\n {t(\"Access to the service\")}\r\n \r\n {/* \r\n To Access service click here \r\n */}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Statistics;\r\n","import ReactDatePicker from 'react-multi-date-picker';\r\nimport styles from './DatePicker.module.scss';\r\nimport { FaCalendar, FaTimes } from 'react-icons/fa';\r\nimport { DateObject } from 'react-multi-date-picker';\r\nimport { useMemo } from 'react';\r\n\r\nconst DatePicker = (props) => {\r\n const currentDate = useMemo(\r\n () =>\r\n new DateObject({\r\n calendar: props.calendar,\r\n locale: props.locale,\r\n }),\r\n [],\r\n );\r\n\r\n return (\r\n {t(\"Statistics\")}
\r\n \r\n \r\n {/*\r\n This service allows owners of goods and beneficiaries to issue invoices from Saudi Ports Authority’s website through commercial ports invoices system. \r\n
*/}\r\n \r\n \r\n{t(\"Statistics by year\")}
\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2019\" ? (\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n {t(\"2019\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2018\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2018\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2017\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2017\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2016\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2016\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2015\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2015\")}\r\n
\r\n ) : '' }\r\n \r\n { pdfYear == \"0\" || pdfYear == \"2014\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2014\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2013\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2013\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2012\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2012\")}\r\n
\r\n ) : '' } { pdfYear == \"0\" || pdfYear == \"2011\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2011\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2010\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2010\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2009\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2009\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2008\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2008\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2007\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2007\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2006\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2006\")}\r\n
\r\n ) : '' }\r\n\r\n { pdfYear == \"0\" || pdfYear == \"2005\" ? (\r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2005\")}\r\n
\r\n ) : '' }\r\n {/* \r\n\r\n \r\n
\r\n \r\n {t(\"2018\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2017\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2016\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2015\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2014\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2013\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2012\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2011\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2010\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2009\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2008\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2007\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2006\")}\r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {t(\"2005\")}\r\n
\r\n */}\r\n\r\n \r\n handleValueChange({\r\n target: {\r\n value: currentDate,\r\n selectionStart: currentDate.length,\r\n },\r\n })\r\n }>\r\n
\r\n );\r\n};\r\n\r\nexport default DatePicker;\r\n","import { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Alert } from '@mui/material';\r\nimport DatePicker from '../DatePicker';\r\nimport hijriCalendar from 'react-date-object/calendars/arabic';\r\nimport arabicCalendarLocale from '../DatePicker/arabic_ar';\r\nimport { Loader } from '../Loader';\r\n\r\nimport { useExternalContext } from 'contexts/ExternalContext';\r\nimport styles from './EServices.module.scss';\r\n\r\nconst TransactionTrackingService = () => {\r\n const { t, i18n } = useTranslation();\r\n const {\r\n apiLoading,\r\n getCaptcha,\r\n captchaData,\r\n getTransactionStatus,\r\n transactionStatusData,\r\n } = useExternalContext();\r\n const [documentDate, setDocumentDate] = useState(new Date());\r\n const [documentNumber, setDocumentNumber] = useState('');\r\n const [captcha, setCaptcha] = useState('');\r\n const [showResults, setShowResults] = useState(false);\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n const callGetTransactionStatus = async (ev) => {\r\n ev.preventDefault();\r\n setShowResults(false);\r\n await getTransactionStatus({\r\n DocumentNumber: documentNumber,\r\n HDate: documentDate,\r\n captcha,\r\n });\r\n setShowResults(true);\r\n getCaptcha();\r\n setCaptcha('');\r\n };\r\n\r\n return (\r\n \r\n
\r\n {apiLoading &&\r\n \r\n
\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default TransactionTrackingService;\r\n","import { useState, useEffect } from 'react';\r\n\r\nexport const DebouncedInput = ({\r\n value: initialValue,\r\n onChange,\r\n debounce = 500,\r\n ...props\r\n}) => {\r\n const [value, setValue] = useState(initialValue);\r\n\r\n useEffect(() => {\r\n setValue(initialValue);\r\n }, [initialValue]);\r\n\r\n useEffect(() => {\r\n const timeout = setTimeout(() => {\r\n onChange(value);\r\n }, debounce);\r\n\r\n return () => clearTimeout(timeout);\r\n }, [value]);\r\n\r\n return (\r\n {t('Transaction Tracking Service')}
\r\n {/*{t(\"Consume Service - Service\")}
*/}\r\n\r\n
\r\n \r\n \r\n {t(\r\n 'This e-service allows beneficiaries of Saudi Ports Authority’s services to inquire about the information and status of their transactions.',\r\n )}\r\n
\r\n\r\n\r\n {t('Steps to inquire about transactions:')}\r\n
\r\n\r\n
\r\n \r\n
\r\n {t('1')}
\r\n \r\n {t('Access Transactions Tracking System')}\r\n
\r\n \r\n
\r\n {t('2')}
\r\n \r\n {t('Enter transaction number and date')}\r\n
\r\n \r\n
\r\n {t('3')}
\r\n \r\n {t('Enter picture code and press search')}\r\n
\r\n \r\n
\r\n {t('4')}
\r\n \r\n {t('Transaction status appears')}\r\n
\r\n \r\n {apiLoading &&
\r\n \r\n {t(transactionStatusData?.error || 'Something went wrong')}\r\n \r\n
\r\n )}\r\n {showResults && transactionStatusData?.data && (\r\n | {t('Document Number')} | \r\n{transactionStatusData?.data?.REFERENCE_NUMBER} | \r\n
| {t('Document Date')} | \r\n{transactionStatusData?.data?.DOCUMENT_DATE_HIJRI} | \r\n
| {t('Subject')} | \r\n{transactionStatusData?.data?.SUBJECT} | \r\n
| {t('Category')} | \r\n{transactionStatusData?.data?.CATEGORY} | \r\n
| {t('Organization Name')} | \r\n{transactionStatusData?.data?.DOCUMENT_FROM_ORG_NAME} | \r\n
| {t('Directed To')} | \r\n{transactionStatusData?.data?.DIRECTED_TO} | \r\n
| {t('Status')} | \r\n{transactionStatusData?.data?.STATUS} | \r\n
| {t('Transfer Date')} | \r\n{transactionStatusData?.data?.TRANSFER_DATE_HIJRI} | \r\n
\r\n {t('No data available')} \r\n
\r\n )}\r\n \r\n );\r\n};\r\n\r\nconst TableComponent = ({ data, columns }) => {\r\n const { t } = useTranslation();\r\n const [sorting, setSorting] = useState([]);\r\n const [globalFilter, setGlobalFilter] = useState('');\r\n const [remountComponent, setRemountComponent] = useState(0);\r\n\r\n const table = useReactTable({\r\n data,\r\n columns,\r\n state: {\r\n sorting,\r\n globalFilter,\r\n },\r\n onSortingChange: setSorting,\r\n onGlobalFilterChange: setGlobalFilter,\r\n globalFilterFn: 'includesString',\r\n getCoreRowModel: getCoreRowModel(),\r\n getFilteredRowModel: getFilteredRowModel(),\r\n getSortedRowModel: getSortedRowModel(),\r\n getPaginationRowModel: getPaginationRowModel(),\r\n });\r\n\r\n const currentPageSize = table.getState().pagination.pageSize;\r\n const totalPages = table.getPageCount();\r\n\r\n useEffect(() => {\r\n // remount react-paginate to reset selected page\r\n setRemountComponent(Math.random());\r\n }, [globalFilter, currentPageSize]);\r\n\r\n return (\r\n \r\n \r\n \r\n {table.getHeaderGroups().map((headerGroup) => (\r\n
\r\n {totalPages > 0 && (\r\n
\r\n );\r\n};\r\n","import { useState, useEffect } from 'react';\r\nimport { FormControl, Alert } from '@mui/material';\r\nimport DatePicker from '../DatePicker';\r\nimport styles from './EServices.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { createColumnHelper } from '@tanstack/react-table';\r\nimport { useExternalContext } from 'contexts/ExternalContext';\r\nimport { Table } from 'components/Table';\r\nimport { Loader } from 'components/Loader';\r\nimport { DateObject } from 'react-multi-date-picker';\r\nimport { formatDateToTableFormat } from '../../utils/format.string';\r\n\r\nconst DATE_FORMAT = 'DD/MM/YYYY';\r\n\r\nconst VesselSearch = () => {\r\n const { t, i18n } = useTranslation();\r\n const [selectedType, setSelectedType] = useState('searchVesselSchedule');\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n\r\n \r\n {t('Display')}\r\n {\r\n table.setPageSize(Number(e.target.value));\r\n }}\r\n className=\"shadow border p-2\">\r\n {PAGE_SIZES.map((pageSize) => (\r\n \r\n ))}\r\n \r\n {t('records per page')}\r\n
\r\n \r\n \r\n setGlobalFilter(String(value))}\r\n className=\"px-2 py-1 font-lg shadow border border-block\"\r\n />\r\n
\r\n | \r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n | \r\n ))}\r\n
\r\n
\r\n )}\r\n \r\n \r\n {t('Page Size Info', {\r\n current: table.getState().pagination.pageIndex + 1,\r\n total: totalPages,\r\n })}\r\n \r\n
\r\n \r\n {\r\n table.setPageIndex(selected);\r\n }}\r\n containerClassName={styles.pagination}\r\n initialPage={table.getState().pagination.pageIndex}\r\n />\r\n
\r\n \r\n \r\n {\r\n setSelectedType(event.target.value);\r\n }}>\r\n \r\n \r\n
\r\n \r\n {selectedType === 'searchVesselSchedule' ? (\r\n {t('Vessel Search')}
\r\n {/*{t('Ports - Vessel Search Port')}
*/}\r\n\r\n {t(\r\n 'This is an e-service which allows beneficiaries to enquire about the vessels’ arrival/departure schedule and status in all Saudi ports, as well as the authorized shipping agent of the vessel.',\r\n )}\r\n
\r\n\r\n\r\n \r\n {t(vesselSearchData?.error || 'Something went wrong')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n \r\n\r\n setVesselName(e.target.value)}>\r\n
\r\n\r\n \r\n \r\n\r\n setAgentName(e.target.value)}>\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n\r\n \r\n
\r\n \r\n \r\n\r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n setStartDate(e.toString())}\r\n format={DATE_FORMAT}\r\n required\r\n />\r\n
\r\n \r\n \r\n setEndDate(e.toString())}\r\n format={DATE_FORMAT}\r\n minDate={new DateObject({ date: startDate, format: DATE_FORMAT })}\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n setCaptcha(e.target.value)}\r\n required\r\n />\r\n
\r\n \r\n \r\n \r\n {t('Submit')}\r\n \r\n
\r\n \r\n \r\n {apiLoading &&
\r\n \r\n {t(agentSearchData?.error || 'Something went wrong')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n\r\n setAgentName(e.target.value)}>\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n setCaptcha(e.target.value)}\r\n required\r\n />\r\n
\r\n \r\n \r\n \r\n {t('Submit')}\r\n \r\n
\r\n \r\n \r\n {apiLoading &&
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Order;\r\n","import styles from './EServices.module.scss';\r\nimport { useEffect } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nconst Invoice = () => {\r\n const { t, i18n } = useTranslation();\r\n\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n {t('Orders')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t(\r\n 'This is an e-service which displays the warehouse items available at all Saudi Ports and allow other government agencies to request and benefit from these items as needed, prior of offering them for sale.',\r\n )}\r\n
\r\n\r\n
\r\n );\r\n};\r\n\r\nexport default Invoice;\r\n","export default __webpack_public_path__ + \"static/media/search.7f60ee75.svg\";","export default __webpack_public_path__ + \"static/media/license.2dce0b41.svg\";","export default __webpack_public_path__ + \"static/media/container-tracking.cc73f05e.svg\";","export default __webpack_public_path__ + \"static/media/invoice.ba8fa463.svg\";","export default __webpack_public_path__ + \"static/media/request.5b489629.svg\";","export default __webpack_public_path__ + \"static/media/tracking-service.e3aa0d73.svg\";","export default __webpack_public_path__ + \"static/media/statistics.d0dee433.svg\";","export default __webpack_public_path__ + \"static/media/timer.f05f841c.svg\";","export default __webpack_public_path__ + \"static/media/Icon-01.5aa11b0b.png\";","export default __webpack_public_path__ + \"static/media/Enquiries.911b7a45.pdf\";","import { useExternalContext } from 'contexts/ExternalContext';\r\nimport { createColumnHelper } from '@tanstack/react-table';\r\nimport { Table } from 'components/Table';\r\nimport { Loader } from 'components/Loader';\r\n\r\nconst columnHelper = createColumnHelper();\r\n\r\nconst columns = [\r\n columnHelper.accessor('title', {\r\n cell: (info) => info.getValue(),\r\n header: 'Bid Name',\r\n meta: {\r\n size: '20%',\r\n },\r\n }),\r\n columnHelper.accessor('compDocumentFeesAr', {\r\n cell: (info) => info.getValue(),\r\n header: 'Document Fees',\r\n meta: {\r\n size: '14%',\r\n },\r\n }),\r\n columnHelper.accessor('compSubmissionLocationAr', {\r\n cell: (info) => (\r\n {t('Electronic payment service')}
\r\n\r\n\r\n
\r\n \r\n {t(\r\n 'This service allows payment of Saudi Ports Authority bills through Mada, Visa, MasterCard cards.',\r\n )}\r\n
\r\n\r\n\r\n
\r\n \r\n
\r\n
{Number(row.row.id) + 1}
;\r\n },\r\n }),\r\n columnHelper.accessor('title', {\r\n header: () => {\r\n t('SLA title')\r\n },\r\n cell: (info) => info.getValue(),\r\n }),\r\n columnHelper.accessor('value', {\r\n header: () => {\r\n t('SLA Description')\r\n },\r\n cell: (info) => info.getValue(),\r\n }),\r\n ];\r\n\r\n const table = useReactTable({\r\n data,\r\n columns,\r\n getCoreRowModel: getCoreRowModel(),\r\n });\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n","import { useExternalContext } from 'contexts/ExternalContext';\r\nimport { useEffect, useRef, useState } from 'react';\r\nimport { useForm } from 'react-hook-form';\r\nimport { useTranslation } from 'react-i18next';\r\nimport styles from './Remarks.module.scss';\r\nimport { Alert } from '@mui/material';\r\nimport { Loader } from 'components/Loader';\r\n\r\nexport const Remarks = () => {\r\n const formRef = useRef(null);\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n const localStoreVar = localStorage.getItem('locale') || 'ar';\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n const { getCaptcha, captchaData, apiLoading, submitRemarksForm } =\r\n useExternalContext();\r\n const [success, setSuccess] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!captchaData) {\r\n getCaptcha();\r\n }\r\n }, []);\r\n\r\n const {\r\n register,\r\n handleSubmit,\r\n formState: { errors },\r\n setError,\r\n reset,\r\n } = useForm();\r\n\r\n const onSubmit = async (data) => {\r\n setSuccess(null);\r\n\r\n console.log(data);\r\n const formData = new FormData();\r\n formData.append('name', data.name);\r\n formData.append('captcha', data.captcha);\r\n formData.append('phoneNumber', data.mobileNumber);\r\n formData.append('details', data.details);\r\n\r\n const resp = await submitRemarksForm(formData);\r\n getCaptcha();\r\n\r\n if (resp?.isSuccess === true) {\r\n reset();\r\n setSuccess(true);\r\n formRef.current?.scrollIntoView({ behavior: 'smooth' });\r\n return;\r\n }\r\n\r\n if (resp?.error === 'Invalid Captcha') {\r\n setSuccess(null);\r\n setError('captcha', {\r\n type: 'value',\r\n message: resp?.error,\r\n });\r\n } else {\r\n setSuccess(false);\r\n formRef.current?.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n };\r\n\r\n return (\r\n {t('SLA')}
\r\n\r\n\r\n \r\n \r\n {table.getHeaderGroups().map((headerGroup) => (\r\n
\r\n
\r\n \r\n {t(\r\n 'Standards of electronic services of the General Authority of Ports',\r\n )}\r\n
\r\n| \r\n {header.isPlaceholder\r\n ? null\r\n : flexRender(\r\n header.column.columnDef.header,\r\n header.getContext(),\r\n )}\r\n | \r\n ))}\r\n
|---|
| \r\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n | \r\n ))}\r\n
\r\n \r\n {t('Ticket Follow Up')}\r\n \r\n {/*
\r\n );\r\n};\r\n","import Biddings from './Biddings';\r\nimport Invoice from './Invoice';\r\nimport NewInvoice from './NewInvoice';\r\nimport License from './License';\r\nimport RentalFacilities from './RentalFacilities';\r\nimport Tracking from './Tracking';\r\nimport Statistics from './Statistics';\r\nimport UnderConstruction from './UnderConstruction';\r\nimport TransactionTrackingService from './TransactionTrackingService';\r\nimport VesselSearch from './VesselSearch';\r\nimport Order from './Order';\r\nimport ElectronicPaymentService from './ElectronicPaymentService'\r\nimport {\r\n FaGavel,\r\n FaSearch,\r\n FaRegFileAlt,\r\n FaFileInvoiceDollar,\r\n FaExternalLinkAlt,\r\n FaQuestionCircle,\r\n FaCompressAlt,\r\n} from 'react-icons/fa';\r\nimport styles from './EServices.module.scss';\r\nimport search from '../../../src/assets/img/eservices/search.svg';\r\nimport license from '../../../src/assets/img/eservices/license.svg';\r\nimport ctracking from '../../../src/assets/img/eservices/container-tracking.svg';\r\nimport invoice from '../../../src/assets/img/eservices/invoice.svg';\r\nimport request from '../../../src/assets/img/eservices/request.svg';\r\nimport ttracking from '../../../src/assets/img/eservices/tracking-service.svg';\r\nimport statistics from '../../../src/assets/img/eservices/statistics.svg';\r\nimport sla from '../../../src/assets/img/eservices/timer.svg';\r\nimport chat from '../../../src/assets/img/eservices/Icon-01.png';\r\nimport { Biddings2 } from './biddings2';\r\nimport { Biddings3 } from './biddings3';\r\nimport { BiddingsAnnouncments } from './biddingsAnnouncment';\r\nimport { SLAComponent } from './SLA/SLA';\r\nimport { Chat } from './Chat/LiveChat';\r\n\r\nexport const components = [\r\n {\r\n title: Biddings,\r\n component: Biddings,\r\n icon: {t('Ticket Follow Up Description')}
\r\n{t('To access the Service page, click on the following link:')}
\r\n{t('Callback')}
\r\n\r\n {t(\r\n 'The General Authority for Ports will study and examine the request submitted and respond as soon as possible',\r\n )}\r\n
\r\n */}\r\n\r\n {t(\r\n 'Qualification competition for maritime services contracts for ports',\r\n )}\r\n
\r\n\r\n\r\n {t(\r\n 'Schedule for the competition for qualifying maritime services contracts for ports',\r\n )}\r\n
\r\n| {item.attributes.Label} | \r\n{item.attributes.Date} | \r\n\r\n | \r\n
{t('An Invitation for Prequalification of the Operators')}
\r\n\r\n
| {item.attributes.Label} | \r\n\r\n | \r\n \r\n | \r\n
\r\n
\r\n \r\n );\r\n}\r\n","export default \"data:image/png;base64,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\"","import pdfIcon from \"../../assets/img/pdfIcon.png\";\r\nimport styles from \"./Regulations.module.scss\";\r\n\r\nexport default function RegulationsPdfSection({ heading,source }) {\r\n\r\n return (\r\n \r\n
\r\n {t('eServices')}
\r\n\r\n \r\n
\r\n \r\n \r\n {components.map((item, index) => {\r\n if (\r\n localStorage.getItem('locale') === 'en' &&\r\n item.id === 10\r\n ) {\r\n return <>;\r\n }\r\n return (\r\n \r\n {item.icon}\r\n {t(\r\n JSON.stringify(item.title.props.children).replace(\r\n /\\\"/g,\r\n '',\r\n ),\r\n )}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n {components.map((item, index) => {\r\n if (localStorage.getItem('locale') === 'en' && item.id === 10)\r\n return <>;\r\n return (\r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n window.open(source, \"_blank\")}>\r\n
\r\n );\r\n}\r\n","const regulationPdfData = {\r\n // servicesEquipments:[{\r\n // src:\"/pdfs/Services and Capabalities.docx\",\r\n // name:\"Services and Capabalities\",\r\n // data:\"\r\n 
\r\n
\r\n \r\n \r\n {heading}\r\n
\r\n \r\nServices and Capabilities
Berths, Wharfs, and Multipurpose Built Terminals
The Saudi Ports Authority (Mawani) is the government authority responsible for the efficient, professional running of Saudi Arabia's ports. With a combined total of 290 berths, the Kingdom's ports comprise the Middle East's largest seaport network that not only contributes a great deal to national growth, but also showcases the Kingdom's formidable regional and international standing.
Each terminal contains one or more berths, and can readily accommodate any form of vessel, which is what drove Mawani to provide specialized terminals for various types of loads, including containers, general cargos, refrigerated and frozen cargos, bulk cargo, roll-on/roll-off cargos, and livestock.
Most of the Kingdom's ports have their own special zones, such as bonded storage and re-export, vessel repair facilities, indoor and outdoor storage, equipment depots, and service and maintenance centers.
Security, Safety, and the Environment
Saudi ports are safe havens to work and invest in. Mawani has redoubled its efforts to keep people, properties, the environment and operations at national ports safe. This is thanks to the implementation of state-of-the-art safety measures and information, navigation, antipollution, fire, and security systems adhered to by all operators. Mawani also complies to all International Ship and Port Facility Security Code (ISPS) rules and regulations, including the installation of security and CCTV systems, luggage scanners, and fire safety systems. Perimeter walls, controlled-access gates, and hydraulically operated blockers are standard, as are dedicated telecommunications, hydrographic surveys of seaport waters, and vessel tracking systems. Security patrol, safety, and ambulance vehicles are also supplied to all ports.
Mawani also ensures a safe working and investment environment with the help of the Industrial Security Department of the Ministry of Interior, which handles the three primary domains of workplace wellbeing: security, safety, and firefighting. Mawani constantly evaluates the security status of each facility it oversees. It has also developed security and emergency plans accordingly with ideally designed and applied response and control plans, along with training for Industrial Security personnel.
Mawani works to upgrade the performance of its emergency response teams with specialized training for any potential seaport accidents.
As well as ensuring the competence of response teams through both training and simulation exercises.
The Authority also applies global best practices to limit the environmental impact of each port and any vessels on the surrounding marine habitat.
Passenger Terminals
It has been said that there are no second chances for first impressions, and nothing communicates people's culture as strongly to visitors as do their passenger terminals. Mawani has spared no effort to ensure that passenger terminals are as welcoming to travelers to the Kingdom – especially pilgrims – as they can be. The warmth with which they are received reflects the extent of the Kingdom's care for each pilgrim's wellbeing, with every possible luxury and comfort being made available to them.
As part of its efforts to support the National Transport and Logistics Strategy (NTLS), Mawani has boosted its involvement in empowering the maritime tourism sector with new and better-developed passenger terminals and dedicated berths for cruise ships.
\",\r\n // releaseDate:\"03/03/2022\",\r\n // type:\"docx\"\r\n // }\r\n // ],\r\n privatizationProgram: [\r\n // {\r\n // src: '/pdfs/Privatization program.docx',\r\n // name: 'Privatization program',\r\n // nameAR: 'برنامج الخصخصة',\r\n // releaseDate: '03/03/2022',\r\n // type: 'docx',\r\n // },\r\n ],\r\n generalRegulationOfLicensing: [\r\n {\r\n src: '',\r\n srcAR: '/pdfs/regulations/ar/اللائحة العامة للتراخيص والتصاريح.pdf',\r\n name: '',\r\n nameAR: 'اللائحة العامة للتراخيص والتصاريح',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n generalRegulationForControl: [\r\n {\r\n src: '/pdfs/regulations/General Regulation for control and inspection.pdf',\r\n srcAR: '/pdfs/regulations/ar/اللائحة العامة للرقابة والتفتيش.pdf',\r\n name: 'General Regulation for Control and Inspection',\r\n nameAR: 'اللائحة العامة للرقابة والتفتيش',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n rulesForSeaPorts: [\r\n // {\r\n // src: '/pdfs/Rules and regulations for seaports.pdf',\r\n // srcAR: '/pdfs/اللائحة التشغيلية.pdf',\r\n // name: 'Rules and regulations for seaports',\r\n // nameAR: 'اللائحة التشغيلية للهيئة العامة للموانئ',\r\n // releaseDate: '03/03/2022',\r\n // type: 'PDF',\r\n // },\r\n ],\r\n regulationForShipChandler: [\r\n {\r\n src: '/pdfs/regulations/Regulation for ship chandlers.pdf',\r\n srcAR:\r\n '/pdfs/regulations/ar/اللائحة التنظيمية لمموني السفن ماعدا الوقود بجميع أشكاله .pdf',\r\n name: 'Regulation for Ship Chandlers (except for all types of fuel)',\r\n nameAR: 'اللائحة التنظيمية لمموني السفن ماعدا الوقود بجميع أشكاله',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n regulationsForRentalOfFacilities: [\r\n {\r\n src: '',\r\n srcAR:\r\n '/pdfs/regulations/ar/لائحة تأجير أملاك الهيئة العامة الموانئ .pdf',\r\n name: '',\r\n nameAR: 'لائحة تأجير أملاك الهيئة العامة الموانئ ',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n investorsGuide: [\r\n {\r\n src: \"/pdfs/regulations/Investors_Guide_to_Licenses.pdf\",\r\n srcAR:\"/pdfs/regulations/ar/Investors_Guide_to_Licenses.pdf\",\r\n name: \"Investor's Guide to Licenses \",\r\n nameAR: \"دليل المستثمر للتراخيص\",\r\n releaseDate: '06/06/2023',\r\n type: 'PDF',\r\n },\r\n ],\r\n portServicesFeesandCharges: [\r\n {\r\n src: '/pdfs/regulations/Port Services Fees and Charges 3rd edition.pdf',\r\n srcAR: '/pdfs/regulations/ar/نظام رسوم وأجور خدمات الموانئ.pdf',\r\n name: 'Port Services Fees and Charges',\r\n nameAR: 'نظام رسوم وأجور خدمات الموانئ',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n controlAndInseptionOfSaudiShips: [\r\n {\r\n src: '/pdfs/regulations/Control and inseption of Saudi ships.pdf',\r\n srcAR:\r\n '/pdfs/regulations/ar/التعليمات التنظيمية لإجراء الرقابة والتفتيش على السفن السعودية.pdf',\r\n name: 'Control and Inspection of Saudi Ships',\r\n nameAR: 'التعليمات التنظيمية لإجراء الرقابة والتفتيش على السفن السعودية',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n controlAndInseptionOfForeignShips: [\r\n {\r\n src: '/pdfs/regulations/Control and inseption of foreign ships.pdf',\r\n srcAR:\r\n '/pdfs/regulations/ar/التعليمات التنظيمية لإجراءات الرقابة والتفتيش على السفن الأجنبية .pdf',\r\n name: 'Control and Inspection of Foreign Ships',\r\n nameAR:\r\n 'التعليمات التنظيمية لإجراءات الرقابة والتفتيش على السفن الأجنبية',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n saudiShips: [\r\n // {\r\n // src: '/pdfs/saudi ships.pdf',\r\n // srcAR: '',\r\n // name: 'Saudi ships',\r\n // nameAR: 'التعليمات التنظيمية على السفن السعودية',\r\n // releaseDate: '03/03/2022',\r\n // type: 'PDF',\r\n // },\r\n ],\r\n foreignShips: [\r\n // {\r\n // src: '/pdfs/foreign ships.pdf',\r\n // srcAR: '',\r\n // name: 'Foreign ships',\r\n // nameAR: 'التعليمات التنظيمية على السفن الاجنبية',\r\n // releaseDate: '03/03/2022',\r\n // type: 'PDF',\r\n // },\r\n ],\r\n regulationsForShippingAgents: [\r\n {\r\n src: '',\r\n srcAR: '/pdfs/regulations/ar/لائحة مزاولة نشاط الوكلاء الملاحيين 2.pdf',\r\n name: 'Regulations for Maritime Agents',\r\n nameAR: 'لائحة مزاولة نشاط الوكلاء الملاحيين',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n regulationsForRentalOfFacilitiesOfTheSaudiPortsAuthority: [\r\n // {\r\n // src: '/pdfs/RegulationsforleasingtheAuthoritypossessions.pdf',\r\n // name: 'Regulations for leasing the Authority possessions',\r\n // nameAR:\r\n // 'Regulations for leasing the Authority possessions - please supply AR',\r\n // releaseDate: '03/03/2022',\r\n // type: 'PDF',\r\n // },\r\n ],\r\n customsFeesMechanism: [\r\n // {\r\n // srcAR: '/pdfs/آلية اجور الكشف الجمركي.pdf',\r\n // name: '',\r\n // nameAR: 'آلية اجور الكشف الجمركي',\r\n // releaseDate: '03/03/2022',\r\n // type: 'PDF',\r\n // },\r\n ],\r\n generalRegulationForSecuritySafetyHealthAndEnvironment: [\r\n {\r\n src: '',\r\n srcAR:\r\n '/pdfs/regulations/ar/اللائحة العامة للأمن والسلامة والصحة والبيئة.pdf',\r\n name: '',\r\n nameAR: 'اللائحة العامة للأمن والسلامة والصحة والبيئة',\r\n releaseDate: '03/03/2022',\r\n type: 'PDF',\r\n },\r\n ],\r\n generalRegulationForSecuritySafetyEnvironmentStandards: [\r\n {\r\n src: '/pdfs/regulations/Security Safety Environment Standards.pdf',\r\n srcAR: '',\r\n name: 'Security Safety Environment Standards',\r\n nameAR: '',\r\n releaseDate: '05/07/2023',\r\n type: 'PDF',\r\n },\r\n ],\r\n generalRegulationForOperationalregulationsoftheGeneralAuthorityforPorts: [\r\n {\r\n src: '',\r\n srcAR: '/pdfs/regulations/ar/اللائحة التشغيلية للهيئة العامة للموانئ.pdf',\r\n name: '',\r\n nameAR: 'اللائحة التشغيلية للهيئة العامة للموانئ',\r\n releaseDate: '05/07/2023',\r\n type: 'PDF',\r\n },\r\n ],\r\n generalRegulationForExecutiveProceduresManualforSecuritySafetyHealthandEnvironmentStandards:\r\n [\r\n {\r\n src: '',\r\n srcAR:\r\n '/pdfs/regulations/ar/دليل الاجراءات التنفيذية لمعايير الأمن والسلامة والصحة والبيئة.pdf',\r\n name: '',\r\n nameAR:\r\n 'دليل الاجراءات التنفيذية لمعايير الأمن والسلامة والصحة والبيئة',\r\n releaseDate: '05/07/2023',\r\n type: 'PDF',\r\n },\r\n ],\r\n rulesandRegulationsforSeaportsforThecooperationCouncilforTheArabstatesofThegulf:\r\n [\r\n {\r\n src: '/pdfs/regulations/Rules and Regulations for Seaports forThecooperatlon Council for The Arab states of The gulf.pdf',\r\n srcAR:\r\n '/pdfs/regulations/ar/قواعد وتعليمات الموانئ البحريه لدول مجلس التعاون لدول الخليج العربي.pdf',\r\n name: 'Rules and Regulations for Seaports for The Cooperatlon Council for The Arab states of The Gulf',\r\n nameAR:\r\n 'قواعد وتعليمات الموانئ البحريه لدول مجلس التعاون لدول الخليج العربي',\r\n releaseDate: '05/09/2023',\r\n type: 'PDF',\r\n },\r\n ],\r\n};\r\n\r\nexport default regulationPdfData;\r\n","import styles from './Regulations.module.scss';\r\n\r\n// todo: English translations for title and description not final\r\nexport const regulations = [\r\n {\r\n name: 'All',\r\n nameAR: 'جميع اللوائح',\r\n control: 'all',\r\n description: null,\r\n descriptionAr: null,\r\n },\r\n\r\n {\r\n name: 'Control and Inspection of Saudi Ships',\r\n nameAR: 'التعليمات التنظيمية لإجراءات الرقابة والتفتيش على السفن السعودية',\r\n description:\r\n 'Based on the approval of the Prime Minister by telegram No. (7/b/17161) dated 12/16/1421 AH that the General Authority for Ports carry out maritime inspection and control of all ships in the port in accordance with international rules or any other rules established by the state, these instructions and their appendices have been prepared for the procedures Control and inspection of Saudi ships in the ports, taking into account all the executive regulations of the international agreements and treaties issued by the International Maritime Organization and organized by the Kingdom and issued by the Maritime Authority, and the rules and instructions of the sea ports of the countries of the Cooperation Council for the Arab Gulf States.',\r\n descriptionAr:\r\n 'بناءً على موافقة رئيس مجلس الوزراء بالبرقية رقم ( 7 / ب /17161) وتاريخ 16 / 12 / 1421هـ على قيام الهيئة العامة للموانئ بالتفتيش البحري والرقابة على جميع السفن بالميناء وفقا للقواعد الدولية أو أي قواعد أخرى تضعها الدولة، فقد تم إعداد هذه التعليمات وملحقاتها لإجراءات الرقابة والتفتيش على السفن السعودية في الموانئ، مع الأخذ بالاعتبار جميع اللوائح التنفيذية للاتفاقيات والمعاهدات الدولية الصادرة من المنظمة البحرية الدولية والمنظمة لها المملكة والصادرة من السلطة البحرية وقواعد وتعليمات الموانئ البحرية لدول مجلس التعاون لدول الخليج العربي.',\r\n // background: activeBtn.controlAndInseptionOfSaudiShips,\r\n // color:activeBtn.controlAndInseptionOfSaudiShips,\r\n // border:activeBtn.controlAndInseptionOfSaudiShips,\r\n control: 'controlAndInseptionOfSaudiShips',\r\n },\r\n\r\n {\r\n name: 'General Regulation of Licensing',\r\n nameAR: 'اللائحة العامة للتراخيص والتصاريح',\r\n description:\r\n 'The General Regulations for Licenses and Permits govern the activities that fall within the competence of the General Authority for Ports, according to which the authority grants licenses to persons of natural or legal capacity who benefit from port operation services, based on the regulation of the General Authority for Ports issued by Cabinet Resolution No. (299) dated 11/6/ 1439 AH.',\r\n descriptionAr:\r\n 'تحكم اللائحة العامة للتراخيص والتصاريح الأنشطة التي تندرج ضمن اختصاصات الهيئة العامة للموانئ، وتمنح الهيئة بموجبها التراخيص للأشخاص ذوو الصفة الطبيعية أو الاعتبارية المستفيدين من خدمات تشغيل الموانئ، وذلك بناء على تنظيم الهيئة العامة للموانئ الصادر بقرار مجلس الوزراء رقم (299) وتاريخ 11/6/1439هـ.',\r\n dataAR:\r\n '
بناء علي تنظيم الهيئة العامة للموانئ الصادر بقرار مجلس الوزراء رقم (399) وتاريخ 11 هـ ، الذي أعطى للهيئة صلاحية إعداد لائحة التراخيص للأشخاص ذوو الصفة الطبيعية أو الإعتبارية المستفيدين من خدمات تشغيل الموانئ واعتمادها من قبل مجلس ادارة الهيئة ، فقد تم إعداد هذه اللائحة والقواعد التي تحكم الأنشطة التي تندرج ضمن اختصاصات الهيئة.
',\r\n // background: activeBtn.generalRegulationOfLicensing,\r\n // color:activeBtn.generalRegulationOfLicensing,\r\n // border:activeBtn.generalRegulationOfLicensing,\r\n control: 'generalRegulationOfLicensing',\r\n },\r\n {\r\n name: 'Regulation for Ship Chandlers (except for all types of fuel)',\r\n nameAR: 'اللائحة التنظيمية لمموني السفن (ما عدا الوقود بجميع أشكاله)',\r\n description:\r\n 'The regulation of ship suppliers (except for fuel in all its forms) governs all ship supply business except for fuel to regulate and ration it to ensure that the activity is practiced efficiently and with high quality, based on the general regulations for licenses issued by the decision of the Board of Directors of the General Authority for Ports No. (5/C1/D1) dated 10 3/1440 AH.',\r\n descriptionAr:\r\n 'تحكم اللائحة التنظيمية لمموني السفن (ما عدا الوقود بجميع أشكاله) جميع أعمال تموين السفن باستثناء الوقود لتنظيمها وتقنينها لضمان مزاولة النشاط بكفاءة وجودة عالية، وذلك بناءً على اللائحة العامة للتراخيص الصادرة بقرار مجلس إدارة الهيئة العامة للموانئ رقم (5/ج1/د1) وتاريخ 10/3/1440هـ.',\r\n // background: activeBtn.regulationForShipChandler,\r\n // color:activeBtn.regulationForShipChandler,\r\n // border:activeBtn.regulationForShipChandler,\r\n control: 'regulationForShipChandler',\r\n },\r\n\r\n {\r\n name: 'Regulations For Shipping Agents',\r\n nameAR: 'لائحة مزاولة نشاط الوكلاء الملاحيين',\r\n description:\r\n 'The regulation of practicing the activity of shipping agents regulates all activities of shipping agents to ensure that the activity is practiced in accordance with the highest standards of quality and efficiency, based on the general regulations for licenses and permits issued by the decision of the Board of Directors of the General Authority for Ports No. (143/C15/D2) dated (07/11/1443 AH). This regulation is complementary to the responsibilities contained in the Commercial Maritime Law issued by Royal Decree No. (M/33) dated 5/4/1440 AH.',\r\n descriptionAr:\r\n 'تنظم لائحة مزاولة نشاط الوكلاء الملاحيين جميع أنشطة الوكلاء الملاحيين لضمان مزاولة النشاط وفق أعلى معايير الجودة والكفاءة، وذلك بناءً على اللائحة العامة للتراخيص والتصاريح الصادرة بقرار مجلس إدارة الهيئة العامة للموانئ رقم (143/ج15/د2) وتاريخ (07/11/1443هـ، وتعتبر هذه اللائحة مكملة للمسؤوليات الواردة بالنظام البحري التجاري الصادر بالمرسوم الملكي رقم (م/33) بتاريخ 5/4/1440هـ.',\r\n // background: activeBtn.regulationsForShippingAgents,\r\n // color:activeBtn.regulationsForShippingAgents,\r\n // border:activeBtn.regulationsForShippingAgents,\r\n control: 'regulationsForShippingAgents',\r\n },\r\n\r\n {\r\n name: 'Regulations for rental of facilities',\r\n nameAR: 'لائحة تأجير أملاك الهيئة العامة الموانئ',\r\n description:\r\n 'The General Authority for Ports’ property rental regulation regulates the procedures for leasing the property of the General Authority for Ports, investing its real estate and properties in value-added projects, comparing applications, unifying implementation mechanisms, and providing a reference that guarantees transparency and clarity of the authority’s property rental procedures, based on the regulation of the General Authority for Ports issued by Cabinet Resolution No. (299) and dated 6/11/1439 AH.',\r\n descriptionAr:\r\n 'تنظم لائحة تأجير أملاك الهيئة العامة الموانئ إجراءات تأجير أملاك الهيئة العامة للموانئ واستثمار عقاراتها وممتلكاتها في مشاريع ذات قيمة مضافة، والمفاضلة بين الطلبات وتوحيد آليات التنفيذ وتوفير مرجعية تضمن شفافية ووضوح إجراءات تأجير املاك الهيئة، وذلك بناءً على تنظيم الهيئة العامة للموانئ الصادر بقرار مجلس الوزراء رقم (299) وتاريخ 11/ 6/1439 هـ.',\r\n // background: activeBtn.regulationsForRentalOfFacilities,\r\n // color:activeBtn.regulationsForRentalOfFacilities,\r\n // border:activeBtn.regulationsForRentalOfFacilities,\r\n control: 'regulationsForRentalOfFacilities',\r\n },\r\n\r\n {\r\n name: 'Port Services Fees and Charges',\r\n nameAR: 'نظام رسوم وأجور خدمات الموانئ',\r\n description:\r\n 'The system of fees and charges for port services issued by Royal Decree (M / 42) dated 02/07/1407 AH includes a list of fees and charges that are collected from the owner of the ship or its agent, and a list of fees that are collected from the owner of the goods, in addition to a schedule of fees for services of transit and distance goods. and fees for additional services.',\r\n descriptionAr:\r\n 'يتضمن نظام رسوم وأجور خدمات الموانئ الصادر بالمرسوم الملكي (م/42) بتاريخ 02/07/1407هـ، قائمة الرسوم والأجور التي يتم تحصيلها من مالك السفينة أو وكيلها، وقائمة الأجور التي تحصل من صاحب البضاعة، إضافة إلى جدول أجور خدمات بضائع الترانزيت والمسافة، وأجور الخدمات الإضافية.',\r\n // background: activeBtn.portServicesFeesandCharges,\r\n // color:activeBtn.portServicesFeesandCharges,\r\n // border:activeBtn.portServicesFeesandCharges,\r\n control: 'portServicesFeesandCharges',\r\n },\r\n {\r\n name: 'Control and Inspection of Foreign Ships',\r\n nameAR: 'التعليمات التنظيمية لإجراءات الرقابة والتفتيش على السفن الأجنبية',\r\n description:\r\n 'Based on the approval of the Prime Minister by telegram No. (7/b/17161) dated 12/16/1421 AH that the General Authority for Ports carry out marine inspection and control of all ships in the port in accordance with international rules or any other rules established by the state, and based on Cabinet Resolution No. ( 52) On 23/2/1423 AH, which includes the General Authority for Ports informing the General Secretariat of the Cooperation Council for the Arab States of the Gulf of the Kingdom’s position in support of the Riyadh draft memorandum of understanding regarding state control of ships for the countries bordering the Arabian Gulf. These regulatory instructions have been prepared for the control and inspection procedures on foreign ships.',\r\n descriptionAr:\r\n 'بناءً على موافقة رئيس مجلس الوزراء بالبرقية رقم ( 7 / ب /17161) وتاريخ 16 / 12 / 1421هـ على قيام الهيئة العامة للموانئ بالتفتيش البحري والرقابة على جميع السفن بالميناء وفقا للقواعد الدولية أو أي قواعد أخرى تضعها الدولة، وبناءً على قرار مجلس الوزراء رقم (52) بتاريخ 23 / 2 / 1423هـ ، المتضمن قيام الهيئة العامة للموانئ بإبلاغ الأمانة العامة لمجلس التعاون لدول الخليج العربية بموقف المملكة المؤيد لمشروع مذكرة تفاهم الرياض الخاصة برقابة الدولة على السفن للدول المطلة على الخليج العربي ، فقد تم إعداد هذه التعليمات التنظيمية لإجراءات الرقابة والتفتيش على السفن الأجنبية .',\r\n // background: activeBtn.controlAndInseptionOfSaudiShips,\r\n // color:activeBtn.controlAndInseptionOfForeignShips,\r\n // border:activeBtn.controlAndInseptionOfForeignShips,\r\n control: 'controlAndInseptionOfForeignShips',\r\n },\r\n {\r\n name: 'General Regulation for Control and Inspection',\r\n nameAR: 'اللائحة العامة للرقابة والتفتيش',\r\n description:\r\n 'The General Regulation of Control and Inspection regulates the control and inspection of licensed activities that fall within the competence of the General Authority for Ports to ensure the provision of works in accordance with the highest standards of quality and efficiency, based on the General Regulations for Licenses issued by the decision of the Board of Directors of the General Authority for Ports No. (5/C1/D1) dated 10/3/1440 AH',\r\n descriptionAr:\r\n 'تنظم اللائحة العامة للرقابة والتفتيش أعمال الرقابة والتفتيش على الأنشطة المرخص لها والي تندرج ضمن اختصاصات الهيئة العامة للموانئ لضمان تقديم الأعمال وفق أعلى معايير الجودة والكفاءة، وذلك بناء على اللائحة العامة للتراخيص الصادرة بقرار مجلس إدارة الهيئة العامة للموانئ رقم (5/ج1/د1) وتاريخ 10/3/1440هـ',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control: 'generalRegulationForControl',\r\n },\r\n {\r\n name: 'General regulations for security, safety, health and the environment',\r\n nameAR: 'اللائحة العامة للأمن والسلامة والصحة والبيئة',\r\n description:\r\n 'The general regulations for security, safety, health, and the environment determine the rules and standards for the use, management and operation of ports and the adoption of safety, safety and environmental standards, with the aim of providing a safe and risk-free work environment, based on the regulation of the General Authority for Ports issued by Cabinet Resolution No. (299) dated 6/11/1439 AH.',\r\n descriptionAr:\r\n 'تحدد اللائحة العامة للأمن والسلامة والصحة والبيئة والقواعد والمعايير الخاصة باستخدام الموانئ وإدارتها وتشغيلها واعتماد معايير الأمان والسلامة والبيئة، بهدف توفير بيئة عمل آمنة وخالية من المخاطر، وذلك بناء على تنظيم الهيئة العامة للموانئ الصادر بقرار مجلس الوزراء رقم (299) وتاريخ 11/6/1439هـ.',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control: 'generalRegulationForSecuritySafetyHealthAndEnvironment',\r\n },\r\n {\r\n name: 'Security Safety Environment Standards',\r\n nameAR: '',\r\n description: '',\r\n descriptionAr: '',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control: 'generalRegulationForSecuritySafetyEnvironmentStandards',\r\n },\r\n {\r\n name: 'Operational regulations of the General Authority for Ports',\r\n nameAR: 'اللائحة التشغيلية للهيئة العامة للموانئ',\r\n description: '',\r\n descriptionAr:\r\n 'كل ما تحتاج معرفته حول اللائحة التشغيلية للهيئة العامة للموانئ',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control:\r\n 'generalRegulationForOperationalregulationsoftheGeneralAuthorityforPorts',\r\n },\r\n {\r\n name: 'Executive Procedures Manual for Security, Safety, Health and Environment Standards',\r\n nameAR: 'دليل الاجراءات التنفيذية لمعايير الأمن والسلامة والصحة والبيئة',\r\n description: '',\r\n descriptionAr:\r\n 'كل ما تحتاج معرفته حول دليل الاجراءات التنفيذية لمعايير الأمن والسلامة والصحة والبيئة',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control:\r\n 'generalRegulationForExecutiveProceduresManualforSecuritySafetyHealthandEnvironmentStandards',\r\n },\r\n {\r\n name: 'Rules and Regulations for Seaports for The Cooperatlon Council for The Arab states of The Gulf',\r\n nameAR:\r\n 'قواعد وتعليمات الموانئ البحريه لدول مجلس التعاون لدول الخليج العربي',\r\n description: '',\r\n descriptionAr:\r\n 'كل ما تحتاج معرفته حول قواعد وتعليمات الموانئ البحريه لدول مجلس التعاون لدول الخليج العربي',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control:\r\n 'rulesandRegulationsforSeaportsforThecooperationCouncilforTheArabstatesofThegulf',\r\n },\r\n {\r\n name: \"Investor's Guide to Licenses\",\r\n nameAR:\"دليل المستثمر للتراخيص\",\r\n description: '',\r\n descriptionAr:\r\n 'كل ما تحتاج معرفته حول دليل المستثمر للتراخيص',\r\n // background: activeBtn.generalRegulationForControl,\r\n // color:activeBtn.generalRegulationForControl,\r\n // border:activeBtn.generalRegulationForControl,\r\n control:\r\n 'investorsGuide',\r\n },\r\n];\r\n","import { AxiosResponse } from 'axios';\r\nimport { StrapiMetaPaginationType } from '../../types';\r\nimport http from '../../http';\r\nimport { RegulationType } from 'components/regulations/regulation.types';\r\nexport const GetRegulation = (\r\n locale: string,\r\n) =>\r\n http\r\n .get(\r\n `/api/regulations?populate=deep&locale=${locale}&sort=DisplayOrder:asc`,\r\n )\r\n .then(\r\n (\r\n response: AxiosResponse<{\r\n data: RegulationType[];\r\n }>,\r\n ) => response.data,\r\n );\r\n","import React from 'react';\r\nimport DefaultNavbar from 'components/Navbar';\r\nimport RegulationsFiles from './RegulationsFile';\r\nimport KeepMeInformed from 'components/home/KeepMeInformed/index';\r\nimport Information from 'components/home/Information';\r\nimport Subscribe from 'components/home/Subscribe';\r\nimport DefaultFooter from 'components/Footer';\r\nimport styles from './Regulations.module.scss';\r\nimport { regulations } from './regulations.constants';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useState, useEffect } from 'react';\r\nimport { styled } from '@mui/system';\r\nimport TabsUnstyled from '@mui/base/TabsUnstyled';\r\nimport TabsListUnstyled from '@mui/base/TabsListUnstyled';\r\nimport { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';\r\nimport TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';\r\nimport { GetRegulation } from './regulation.api';\r\nimport { useQuery } from '@tanstack/react-query';\r\nimport { AiOutlineUnorderedList } from 'react-icons/ai';\r\nimport { BsGrid3X3Gap } from 'react-icons/bs';\r\nimport RegulationsPdfSection from './RegulationPdfSection';\r\nimport { FiDownload } from 'react-icons/fi';\r\n\r\nconst Tab = styled(TabUnstyled)`\r\n cursor: pointer;\r\n padding: 12px 16px 12px 0px;\r\n display: flex;\r\n width: 100%;\r\n border-bottom: 1px solid;\r\n\r\n &:hover {\r\n font-family: 'themixarabicBold', sans-serif;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n @media (max-width: 767px) {\r\n text-align: center;\r\n padding: 9px 20px;\r\n border: solid 1px #bbb;\r\n font-family: 'themixarabicPlain', sans-serif;\r\n border-radius: 45px;\r\n font-size: 16px;\r\n margin-right: 15px;\r\n margin-bottom: 12px;\r\n text-transform: none;\r\n width: auto;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n color: #000;\r\n }\r\n\r\n &.${tabUnstyledClasses.selected} {\r\n color: #48a2b8;\r\n display: flex;\r\n\r\n font-family: 'themixarabicBold', sans-serif;\r\n\r\n @media (max-width: 767px) {\r\n border-color: #2d6a80;\r\n background: #2d6a80;\r\n color: #fff;\r\n }\r\n }\r\n\r\n &.${buttonUnstyledClasses.disabled} {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n`;\r\n\r\nconst TabsList = styled(TabsListUnstyled)`\r\n @media (max-width: 767px) {\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-bottom: 20px;\r\n }\r\n`;\r\n\r\nexport default function Regulations() {\r\n const { t, i18n } = useTranslation();\r\n const [iDNumber, setIDNumber] = useState('');\r\n const [listView, setListView] = React.useState(false);\r\n\r\n React.useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n const { data } = useQuery(\r\n [\r\n 'regulations',\r\n {\r\n locale: i18n.language,\r\n },\r\n ],\r\n () => GetRegulation(i18n.language),\r\n { keepPreviousData: true },\r\n );\r\n\r\n const handleMediaClicked = (item) => {\r\n setIDNumber(item);\r\n console.log('ID', iDNumber);\r\n };\r\n\r\n return (\r\n <>\r\n\r\n
\r\n {/* \r\n
\r\n {t('REGULATIONS')}
\r\n\r\n \r\n
\r\n \r\n \r\n {\r\n handleMediaClicked('');\r\n }}>\r\n {t('All regulations')}\r\n \r\n {data?.data?.map((item) => {\r\n return (\r\n {\r\n handleMediaClicked(item.attributes?.IDNumber);\r\n }}>\r\n {item.attributes?.Title}\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n {data?.data?.map((item) => {\r\n if (item?.attributes?.IDNumber === iDNumber)\r\n return
\r\n {iDNumber === '' && (\r\n {item.attributes?.Title}
;\r\n })}\r\n \r\n\r\n {t(\r\n 'Everything you need to know about the new regulations is listed below',\r\n )}\r\n
\r\n )}\r\n {data?.data?.map((item) => {\r\n if (item?.attributes?.IDNumber === iDNumber)\r\n return (\r\n \r\n {item.attributes?.Description}\r\n
\r\n );\r\n })}\r\n \r\n {data?.data?.map((item) => {\r\n if (item?.attributes?.IDNumber === iDNumber)\r\n if (!listView) {\r\n return (\r\n \r\n \r\n
\r\n );\r\n }\r\n })}\r\n {console.log(data)}\r\n
\r\n | {t('Document Name')} | \r\n{t('Release Date')} | \r\n{t('Type')} | \r\n{t('Download')} | \r\n
|---|---|---|---|
| \r\n {item.attributes?.MediaAssets?.[0]?.Title}\r\n | \r\n{item.attributes?.PublishDate} | \r\n\r\n {' '}\r\n | \r\n
\r\n {iDNumber === '' &&\r\n data?.data?.map((item) => {\r\n return (\r\n
\r\n \r\n {data?.data?.map((item) => {\r\n if (item?.attributes?.IDNumber === iDNumber)\r\n return (\r\n
\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n setListView(true)}\r\n />\r\n setListView(false)}\r\n />\r\n
\r\n \r\n {item.attributes?.PublishDate}\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nconst ImageLightBox = ({\r\n index,\r\n images,\r\n onClose,\r\n setIndex,\r\n}: {\r\n index: number | null;\r\n images: string[];\r\n onClose: () => void;\r\n setIndex: (i: number) => void;\r\n}) => {\r\n const goToNextImage = () => setIndex((index || 0) + 1);\r\n const goToPreviousImage = () => setIndex((index || 1) - 1);\r\n\r\n if (index === null) return null;\r\n\r\n if (!images[index]) {\r\n onClose();\r\n return null;\r\n }\r\n return (\r\n \r\n {articleData &&\r\n articleData.map((item, i) => {\r\n return (\r\n setModalImageIndex(null)}\r\n index={modalImageIndex}\r\n setIndex={(i: number) => setModalImageIndex(Number(i) || null)}\r\n />\r\n )}\r\n
\r\n \r\n
\r\n {item.attributes.Images != null &&\r\n item.attributes.Images.data != null &&\r\n (item.attributes.Images.data.length <= 1 ? (\r\n
\r\n {getBackButtonUrlAndText()}\r\n
\r\n );\r\n })}\r\n {allArticleImages.length > 0 && (\r\n \r\n
\r\n {item.attributes.Title}
\r\n {item.attributes.PublishDate && !isPhotoPage && (\r\n\r\n {t('Published At')}{' '}\r\n {formatDateToDayMonthYearString(\r\n item.attributes.PublishDate,\r\n )}\r\n
\r\n )}\r\n\r\n {item.attributes.Images != null &&\r\n item.attributes.Images.data != null &&\r\n (item.attributes.Images.data.length <= 1 ? (\r\n
\r\n {item.attributes.Images.data.map((img, index) => (\r\n {\r\n setModalImageIndex(\r\n allArticleImages.indexOf(img.attributes.url),\r\n );\r\n }}\r\n />\r\n ))}\r\n
\r\n ))}\r\n \r\n {getBackButtonUrlAndText()}\r\n
\r\n onClose()}\r\n />\r\n
\r\n \r\n );\r\n};\r\n","import Button from '@material-tailwind/react/Button';\r\nimport styles from './History.module.scss';\r\nimport { useEffect, useState } from 'react';\r\nimport { useArticleContext } from 'contexts/ArticleContext';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { BASE_URL } from 'utils/constants';\r\nimport { formatDateToDayMonthYearString } from 'utils/format.string';\r\nexport default function History() {\r\n const { t, i18n } = useTranslation();\r\n const { GetByCategoryPage, catArticles } = useArticleContext();\r\n var localStore = localStorage.getItem('locale');\r\n if (localStore == null || localStore == undefined) {\r\n localStore = 'ar';\r\n }\r\n GetByCategoryPage('Mawani-Newsletter', localStore);\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import { useRef, useEffect, useState } from 'react';\r\nimport styles from './ContactUs.module.scss';\r\nimport facebook from 'assets/img/icons/facebook.svg';\r\nimport linkedin from 'assets/img/icons/linkedin.svg';\r\nimport twitter from 'assets/img/icons/twitter.svg';\r\nimport instagram from 'assets/img/icons/instagram.svg';\r\nimport youtube from 'assets/img/icons/youtube.svg';\r\nimport tiktok from 'assets/img/icons/tiktok.svg';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useForm } from 'react-hook-form';\r\nimport { useExternalContext } from 'contexts/ExternalContext';\r\nimport { Alert } from '@mui/material';\r\nimport { Loader } from 'components/Loader';\r\nimport { MAX_FILE_UPLOAD_SIZE } from 'utils/constants';\r\nimport { usePortContext } from 'contexts/PortContext';\r\n\r\nconst ContactUs = () => {\r\n const formRef = useRef();\r\n const { t, i18n } = useTranslation();\r\n useEffect(() => {\r\n var localStoreVar = localStorage.getItem('locale');\r\n i18n.changeLanguage(localStoreVar);\r\n }, []);\r\n\r\n function handleClick() {\r\n formRef.current.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n\r\n const { getCaptcha, captchaData, apiLoading, submitContactUsForm } =\r\n useExternalContext();\r\n const [success, setSuccess] = useState(null);\r\n const { ports } = usePortContext();\r\n useEffect(() => {\r\n if (!captchaData) {\r\n getCaptcha();\r\n }\r\n }, []);\r\n\r\n const {\r\n register,\r\n handleSubmit,\r\n formState: { errors },\r\n setError,\r\n reset,\r\n } = useForm();\r\n\r\n const onSubmit = async (data) => {\r\n setSuccess(null);\r\n\r\n const file = data.file[0];\r\n if (file.type !== 'application/pdf') {\r\n setError('file', {\r\n type: 'filetype',\r\n });\r\n return;\r\n }\r\n\r\n if (file.size > MAX_FILE_UPLOAD_SIZE) {\r\n setError('file', {\r\n type: 'max',\r\n });\r\n return;\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append('name', data.name);\r\n formData.append('emailAddress', data.email);\r\n formData.append('captcha', data.captcha);\r\n formData.append('phoneNumber', data.phone);\r\n formData.append('mobileNumber', data.mobileNumber);\r\n formData.append('identityNumber', data.identityNumber);\r\n formData.append('relationToPorts', data.relation);\r\n formData.append('port', data.port);\r\n formData.append('purpose', data.purpose);\r\n formData.append('details', data.details);\r\n formData.append('file', file);\r\n\r\n const resp = await submitContactUsForm(formData);\r\n getCaptcha();\r\n\r\n if (resp?.isSuccess === true) {\r\n reset();\r\n setSuccess(true);\r\n formRef.current.scrollIntoView({ behavior: 'smooth' });\r\n return;\r\n }\r\n\r\n if (resp?.error === 'Invalid Captcha') {\r\n setSuccess(null);\r\n setError('captcha', {\r\n type: 'value',\r\n message: resp?.error,\r\n });\r\n } else {\r\n setSuccess(false);\r\n formRef.current.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n {catArticles &&\r\n catArticles.map(\r\n (\r\n {\r\n id,\r\n attributes: {\r\n Title,\r\n Summary,\r\n PublishDate,\r\n Images,\r\n Slug,\r\n Body,\r\n },\r\n },\r\n i,\r\n ) => (\r\n
\r\n \r\n
\r\n {Images != null && Images.data != null && (\r\n
\r\n )}\r\n {Images != null && Images.data != null && (\r\n \r\n )}\r\n {Images != null && Images.data != null && (\r\n \r\n )}\r\n {Images != null && Images.data != null && (\r\n \r\n )}\r\n
\r\n ),\r\n )}\r\n \r\n {PublishDate && (\r\n
\r\n \r\n \r\n {formatDateToDayMonthYearString(PublishDate)}\r\n
\r\n )}\r\n {Title}
\r\n\r\n {Images != null && Images.data != null && (\r\n
\r\n
\r\n \r\n
\r\n {t('Contact Us:')}
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ContactUs;\r\n","import { AxiosResponse } from 'axios';\r\nimport { StrapiMetaPaginationType } from '../../types';\r\nimport http from '../../http';\r\nimport { CircularType } from 'components/Circulars/circular.types';\r\nexport const GetCirculars = (\r\n locale: string,\r\n pageIndex?: number,\r\n pageSize?: number,\r\n releaseYear?: 'all' | number,\r\n) =>\r\n http\r\n .get(\r\n `/api/circulars?populate=*&locale=${locale}&pagination[pageSize]=${\r\n pageSize || 25\r\n }&pagination[page]=${pageIndex}${\r\n releaseYear && releaseYear !== 'all'\r\n ? `&filters[$and][0][ReleaseDate][$gte]=${releaseYear}-01-01&filters[$and][1][ReleaseDate][$lte]=${releaseYear}-12-31`\r\n : '&sort=ReleaseDate:desc'\r\n }`,\r\n )\r\n .then(\r\n (\r\n response: AxiosResponse<{\r\n data: CircularType[];\r\n meta: StrapiMetaPaginationType;\r\n }>,\r\n ) => response.data,\r\n );\r\n","import React, { useEffect } from 'react';\r\n\r\nimport {\r\n useQuery,\r\n} from '@tanstack/react-query';\r\n\r\nimport {\r\n PaginationState,\r\n useReactTable,\r\n getCoreRowModel,\r\n ColumnDef,\r\n flexRender,\r\n} from '@tanstack/react-table';\r\n\r\nimport { GetCirculars } from './Circulars.api';\r\nimport { useTranslation } from 'react-i18next';\r\nimport ReactPaginate from 'react-paginate';\r\nimport styles from './styles.module.scss';\r\nimport { FiDownload } from 'react-icons/fi';\r\nimport { BASE_URL } from 'utils/constants';\r\nimport clsx from 'clsx';\r\nimport { Loader } from 'components/Loader';\r\nimport { CircularType } from 'components/Circulars/circular.types';\r\n\r\ninterface Props {\r\n releaseYear?: 'all' | number\r\n}\r\n\r\nfunction CircularsTable({ releaseYear }: Props) {\r\n const { i18n, t } = useTranslation();\r\n const columns = React.useMemo\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('Saudi Ports Authority')}
\r\n{t('contactDescription')}
\r\n {/*\r\n {t('E-mail')}{' '}\r\n \r\n {t('mawanicare@mawani.gov.sa')}\r\n \r\n
*/}\r\n{t('Phone : 966-11-4050005')}
\r\n{t('Fax: 966-11-4053508')}
\r\n{t('po-box')}
\r\n{t('national-address')}
\r\n\r\n \r\n 
\r\n \r\n \r\n 
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {t('Contact Center')}
\r\n{t('Call us on: 199003')}
\r\n{t('Outside KSA')}
\r\n\r\n {t('E-mail')}{' '}\r\n \r\n {t('mawanicare@mawani.gov.sa')}\r\n \r\n
\r\n\r\n {t('For complaints and suggestions:')}\r\n {t('Fill in the')} {t('form')}{' '}\r\n {t(\r\n 'available on the website and attach supporting documents to the complaint electronically.',\r\n )}\r\n
\r\n\r\n {t('Work hours:')}\r\n {t('Get in touch with our team all weekdays')}\r\n
{' '}\r\n{t('From 7am to 10pm')}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {t('Location Map')}
\r\n\r\n
\r\n {t('Complaints and Feedback')}
\r\n\r\n {t(\r\n 'The General Authority for Ports will study and examine the complaint submitted and respond to the response as soon as possible and within a maximum of 5 working days from the date of receipt.',\r\n )}\r\n
\r\n \r\n\r\n \r\n \r\n {table.getHeaderGroups().map((headerGroup) => (\r\n
\r\n\r\n {data?.meta?.pagination?.pageCount &&\r\n data?.meta?.pagination?.pageCount > 0 ? (\r\n
\r\n );\r\n}\r\nexport default CircularsTable;\r\n","import styles from './Circulars.module.scss';\r\nimport React, { useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport CircularsTable from 'components/Circulars/Table';\r\n\r\nconst Circulars: React.FC = () => {\r\n const { t, i18n } = useTranslation();\r\n\r\n const firstCircularYear = 2019;\r\n const circularReleaseYears: Array| \r\n {header.isPlaceholder ? null : (\r\n \r\n {flexRender(\r\n header.column.columnDef.header,\r\n header.getContext(),\r\n )}\r\n \r\n )}\r\n | \r\n );\r\n })}\r\n \r\n ))}\r\n
|---|
| {t(\"No Circulars Found\")} |
| \r\n {flexRender(\r\n cell.column.columnDef.cell,\r\n cell.getContext(),\r\n )}\r\n | \r\n );\r\n })}\r\n
\r\n
\r\n ) : <>}\r\n \r\n {\r\n table.setPageIndex(selected);\r\n }}\r\n containerClassName={styles.pagination}\r\n initialPage={table.getState().pagination.pageIndex}\r\n forcePage={table.getState().pagination.pageIndex}\r\n />\r\n
\r\n \r\n \r\n {t('Page Size Info', {\r\n current: table.getState().pagination.pageIndex + 1,\r\n total: data?.meta?.pagination?.pageCount,\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\nexport default Circulars;\r\n","import { styled } from '@mui/system';\r\nimport TabsUnstyled from '@mui/base/TabsUnstyled';\r\nimport TabsListUnstyled from '@mui/base/TabsListUnstyled';\r\nimport TabPanelUnstyled from '@mui/base/TabPanelUnstyled';\r\nimport { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';\r\nimport TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';\r\nimport styles from './PortEmployees.module.scss';\r\n\r\nimport { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport http from '../../http';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst Tab = styled(TabUnstyled)`\r\n cursor: pointer;\r\n padding: 12px 16px 12px 0px;\r\n display: flex;\r\n width: 100%;\r\n border-bottom: 1px solid;\r\n\r\n &:hover {\r\n font-family: 'themixarabicBold', sans-serif;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n @media (max-width: 767px) {\r\n text-align: center;\r\n padding: 9px 20px;\r\n border: solid 1px #bbb;\r\n font-family: 'themixarabicPlain', sans-serif;\r\n border-radius: 45px;\r\n font-size: 16px;\r\n margin-right: 15px;\r\n margin-bottom: 12px;\r\n text-transform: none;\r\n width: auto;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n color: #000;\r\n }\r\n\r\n &.${tabUnstyledClasses.selected} {\r\n color: #48a2b8;\r\n display: flex;\r\n\r\n font-family: 'themixarabicBold', sans-serif;\r\n\r\n @media (max-width: 767px) {\r\n border-color: #2d6a80;\r\n background: #2d6a80;\r\n color: #fff;\r\n }\r\n }\r\n\r\n &.${buttonUnstyledClasses.disabled} {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n`;\r\n\r\nconst TabPanel = styled(TabPanelUnstyled)``;\r\n\r\nconst TabsList = styled(TabsListUnstyled)`\r\n @media (max-width: 767px) {\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-bottom: 20px;\r\n }\r\n`;\r\n\r\nexport default function MediaCenterComp() {\r\n const [selectQuery, setSelectQuery] = useState(0);\r\n const [activeTab, setActiveTab] = useState(0);\r\n const { t, i18n } = useTranslation();\r\n let history = useHistory();\r\n const [{ loading, error, data }, setPortsEmployees] = useState({\r\n loading: false,\r\n error: null,\r\n data: [],\r\n });\r\n\r\n useEffect(() => {\r\n const getAllPorts = async () => {\r\n try {\r\n setPortsEmployees((cur) => ({ ...cur, loading: true }));\r\n const req = await http\r\n .get('/api/port-employees?populate=*&locale=' + i18n.language)\r\n .catch((err) => new Error(err));\r\n setPortsEmployees((cur) => ({ ...cur, data: req?.data?.data }));\r\n } catch (error) {\r\n setPortsEmployees((cur) => ({ ...cur, error: error }));\r\n } finally {\r\n setPortsEmployees((cur) => ({ ...cur, loading: false }));\r\n }\r\n };\r\n getAllPorts();\r\n }, [i18n.language]);\r\n\r\n useEffect(() => {\r\n const tabTarget = history.location.hash.split('#')[1];\r\n if (!Number(tabTarget)) return;\r\n const idMatch = data.find((item) => item.id === Number(tabTarget));\r\n const matchIndex = data.indexOf(idMatch);\r\n setActiveTab(matchIndex);\r\n history.push({ hash: '' });\r\n }, [history.location.hash]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n {t('Release Date')}:{' '}\r\n \r\n setFilters({ year: Number(e.currentTarget.value) || 'all' })\r\n }>\r\n \r\n {circularReleaseYears.map((year) => (\r\n \r\n ))}\r\n \r\n
\r\n {t('Circulars')}
\r\n\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n","import styles from './Error.module.scss';\r\n\r\nimport { useTranslation } from 'react-i18next';\r\n\r\nexport default function Error() {\r\n const { t } = useTranslation();\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n {t('PORTS EMPLOYEES')}
\r\n {data && data.length > 0 && (\r\n\r\n {\r\n if (\r\n Number(e.target.dataset.index) ||\r\n Number(e.target.dataset.index) === 0\r\n )\r\n setActiveTab(Number(e.target.dataset.index));\r\n }}\r\n className={`${styles.mediaContain}`}>\r\n
\r\n )}{' '}\r\n \r\n \r\n {data?.map((tab, index) => (\r\n \r\n {tab?.attributes?.title}\r\n \r\n ))}\r\n p\r\n \r\n
\r\n \r\n {data.map((tab, index) => (\r\n \r\n \r\n ))}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import { EffectCallback, useEffect } from 'react';\r\n\r\nfunction useEffectOnce(effect: EffectCallback) {\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n useEffect(effect, []);\r\n}\r\n\r\nexport default useEffectOnce;\r\n","import { styled } from '@mui/system';\r\nimport TabsUnstyled from '@mui/base/TabsUnstyled';\r\nimport TabsListUnstyled from '@mui/base/TabsListUnstyled';\r\nimport TabPanelUnstyled from '@mui/base/TabPanelUnstyled';\r\nimport { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';\r\nimport TabUnstyled, { tabUnstyledClasses } from '@mui/base/TabUnstyled';\r\nimport styles from './MediaCenter.module.scss';\r\nimport { components } from './mediacenter.constants';\r\nimport { Fragment } from 'react';\r\nimport { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport Video from './MediaCenter';\r\nimport News from './News';\r\nimport Pictures from './PressRelease';\r\nimport PortsBulletin from './Newsletters/Newsletters';\r\nimport DigitalLibrary from './Library';\r\nimport useEffectOnce from 'hooks/useEffectOnce';\r\nimport { useLocation } from 'react-router-dom';\r\nconst Tab = styled(TabUnstyled)`\r\n cursor: pointer;\r\n padding: 12px 16px 12px 0px;\r\n display: flex;\r\n width: 100%;\r\n border-bottom: 1px solid;\r\n\r\n &:hover {\r\n font-family: 'themixarabicBold', sans-serif;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n @media (max-width: 767px) {\r\n text-align: center;\r\n padding: 9px 20px;\r\n border: solid 1px #bbb;\r\n font-family: 'themixarabicPlain', sans-serif;\r\n border-radius: 45px;\r\n font-size: 16px;\r\n margin-right: 15px;\r\n margin-bottom: 12px;\r\n text-transform: none;\r\n width: auto;\r\n letter-spacing: 0;\r\n box-shadow: none;\r\n color: #000;\r\n }\r\n\r\n &.${tabUnstyledClasses.selected} {\r\n color: #48a2b8;\r\n display: flex;\r\n\r\n font-family: 'themixarabicBold', sans-serif;\r\n\r\n @media (max-width: 767px) {\r\n border-color: #2d6a80;\r\n background: #2d6a80;\r\n color: #fff;\r\n }\r\n }\r\n\r\n &.${buttonUnstyledClasses.disabled} {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n }\r\n`;\r\n\r\nconst TabPanel = styled(TabPanelUnstyled)``;\r\n\r\nconst TabsList = styled(TabsListUnstyled)`\r\n @media (max-width: 767px) {\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-bottom: 20px;\r\n }\r\n`;\r\n\r\nexport default function MediaCenterComp() {\r\n const [selectQuery, setSelectQuery] = useState(0);\r\n const { t, i18n } = useTranslation();\r\n const location = useLocation();\r\n\r\n const tabs = [\r\n { label: t('News'), component: \r\n
\r\n {t('Not Found Page Title')}
\r\n\r\n {t('Not Found Page Description')} {t(\"Not Found Back to Home\")}\r\n
\r\n\r\n
\r\n \r\n );\r\n}\r\n","import { createContext, useContext, useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-i18next';\r\nimport http from '../http';\r\nconst PolicyContext = createContext();\r\n\r\nexport const usePolicyContext = () => {\r\n return useContext(PolicyContext);\r\n};\r\n\r\nexport const PolicyProvider = ({ children }) => {\r\n const [policy, setPolicy] = useState('');\r\n const [conditions, setConditions] = useState('');\r\n const { i18n } = useTranslation();\r\n\r\n const locale = i18n.language || 'en';\r\n useEffect(() => {\r\n http\r\n .get('/api/privacy-policy?populate=*&locale=' + locale)\r\n .then((response) => {\r\n setPolicy(response.data.data);\r\n });\r\n\r\n http.get('/api/condition?populate=*&locale=' + locale).then((response) => {\r\n setConditions(response.data.data);\r\n });\r\n }, [locale]);\r\n\r\n const value = {\r\n policy,\r\n conditions,\r\n };\r\n\r\n return (\r\n \r\n
\r\n {t('Media Center')}
\r\n\r\n\r\n \r\n setSelectQuery(\r\n Number(e?.currentTarget?.dataset?.index || 0) || 0,\r\n )\r\n }>\r\n
\r\n \r\n \r\n {tabs.map((tab, index) => (\r\n \r\n {tab.label}\r\n \r\n ))}\r\n \r\n
\r\n \r\n \r\n {t(\r\n JSON.stringify(\r\n 'Find out about the latest developments in the port sector',\r\n ).replace(/\\\"/g, ''),\r\n )}\r\n \r\n
\r\n \r\n {tabs.map((tab, index) => (\r\n \r\n {tab.component}\r\n \r\n ))}\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default function Policy() {\r\n return (\r\n <>\r\n \r\n {t('Privacy Policy')}\r\n
\r\n\r\n
\r\n )\r\n}\r\n\r\nexport default function Condition() {\r\n return (\r\n <>\r\n {t(\"Terms and Conditions title\")}
\r\n\r\n {/*
*/}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Customer;\r\n","import { useEffect, useState } from 'react';\r\nimport styles from './Announcement.module.scss';\r\nimport { useTranslation } from 'react-i18next';\r\nimport http from '../../http';\r\nimport { useExternalContext } from 'contexts/ExternalContext';\r\n\r\nconst AnnouncementComp = () => {\r\n const { announcements, getAnnouncements } = useExternalContext();\r\n const [announcement, setAnnouncement] = useState([]);\r\n const { t, i18n } = useTranslation();\r\n\r\n useEffect(() => {\r\n http\r\n .get('/api/home-page-announcements?locale=ar')\r\n .then((response) => {\r\n setAnnouncement(response.data.data);\r\n });\r\n }, []);\r\n useEffect(() => {\r\n getAnnouncements()\r\n }, []);\r\n function OneAnnouncement() {\r\n for (let i = 0; i <= announcement?.length; i++) {\r\n for (let j = 0; j <= announcements?.length; j++) {\r\n if (announcement?.[i]?.attributes?.AnnouncementId && announcements?.[j]?.id) {\r\n if (announcement?.[i]?.attributes?.AnnouncementId === announcements?.[j]?.id) {\r\n return (\r\n \r\n 
\r\n
*/}\r\n \r\n
\r\n {/* \r\n \r\n
\r\n \r\n \r\n {t('Welcome To Mawani Customer Portal')}\r\n
\r\n{t('Please log in if you are an existing customer')}
\r\n \r\n{t('How to use Customer Portal')}
\r\n \r\n \r\n
\r\n {t('Are you new in Mawani?')}
\r\n \r\n{t('Registration Guide')}
\r\n \r\n
*/}\r\n {/* \r\n
\r\n \r\n \r\n
\r\n \r\n {t('Welcome To Mawani Customer Portal')}\r\n
\r\n{t('Please log in if you are an existing customer')}
\r\n \r\n{t('How to use Customer Portal')}
\r\n \r\n \r\n
\r\n {t('Are you new in Mawani?')}
\r\n{t(\"To get more information about\")}
\r\n \r\n{t('Registration Guide')}
\r\n \r\n
\r\n \r\n
\r\n \r\n {t('Customer Portal')}\r\n
\r\n\r\n
\r\n \r\n
\r\n {t('Already have an account')}
\r\n \r\n\r\n
\r\n {t('New User')}
\r\n \r\n\r\n 
\r\n
\r\n \r\n
\r\n {t('The Customer Portal,')}
\r\n\r\n
\r\n \r\n
\r\n {t('My Profile')}
\r\n{t('Profile Description')}
\r\n\r\n
\r\n \r\n
\r\n {t('Licenses')}
\r\n{t('Licenses Description')}
\r\n\r\n
\r\n \r\n
\r\n {t('Violations')}
\r\n{t('Violations Description')}
\r\n\r\n
\r\n \r\n
\r\n {t('Visits')}
\r\n{t('Visits Description')}
\r\n\r\n \r\n \r\n {t('Objections User Guide')}\r\n \r\n \r\n {t('Licenses User Guide')}\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n }\r\n }\r\n }\r\n return ()\r\n }\r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n \r\n {t('Announcements')}\r\n
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AnnouncementComp;\r\n","import { useEffect } from \"react\";\r\nimport { useTranslation } from \"react-i18next\";\r\nimport { useLocation } from \"react-router-dom\";\r\nimport { getURLQuery } from \"utils/urlHelper\";\r\n\r\nexport const useLanguage = () =>{\r\n const {i18n} = useTranslation();\r\n const location = useLocation();\r\n useEffect(() => {\r\n //check the query param\r\n \r\n const langParam = getURLQuery(location.search,\"language\");\r\n if(langParam !== \"\" &&langParam !== undefined && langParam !== null){\r\n localStorage.setItem('locale', langParam);\r\n document.body.dir = langParam === 'ar' ? 'rtl' :'ltr';\r\n i18n.changeLanguage(langParam);\r\n }\r\n\r\n if (localStorage?.getItem('locale') === undefined || localStorage?.getItem('locale') === null ) {\r\n localStorage.setItem('locale', 'ar');\r\n document.body.dir = 'rtl';\r\n i18n.changeLanguage('ar');\r\n }\r\n\r\n if(localStorage?.getItem('locale') === 'en'){\r\n document.body.dir = 'ltr';\r\n i18n.changeLanguage('en');\r\n }else{\r\n document.body.dir = 'rtl';\r\n i18n.changeLanguage('ar');\r\n }\r\n }, []); //default language\r\n}","\r\nexport const getURLQuery = (search:string,query:string)=>{\r\n return new URLSearchParams(search).get(query);\r\n}","import { Switch, Route, Redirect, useLocation } from 'react-router-dom';\r\nimport Landing from 'pages/Landing/index.js';\r\n// import Profile from 'pages/Profile';\r\n// import Login from 'pages/Login';\r\n// import Register from 'pages/Register';\r\n\r\n// Font Awesome Style Sheet\r\nimport '@fortawesome/fontawesome-free/css/all.min.css';\r\n// Tailwind CSS Style Sheet\r\nimport 'assets/styles/tailwind.css';\r\nimport 'assets/styles/index.css';\r\nimport Home from 'pages/Home';\r\nimport AboutUs from 'pages/AboutUs';\r\nimport Ports from 'pages/Ports';\r\nimport DoingBusiness from 'pages/DoingBusiness';\r\nimport SafetySecurity from 'pages/SafetySecurity';\r\nimport EServices from 'pages/EServices';\r\nimport Regulations from 'pages/Regulations';\r\nimport Article from 'pages/Article';\r\nimport History from 'pages/History';\r\nimport ContactUs from 'pages/ContactUs';\r\nimport Circulars from 'pages/Circulars';\r\nimport Jobs from 'pages/Jobs';\r\nimport PortEmployees from 'pages/PortEmployees';\r\nimport NotFound from 'pages/NotFound';\r\nimport Tools from 'pages/Tools';\r\nimport DiscoverSeaServics from 'pages/DiscoverSeaService';\r\nimport MediaCenter from 'pages/MediaCenter';\r\n// import ServicesAndCapabilities from 'pages/ServicesAndCapabilities';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { useEffect } from 'react';\r\nimport Policy from 'pages/Policy';\r\nimport Conditions from 'pages/Conditions';\r\nimport Customer from 'pages/Customer';\r\nimport Announcement from 'pages/Announcement';\r\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\r\nimport { getURLQuery } from 'utils/urlHelper';\r\nimport { useLanguage } from 'hooks/useLanguage';\r\nimport ReactGA from 'react-ga4';\r\nimport { GA_TAG } from 'utils/constants';\r\nconst queryClient = new QueryClient();\r\nconst routes = [\r\n {\r\n path: '/',\r\n name: {\r\n en: '',\r\n ar: '',\r\n },\r\n component: Home,\r\n },\r\n {\r\n path: '/home',\r\n name: {\r\n en: '',\r\n ar: '',\r\n },\r\n component: Home,\r\n },\r\n {\r\n path: '/about-us',\r\n name: {\r\n en: 'About Us',\r\n ar: 'معلومات عنا',\r\n },\r\n component: AboutUs,\r\n },\r\n {\r\n path: '/ports',\r\n name: {\r\n en: 'Ports',\r\n ar: 'الموانئ',\r\n },\r\n component: Ports,\r\n },\r\n // {\r\n // path: '/sea-services',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: DiscoverSeaServics,\r\n // },\r\n {\r\n path: '/media-center',\r\n name: {\r\n en: 'Media Center',\r\n ar: 'المركز الاعلامي',\r\n },\r\n component: MediaCenter,\r\n },\r\n {\r\n path: '/article',\r\n name: {\r\n en: 'Article',\r\n ar: 'مقال',\r\n },\r\n component: Article,\r\n },\r\n {\r\n path: '/history',\r\n name: {\r\n en: 'History',\r\n ar: 'تاريخ',\r\n },\r\n component: History,\r\n },\r\n // {\r\n // path: '/doing-business',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: DoingBusiness,\r\n // },\r\n // {\r\n // path: '/safety-security',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: SafetySecurity,\r\n // },\r\n {\r\n path: '/e-services',\r\n name: {\r\n en: 'E-Services',\r\n ar: 'خدمات موانئ',\r\n },\r\n component: EServices,\r\n },\r\n {\r\n path: '/regulations',\r\n name: {\r\n en: 'Regulations',\r\n ar: 'اللوائح',\r\n },\r\n component: Regulations,\r\n },\r\n // {\r\n // path: '/services-and-capabilities',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: ServicesAndCapabilities,\r\n // },\r\n {\r\n path: '/vacancies',\r\n name: {\r\n en: 'Jobs',\r\n ar: 'وظائف',\r\n },\r\n component: Jobs,\r\n },\r\n {\r\n path: '/port-employees',\r\n name: {\r\n en: 'Ports Employees',\r\n ar: 'منسوبي الهيئة',\r\n },\r\n component: PortEmployees,\r\n },\r\n {\r\n path: '/contact',\r\n name: {\r\n en: 'Contact Us',\r\n ar: 'اتصل بنا',\r\n },\r\n component: ContactUs,\r\n },\r\n // {\r\n // path: '/tools',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: Tools,\r\n // },\r\n // {\r\n // path: '/profile',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: Profile,\r\n // },\r\n // {\r\n // path: '/login',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: Login,\r\n // },\r\n // {\r\n // path: '/register',\r\n // name: {\r\n // en: '',\r\n // ar: '',\r\n // },\r\n // component: Register,\r\n // },\r\n {\r\n path: '/circulars',\r\n name: {\r\n en: 'Circulars',\r\n ar: 'تعاميم',\r\n },\r\n component: Circulars,\r\n },\r\n {\r\n path: '/privacy-policy',\r\n name: {\r\n en: 'Policy',\r\n ar: 'سياسة الخصوصية',\r\n },\r\n component: Policy,\r\n },\r\n {\r\n path: '/404',\r\n name: {\r\n en: 'Error...',\r\n ar: 'خطأ',\r\n },\r\n component: NotFound,\r\n },\r\n {\r\n path: '/conditions',\r\n name: {\r\n en: 'Conditions',\r\n ar: 'شروط وأحكام استخدام موقع الإنترنت',\r\n },\r\n component: Conditions,\r\n },\r\n {\r\n path: '/customerportal',\r\n name: {},\r\n component: Customer,\r\n }\r\n ,\r\n {\r\n path: '/announcement',\r\n name: {},\r\n component: Announcement,\r\n }\r\n];\r\n\r\nfunction App() {\r\n const { i18n } = useTranslation();\r\n const location = useLocation();\r\n\r\n ReactGA.initialize(GA_TAG);\r\n\r\n useEffect(() => {\r\n const siteName =\r\n i18n.language === 'en'\r\n ? 'Saudi Ports Authority'\r\n : 'الهيئة العامة للموانئ';\r\n\r\n const pageName = routes.find((i) => i.path === location.pathname)?.name[\r\n i18n.language\r\n ];\r\n document.title = `${siteName}${pageName ? ` - ${pageName}` : ''}`;\r\n }, [i18n.language, location.pathname]);\r\n\r\n useEffect(() => {\r\n window.scrollTo(0, 0);\r\n }, [location]);\r\n\r\n useLanguage();\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n {t('PopUpTitle')}
\r\n\r\n {/* temp */}\r\n {/* \r\n {t('PopUpTitleTwo')}\r\n
*/}\r\n {/* \r\n {t('PopUpAnnouncement')}\r\n
\r\n \r\n {t('PopUpBless')}\r\n
\r\n \r\n
*/}\r\n {/* temp */}\r\n\r\n \r\n \r\n
\r\n
\r\n General information.2
\r\n| VESSEL NAME | \r\nFLOATING DOCK 19000 DWT | \r\n
|---|---|
| TYPE OF VESSEL | \r\nFLOATING DOCK | \r\n
| CLASS | \r\n- | \r\n
| Length over pontoon | \r\n215.00 m | \r\n
| Length over all | \r\n200.00 | \r\n
| Free inside width between dock runways | \r\n33.50 m | \r\n
| DEPTH (MLD) | \r\n15.90 m | \r\n
| DEPTH OF PONTOON (MLD) | \r\n4.10 m | \r\n
| Draft without load | \r\n3.70 m | \r\n
| MAXIMUM IMMERSION DRAUGHT | \r\n13.4m | \r\n
| LIGHTSHIP | \r\n7149.84 Tonnes | \r\n
| LCG | \r\n100.4m-AP | \r\n
| VCG | \r\n6.85m | \r\n