\r\n \r\n {showThumbsUp ? (\r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n {paymentData?.length === 0 ? (\r\n
\r\n No invoices available
\r\n ) : (\r\n\r\n \r\n \r\n \r\n \r\n Invoice NO\r\n \r\n \r\n INVOICE DATE\r\n \r\n \r\n DUE DATE\r\n \r\n \r\n STATIONS\r\n \r\n \r\n SERVICE FEE\r\n \r\n \r\n TOTAL AMOUNT\r\n \r\n STatus \r\n \r\n \r\n \r\n {paymentData?.slice(0, 2)?.map((invoice) => (\r\n \r\n \r\n {invoice.InvoiceNO}\r\n \r\n \r\n {moment(invoice.DateAdded).format(\"DD/MM/YYYY\")}\r\n \r\n \r\n {moment(invoice.DueDate).format(\"DD/MM/YYYY\")}\r\n \r\n \r\n {invoice.TotalLocation}\r\n \r\n \r\n {accountingFormat(invoice.ServiceFee)}\r\n \r\n \r\n {accountingFormat(invoice.InvoiceAmount)}\r\n \r\n \r\n {getStatusBar(invoice.StatusID)}\r\n \r\n \r\n ))}\r\n \r\n \r\n
\r\n )}\r\n \r\n
\r\n {\" \"}\r\n Your account is up to date\r\n
\r\n \r\n\r\n {\r\n !pay ? setPay(\"stk\") : setPay(null);\r\n }}\r\n >\r\n {pay ? \"Cancel\" : \"INITIATE PAYMENT\"}\r\n \r\n )}\r\n {pay !== \"code\" && (\r\n {\r\n !pay ? setPay(\"code\") : setPay(null);\r\n }}\r\n >\r\n {pay ? \"Cancel\" : \"USE MPESA CODE\"}\r\n \r\n )}\r\n
\r\n )}\r\n {pay && Balance && (\r\n {paymentData.month}
\r\n\r\n Payment Balance:{\" \"}\r\n
\r\n {accountingFormat(Balance)}\r\n
\r\n \r\n {pay !== \"stk\" && (\r\n\r\n CALL ADMIN +254702628741\r\n
\r\n \r\n \r\n setValues({ ...values, PhoneNumber: e.target.value })\r\n }\r\n />\r\n ) : (\r\n \r\n setResult({ ...result, TransID: e.target.value })\r\n }\r\n />\r\n )}\r\n
\r\n )}\r\n \r\n \r\n );\r\n}\r\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"loader\":\"Spinner_loader__GhzUR\",\"spin\":\"Spinner_spin__3XG0h\",\"container\":\"Spinner_container__216oW\"};","import React from 'react'\r\nimport styles from './Spinner.module.css'\r\n\r\nconst Spinner = () => {\r\n return (\r\n \r\n {pay === \"stk\"\r\n ? \"Enter the phone number that is paying\"\r\n : \"Enter the Mpesa Transaction Code\"}\r\n
\r\n {pay === \"stk\" ? (\r\n\r\n {result?.ResultDesc ||\r\n result?.ResponseDescription ||\r\n values?.errorMessage}{\" \"}\r\n !!!\r\n
\r\n {loading ? (\r\n \r\n
\r\n ) : (\r\n \r\n {pay === \"stk\" && (\r\n \r\n )}\r\n {loading ? (\r\n ConfirmPayment()}\r\n >\r\n COMPLETE\r\n \r\n )}\r\n
\r\n )}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default Spinner\r\n","export const countryCodes = [\r\n { code: \"AF\", dialCode: \"+93\" },\r\n { code: \"AL\", dialCode: \"+355\" },\r\n { code: \"DZ\", dialCode: \"+213\" },\r\n { code: \"AS\", dialCode: \"+1-684\" },\r\n { code: \"AD\", dialCode: \"+376\" },\r\n { code: \"AO\", dialCode: \"+244\" },\r\n { code: \"AI\", dialCode: \"+1-264\" },\r\n { code: \"AQ\", dialCode: \"+672\" },\r\n { code: \"AG\", dialCode: \"+1-268\" },\r\n { code: \"AR\", dialCode: \"+54\" },\r\n { code: \"AM\", dialCode: \"+374\" },\r\n { code: \"AW\", dialCode: \"+297\" },\r\n { code: \"AU\", dialCode: \"+61\" },\r\n { code: \"AT\", dialCode: \"+43\" },\r\n { code: \"AZ\", dialCode: \"+994\" },\r\n { code: \"BS\", dialCode: \"+1-242\" },\r\n { code: \"BH\", dialCode: \"+973\" },\r\n { code: \"BD\", dialCode: \"+880\" },\r\n { code: \"BB\", dialCode: \"+1-246\" },\r\n { code: \"BY\", dialCode: \"+375\" },\r\n { code: \"BE\", dialCode: \"+32\" },\r\n { code: \"BZ\", dialCode: \"+501\" },\r\n { code: \"BJ\", dialCode: \"+229\" },\r\n { code: \"BM\", dialCode: \"+1-441\" },\r\n { code: \"BT\", dialCode: \"+975\" },\r\n { code: \"BO\", dialCode: \"+591\" },\r\n { code: \"BA\", dialCode: \"+387\" },\r\n { code: \"BW\", dialCode: \"+267\" },\r\n { code: \"BR\", dialCode: \"+55\" },\r\n { code: \"IO\", dialCode: \"+246\" },\r\n { code: \"VG\", dialCode: \"+1-284\" },\r\n { code: \"BN\", dialCode: \"+673\" },\r\n { code: \"BG\", dialCode: \"+359\" },\r\n { code: \"BF\", dialCode: \"+226\" },\r\n { code: \"BI\", dialCode: \"+257\" },\r\n { code: \"KH\", dialCode: \"+855\" },\r\n { code: \"CM\", dialCode: \"+237\" },\r\n { code: \"CA\", dialCode: \"+1\" },\r\n { code: \"CV\", dialCode: \"+238\" },\r\n { code: \"KY\", dialCode: \"+1-345\" },\r\n { code: \"CF\", dialCode: \"+236\" },\r\n { code: \"TD\", dialCode: \"+235\" },\r\n { code: \"CL\", dialCode: \"+56\" },\r\n { code: \"CN\", dialCode: \"+86\" },\r\n { code: \"CX\", dialCode: \"+61\" },\r\n { code: \"CC\", dialCode: \"+61\" },\r\n { code: \"CO\", dialCode: \"+57\" },\r\n { code: \"KM\", dialCode: \"+269\" },\r\n { code: \"CD\", dialCode: \"+243\" },\r\n { code: \"CG\", dialCode: \"+242\" },\r\n { code: \"CK\", dialCode: \"+682\" },\r\n { code: \"CR\", dialCode: \"+506\" },\r\n { code: \"CI\", dialCode: \"+225\" },\r\n { code: \"HR\", dialCode: \"+385\" },\r\n { code: \"CU\", dialCode: \"+53\" },\r\n { code: \"CW\", dialCode: \"+599\" },\r\n { code: \"CY\", dialCode: \"+357\" },\r\n { code: \"CZ\", dialCode: \"+420\" },\r\n { code: \"DK\", dialCode: \"+45\" },\r\n { code: \"DJ\", dialCode: \"+253\" },\r\n { code: \"DM\", dialCode: \"+1-767\" },\r\n { code: \"DO\", dialCode: \"+1-809\" },\r\n { code: \"EC\", dialCode: \"+593\" },\r\n { code: \"EG\", dialCode: \"+20\" },\r\n { code: \"SV\", dialCode: \"+503\" },\r\n { code: \"GQ\", dialCode: \"+240\" },\r\n { code: \"ER\", dialCode: \"+291\" },\r\n { code: \"EE\", dialCode: \"+372\" },\r\n { code: \"ET\", dialCode: \"+251\" },\r\n { code: \"FK\", dialCode: \"+500\" },\r\n { code: \"FO\", dialCode: \"+298\" },\r\n { code: \"FJ\", dialCode: \"+679\" },\r\n { code: \"FI\", dialCode: \"+358\" },\r\n { code: \"FR\", dialCode: \"+33\" },\r\n { code: \"GF\", dialCode: \"+594\" },\r\n { code: \"PF\", dialCode: \"+689\" },\r\n { code: \"GA\", dialCode: \"+241\" },\r\n { code: \"GM\", dialCode: \"+220\" },\r\n { code: \"GE\", dialCode: \"+995\" },\r\n { code: \"DE\", dialCode: \"+49\" },\r\n { code: \"GH\", dialCode: \"+233\" },\r\n { code: \"GI\", dialCode: \"+350\" },\r\n { code: \"GR\", dialCode: \"+30\" },\r\n { code: \"GL\", dialCode: \"+299\" },\r\n { code: \"GD\", dialCode: \"+1-473\" },\r\n { code: \"GP\", dialCode: \"+590\" },\r\n { code: \"GU\", dialCode: \"+1-671\" },\r\n { code: \"GT\", dialCode: \"+502\" },\r\n { code: \"GG\", dialCode: \"+44-1481\" },\r\n { code: \"GN\", dialCode: \"+224\" },\r\n { code: \"GW\", dialCode: \"+245\" },\r\n { code: \"GY\", dialCode: \"+592\" },\r\n { code: \"HT\", dialCode: \"+509\" },\r\n { code: \"HN\", dialCode: \"+504\" },\r\n { code: \"HK\", dialCode: \"+852\" },\r\n { code: \"HU\", dialCode: \"+36\" },\r\n { code: \"IS\", dialCode: \"+354\" },\r\n { code: \"IN\", dialCode: \"+91\" },\r\n { code: \"ID\", dialCode: \"+62\" },\r\n { code: \"IR\", dialCode: \"+98\" },\r\n { code: \"IQ\", dialCode: \"+964\" },\r\n { code: \"IE\", dialCode: \"+353\" },\r\n { code: \"IM\", dialCode: \"+44-1624\" },\r\n { code: \"IL\", dialCode: \"+972\" },\r\n { code: \"IT\", dialCode: \"+39\" },\r\n { code: \"JM\", dialCode: \"+1-876\" },\r\n { code: \"JP\", dialCode: \"+81\" },\r\n { code: \"JE\", dialCode: \"+44-1534\" },\r\n { code: \"JO\", dialCode: \"+962\" },\r\n { code: \"KZ\", dialCode: \"+7\" },\r\n { code: \"KE\", dialCode: \"+254\" },\r\n { code: \"KI\", dialCode: \"+686\" },\r\n { code: \"KW\", dialCode: \"+965\" },\r\n { code: \"KG\", dialCode: \"+996\" },\r\n { code: \"LA\", dialCode: \"+856\" },\r\n { code: \"LV\", dialCode: \"+371\" },\r\n { code: \"LB\", dialCode: \"+961\" },\r\n { code: \"LS\", dialCode: \"+266\" },\r\n { code: \"LR\", dialCode: \"+231\" },\r\n { code: \"LY\", dialCode: \"+218\" },\r\n { code: \"LI\", dialCode: \"+423\" },\r\n { code: \"LT\", dialCode: \"+370\" },\r\n { code: \"LU\", dialCode: \"+352\" },\r\n { code: \"MO\", dialCode: \"+853\" },\r\n { code: \"MK\", dialCode: \"+389\" },\r\n { code: \"MG\", dialCode: \"+261\" },\r\n { code: \"MW\", dialCode: \"+265\" },\r\n { code: \"MY\", dialCode: \"+60\" },\r\n { code: \"MV\", dialCode: \"+960\" },\r\n { code: \"ML\", dialCode: \"+223\" },\r\n { code: \"MT\", dialCode: \"+356\" },\r\n { code: \"MH\", dialCode: \"+692\" },\r\n { code: \"MQ\", dialCode: \"+596\" },\r\n { code: \"MR\", dialCode: \"+222\" },\r\n { code: \"MU\", dialCode: \"+230\" },\r\n { code: \"YT\", dialCode: \"+262\" },\r\n { code: \"MX\", dialCode: \"+52\" },\r\n { code: \"FM\", dialCode: \"+691\" },\r\n { code: \"MD\", dialCode: \"+373\" },\r\n { code: \"MC\", dialCode: \"+377\" },\r\n { code: \"MN\", dialCode: \"+976\" },\r\n { code: \"ME\", dialCode: \"+382\" },\r\n { code: \"MS\", dialCode: \"+1-664\" },\r\n { code: \"MA\", dialCode: \"+212\" },\r\n { code: \"MZ\", dialCode: \"+258\" },\r\n { code: \"MM\", dialCode: \"+95\" },\r\n { code: \"NA\", dialCode: \"+264\" },\r\n { code: \"NR\", dialCode: \"+674\" },\r\n { code: \"NP\", dialCode: \"+977\" },\r\n { code: \"NL\", dialCode: \"+31\" },\r\n { code: \"NC\", dialCode: \"+687\" },\r\n { code: \"NZ\", dialCode: \"+64\" },\r\n { code: \"NI\", dialCode: \"+505\" },\r\n { code: \"NE\", dialCode: \"+227\" },\r\n { code: \"NG\", dialCode: \"+234\" },\r\n { code: \"NU\", dialCode: \"+683\" },\r\n { code: \"NF\", dialCode: \"+672\" },\r\n { code: \"KP\", dialCode: \"+850\" },\r\n { code: \"MP\", dialCode: \"+1-670\" },\r\n { code: \"NO\", dialCode: \"+47\" },\r\n { code: \"OM\", dialCode: \"+968\" },\r\n { code: \"PK\", dialCode: \"+92\" },\r\n { code: \"PW\", dialCode: \"+680\" },\r\n { code: \"PS\", dialCode: \"+970\" },\r\n { code: \"PA\", dialCode: \"+507\" },\r\n { code: \"PG\", dialCode: \"+675\" },\r\n { code: \"PY\", dialCode: \"+595\" },\r\n { code: \"PE\", dialCode: \"+51\" },\r\n { code: \"PH\", dialCode: \"+63\" },\r\n { code: \"PL\", dialCode: \"+48\" },\r\n { code: \"PT\", dialCode: \"+351\" },\r\n { code: \"PR\", dialCode: \"+1-787\" },\r\n { code: \"QA\", dialCode: \"+974\" },\r\n { code: \"RE\", dialCode: \"+262\" },\r\n { code: \"RO\", dialCode: \"+40\" },\r\n { code: \"RU\", dialCode: \"+7\" },\r\n { code: \"RW\", dialCode: \"+250\" },\r\n { code: \"BL\", dialCode: \"+590\" },\r\n { code: \"SH\", dialCode: \"+290\" },\r\n { code: \"KN\", dialCode: \"+1-869\" },\r\n { code: \"LC\", dialCode: \"+1-758\" },\r\n { code: \"MF\", dialCode: \"+590\" },\r\n { code: \"PM\", dialCode: \"+508\" },\r\n { code: \"VC\", dialCode: \"+1-784\" },\r\n { code: \"WS\", dialCode: \"+685\" },\r\n { code: \"SM\", dialCode: \"+378\" },\r\n { code: \"ST\", dialCode: \"+239\" },\r\n { code: \"SA\", dialCode: \"+966\" },\r\n { code: \"SN\", dialCode: \"+221\" },\r\n { code: \"RS\", dialCode: \"+381\" },\r\n { code: \"SC\", dialCode: \"+248\" },\r\n { code: \"SL\", dialCode: \"+232\" },\r\n { code: \"SG\", dialCode: \"+65\" },\r\n { code: \"SX\", dialCode: \"+1-721\" },\r\n { code: \"SK\", dialCode: \"+421\" },\r\n { code: \"SI\", dialCode: \"+386\" },\r\n { code: \"SB\", dialCode: \"+677\" },\r\n { code: \"SO\", dialCode: \"+252\" },\r\n { code: \"ZA\", dialCode: \"+27\" },\r\n { code: \"KR\", dialCode: \"+82\" },\r\n { code: \"SS\", dialCode: \"+211\" },\r\n { code: \"ES\", dialCode: \"+34\" },\r\n { code: \"LK\", dialCode: \"+94\" },\r\n { code: \"SD\", dialCode: \"+249\" },\r\n { code: \"SR\", dialCode: \"+597\" },\r\n { code: \"SJ\", dialCode: \"+47\" },\r\n { code: \"SZ\", dialCode: \"+268\" },\r\n { code: \"SE\", dialCode: \"+46\" },\r\n { code: \"CH\", dialCode: \"+41\" },\r\n { code: \"SY\", dialCode: \"+963\" },\r\n { code: \"TW\", dialCode: \"+886\" },\r\n { code: \"TJ\", dialCode: \"+992\" },\r\n { code: \"TZ\", dialCode: \"+255\" },\r\n { code: \"TH\", dialCode: \"+66\" },\r\n { code: \"TL\", dialCode: \"+670\" },\r\n { code: \"TG\", dialCode: \"+228\" },\r\n { code: \"TK\", dialCode: \"+690\" },\r\n { code: \"TO\", dialCode: \"+676\" },\r\n { code: \"TT\", dialCode: \"+1-868\" },\r\n { code: \"TN\", dialCode: \"+216\" },\r\n { code: \"TR\", dialCode: \"+90\" },\r\n { code: \"TM\", dialCode: \"+993\" },\r\n { code: \"TC\", dialCode: \"+1-649\" },\r\n { code: \"TV\", dialCode: \"+688\" },\r\n { code: \"UG\", dialCode: \"+256\" },\r\n { code: \"UA\", dialCode: \"+380\" },\r\n { code: \"AE\", dialCode: \"+971\" },\r\n { code: \"GB\", dialCode: \"+44\" },\r\n { code: \"US\", dialCode: \"+1\" },\r\n { code: \"UY\", dialCode: \"+598\" },\r\n { code: \"UZ\", dialCode: \"+998\" },\r\n { code: \"VU\", dialCode: \"+678\" },\r\n { code: \"VA\", dialCode: \"+379\" },\r\n { code: \"VE\", dialCode: \"+58\" },\r\n { code: \"VN\", dialCode: \"+84\" },\r\n { code: \"WF\", dialCode: \"+681\" },\r\n { code: \"EH\", dialCode: \"+212\" },\r\n { code: \"YE\", dialCode: \"+967\" },\r\n { code: \"ZM\", dialCode: \"+260\" },\r\n { code: \"ZW\", dialCode: \"+263\" },\r\n];\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { TextField, Grid, FormControl, Autocomplete } from \"@mui/material\";\r\nimport { isValidPhoneNumber } from \"libphonenumber-js\";\r\nimport { countryCodes } from \"./CountryCodes\"; // Ensure this has correct structure\r\nimport { validateState } from \"../../Functions\";\r\nimport axios from \"axios\";\r\n\r\nconst PhoneNumberInput = ({ onChange, defultValues }) => {\r\n const [selectedCountry, setSelectedCountry] = useState(null);\r\n const [phoneNumber, setPhoneNumber] = useState(\"\");\r\n const [error, setError] = useState(false);\r\n\r\n useEffect(() => {\r\n const fetchCountryCode = async () => {\r\n try {\r\n const response = await axios.get(\"https://api.ipgeolocation.io/ipgeo\", {\r\n params: {\r\n apiKey: \"e43ab96aeb96433c8506f23f00c1f4cc\",\r\n },\r\n });\r\n const country = {\r\n dialCode: `${response.data.calling_code}`,\r\n code: response.data.country_code2,\r\n };\r\n setSelectedCountry(country);\r\n } catch (error) {\r\n console.error(\"Error fetching the country code:\", error);\r\n }\r\n };\r\n if (defultValues?.dialCode) {\r\n setSelectedCountry(defultValues?.dialCode);\r\n setPhoneNumber(defultValues?.PhoneNumber)\r\n } else {\r\n fetchCountryCode();\r\n }\r\n }, []);\r\n\r\n const handleCountryChange = (event, newValue) => {\r\n setSelectedCountry(newValue);\r\n checkValidity(newValue?.dialCode + phoneNumber); // Use newValue which is the full country object\r\n };\r\n\r\n const handlePhoneNumberChange = (event) => {\r\n const inputNumber = event.target.value;\r\n setPhoneNumber(inputNumber);\r\n };\r\n\r\n useEffect(() => {\r\n if (phoneNumber.length > 0) {\r\n checkValidity(selectedCountry?.dialCode + phoneNumber);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [phoneNumber, selectedCountry?.dialCode]);\r\n\r\n const checkValidity = (fullPhoneNumber) => {\r\n const valid = isValidPhoneNumber(fullPhoneNumber);\r\n setError(!valid);\r\n onChange({ ...selectedCountry, phoneNumber });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {step === 0 && (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Forgot;\r\n","import React from \"react\";\r\n\r\nconst Footer = () => {\r\n return (\r\n \r\n \r\n Forgot your password? Enter your phone number\r\n \r\n \r\n
\r\n )}\r\n\r\n {step === 1 && (\r\n \r\n \r\n A passcode has been sent to your phone. Please reset your\r\n password below.\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {error && \r\n {loading ? (\r\n
\r\n )}\r\n\r\n {step === 2 && (\r\n \r\n \r\n
\r\n {error}
}\r\n \r\n setStep(0)}\r\n variant=\"outlined\"\r\n size=\"small\"\r\n style={{\r\n ...commonStyles.button,\r\n ...commonStyles.buttonSecondary,\r\n }}\r\n >\r\n Resend Code\r\n \r\n \r\n Save Changes\r\n \r\n
\r\n )}\r\n \r\n \r\n Please check your internet connection and try again.\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n history.push(\"/\")}\r\n variant=\"outlined\"\r\n style={commonStyles.button}\r\n >\r\n Back to Home\r\n \r\n setStep(0)}\r\n variant=\"contained\"\r\n style={commonStyles.button}\r\n >\r\n Resend Link\r\n \r\n
\r\n \r\n {/* \r\n \r\n \r\n \r\n footer-frame \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Footer;\r\n","import React, { useState, useEffect, useContext } from \"react\";\r\nimport { AppContext } from \"../../AppContext\";\r\n\r\nconst SuspenseCounter = () => {\r\n const { context } = useContext(AppContext);\r\n const dueDate = new Date(context?.DueDate);\r\n const currentDate = new Date();\r\n const timeDifference = dueDate - currentDate;\r\n const daysDifference = timeDifference / (1000 * 60 * 60 * 24);\r\n const [daysLeft, setDaysLeft] = useState(daysDifference); // Number of days left\r\n const [hoursLeft, setHoursLeft] = useState(0);\r\n const [minutesLeft, setMinutesLeft] = useState(0);\r\n const [secondsLeft, setSecondsLeft] = useState(0);\r\n\r\n useEffect(() => {\r\n const countdownTimer = setInterval(() => {\r\n const now = new Date();\r\n const targetDate = new Date(\r\n now.getFullYear(),\r\n now.getMonth(),\r\n now.getDate() + daysLeft,\r\n 0,\r\n 0,\r\n 0\r\n );\r\n const timeLeft = targetDate - now;\r\n\r\n if (timeLeft <= 0) {\r\n clearInterval(countdownTimer);\r\n // You can add additional logic for what happens when the system is suspended\r\n } else {\r\n const hours = Math.floor(timeLeft / (1000 * 60 * 60));\r\n const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));\r\n const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);\r\n\r\n setHoursLeft(hours);\r\n setMinutesLeft(minutes);\r\n setSecondsLeft(seconds);\r\n }\r\n }, 1000);\r\n\r\n return () => clearInterval(countdownTimer);\r\n }, [daysLeft]);\r\n\r\n const isUrgent =\r\n daysLeft === 0 && hoursLeft === 0 && minutesLeft === 0 && secondsLeft <= 59;\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SuspenseCounter;\r\n","import React, { useState } from \"react\";\r\nimport Modal from \"@mui/material/Modal\";\r\nimport Button from \"@mui/material/Button\";\r\nimport Box from \"@mui/system/Box\";\r\nimport { IconExclamationCircle } from \"@tabler/icons\";\r\nimport Billing from \"../Settings/Billing\";\r\nimport SuspenseCounter from \"./CountDown\";\r\nimport \"./button.css\";\r\n\r\nconst PaymentModal = ({ DueDate }) => {\r\n const [open, setOpen] = useState(false);\r\n\r\n const handleOpen = () => {\r\n setOpen(true);\r\n };\r\n\r\n const handleClose = () => {\r\n setOpen(false);\r\n };\r\n\r\n const modalStyle = {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n bgcolor: \"white\", // Adjust the background color\r\n boxShadow: \"0px 4px 10px rgba(0, 0, 0, 0.2)\", // Add a subtle shadow\r\n p: 4,\r\n };\r\n\r\n return (\r\n System Suspension Countdown
\r\n\r\n {daysLeft?.toFixed(0)} days, {hoursLeft} hours, {minutesLeft} minutes,{\" \"}\r\n {secondsLeft} seconds\r\n
\r\n\r\n\r\n URGENT: Please take action to prevent system suspension!\r\n
\r\n\r\n {context.timeRange === \"nodate\" ? null : renderDateInputs()}\r\n {context?.station !== \"none\" && (\r\n setSearchTerm(e.target.value)}\r\n style={{\r\n width: \"100%\",\r\n padding: \"8px\",\r\n boxSizing: \"border-box\",\r\n }}\r\n />\r\n
\r\n \r\n option.VendorLocationName)\r\n .join(\", \")\r\n }\r\n className=\"form-control fc-datepicker\"\r\n onClick={() => setIsVisible(!isVisible)}\r\n placeholder=\"Select option(s)\"\r\n style={{\r\n width: \"100%\",\r\n padding: \"8px\",\r\n boxSizing: \"border-box\",\r\n borderRadius: \"10px\",\r\n }}\r\n readOnly\r\n />\r\n {isVisible && (\r\n \r\n \r\n {/* \r\n \r\n Select Multiple\r\n \r\n
*/}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Tabs;\r\n","import { Settings, TimeToLeaveOutlined } from \"@material-ui/icons\";\r\nimport {\r\n Dns,\r\n House,\r\n People,\r\n PermMedia,\r\n Phonelink,\r\n ProductionQuantityLimits,\r\n Support,\r\n} from \"@mui/icons-material\";\r\nimport { IconBoxModel } from \"@tabler/icons\";\r\nimport { encryptSession } from \".\";\r\n\r\nconst VendorID = encryptSession.getItem(\"ci\");\r\n\r\nexport const NavBar = [\r\n {\r\n id: \"sales\",\r\n children: [\r\n { id: \"saledash\", icon: \r\n {Headers.map((tab, tabIndex) => (\r\n
\r\n - \r\n {tab.children.map((child, idx) => (\r\n
- \r\n {recipients.map((recipient, index) => (\r\n
Esque Kenya
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n
\r\n\r\n \r\n {forgot ? (\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Sign In
\r\n\r\n {!isLoggedIn ? (\r\n\r\n setForgot(!forgot)} // Toggle forgot password view\r\n style={{\r\n ...styles.forgotPasswordLink, // Apply same link style\r\n cursor: \"pointer\", // Make it clickable\r\n }}\r\n >\r\n Forgot Password?\r\n
\r\n \r\n {assetloading || customerloading ? (\r\n setIsHovered(true)}\r\n onMouseLeave={() => setIsHovered(false)}\r\n />\r\n )}\r\n
\r\n \r\n ) : (\r\n <>\r\n {showTwoFactorOptions && (\r\n \r\n
\r\n )}\r\n \r\n )}\r\n\r\n {!isLoggedIn && (\r\n \r\n {\r\n setIsTwoFactorEnabled(!isTwoFactorEnabled);\r\n setTwoFA(!twoFA);\r\n }}\r\n />\r\n \r\n Enable Two-Factor Authentication\r\n \r\n
\r\n \r\n This will require you to use a one-time passcode sent to\r\n your{\" \"}\r\n WhatsApp and{\" \"}\r\n Email every\r\n time you log in to authenticate you signing in.\r\n
\r\n\r\n {result?.TwoFA === 1 && (\r\n \r\n )}\r\n {result?.TwoFA !== 1 && (\r\n\r\n \r\n SKIP 2FA\r\n \r\n
\r\n )}\r\n \r\n Already have an account?{\" \"}\r\n \r\n Sign up\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default SignUp;\r\n","import \"react-toastify/dist/ReactToastify.css\";\r\nimport Home from \"./components/Home/Home\";\r\nimport Login from \"./components/Login/Login\";\r\nimport { lazy } from \"react\";\r\n\r\nconst InvoiceDetails = lazy(() =>\r\n import(\"./components/InvoiceDetails/InvoiceDetails\")\r\n);\r\n// const Login = lazy(() => import(\"./components/Login/Login\"));\r\nconst SignUp = lazy(() => import(\"./components/Login/SignUp\"));\r\nconst Dashboard = lazy(() => import(\"./components/Dashboard\"));\r\nconst Forgot = lazy(() => import(\"./components/Password/Forgot\"));\r\nconst Reset = lazy(() => import(\"./components/Password/Reset\"));\r\n// Settings\r\nconst Pump = lazy(() => import(\"./components/Settings/Pump\"));\r\nconst Nozzle = lazy(() => import(\"./components/Settings/Nozzle\"));\r\nconst Location = lazy(() => import(\"./components/Settings/Location\"));\r\nconst Download = lazy(() =>\r\n import(\"./components/Settings/DownLoads/Downloads\")\r\n);\r\nconst Help = lazy(() => import(\"./components/Settings/Help/index\"));\r\nconst Profile = lazy(() => import(\"./components/Settings/Settings\"));\r\nconst Billing = lazy(() => import(\"./components/Settings/Billing/index\"));\r\nconst AuditLog = lazy(() =>\r\n import(\"./components/Settings/AuditLogs/AuditTrail\")\r\n);\r\nconst Manual = lazy(() => import(\"./components/Settings/Manual/Manual\"));\r\n//stock\r\nconst StockReport = lazy(() => import(\"./components/Stock/Report\"));\r\nconst StockAction = lazy(() => import(\"./components/Stock/StockAction\"));\r\nconst Purchase = lazy(() => import(\"./components/Stock/Purchase\"));\r\nconst Inventory = lazy(() => import(\"./components/Stock/Inventory\"));\r\nconst Supplier = lazy(() => import(\"./components/Stock/Supplier/Suppliers\"));\r\nconst Offloading = lazy(() =>\r\n import(\"./components/Stock/PurchaseDetails/Offloading\")\r\n);\r\n//sales\r\nconst SaleHistory = lazy(() => import(\"./components/Invoice/SalesReport\"));\r\nconst SalesDashboard = lazy(() =>\r\n import(\"./components/Invoice/SalesDashboard\")\r\n);\r\nconst ClientList = lazy(() => import(\"./components/Invoice/ClientList\"));\r\n//Admin\r\nconst ClockManagement = lazy(() =>\r\n import(\"./components/Admin/ClockManagement\")\r\n);\r\nconst Error = lazy(() => import(\"./components/common/error\"));\r\nconst ShiftSummary = lazy(() =>\r\n import(\"./components/Admin/LotSummary/ShiftSummary/index\")\r\n);\r\n// AdminReports\r\n\r\n// Finance\r\nconst Statement = lazy(() => import(\"./components/Finance/Statement\"));\r\nconst Expense = lazy(() => import(\"./components/Finance/Expense\"));\r\nconst Transfer = lazy(() =>\r\n import(\"./components/Finance/FinanceDash/MainDashboard\")\r\n);\r\nconst Payroll = lazy(() => import(\"./components/Finance/payrollsheet/Payroll\"));\r\nconst Tax = lazy(() => import(\"./components/Finance/Tax/Tax\"));\r\n//CustomerPage\r\nconst CustomerDash = lazy(() =>\r\n import(\"./components/CustomerPortal/dashboard\")\r\n);\r\n//Consilidated\r\nconst ConDashboard = lazy(() =>\r\n import(\"./components/Consolidated/Consolidated\")\r\n);\r\nconst LotSummary = lazy(() => import(\"./components/Admin/LotSummary\"));\r\nconst DaillySummary = lazy(() =>\r\n import(\"./components/Admin/DailyShiftSummary\")\r\n);\r\n//DIstributor\r\nconst DistributionDashboard = lazy(() =>\r\n import(\"./components/Distribution/DashBoard/index\")\r\n);\r\n//LoyaltyCards\r\nconst LoyaltyCardDashboard = lazy(() =>\r\n import(\"./components/LoyaltyCard/DashBoard/index\")\r\n);\r\nconst LoyaltyCustomers = lazy(() =>\r\n import(\"./components/LoyaltyCard/Customers/Customers\")\r\n);\r\n\r\nconst LoyaltySettings = lazy(() =>\r\n import(\"./components/LoyaltyCard/Settings/Setting\")\r\n);\r\nconst LoyaltyProduct = lazy(() =>\r\n import(\"./components/LoyaltyCard/Product/Product\")\r\n);\r\nconst LoyaltyRewards = lazy(() =>\r\n import(\"./components/LoyaltyCard/Report/Rewards\")\r\n);\r\nconst LoyaltyRedeems = lazy(() =>\r\n import(\"./components/LoyaltyCard/Report/Redeems\")\r\n);\r\n//FUEL CARD\r\nconst FuelCardCardDashboard = lazy(() =>\r\n import(\"./components/FuelCard/DashBoard\")\r\n);\r\nconst FuelCardCards = lazy(() => import(\"./components/FuelCard/VendorCard\"));\r\nconst FuelCardTransactionCards = lazy(() =>\r\n import(\"./components/FuelCard/Transactions\")\r\n);\r\nconst FuelCardCustomerCards = lazy(() =>\r\n import(\"./components/FuelCard/Customer\")\r\n);\r\n//Distributor\r\nconst DistributionOrders = lazy(() =>\r\n import(\"./components/Distribution/Orders/Orders\")\r\n);\r\nconst DistributionPurchase = lazy(() =>\r\n import(\"./components/Distribution/Stock/Purchase\")\r\n);\r\nconst DistributionVehicle = lazy(() =>\r\n import(\"./components/Distribution/Vehicle/Vehicle\")\r\n);\r\n//ticketing\r\nconst ViewTicket = lazy(() => import(\"./components/Ticketing/ViewTickets \"));\r\n//general\r\nconst PrivacyPolicy = lazy(() => import(\"./api/privacypolicy\"));\r\nconst VendorContract = lazy(() => import(\"./VendorContract\"));\r\n\r\n//Automation\r\nconst AutomationDashBoard = lazy(() =>\r\n import(\"./components/Automation/Dashboard\")\r\n);\r\n\r\n//crm\r\nconst CRM = lazy(() =>\r\n import(\"./components/CRM/crm\")\r\n);\r\nexport const route = [\r\n { path: \"/\", layout: \"public\", component: Home },\r\n { path: \"/invoice/:id\", component: InvoiceDetails },\r\n { path: \"/privacypolicy\", component: PrivacyPolicy },\r\n { path: \"/contract\", component: VendorContract },\r\n { path: \"/login\", layout: \"public\", component: Login },\r\n { path: \"/signup\", component: SignUp },\r\n { path: \"/dashboard/dashboard\", component: Dashboard },\r\n { path: \"/customers\", component: ClientList },\r\n { path: \"/forgot\", component: Forgot },\r\n { path: \"/reset/:token\", component: Reset },\r\n { path: \"/profile/profile\", component: Profile },\r\n { path: \"/settings/pump\", component: Pump },\r\n { path: \"/settings/nozzle\", component: Nozzle },\r\n { path: \"/settings/billing\", component: Billing },\r\n { path: \"/settings/download\", component: Download },\r\n { path: \"/settings/auditlogs\", component: AuditLog },\r\n { path: \"/settings/manual\", component: Manual },\r\n { path: \"/location/location\", component: Location },\r\n { path: \"/help/help\", component: Help },\r\n { path: \"/sales/saledash\", component: SalesDashboard },\r\n { path: \"/sales/history\", component: SaleHistory },\r\n { path: \"/sales/customer\", component: ClientList },\r\n { path: \"/sales/invoice/history\", component: InvoiceDetails },\r\n { path: \"/inventory/report\", component: StockReport },\r\n { path: \"/inventory/action\", component: StockAction },\r\n { path: \"/inventory/purchase\", component: Purchase },\r\n { path: \"/inventory/offloading\", component: Offloading },\r\n { path: \"/inventory/inventory\", component: Inventory },\r\n { path: \"/inventory/supplier\", component: Supplier },\r\n { path: \"/finance/statement\", component: Statement },\r\n { path: \"/finance/transfer\", component: Transfer },\r\n { path: \"/finance/tax\", component: Tax },\r\n { path: \"/finance/expense\", component: Expense },\r\n { path: \"/finance/payroll\", component: Payroll },\r\n { path: \"/shift/clock\", component: ClockManagement },\r\n { path: \"/lotsummary\", component: LotSummary },\r\n { path: \"/error\", component: Error },\r\n { path: \"/shift/ShiftRecon\", component: ShiftSummary },\r\n { path: \"/shift/DailySummary\", component: DaillySummary },\r\n { path: \"/customer/dashboard\", component: CustomerDash },\r\n { path: \"/consolidated/dashboard\", component: ConDashboard },\r\n { path: \"/distribution/dashboard\", component: DistributionDashboard },\r\n { path: \"/distribution/orders\", component: DistributionOrders },\r\n { path: \"/distribution/purchase\", component: DistributionPurchase },\r\n { path: \"/distribution/vehicle\", component: DistributionVehicle },\r\n { path: \"/loyalty/dashboard\", component: LoyaltyCardDashboard },\r\n { path: \"/loyalty/customers\", component: LoyaltyCustomers },\r\n { path: \"/loyalty/invoice\", component: ClientList },\r\n { path: \"/loyalty/settings\", component: LoyaltySettings },\r\n { path: \"/loyalty/product\", component: LoyaltyProduct },\r\n { path: \"/loyalty/rewards\", component: LoyaltyRewards },\r\n { path: \"/loyalty/redeems\", component: LoyaltyRedeems },\r\n { path: \"/fuelcard/dashboard\", component: FuelCardCardDashboard },\r\n { path: \"/fuelcard/cards\", component: FuelCardCards },\r\n { path: \"/fuelcard/transactions\", component: FuelCardTransactionCards },\r\n { path: \"/fuelcard/customers\", component: FuelCardCustomerCards },\r\n { path: \"/ticketing/viewtickets\", component: ViewTicket },\r\n { path: \"/ticketing/viewtickets\", component: ViewTicket },\r\n { path: \"/automation/automation\", component: AutomationDashBoard },\r\n { path: \"/crm/dashboard\", component: CRM },\r\n];\r\n","import \"./assets/css/style.css\";\r\nimport \"./assets/css/bootstrap.css\";\r\n//background images\r\nimport homepage from \"./assets/img/hero-img.png\";\r\nimport Background from \"./assets/img/bg_hero_1.svg\";\r\nimport Typical from \"react-typical\";\r\n\r\nexport default function Home() {\r\n return (\r\n\r\n \r\n
\r\n \r\n );\r\n}\r\n","import Spinner from \"../Spinner/Spinner\";\r\n\r\nexport const LoadingSpinner = () => {\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 We help to {\"\"}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n We help to {\"\"}\r\n \r\n
\r\n \r\n NO 1, Fuel Stations Solution in Africa today\r\n
\r\n\r\n Use crato to automate your fuel station operations
\r\n and minimize your chances of getting loses.\r\n
\r\n
\r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n - \r\n {Menuitems?.filter((m) =>\r\n productIDs?.some((id) => m.type.includes(id))\r\n ).map((m, index) => (\r\n
\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport { BrowserRouter, Route, Switch, Link } from \"react-router-dom\";\r\nimport SnackbarProvider from \"react-simple-snackbar\";\r\nimport { ToastContainer } from \"react-toastify\";\r\nimport \"react-toastify/dist/ReactToastify.css\";\r\nimport Footer from \"./components/Footer/Footer\";\r\nimport Header from \"./components/Header/Header\";\r\nimport { Box, CssBaseline, Typography } from \"@mui/material\";\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport { encryptSession } from \"./api\";\r\nimport { route } from \"./Route\";\r\nimport { Suspense } from \"react\";\r\nimport { LoadingSpinner } from \"./components/common/Loader\";\r\nimport { SidebarWidth } from \"./assets/sidebar/jss/Theme-variable\";\r\nimport Sidebar from \"./components/Sidebar/Sidebar\";\r\nimport NotPaid from \"./NotPaid\";\r\nimport { useContext } from \"react\";\r\nimport { AppContext } from \"./AppContext\";\r\n\r\nconst Company = encryptSession.getItem(\"cn\");\r\nconst locations = encryptSession.getItem(\"loc\");\r\nconst type = +localStorage.getItem(\"tpy\");\r\n\r\nfunction AdminRoute() {\r\n const { context, setContext, locd } = useContext(AppContext);\r\n\r\n const vtype =\r\n locd?.VendorLocationCratoProductArray?.[0]?.CratoProductID === 2 ? 4 : 1;\r\n\r\n const [isSidebarOpen, setSidebarOpen] = React.useState(vtype !== 4);\r\n const [isMobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);\r\n const [isOnline, setIsOnline] = React.useState(navigator.onLine);\r\n React.useEffect(() => {\r\n function handleOnlineStatusChange() {\r\n setIsOnline(navigator.onLine);\r\n localStorage.setItem(\"online\", isOnline);\r\n }\r\n\r\n window.addEventListener(\"online\", handleOnlineStatusChange);\r\n window.addEventListener(\"offline\", handleOnlineStatusChange);\r\n\r\n return () => {\r\n window.removeEventListener(\"online\", handleOnlineStatusChange);\r\n window.removeEventListener(\"offline\", handleOnlineStatusChange);\r\n };\r\n }, [isOnline]);\r\n const storedValues = JSON.parse(localStorage.getItem(\"values\"));\r\n\r\n React.useEffect(() => {\r\n if (!storedValues && Array.isArray(locations) && locations.length > 0) {\r\n setContext({\r\n ...context,\r\n VendorLocationID: locations[0].VendorLocationID,\r\n VendorID: locations[0].VendorID,\r\n VendorLocationName: locations[0].VendorLocationName,\r\n ImageID: locations[0].ImageID,\r\n });\r\n }\r\n // setSidebarOpen(vtype !==4 )\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [storedValues, locations, context, setContext]);\r\n\r\n const useStyles = makeStyles((theme) => ({\r\n root: {\r\n backgroundColor: theme.palette.background.dark,\r\n height: \"100%\",\r\n overflow: \"hidden\",\r\n width: \"100%\",\r\n },\r\n wrapper: {\r\n display: \"flex\",\r\n flex: \"1 1 auto\",\r\n overflow: \"hidden\",\r\n // paddingTop: 64,\r\n },\r\n hideFullSidebar: {\r\n [theme.breakpoints.up(\"lg\")]: {\r\n paddingLeft: type === 1 && Company ? SidebarWidth : 0,\r\n },\r\n },\r\n contentContainer: {\r\n display: \"flex\",\r\n flex: \"1 1 auto\",\r\n overflow: \"hidden\",\r\n },\r\n content: {\r\n flexGrow: 1,\r\n height: \"calc(100vh)\",\r\n overflow: \"auto\",\r\n marginRight: \"-15px\",\r\n },\r\n }));\r\n\r\n const classes = useStyles();\r\n\r\n function Copyright() {\r\n return (\r\n NOT PAID !!
\r\n \r\n {context?.VendorName + \" \"} ACCOUNT IS SUSPENDED\r\n
\r\n {/* INVOICE AMOUNT: 8000
*/}\r\n \r\n \r\n \r\n setMobileSidebarOpen(false)}\r\n toggleSidebar={() => setSidebarOpen(!isSidebarOpen)}\r\n // setNavWidth={setNavWidth}\r\n />\r\n ) : null}\r\n {context?.VendorStatusID !== 2 && (\r\n \r\n \r\n setSidebarOpen(!isSidebarOpen)}\r\n toggleMobileSidebar={() => setMobileSidebarOpen(true)}\r\n isSidebarOpen={isSidebarOpen}\r\n />\r\n\r\n \r\n \r\n \r\n \r\n {/* {UserID && \r\n
\r\n )}\r\n\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default React.memo(AdminRoute);\r\n","import React, { useEffect, useState, useMemo } from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { QueryClient, QueryClientProvider } from \"react-query\";\r\nimport \"./index.css\";\r\nimport AdminRoute from \"./AdminRoute\";\r\nimport { AppContext } from \"./AppContext\";\r\nimport { encryptSession } from \"./api\";\r\nimport { DefaultContextDateRange, getNairobiTimeFromLocal } from \"./components/common/Functions\";\r\n\r\nconst queryClient = new QueryClient();\r\n\r\nfunction App() {\r\n const UserID = useMemo(() => encryptSession.getItem(\"us\"), []);\r\n const [startTime, endTime] = DefaultContextDateRange(\"week\");\r\n\r\n const [context, setContext] = useState(() => ({\r\n VendorName: encryptSession.getItem(\"cn\"),\r\n Slogan: encryptSession.getItem(\"sl\"),\r\n VendorImage: encryptSession.getItem(\"cim\"),\r\n DateRange: [\r\n getNairobiTimeFromLocal(startTime),\r\n getNairobiTimeFromLocal(endTime),\r\n ],\r\n refresh: 0,\r\n fetching: false,\r\n reporttitle: \"crato\",\r\n fetchError: false,\r\n }));\r\n\r\n const [VendorImage, setVendorImage] = useState(encryptSession.getItem(\"cim\"));\r\n const [locd, setLocd] = useState(encryptSession.getItem(\"locd\"));\r\n\r\n useEffect(() => {\r\n // Get current URL\r\n const currentPath = window.location.pathname;\r\n const isExcludedPath = [\r\n \"/privacypolicy\",\r\n \"/signup\",\r\n \"/login\",\r\n \"/\",\r\n ].includes(currentPath);\r\n\r\n if (!UserID && !isExcludedPath) {\r\n sessionStorage.clear();\r\n window.location.href = \"/\";\r\n }\r\n }, [UserID]);\r\n\r\n const memoizedContextValue = useMemo(() => {\r\n return {\r\n context,\r\n setContext,\r\n VendorImage,\r\n setVendorImage,\r\n locd,\r\n setLocd,\r\n };\r\n }, [context, VendorImage, locd]);\r\n\r\n return (\r\n