\n \n \n
\n \n
\n \n
\n \n\n \n ;\n case 2:\n return \n \n {\n if ((e.target.value ?? \"\").length > 101) {\n return;\n }\n setShowExit(true);\n handleModelData({name: e.target.value})\n }}\n disabled={preview}\n />\n
\n \n \n {\n setShowExit(true);\n handleModelData({sku: `${e.target.value ?? \"\"}`})\n }}\n disabled={preview}\n />\n
\n \n \n handleCategory('type', record, setSelectedCategory)}\n isDisabled={preview}\n />\n
\n \n \n handleSCategory('style', record, setSelectedSubCategory)}\n isDisabled={preview}\n />\n
\n \n \n handleUnit('mUnit', record, setSelectedUnit)}\n isDisabled={preview}\n />\n
\n \n \n
\n \n {imagePath ? 
:\n 
}\n
\n \n
\n \n \n {!imagePath &&\n \n }\n
\n \n \n
\n \n\n
\n
;\n case 3:\n return \n \n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleModelData({openingStockInvalid: true})\n return;\n }\n handleModelData({\n openingStock: parseFloat(e.target.value),\n openingStockInvalid: false\n })\n }}\n disabled={preview}\n />\n \n {t(\"This value is not in range.\")}\n \n
\n\n \n \n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleModelData({openingRateInvalid: true})\n return;\n }\n handleModelData({\n openingRate: parseFloat(e.target.value),\n openingRateInvalid: false\n })\n }}\n disabled={preview}\n />\n\n \n {t(\"This value is not in range.\")}\n \n
\n\n \n \n
\n \n \n handleSupplierCOA('purchaseAccount', record, setSelectedInventoryCOA)}\n isDisabled={preview}\n />\n\n
\n\n \n \n
\n \n
\n
;\n case 4:\n return \n \n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleModelData({salesRateInvalid: true})\n return;\n }\n handleModelData({salesRate: parseFloat(e.target.value), salesRateInvalid: false})\n }}\n disabled={preview}\n />\n\n \n {t(\"This value is not in range.\")}\n \n\n
\n \n \n \n
\n\n \n \n handleSalesAC('revenueAccount', record, setSelectedSalesAC)}\n isDisabled={preview}\n />\n
\n \n \n {\n handleModelData({salesDescription: e.target?.value ?? \"\"})\n }}\n disabled={preview}\n />\n
\n \n \n\n
\n \n
\n
;\n case 5:\n return \n \n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleModelData({purchaseRateInvalid: true})\n return;\n }\n handleModelData({\n purchaseRate: parseFloat(e.target.value),\n purchaseRateInvalid: false\n })\n }}\n disabled={preview}/>\n\n\n \n {t(\"This value is not in range.\")}\n \n\n
\n \n \n \n
\n \n \n handlePurchaseAC('costAccount', record, setSelectedPurchaseAC)}\n isDisabled={preview}\n />\n
\n \n \n {\n handleModelData({purchseDescription: e.target.value})\n }}\n disabled={preview}\n />\n
\n {/*\n \n {\n handleModelData({ supplier: parseFloat(e.target.value) })\n }}\n disabled={preview}\n />\n
*/}\n \n \n
\n \n
\n
;\n case 6:\n return \n \n handleColor('color', record, setSelectedColor)}\n isDisabled={preview}\n />\n
\n \n \n handleSize('sSize', record, setSelectedSize)}\n isDisabled={preview}\n />\n
\n \n \n handleBrand('brand', record, setSelectedBrand)}\n />\n
\n\n \n \n handleDepartment('department', record, setSelectedDepartment)}\n isDisabled={preview}\n />\n
\n \n \n {\n if ((e.target.value ?? \"\").length > 101) {\n return;\n }\n handleModelData({SecondName: e.target.value})\n }}\n disabled={preview}\n />\n
\n\n \n \n {\n handleModelData({oldCode: e.target.value})\n }}\n disabled={preview}\n />\n
\n \n \n {\n store.data.filter((fItem) => fItem.isActive).map((element, index) => {\n return (\n
\n
;\n default:\n return null;\n }\n }\n\n const steps = store.data.length > 0 ? [\n {\n id: 'general-info',\n title: t('General Information'),\n imp: true,\n subtitle: t('Enter Your inventory details.'),\n content: getContent(1)\n },\n {\n id: 'initial-info',\n title: t('Initial Information'),\n subtitle: t('Add initial Information'),\n content: getContent(2)\n },\n {\n id: 'sales-detail',\n title: t('Sales Information'),\n subtitle: t('Add sales details'),\n content: getContent(3)\n },\n {\n id: 'purchase-detail',\n title: t('Purchase Information'),\n subtitle: t('Add purchase details'),\n content: getContent(4)\n },\n {\n id: 'other-detail',\n title: t('Other Information'),\n subtitle: t('Add other details'),\n content: getContent(5)\n },\n {\n id: 'dynamic-detail',\n title: t('Custom Fields'),\n subtitle: t('Add your custom fields'),\n content: getContent(6)\n }\n ] : [\n {\n id: 'general-info',\n title: t('General Information'),\n imp: true,\n subtitle: t('Enter Your inventory details.'),\n content: getContent(1)\n },\n {\n id: 'initial-info',\n title: t('Initial Information'),\n subtitle: t('Add initial Information'),\n content: getContent(2)\n },\n {\n id: 'sales-detail',\n title: t('Sales Information'),\n subtitle: t('Add sales details'),\n content: getContent(3)\n },\n {\n id: 'purchase-detail',\n title: t('Purchase Information'),\n subtitle: t('Add purchase details'),\n content: getContent(4)\n },\n {\n id: 'other-detail',\n title: t('Other Information'),\n subtitle: t('Add other details'),\n content: getContent(5)\n }\n ];\n\n return (\n \n {element.fieldType === \"Boolean\" ? getDynamicField(element) : }\n \n {element.fieldType !== \"Boolean\" ? getDynamicField(element) : }\n
\n )\n })\n }\n \n \n setStepper(el)}\n ref={ref}\n steps={steps}\n options={{\n linear: false\n }}/>\n }\n\n
\n\n \n\n \n \n \n {\n loading ? \n : \n \n }\n\n {props.quickAdd ? {\n if(unblock){\n unblock?.current()\n }\n props.toggleQuickAddBar();\n }} className='btn-outline-primary'>\n : {\n history.goBack();\n }} className='btn-outline-primary'>\n }\n \n \n
\n \n
\n {/* Invoice Actions */}\n\n {/* /Invoice Actions */}\n \n {t(`${props.title??\"New Inventory\"}`)}\n
\n\n {\n\n\n
\n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n\n \n {t(\"Cancel\")}\n \n\n
\n )\n }\n\n return (\n \n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n\n \n {t(\"Cancel\")}\n \n
\n )\n }\n\n return (\n \n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n\n \n {t(\"Cancel\")}\n \n\n
\n )\n }\n\n return (\n \n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n \n {t(\"Cancel\")}\n \n
\n )\n }\n\n return (\n \n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n\n\n \n {t(\"Cancel\")}\n \n\n
\n )\n }\n\n return (\n \n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n \n {t(\"Cancel\")}\n \n
\n )\n }\n\n return (\n \n
\n \n
\n {t(title)}
\n\n {t(title)}{t(\"saved successfully!\")}\n
\n \n \n \n
\n \n
\n \n
\n
\n },\n {\n id: 'sales-detail',\n title: t('Sales Information'),\n subtitle: t('Add sales details'),\n content: \n \n {\n if((e.target.value??\"\").length > 101) {\n return;\n }\n setShowExit(true);\n handleModelData({name: e.target.value })\n }}\n disabled={preview}\n />\n
\n \n \n {\n setShowExit(true);\n handleModelData({ sku: `${e.target.value??\"\"}` })\n }}\n disabled={preview}\n />\n
\n \n \n handleCategory('type', record, setSelectedCategory)}\n isDisabled={preview}\n />\n
\n \n \n handleSCategory('style', record, setSelectedSubCategory)}\n isDisabled={preview}\n />\n
\n \n \n handleUnit('mUnit', record, setSelectedUnit)}\n isDisabled={preview}\n />\n
\n \n
\n \n\n \n
\n \n {imagePath ? : }\n
\n \n
\n \n \n {!imagePath &&\n \n }\n
\n \n \n
\n \n
\n
\n },\n {\n id: 'purchase-detail',\n title: t('Purchase Information'),\n subtitle: t('Add purchase details'),\n content: \n \n {\n if(parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleModelData({ salesRateInvalid: true })\n return;\n }\n handleModelData({ salesRate: parseFloat(e.target.value), salesRateInvalid: false })\n }}\n disabled={preview}\n />\n\n \n {t(\"This value is not in range.\")}\n \n\n
\n \n \n \n
\n\n \n \n handleSalesAC('revenueAccount', record, setSelectedSalesAC)}\n isDisabled={preview}\n />\n
\n \n \n {\n handleModelData({ salesDescription: e.target?.value??\"\"})\n }}\n disabled={preview}\n />\n
\n \n \n
\n {model.isPurchaseAble && \n
}\n {model.isPurchaseAble && \n
}\n
\n },\n {\n id: 'other-detail',\n title: t('Other Information'),\n subtitle: t('Add other details'),\n content: \n handleModelData({\n isPurchaseAble:e.target.checked\n })} />\n \n
\n \n \n \n {\n if(parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleModelData({ purchaseRateInvalid: true })\n return;\n }\n handleModelData({ purchaseRate: parseFloat(e.target.value), purchaseRateInvalid: false })\n }}\n disabled={preview}/>\n\n\n \n {t(\"This value is not in range.\")}\n \n
\n \n \n \n
\n \n \n {\n handleModelData({purchseTaxType: e.target.value})\n }}>\n \n \n \n \n
\n \n \n handlePurchaseAC('nonInventoryPurchaseAccount', record, setSelectedPurchaseAC)}\n isDisabled={preview}\n />\n
\n \n \n {\n handleModelData({purchseDescription: e.target.value})\n }}\n disabled={preview}\n />\n
\n \n \n \n
\n \n \n
\n \n
\n
\n }\n ]\n\n return (\n \n \n handleColor('color', record, setSelectedColor)}\n isDisabled={preview}\n />\n
\n \n \n handleSize('sSize', record, setSelectedSize)}\n isDisabled={preview}\n />\n
\n \n \n handleBrand('brand', record, setSelectedBrand)}\n />\n
\n\n \n \n handleDepartment('department', record, setSelectedDepartment)}\n isDisabled={preview}\n />\n
\n \n \n {\n if((e.target.value??\"\").length > 101) {\n return;\n }\n handleModelData({ SecondName: e.target.value})\n }}\n disabled={preview}\n />\n
\n\n \n \n {\n handleModelData({ oldCode: e.target.value })\n }}\n disabled={preview}\n />\n
\n \n \n setStepper(el)}\n ref={ref}\n steps={steps}\n options={{\n linear: false\n }}/>\n }\n\n
\n\n \n\n \n \n \n {\n loading ? \n : \n \n }\n\n {props.quickAdd ? {\n if(unblock){\n unblock?.current()\n }\n props.toggleQuickAddBar();\n }} className='btn-outline-primary'>\n : {\n history.goBack();\n }} className='btn-outline-primary'>\n }\n \n \n
\n \n
\n {/* Invoice Actions */}\n\n {/* /Invoice Actions */}\n \n {t(recno ? \"Edit \" : \"Add \")}{t( heading ? \"Services\" : \"Non Inventory Item\")}\n
\n\n {\n\n\n
\n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n\n \n {t(\"Cancel\")}\n \n\n
\n )\n }\n\n return (\n \n {props.viewOnly ? ( 50 ? options.slice(0, 50) : options}\n loadOptions={loadOptions}\n menuPlacement=\"auto\"\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n getOptionValue={(option) => option.taxPercent}\n getOptionLabel={(option) => ({option.taxName + \" (\" + option.taxPercent + \"%)\"})}\n value={location}\n onChange={handleChange}\n isMulti={props.multiple}\n placeholder={t(\"Select...\")}\n {...props}\n styles={SelectStyles}\n />\n }
\n )\n}\n\nexport default WithHeldTaxSelector_v2\n","import * as service from \"@api/api.service\";\nimport {debounce, selectThemeColors} from \"@utils\";\nimport React, {useEffect, useRef, useState} from \"react\";\nimport AsyncSelect from \"react-select/async\";\nimport \"@styles/react/libs/react-select/_react-select.scss\";\nimport {useTranslation} from \"react-i18next\";\n\n\nfunction SaleStatusSelector_v2({\n status,\n selectedStatus,\n onChange,\n menuFixPlacement = true,\n viewOnly = false,\n ...props\n }) {\n const [options, setOptions] = useState([]);\n const {t} = useTranslation();\n\n const selectRef = useRef();\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter((o) => o.text.toLowerCase().includes(inputValue.toLowerCase()));\n if (filtered.length === 0) {\n callback([]);\n }\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered);\n }, 1);\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n };\n\n useEffect(() => {\n service\n .Get(`/Defaults/SalesStatuses`, {})\n .then((response) => response.data)\n .then((data) => {\n setOptions(data || []);\n });\n }, []);\n\n useEffect(() => {\n if (!!selectedStatus && (!status || status.value !== selectedStatus) && options.length) {\n handlChange(options.find((element) => element.value === selectedStatus), {selected: true});\n }\n\n if (!selectedStatus) {\n handlChange(null, {selected: true});\n }\n }, [selectedStatus, options]);\n\n return (\n {location?.taxName}
) :\n\n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option.value}\n getOptionLabel={(option) => (\n \n {option.text}\n \n )}\n value={status ?? null}\n onChange={handlChange}\n placeholder={t(\"Select Status\")}\n {...props}\n />\n
\n );\n}\n\nexport default SaleStatusSelector_v2;\n","// ** React Imports\nimport * as React from 'react'\nimport {useEffect, useState} from 'react'\n\n// ** Reactstrap Imports\nimport {Button, Card, CardBody, Col, Form, Input, InputGroup, Label, ListGroupItem, Row} from 'reactstrap'\nimport {useTranslation} from \"react-i18next\";\nimport {Edit3, Save, Settings} from \"react-feather\";\nimport {useCan} from '@hooks/useCan'\nimport axios from 'axios'\n\nimport {useDispatch} from \"react-redux\";\nimport {getData} from '../store'\nimport {fireMessage} from \"@src/components/MessageModel\"\nimport {ReactSortable} from \"react-sortablejs\";\nimport {CompanyLogoProvider} from \"../../../../utility/context/invoices/CompanyLogoContext\";\nimport UploadCompanyLogoDialog from \"../../company-edit/UploadCompanyLogo\";\nimport {useAppDefaults} from \"../../../../utility/hooks/useAppDefaults\";\n\nconst GeneralSettings = ({ data, customization, preview = false, getLocation, setLocationInfo, getTemplateData}) => {\n const { t } = useTranslation()\n const [loading, setLoading] = useState(false);\n const [loadingGeneral, setLoadingGeneral] = useState(false);\n const [loadingColumns, setLoadingColumns] = useState(false);\n const [loadingSum, setLoadingSum] = useState(false);\n const [state, setState] = useState({...data, ...customization});\n const [logoSize, setLogoSize] = useState(customization.logoSize || 180);\n const [columns, setColumns] = useState([]);\n const ability = useCan()\n const dispatch = useDispatch()\n const [open, setOpen] = React.useState(false);\n const {userData} = useAppDefaults();\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = async () => {\n let loc = {};\n if(getLocation) {\n loc = await getLocation();\n setState({...state, logo: `${loc?.logo}`});\n } else {\n const response = await axios.get(\"/Defaults/LocationDetails?Recno=\" + userData?.loginLocationId);\n loc = response.data.data.length > 0 ? response.data.data[0] : {};\n setState({...state, logo: `${loc?.logo}`});\n }\n\n if(setLocationInfo){\n setLocationInfo(loc)\n }\n\n setOpen(false);\n };\n // ** Hooks\n\n useEffect(() => {\n setLogoSize(customization.logoSize || 180)\n setState(state => ({...state, ...customization}))\n let tempCols = [...(customization.columns || [])];\n setColumns(tempCols.sort((oldSeq, newSeq) => oldSeq.columnSeq - newSeq.columnSeq));\n }, [customization]);\n\n const handleChange = (updated) => {\n setState( state => ({...state, ...updated}))\n }\n\n const onSubmitLogo = async (e) => {\n e.preventDefault();\n state.logoSize = parseFloat(`${logoSize}`);\n setLoading(true);\n try{\n let res = await axios.post('/InvoicePreviewCustomization/UpdateSalesInvoiceCustomization', state)\n fireMessage(\"Logo sized changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n if(getTemplateData){\n getTemplateData()\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoading(false);\n }\n }\n\n const onSubmitGeneral = async (e) => {\n e.preventDefault();\n setLoadingGeneral(true);\n try{\n let res = await axios.post('/InvoicePreviewCustomization/UpdateSalesInvoiceCustomization', state)\n fireMessage(\"Setting changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n if(getTemplateData){\n getTemplateData()\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoadingGeneral(false);\n }\n }\n\n const onSubmitSum = async (e) => {\n e.preventDefault();\n setLoadingSum(true);\n try{\n let res = await axios.post('/InvoicePreviewCustomization/UpdateSalesInvoiceCustomization', state)\n fireMessage(\"Setting changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n if(getTemplateData){\n getTemplateData()\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoadingSum(false);\n }\n }\n\n const onSubmit = async (e) => {\n e.preventDefault();\n state.columns = columns;\n setLoadingColumns(true);\n try{\n let res = await axios.post('/InvoicePreviewCustomization/UpdateSalesInvoiceCustomization', state)\n fireMessage(\"Setting changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n if(getTemplateData){\n getTemplateData()\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoadingColumns(false);\n }\n }\n\n const handleChangeColumns = (index, updated) => {\n if(columns){\n let updatedColumn = {...columns[index], ...updated};\n columns.splice(index, 1);\n columns.splice(index, 0, updatedColumn);\n setColumns([...columns]);\n }\n }\n\n return (\n <>\n \n
\n Logo Settings
\n\n \n
\n
\n \n Customize Columns
\n\n
\n \n Tax Summary
\n\n
\n \n General Settings
\n\n
\n \n Header Customization
\n\n
\n \n Document title
\n\n
\n \n Organization
\n\n
\n \n Balance Due
\n\n
\n \n Bill To
\n\n
\n \n Ship To
\n\n
\n \n Header Image
\n\n
\n \n Font Customization
\n\n
\n \n Colors Customization
\n\n
\n \n Bank Notes
\n\n \n \n \n {withLogo === \"1\" ? 
: null}\n {customization.showCompanyAddress && (\n <>\n \n {locationInfo?.name ?? \"Name\"}\n \n \n {locationInfo?.address ?? \"No Address\"}\n \n \n )}\n \n \n \n \n {customization.showAddress && (\n \n {customization.showBillTo && (\n \n {customization.billToTitle ?? \"Bill To:\"}\n \n )}\n {invoiceDetail.length && invoiceDetail[0].bllingContactPerson && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].bllingContactPerson : \"\"}\n \n )}\n\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Name : \"NAN\"}\n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address : \"NAN\"}\n \n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address_2 : \"\"}\n \n )}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_City + \" \" + invoiceDetail[0].Customer_State + \", \" + (invoiceDetail[0].Customer_Country ?? \"\") + \" , \" + (invoiceDetail[0].Customer_Postal_Code ?? \"\") : \"NAN\"}\n \n ) : null}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Tax !== undefined ? (\n \n TRN: {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Tax : \"NAN\"}\n \n ) : null}\n {invoiceDetail.length > 0 && invoiceDetail[0].billingAddressPhoneno ? (\n \n Phone: {invoiceDetail.length > 0 ? invoiceDetail[0].billingAddressPhoneno : \"--\"}\n \n ) : null}\n \n \n )}\n \n \n {customization.shipToTitle ?? \"Shipping Address\"}\n \n\n {invoiceDetail.length && invoiceDetail[0].shippingContactPerson && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].shippingContactPerson : \"\"}\n \n )}\n\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address : \"NAN\"}\n \n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address_2 : \"NAN\"}\n \n )}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_City + \" \" + invoiceDetail[0].Customer_Shipping_State + \", \" + invoiceDetail[0].Customer_Shipping_Country + \" , \" + invoiceDetail[0].Customer_Shipping_Postal_Code : \"NAN\"}\n \n ) : null}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].shipingAddressPhoneno ? (\n \n Phone: {invoiceDetail.length > 0 ? invoiceDetail[0].shipingAddressPhoneno : \"--\"}\n \n ) : null}\n \n )}\n \n {!customization.showAddress &&
\n \n \n \n \n {(customization.reportTitle ?? \"SALE INVOICE\").toUpperCase()}\n \n \n \n \n\n \n
\n\n\n \n
\n\n {\n customization.showNotes &&\n \n }\n {customization.showNotes && (\n \n \n {props.pageNum} / {props.totalPages}\n \n
\n \n );\n };\n\n return (\n \n INV#\n {invoiceNo}\n
\n \n Date\n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].Date), (userData.previewDateFormat??tablesDateFormat).toLowerCase()) : \"NAN\"}\n \n
\n \n \n \n
\n \n\n {/*\n \n {state?.notes??customization.notes}\n \n
\n )}\n */}\n
\n
\n )}\n\n \n {\"Note:\"}\n
\n\n\n
0 ? state.notes : customization.notes).replace(/(?:\\r\\n|\\r|\\n)/g, \"
\") }} />\n \n
\n )}\n\n \n\n {customization.showTerms && (\n \") }} />\n \n
\n
\n \n \n \n );\n};\n\nexport default SalesReceiptInvoice;\n\n/*\n\nA predefined size. The supported paper sizes are: A0-A10, B0-B10, C0-C10, Executive, Folio, Legal, Letter, Tabloid.\n\n*/\n","import React, { useEffect, useState } from \"react\";\nimport { PDFExport } from \"@progress/kendo-react-pdf\";\nimport { Span } from \"../../../../../../components/Typography\";\nimport { Box, Grid, Stack } from \"@mui/material\";\nimport { Card, Col, Row } from \"reactstrap\";\nimport TableRow from \"@mui/material/TableRow\";\nimport TableCell from \"@mui/material/TableCell\";\nimport TableBody from \"@mui/material/TableBody\";\nimport Table from \"@mui/material/Table\";\nimport { makeStyles } from \"@material-ui/core\";\nimport { formatCurrency, formatDate, inWords } from \"../../../../../../utility/Utils\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {getDefaultData} from \"../../../../../../components/LocationBankSelector/store\";\nimport dateFormat from \"dateformat\";\nimport {tablesDateFormat} from \"../../../../../../utility/Utils\";\n\nconst useStyles = makeStyles({\n table: {\n borderCollapse: \"collapse\",\n tableLayout: \"fixed\",\n border: \"0.5pt solid black\",\n columnResizable: true,\n padding: 0,\n margin: 0,\n },\n tableRow: {\n borderCollapse: \"collapse\",\n height: 30,\n borderBottom: \"1px solid black\",\n borderTop: \"1px solid black\",\n overflowWrap: \"break-word\",\n },\n tableCell: {\n borderCollapse: \"collapse\",\n // borderBottom: '1px solid black',\n // borderTop: '1px solid black',\n },\n});\n\nconst SpreadSheetInvoice = ({ pdfExportComponent,userData, state, dummy, dummyCustomization, invoiceDetail, locationInfo, customCurrency, invoiceNo, taxDetail, withLogo, setWithLogo, dueDate, paidAmount, pageSize }) => {\n const store = useSelector((state) => state.saleInvoiceCustomization);\n const storeBank = useSelector((state) => state?.branchBanks);\n const advanceStore = useSelector((state) => state?.advanceSettings);\n\n const [xlHeadingFont, setXlHeadingFont] = useState(18);\n const [headingFont, setHeadingFont] = useState(14);\n const [labelFont, setLabelFont] = useState(9);\n const [smallFont, setSmallFont] = useState(6);\n const [tableContentFont, setTableContentFont] = useState(4);\n const [tableHeaderFont, setTableHeaderFont] = useState(4);\n const [customization, setCustomization] = useState({ logoSize: 180 });\n const [bank, setBank] = useState({});\n const [primaryColor, setPrimaryColor] = useState(\"#4b4b4b\");\n const [secondaryColor, setSecondaryColor] = useState(\"#4b4b4b\");\n const [columnsLength, setColumnsLength] = useState(10);\n const [mainColumns, setMainColumns] = useState([]);\n\n const dispatch = useDispatch();\n\n useEffect(() => {\n if (dummy) {\n setCustomization(dummyCustomization);\n } else {\n setCustomization(store.data);\n }\n if (store.data) {\n dispatch(getDefaultData({Recno: store.data.attachedBankDetails}));\n setWithLogo(store.data.showLogo ? \"1\" : \"2\");\n setHeadingFont(store.data.headingSize || 12);\n setLabelFont(store.data.labelSize || 9);\n setSmallFont(store.data.sublevelSize || 6);\n setTableContentFont(store.data.tableContantFontSize || 6);\n setTableHeaderFont(store.data.tableHeaderFontSize || 8);\n setXlHeadingFont(store.data.extraHeadingSize || 18);\n setPrimaryColor((store.data.primaryColor ?? \"dark\") === \"dark\" ? \"#4b4b4b\" : (store.data.primaryColor ?? \"dark\") === \"primary\" ? \"#3962c9\" : (store.data.primaryColor ?? \"dark\") === \"success\" ? \"#32d04c\" : store.data.primaryColor);\n setSecondaryColor((store.data.secondaryColor ?? \"dark\") === \"dark\" ? \"#4b4b4b\" : (store.data.secondaryColor ?? \"dark\") === \"primary\" ? \"#3962c9\" : (store.data.secondaryColor ?? \"dark\") === \"secondary\" ? \"#82868b\" : store.data.secondaryColor);\n let totalLength = 0;\n let tempColumns = [...(store.data.columns || [])];\n (tempColumns || []).map((e) => {\n let len = e.isShow ? e.columnsLength ?? 2 : 0;\n totalLength += len;\n });\n setMainColumns(tempColumns.sort((a, b) => (a.columnSeq ?? 0) - (b.columnSeq ?? 0)));\n setColumnsLength(totalLength);\n }\n }, [store.data, dummyCustomization]);\n\n useEffect(() => {\n setBank(storeBank.selectedBank);\n }, [storeBank.selectedBank]);\n\n const classes = useStyles();\n\n const PageTemplate = (props) => {\n return (\n <>\n {customization.showWaterMark && (\n \n {customization.termsTitle ?? \"Terms & Conditions\"}\n
\n\n0 ? customization?.termsFontSize : 6}pt`,\n paddingLeft: \"0pt\",\n textIndent: \"0pt\",\n textAlign: \"left\",\n lineHeight: 1.5,\n color: `${customization?.termsFontColor ?? \"#000000\"}`\n }}>\n
0 ? state.terms : customization.termsAndConditions).replace(/(?:\\r\\n|\\r|\\n)/g, \"
\") }} />\n \n
\n )}\n\n \n\n \n\n \n\n \") }} />\n \n
{customization.showWaterImage && 
}\n
\n )}\n {props.pageNum === props.totalPages && (\n \n \n\n {/*
\n 0 ? invoiceDetail[0].Code : \"Sale-Invoice\"}>\n \n {customization.showHeaderImage && customization.headerImage && (\n \n \n \n {customization.showOrgName && (\n \n {locationInfo?.name ?? \"Name\"}\n \n )}\n \n {locationInfo?.address ?? \"No Address\"}\n \n {locationInfo?.address2 && (\n \n {locationInfo?.address2 ?? \"No Address\"}\n \n )}\n {(locationInfo?.city || locationInfo?.country) && (\n \n {locationInfo?.city ?? \"\"}, {locationInfo?.country ?? \"\"}\n \n )}\n {locationInfo?.contactNo && (\n \n Phone: {locationInfo?.contactNo}\n \n )}\n {locationInfo?.email && (\n \n Email: {locationInfo?.email}\n \n )}\n {locationInfo?.web && (\n \n Web: {locationInfo?.web}\n \n )}\n {customization.showOrgTaxNo && (\n \n TRN: {locationInfo?.taxNo}\n \n )}\n
\n )}\n \n
\n \n \n {(customization.reportTitle??\"SALE INVOICE\").toUpperCase()}\n \n \n # {invoiceNo}\n \n \n Balance Due\n */}\n \n {customization.showDocumentTitle && (\n \n {(customization.reportTitle ?? \"SALE INVOICE\").toUpperCase()}\n \n )}\n \n # {invoiceNo}\n \n \n
\n \n {customization.showBalanceDue && (\n <>\n\n Balance Due\n \n \n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n \n
\n \n \n )}\n \n \n
\n\n \n {customization.showAddress && (\n \n {customization.showBillTo && (\n \n {customization.billToTitle ?? \"Bill To:\"}\n \n )}\n {invoiceDetail.length && invoiceDetail[0].bllingContactPerson && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].bllingContactPerson : \"\"}\n \n )}\n\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Name : \"NAN\"}\n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address : \"NAN\"}\n \n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address_2 : \"\"}\n \n )}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_City + \" \" + invoiceDetail[0].Customer_State + \", \" + (invoiceDetail[0].Customer_Country ?? \"\") + \" , \" + (invoiceDetail[0].Customer_Postal_Code ?? \"\") : \"NAN\"}\n \n ) : null}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Tax !== undefined ? (\n \n TRN: {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Tax : \"NAN\"}\n \n ) : null}\n \n \n )}\n \n \n {customization.shipToTitle ?? \"Shipping Address\"}\n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address : \"NAN\"}\n \n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address_2 : \"NAN\"}\n \n )}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_City + \" \" + invoiceDetail[0].Customer_Shipping_State + \", \" + invoiceDetail[0].Customer_Shipping_Country + \" , \" + invoiceDetail[0].Customer_Shipping_Postal_Code : \"NAN\"}\n \n ) : null}\n \n )}\n \n {!customization.showAddress && \n \n Invoice Date :{\" \"}\n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].Date), (userData.previewDateFormat??tablesDateFormat).toLowerCase()) : \"NAN\"}\n \n \n \n Terms :{\" \"}\n \n {\" \"}\n {invoiceDetail.length > 0 ? invoiceDetail[0].creditTerms ?? \"N/A\" : \"N/A\"}\n \n \n\n \n Due on :{\" \"}\n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].creditDueDate ?? invoiceDetail[0].Date), (userData.previewDateFormat??tablesDateFormat).toLowerCase()) : \"\"}\n \n \n {\n invoiceDetail.length > 0 && invoiceDetail[0].customerInvoiceNo &&\n \n PO# :{\" \"}\n \n {\" \"}\n {invoiceDetail.length > 0 ? invoiceDetail[0].customerInvoiceNo : \"\"}\n \n \n }\n \n \n
\n\n \n \n
\n \n
\n\n \n \n Taxable Amount\n \n \n \n {formatCurrency(state.totalAmount, customCurrency)}\n \n \n
\n )}\n\n {customization.showTaxableAmount && (\n \n \n Total VAT\n \n \n \n {formatCurrency(state.totalTaxSummary, customCurrency)}\n \n \n
\n )}\n\n {state.spDiscount > 0 && (\n \n \n Discount\n \n \n \n {formatCurrency(state.spDiscount, customCurrency)}\n \n \n
\n )}\n\n {customization.showFreight > 0 && (\n \n \n Freight\n \n \n \n {formatCurrency(invoiceDetail.length > 0 ? invoiceDetail[0].Invoice_Frieght ?? 0 : 0, customCurrency)}\n \n \n
\n )}\n\n {customization.showTaxableAmount && (\n \n \n {\"Total Amount\"}\n \n \n \n {formatCurrency(invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0, customCurrency)}\n \n \n
\n )}\n\n {customization.showTotal && (\n \n \n Total In Words:\n \n )}\n \n \n {inWords(invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0, customCurrency)}\n \n )}\n \n \n {customization.totalTitle ?? \"Balance Due\"}\n \n \n \n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n \n
\n )}\n\n \n \n {customization.taxSummaryTableTitle ?? \"Tax Summary\"}\n \n
\n\n \n 
\n
\n )}\n \n \n {customization.showBalanceDue && (\n <>\n
\n \n \n )}\n
\n
\n
\n
\n
\n
\n
{customization.bankNotesTitle ?? \"Bank Detail\"}
\n\n\n Account Title:\n {\" \" + (bank?.banckAccountTitle??\"\")}\n
\n\n \n A/c No:\n {\" \" + (bank?.bankAccountNo??\"\")}\n
\n\n \n IBAN:\n {\" \" + (bank?.bankIBAN??\"\")}\n
\n\n \n Bank:\n {\" \" + (bank?.bankName??\"\" + \" \")}\n
\n\n \n Swift Code:\n {\" \" + (bank?.bankSwiftCode ?? \"\")}\n
\n\n \n Branch:\n {\" \" + (bank?.bankBranchName ??\"\")}\n
\n \n )}\n\n {customization.showSalesman && (\n \n {customization?.salesmanTitle ?? \"Salesman\"}: 0 ? customization.salesmanFontSize : 6}pt`,\n fontWeight: \"normal\",\n color: `${customization.salesmanFontColor ?? \"#000000\"}`\n }}>\n {invoiceDetail.length > 0 ? invoiceDetail[0].SalesMan_Name : \"\"}\n \n
\n )}\n\n {customization.showNotes && (\n <>\n\n {\"Note:\"}\n
\n\n\n
\") }} />\n \n \n )}\n\n {customization.showTerms && (\n <>\n\"),\n }}\n />\n \n \n )}\n\n {(customization.showSignature || customization.showStamp) && (\n <>\n
{customization.signatureTitle ?? \"Signature\"}
\n }\n {\n customization.showSignature &&\n\n \n\n
\n }\n {customization.signatureImage && 
}
\n \n
\n )}\n \n )}\n\n {customization.showApprovalLevels && invoiceDetail.length > 0 && (\n {customization.stampImage && 
}\n
\n \n
\n \n }\n {\n invoiceDetail[0].isVerified &&\n {`${advanceStore.approval_data.salesFirstApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].Approved_By} `}
\n\n\n
\n \n }\n {\n invoiceDetail[0].isApprovedLvl3 &&\n {`${advanceStore.approval_data.salesSecondApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].Verified_By} `}
\n\n\n
\n \n }\n {\n invoiceDetail[0].isApprovedLvl4 &&\n {`${advanceStore.approval_data.salesThirdApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].approvedByLvl3??\"\"} `}
\n\n\n
\n \n }\n {`${advanceStore.approval_data.salesForthApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].approvedByLv43??\"\"} `}
\n\n\n 
\n
\n )}\n \n {customization.showWaterImage && }\n
\n )}\n {props.pageNum === props.totalPages && (\n \n \n\n {/*
\n 0 ? invoiceDetail[0].Code : \"Sale-Invoice\"}>\n \n {customization.showHeaderImage && customization.headerImage && (\n \n \n \n {customization.showOrgName && (\n \n {locationInfo?.name ?? \"Name\"}\n \n )}\n \n {locationInfo?.address ?? \"No Address\"}\n \n {locationInfo?.address2 && (\n \n {locationInfo?.address2 ?? \"No Address\"}\n \n )}\n {(locationInfo?.city || locationInfo?.country) && (\n \n {locationInfo?.city ?? \"\"}, {locationInfo?.country ?? \"\"}\n \n )}\n {locationInfo?.contactNo && (\n \n Phone: {locationInfo?.contactNo}\n \n )}\n {locationInfo?.web && (\n \n Web: {locationInfo?.web}\n \n )}\n {customization.showOrgTaxNo && (\n \n TRN: {locationInfo?.taxNo}\n \n )}\n
\n )}\n \n
\n \n \n {(customization.reportTitle??\"SALE INVOICE\").toUpperCase()}\n \n \n # {invoiceNo}\n \n \n Balance Due\n */}\n \n {customization.showDocumentTitle && (\n \n {(customization.reportTitle ?? \"SALE INVOICE\").toUpperCase()}\n \n )}\n \n # {invoiceNo}\n \n \n
\n \n {customization.showBalanceDue && (\n <>\n\n Balance Due\n \n \n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n \n
\n \n \n )}\n \n \n
\n\n \n {customization.showAddress && (\n \n {customization.showBillTo && (\n \n {customization.billToTitle ?? \"Bill To:\"}\n \n )}\n {invoiceDetail.length && invoiceDetail[0].bllingContactPerson && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].bllingContactPerson : \"\"}\n \n )}\n\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Name : \"NAN\"}\n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address : \"NAN\"}\n \n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address_2 : \"\"}\n \n )}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_City + \" \" + invoiceDetail[0].Customer_State + \", \" + (invoiceDetail[0].Customer_Country ?? \"\") + \" , \" + (invoiceDetail[0].Customer_Postal_Code ?? \"\") : \"NAN\"}\n \n ) : null}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Tax !== undefined ? (\n \n TRN: {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Tax : \"NAN\"}\n \n ) : null}\n \n \n )}\n \n \n {customization.shipToTitle ?? \"Shipping Address\"}\n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address : \"NAN\"}\n \n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address_2 : \"NAN\"}\n \n )}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_City + \" \" + invoiceDetail[0].Customer_Shipping_State + \", \" + invoiceDetail[0].Customer_Shipping_Country + \" , \" + invoiceDetail[0].Customer_Shipping_Postal_Code : \"NAN\"}\n \n ) : null}\n \n )}\n \n {!customization.showAddress && \n \n Invoice Date :{\" \"}\n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].Date), (userData.previewDateFormat ?? tablesDateFormat).toLowerCase()) : \"NAN\"}\n \n \n \n Terms :{\" \"}\n \n {\" \"}\n {invoiceDetail.length > 0 ? invoiceDetail[0].creditTerms ?? \"N/A\" : \"N/A\"}\n \n \n \n Due on :\n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].creditDueDate ?? invoiceDetail[0].Date), (userData.previewDateFormat ?? tablesDateFormat).toLowerCase()) : \"\"}\n \n \n\n {\n invoiceDetail.length > 0 && invoiceDetail[0].Work_Order_Name &&\n \n Project :{\" \"}\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Work_Order_Name ? invoiceDetail[0].Work_Order_Name : \"---\" : \"\"}\n \n \n }\n\n {\n customization.showClass && invoiceDetail.length > 0 && invoiceDetail[0].Cost_Center_Name &&\n \n Class :\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Cost_Center_Name ? invoiceDetail[0].Cost_Center_Name : \"---\" : \"\"}\n \n \n }\n \n \n
\n\n \n
\n \n \n Taxable Amount\n \n \n \n {formatCurrency(state.totalAmount, customCurrency)}\n \n \n
\n )}\n\n {customization.showTaxableAmount && (\n \n \n {t(\"Total VAT\")}\n \n \n \n {formatCurrency(state.totalTaxSummary, customCurrency)}\n \n \n
\n )}\n\n {state.spDiscount > 0 && (\n \n \n Discount\n \n \n \n {formatCurrency(state.spDiscount, customCurrency)}\n \n \n
\n )}\n\n {customization.showFreight > 0 && (\n \n \n Freight\n \n \n \n {formatCurrency(invoiceDetail.length > 0 ? invoiceDetail[0].Invoice_Frieght ?? 0 : 0, customCurrency)}\n \n \n
\n )}\n\n {customization.showTaxableAmount && (\n \n \n {\"Total Amount\"}\n \n \n \n {formatCurrency(invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0, customCurrency)}\n \n \n
\n )}\n\n {customization.showTotal && (\n \n \n Total In Words:\n \n )}\n \n \n {inWords(invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0, customCurrency)}\n \n )}\n \n \n {customization.totalTitle ?? \"Balance Due\"}\n \n \n \n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n \n
\n )}\n\n\n \n \n {customization.taxSummaryTableTitle ?? \"Tax Summary\"} {customCurrency?.code !== defaultCurrency?.code ? `(1 ${customCurrency?.code??\"\"} = ${customCurrency?.conversionRate} ${defaultCurrency?.code??\"\"})` : ''}\n \n
\n\n \n \n
\n )}\n \n \n {customization.showBalanceDue && (\n <>\n
\n \n \n )}\n
\n
\n
\n
\n
\n
\n
\n
\n )}\n\n {customization.showSalesman && (\n {customization.bankNotesTitle ?? \"Bank Detail\"}
\n\n\n Account Title:\n {\" \" + (dummy ? `${process.env.REACT_APP_NAME}` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].banckAccountTitle : \"\") : bank?.banckAccountTitle ?? \"\"))}\n
\n\n \n A/c No:\n {\" \" + (dummy ? `1234 5678 9012 1234` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankAccountNo : \"\") : (bank?.bankAccountNo ?? \"\")))}\n
\n\n \n IBAN:\n {\" \" + (dummy ? `AM 01 BG 1234 5678 9012 1234` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankIBAN : \"\") : bank?.bankIBAN ?? \"\"))}\n
\n\n \n Bank:\n {\" \" + (dummy ? `ABC` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankName : \"\") : (bank?.bankName ?? \"\" + \" \")))}\n
\n\n \n Swift Code:\n {\" \" + (dummy ? `X-1234` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankSwiftCode : \"\") : bank?.bankSwiftCode ?? \"\"))}\n
\n\n \n Branch:\n {\" \" + (dummy ? `XYZ` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankBranchName : \"\") : bank?.bankBranchName ?? \"\"))}\n
\n \n {customization?.salesmanTitle ?? \"Salesman\"}: 0 ? customization.salesmanFontSize : 6}pt`,\n fontWeight: \"normal\",\n color: `${customization.salesmanFontColor ?? \"#000000\"}`\n }}>\n {invoiceDetail.length > 0 ? invoiceDetail[0].SalesMan_Name : \"\"}\n \n
\n )}\n\n {customization.showNotes && (\n <>\n\n {\"Note:\"}\n
\n\n\n
\"),\n }}\n />\n \n \n )}\n\n {(customization.showSignature || customization.showStamp) && (\n <>\n
{customization.signatureTitle ?? \"Signature\"}
\n }\n {\n customization.showSignature &&\n\n \n\n
\n }\n {customization.signatureImage && }
\n \n
\n )}\n \n )}\n\n {customization.showApprovalLevels && invoiceDetail.length > 0 && (\n {customization.stampImage &&\n }\n
\n \n
\n \n }\n {\n invoiceDetail[0].isVerified &&\n {`${advanceStore.approval_data.salesFirstApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].Approved_By} `}
\n\n\n
\n \n }\n {\n invoiceDetail[0].isApprovedLvl3 &&\n {`${advanceStore.approval_data.salesSecondApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].Verified_By} `}
\n\n\n
\n \n }\n {\n invoiceDetail[0].isApprovedLvl4 &&\n {`${advanceStore.approval_data.salesThirdApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].approvedByLvl3 ?? \"\"} `}
\n\n\n
\n \n }\n {`${advanceStore.approval_data.salesForthApprovalLevelHeading}:`}
\n\n{` ${invoiceDetail[0].approvedByLvl4 ?? \"\"} `}
\n\n\n \n
\n )}\n\n \n \n \n \n
\n )\n}\n\n\nexport default InvoiceExportsDialog\n","// ** React Imports\nimport * as React from 'react'\nimport {useEffect, useState} from 'react'\n\n// ** Reactstrap Imports\nimport {Button, Card, CardBody, Col, Form, Input, InputGroup, Label, Row} from 'reactstrap'\nimport {useTranslation} from \"react-i18next\";\nimport {Edit3, Save, Settings} from \"react-feather\";\nimport {useCan} from '@hooks/useCan'\nimport axios from 'axios'\n\nimport {useDispatch} from \"react-redux\";\nimport {getData} from '../store';\nimport {fireMessage} from \"@src/components/MessageModel\";\nimport {CompanyLogoProvider} from \"../../../../utility/context/invoices/CompanyLogoContext\";\nimport UploadCompanyLogoDialog from \"../../company-edit/UploadCompanyLogo\";\nimport classnames from \"classnames\";\nimport {Box} from \"@mui/material\";\nimport {useCompanyLogo} from \"../../../../utility/hooks/invoice/useCompanyLogo\";\n\nconst GeneralSettings = ({ data, customization, preview = false, getLocation, setLocationInfo, getTemplateData}) => {\n const { t } = useTranslation()\n const [loading, setLoading] = useState(false);\n const [state, setState] = useState({...data, ...customization});\n const [logoSize, setLogoSize] = useState(customization.logoSize || 180);\n const [columns, setColumns] = useState([]);\n const ability = useCan()\n const dispatch = useDispatch()\n const [open, setOpen] = React.useState(false);\n const [file, setFile] = useState();\n const [sendFile, setSendFile] = useState();\n const { uploadFile } = useCompanyLogo();\n\n\n const handleClickOpen = () => {\n setOpen(true);\n };\n\n const handleClose = async () => {\n let loc = await getLocation();\n setLocationInfo(loc)\n setState({...state, logo: `${loc?.logo}`});\n setOpen(false);\n };\n\n\n const handleUploadClick = async event => {\n let file = event.target.files[0];\n\n const reader = new FileReader();\n reader.readAsDataURL(file);\n\n reader.onloadend = function(e) {\n let uploadFile = reader.result;\n setFile(uploadFile);\n setSendFile(file);\n }.bind(this);\n };\n\n const handleCloseUpload = async (e) => {\n e.preventDefault();\n setLoading(true);\n\n try{\n if(sendFile !== undefined) {\n const formData = new FormData();\n formData.set(\"objfile\", sendFile, \"objfile\");\n formData.set(\"FormType\", \"TEMPLATE_SIGNS\");\n formData.set(\"Recno\", state?.recno ?? 1);\n let res = await uploadFile(formData)\n if ((res?.data?.list ?? []).length > 0) {\n state.signatureImage = res.data.list[0].path ?? \"\";\n }\n }\n let response = await axios.post('/InvoicePreviewCustomization/UpdatePackingListCustomization', state)\n fireMessage(\"Signature changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n } catch (e) {\n fireMessage(e, \"Error\", 'error');\n } finally {\n setLoading(false);\n }\n }\n\n // ** Hooks\n useEffect(() => {\n setLogoSize(customization.logoSize || 180)\n setState(state => ({...state, ...customization}))\n let tempCols = [...(customization.columns || [])];\n setColumns(tempCols.sort((oldSeq, newSeq) => oldSeq.columnSeq - newSeq.columnSeq));\n }, [customization]);\n\n const handleChange = (updated) => {\n setState( state => ({...state, ...updated}))\n }\n\n const onSubmitLogo = async (e) => {\n e.preventDefault();\n state.logoSize = parseFloat(`${logoSize}`);\n setLoading(true);\n try{\n await axios.post('/InvoicePreviewCustomization/UpdatePackingListCustomization', state)\n fireMessage(\"Logo sized changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n if(getTemplateData){\n getTemplateData()\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoading(false);\n }\n }\n\n const onSubmit = async (e) => {\n e.preventDefault();\n state.columns = columns;\n setLoading(true);\n try{\n await axios.post('/InvoicePreviewCustomization/UpdatePackingListCustomization', state)\n fireMessage(\"Setting changed successfully\", \"Successful\", 'success');\n dispatch(getData());\n if(getTemplateData){\n getTemplateData()\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoading(false);\n }\n }\n\n return (\n <>\n \n setOpen(!open)} className='modal-dialog-centered'>\n setOpen(!open)}>{type === 'invoice' ? t(\"Export Invoice\") : t(\"Export Bills\")} \n \n \n \n handlePicker('DateFrom', value)}\n />\n \n handlePicker('DateTo', value)}\n />\n \n\n {\n type === 'invoice' ?\n \n \n {t(\"Status\")}\n \n \n \n }\n\n {\n type === 'invoice' ?\n \n \n {t(\"Export Type\")}\n \n \n \n\n
\n \n \n \n {\n isLoading ?\n :\n \n }\n \n \n
\n {type === 'invoice' ? t(\"Export invoice and apply filters to export accordingly.\") : t(\"Export bills and apply filters to export accordingly.\")}
\n\n
\n Logo Settings
\n\n \n
\n
\n \n Header Customization
\n\n
\n \n Signatures
\n\n
\n
\n Logo Settings
\n\n \n
\n
\n \n Customize Columns
\n\n
\n \n General Settings
\n\n
\n \n Stamp
\n\n
\n \n Watermark
\n\n
\n \n Signatures
\n\n
\n \n Footer Customization
\n\n
\n \n Font Customization
\n\n
\n \n Colors Customization
\n\n
Branch: {locationInfo?.name}
\n{\"Packing Slip\"}
\n\n \n \n \n \n \n \n handleClickOpen()}\n style={{width: '100%'}}>Change Logo \n handleChangeWithLogo()}\n style={{width: '100%'}}>{withLogo === \"1\" ? \"Hide Logo\" : \"Show Logo\"} \n toggleOpenCustomization()}\n style={{width: '100%'}}>Preferences \n \n \n
\n\n \n {\n advanceStore.data.enableExportPackingSlip &&\n {\n setShowExportPS(e.target.value !== 'Simple');\n }}\n value={showExportPS ? \"Export\" : \"Simple\"}\n >\n \n \n \n }\n
\n \n \n \n \n \n {locationInfo?.name ?? \"Company Name\"}\n \n {\n customization.showBillTo && (\n \n To: {packingSlipDetail?.customerName ?? \"\"}\n {packingSlipDetail?.customerAddress ?? \"\"} {packingSlipDetail?.customerCity ?? \"\"}, {packingSlipDetail?.customerCountry ?? \"\"}, {packingSlipDetail?.customerPostalCode ?? \"\"}\n \n )\n }\n
\n )}\n \n
\n \n
\n \n\n \n \n\n \n \n Invoice No : {packingSlipDetail?.code ?? \"\"} \n \n Date : {packingSlipDetail?.sDate ? new Date().toDateString(packingSlipDetail?.sDate) : \"\"} \n \n Delivery Terms : {packingSlipDetail?.deliveryTerms ?? \"\"} \n \n Payment Terms : {packingSlipDetail?.creditTerms ?? \"\"} \n \n LC No : {packingSlipDetail?.lcno ?? \"\"} \n \n LC Date of Issue : {packingSlipDetail?.lcDateOfIssue ? new Date(packingSlipDetail?.lcDateOfIssue).toDateString() : \"\"} \n \n \n \n \n Port of Loading : {packingSlipDetail?.portOfLoading ?? \"\"} \n \n \n \n\n Port of Discharge : {packingSlipDetail?.portOfDischarge ?? \"\"} \n \n \n \n\n \n
\n \n \n \n )}\n
\n \n \n Packing List\n \n
\n \n
\n
\n
Terms & Conditions
\n\n\n
{customization.signatureTitle ?? \"Signature\"}
\n\n \n\n
\n {customization.signatureImage &&\n 
}
\n \n {customization.showHeaderImage && customization.headerImage &&\n \n \n
}\n \n \n {customization.showBalanceDue && (\n <>\n Balance Due\n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n
\n \n \n )}\n
\n
\n
Terms & Conditions
\n\n\n
{customization.signature ?? \"Signature\"}
\n\n \n\n
\n {customization.signatureImage &&\n }
\n \n
\n Logo Settings
\n\n \n
\n
\n \n Header Customization
\n\n
\n \n Signatures
\n\n
Branch: {locationInfo?.name}
\n{invoiceDetail.length > 0 ? invoiceDetail[0].Code : \"NAN\"}
\n\n \n \n \n \n \n \n handleClickOpen()}\n style={{width: '100%'}}>Change Logo \n handleChangeWithLogo()}\n style={{width: '100%'}}>{withLogo === \"1\" ? \"Hide Logo\" : \"Show Logo\"} \n toggleOpenCustomization()}\n style={{width: '100%'}}>Preferences \n \n \n
\n\n \n {customization.showHeaderImage && customization.headerImage && \n \n
}\n \n \n {customization.showBalanceDue && (\n <>\n Balance Due\n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n
\n \n \n )}\n
\n\n
Terms & Conditions
\n\n\n
{customization.signature ?? \"Signature\"}
\n\n \n\n
\n {customization.signatureImage && 
}
\n \n
\n \n Stamp
\n\n
\n \n Watermark
\n\n
\n \n Taxable, Total, Discount Amount
\n\n
\n \n Balance Due
\n\n
\n \n Salesman
\n\n
\n \n Signatures
\n\n
\n \n Approvals
\n\n
\n \n Footer Customization
\n\n
\n \n Footer Image
\n\n openAttachment(e)} >\n \n {filename}\n */}\n
\n )\n}\n\nconst ModalAttachment = ({ recno, attachments, setAttachments, tempAttachments, setTempAttachments, formType, onAttachmentRemoved, onAttachmentAdd, modifyDisabled, API_URL, ...props }) => {\n const [tempFiles, setTempFiles] = useState([])\n const [showDelete, setShowDelete] = useState(false)\n const [selectedAttachment, setSelectedAttachment] = useState()\n const [loading, setLoading] = useState(false);\n\n const {t} = useTranslation();\n\n const deleteAttachments = async (attachment) => {\n try {\n const data = await service.Delete(`/FileUpload/${attachment.recno}`)\n if (data.isSuccessFull) {\n setAttachments(attachments => attachments.filter(a => a.recno !== attachment.recno))\n }\n } catch (error) {\n await fireMessage(error, t(\"Attachment Error...\"), 'error')\n }\n }\n\n const uploadAttachment = async (file) => {\n try {\n setLoading(true);\n const formData = new FormData()\n formData.append('FormType', formType)\n formData.append('Recno', recno)\n formData.append(\"objfile\", file, file.name)\n const response = await service.Post('/FileUpload', formData)\n setAttachments(attachments => [...attachments, ...response.data.list])\n setLoading(false);\n } catch (error) {\n setLoading(false);\n await fireMessage(error, t(\"Attachment Error...\"), 'error')\n }\n }\n\n const handleAttachment = e => {\n if (!e.target.files.length) {\n return\n }\n const maxSizeInBytes = parseInt(process.env.REACT_APP_FILE_SIZE??800) * 1024; // 1 MB (adjust as needed)\n const fileSize = e.target.files[0].size;\n\n if(fileSize > maxSizeInBytes){\n fireMessage(t('File should be less than 800kb' ), t(\"Attachment Error...\"), 'error')\n return;\n }\n\n const file = e.target.files[0]\n\n if (!!formType && !!recno) {\n uploadAttachment(file)\n } else {\n const reader = new FileReader()\n reader.onload = () => setTempAttachments(attachments => [...attachments, reader.result])\n reader.readAsDataURL(file)\n setTempFiles(files => [...files, file])\n if (onAttachmentAdd) {\n onAttachmentAdd(file)\n }\n }\n }\n\n const handleAttachmentRemove = async (attachment, index) => {\n if (attachment) {\n setSelectedAttachment(attachment);\n setShowDelete(true);\n } else if (index >= 0) {\n setTempAttachments(attachments => attachments.filter((a, ix) => ix !== index))\n setTempFiles(attachments => attachments.filter((a, ix) => ix !== index))\n onAttachmentRemoved(index)\n }\n }\n\n const getFileSize = () => {\n if(parseInt(process.env.REACT_APP_FILE_SIZE??800) > 1000) {\n return `${parseInt(process.env.REACT_APP_FILE_SIZE??800)/1000}Mb`\n }else if(parseInt(process.env.REACT_APP_FILE_SIZE??800) > 1000) {\n return `${parseInt(process.env.REACT_APP_FILE_SIZE??800)}kb`\n }\n }\n\n return (\n \n {isImage ? 
: (\n
\n \n {/*\n\n props.setHide()} className='modal-dialog-centered'>\n props.setHide()}>{t(\"Attachments\")} \n \n\n \n \n \n \n\n setShowDelete(false)} className='modal-dialog-centered'>\n setShowDelete(false)}>{t(\"Attachments\")} \n \n {t(\"This action will remove the attachment. Are you sure you want to proceed?\")}\n \n \n \n \n\n
\n )\n}\n\nexport default ModalAttachment\n","import React from 'react';\n\n// ** Third Party Imports\nimport {useTranslation} from \"react-i18next\";\nimport {useDropzone} from \"react-dropzone\";\n\n// ** React Feather Imports\nimport {Upload} from \"react-feather\";\n\n// ** Custom Component Imports\nimport {fireMessage} from \"../../../components/MessageModel\";\n\n\nconst SingleFileUpload = ({setFiles, files}) => {\n const {t} = useTranslation();\n\n const { getRootProps, getInputProps } = useDropzone({\n multiple: false,\n onDrop: acceptedFiles => {\n const filteredFiles = acceptedFiles.filter((file) => {\n if (file.size <= (parseInt(process.env.REACT_APP_FILE_SIZE??800) * 1024)) { // 800KB in bytes\n return true;\n } else {\n fireMessage(t(`File should be less than ${getFileSize()}` ), t(\"Attachment Error...\"), 'error')\n\n return false;\n }\n });\n\n if(filteredFiles.length < 1 ){\n return\n }\n\n setFiles([...files, ...acceptedFiles.map(file => Object.assign(file))])\n }\n })\n\n\n\n const getFileSize = () => {\n if(parseInt(process.env.REACT_APP_FILE_SIZE??800) > 1000) {\n return `${parseInt(process.env.REACT_APP_FILE_SIZE??800)/1000}Mb`\n }else if(parseInt(process.env.REACT_APP_FILE_SIZE??800) > 1000) {\n return `${parseInt(process.env.REACT_APP_FILE_SIZE??800)}kb`\n }\n }\n\n return (\n \n {attachments.map((attachment, key) => (\n
\n \n handleAttachmentRemove(attachment, key)} />\n }\n
\n ))}\n {tempAttachments.map((attachment, key) => (\n \n handleAttachmentRemove(null, key)} />\n }\n
\n ))}\n\n {\n loading && \n
\n }\n\n \n {(\n
\n {t(\"loading...\")}
\n\n {!modifyDisabled &&\n
\n \n \n
\n }\n {t(`Allowed max size of ${getFileSize()}`)}
\n\n\n \n\n\n \n\n
\n \n
\n \n )\n}\n\nexport default SingleFileUpload","import {Grid, Stack} from \"@mui/material\";\nimport {formatCurrency, tablesDateFormat} from \"../../../../../utility/Utils\";\nimport dateFormat from \"dateformat\";\n\nexport const collapseColumns = (ability, symbol, columList, handleRowClick,defaultCurrency, userData, t) => {\n\n const list = [\n {\n name: t(\"Invoice Detail\"),\n sortable: true,\n // selector: (row, index) => index,\n cell: (row) => Drop File here or click to upload
\n\n {t(\"Invoice Payments\")}\n {\n let popOversOpen = [];\n for (let i = 0; i < openPopovers.length; i++) {\n popOversOpen.push(false);\n }\n setOpenPopOvers(popOversOpen);\n }}\n />\n
\n \n {t(\"Action\")}\n \n \n \n
,\n width: \"133px\",\n classNames: \"sticky-column\",\n conditionalCellStyles: [\n {\n when: () => true,\n classNames: [\"sticky-column\"],\n },\n ],\n cell: (row) => (\n \n handleRowClick(row, false)} id={`pw-tooltip-${row.recno}`}>\n \n \n\n \n {t(\"View\")}\n \n {ability.can(\"edit\", \"SalesInvoices\") && (\n <>\n \n \n \n \n {t(\"Edit\")}\n \n \n )}\n \n \n \n \n \n handleRowClick(row, true)}>\n \n {t(\"Download\")}\n \n\n handleRowClick(row)}>\n \n {t(\"Preview\")}\n \n PackingSlip(row)}>\n \n {t(\"Packing Slip\")}\n \n DelieryNote(row)}>\n \n {t(\"Delivery Note\")}\n \n\n {\n ability.can('new', 'DeliveryNotes') &&\n \n \n \n {t(\"Convert to Delivery Notes\")}\n \n \n }\n\n {\n ability.can('new', 'SalesReturnInvoices') &&\n \n \n \n {t(\"Convert to Return\")}\n \n \n }\n {row.status?.toLowerCase() !== \"paid\" && ability.can('new', 'Recoveries') && (\n handleReceiving(row)}>\n \n {t(\"Receivings\")}\n \n )}\n {ability.can(\"edit\", \"SalesInvoices\") && (\n handleVoidInvoice(row)}>\n \n {t(\"Void\")}\n \n )}\n\n {ability.can(\"delete\", \"SalesInvoices\") && (\n handleDeleteInvoice(row)}>\n \n {t(\"Delete\")}\n \n )}\n {\n ability.can('new', 'SalesInvoices') &&\n \n \n {t(\"Duplicate Invoice\")}\n \n }\n \n \n
\n ),\n },\n ];\n};\n","import {Grid, Stack} from \"@mui/material\";\nimport {formatCurrency, formatDate} from \"../../../../../utility/Utils\";\nimport {\n Badge, PopoverBody,\n PopoverHeader,UncontrolledPopover,\n} from \"reactstrap\";\n\nexport const quickColumns = (ability,defaultCurrency) => {\n const list = [\n {\n name: \"Date\",\n minWidth: '120px',\n maxWidth: '120px',\n sortable: false,\n // selector: (row, index) => index,\n cell: (row) => (\n {formatDate(new Date(row.sDate))}\n )\n },\n {\n name: \"Invoice#\",\n sortable: false,\n minWidth: '140px',\n maxWidth: '140px',\n // selector: (row, index) => index,\n cell: (row) => (\n {row.code}\n )\n },\n {\n name: \"Customer\",\n sortable: false,\n minWidth: '180px',\n maxWidth: '180px',\n // selector: (row, index) => index,\n cell: (row) => (\n {row?.customer}\n )\n },\n {\n name: \"Status\",\n sortable: false,\n minWidth: '130px',\n maxWidth: '130px',\n // selector: (row, index) => index,\n cell: (row) => (\n <>\n \n \n \n {t(\"Salesman\")}\n \n \n \n\n handlePicker('CreatedDateFrom', value)}\n dateFormat={userData.dateFormat??tablesDateFormat}\n />\n\n \n handlePicker('CreatedDateTo', value)}\n dateFormat={userData.dateFormat??tablesDateFormat}\n />\n\n \n \n \n
\n
\n \n \n \n -\n \n
\n \n \n \n \n
\n \n )\n}\n\nexport default SearchBar","// ** React Imports\nimport React, { useEffect, useRef, useState } from \"react\";\n\n// ** Styles\nimport \"@styles/react/apps/app-invoice.scss\";\nimport \"@styles/react/libs/tables/react-dataTable-component.scss\";\n\n// ** Store & Action\nimport { useCan } from \"@hooks/useCan\";\nimport BlockingUI from \"@src/components/BlockingUI\";\nimport canWrapper from \"@wrappers/canWrapper\";\nimport { useAppDefaults } from \"@hooks/useAppDefaults\";\n\n//** React feather icons\nimport {ChevronDown, PlusSquare, X} from \"react-feather\";\n\n// ** Third Party Components\nimport ReactPaginate from \"react-paginate\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { Link, useHistory } from \"react-router-dom\";\nimport axios from \"axios\";\n\n// ** Reactstrap Imports\nimport {Button, Card, CardHeader, Input, InputGroup, InputGroupText} from \"reactstrap\";\n\n// ** Store & Actions\nimport { getData, getColumns } from \"../store\";\n\nimport { getBank, getData as getCustomizationData } from \"../../../invoice-customization/store\";\nimport { getData as getPackingCustomizationData } from \"../../../saleInvoice-packingSlip-customization/store\";\nimport { getData as getExportPackingCustomizationData } from \"../../../invoice-export-packing-customization/store\";\nimport { SalesInvoiceProvider } from \"@src/utility/context/invoices/SalesInvoiceContext\";\n\n// ** Table Columns\nimport DataTable from \"react-data-table-component\";\nimport { collapseColumns } from \"./collapseColumn\";\nimport { comColumns } from \"./comColumns\";\nimport { quickColumns } from \"./quickColumns\";\nimport Icon from '@components/icon';\n\n//** MUI imports\nimport { FilterAlt } from \"@mui/icons-material\";\nimport {Grid, Stack} from \"@mui/material\";\n\n//** Custom imports\nimport SearchBar from \"../shared-sidebar/SearchBar\";\nimport SimpleCustomerSelector_v2 from '@src/components/SimpleCustomerSelector_v2'\nimport PackingInvoiceTemplate from \"../print/PackingInvoiceTemplate\";\nimport DeliveryInvoiceTemplate from '../print/DeliveryInvoiceTemplate'\nimport VoidInvoiceModal from \"../../../purchases/vendor-invoice/modal/VoidInvoiceModal\";\nimport { fireMessage } from \"@src/components/MessageModel\";\nimport InvoiceTemplate from \"@src/views/apps/sales/customer-invoice/print/InvoiceTemplate\";\n\n//** Translation\nimport { useTranslation } from \"react-i18next\";\n\n//** Utils\nimport moment from \"moment\";\nimport {getDateRange} from \"@src/views/reports/functions\";\nimport CustomFilterChip from \"../../../../../@core/components/custom-chip/CustomFilterChip\";\nimport {decodeParameters, encodeParameters,printPageStyle} from \"../../../../../utility/Utils\";\nimport {useReactToPrint} from \"react-to-print\";\nimport PeriodSelector from \"../../../../../components/PeriodSelector_v2\";\nimport PopupState, {bindMenu, bindTrigger} from \"material-ui-popup-state\";\nimport Menu from \"@mui/material/Menu\";\nimport MenuItem from \"@mui/material/MenuItem\";\nimport InvoiceExportsDialog from \"../../../exports/InvoiceExport\";\nimport ListColumnCustomizer from \"../../../../../components/ListColumnCustomizer\";\n\nconst CustomerInvoiceList = ({ ...props }) => {\n\n // ** Parameters\n let search = window.location.search;\n let q_params = new URLSearchParams(search);\n\n let invoiceNo = q_params.get(\"invoice\");\n let filters = q_params.get(\"filters\");\n\n // ** Hooks\n const history = useHistory();\n const dispatch = useDispatch();\n const store = useSelector((state) => state.customerInvoice);\n const ability = useCan();\n const { defaultCurrency, userData, defaultCostLocation } = useAppDefaults();\n const wrapperRef = useRef(null);\n const pdfExportComponent = React.useRef(null);\n const { t } = useTranslation()\n\n // ** States\n const [showExport, setShowExport] = useState(false)\n const [currentPage, setCurrentPage] = useState(1);\n const [rowsPerPage, setRowsPerPage] = useState(10);\n const [searchData, setSearchData] = useState({ fullLocation: { ...defaultCostLocation }});\n const [searchBarOpen, setSearchBar] = useState(false);\n const [showPackingSlip, setShowPackingSlip] = useState(true);\n const [showDeliveryNote, setshowDeliveryNote] = useState(true);\n const [hidden, setHidden] = useState(true);\n const [selectedCustomer, setSelectedCustomer] = useState()\n const [fullPage, setFullPage] = useState(false);\n const [directDownload, setDirectDownload] = useState(false);\n const [selectedRow, setSelectedRow] = useState();\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const [allowDelete, setAllowDelete] = useState(false);\n const [openPaymentsPopOvers, setOpenPopOvers] = useState([]);\n const [filterList, setFilterList] = useState([]);\n const [columns, setColumns] = useState([]);\n const [showColCustomization, setShowColCustomization] = useState(false)\n\n\n // ** Conditional Hooks\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive && store.columns) {\n setColumns([...store.columns, ...[]]);\n }\n\n return () => {\n isActive = false;\n }\n }, [store.columns]);\n\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n let popOvers = [];\n for (let i = 0; i < openPaymentsPopOvers.length; i++) {\n popOvers.push(false);\n }\n setOpenPopOvers(popOvers);\n }\n }\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [wrapperRef, openPaymentsPopOvers]);\n\n useEffect(() => {\n let tempFilter = [];\n if (searchData) {\n if(searchData.Code) {\n tempFilter.push({\n name: 'Code',\n title: \"Invoice#\",\n value: searchData.Code\n })\n }\n if(searchData.CustomerInvoiceNo) {\n tempFilter.push({\n name: 'CustomerInvoiceNo',\n title: \"Order#\",\n value: searchData.CustomerInvoiceNo\n })\n }\n\n if(searchData.CustomerId) {\n tempFilter.push({\n name: 'CustomerId',\n title: 'Customer',\n value: searchData.CustomerName\n })\n } else {\n setSelectedCustomer(null)\n }\n\n if(searchData.ItemId) {\n tempFilter.push({\n name: 'ItemId',\n title: 'Item',\n value: searchData.ItemName\n })\n }\n\n if(searchData.status) {\n tempFilter.push({\n name: 'status',\n title: 'Status',\n value: searchData.status\n })\n }\n\n if(searchData.RefrenceNo) {\n tempFilter.push({\n name: 'RefrenceNo',\n title: 'Ref#',\n value: searchData.RefrenceNo\n })\n }\n\n if(searchData.ItemTaxType) {\n tempFilter.push({\n name: 'ItemTaxType',\n title: 'Tax',\n value: searchData.taxName\n })\n }\n\n if(searchData.Customer) {\n tempFilter.push({\n name: 'Customer',\n title: 'Customer',\n value: searchData.CustomerName\n })\n }\n\n if(searchData.CostCenter) {\n tempFilter.push({\n name: 'CostCenter',\n title: 'Class',\n value: searchData.CostCenterName\n })\n }\n\n if(searchData.WorkOrder) {\n tempFilter.push({\n name: 'WorkOrder',\n title: 'WO',\n value: searchData.WorkOrderName\n })\n }\n\n if(searchData.SalesmanId) {\n tempFilter.push({\n name: 'SalesmanId',\n title: 'Salesman',\n value: searchData.SalesmanName\n })\n }\n }\n setFilterList(tempFilter);\n }, [searchData]);\n\n useEffect(() => {\n dispatch(getCustomizationData());\n dispatch(getPackingCustomizationData());\n dispatch(getExportPackingCustomizationData());\n dispatch(getBank());\n\n\n if (store.columns.length <= 0) {\n dispatch(\n getColumns()\n )\n }\n\n }, [dispatch]);\n\n useEffect(() => {\n let popOvers = [];\n for (let i = 0; i < store.consolidated.length; i++) {\n popOvers.push(false);\n }\n setOpenPopOvers(popOvers);\n }, [store.consolidated]);\n\n useEffect(() => {\n if(hidden){\n history.replace(`/apps/sales/customer-invoice/list${filters ? '?filters='+filters : \"\"}`);\n }\n }, [hidden]);\n\n useEffect(() => {\n if (invoiceNo) {\n handleRowClick(invoiceNo, false);\n }\n }, [invoiceNo]);\n\n useEffect(() => {\n if (filters) {\n let decodedObj = decodeParameters(filters);\n setSearchData({...(decodedObj??{}) });\n if(decodedObj?.PageSize) {\n setRowsPerPage(decodedObj.PageSize);\n }\n\n if(decodedObj?.PageNo) {\n setCurrentPage(decodedObj.PageNo);\n }\n dispatch(\n getData({\n ...(decodedObj??{})\n })\n );\n } else {\n history.replace(`?${invoiceNo ? 'invoice='+invoiceNo+\"&\" : \"\"}filters=${encodeParameters(\n {\n ...searchData,\n PageNo: currentPage,\n PageSize: rowsPerPage\n }\n )}`)\n }\n }, [filters]);\n\n\n // ** Functions\n\n const handleChange = (e) => {\n e.preventDefault()\n const {name, value} = e.target\n if (name === \"period\") {\n const { FromDate, ToDate } = getDateRange(value, userData)\n doSearch({\n ...searchData,\n DateFrom: !moment(FromDate).isBefore(userData.fyearStart) ? FromDate : moment(userData.fyearStart).format('YYYY-MM-DD'),\n DateTo: !moment(ToDate).isAfter(userData.fyearEnd) ? ToDate : moment(userData.fyearEnd).format('YYYY-MM-DD')\n\n })\n }else {\n doSearch({...searchData, [name]: value})\n }\n }\n\n const toggleSearchBar = () => {\n setSearchBar(!searchBarOpen);\n };\n\n const handleCustomer = (value) => {\n doSearch({ ...searchData, CustomerId: value?.recno, CustomerName: value?.text })\n setSelectedCustomer(value)\n }\n\n const clearSearch = () => {\n setSearchBar(false);\n setSearchData({});\n history.replace(`?${invoiceNo ? 'invoice='+invoiceNo+\"&\" : \"\"}filters=${encodeParameters(\n {\n forceLoad: true,\n PageNo: 1,\n PageSize: rowsPerPage,\n }\n )}`)\n setCurrentPage(1);\n };\n\n const doSearch = (data) => {\n setSearchBar(false);\n setSearchData({ ...searchData, ...data });\n\n history.replace(`?${invoiceNo ? 'invoice='+invoiceNo+\"&\" : \"\"}filters=${encodeParameters(\n {\n ...data,\n forceLoad: true,\n PageNo: 1,\n PageSize: rowsPerPage,\n }\n )}`)\n setCurrentPage(1);\n };\n\n const handlePerPage = (e) => {\n let popOvers = [];\n for (let i = 0; i < openPaymentsPopOvers.length; i++) {\n popOvers.push(false);\n }\n setOpenPopOvers(popOvers);\n history.replace(`?${invoiceNo ? 'invoice='+invoiceNo+\"&\" : \"\"}filters=${encodeParameters(\n {\n ...searchData,\n forceLoad: true,\n PageNo: 1,\n PageSize: parseInt(e.target.value),\n }\n )}`)\n setCurrentPage(1);\n setRowsPerPage(parseInt(e.target.value));\n };\n\n const handlePagination = (page) => {\n let popOvers = [];\n for (let i = 0; i < openPaymentsPopOvers.length; i++) {\n popOvers.push(false);\n }\n setOpenPopOvers(popOvers);\n history.replace(`?${invoiceNo ? 'invoice='+invoiceNo+\"&\" : \"\"}filters=${encodeParameters(\n {\n ...searchData,\n PageSize: rowsPerPage,\n PageNo: page.selected + 1,\n }\n )}`)\n setCurrentPage(page.selected + 1);\n };\n\n const handleRowClick = async (row, down = false) => {\n\n setSelectedRow(row);\n setDirectDownload(down);\n if (!down) {\n await setHidden(false);\n }\n if (row) {\n if (typeof row === \"object\" && row.recno !== invoiceNo) {\n history.replace(`?invoice=${row.recno}${filters ? '&filters='+filters : \"\"}`);\n } else {\n history.replace(`?invoice=${invoiceNo}${filters ? '&filters='+filters : \"\"}`);\n }\n } else {\n history.replace(`/apps/sales/customer-invoice/list${filters ? '?filters='+filters : \"\"}`);\n }\n };\n\n const PackingSlip = (row, down = false) => {\n setSelectedRow(row);\n setDirectDownload(down);\n if (!down) {\n setShowPackingSlip(false);\n }\n };\n\n const DelieryNote = (row, down = false) => {\n setSelectedRow(row);\n setDirectDownload(down);\n if (!down) {\n setshowDeliveryNote(false);\n }\n };\n\n const handleReceiving = (row) => {\n setSelectedRow(row);\n history.push(`/apps/sales/customers/receiving/Recoveries?customer=${row?.customerId}&invoice=${row?.recno}`)\n };\n\n const handleVoidInvoice = async (row) => {\n setSelectedRow(row);\n setAllowDelete(false);\n setShowDeleteDialog(true);\n };\n\n const handleDeleteInvoice = async (row) => {\n setSelectedRow(row);\n setAllowDelete(true);\n setShowDeleteDialog(true);\n };\n\n const onVoidPayment = async (comment, id) => {\n try {\n if (allowDelete) {\n await axios.delete(`/SalesInvoices/${id}`, {});\n } else {\n await axios.put(\"/SalesInvoices/Void\", { recno: id, voidComments: comment });\n }\n setShowDeleteDialog(false);\n await fireMessage(allowDelete ? t(\"Deleted Successfully\") : t(\"Void Successfully\"), t(\"Success...\"), \"success\", {t});\n dispatch(\n getData({\n PageNo: currentPage,\n PageSize: rowsPerPage,\n })\n );\n setHidden(true);\n } catch (error) {\n await fireMessage(error, t(\"Error...\"), \"error\", {t});\n }\n };\n\n\n // Printing\n\n const printPdf = async () => {\n if (pdfExportComponent.current) {\n await pdfExportComponent.current.save();\n }\n };\n\n const handlePrint = useReactToPrint({\n content: ()=> pdfExportComponent.current,\n documentTitle: `Customer-Invoice-${new Date().getMinutes()}${new Date().getHours()}${new Date().getDay()}${new Date().getMonth()}`,\n copyStyles: true,\n pageStyle: printPageStyle\n })\n\n const printPDF = (dataUri) => {\n const iframe = document.createElement('iframe');\n iframe.src = dataUri;\n iframe.style.width = '0';\n iframe.style.height = '0';\n document.body.appendChild(iframe);\n\n iframe.contentWindow.onload = function () {\n iframe.contentWindow.print();\n };\n };\n\n\n\n\n const onSuccessColumns = () => {\n dispatch(getColumns())\n }\n\n const onClickColumnCustomization = () => {\n setShowColCustomization(true);\n }\n // Printing\n\n const CustomPagination = () => {\n const count = Math.ceil(store.consolidatedTotalRecords / rowsPerPage);\n\n return (\n \n
\n );\n };\n\n return (\n \n \n \n \n \n \n \n
\n \n handlePagination(page)}\n forcePage={currentPage !== 0 ? currentPage - 1 : 0}\n containerClassName={\"pagination react-paginate justify-content-center p-1\"}\n />\n
\n \n \n\n \n { searchBarOpen &&\n \n\n {!hidden && fullPage ? null : (\n \n
0 ? '0px' : '2px'}}/>\n {\n filterList.length > 0 &&
\n }\n\n\n
\n \n )}\n\n {hidden ? (\n directDownload ? (\n \n \n \n \n {ability.can(\"new\", \"SalesInvoices\") && (\n \n )}\n\n \n \n\n {\n ability.can('new', 'SalesInvoices') &&\n \n {(popupState) => (\n \n }\n\n
\n \n\n \n
\n {t(\"View all customer invoices list with quick customization.\")}\n
\n \n {t(\"Customer Invoices\")}\n
\n\n {t(\"View all customer invoices list with quick customization.\")}\n
\n \n \n
\n )}\n 0 ? '0px' : '2px'}}/>\n {\n filterList.length > 0 &&
\n {\n filterList.map((e, index) => {\n return {\n doSearch({...searchData, [e.name]: null})\n }} />\n })\n }\n {\n filterList.length > 1 && {\n clearSearch();\n }} />\n }\n
\n }\n\n {\n filterList.length > 0 &&\n \n }\n\n\n
\n\n
\n\n \n \n\n {\n hidden &&\n \n
\n\n \n
\n }\n\n\n \n
\n\n \n
\n \n \n {\n doSearch({...searchData, Code: e.target.value})\n }} onSubmit={()=>{\n }} />\n {\n if((searchData.Code??\"\").length > 0) {\n doSearch({...searchData, Code: \"\"})\n }\n }}>\n \n \n
\n \n \n {\n index}\n subHeader={false}\n onSort={(column, sortOrder) => {\n let SortType = sortOrder.toLowerCase() === 'asc' ? \"ascending\" : \"descending\";\n let SortByColumn = column.field;\n doSearch({...searchData, SortType, SortByColumn})\n }}\n columns={\n props.quickAdd\n ? quickColumns(ability, defaultCurrency)\n : hidden\n ? comColumns(wrapperRef, ability, defaultCurrency.symbol, columns, PackingSlip,DelieryNote, handleRowClick, handleReceiving, handleVoidInvoice, handleDeleteInvoice, defaultCurrency, openPaymentsPopOvers, setOpenPopOvers, userData, t, onClickColumnCustomization)\n : collapseColumns(ability, defaultCurrency.symbol, columns, handleRowClick, defaultCurrency, userData, t)\n }\n responsive={true}\n data={store.consolidated}\n sortIcon={ \n
\n \n \n \n
\n
\n )\n}\n\nexport default canWrapper('Recoveries', 'new', CashPaymentAdd)\n","import '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\n// ** Styles\nimport 'react-slidedown/lib/slidedown.css'\nimport ItemForm from '../tabs/ItemFormModren'\n\nconst AddCard = (props) => \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n )\n}\n\nexport default canWrapper('CPV', 'new', CashPaymentAdd)\n","// ** React Imports\nimport { Fragment, useEffect } from 'react'\n\n// ** Third Party Components\nimport classnames from 'classnames'\n\n// ** Store & Actions\nimport { useSelector, useDispatch } from 'react-redux'\nimport { handleContentWidth, handleMenuCollapsed, handleMenuHidden } from '@store/layout'\n\n// ** Styles\nimport 'animate.css/animate.css'\n\nconst LayoutWrapper = props => {\n // ** Props\n // transition\n const { layout, children, appLayout, wrapperClass, routeMeta } = props\n\n // ** Store Vars\n const dispatch = useDispatch()\n const store = useSelector(state => state)\n\n const navbarStore = store.navbar\n const contentWidth = store.layout.contentWidth\n\n //** Vars\n const Tag = layout === 'HorizontalLayout' && !appLayout ? 'div' : Fragment\n\n // ** Clean Up Function\n const cleanUp = () => {\n if (routeMeta) {\n if (routeMeta.contentWidth) {\n dispatch(handleContentWidth('full'))\n }\n if (routeMeta.menuCollapsed) {\n dispatch(handleMenuCollapsed(!routeMeta.menuCollapsed))\n }\n if (routeMeta.menuHidden) {\n dispatch(handleMenuHidden(!routeMeta.menuHidden))\n }\n }\n }\n\n // ** ComponentDidMount\n useEffect(() => {\n if (routeMeta) {\n if (routeMeta.contentWidth) {\n dispatch(handleContentWidth(routeMeta.contentWidth))\n }\n if (routeMeta.menuCollapsed) {\n dispatch(handleMenuCollapsed(routeMeta.menuCollapsed))\n }\n if (routeMeta.menuHidden) {\n dispatch(handleMenuHidden(routeMeta.menuHidden))\n }\n }\n return () => cleanUp()\n }, [])\n\n return (\n \n
\n \n )\n}\n\nexport default BlankLayout\n","// ** React Imports\nimport { useState } from 'react'\n\n// ** Third Party Components\nimport Select from 'react-select'\nimport classnames from 'classnames'\nimport { selectThemeColors } from '@utils'\nimport { Settings, X } from 'react-feather'\nimport PerfectScrollbar from 'react-perfect-scrollbar'\n\n// ** Reactstrap Imports\nimport { Input, Label } from 'reactstrap'\n\n// ** Styles\nimport '@styles/react/libs/react-select/_react-select.scss'\n\nconst Customizer = props => {\n // ** Props\n const {\n skin,\n isRtl,\n layout,\n setSkin,\n setIsRtl,\n isHidden,\n setLayout,\n navbarType,\n footerType,\n transition,\n navbarColor,\n setIsHidden,\n contentWidth,\n menuCollapsed,\n setLastLayout,\n setTransition,\n setNavbarType,\n setFooterType,\n setNavbarColor,\n setContentWidth,\n setMenuCollapsed\n } = props\n\n // ** State\n const [openCustomizer, setOpenCustomizer] = useState(false)\n\n // ** Toggles Customizer\n const handleToggle = e => {\n e.preventDefault()\n setOpenCustomizer(!openCustomizer)\n }\n\n // ** Render Layout Skin Options\n const renderSkinsRadio = () => {\n const skinsArr = [\n {\n name: 'light',\n label: 'Light',\n checked: skin === 'light'\n },\n {\n name: 'bordered',\n label: 'Bordered',\n checked: skin === 'bordered'\n },\n {\n name: 'dark',\n label: 'Dark',\n checked: skin === 'dark'\n },\n {\n name: 'semi-dark',\n label: 'Semi Dark',\n checked: skin === 'semi-dark'\n }\n ]\n\n return skinsArr.map((radio, index) => {\n const marginCondition = index !== skinsArr.length - 1\n\n if (layout === 'HorizontalLayout' && radio.name === 'semi-dark') {\n return null\n }\n\n return (\n \n
\n {children}
\n \n setSkin(radio.name)} />\n \n
\n )\n })\n }\n\n // ** Render Navbar Colors Options\n const renderNavbarColors = () => {\n const colorsArr = ['white', 'primary', 'secondary', 'success', 'danger', 'info', 'warning', 'dark']\n\n return colorsArr.map(color => (\n \n setNavbarType(radio.name)} />\n \n
\n )\n })\n }\n\n // ** Render Footer Type Options\n const renderFooterTypeRadio = () => {\n const footerTypeArr = [\n {\n name: 'sticky',\n label: 'Sticky',\n checked: footerType === 'sticky'\n },\n {\n name: 'static',\n label: 'Static',\n checked: footerType === 'static'\n },\n {\n name: 'hidden',\n label: 'Hidden',\n checked: footerType === 'hidden'\n }\n ]\n\n return footerTypeArr.map((radio, index) => {\n const marginCondition = index !== footerTypeArr.length - 1\n\n return (\n \n setFooterType(radio.name)}\n />\n \n
\n )\n })\n }\n\n // ** Router Transition Options\n const transitionOptions = [\n { value: 'fadeIn', label: 'Fade' },\n { value: 'fadeInLeft', label: 'Fade In Left' },\n { value: 'zoomIn', label: 'Zoom In' },\n { value: 'none', label: 'None' }\n ]\n\n // ** Get Current Transition\n const transitionValue = transitionOptions.find(i => i.value === transition)\n\n return (\n \n\n
\n
\n\n \n
\n\n Skin
\n{renderSkinsRadio()}
\n \n
\n\n Content Width
\n\n
\n \n setContentWidth('full')}\n />\n \n
\n \n setContentWidth('boxed')}\n />\n \n
\n \n
\n\n \n
\n RTL
\n setIsRtl(!isRtl)} />\n\n
\n \n setTransition(value)}\n />\n
\n Router Transition
\n\n\n
\n
\n\n Menu Layout
\n\n
\n {layout !== 'HorizontalLayout' ? (\n \n
\n \n {\n setLayout('vertical')\n setLastLayout('vertical')\n }}\n />\n \n
\n \n {\n setLayout('horizontal')\n setLastLayout('horizontal')\n }}\n />\n \n
\n \n
\n ) : null}\n\n \n setMenuCollapsed(!menuCollapsed)}\n />\n
\n Menu Collapsed
\n\n
\n \n
\n Menu Hidden
\n\n\n
\n {layout !== 'HorizontalLayout' ? (\n
\n\n \n
\n ) : null}\n\n Navbar Color
\n- {renderNavbarColors()}
\n
\n {layout === 'HorizontalLayout' ? 'Menu' : 'Navbar'} Type
\n{renderNavbarTypeRadio()}
\n \n\n
\n
\n \n
\n Footer Type
\n{renderFooterTypeRadio()}
\n \n {children}\n
\n )\n )\n}\n\nexport default ScrollTop\n\n// ** PropTypes\nScrollTop.propTypes = {\n showOffset: Proptypes.number,\n children: Proptypes.any.isRequired,\n scrollBehaviour: Proptypes.oneOf(['smooth', 'instant', 'auto'])\n}\n\nScrollTop.defaultProps = {\n scrollBehaviour: 'smooth'\n}\n","// ** Icons Import\nimport { Heart } from 'react-feather'\n\nconst Footer = () => {\n return (\n \n \n COPYRIGHT © {new Date().getFullYear()}{' '}\n \n Pixinvent\n \n , All rights Reserved\n \n \n Hand-crafted & Made with\n
\n 
\n
\n )\n })}\n \n \n dispatch(deleteCartItem(item.id))} />\n
\n \n \n
\n by {item.brand}\n
\n \n handleDropdownItemClick(item.id)}\n >\n {item.name}\n \n
\n by {item.brand}\n \n
\n ${item.price}
\n\n
\n \n Total:
\n${Number(total.toFixed(2))}
\nYour cart is empty
\n }\n }\n\n return (\nMy Cart
\n\n {(userData && userData['username']) || 'John Doe'}\n {(userData && userData.role) || 'Admin'}\n
\n {suggestion[filterHeaderKey]}
\n\n {\n onChange(e)\n if (props.onChange) {\n props.onChange(e)\n }\n }}\n onKeyDown={e => onKeyDown(e)}\n value={userInput}\n className={`autocomplete-search ${props.className ? props.className : ''}`}\n placeholder={props.placeholder}\n onClick={onInputClick}\n ref={inputElRef}\n onFocus={() => setFocused(true)}\n autoFocus={props.autoFocus}\n onBlur={e => {\n if (props.onBlur) props.onBlur(e)\n setFocused(false)\n }}\n />\n {suggestionsListComponent}\n
\n )\n}\n\nexport default Autocomplete\n\n// ** PropTypes\nAutocomplete.propTypes = {\n grouped: PropTypes.bool,\n autoFocus: PropTypes.bool,\n onKeyDown: PropTypes.func,\n onChange: PropTypes.func,\n clearInput: PropTypes.func,\n placeholder: PropTypes.string,\n externalClick: PropTypes.func,\n defaultValue: PropTypes.string,\n wrapperClass: PropTypes.string,\n filterHeaderKey: PropTypes.string,\n suggestionLimit: PropTypes.number,\n onSuggestionsShown: PropTypes.func,\n onSuggestionItemClick: PropTypes.func,\n filterKey: PropTypes.string.isRequired,\n suggestions: PropTypes.array.isRequired\n}\n","//** React Imports\nimport { useEffect } from 'react'\n\nexport const useOnClickOutside = (ref, handler) => {\n useEffect(\n () => {\n const listener = event => {\n // ** Do nothing if clicking ref's element or descendent elements\n if (!ref.current || ref.current.contains(event.target)) {\n return\n }\n\n // ** Call passed function on click outside\n handler(event)\n }\n\n document.addEventListener('mousedown', listener)\n document.addEventListener('touchstart', listener)\n\n return () => {\n document.removeEventListener('mousedown', listener)\n document.removeEventListener('touchstart', listener)\n }\n },\n // ** Add ref and handler to effect dependencies\n // ** It's worth noting that because passed in handler is a new ...\n // ** ... function on every render that will cause this effect ...\n // ** ... callback/cleanup to run every render. It's not a big deal ...\n // ** ... but to optimize you can wrap handler in useCallback before ...\n // ** ... passing it into this hook.\n [ref, handler]\n )\n}\n","// ** React Imports\nimport { useEffect, useState } from 'react'\n\n// ** Third Party Components\nimport axios from 'axios'\nimport classnames from 'classnames'\nimport * as Icon from 'react-feather'\n\n// ** Reactstrap Imports\nimport { NavItem, NavLink } from 'reactstrap'\n\n// ** Store & Actions\nimport { useDispatch } from 'react-redux'\nimport { handleSearchQuery } from '@store/navbar'\n\n// ** Custom Components\nimport Autocomplete from '@components/autocomplete'\n\nconst NavbarSearch = () => {\n // ** Store Vars\n const dispatch = useDispatch()\n\n // ** States\n const [suggestions, setSuggestions] = useState([])\n const [navbarSearch, setNavbarSearch] = useState(false)\n\n // ** ComponentDidMount\n useEffect(() => {\n axios.get('/api/main-search/data').then(({ data }) => {\n setSuggestions(data.searchArr)\n })\n }, [])\n\n // ** Removes query in store\n const handleClearQueryInStore = () => dispatch(handleSearchQuery(''))\n\n // ** Function to handle external Input click\n const handleExternalClick = () => {\n if (navbarSearch === true) {\n setNavbarSearch(false)\n handleClearQueryInStore()\n }\n }\n\n // ** Function to clear input value\n const handleClearInput = setUserInput => {\n if (!navbarSearch) {\n setUserInput('')\n handleClearQueryInStore()\n }\n }\n\n // ** Function to close search on ESC & ENTER Click\n const onKeyDown = e => {\n if (e.keyCode === 27 || e.keyCode === 13) {\n setTimeout(() => {\n setNavbarSearch(false)\n handleClearQueryInStore()\n }, 1)\n }\n }\n\n // ** Function to handle search suggestion Click\n const handleSuggestionItemClick = () => {\n setNavbarSearch(false)\n handleClearQueryInStore()\n }\n\n // ** Function to handle search list Click\n const handleListItemClick = (func, link, e) => {\n func(link, e)\n setTimeout(() => {\n setNavbarSearch(false)\n }, 1)\n handleClearQueryInStore()\n }\n\n return (\n \n
\n {navbarSearch ? (\n \n {item.icon ? (\n 
\n ) : item.img ? (\n 
\n ) : null}\n
\n {item.size || item.date ? (\n \n
\n {item.title}
\n {item.by || item.email ? (\n {item.by ? item.by : item.email ? item.email : null}\n ) : null}\n\n {item.size ? item.size : item.date ? item.date : null}\n
\n ) : null}\n \n \n )\n }}\n />\n ) : null}\n \n {\n e.stopPropagation()\n setNavbarSearch(false)\n handleClearQueryInStore()\n }}\n />\n
\n \n \n Congratulation Sam 🎉winner!\n
\n )\n },\n {\n img: require('@src/assets/images/portrait/small/avatar-s-3.jpg').default,\n subtitle: 'You have 10 unread messages.',\n title: (\n\n New message received\n
\n )\n },\n {\n avatarContent: 'MD',\n color: 'light-danger',\n subtitle: 'MD Inc. order updated',\n title: (\n\n Revised Order 👋 checkout\n
\n )\n },\n {\n title:System Notifications
,\n switch: (\n\n \n
\n )\n },\n {\n avatarIcon: \n Server down registered\n
\n )\n },\n {\n avatarIcon:\n Sales report generated\n
\n )\n },\n {\n avatarIcon:\n High memory usage\n
\n )\n }\n ]\n\n // ** Function to render Notifications\n /*eslint-disable */\n const renderNotificationItems = () => {\n return (\n\n
\n \n {item.title}\n {item.subtitle}\n
\n Notifications
\n- \n
- \n
- \n {renderBookmarks()}\n {renderExtraBookmarksDropdown()}\n
\n handleClearInput(setUserInput)}\n onKeyDown={onKeyDown}\n value={value}\n onChange={handleInputChange}\n customRender={(\n item,\n i,\n filteredData,\n activeSuggestion,\n onSuggestionItemClick,\n onSuggestionItemHover\n ) => {\n const IconTag = Icon[item.icon ? item.icon : 'X']\n return (\n onSuggestionItemHover(filteredData.indexOf(item))}\n className={classnames('suggestion-item d-flex align-items-center justify-content-between', {\n active: filteredData.indexOf(item) === activeSuggestion\n })}\n >\n {\n setOpenSearch(false)\n handleClearQueryInStore()\n }}\n style={{\n width: 'calc(90%)'\n }}\n >\n handleBookmarkUpdate(item.id)}\n />\n \n )\n }}\n />\n ) : null}\n
\n \n
\n {openSearch && store.suggestions.length ? (\n \n
\n \n \n
\n \n
\n )\n}\n\nexport default VerticalMenuHeader\n","// ** React Imports\nimport { useEffect } from 'react'\nimport { NavLink, useLocation } from 'react-router-dom'\n\n// ** Third Party Components\nimport classnames from 'classnames'\nimport { useTranslation } from 'react-i18next'\n\n// ** Reactstrap Imports\nimport { Badge } from 'reactstrap'\n\nconst VerticalNavMenuLink = ({\n item,\n activeItem,\n setActiveItem,\n currentActiveItem\n}) => {\n // ** Conditional Link Tag, if item has newTab or externalLink props use tag else use NavLink\n const LinkTag = item.externalLink ? 'a' : NavLink\n\n // ** Hooks\n const { t } = useTranslation()\n const location = useLocation()\n\n useEffect(() => {\n if (currentActiveItem !== null) {\n setActiveItem(currentActiveItem)\n }\n }, [location])\n\n return (\n - \n
- \n
\n \n \n\n \n
{themeConfig.app.appName}
\n \n - \n \n\n
\n setMenuVisibility(false)} className='toggle-icon icon-x d-block d-xl-none' size={20} />\n \n
- \n
- \n
- \n
\n {CustomNavbar ? (\n
\n \n {children}\n\n {/* Vertical Nav Menu Overlay */}\n \n \n \n \n
\n ) : null}\n \n )\n}\n\nexport default VerticalLayout\n","// ** Store Imports\nimport { handleNavbarType } from '@store/layout'\nimport { useDispatch, useSelector } from 'react-redux'\n\nexport const useNavbarType = () => {\n // ** Hooks\n const dispatch = useDispatch()\n const store = useSelector(state => state.layout)\n\n const setNavbarType = type => {\n dispatch(handleNavbarType(type))\n }\n\n return { navbarType: store.navbarType, setNavbarType }\n}\n","// ** Store Imports\nimport { handleFooterType } from '@store/layout'\nimport { useDispatch, useSelector } from 'react-redux'\n\nexport const useFooterType = () => {\n // ** Hooks\n const dispatch = useDispatch()\n const store = useSelector(state => state.layout)\n\n const setFooterType = type => {\n dispatch(handleFooterType(type))\n }\n\n return { setFooterType, footerType: store.footerType }\n}\n","// ** Store Imports\nimport { handleNavbarColor } from '@store/layout'\nimport { useDispatch, useSelector } from 'react-redux'\n\nexport const useNavbarColor = () => {\n // ** Hooks\n const dispatch = useDispatch()\n const store = useSelector(state => state.layout)\n\n // ** Return a wrapped version of useState's setter function\n const setNavbarColor = value => {\n dispatch(handleNavbarColor(value))\n }\n\n return { navbarColor: store.navbarColor, setNavbarColor }\n}\n","// ** Icons Import\nimport {\n Book, Briefcase, FileText, Lock,\n} from 'react-feather'\n\nexport default [\n {\n id: 'accounts',\n title: 'Accounts',\n icon: \n {\n showDue ?\n \n {t(\"Your Subscription will expire in\")}\n \n \n
\n \n :\n
\n \n
\n \n :\n
\n \n
\n\n \n \n {t(\"Re-Subscribe Now\")}\n \n \n :\n \n COPYRIGHT © {new Date().getFullYear()}{' '}\n \n {process.env.REACT_APP_CNAME}\n \n , All rights reserved\n \n }\n
\n
\n )\n}\nexport default AccountsDetailsDialog\n","// ** React Imports\nimport { Link, useHistory } from 'react-router-dom'\nimport { useEffect, useState } from 'react'\n// ** Custom Components\nimport Avatar from '@components/avatar'\n\n// ** Utils\nimport { isUserLoggedIn } from '@utils'\n\n// ** Store & Actions\nimport {useDispatch, useSelector} from 'react-redux'\nimport { handleLogout } from '@store/authentication'\n\n// ** Third Party Components\nimport {\n User,\n Power,\n Repeat\n} from 'react-feather'\n\n// ** Reactstrap Imports\nimport { UncontrolledDropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap'\n\n// ** Third Party Components\nimport { useTranslation } from 'react-i18next'\n\n// ** Default Avatar Image\nimport defaultAvatar from '@src/assets/images/portrait/small/avatar-s-11.jpg'\nimport {useCan} from \"../../../utility/hooks/useCan\";\nimport * as React from \"react\";\nimport {useAppDefaults} from \"../../../utility/hooks/useAppDefaults\";\nimport AccountsDetailsDialog from \"../../../views/settings/company/form-view/steps/AccountsDetailsDialog\";\nimport {CompanyContextProvider} from \"../../../views/settings/company/context/CompanyContext\";\n\nconst UserDropdown = () => {\n // ** Store Vars\n const { t } = useTranslation()\n const dispatch = useDispatch()\n const history = useHistory()\n\n const store = useSelector(state => state.auth)\n\n const {defaultCostLocation, defaultTanent} = useAppDefaults();\n\n // ** State\n const [userData, setUserData] = useState(null)\n const [open, setOpen] = useState(false)\n\n\n const switchOrganization = () => {\n history.push('/pages/authentication/UserOrganization.js')\n }\n\n //** ComponentDidMount\n useEffect(() => {\n if (isUserLoggedIn() !== null) {\n setUserData(JSON.parse(localStorage.getItem('userData')))\n }\n }, [store.userData])\n\n //** Vars\n const userAvatar = ((userData?.profileImageURL??\"\").length > 0 && `${process.env.REACT_APP_API_URL_production}${userData.profileImageURL}`) || defaultAvatar\n const companyAvatar = ((userData?.branchLogo??\"\").length > 0 && `${process.env.REACT_APP_API_URL_production}${userData.branchLogo}`) || defaultAvatar\n\n return (\n <>\n \n setOpen(false)} size={'lg'} className='modal-dialog-centered' style={{padding: 0, paddingBottom: 0}}>\n setOpen(false)}>{t(\"Profile\")} \n \n {}}/> \n \n
\n \n {(userData && userData['name']) || 'John Doe'}\n
\n \n
\n \n {(defaultTanent && defaultTanent?.name) || 'Default'}\n {(defaultCostLocation && defaultCostLocation?.text) || 'Default'}\n
\n - \n
- \n {item.suggestions.map((suggestionItem, index2) => (ability.can(suggestionItem.type, suggestionItem.resources) || suggestionItem.public) ? (\n
- \n {item.suggestions.map((suggestionItem, index2) => ability.can(suggestionItem.type, suggestionItem.source) || !suggestionItem.source ? (\n
{t(\"Switch Branch\")}
\n\n No Notification Available!\n
\n }\n {(store.notifications??[]).map((item, index) => {\n return (\n {\n e.preventDefault();\n history.push(`${item.notificationUrl??\"#\"}`)\n await service.Put(`/{culture}/Login/MarkNotificationAsComplete?NotificationId=${item.id}`, {NotificationId: item.id});\n dispatch(getNotifications())\n }}>\n \n
\n \n
\n \n {item.title}\n
\n {item.description}\n\n No Announcement Available!\n
\n }\n {(store.announcement??[]).map((item, index) => {\n return (\n {\n e.preventDefault();\n history.push(`${item.notificationUrl??\"#\"}`)\n await service.Put(`/{culture}/Login/MarkNotificationAsComplete?NotificationId=${item.id}`, {NotificationId: item.id});\n dispatch(getAnnouncement())\n }}>\n \n
\n \n
\n \n {item.title}\n
\n {item.description}\n\n \n \n e.preventDefault()}\n />\n e.preventDefault()}\n />\n \n\n \n \n \n \n {((store.notifications ?? []).filter((e) => !(e.isViewed ?? false))).length} New\n \n }\n \n \n {renderNotificationItems()}\n\n {\n ((store.notifications??[]).filter((e) => !(e.isViewed??false))).length > 0 &&\n \n {\n isLoading ?\n :\n \n }\n \n }\n \n \n \n \n \n {((store.announcement ?? []).filter((e) => !(e.isViewed ?? false))).length} New\n \n }\n \n \n {renderAnnouncementItems()}\n\n {\n ((store.announcement??[]).filter((e) => !(e.isViewed??false))).length > 0 &&\n \n {\n isLoading ?\n :\n \n }\n \n }\n \n \n
\n Notifications
\n {\n ((store.notifications??[]).filter((e) => !(e.isViewed??false))).length > 0 &&\nAnnouncements
\n {\n ((store.announcement??[]).filter((e) => !(e.isViewed??false))).length > 0 &&\n- \n {/*{\n props.ability.can('new', \"FileFoldersUpload\") &&\n
- \n
- \n {\n ability.can('new', 'SalesInvoices') &&\n
\n setOpenNotification(!openNotification)} className='modal-dialog-centered'>\n setOpenNotification(!openNotification)}>Notifications Permission \n \n \n\n \n \n \n \n \n
\n }\n\n \n )\n}\n\nexport default ThemeNavbar\n","// ** Core Layout Import\n// !Do not remove the Layout import\nimport Layout from '@layouts/VerticalLayout'\n// ** Menu Items Array\nimport navigation from '@src/navigation/vertical'\nimport { ToolbarItemsContext, ToolbarItemsProvider } from '../utility/context/ToolbarItems'\nimport Footer from './components/footer'\nimport ThemeNavbar from './components/navbar'\n\nconst VerticalLayout = props => {\n // const [menuData, setMenuData] = useState([])\n\n\n // ** For ServerSide navigation\n // useEffect(() => {\n // axios.get(URL).then(response => setMenuData(response.data))\n // }, [])\n\n /**\n * Do not update @core folder.\n * if you realy have to update then change @core/VerticalLayout's 'navbar' variable with 'CustomNavbar'\n */\n return (\n \n
\n {t(\"Allow SmartBooks to send you push notifications. To Keep updated Press the allow button.\")}
\n\n \n \n
\n )\n}\n\nexport default VerticalLayout\n","// ** React Imports\nimport {Suspense, useContext, lazy, Fragment, useEffect, useState} from 'react'\n// ** Utils\n// import { isUserLoggedIn, getUserData } from '@utils'\nimport {useLayout} from '@hooks/useLayout'\nimport {AbilityContext} from '@src/utility/context/Can'\nimport {useRouterTransition} from '@hooks/useRouterTransition'\nimport {useUser} from '@hooks/useUser'\n\n// ** Custom Components\nimport LayoutWrapper from '@layouts/components/layout-wrapper'\n// ** Router Components\nimport {BrowserRouter as AppRouter, Route, Switch, Redirect} from 'react-router-dom'\n\n// ** Routes & Default Routes\nimport {DefaultRoute, Routes} from './routes'\n\n// ** Layouts\nimport BlankLayout from '@layouts/BlankLayout'\nimport VerticalLayout from '@src/layouts/VerticalLayout'\nimport {getMapAccounts} from '../redux/mapAccounts'\nimport {useDispatch, useSelector} from 'react-redux'\nimport i18n from \"i18next\";\nimport axios from \"axios\";\nimport {useRTL} from \"../utility/hooks/useRTL\";\nimport {getAnnouncement, getNotifications} from \"../redux/notifications\";\nimport useJwt from '@src/auth/jwt/useJwt'\n\nconst config = useJwt.jwtConfig\n\nconst Router = () => {\n // ** Hooks\n const {setLayout, setLastLayout} = useLayout()\n const {transition, setTransition} = useRouterTransition()\n const {userData, loggedIn: isUserLoggedIn} = useUser()\n\n const [isRtl, setRtl] = useRTL();\n\n const dispatch = useDispatch()\n\n // getMapAccounts()\n\n useEffect(() => {\n if (isUserLoggedIn) {\n dispatch(getMapAccounts())\n dispatch(getNotifications())\n dispatch(getAnnouncement())\n }\n }, [isUserLoggedIn])\n \n useEffect(() => {\n const lang = localStorage.getItem('lang');\n\n if (localStorage.getItem('lang')) i18n.changeLanguage(lang??\"en\")\n \n if (lang === \"ar\") {\n setRtl(true);\n localStorage.setItem('direction', true)\n }else if (lang === \"ur\") {\n setRtl(true);\n localStorage.setItem('direction', true)\n } else if (lang === \"ps\") {\n localStorage.setItem('direction', true)\n } else {\n setRtl(false);\n localStorage.setItem('direction', false)\n }\n \n axios.defaults.baseURL = process.env[`REACT_APP_API_URL_${process.env.REACT_APP_ENV}`] + lang??\"en\" + \"/\";\n }, [])\n \n \n // const store = useSelector(state => state.mapAccounts)\n // console.log(store)\n\n // ** ACL Ability Context\n const ability = useContext(AbilityContext)\n\n // ** Default Layout\n const DefaultLayout = 'VerticalLayout'\n\n // ** All of the available layouts\n const Layouts = {BlankLayout, VerticalLayout}\n\n // ** Current Active Item\n const currentActiveItem = null\n\n // ** Return Filtered Array of Routes & Paths\n const LayoutRoutesAndPaths = layout => {\n const LayoutRoutes = []\n const LayoutPaths = []\n\n if (Routes) {\n Routes.filter(route => {\n // ** Checks if Route layout or Default layout matches current layout\n if (route.layout === layout || (route.layout === undefined && DefaultLayout === layout)) {\n LayoutRoutes.push(route)\n LayoutPaths.push(route.path)\n }\n })\n }\n\n return {LayoutRoutes, LayoutPaths}\n }\n\n const NotAuthorized = lazy(() => import('@src/views/pages/misc/NotAuthorized'))\n\n // ** Init Error Component\n const Error = lazy(() => import('@src/views/pages/misc/Error'))\n\n /**\n ** Final Route Component Checks for Login & User Role and then redirects to the route\n */\n const FinalRoute = props => {\n const route = props.route\n let action, resource\n\n // ** Assign vars based on route meta\n if (route.meta) {\n action = route.meta.action ? route.meta.action : null\n resource = route.meta.resource ? route.meta.resource : null\n }\n if (\n (!isUserLoggedIn && route.meta === undefined) ||\n (!isUserLoggedIn && route.meta && !route.meta.authRoute && !route.meta.publicRoute)\n ) {\n /**\n ** If user is not Logged in & route meta is undefined\n ** OR\n ** If user is not Logged in & route.meta.authRoute, !route.meta.publicRoute are undefined\n ** Then redirect user to login\n */\n\n return \n
\n )\n}\n\nexport default ComponentSpinner\n","// ** React Imports\nimport { Fragment } from 'react'\n\n// ** Third Party Components\nimport Proptypes from 'prop-types'\nimport classnames from 'classnames'\n\n// ** Reactstrap Imports\nimport { Spinner } from 'reactstrap'\n\n// ** Styles\nimport './ui-loader.scss'\n\nconst UILoader = props => {\n const { children, blocking, loader, className, tag, overlayColor } = props\n\n const Tag = tag\n\n return (\n \n \n \n \n
\n {loader}
\n \n {\n if(date) {\n let tempDate = new Date(`${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`}-${date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`}T12:00:00`);\n onChange(tempDate, `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`}-${date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`}T12:00:00`)\n } else {\n onChange(null, null)\n }\n }}\n customInput={}\n {...props}\n />\n
\n\n /*\n {title}\n
\n }\n {\n rest.overflowNone ?\n\n {props.viewOnly ? ( 50 ? options.slice(0, 50) : options}\n loadOptions={loadOptions}\n menuPlacement=\"auto\"\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n getOptionValue={(option) => option.recno}\n getOptionLabel={(option) => ({option.text})}\n value={location}\n onChange={handleChange}\n isMulti={props.multiple}\n placeholder={t(\"Select...\")}\n {...props}\n styles={SelectStyles}\n />\n }
\n )\n}\n\nexport default CostLocationSelector_v2\n","import { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\n\nfunction PeriodSelector({ selectedPeriod, period, name= 'period', onChange, auto_width = false, menuFixPlacement = true, ...props }) {\n const [options, setOptions] = useState([\n {\n value: 'date',\n text: 'Current Date'\n },\n {\n value: 'yesterday',\n text: 'Yesterday'\n },\n {\n value: 'week',\n text: 'Current Week'\n },\n {\n value: 'LastSevenDays',\n text: 'Last 7 Days'\n },\n {\n value: 'month',\n text: 'Current Month'\n },\n {\n value: 'LastMonth',\n text: 'Last Month'\n },\n {\n value: 'LastThirtyDays',\n text: 'Last 30 Days'\n },\n {\n value: 'year',\n text: 'Current Year'\n },\n {\n value: 'YearToDate',\n text: 'Year To Date'\n },\n {\n value: 'PrevYearDate',\n text: 'Previous Year To Date'\n },\n ])\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()))\n\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n\n }, 1)\n\n\n useEffect(() => {\n if (!!selectedPeriod && (!period || (typeof period === 'string' ? period : period?.value) !== selectedPeriod)) {\n if (options.length) {\n const i = options[options.findIndex(x => x.value === selectedPeriod)]\n if(i) {\n handleChange(i, {selected: true})\n }\n }\n }\n }, [selectedPeriod])\n\n const handleChange = (value, action) => {\n if (onChange) {\n onChange({target: {name: name, value: value?.value}, preventDefault: () => {}})\n }\n }\n\n return (\n {location?.text}
) :\n\n 50 ? options.slice(0, 50) : options}\n loadOptions={loadOptions}\n menuPlacement=\"auto\"\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n getOptionValue={(option) => option.value}\n getOptionLabel={(option) => ({option.text})}\n value={options[options.findIndex(x => x.value === selectedPeriod)]}\n onChange={handleChange}\n placeholder={Select Date}\n {...props}\n />\n
\n )\n}\n\nexport default PeriodSelector\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useTranslation} from \"react-i18next\";\n\n\nfunction SimpleCustomerSelector_v2({customer, showMobile, selectedCustomerId, list = [], loadList = true, onChange, menuFixPlacement = true, showAddNew = false, ...props }) {\n const [options, setOptions] = useState([])\n const [mounted, setMounted] = useState(true);\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()) || (o.mobileNo??\"\").toLowerCase().includes(inputValue.toLowerCase()))\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n }, 1)\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n }\n\n useEffect(() => {\n if (list.length === 0 && loadList) {\n service.Get(`/Defaults/Customers`, {}).then(response => response.data).then(data => {\n if(showAddNew){\n data.splice(0, 0,{recno: -1, text: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(data || [])\n })\n } else {\n let tempList = [...list];\n let tempAdd = tempList.find((e) => e.recno === -1);\n if(showAddNew && !tempAdd){\n tempList.splice(0, 0,{recno: -1, text: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(tempList || [])\n }\n }, [list.length])\n\n useEffect(() => {\n if(mounted) {\n setCustomerRecNo();\n }\n return () => {\n setMounted(false);\n }\n }, [selectedCustomerId])\n\n const setCustomerRecNo = () => {\n if (!!selectedCustomerId && (!customer || customer.recno !== selectedCustomerId)) {\n const url = '/Defaults/Customers'\n if (list.length && !loadList) {\n const i = list[list.findIndex(x => x.recno === selectedCustomerId)]\n if(i) {\n handlChange(i, {selected: true})\n }\n } else {\n service.Get(`${url}`, { Recno: selectedCustomerId }).then(response => response.data).then(data => {\n if (data.length > 0) {\n handlChange(data[0], { selected: true })\n }\n })\n }\n }\n }\n return (\n \n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option?.recno}\n getOptionLabel={(option) => ({showMobile && option.text !== \"+ Add New\" ? `${option.mobileNo??\"\"}-${option.text}` : option.text})}\n value={customer}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n />\n
\n )\n\n}\n\nexport default SimpleCustomerSelector_v2\n","import React, {useReducer, createContext, useEffect} from \"react\";\nimport axios from 'axios'\n\n// ** UseJWT import to get config\nimport useJwt from '@src/auth/jwt/useJwt'\n\nconst config = useJwt.jwtConfig\n\nconst initialValue = []\n\nconst reducer = (state, action) => {\n switch (action.type) {\n case 'LOAD_PURCHASE_INVOICE_DATA': {\n return {\n ...state,\n logo_info: (action.payload.data !== undefined ? action.payload.data.list || [] : []),\n }\n }\n default: {\n return { ...state }\n }\n }\n}\n\nconst CompanyLogoContext = createContext({\n logo_info: initialValue,\n getFile: () => {},\n deleteFile: () => {},\n uploadFile: () => {},\n uploadUserProfile: () => {},\n})\n\nexport const CompanyLogoProvider = ({children}) => {\n const [state, dispatch] = useReducer(reducer, {});\n\n const getFile = async (tanentId) => {\n const accessToken = localStorage.getItem(config.storageTokenKeyName);\n\n try {\n const options = {\n headers : {'Authorization': 'Bearer '+accessToken,\n 'Content-Type': 'application/x-www-form-urlencoded',\n }\n }\n\n const res = await axios.get(`/FileUpload/LIC,${tanentId}`, options);\n\n return res.data.data.list.length > 0 ? res.data.data.list[0] : null;\n } catch (e) {\n console.error(e)\n return null;\n }\n\n }\n\n const deleteFile = async (recNo) => {\n const accessToken = localStorage.getItem(config.storageTokenKeyName);\n\n try {\n const options = {\n headers : {'Authorization': 'Bearer '+accessToken,\n 'Content-Type': 'application/x-www-form-urlencoded',\n }\n }\n\n const res = await axios.delete(`/FileUpload/${recNo}`, options);\n\n return res.data;\n } catch (e) {\n console.error(e)\n return null;\n }\n\n }\n\n const uploadFile = async (data) => {\n const accessToken = localStorage.getItem(config.storageTokenKeyName);\n try {\n const options = {\n headers : {'Authorization': 'Bearer '+accessToken,\n 'Content-Type': 'multipart/form-data',\n }\n }\n\n const res = await axios.post(`/FileUpload`, data, options);\n\n return res.data;\n } catch (e) {\n console.error(e)\n return e;\n }\n\n }\n\n\n const uploadUserProfile = async (data) => {\n const accessToken = localStorage.getItem(config.storageTokenKeyName);\n try {\n const options = {\n headers : {'Authorization': 'Bearer '+accessToken,\n 'Content-Type': 'multipart/form-data',\n }\n }\n\n const res = await axios.post(`/UserProfile/UpdateProfileImage`, data, options);\n\n return res.data;\n } catch (e) {\n console.error(e)\n return e;\n }\n\n }\n\n useEffect(() => {\n // getJournalReport()\n }, [])\n\n return (\n \n\n
\n )\n\n}\n\nexport default Attachments\n","import { useContext } from \"react\"\nimport { CashVoucherContext } from \"../context/CashVoucherContext\"\n\nexport const useCashVoucher = () => {\n return useContext(CashVoucherContext)\n}","import * as service from \"@api/api.service\";\nimport { debounce, selectThemeColors } from \"@utils\";\nimport React, { useEffect, useState } from \"react\";\nimport AsyncSelect from \"react-select/async\";\nimport \"@styles/react/libs/react-select/_react-select.scss\";\nimport SidebarPartyForm from \"../views/apps/cost-centers/list/SidebarCostCenterForm\";\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n\tcontrol: (styles) => ({ ...styles }),\n\tmenu: (base) => ({\n\t\t...base,\n\t\twidth: \"max-content\",\n\t\tminWidth: \"100%\",\n\t}),\n};\n\nfunction CostCenterSelector_v2({\n\tselectedCostCenterRecno,\n\tlist = [],\n\tloadList = true,\n\tcostCenter,\n\tonChange,\n\tmenuFixPlacement = true,\n\t...props\n}) {\n\tconst [options, setOptions] = useState(list || []);\n\tconst [open, setOpen] = useState(false)\n\n\tconst {t} = useTranslation();\n\n\n\tconst loadOptions = debounce((inputValue, callback) => {\n\t\tconst filtered = options.filter(\n\t\t\t(o) =>\n\t\t\t\to.text.toLowerCase().includes(inputValue.toLowerCase()) ||\n\t\t\t\to.code.toLowerCase().includes(inputValue.toLowerCase())\n\t\t);\n\t\tcallback(filtered.length > 50 ? filtered.slice(0, 50) : filtered);\n\t}, 1);\n\n\tuseEffect(() => {\n\t\tif (list.length === 0 && loadList) {\n\t\t\tservice\n\t\t\t\t.Get(`/Defaults/CostCenters`, {})\n\t\t\t\t.then((response) => response.data)\n\t\t\t\t.then((data) => {\n\t\t\t\t\tsetOptions(data || []);\n\t\t\t\t});\n\t\t} else {\n\t\t\tlet tempList = [...list];\n\t\t\tsetOptions(tempList || []);\n\t\t}\n\t}, [list.length, loadList]);\n\n\tconst handlChange = (value, action) => {\n\t\tif(value.recno !== -1) {\n\t\t\tif (onChange) {\n\t\t\t\tonChange(value, action)\n\t\t\t}\n\t\t} else {\n\t\t\tsetOpen(true);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tif (!!selectedCostCenterRecno && !costCenter) {\n\t\t\tif (list.length && !loadList) {\n\t\t\t\tconst i = list[list.findIndex((x) => x.recno === selectedCostCenterRecno)];\n\t\t\t\thandlChange(i, { selected: true });\n\t\t\t} else {\n\t\t\t\tservice\n\t\t\t\t\t.Get(`/Defaults/CostCenters`, { Recno: selectedCostCenterRecno })\n\t\t\t\t\t.then((response) => response.data)\n\t\t\t\t\t.then((data) => {\n\t\t\t\t\t\tif (data.length > 0) {\n\t\t\t\t\t\t\thandlChange(data[0], { selected: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}, [selectedCostCenterRecno]);\n\n\treturn (\n\t\t\n {\n
\n \n setBasicModal(true)} className='h-100' size='sm' color='dark'>\n \n {attachments.length + tempAttachments.length}\n \n }\n \n
\n }\n \n\t\t\t{props.viewOnly ? (\n\t\t\t\t 50 ? options.slice(0, 50) : options)] : options.length > 50 ? options.slice(0, 50) : options}\n\t\t\t\t\tmenuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n\t\t\t\t\tloadOptions={loadOptions}\n\t\t\t\t\tgetOptionValue={(option) => option.recno}\n\t\t\t\t\tgetOptionLabel={(option) => {option.text}}\n\t\t\t\t\tvalue={costCenter??null}\n\t\t\t\t\tonChange={handlChange}\n\t\t\t\t\tplaceholder={t(\"Select Class\")}\n\t\t\t\t\t{...props}\n\t\t\t\t\tstyles={SelectStyles}\n\t\t\t\t/>\n\t\t\t)}\n\n\n\t\t\t{open &&\n\t\t\t setOpen(!open)}\n\t\t\t\tsetParty={(data) => {\n\t\t\t\t\tif(data) {\n\t\t\t\t\t\toptions.splice(0, 0, {recno: data.code, text: data.name})\n\t\t\t\t\t\tsetOptions([...options])\n\t\t\t\t\t\tonChange({recno: data.code, text: data.name}, true)\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tpreview={false}\n\t\t\t\tformTitle={\"Add Class\"}\n\t\t\t\tscreenName={'InventoryCostCenters'}\n\t\t\t\turi={'/InventoryCostCenters'}\n\n\t\t\t/>\n\t\t\t}\n\t\t
\n\t);\n}\n\nexport default CostCenterSelector_v2;\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useTranslation} from \"react-i18next\";\n\n\nfunction SimpleVendorSelector_v2({vendor, selectedVendorId, list = [], loadList = true, onChange, menuFixPlacement = true, showAddNew = false, ...props }) {\n const [options, setOptions] = useState([])\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()))\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n }, 1)\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n }\n\n useEffect(() => {\n if (list.length === 0 && loadList) {\n service.Get(`/Defaults/Vendors`, {}).then(response => response.data).then(data => {\n if(showAddNew){\n data.splice(0, 0,{recno: -1, text: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(data || [])\n })\n } else {\n let tempList = [...list];\n let tempAdd = tempList.find((e) => e.recno === -1);\n if(showAddNew && !tempAdd){\n tempList.splice(0, 0,{recno: -1, text: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(tempList || [])\n }\n }, [list.length])\n\n useEffect(() => {\n setCustomerRecNo();\n }, [selectedVendorId])\n\n const setCustomerRecNo = () => {\n if (!!selectedVendorId && (!vendor || vendor.recno !== selectedVendorId)) {\n const url = '/Defaults/Vendors'\n if (list.length && !loadList) {\n const i = list[list.findIndex(x => x.recno === selectedVendorId)]\n if(i) {\n handlChange(i, {selected: true})\n }\n } else {\n service.Get(`${url}`, { Recno: selectedVendorId }).then(response => response.data).then(data => {\n if (data.length > 0) {\n handlChange(data[0], { selected: true })\n }\n })\n }\n }\n }\n\n return (\n {costCenter?.text}
\n\t\t\t) : (\n\t\t\t\t\n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option?.recno}\n getOptionLabel={(option) => ({option.text})}\n value={vendor}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n />\n
\n )\n\n}\n\nexport default SimpleVendorSelector_v2\n","import { selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport Select from 'react-select'\nimport '@styles/react/libs/react-select/_react-select.scss'\n\nimport { useAppDefaults } from '@hooks/useAppDefaults'\nimport {IconButton} from \"@mui/material\";\nimport {Edit3, X} from \"react-feather\";\nimport {Button, Input, Label, Popover, PopoverBody, PopoverHeader} from \"reactstrap\";\nimport {useSkin} from \"@src/utility/hooks/useSkin\";\nimport {useTranslation} from \"react-i18next\";\n\nfunction CurrencyConvertor({ onChange, selectedCurrencyRecno, onDefaultCurrency, transactionCurrency, transactionCurrencyRate, updateTransactionRate, setUserRate, preview, ...props }) {\n\n const { defaultCurrency, currencies, loadTenantCurrencies } = useAppDefaults()\n const [currency, setCurrency] = useState(defaultCurrency)\n const [popoverOpen, setPopoverOpen] = useState(false)\n const skin = useSkin();\n const {t} = useTranslation()\n\n const handlChange = (value, action) => {\n setCurrency(value)\n if (onChange) {\n if(transactionCurrency?.recno !== value?.recno) {\n onChange(value, action)\n }\n }\n }\n\n useEffect(() => {\n if (!currencies || !currencies.length) {\n loadTenantCurrencies().then(data => {\n if (onDefaultCurrency) {\n const defCurrency = data.find(e => e.isDefaultCurrency)\n if (defCurrency) {\n onDefaultCurrency(defCurrency)\n }\n }\n })\n }\n }, [])\n\n useEffect(() => {\n if (!!selectedCurrencyRecno && currencies) {\n const currency = currencies.find(e => e.recno === selectedCurrencyRecno)\n if (currency) {\n handlChange(currency)\n }\n }\n }, [currencies, selectedCurrencyRecno])\n\n\n return (\n \n \n {t(\"Modified Rate for\")} {defaultCurrency?.code} {t(\"is\")}{\" \"}\n {(transactionCurrencyRate > 0 ? transactionCurrencyRate : 1)}\n
\n )}\n \n \n )\n\n}\n\nexport default CurrencyConvertor\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles }),\n menu: (base) => ({\n ...base,\n width: \"100%\",\n minWidth: \"100%\"\n })\n}\n\nfunction CashBankSelector_v2({ selectedAccountRecno, account, onChange, list = [], menuFixPlacement = true, setAccount, defaultCurrencyId, ...props }) {\n const [options, setOptions] = useState([])\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()))\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n\n }, 1)\n\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n }\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive) {\n let paramsData = {};\n\n if (defaultCurrencyId) {\n paramsData.DefaultCurrencyId = defaultCurrencyId;\n }\n if (list.length === 0) {\n service.Get(`/Defaults/DetailCashBankCOAList`, paramsData).then(response => response.data).then(data => {\n setOptions(data || [])\n })\n }\n }\n\n return () => {\n isActive = false;\n }\n }, [list.length, defaultCurrencyId])\n\n useEffect(() => {\n\n let isActive = true;\n\n if(isActive) {\n if (!!selectedAccountRecno && (!account || account.recno !== selectedAccountRecno)) {\n service.Get(`/Defaults/DetailCashBankCOAList`, {Recno: selectedAccountRecno}).then(response => response.data).then(data => {\n if (data.length > 0) {\n // handlChange(data[0], { selected: true })\n if (setAccount) {\n setAccount(data[0])\n } else {\n handlChange(data[0], true)\n }\n }\n })\n }\n }\n\n return () => {\n isActive = false;\n }\n }, [selectedAccountRecno])\n\n return (\n \n option.recno}\n getOptionLabel={(option) => ({option.code} ({option.symbol}) )}\n value={currency}\n onChange={handlChange}\n {...props}\n />\n
\n \n {defaultCurrency &&\n transactionCurrency &&\n defaultCurrency?.recno !== transactionCurrency?.recno && (\n \n 1 {transactionCurrency.code} = {\" \"}\n {(transactionCurrency.conversionRate)}{\" \"}\n {defaultCurrency.code} {\" \"}\n {!preview && (\n <>\n {\n setUserRate(transactionCurrencyRate);\n setPopoverOpen(!popoverOpen)\n }} sx={{borderRadius: 10}}>\n \n \n setPopoverOpen(!popoverOpen)}\n >\n \n \n \n \n setUserRate(+e.target.value)}\n />\n \n \n {\n updateTransactionRate(e)\n setPopoverOpen(false);\n }}\n >\n {t(\"Update\")}\n \n \n \n \n )}\n
\n )}\n {transactionCurrencyRate !==\n transactionCurrency?.conversionRate && defaultCurrency?.code && transactionCurrency && (\n \n \n {t(\"Edit Transaction Rate\")}\n \n setPopoverOpen(!popoverOpen)}\n />\n
\n \n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n theme={selectThemeColors}\n cacheOptions={true}\n getOptionValue={(option) => option.recno}\n getOptionLabel={(option) => ({option.text})}\n value={account}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n styles={SelectStyles}\n />\n
\n )\n\n}\nexport default CashBankSelector_v2\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState, memo} from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport InventoryCustomOption from './InventoryCustomOption'\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles }),\n menu: (base) => ({\n ...base,\n width: \"max-content\",\n minWidth: \"100%\"\n })\n}\n\nfunction InventoryItemSelector_v2({ selectedRecno, list = [], loadList = true, menuFixPlacement = true, item, setItem, onChange, formatMenu = false, currency, showAddNew = false, ...props }) {\n const [options, setOptions] = useState(list || [])\n\n const {t} = useTranslation();\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n }\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.name.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()))\n if (filtered.length === 0) {\n callback([])\n\n }\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n\n }, 1)\n\n useEffect(() => {\n if (list.length === 0 && loadList) {\n service.Get(`/Defaults/Inventory`, {type: props.purchase ? \"purchase\" : \"\"}).then(response => response.data).then(data => {\n if(showAddNew){\n data.splice(0, 0,{recno: -1, name: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(data || [])\n })\n } else {\n let newList = list.filter((e) => e.recno !== -1);\n if(showAddNew){\n newList.splice(0, 0,{recno: -1, name: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(newList)\n }\n }, [list.length, loadList])\n\n\n useEffect(() => {\n\n if (!!selectedRecno && (!item || item.recno !== selectedRecno)) {\n if (list.length && !loadList) {\n const i = list[list.findIndex(x => x.recno === selectedRecno)]\n if (setItem) {\n setItem(i)\n } else {\n handlChange(i, { selected: true })\n }\n\n } else {\n service.Get(`/Defaults/Inventory`, { Recno: selectedRecno }).then(response => response.data).then(data => {\n if (data.length > 0) {\n if (setItem) {\n setItem(data[0])\n } else {\n handlChange(data[0], { selected: true })\n }\n }\n })\n }\n }\n }, [selectedRecno, list.length])\n\n return (\n \n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option.recno}\n getOptionLabel={(option) => (formatMenu ?
\n )\n}\n\nexport default memo(InventoryItemSelector_v2)\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles }),\n menu: (base) => ({\n ...base,\n width: \"max-content\",\n minWidth: \"100%\"\n })\n}\n\nfunction AccountDetailSelector_v2({ selectedAccountRecno, account, showAddNew, onChange, setAccount, list = [], loadList = true, menuFixPlacement = true, ...props }) {\n const [options, setOptions] = useState([])\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n if(inputValue.trim() !== '') {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()))\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n } else {\n callback([])\n }\n }, 1)\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n }\n\n useEffect(() => {\n if (list.length === 0 && loadList === true) {\n service.Get(`/Defaults/DetailCOAList`, {}).then(response => response.data).then(data => {\n setOptions(data || [])\n })\n } else {\n setOptions(list)\n }\n }, [list.length])\n\n useEffect(() => {\n\n if (!!selectedAccountRecno && (!account || account.recno !== selectedAccountRecno)) {\n\n if (list.length && !loadList) {\n const i = list[list.findIndex(x => x.recno === selectedAccountRecno)]\n handlChange(i, { selected: true })\n // if (setAccount) {\n // setAccount(i)\n\n // } else {\n // }\n\n } else {\n service.Get(`/Defaults/DetailCOAList`, { Recno: selectedAccountRecno }).then(response => response.data).then(data => {\n if (data.length > 0) {\n if (setAccount) {\n setAccount(data[0])\n\n } else {\n handlChange(data[0], { selected: true })\n\n }\n }\n })\n }\n }\n }, [selectedAccountRecno])\n\n return props.viewOnly ?(\n ({account?.text??\"No Account Mapped\"})
\n ) : (\n\n 50 ? (showAddNew ? [{recno: -1, text: t(\"+ Add New\")}, ...options.slice(0, 50)] :options.slice(0, 50)) : (showAddNew ? [{recno: -1, text: t(\"+ Add New\")}, ...options] : options)}\n // cacheOptions={true}\n menuPosition={menuFixPlacement ? \"fixed\" : \"fi\"}\n loadOptions={loadOptions}\n theme={selectThemeColors}\n cacheOptions={true}\n getOptionValue={(option) => option.recno}\n getOptionLabel={(option) => ({option.text})}\n value={account}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n styles={SelectStyles}\n />\n
\n )\n\n}\nexport default AccountDetailSelector_v2\n","import * as service from \"@api/api.service\";\nimport { debounce, selectThemeColors } from \"@utils\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport AsyncSelect from \"react-select/async\";\nimport \"@styles/react/libs/react-select/_react-select.scss\";\nimport SidebarPartyForm from \"../views/settings/tax-types/shared-sidebar/SidebarPartyForm\";\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles }),\n};\n// setVendor\nfunction TaxTypeSelector_v2({ taxType, filterTaxes = [], selectedTaxTypeId, loadList = true, onChange, list = [], menuFixPlacement = true, viewOnly = false, ...props }) {\n const [options, setOptions] = useState([]);\n const [open, setOpen] = useState(false)\n const {t} = useTranslation();\n\n const selectRef = useRef();\n const loadOptions = debounce((inputValue, callback) => {\n let filtered = options.filter((o) => o.text.toLowerCase().includes(inputValue.toLowerCase()) || `${o.taxPercent ?? 0}`.toLowerCase().includes(inputValue.toLowerCase()));\n if (filtered.length === 0) {\n callback([]);\n }\n\n if(filterTaxes.length > 0) {\n let filterTList = [];\n\n for(let i = 0; i < filterTaxes.length; i++) {\n let obj = filtered.find((element) => `${element.value}` === `${filterTaxes[i]}`);\n if(obj) {\n filterTList.push(obj);\n }\n }\n\n filtered = filterTList;\n\n }\n\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered);\n }, 1);\n\n const handlChange = (value, action) => {\n if(value?.value !== -1) {\n if (onChange) {\n onChange(value, action)\n }\n } else {\n setOpen(true);\n }\n };\n\n useEffect(() => {\n if (list.length === 0 && loadList) {\n service\n .Get(`/Defaults/TaxTypes`, {})\n .then((response) => response.data)\n .then((data) => {\n if(filterTaxes.length > 0) {\n let filterTList = [];\n\n for(let i = 0; i < filterTaxes.length; i++) {\n let obj = data.find((element) => `${element.value}` === `${filterTaxes[i]}`);\n if(obj) {\n filterTList.push(obj);\n }\n }\n\n data = filterTList;\n\n }\n\n if(data.length > 0) {\n setOptions(data || []);\n }\n });\n } else {\n if(filterTaxes.length > 0) {\n let filterTList = [];\n\n for(let i = 0; i < filterTaxes.length; i++) {\n let obj = list.find((element) => `${element.value}` === `${filterTaxes[i]}`);\n if(obj) {\n filterTList.push(obj);\n }\n }\n\n list = filterTList;\n\n }\n setOptions(list);\n }\n }, [list.length, loadList, filterTaxes]);\n\n useEffect(() => {\n if (!!selectedTaxTypeId && (!taxType || taxType.value !== selectedTaxTypeId)) {\n const url = \"/Defaults/TaxTypes\";\n if (list.length && !loadList) {\n const i = list[list.findIndex((x) => x.value === selectedTaxTypeId)];\n handlChange(i, { selected: true });\n }\n else {\n service\n .Get(`${url}`, { Recno: selectedTaxTypeId })\n .then((response) => response.data)\n .then((data) => {\n if (data.length > 0) {\n handlChange(data[0], { selected: true });\n }\n });\n }\n }\n\n if(!selectedTaxTypeId){\n handlChange(null, { selected: true });\n }\n }, [selectedTaxTypeId]);\n\n return (\n <>\n {viewOnly ? (\n \n {taxType?.text}\n {taxType?.taxPercent ? `- ${taxType?.taxPercent}%` : \"\"}\n \n ) : (\n \n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option.value}\n getOptionLabel={(option) => (\n \n {option.text}\n {option.taxPercent !== undefined ? \" - \" : \"\"}\n {option.taxPercent}{option.taxPercent !== undefined ? \"%\" : \"\"}\n \n )}\n value={taxType??null}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n />\n
\n )}\n {open &&\n \n \n {/*\n \n {t(\"Change Logo of\")} {companyInfo?.name}\n \n \n \n \n \n \n {t(\"Change_Logo_Desc\")}\n \n \n \n \n \n {t(\"Save\")}\n \n \n */}\n
\n );\n}\n","import { useContext } from \"react\"\nimport CompanyLogoContext from '../../context/invoices/CompanyLogoContext'\n\nexport const useCompanyLogo = () => useContext(CompanyLogoContext)\n","import React from 'react'\nimport { Button, Modal, ModalHeader, Input, ModalBody, ModalFooter, Label, UncontrolledTooltip, Alert } from 'reactstrap'\n\nconst ConfirmModal = ({ title, message, onAccept, onClose, data, show, ...props }) => {\n\n return (\n \n\n onClose()} className='modal-dialog-centered'>\n onClose()}>{title ?? \"Are you Sure?\"} \n \n\n \n \n \n \n
\n )\n}\n\nexport default ConfirmModal\n","// ** Store Imports\nimport { useSelector } from 'react-redux'\n\n\nexport const useUser = () => {\n // ** Hooks\n const store = useSelector(state => state.auth)\n\n return { ...store, store }\n}\n","//** React Imports\nimport { useEffect } from 'react'\n\n// ** Store & Actions\nimport { handleRTL } from '@store/layout'\nimport { useDispatch, useSelector } from 'react-redux'\n\nexport const useRTL = () => {\n // ** Store Vars\n const dispatch = useDispatch()\n const isRtl = useSelector(state => state.layout.isRTL)\n\n // ** Return a wrapped version of useState's setter function\n const setValue = value => {\n dispatch(handleRTL(value))\n }\n\n useEffect(() => {\n // ** Get HTML Tag\n const element = document.getElementsByTagName('html')[0]\n\n // ** If isRTL then add attr dir='rtl' with HTML else attr dir='ltr'\n if (isRtl) {\n element.setAttribute('dir', 'rtl')\n } else {\n element.setAttribute('dir', 'ltr')\n }\n }, [isRtl])\n\n return [isRtl, setValue]\n}\n","// ** Reactstrap Imports\nimport {Button, Modal, ModalHeader, ModalBody, ModalFooter} from 'reactstrap'\nimport { Stack} from \"@mui/material\";\nimport * as React from \"react\";\nimport {useTranslation} from \"react-i18next\";\n\nconst SavingExitDialog = ({centeredModal, setCenteredModal, message, onSubmit}) => {\n const {t} = useTranslation();\n\n if(!message){\n message = t(`Are you sure you want to exit without saving.`) ;\n }\n\n\n return (\n {message}
\n- \n {\n data?.lineno > -1 &&\n
- Line No: {data?.lineno} \n }\n
- {data?.itemId ? (\"Item Name:\") : data?.coaId ? (\"Category Name:\") : \"\"} {data?.itemName??data?.coaName??\"\"} \n
\n
\n \n\n \n\n \n
\n \n
\n )\n}\nexport default SavingExitDialog","import { selectThemeColors } from '@utils'\nimport { Controller } from \"react-hook-form\"\nimport { FormFeedback, Input, Label } from \"reactstrap\"\n// ** Third Party Components\nimport Select from 'react-select'\nimport { Check, X } from 'react-feather'\nimport { useTranslation } from 'react-i18next'\n\n// The following component is an example of your existing Input Component\nexport const FormInput = ({ label, bsSize, fieldName, defaultValue, value, onChange, errors, message, size, type, ...props }) => {\n const { t } = useTranslation()\n\n return (\n <>\n \n \n setCenteredModal(!centeredModal)} className='modal-dialog-centered'>\n setCenteredModal(!centeredModal)}>{t(\"Warning\")} \n \n \n \n \n \n \n \n \n \n
\n {message}
\n\n { onChange({ [fieldName]: defaultValue }) }\n }\n {...props}\n />\n \n
\n )\n}\n\n// The following component is an example of your existing Input Component\nexport const FormSwitch = ({ label, fieldName, defaultValue, onChange, ...props }) => {\n const { t } = useTranslation()\n\n const CustomLabel = () => {\n return (\n \n )\n }\n\n return (\n <>\n \n \n {\n // onChange({ [fieldName]: e.target.checked })\n // }}\n {...props}\n />\n
\n {/* {errors && errors[fieldName] && {employee?.text}
:(\n\n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option.recno}\n getOptionLabel={(option) => ({option.text})}\n value={employee}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n />\n
\n )\n\n }\n\n export default EmployeeSelector_v2\n","import { useContext } from \"react\"\nimport SalesInvoiceContext from '../../context/invoices/SalesInvoiceContext'\n\nexport const useSalesInvoice = () => useContext(SalesInvoiceContext)\n","// ** React Imports\nimport { Fragment, useState } from 'react'\n\n// ** Reactstrap Imports\nimport {Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Label} from 'reactstrap'\nimport {Grid, Stack} from \"@mui/material\";\nimport {Plus, Settings} from \"react-feather\";\nimport * as React from \"react\";\nimport {useTranslation} from \"react-i18next\";\n\nconst VoidInvoiceModal = ({centeredModal, setCenteredModal, row, onVoidPayment, allowDelete, type = 0, message, title, isLoading = false}) => {\n const [comments, setComments] = useState(\"\");\n const { t } = useTranslation()\n\n if(!message){\n message = type ===0 ? (allowDelete ? \"Do you really want to delete this invoice?\": \"Do you really want to void this invoice? Please write reason in comments.\") : \"Do you really want to delete?\";\n }\n\n if(!title){\n title = `${allowDelete ? t(\"Delete\") : t(\"Void\")} ${row?.code??row?.Code??\"\"}`;\n }\n\n const voidPayment = () => {\n onVoidPayment(comments, row.recno);\n }\n\n return (\n \n
\n )\n}\nexport default VoidInvoiceModal\n","import { useSelector } from 'react-redux'\nexport const useMapAccounts = () => {\n const store = useSelector(state => state.mapAccounts)\n return { accounts: store.accounts }\n}\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useTranslation} from \"react-i18next\";\n\n\nfunction ProjectACustomerSelector_v2({forceReloadProjects, project, customerId, selectedProjectId, viewOnly, edit, list = [], loadList = true, onChange, menuFixPlacement = true, showAddNew = false, ...props }) {\n const [options, setOptions] = useState([])\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()))\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n }, 1)\n\n const handlChange = (value, action) => {\n if (onChange) {\n if(project?.recno !== value?.recno) {\n onChange(value, action)\n }\n }\n }\n\n useEffect(() => {\n if (list.length === 0 && loadList) {\n service.Get(`/Defaults/AllCustomersAndProjects`, {ProjectId: selectedProjectId, CustomerId: customerId, showAll: true}).then(response => response.data).then(data => {\n if(showAddNew){\n data.splice(0, 0,{recno: -1, text: t(\"+ Add New\"), code: \"\", level: 0 })\n }\n setOptions(data || [])\n\n if(selectedProjectId || customerId ) {\n let selectedProjectTemp = null;\n for(let i = 0; i < data.length; i++) {\n if(selectedProjectId && customerId){\n if (data[i].customerId === customerId && data[i].projectId === selectedProjectId) {\n selectedProjectTemp = data[i];\n break;\n }\n } else {\n if (data[i].customerId === customerId) {\n selectedProjectTemp = data[i];\n break;\n }\n }\n }\n onChange(selectedProjectTemp);\n }\n })\n } else {\n let tempList = [...list];\n let tempAdd = tempList.find((e) => e.recno === -1);\n if(showAddNew && !tempAdd){\n tempList.splice(0, 0,{recno: -1, text: t(\"+ Add New\"), code: \"\" })\n }\n setOptions(tempList || [])\n }\n }, [list.length, customerId, forceReloadProjects])\n\n useEffect(() => {\n setProjectRecNo();\n }, [selectedProjectId, customerId])\n\n const setProjectRecNo = () => {\n if (!!selectedProjectId || (!project || project.customerId !== customerId || project.projectId !== selectedProjectId) && customerId) {\n const url = `/Defaults/AllCustomersAndProjects`\n if (list.length && !loadList) {\n let i;\n if (selectedProjectId && customerId) {\n i = list[list.findIndex(x => (`${x.projectId}` === `${selectedProjectId}` && `${x.customerId}` === `${customerId}`))]\n } else {\n i = list[list.findIndex(x => `${x.customerId}` === `${customerId}`)];\n }\n if(i) {\n handlChange(i, {selected: true})\n }\n } else {\n service.Get(`${url}`, { ProjectId: selectedProjectId, CustomerId: customerId }).then(response => response.data).then(data => {\n if (data.length > 0) {\n handlChange(data[0], { selected: true })\n }\n })\n }\n }\n }\n return viewOnly ? \n setCenteredModal(!centeredModal)} className='modal-dialog-centered'>\n setCenteredModal(!centeredModal)}>{t(title)} \n \n \n \n \n {\n }}\n onChange={(e) => setComments(e.target.value)}\n className=\"form-control\"\n />\n }\n\n \n \n \n {\n isLoading ?\n :\n \n }\n \n \n
\n {t(message)}
\n {!allowDelete &&{project?.name}
: (\n\n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option?.recno}\n getOptionLabel={(option) => ({option.text})}\n value={project}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n />\n
\n )\n\n}\n\nexport default ProjectACustomerSelector_v2","import Avatar from '@components/avatar'\nimport { Fragment } from 'react'\nimport { CheckSquare } from 'react-feather'\nimport { Slide, toast } from 'react-toastify'\n\nconst ToastContent = ({ title, message, color = 'success', Icon = CheckSquare }) => (\n \n
\n \n
\n {title}
\n\n {message}\n
\n \n
\n )\n}\nexport default AddInventoryDialog\n","import { useContext } from \"react\"\nimport { CompanyContext } from \"./CompanyContext\"\n\nexport const useCompany = () => {\n return useContext(CompanyContext)\n}\n","// ** React Imports\n// ** Custom Components\nimport { useState } from 'react'\nimport * as service from '@api/api.service'\nimport Sidebar from '@components/sidebar'\nimport { useCan } from '@hooks/useCan'\nimport BlockingUI from '@src/components/BlockingUI'\nimport { FormInput } from '@src/components/FormInputs-v2'\nimport { fireMessage } from '@src/components/MessageModel'\nimport { ToasterSuccess } from '@src/components/ToastContent'\nimport '@styles/base/pages/app-invoice.scss'\n// ** Styles\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport { Save, Settings, X } from 'react-feather'\nimport { useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\n// ** Reactstrap Imports\nimport { Button, Form, Label, UncontrolledTooltip } from 'reactstrap'\nimport AreaSelector_v2 from '../../../../components/AreaSelector_v2'\n\n// import { Redirect } from 'react-router-dom'\n\nconst defaultValues = {\n recno: null,\n name: \"\",\n parentAreaId: 0\n}\n\nconst SidebarPartyForm = ({ open, toggleSidebar, party, setParty, preview, formTitle, screenName, uri, loadData }) => {\n // ** Hooks\n const ability = useCan()\n const { t } = useTranslation()\n // ** States\n const [loading, setLoading] = useState(false)\n const [formData, setFormData] = useState(Object.assign({},\n defaultValues,\n party\n ))\n const [selectedArea, setSelectedArea] = useState()\n\n const {\n clearErrors,\n formState: { errors }\n } = useForm({\n defaultValues: formData,\n formValues: formData\n })\n\n const handleArea = (value) => {\n setFormData({...formData, parentAreaId: value.value })\n setSelectedArea(value)\n }\n\n\n const handleFormData = (updatedData) => {\n setFormData(data => ({ ...data, ...updatedData }))\n clearErrors(Object.keys(updatedData))\n }\n\n const onSubmit = async data => {\n if ((!!party.recno && !ability.can('edit', screenName)) || (!party.recno && !ability.can('new', screenName))) {\n await fireMessage(t(\"You don't have rights for this action\"), t(\"Error...\"), 'error')\n return\n }\n\n try {\n setLoading(true)\n\n const response = await ((!!party.recno || !!party.recno) ? service.Put(uri, data) : service.Post(uri, data))\n setParty(response.data)\n\n ToasterSuccess({ title: t(formTitle), message: t(`${formTitle}`)+`${t(\"saved successful!\")}`})\n toggleSidebar()\n if(loadData) {\n loadData()\n }\n } catch (error) {\n await fireMessage(t(error), t(\"Error...\"), 'error', {t})\n } finally {\n setLoading(false)\n }\n\n }\n\n const CloseButton = () => {\n return (\n \n setOpen(!open)} className='modal-dialog-centered'>\n setOpen(!open)}>{t(\"Add Product/Service\")} \n \n \n \n
\n \n \n\n \n \n \n\n\n\n \n \n \n\n \n \n \n\n
\n\n
\n {t(\"Choose the option from below you want to add\")}
\n\n onSubmit('inventory')}>\n \n \n
\n {\"Inventory\"}
\n {t(\"Add Inventory Item\")}\n onSubmit('non-inventory')}>\n \n \n
\n {\"Non-Inventory\"}
\n {\"Add Non-Inventory Item\"}\n onSubmit('service-inventory')}>\n \n \n
\n {\"Service\"}
\n {\"Add Service Item\"}\n\n {!preview && ability.can(!!formData.recno ? 'edit' : 'new', screenName) &&\n <>\n \n \n {t('Save')}\n \n \n }\n\n \n {t(\"Cancel\")}\n \n\n
\n )\n }\n\n return (\n \n 50 ? options.slice(0, 50) : options}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option.value}\n getOptionLabel={(option) => ({option.text})}\n value={area??null}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n />\n\n {open &&\n setOpen(!open)}\n setParty={(data) => {\n if(data) {\n options.splice(0, 0, {value: data.recno, text: data.areaName})\n setOptions([...options])\n onChange({value: data.recno, text: data.areaName}, true)\n }\n }}\n preview={false}\n formTitle={\"Place of Supply\"}\n screenName={'Areas'}\n uri={'/Areas'}\n\n />\n }\n\n
\n )\n\n}\n\nexport default AreaSelector_v2\n","// ** React Imports\nimport { Fragment, useState } from 'react'\n\n// ** Reactstrap Imports\nimport {Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert, Label} from 'reactstrap'\nimport {Grid, Stack} from \"@mui/material\";\nimport {Plus} from \"react-feather\";\nimport * as React from \"react\";\nimport {useTranslation} from \"react-i18next\";\n\nconst InvoiceNoteDialog = ({centeredModal, setCenteredModal, state, setState}) => {\n const { t } = useTranslation()\n const [note, setNote] = useState(state.note??\"\");\n\n return (\n \n
\n )\n}\nexport default InvoiceNoteDialog\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport SidebarPartyForm from \"../views/apps/inventory/sub-category/shared-sidebar/SidebarPartyForm\";\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles })\n}\n\nfunction InventorySCategorySelector_v2({ selectedRecno, category, scategory, onChange, menuFixPlacement = true, ...props }) {\n const [options, setOptions] = useState([])\n const [open, setOpen] = useState(false)\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()))\n if (filtered.length === 0) {\n callback([])\n\n }\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n\n }, 1)\n\n const handlChange = (value, action) => {\n if(value?.recno !== -1) {\n if (onChange) {\n onChange(value, action)\n }\n } else {\n setOpen(true);\n }\n }\n\n useEffect(() => {\n if (category?.recno) {\n service.Get(`/Defaults/InventorySubCategories?CategoryId=${category?.recno}`, {}).then(response => response.data).then(data => {\n setOptions(data || [])\n })\n }\n }, [category])\n\n\n useEffect(() => {\n if (!!selectedRecno && category && (!scategory || scategory.recno !== selectedRecno)) {\n service.Get(`/Defaults/InventorySubCategories?CategoryId=${category?.recno}`, { Recno: selectedRecno }).then(response => response.data).then(data => {\n if (data.length > 0) {\n handlChange(data[0], { selected: true })\n }\n })\n }\n }, [selectedRecno, category])\n\n return (\n <>\n \n setCenteredModal(!centeredModal)} className='modal-dialog-centered'>\n Add Note \n \n \n \n \n setNote(e.target.value)}\n className=\"form-control\"\n />\n \n }\n\n \n \n \n {' '}\n \n \n
\n Please add note...
\n {\n![\"\"](\"/assets/images/logo.png\"){kind=logo}
: }\n \n \n {filename}\n */}\n
\n )\n}\n\nconst FormAttachment = ({formType, recno, className='ms-50 mb-0', modifyDisabled = false}) => {\n\n // ** Custom Tag\n const Tag = 'ul'\n\n // ** Hook\n const {t} = useTranslation();\n\n // ** State\n const [loading, setLoading] = useState(false)\n const [attachments, setAttachments] = useState([])\n const [selectedAttachment, setSelectedAttachment] = useState()\n const [showDelete, setShowDelete] = useState(false)\n const [files, setFiles] = useState([])\n\n useEffect(()=>{\n if(files.length > 0){\n uploadAttachment(files[0])\n }\n },[files])\n\n const uploadAttachment = async (file) => {\n\n try {\n setLoading(true);\n const formData = new FormData()\n formData.append('FormType', formType)\n formData.append('Recno', recno)\n formData.append(\"objfile\", file, file.name)\n const response = await service.Post('/FileUpload', formData)\n if(response.isSuccessFull){\n await fireMessage(t(\"File upload Successfully\"), t(\"Success...\"), \"success\", {t})\n setAttachments(attachments => [...attachments, ...response.data.list])\n setFiles([])\n }\n setLoading(false);\n } catch (error) {\n setLoading(false);\n await fireMessage(error, t(\"Attachment Error...\"), 'error')\n setFiles([])\n }\n }\n\n const loadAttachments = async () => {\n try {\n setLoading(true)\n const response = await service.Get(`/FileUpload/${formType},${recno}`)\n setLoading(false)\n setAttachments(response.data.list || [])\n } catch (error) {\n setLoading(false)\n await fireMessage(error, t(\"Attachment Error...\"), 'error')\n }\n }\n\n useEffect(() => {\n if (formType && recno) {\n loadAttachments()\n }\n }, [formType, recno])\n\n const handleAttachmentRemove = async (attachment, index) => {\n if (attachment) {\n setSelectedAttachment(attachment);\n setShowDelete(true);\n }\n }\n\n const deleteAttachments = async (attachment) => {\n try {\n setLoading(true)\n const data = await service.Delete(`/FileUpload/${attachment.recno}`)\n if (data.isSuccessFull) {\n await fireMessage(t(\"File Deleted Successfully\"), t(\"Success...\"), \"success\", {t})\n setAttachments(attachments => attachments.filter(a => a.recno !== attachment.recno))\n }\n setLoading(false)\n } catch (error) {\n setLoading(false)\n await fireMessage(error, t(\"Attachment Error...\"), 'error')\n }\n }\n\n return (\n \n openAttachment(e)} >\n
\n\n {/*\n {isImage ? : (\n
\n \n {attachment?.name}
\n\n {attachments.map((attachment, key) => {\n const ItemTag = 'li'\n const stateNum = Math.floor(Math.random() * 9);\n return (\n \n \n {key+1}\n \n
\n \n \n \n \n {!modifyDisabled &&\n handleAttachmentRemove(attachment, key)}\n />\n }\n \n {new Date(attachment.uploadDate).toDateString()}\n
\n \n )\n })}\n \n\n \n\n\n \n\n
\n \n {\n props.viewOnly ? 50 ? (showAddNew ? [{recno: -1, text: t(\"+ Add New\")}, ...options.slice(0, 50)] :options.slice(0, 50)) : (showAddNew ? [{recno: -1, text: t(\"+ Add New\")}, ...options] : options)}\n menuPosition={menuFixPlacement ? \"fixed\" : \"absolute\"}\n loadOptions={loadOptions}\n getOptionValue={(option) => option.recno}\n getOptionLabel={(option) => ({option.text})}\n value={account}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n styles={SelectStyles}\n />}\n {\n open &&\n \n {\n if(data) {\n setOptions([{recno: data?.recno, text: data?.text}, ...options])\n onChange({recno: data?.recno, text: data?.text})\n }\n }}\n closeDrawer={() => {\n setOpen(false)\n }}\n />\n \n }\n
\n )\n\n}\n\nexport default DetailCOAListSelector_v2\n","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useTranslation} from \"react-i18next\";\nimport axios from \"axios\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles })\n}\n\nfunction WorkOrderSelector_v2({ selectedRecno, workorder, onChange, list = [], menuFixPlacement = true, showAddNew= false, ...props }) {\n const [options, setOptions] = useState([])\n const source = axios.CancelToken.source();\n\n const {t} = useTranslation();\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.itemName.toLowerCase().includes(inputValue.toLowerCase()) || o.code.toLowerCase().includes(inputValue.toLowerCase()))\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n\n }, 1)\n\n const handlChange = (value, action) => {\n if (onChange) {\n onChange(value, action)\n }\n }\n\n useEffect(() => {\n if (list.length === 0) {\n // service.Get(`/WorkOrders/List`, {}).then(response => response.data.list).then(data => {\n // if(showAddNew){\n // data.splice(0, 0,{recno: -1, itemName: t( \"+ Add New\"), description: t('Work Order'), code: \"\" })\n // }\n // setOptions(data || [])\n // })\n } else {\n let tempAdd = list.find((e) => e.recno === -1);\n if(showAddNew && !tempAdd){\n list.splice(0, 0,{recno: -1, itemName: t(\"+ Add new\"), description: t('Work Order'), code: \"\" })\n }\n setOptions(list)\n }\n\n\n return () => {\n source.cancel(\"Work Order Canceled\");\n setOptions([])\n }\n }, [list.length])\n\n useEffect(() => {\n // if (!!selectedRecno && (!workorder || workorder.recno !== selectedRecno)) {\n // service.Get(`/WorkOrders/List`, { Recno: selectedRecno }).then(response => response.data.list).then(data => {\n // if (data.length > 0) {\n // handlChange(data[0], { selected: true })\n // }\n // })\n // }\n }, [selectedRecno])\n\n return (\n {account?.text??\"\"}
:\n{separator}
: null}\n {renderHeader()}
\n {renderContent()}
\n \n )\n})\n\nexport default Wizard\n\n// ** Default Props\nWizard.defaultProps = {\n options: {},\n type: 'horizontal',\n separator: \n
\n \n {t(\"Branch Bank\")}
\n {t(isAdd ? \"Add\" : \"Edit\")} {t(\"Bank Details.\")}\n\n
\n )\n}\nexport default FormColumnCustomizer","import * as service from '@api/api.service'\nimport { debounce, selectThemeColors } from '@utils'\nimport React, { useEffect, useState } from 'react'\nimport AsyncSelect from 'react-select/async'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport SidebarPartyForm from \"../views/apps/credit-terms/list/SidebarCreditTerms\";\nimport {useTranslation} from \"react-i18next\";\n\nconst SelectStyles = {\n control: (styles) => ({ ...styles }),\n menu: (base) => ({\n ...base,\n width: \"max-content\",\n minWidth: \"100%\"\n })\n}\n\nfunction CreditTermsSelector({ selectedRecno, selectedTerm, onChange, auto_width = false, menuFixPlacement = true, clearable = false, ...props }) {\n const [options, setOptions] = useState( [])\n const [open, setOpen] = useState(false)\n const {t} = useTranslation();\n\n\n const loadOptions = debounce((inputValue, callback) => {\n const filtered = options.filter(o => o.text.toLowerCase().includes(inputValue.toLowerCase()) || o.defaultValue.toLowerCase().includes(inputValue.toLowerCase()))\n\n callback(filtered.length > 50 ? filtered.slice(0, 50) : filtered)\n\n }, 1)\n\n const handleChange = (value, action) => {\n if(value.value !== -1) {\n if (onChange) {\n onChange(value, action)\n }\n } else {\n setOpen(true);\n }\n }\n\n useEffect(() => {\n service.Get(`/Defaults/InvoiceCreditTerms`, {}).then(response => response.data).then(data => {\n setOptions(data || [])\n })\n }, [])\n\n useEffect(() => {\n if (!!selectedRecno && (!selectedTerm || selectedTerm.recno !== selectedRecno)) {\n service.Get(`/Defaults/InvoiceCreditTerms`, { Recno: selectedRecno }).then(response => response.data).then(data => {\n if (data.length > 0) {\n if(data[0].value === selectedRecno) {\n handleChange(data[0], {selected: true})\n }\n }\n })\n }\n }, [selectedRecno])\n\n return (\n <>\n \n setOpen(!open)} className='modal-dialog-centered'>\n setOpen(!open)}> \n \n \n {\n let updatedCols = [];\n for (let a = 0; a < columns.length; a++) {\n let tempCol = {...columns[a], columnSeq: a}\n updatedCols.push(tempCol);\n }\n console.log(JSON.stringify(updatedCols));\n setColumns([...updatedCols]);\n }}>\n {\n (columns || []).map((e, index) => {\n return (\n \n \n handleChangeColumns(index, {columnsLength: parseInt(event.target.value)})}\n />\n \n handleChangeColumns(index, {columnDescription: event.target.value})}\n />\n \n
\n \n )\n })\n }\n \n \n
\n \n \n
\n \n
\n {t(\"Column Customization\")}
\n{t(\"Set columns visibility in line items\")}
\n\n handleChangeColumns(index, {isShow: event.target.checked})}/>\n \n
\n \n \n \n
\n {/*\n \n
\n\n \n \n
\n*/}\n \n \n
\n\n\n {/* {filterList?.map(item => {\n return (\n \n
\n )\n })} */}\n\n\n \n \n
\n \n \n
\n \n \n
\n\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n {/*\n \n
\n \n \n
*/}\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n\n )\n}\n\nexport default DetailRowTitle\n","import CostLocationSelector_v2 from '@src/components/CostLocationSelector_v2'\nimport '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport { useState, useEffect } from 'react'\n// ** Styles\nimport 'react-slidedown/lib/slidedown.css'\nimport CostCenterSelector_v2 from '@src/components/CostCenterSelector_v2'\nimport InventoryItemSelector_v2 from '@src/components/InventoryItemSelector_v2'\n\nconst DetailRow = ({ handleInvoiceDetail, ...props }) => {\n\n const { srNo, data, preview, inventoryItems, sourceType, handleEditDetail, costLocations, costCenterList, transactionCurrencyRate, onHandleCopyItem } = props\n const [item, setItem] = useState()\n\n const cvalue = (value) => {\n return isNaN(parseFloat(value)) ? 0 : parseFloat(value)\n }\n\n const handleItem = (record) => {\n setItem(record)\n const det = { ...data }\n det.rate = cvalue(det.rate) * cvalue(transactionCurrencyRate)\n const exAmount = cvalue(det.qty) * cvalue(det.rate)\n const totalAmount = cvalue(det.qty) * cvalue(det.rate)\n det.exAmount = parseFloat(exAmount).toFixed(2)\n det.discountAmount = ((det.discountType === \"\" || det.discountType === \"%\" || det.discountType === \"DT\") ? (exAmount * (cvalue(det.discountValue) / 100)) : (det.qty * cvalue(det.discountValue)))\n det.discountAmount = parseFloat(det.discountAmount).toFixed(2)\n det.totalAmount = totalAmount\n det.exAmount = parseFloat(exAmount - det.discountAmount).toFixed(2)\n det.transactionCurrencyConversionRate = transactionCurrencyRate\n\n if (det.invoiceTaxType === \"Exclusive\") {\n det.taxAmount = cvalue(parseFloat(det.taxPer ? parseFloat(parseFloat(det.exAmount) * (det.taxPer / 100)) : 0))\n det.inAmount = cvalue((parseFloat(det.exAmount) + parseFloat(det.taxAmount)).toFixed(2))\n\n } else {\n\n det.taxAmount = cvalue(parseFloat(det.exAmount) - ((parseFloat(det.exAmount) * 100) / (100 + parseFloat(det.taxPer))))\n det.inAmount = cvalue(det.exAmount)\n\n }\n\n det.cLocation = det.costLocationId\n det.discountVal = det.discountValue\n det.sourceno = det.pno ?? det.sno ?? det.id\n det.sourceLocation = det.location\n det.sourceFyear = det.fyear\n det.sLine = det.lineNo\n det.source = sourceType\n det.isNewAdded = true\n delete det.lineNo\n\n handleEditDetail({\n itemId: record?.recno,\n code: record.code,\n transactionCurrencyRate: exAmount,\n ...det\n }, srNo)\n }\n\n const handleOnChangeInvoiceDetail = (e) => {\n const { name, value } = e.target\n handleEditDetail({ ...data, [name]: value }, srNo)\n }\n\n useEffect(() => {\n setItem(inventoryItems?.find(v => v.recno === data.itemId))\n }, [inventoryItems, costCenterList, costLocations, data.itemId, data.costCenter, data.cLocation])\n\n useEffect(() => {\n if (data && data.recno) {\n handleInvoiceDetail({}, srNo)\n }\n }, [data.recno])\n\n return data.isDeleted ? <> : (\n <>\n
\n
\n\n \n\n {!data.disabled && onHandleCopyItem(!data.selected, srNo)}\n />}\n
\n \n
\n \n \n handleOnChangeInvoiceDetail({ target: { name: e.target.name, value: e.target.value !== \"\" ? +e.target.value : \"\" } })}\n disabled={preview}\n />\n
\n \n \n handleOnChangeInvoiceDetail({ target: { name: e.target.name, value: e.target.value !== \"\" ? +e.target.value : \"\" } })}\n disabled={preview}\n />\n
\n \n \n handleOnChangeInvoiceDetail({ target: { name: e.target.name, value: e.target.value !== \"\" ? +e.target.value : \"\" } })}\n disabled={preview}\n />\n
\n \n \n handleOnChangeInvoiceDetail({ target: { name: e.target.name, value: e.target.value !== \"\" ? +e.target.value : \"\" } })}\n disabled={preview}\n />\n
\n \n \n handleOnChangeInvoiceDetail(e)}\n account={item}\n >\n \n \n \n \n
\n \n \n handleOnChangeInvoiceDetail({ target: { name: e.target.name, value: e.target.value !== \"\" ? +e.target.value : \"\" } })}\n disabled={preview}\n />\n
\n \n \n handleOnChangeInvoiceDetail(e)}\n disabled={preview}\n />\n
\n\n {/*\n\n \n
\n\n \n
\n\n \n\n \n
\n\n*/}\n \n
\n\n \n \n handleOnChangeInvoiceDetail(e)}\n />\n
\n \n \n handleOnChangeInvoiceDetail(e)}\n >\n \n \n \n \n
\n \n \n handleOnChangeInvoiceDetail({ target: { name: e.target.name, value: e.target.value !== \"\" ? +e.target.value : \"\" } })}\n />\n
\n \n \n handleOnChangeInvoiceDetail(e)}\n />\n
\n\n \n \n\n )\n}\n\nexport default DetailRow\n","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport SimpleVendorSelector_v2 from '@src/components/SimpleVendorSelector_v2'\nimport DatePickr from '@src/components/DatePickr'\n\nconst VISearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, vendorList, handleCustomerOrVendor, customerOrVendorValue,\n doSearch,\n closeDetails,\n loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n setData({ ...data, vendorId: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n
\n \n
\n\n )\n}\n\nexport default VISearchBar","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport SimpleVendorSelector_v2 from '@src/components/SimpleVendorSelector_v2'\nimport DatePickr from '@src/components/DatePickr'\n\nconst POSearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, vendorList, handleCustomerOrVendor, customerOrVendorValue, doSearch, closeDetails, loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n setData({ ...data, vendorId: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n \n \n
\n\n )\n}\n\nexport default POSearchBar","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport DatePickr from '@src/components/DatePickr'\nimport EmployeeSelector_v2 from '../../EmployeeSelector_v2'\n\nconst DESearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, handleCustomerOrVendor, customerOrVendorValue, doSearch, closeDetails, loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n setData({ ...data, employee: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n \n \n
\n\n )\n}\n\nexport default DESearchBar","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport SimpleVendorSelector_v2 from '@src/components/SimpleVendorSelector_v2'\nimport DatePickr from '@src/components/DatePickr'\n\nconst PRSearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, vendorList, handleCustomerOrVendor, customerOrVendorValue,\n doSearch,\n closeDetails,\n loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n setData({ ...data, vendorId: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n \n \n
\n\n )\n}\n\nexport default PRSearchBar","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport SimpleVendorSelector_v2 from '@src/components/SimpleVendorSelector_v2'\nimport DatePickr from '@src/components/DatePickr'\n\nconst GRNSearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, vendorList, handleCustomerOrVendor, customerOrVendorValue,\n doSearch,\n closeDetails,\n loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n setData({ ...data, vendorId: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n \n \n
\n\n )\n}\n\nexport default GRNSearchBar","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport SimpleCustomerSelector_v2 from '@src/components/SimpleCustomerSelector_v2'\nimport DatePickr from '@src/components/DatePickr'\n\nconst SISearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, vendorList, handleCustomerOrVendor, customerOrVendorValue,\n doSearch,\n closeDetails,\n loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n setData({ ...data, customerId: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n \n \n
\n\n )\n}\n\nexport default SISearchBar","import React, { useState } from 'react'\nimport { Button, Form, Input, Label } from 'reactstrap'\nimport SimpleCustomerSelector_v2 from '@src/components/SimpleCustomerSelector_v2'\nimport DatePickr from '@src/components/DatePickr'\n\nconst ESTSearchBar = ({ handleChange, data, clearSearch, setData, clearDetails, vendorList, handleCustomerOrVendor, customerOrVendorValue,\n doSearch,\n closeDetails,\n loadDetails, detailList }) => {\n\n const [selectedVendor, setSelectedVendor] = useState()\n const handleClearSearch = () => {\n clearSearch()\n setSelectedVendor(null)\n setData({})\n clearDetails()\n }\n\n const handlePicker = (name, value) => {\n setData(data => ({ ...data, [name]: value }))\n }\n\n const handleVendor = (value) => {\n if(value){\n handleCustomerOrVendor(selectedVendor)\n }\n setData({ ...data, customerId: value.recno })\n setSelectedVendor(value)\n }\n\n\n return (\n\n \n \n
\n\n )\n}\n\nexport default ESTSearchBar","//** React imports\nimport { useEffect, useState } from 'react'\n\n// ** Reactstrap Imports\nimport { Col, Row } from 'reactstrap'\n\n// ** Custom Components\nimport Sidebar from '@components/sidebar'\nimport DetailRowTitle from './DetailRowTitle'\nimport DetailRow from './DetailRow'\nimport VISearchBar from './SearchBars/VISearchBar'\nimport POSearchBar from './SearchBars/POSearchBar'\nimport DESearchBar from './SearchBars/DESearchBar'\nimport PRSearchBar from './SearchBars/PRSearchBar'\nimport GRNSearchBar from './SearchBars/GRNSearchBar'\nimport SISearchBar from './SearchBars/SISearchBar'\nimport ESTSearchBar from \"./SearchBars/ESTSearchbar\";\n\nconst CopyFromSearchBar = ({ open, type, toggleSidebar, vendorList, handleInvoiceDetail, handleCustomerOrVendor, customerOrVendorValue, handleEditDetail, doSearch, onHandleCopyItem, transactionCurrencyRate, selectedAll, onHandleSelectDeselectAll, clearSearch, clearDetails, closeDetails, detailList, loadDetails, inventoryItems, costCenterList, costLocations }) => {\n const [data, setData] = useState({})\n\n const handleChange = (e) => {\n e.preventDefault()\n const { name, value } = e.target\n setData(data => ({ ...data, [name]: value }))\n }\n\n let Form = () => \n if (type === \"IPV\") {\n Form = VISearchBar\n } else if (type === \"PO\") {\n Form = POSearchBar\n } else if (type === \"DMD\") {\n Form = DESearchBar\n } else if (type === \"PR\") {\n Form = PRSearchBar\n } else if (type === \"GRN\") {\n Form = GRNSearchBar\n } else if (type === \"INV\") {\n Form = SISearchBar\n } else if (type === \"Estimate\") {\n Form = ESTSearchBar\n }\n\n useEffect(() => {\n doSearch(data)\n }, [])\n\n return (\n \n \n \n
\n\n {detailList?.map((row, index) => (\n\n \n
\n \n {t(\"Journal\")}\n
\n {documentJournalLedger.length > 0 ?\n \n {t(`Amount is displayed in your base currency `)}\n {defaultCurrency?.code}\n :\n message && \n {t(\"Journal entries will not be available until approvals completed.\")}\n \n }\n\n {t(\"ACCOUNT\")}\n | \n \n {t(\"DEBIT\")}\n | \n \n {t(\"CREDIT\")}\n | \n
| \n {t(`${journal.COA_Name}`)} \n | \n \n {t(`${journal.dr > 0 ? formatCurrency(journal.dr, {code: \"\"}, false) : \"-\"}`)} \n | \n \n {t(`${journal.cr > 0 ? formatCurrency(journal.cr, {code: \"\"}, false) : \"-\"}`)} \n | \n
| \n | \n {totalDr} \n | \n \n {totalCr} \n | \n
\n {/* InventoryCustomOption */}\n {/* 
*/}\n
\n\n \n {/* contentx */}\n
\n {name}
\n \n
\n {code}
\n \n
\n\n \n
\n Purchase({currency?.symbol}) : {(purchaseRate ?? 0 * currency?.conversionRate ?? 1).toFixed(2)}
\n \n
\n Sale({currency?.symbol}) : {(data?.saleRate ?? 0 * currency?.conversionRate ?? 1).toFixed(2)}
\n \n
\n \n
\n {data?.barCode ? `Brcode: ${data?.barCode}` : ''}
\n \n
\n Billing Address
\n\n {\n loading ? :\n \n }\n
\n \n
\n Shipping Address
\n\n {\n loading ? :\n \n }\n
\n \n
\n TRN
\n\n {\n loading ? :\n \n }\n
\n ({account?.tagOptionName??\"\"})
\n ) : (\n\n 50 ? options.slice(0, 50) : options}\n // cacheOptions={true}\n menuPosition={menuFixPlacement ? \"fixed\" : \"fi\"}\n loadOptions={loadOptions}\n theme={selectThemeColors}\n cacheOptions={true}\n getOptionValue={(option) => option.tagOptionId}\n getOptionLabel={(option) => ({option.tagOptionName})}\n value={account}\n onChange={handlChange}\n placeholder={t(\"Select...\")}\n {...props}\n styles={SelectStyles}\n />\n
\n )\n\n}\n\nexport default ReportingTagsSelector\n","// ** React Imports\nimport * as React from \"react\";\nimport {useState} from 'react'\n\n// ** Reactstrap Imports\nimport {\n Button,\n Col, Label,\n Modal,\n ModalBody,\n ModalHeader,\n Row\n} from 'reactstrap'\n\n// ** Translation Imports\nimport {useTranslation} from \"react-i18next\";\n\n// ** Icon Imports\nimport {Save, Settings} from \"react-feather\";\n\n// ** Context Imports\n// import {useVendorInvoice} from \"../context/useVendorInvoice\";\n\n// ** Store\nimport ReportingTagsSelector from \"./ReportingTagsSelector\";\n\nconst ReportingTagsDialog = ({handleInvoiceDetail, reportingTagsArray, setReportingTagsArray,rowIndex,setRowIndex, options, account, setAccount}) => {\n\n // ** Hook\n const {t} = useTranslation();\n // const { handleInvoiceDetail } = useVendorInvoice()\n\n // ** State\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async () => {\n setLoading(true)\n\n handleInvoiceDetail({tags: reportingTagsArray}, rowIndex)\n handleToggle()\n setLoading(false)\n }\n\n const handleToggle = () => {\n setAccount([])\n setRowIndex(-1)\n }\n\n const handleReportingTags = (tagId, record, index) => {\n\n account[index] = record;\n setAccount([...account])\n\n setReportingTagsArray(prevArr => {\n if (!record || Object.keys(record).length === 0) {\n // Remove the element that matches the tagId\n return prevArr.filter(element => element.tagId !== tagId);\n } else {\n // Find if the element exists\n const elementExists = prevArr.some(element => element.tagId === tagId);\n\n // If it exists, update it\n if (elementExists) {\n return prevArr.map(element =>\n element.tagId === tagId ? { ...element, optionId: record.tagOptionId, tagOptionName: record.tagOptionName } : element\n );\n } else {\n // If it does not exist, add it\n return [...prevArr, { tagId, optionId: record.tagOptionId, tagOptionName: record.tagOptionName }];\n }\n }\n });\n }\n\n return (\n <>\n \n
\n {t('Reporting Tags')}
\n\n {\n loading ? :\n \n }\n
\n \n
\n Billing Address
\n\n {\n loading ? :\n \n }\n
\n \n
\n Shipping Address
\n\n {\n loading ? :\n \n }\n
\n \n
\n TRN
\n\n {\n loading ? :\n \n }\n
\n {t(`Please add Revenue Account to ${record.name}`)}
,\n \"\",\n \"warning\",\n {\n showCloseButton: true,\n showCancelButton: true,\n focusConfirm: true,\n confirmButtonText: 'Quick Add',\n cancelButtonText: 'Close'\n }\n ).then(results => {\n\n if (results.isConfirmed) {\n toggleQuickAddBar('inventory_add', record.recno)\n }\n\n })\n }, [100])\n return\n }\n setItem(record)\n let saving_data = {};\n if (((record.salesTaxTypeId && record.salesTaxTypeId !== 0) || (vendorInvoice.taxType && vendorInvoice.taxType !== 0)) && userData.isTaxRegistered ) {\n let taxObj = (record.salesTaxTypeId && record.salesTaxTypeId !== 0) ? record : vendorInvoice;\n if(taxObj.salesTaxTypeId){\n taxObj.taxType = taxObj.salesTaxTypeId;\n }\n taxTypeList.map((savedTax) => {\n if (savedTax.value === taxObj.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n }\n })\n }\n\n\n let subUnitIndex = (record?.subUnits??[]).findIndex((ele) => !ele.isDefault);\n let subUnit = null;\n if(subUnitIndex > -1) {\n subUnit = record?.subUnits[subUnitIndex]\n }\n\n let defaultSubUnitIndex = (record?.subUnits??[]).findIndex((ele) => ele.isDefault);\n let defaultSubUnit = null;\n if(subUnitIndex > -1) {\n defaultSubUnit = record?.subUnits[defaultSubUnitIndex]\n }\n\n\n handleInvoiceDetail({\n itemId: record?.recno,\n qty: 1,\n uomList: (record?.subUnits??[]),\n unitId: record?.unit,\n subUnitId: subUnit?.recno??null,\n unitFraction: subUnit?.ratio??1,\n subUnitQty: subUnit?.ratio??1,\n subUnitDefaultId: defaultSubUnit?.recno??null,\n itemName: record?.name,\n code: record.code,\n sRemarks: record.description,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: getTransactionalRate(record.saleRate, transactionCurrencyRate, roundingDigit),\n subUnitTransactionRate: getTransactionalRate(record.saleRate, transactionCurrencyRate, roundingDigit)/(subUnit?.ratio??1),\n ...saving_data,\n itemTaxType: record?.salesTaxType??\"Inclusive\",\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n }\n }\n\n const handleTaxType = (record) => {\n setTaxType(record)\n handleInvoiceDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }\n\n const handleCostLocation = (record) => {\n setCostLocation(record)\n handleInvoiceDetail({cLocation: record?.recno}, srNo)\n }\n\n const handleCostCenter = (record) => {\n setCostCenter(record)\n handleInvoiceDetail({costCenter: record?.recno}, srNo)\n }\n\n const handleOnChange = (e) => {\n const {name, value} = e.target\n handleInvoiceDetail({[name]: value}, srNo)\n }\n\n useEffect(() => {\n const error = ((data.discountVal > 100 && data.discountType === \"%\") || ((data.discountVal > (data.qty * data.transactionCurrencyRate)) && data.discountType === \"@\"))\n handleInvoiceDetail({invalidDiscount: error}, srNo)\n }, [data.transactionCurrencyRate, data.qty, data.discountVal, data.discountType])\n\n useEffect(() => {\n if (data.balanceQty) {\n const error = (data.qty ?? 0) > data.balanceQty\n handleInvoiceDetail({invalidQty: error}, srNo)\n }\n\n }, [data.qty])\n\n\n useEffect(() => {\n setItem(inventoryItems.find(v => v.recno === data.itemId) ?? null)\n setCostCenter(costCenterList.find(v => v.recno === data.costCenter ?? null))\n setCostLocation(costLocations.find(v => v.recno === data.cLocation ?? null))\n if(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits??[]).length > 0) {\n if(!uom) {\n setUom(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? []).find(v => v.recno === data.subUnitId ?? null))\n if((data.uomList??[]).length <= 0) {\n handleInvoiceDetail({uomList: ((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? [])}, srNo);\n }\n }\n }\n }, [costCenterList, costLocation, workorders, inventoryItems, data.itemId, data.workOrderId, data.cLocation, data.cLocation, data.taxType])\n\n return colum === \"lineno\" ? (\n onClickRow(srNo)}>{srNo+1}
\n ) : colum === \"itemId\" ? (\n props.allowEdit && !(data.isBillableLine??false) ?\n
: {\n setRowIndex(srNo)\n }}>\n
\n
\n ) : colum === \"unitFraction\" ? (\n props.allowEdit ? onClickRow(srNo)}>{item?.name}
\n {item?.name && data?.tags?.length > 0 && onClickRow(srNo)}>
\n
: onClickRow(srNo)}>{data?.unitFraction > 0 ? data?.unitFraction : \"\"}
\n ) : colum === \"subUnitQty\" ? (\n props.allowEdit ?\n {\n let value = checkAndSetNumVal(e, data.subUnitQty, roundingDigit).target.value;\n handleInvoiceDetail({subUnitQty: value, transactionCurrencyRate: 0, subUnitTransactionRate: 0}, srNo)\n }}\n disabled={preview}\n />\n
: onClickRow(srNo)}>{data?.subUnitQty > 0 ? data?.subUnitQty : \"\"}
\n ) : colum === \"qty\" ? (\n props.allowEdit ?\n {\n let {value} = checkAndSetNumVal(e, data.qty, roundingDigit).target;\n handleInvoiceDetail({qty: (value??1), subUnitQty: parseFloat(`${value??1}`) * (data.unitFraction??1)}, srNo)\n }}\n disabled={preview}\n />\n
: onClickRow(srNo)}>{data?.qty > 0 ? data?.qty : \"\"}
\n ) : colum === \"sRemarks\" ? (\n props.allowEdit ? 10 ? (data.sRemarks?.length??1)/10 : 1}\n name='sRemarks'\n placeholder='Description'\n value={data?.sRemarks??\"\"}\n onChange={e => {\n if((e.target.value??\"\").length > 4000) {\n return;\n }\n handleOnChange({target: {name: e.target.name, value: e.target.value}})\n }}\n disabled={preview}\n />
: <>onClickRow(srNo)}\n style={{padding: '0px', width: '100%', display: 'flex', minWidth: '100%', margin: 0}}\n id={`tooltip-for-remarks-${srNo}`}>\n
\") }} />\n \n\n
\n : onClickRow(srNo)} style={{width: '100%', textAlign: 'left'}}>{uom?.description??\"\"}
\n ) : colum === \"transactionCurrencyRate\" ? (\n props.allowEdit ?\n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n return;\n }\n let event = checkAndSetNumVal(e, data.transactionCurrencyRate, 13);\n let { value } = event.target;\n\n handleInvoiceDetail({transactionCurrencyRate: value, subUnitTransactionRate: ((value / ((data.subUnitQty??1)/(data.qty??1)))) }, srNo)\n }}\n disabled={preview}\n />
:\n onClickRow(srNo)} style={{height: 'fit-content', display: 'flex', flexDirection: 'column'}}>\n
\n ) : colum === \"subUnitTransactionRate\" ? (\n props.allowEdit ? {data?.transactionCurrencyRate > 0 ? data?.transactionCurrencyRate : \"\"}
\n {\n (data.billableMarkupPercent??0) > 0 && data?.transactionCurrencyRate > 0 && ((data?.transactionCurrencyRate??0) - (data?.billableLineTransactionRate??0)) > 0 &&\nMarked up by {((data?.transactionCurrencyRate??0) - (data?.billableLineTransactionRate??0)).toFixed(2)}
\n }\n\n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n return;\n }\n let event = checkAndSetNumVal(e, data.subUnitTransactionRate, 13);\n let { value } = event.target;\n handleInvoiceDetail({subUnitTransactionRate: value, transactionCurrencyRate: ((value * (data.subUnitQty??1))/data.qty) }, srNo)\n }}\n disabled={preview}\n />
:\n onClickRow(srNo)} style={{height: 'fit-content', display: 'flex', flexDirection: 'column'}}>\n
\n ) : colum === \"discountType\" ? (\n props.allowEdit ? {data?.subUnitTransactionRate > 0 ? data?.subUnitTransactionRate : \"\"}
\nonClickRow(srNo)}>{(data?.discountVal??0) === 0 ? \"\" : `${data?.discountType === \"@\" ? data?.discountType : \"\"} ${data?.discountVal} ${data?.discountType === \"%\" ? data?.discountType : \"\"}` }
\n ) : colum === \"discountVal\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.discountVal}
\n ) : colum === \"discountAmount\" ? (\n props.allowEdit ? handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={true}\n /> :onClickRow(srNo)}>{data?.discountAmount}
\n ) : colum === \"exAmount\" ? (\n props.allowEdit ? handleOnChange(e)}\n /> :onClickRow(srNo)}>{data?.exAmount}
\n ) : colum === \"taxType\" ? (\n onClickRow(srNo)}>
\n ): colum === \"costLocation\" ? (\n onClickRow(srNo)}>
\n ) : colum === \"costCenter\" ? (\n onClickRow(srNo)}>
\n ) : colum === \"inAmount\" ? (\n onClickRow(srNo)}>{data?.inAmount > 0 ? data?.inAmount.toFixed(roundingDigit) : \"\"}
\n ) : colum === \"Action\" ? (\n <>\n\n {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}\n removeDetail={removeDetail}/>\n
\n )\n }\n ]\n}\n","// ** React Imports\nimport {useEffect, useState} from 'react'\n\n// ** Reactstrap Imports\nimport {Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label} from 'reactstrap'\nimport * as React from \"react\";\nimport {useTranslation} from \"react-i18next\";\nimport {formatCurrency} from \"../../../../../utility/Utils\";\n\nconst BillableDialog = ({open, setOpen, rows, setRows, vendorInvoice, handleVendorInvoice, inventoryItems, transactionCurrency}) => {\n const { t } = useTranslation()\n const [invoices, setInvoices] = useState([]);\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive) {\n for(let i = 0; i < rows.length; i++) {\n rows[i].isSelected = false;\n }\n setInvoices(rows);\n }\n\n return () => {\n isActive = false;\n }\n }, [rows])\n\n const addInvoiceDetail = (e) => {\n e.preventDefault();\n let selectedInvoices = invoices.filter((selected) => selected.isSelected);\n\n if(selectedInvoices && selectedInvoices.length > 0) {\n let details = vendorInvoice.details;\n /*for(let i = details.length-1; i >= 0; i--) {\n if(!(details[i].itemId) && !(details.sno)) {\n details.splice(i, 1);\n }\n }*/\n\n setRows(invoices.filter(newRow => !(newRow.isSelected??false)))\n\n let lineNo = 0;\n if(details.length) {\n lineNo = details[details.length - 1].lineno;\n }\n for(let i = 0; i < selectedInvoices.length; i++) {\n lineNo = lineNo + 1;\n selectedInvoices.lineno = lineNo;\n }\n\n handleVendorInvoice({details: [...details, ...selectedInvoices]})\n }\n setOpen(false);\n }\n\n const getItemName = (itemId) => {\n const item = inventoryItems.find(v => v.recno === itemId) ?? null;\n return item?.name;\n }\n\n return (\n \n
\n )\n}\nexport default BillableDialog\n","import {useEffect, useState} from 'react'\nimport {\n Button,\n Col, Input, Label,\n Modal,\n ModalBody,\n ModalHeader,\n Row\n} from 'reactstrap'\nimport * as React from \"react\";\nimport {useTranslation} from \"react-i18next\";\nimport {Save} from \"react-feather\";\nimport {tablesDateFormat} from \"../../../../../utility/Utils\";\nimport DatePickr from \"@src/components/DatePickr\";\nimport {useAppDefaults} from \"../../../../../utility/hooks/useAppDefaults\";\n\nconst PackingSlipDialog = ({ show, setShow, invoice, handleInvoice}) => {\n const {t} = useTranslation();\n const [state, setState] = useState({lcno: \"\", deliveryTerms: \"\", portOfLoading: \"\", portOfDischarge: \"\"});\n\n const { userData } = useAppDefaults();\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive && invoice) {\n setState({...state, ...(invoice?.packingSlipDetails??{})})\n }\n\n return () => {\n isActive = false;\n }\n }, [invoice]);\n\n const handleSubmit = () => {\n handleInvoice({packingSlipDetails: state})\n setShow(!show);\n }\n\n\n const handlePicker = (value) => {\n setState({\n ...state,\n lcDateOfIssue: value,\n });\n };\n\n return (\n <>\n \n setOpen(!open)} className='modal-dialog-centered'>\n setOpen(!open)}>{t(\"Un-Billed Expenses/Bills\")} \n \n \n \n {\n \n }\n \n \n
\n \n {\n invoices.map((invoice, index) => {\n return (\n
\n \n
\n )\n })\n }\n \n {\n invoices[index].isSelected = !(invoice.isSelected??false);\n setInvoices([...invoices]);\n }} />\n
\n\n \n {getItemName(invoice.itemId)??invoice?.sRemarks} \n Description: {invoice?.sRemarks} \n Type: {invoice?.billableType} \n
\n\n \n {invoice?.qty} x {formatCurrency(invoice.transactionCurrencyRate, transactionCurrency, false)} \n {formatCurrency(invoice.transactionInAmount, transactionCurrency)} \n
\n\n \n
\n Packing Slip
\n\n {\n \n }\n
\n \n {\"Take a Tour\"}\n {\n setOpenPopovers(false);\n }}\n />\n
\n \n {/* Header */}\n \n \n\n {/*\n \n
\n\n */}\n {/* */}\n {/*
*/}\n\n \n \n
\n\n {t(title || \"New Customer Invoice\")}
\n\n\n \n {\n if ((e.target.value ?? \"\").length > 31) {\n return;\n }\n\n handleVendorInvoice({code: e.target.value})\n }} className=\"s-input form-control\"/>\n
\n\n \n \n {\n showFields.showWO ?\n \n :
\n \n \n
\n \n \n \n
\n \n \n
\n \n
\n \n {vendorInvoice.customerId && (\n \n \n {\n reloadCustomer(vendorInvoice.customerId);\n setShowBilling(true);\n }}\n >\n \n \n \n
\n {\n
\n )}\n
\n\n {t(\"BILLING ADDRESS\")}
\n \n\n {selectedFullCustomer?.address}, {selectedFullCustomer?.city} {selectedFullCustomer?.state}, {selectedFullCustomer?.country}\n
\n }\n \n\n {vendorInvoice.customerId && (\n \n \n {\n reloadCustomer(vendorInvoice.customerId);\n setShowShipping(true);\n }}\n >\n \n \n \n
\n {\n
\n )}\n
\n\n {t(\"SHIPPING ADDRESS\")}
\n \n\n {selectedFullCustomer?.shippingAddress}, {selectedFullCustomer?.shippingCity} {selectedFullCustomer?.shippingState}, {selectedFullCustomer?.shippingCountry}\n
\n }\n \n\n {vendorInvoice.customerId && userData.isTaxRegistered && (\n \n \n {\n reloadCustomer(vendorInvoice?.customerId);\n setShowTRN(true);\n }}\n >\n \n \n \n
\n {
\n\n )}\n
\n\n {t(\"TRN\")}
\n \n{vendorInvoice.trnNo}
}\n \n\n \n {\n if ((e.target.value ?? \"\").length > 31) {\n return;\n }\n\n handleVendorInvoice({customerInvoiceNo: e.target.value})\n }} className=\"s-input form-control\" style={{height: \"40px\"}}/>\n
\n \n
\n\n \n\n \n
\n ) : \n
}\n\n {\n userData.isTaxRegistered ?\n \n \n \n
: \n
\n }\n\n {\n userData.isTaxRegistered ?\n \n \n\n {\n handleVendorInvoice({invoiceTaxType: e.target.value});\n handleInvoiceDetailInBulk({invoiceTaxType: e.target.value});\n if (e.target.value === \"OutOfScope\") {\n setListSalesInv(listSalesInv.map((e) => (e.colName === \"taxType\" ? {\n ...e,\n show: false,\n avoidChange: true\n } : e)));\n } else {\n setListSalesInv(listSalesInv.map((e) => (e.colName === \"taxType\" ? {\n ...e,\n show: true,\n avoidChange: false\n } : e)));\n }\n }}\n value={vendorInvoice.invoiceTaxType}\n onBlur={(e) => setSelectedLine(vendorInvoice.details.length > 0 ? 0 : -1)}\n >\n \n \n \n \n
: \n
\n }\n \n\n
\n index}\n onRowClicked={(row, event) => setSelectedLine(vendorInvoice.details.findIndex(x => x.lineno === row.lineno))}\n columns={columns(totalTags, setRowIndex, ability, defaultCurrency.symbol, listSalesInv, transactionCurrency, transactionCurrencyRate, vendorInvoice.details.filter((r) => !r.isDeleted).length, costLocations, costCenterList, inventoryItems, taxTypeList, accounts, toggleQuickAddBar, userData.roundingDigit, preview, removeVendorInvoiceDetail, vendorInvoice.invoiceTaxType, selectedLine, (e) => {\n setSelectedLine(selectedLine + 1);\n }, t, setSelectedLine)}\n conditionalRowStyles={conditionalRowStylesForms}\n responsive={true}\n data={vendorInvoice.details}\n sortIcon={
\n {!preview && (\n \n \n {\n addItemDetail(defaultCostLocation, transactionCurrencyRate);\n setClickedAddRow(true);\n }}\n style={{marginTop: \"10px\"}}\n outline\n color=\"success\"\n >\n {t(\"Add Row\")}\n \n {\n setOpenCustomizer(true);\n }}\n style={{marginTop: \"10px\"}}\n color=\"danger\"\n >\n {t(\"Customization\")}\n \n
\n \n )}\n\n \n\n {\n billableInvoices.filter((billableInv => !(billableInv.isSelected ?? false))).length > 0 ?\n
\n\n \n \n \n
: \n }\n \n \n \n {selectedFullCustomer?.name ?? \"\"} {t(\"have un-billed expenses/bills.\")}\n \n
\n setOpenBillable(true)}>\n {t(\"Add\")}\n
\n \n \n {\n advanceStore.data.enableExportPackingSlip &&\n
\n }\n \n \n {advanceStore.data.allowBankSave && (\n !(bank) ?\n
\n
\n\n \n \n
:\n \n
\n )}\n\n {showFields.showSalesman && (\n \n
\n \n
\n \n
\n \n
\n \n {t(\"Bank Name\")}\n
\n\n {bank?.bankName}\n
\n\n
\n \n {t(\"Account Title\")}\n
\n\n {bank?.banckAccountTitle}\n
\n\n
\n \n {t(\"Account Number\")}\n
\n\n {bank?.bankAccountNo}\n
\n\n
\n \n {t(\"Account IBAN\")}\n
\n\n {bank?.bankIBAN}\n
\n\n
\n \n {t(\"Swift Code\")}\n
\n\n {bank?.bankSwiftCode}\n
\n\n
\n \n {t(\"Branch Name\")}\n
\n\n {bank?.bankBranchName}\n
\n\n\n \n onChangeBank(null)}>\n \n \n \n
\n \n
\n )}\n\n \n
\n\n \n \n
\n {\n if ((e.target.value ?? \"\").length > 2000) {\n return;\n }\n\n handleVendorInvoice({remarks: e.target.value})\n }} disabled={preview}/>\n {\n vendorInvoice.remarks !== store.notes && (vendorInvoice.remarks ?? \"\").length > 1 &&\n \n {\n handleVendorInvoice({changeDefaultNotes: !(vendorInvoice.changeDefaultNotes)})\n }}/>\n \n
\n }\n \n \n {\n if ((e.target.value ?? \"\").length > 4050) {\n return;\n }\n\n handleVendorInvoice({terms: e.target.value})\n }} disabled={preview}/>\n\n {\n vendorInvoice.terms !== store.terms && (vendorInvoice.terms ?? \"\").length > 1 &&\n
\n\n \n {\n handleVendorInvoice({changeDefaultTerms: !(vendorInvoice.changeDefaultTerms)})\n }}/>\n \n
\n }\n\n \n \n \n togglePackingSlip()}>\n \n \n \n\n
\n \n \n {t(\"Packing Slip Detail: \")} {t(\"LC No\")}: {vendorInvoice?.packingSlipDetails?.lcno ?? \"\"} | {t(\"Date of Issue\")}: {vendorInvoice?.packingSlipDetails?.lcDateOfIssue ? dateFormat(vendorInvoice?.packingSlipDetails?.lcDateOfIssue, (userData.dateFormat ?? tablesDateFormat).toLowerCase()) : \"\"}\n \n \n {t(\"Loading Port\")}: {vendorInvoice?.packingSlipDetails?.portOfLoading ?? \"\"} | {t(\"Discharge Port\")}: {vendorInvoice?.packingSlipDetails?.portOfDischarge ?? \"\"}\n \n
\n\n \n
\n \n \n\n \n \n {t(\"Sub Total\")} ({transactionCurrency.code})\n
\n {userData.isTaxRegistered ? `(${t(\"Tax\")} ${t(vendorInvoice.invoiceTaxType)}) ` : \"\"}\n \n\n\n {formatCurrency(vendorInvoice.transactionCurrencyTotalAmount, transactionCurrency, false)}\n \n
\n {(vendorInvoice?.transactionCurrencyTotalDiscount ?? 0) - (vendorInvoice?.transactionCurrencyspdiscount ?? 0) !== 0 && (\n \n {userData.isTaxRegistered ? `(${t(\"Tax\")} ${t(vendorInvoice.invoiceTaxType)}) ` : \"\"}\n \n\n
\n \n {t(\"Discount\")}\n \n \n {formatCurrency(vendorInvoice.transactionCurrencyTotalDiscount - vendorInvoice.transactionCurrencyspdiscount, transactionCurrency, false)}\n \n
\n )}\n\n {showFields.showFreight && (\n \n \n {\" \"}\n {t(\"Freight\")}\n {\n userData.isTaxRegistered &&\n toggleFreightTax()}\n id=\"freight-tax\">\n {vendorInvoice.freightTaxPer ?? \"\"}%\n \n }\n\n {\n userData.isTaxRegistered &&\n \n \n
\n\n \n \n \n \n \n }\n \n {showFreight ? (\n handleVendorInvoice({transactionCurrencyFreight: e.target.value !== \"\" ? +e.target.value : e.target.value})}/>\n ) : (\n \n \n setShowFreight(true)}\n className=\"me-50\"/>\n {\" \"}\n {formatCurrency(vendorInvoice.transactionCurrencyFreight, transactionCurrency, false)}\n \n )}\n
\n )}\n {(vendorInvoice?.taxDetails || []).map((e, index) => {\n let taxName = taxTypeList[taxTypeList.findIndex((r) => r.value === e.taxType)];\n return taxName && !e.isDeleted ? (\n {t(\"Freight Tax\")}
\n\n
\n \n {taxName.text} - {e.taxPercent}%\n {\" \"}\n {showTaxIndex === index ? (\n {\n handleTaxSummaryDetail({transactionCurrencyTaxAmount: r.target.value !== \"\" ? +r.target.value : r.target.value}, index);\n }}\n />\n ) : (\n \n \n setShowTaxIndex(index)}\n className=\"me-50\"/>\n \n {formatCurrency(e.transactionCurrencyTaxAmount, transactionCurrency, false)}\n \n )}\n
\n ) : null;\n })}\n\n {showFields.showDesc && (\n \n \n {t(\"Extra Disc.\")}\n \n {showExDiscount ? (\n handleVendorInvoice({transactionCurrencyspdiscount: e.target.value !== \"\" ? +e.target.value : 0})}/>\n ) : (\n \n \n setShowExDiscount(true)}\n className=\"me-50\"/>\n \n {formatCurrency(vendorInvoice.transactionCurrencyspdiscount, transactionCurrency, false)}\n \n )}\n
\n )}\n\n \n \n {t(\"Total\")} ({transactionCurrency.code})\n \n \n {formatCurrency(vendorInvoice.transactionCurrencyNetAmount, transactionCurrency, false)}\n \n
\n \n
\n \n \n \n \n \n \n \n \n {!preview && ((!vendorInvoice.recno && ability.can(\"new\", \"SalesInvoices\")) || (!!vendorInvoice.recno && ability.can(\"edit\", \"SalesInvoices\"))) && (\n \n {loading ? (\n \n ) : (\n \n )}\n \n {[\"Save & Receive\", \"Save\"].map((e, index) => {\n return (\n onSubmit(index)}>\n {t(e)}\n \n );\n })}\n \n \n )}\n\n {props.quickAdd ? (\n {\n unblock?.current();\n props.toggleQuickAddBar();\n }} color=\"\" className=\"btn-outline-primary\">\n {t(preview ? \"Back\" : \"Cancel\")}\n \n ) : (\n history.goBack()}\n color=\"\"\n className=\"btn-outline-primary\"\n style={{marginLeft: 12}}\n >\n {t(preview ? \"Back\" : \"Cancel\")}\n \n )}\n \n \n
\n {searchBarOpen.open && (\n
\n {/* /Invoice Actions */}\n \n\n {\n quickAddBar.open &&\n {t(`Please add Purchase Account to ${record.name}`)}
,\n \"\",\n \"warning\",\n {\n showCloseButton: true,\n showCancelButton: true,\n focusConfirm: true,\n confirmButtonText: 'Quick Add',\n cancelButtonText: 'Close'\n }\n ).then(results => {\n\n if (results.isConfirmed) {\n toggleQuickAddBar('inventory_add', record.recno)\n }\n\n })\n }, [100])\n return\n }\n setItem(record)\n let saving_data = {};\n if ((record.purchaseTaxTypeId && record.purchaseTaxTypeId !== 0) || (vendorInvoice.taxType && vendorInvoice.taxType !== 0) ) {\n let taxObj = (record.purchaseTaxTypeId && record.purchaseTaxTypeId !== 0) ? record : vendorInvoice;\n\n if(taxObj.purchaseTaxTypeId){\n taxObj.taxType = taxObj.purchaseTaxTypeId;\n }\n\n taxTypeList.map((savedTax) => {\n if (savedTax.value === taxObj.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n }\n })\n }\n\n if(landedRow) {\n handleLandedInvoiceDetail({\n itemId: record?.recno,\n qty: 1,\n itemName: record?.name,\n code: record?.code,\n sRemarks: record?.description,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: getTransactionalRate(record.purchaseRate, transactionCurrencyRate, roundingDigit),\n ...saving_data,\n itemTaxType: record?.purchaseTaxType??\"Inclusive\",\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n } else {\n\n let subUnitIndex = (record?.subUnits??[]).findIndex((ele) => !ele.isDefault);\n let subUnit = null;\n if(subUnitIndex > -1) {\n subUnit = record?.subUnits[subUnitIndex]\n }\n\n let defaultSubUnitIndex = (record?.subUnits??[]).findIndex((ele) => ele.isDefault);\n let defaultSubUnit = null;\n if(subUnitIndex > -1) {\n defaultSubUnit = record?.subUnits[defaultSubUnitIndex]\n }\n\n handleInvoiceDetail({\n itemId: record?.recno,\n qty: 1,\n itemName: record?.name,\n uomList: (record?.subUnits??[]),\n unitId: record?.unit,\n subUnitId: subUnit?.recno??null,\n subUnitName: subUnit?.description??null,\n unitFraction: subUnit?.ratio??1,\n subUnitQty: subUnit?.ratio??1,\n subUnitDefaultId: defaultSubUnit?.recno??null,\n subUnitTransactionRate: getTransactionalRate(record.purchaseRate, transactionCurrencyRate, roundingDigit)/(subUnit?.ratio??1),\n code: record.code,\n sRemarks: record?.description,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: getTransactionalRate(record.purchaseRate, transactionCurrencyRate, roundingDigit),\n ...saving_data,\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n }\n }\n }\n\n const handleTaxType = (record) => {\n setTaxType(record)\n if(landedRow) {\n handleLandedInvoiceDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }else {\n handleInvoiceDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }\n }\n\n const handleCostLocation = (record) => {\n setCostLocation(record)\n if(landedRow) {\n handleLandedInvoiceDetail({cLocation: record?.recno}, srNo)\n } else {\n handleInvoiceDetail({cLocation: record?.recno}, srNo)\n }\n }\n\n const handleCostCenter = (record) => {\n setCostCenter(record)\n if(landedRow) {\n handleLandedInvoiceDetail({costCenter: record?.recno}, srNo)\n } else {\n handleInvoiceDetail({costCenter: record?.recno}, srNo)\n }\n }\n\n const handleOnChange = (e) => {\n const {name, value} = e.target\n if(landedRow) {\n handleLandedInvoiceDetail({[name]: value}, srNo)\n } else {\n handleInvoiceDetail({[name]: value}, srNo)\n }\n }\n\n useEffect(() => {\n const error = ((data.discountVal > 100 && data.discountType === \"%\") || ((data.discountVal > (data.qty * data.transactionCurrencyRate)) && data.discountType === \"@\"))\n if(landedRow) {\n handleLandedInvoiceDetail({invalidDiscount: error}, srNo)\n } else {\n handleInvoiceDetail({invalidDiscount: error}, srNo)\n }\n }, [data.transactionCurrencyRate, data.qty, data.discountVal, data.discountType])\n\n useEffect(() => {\n if (data.balanceQty) {\n const error = (data.qty ?? 0) > data.balanceQty\n if(landedRow) {\n handleLandedInvoiceDetail({invalidQty: error}, srNo)\n } else {\n handleInvoiceDetail({invalidQty: error}, srNo)\n }\n }\n\n }, [data.qty])\n\n\n useEffect(() => {\n setItem(inventoryItems.find(v => v.recno === data.itemId) ?? null)\n setCostCenter(costCenterList.find(v => v.recno === data.costCenter ?? null))\n setCustomer(customerList?.find((v) => (v.customerId === data.customerId && v.projectId === data.workOrderId) ?? null));\n\n if(!landedRow) {\n if(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits??[]).length > 0) {\n if(!uom) {\n setUom(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? []).find(v => v.recno === data.subUnitId ?? null))\n if((data.uomList??[]).length <= 0) {\n handleInvoiceDetail({uomList: ((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? [])}, srNo);\n }\n }\n }\n }\n }, [costCenterList, costLocation, customerList, workorders, inventoryItems, data.itemId, data.workOrderId, data.cLocation, data.cLocation, data.taxType])\n\n return colum === \"lineno\" ? (\n onClickRow(srNo)}>{srNo+1}
\n ) : colum === \"itemId\" ? (\n props.allowEdit ?\n
: {\n setRowIndex(srNo)\n }}>\n
\n
\n ) : colum === \"qty\" ? (\n props.allowEdit ? onClickRow(srNo)}>{item?.name}
\n {item?.name && data?.tags?.length > 0 && onClickRow(srNo)}>
onClickRow(srNo)}>{data?.qty > 0 ? data?.qty : \"\"}
\n ) : colum === \"unitFraction\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{data?.unitFraction > 0 ? data?.unitFraction : \"\"}
\n ) : colum === \"subUnitQty\" ? (\n props.allowEdit ?\n {\n let value = checkAndSetNumVal(e, data.subUnitQty, roundingDigit).target.value;\n if(landedRow) {\n handleLandedInvoiceDetail({\n subUnitQty: value,\n transactionCurrencyRate: 0,\n subUnitTransactionRate: 0\n }, srNo)\n } else {\n handleInvoiceDetail({\n subUnitQty: value,\n transactionCurrencyRate: 0,\n subUnitTransactionRate: 0\n }, srNo)\n }\n }}\n disabled={preview}\n />\n
: onClickRow(srNo)}>{data?.subUnitQty > 0 ? data?.subUnitQty : \"\"}
\n ) : colum === 'uom' ? (\n props.allowEdit ?\n\n
\n : onClickRow(srNo)} style={{width: '100%', textAlign: 'left'}}>{uom?.description??\"\"}
\n ) : colum === \"sRemarks\" ? (\n props.allowEdit ? 10 ? (data.sRemarks?.length??1)/10 : 1}\n name='sRemarks'\n placeholder='Description'\n value={data.sRemarks}\n onChange={e => handleOnChange({target: {name: e.target.name, value: e.target.value}})}\n disabled={preview}\n /> : <>onClickRow(srNo)}>{data?.transactionCurrencyRate > 0 ? data?.transactionCurrencyRate : \"\"}
\n ) : colum === \"subUnitTransactionRate\" ? (\n props.allowEdit ?\n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n return;\n }\n let event = checkAndSetNumVal(e, data.subUnitTransactionRate, 13);\n let { value } = event.target;\n if(landedRow) {\n handleLandedInvoiceDetail({\n subUnitTransactionRate: value,\n transactionCurrencyRate: ((value * (data.subUnitQty ?? 1)) / data.qty)\n }, srNo)\n } else {\n handleInvoiceDetail({\n subUnitTransactionRate: value,\n transactionCurrencyRate: ((value * (data.subUnitQty ?? 1)) / data.qty)\n }, srNo)\n }\n }}\n disabled={preview}\n />
:\n onClickRow(srNo)} style={{height: 'fit-content', display: 'flex', flexDirection: 'column'}}>\n
\n ) : colum === \"discountType\" ? (\n props.allowEdit ? {data?.subUnitTransactionRate > 0 ? data?.subUnitTransactionRate : \"\"}
\nonClickRow(srNo)}>{(data?.discountVal??0) === 0 ? \"\" : `${data?.discountType === \"@\" ? data?.discountType : \"\"} ${data?.discountVal} ${data?.discountType === \"%\" ? data?.discountType : \"\"}` }
\n ) : colum === \"discountVal\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.discountVal}
\n ) :colum === \"customerId\" ? (\n props.allowEdit ? (\n\n {/*
\n ) : (\n \n
\n }\n\n \n {t(\"Billable\")}\n landedRow ? handleLandedInvoiceDetail({isBillable: !data.isBillable, billableMarkupPercent: advanceStore.data.allowBillableMarkup ? (data.billableMarkupPercent??advanceStore.data.billableMarkupPercent) : 0}, srNo) : handleInvoiceDetail({isBillable: !data.isBillable, billableMarkupPercent: advanceStore.data.allowBillableMarkup ? (data.billableMarkupPercent??advanceStore.data.billableMarkupPercent) : 0}, srNo)} />\n
\n {\n data.isBillable && advanceStore.data.allowBillableMarkup &&\n \n {t(\"Markup\")}\n {\n if(landedRow) {\n handleLandedInvoiceDetail({\n billableMarkupPercent: parseFloat(e.target.value ?? \"0\")\n }, srNo)\n } else {\n handleInvoiceDetail({\n billableMarkupPercent: parseFloat(e.target.value ?? \"0\")\n }, srNo)\n }\n }\n }\n disabled={!data.isBillable}\n />\n
\n }\n onClickRow(srNo)}>\n
\n )\n ) : colum === \"discountAmount\" ? (\n props.allowEdit ? handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={true}\n /> : {customer?.text ?? \"\"}
\n {\n data.isBillable && customer &&{t(\"Billable\")} {advanceStore.data.allowBillableMarkup ? `@ ${data.billableMarkupPercent ?? 0}%` : \"\"}
\n }\nonClickRow(srNo)}>{data?.discountAmount}
\n ) : colum === \"exAmount\" ? (\n props.allowEdit ? handleOnChange(e)}\n /> :onClickRow(srNo)}>{data?.exAmount}
\n ) : colum === \"taxType\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: '100%'}}>
\n ): colum === \"costLocation\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: 'fit-content'}}>
\n ) : colum === \"costCenter\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: 'fit-content'}}>
\n ) : colum === \"inAmount\" ? (\n onClickRow(srNo)}>{data?.inAmount > 0 ? data?.inAmount.toFixed(roundingDigit) : \"\"}
\n ) : colum === \"Action\" ? (\n <>\n\n {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}\n setRowIndex={setRowIndex}\n totalTags={totalTags}\n />\n
\n }\n }\n\n if (colum.columnName === \"coaid\") {\n return {\n name: t(colum.columnDescription??\"\"),\n sortable: false,\n minWidth: '205px',\n maxWidth: '205px',\n // selector: (row, index) => index,\n cell: (data, index) => \n {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}\n removeDetail={removeDetail}/>\n
\n )\n }\n ]\n}\n","//** Styles imports\nimport '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport 'react-slidedown/lib/slidedown.css'\n\n//** React Imports\nimport {useState, useEffect, memo} from 'react'\n\n//** Translation\nimport {useTranslation} from \"react-i18next\"\n\n// ** Custom imports\nimport {fireMessage} from \"@src/components/MessageModel\"\nimport {useVendorInvoice} from '../context/useVendorInvoice'\nimport TaxTypeSelector_v2 from \"@src/components/TaxTypeSelector_v2\";\n\n//** Reactstrap imports\nimport {\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n Input,\n InputGroup,\n UncontrolledDropdown,\n UncontrolledTooltip\n} from 'reactstrap'\n\n\n//new fields\nimport CostCenterSelector_v2 from '@src/components/CostCenterSelector_v2'\nimport InventoryItemSelector_v2 from '@src/components/InventoryItemSelector_v2'\nimport {checkAndSetNumVal} from '@src/utility/Utils'\nimport CostLocationSelector_v2 from '@src/components/CostLocationSelector_v2'\nimport AccountDetailSelector_v2 from \"@src/components/AccountDetailSelector_v2\";\nimport ConfirmModal from \"@src/components/ConfirmModal\";\nimport SimpleCustomerSelector_v2 from \"@src/components/SimpleCustomerSelector_v2\";\nimport ProjectSelector_v1 from \"@src/components/ProjectSelector_v1\";\n\n\n//** Icons\nimport {X} from \"react-feather\";\nimport ProjectACustomerSelector_v2 from \"../../../../../components/ProjectACustomerSelector_v2\";\nimport * as React from \"react\";\nimport {useSelector} from \"react-redux\";\n\n\nconst CategoryColumnCell = (props) => {\n const {t} = useTranslation()\n\n const {\n colum,\n srNo,\n data,\n accounts,\n toggleQuickAddBar,\n roundingDigit,\n preview,\n inventoryItems,\n detailCoaList,\n costLocations,\n workorders = [],\n costCenterList,\n transactionCurrencyRate,\n taxTypeList,\n removeDetail,\n customerList,\n onClickRow\n } = props\n const {\n handleInvoiceCategoryDetail,\n vendorInvoice\n } = useVendorInvoice()\n\n const advanceStore = useSelector((state) => state?.advanceSettings);\n\n const [isOpenModal, setIsOpenModal] = useState(false)\n\n const deleteForm = () => {\n removeDetail(srNo)\n }\n\n const [item, setItem] = useState()\n const [account, setAccount] = useState()\n const [customer, setCustomer] = useState()\n const [costLocation, setCostLocation] = useState()\n const [costCenter, setCostCenter] = useState()\n const [taxType, setTaxType] = useState()\n\n const handleItem = (record) => {\n if (record?.recno === -1) {\n toggleQuickAddBar('inventory')\n } else {\n if (!record.purchaseAccount) {\n setTimeout(() => {\n fireMessage(\n {t(`Please add Purchase Account to ${record.name}`)}
,\n \"\",\n \"warning\",\n {\n showCloseButton: true,\n showCancelButton: true,\n focusConfirm: true,\n confirmButtonText: 'Quick Add',\n cancelButtonText: 'Close'\n }\n ).then(results => {\n\n if (results.isConfirmed) {\n toggleQuickAddBar('inventory', record.recno)\n }\n\n })\n }, [100])\n return\n }\n setItem(record)\n let saving_data = {};\n if ((record.taxType && record.taxType !== 0) || (vendorInvoice.taxType && vendorInvoice.taxType !== 0)) {\n let taxObj = (record.taxType && record.taxType !== 0) ? record : vendorInvoice;\n taxTypeList.map((savedTax) => {\n if (savedTax.value === taxObj.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n }\n })\n }\n\n handleInvoiceCategoryDetail({\n itemId: record?.recno,\n qty: 1,\n itemName: record?.name,\n code: record.code,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: record.saleRate ? (record.saleRate * transactionCurrencyRate) : 0,\n ...saving_data,\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n }\n }\n\n const handleAccount = (record) => {\n if (record?.recno === -1) {\n toggleQuickAddBar(\"coa\");\n } else {\n setAccount(record)\n handleInvoiceCategoryDetail({coaId: record?.recno}, srNo)\n }\n }\n\n const handleCustomer = (record) => {\n if (record?.recno === -1) {\n toggleQuickAddBar(\"customer\");\n } else {\n setCustomer(record)\n handleInvoiceCategoryDetail({customerId: record?.customerId, workOrderId: record?.projectId}, srNo);\n }\n }\n\n const handleTaxType = (record) => {\n setTaxType(record)\n handleInvoiceCategoryDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }\n\n const handleCostLocation = (record) => {\n setCostLocation(record)\n handleInvoiceCategoryDetail({cLocation: record?.recno}, srNo)\n }\n\n const handleCostCenter = (record) => {\n setCostCenter(record)\n handleInvoiceCategoryDetail({costCenter: record?.recno}, srNo)\n }\n\n const handleOnChange = (e) => {\n const {name, value} = e.target\n handleInvoiceCategoryDetail({[name]: value}, srNo)\n }\n\n useEffect(() => {\n const error = ((data.discountVal > 100 && data.discountType === \"%\") || ((data.discountVal > (data.qty * data.transactionCurrencyRate)) && data.discountType === \"@\"))\n handleInvoiceCategoryDetail({invalidDiscount: error}, srNo)\n }, [data.transactionCurrencyRate, data.qty, data.discountVal, data.discountType])\n\n useEffect(() => {\n if (data.balanceQty) {\n const error = (data.qty ?? 0) > data.balanceQty\n handleInvoiceCategoryDetail({invalidQty: error}, srNo)\n }\n\n }, [data.qty])\n\n useEffect(() => {\n setAccount(detailCoaList?.find(v => v.recno === data.coaId) ?? null)\n setCostCenter(costCenterList?.find(v => v.recno === data.costCenter ?? null))\n setCustomer(customerList?.find((v) => (v.customerId === data.customerId && v.projectId === data.workOrderId) ?? null));\n }, [costCenterList, costLocation, workorders, customerList, detailCoaList, data.coaId, data.workOrderId, data.cLocation, data.cLocation, data.taxType])\n\n return colum === \"lineno\" ? (\n onClickRow(srNo)}>{srNo+1}
\n ) : colum === \"itemId\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{item?.name}
\n ) : colum === \"coaid\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{account?.text ?? \"\"}
\n ) : colum === \"customerId\" ? (\n props.allowEdit ? (\n\n {/*
\n ) : (\n \n
\n }\n\n \n {t(\"Billable\")}\n handleInvoiceCategoryDetail({isBillable: !data.isBillable, billableMarkupPercent: advanceStore.data.allowBillableMarkup ? (data.billableMarkupPercent??advanceStore.data.billableMarkupPercent) : 0}, srNo)} />\n
\n {\n data.isBillable && advanceStore.data.allowBillableMarkup &&\n \n {t(\"Markup (%)\")}\n \n handleInvoiceCategoryDetail({\n billableMarkupPercent: parseFloat(e.target.value ?? \"0\")\n }, srNo)\n }\n disabled={!data.isBillable}\n />\n
\n }\n onClickRow(srNo)}>\n
\n )\n ) : colum === \"qty\" ? (\n props.allowEdit ? {customer?.text ?? \"\"}
\n {\n data.isBillable && customer &&{t(\"Billable\")} {advanceStore.data.allowBillableMarkup ? `@ ${data.billableMarkupPercent ?? 0}%` : \"\"}
\n }\nonClickRow(srNo)}>{data?.qty > 0 ? data?.qty : \"\"}
\n ) : colum === \"sRemarks\" ? (\n props.allowEdit ? 10 ? (data.sRemarks?.length??1)/10 : 1}\n name='sRemarks'\n placeholder='Description'\n value={data.sRemarks}\n onChange={e => handleOnChange({target: {name: e.target.name, value: e.target.value}})}\n disabled={preview}\n /> : <>onClickRow(srNo)}>{data?.transactionCurrencyRate > 0 ? data?.transactionCurrencyRate : \"\"}
\n ) : colum === \"discountType\" ? (\n props.allowEdit ?onClickRow(srNo)}>{(data?.discountVal ?? 0) === 0 ? \"\" : `${data?.discountType === \"@\" ? data?.discountType : \"\"} ${data?.discountVal} ${data?.discountType === \"%\" ? data?.discountType : \"\"}`}
\n ) : colum === \"discountVal\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.discountVal}
\n ) : colum === \"discountAmount\" ? (\n props.allowEdit ? handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={true}\n /> :onClickRow(srNo)}>{data?.discountAmount}
\n ) : colum === \"exAmount\" ? (\n props.allowEdit ? handleOnChange(e)}\n /> :onClickRow(srNo)}>{data?.exAmount}
\n ) : colum === \"taxType\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: '100%'}}>
\n ) : colum === \"costLocation\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: 'fit-content'}}>
\n ) : colum === \"costCenter\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: 'fit-content'}}>
\n ) : colum === \"inAmount\" ? (\n /*props.allowEdit ? handleOnChange(e)}\n /> : */onClickRow(srNo)}>{data?.inAmount > 0 ? data?.inAmount.toFixed(roundingDigit) : \"\"}
\n ) : colum === \"Action\" ? (\n <>\n\n {\n setSelectedLine(index)\n }}\n detailCoaList={detailCoaList}\n taxTypeList={taxTypeList}\n removeDetail={removeDetail}/>\n
\n )\n }\n ]\n}","//** React imports\nimport { Fragment, useEffect, useRef, useState } from \"react\";\nimport * as React from \"react\";\n\n//** styles\nimport \"@styles/base/pages/app-invoice.scss\";\nimport \"@styles/react/libs/flatpickr/flatpickr.scss\";\nimport \"@styles/react/libs/react-select/_react-select.scss\";\nimport \"react-slidedown/lib/slidedown.css\";\n\n//** Icons\nimport { ChevronDown, Edit3, Save, Settings, X } from \"react-feather\";\n\n//** Translation\nimport { useTranslation } from \"react-i18next\";\n\n// ** Reactstrap Imports\nimport { Button, Card, CardBody, Col, DropdownItem, DropdownMenu, DropdownToggle, Input, Label, Popover, PopoverBody, Row, UncontrolledButtonDropdown } from \"reactstrap\";\n\n//** third party imports\nimport {Redirect, useHistory } from \"react-router-dom\";\nimport axios from \"axios\";\n\n//** Hooks & Stores\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { getData } from \"../../../../settings/company/form-view/steps/preferences/vendor-invoice/store\";\nimport * as service from \"@api/api.service\";\nimport { useCan } from \"@hooks/useCan\";\nimport { useMapAccounts } from \"@src/utility/hooks/useMapAccounts\";\n\n//** Custom imports\nimport CurrencySelector from \"@src/components/CurrencyConvertor\";\nimport DatePickr from \"@src/components/DatePickr\";\nimport { fireMessage } from \"@src/components/MessageModel\";\nimport $ from \"jquery\";\nimport { useAppDefaults } from \"@hooks/useAppDefaults\";\nimport { useVendorInvoice } from \"../context/useVendorInvoice\";\nimport Attachments from \"@src/components/Attachments\";\n\n//** custom imports\nimport SimpleVendorSelector_v2 from \"@src/components/SimpleVendorSelector_v2\";\nimport ConfirmModal from \"@src/components/ConfirmModal\";\nimport CopyFromSearchBar from \"@src/components/CopyFromSearchBar\";\nimport QuickAddForm from \"@src/components/QuickAddForms\";\nimport TaxTypeSelector_v2 from \"@src/components/TaxTypeSelector_v2\";\nimport Spinner from \"@src/@core/components/spinner/Fallback-spinner\";\nimport AreaSelector_v2 from \"@src/components/AreaSelector_v2\";\nimport CreditTermsSelector from \"@src/components/CreditTermsSelector\";\nimport UpdateVendorAddress from \"../../vendors/detail/steps/UpdateVendorAddress\";\nimport SavingExitDialog from \"@src/components/SavingExitDialog\";\n\n\n//** Utils\nimport { formatCurrency, getDateFromTerm } from \"@src/utility/Utils\";\n\n//** Table imports\nimport DataTable from \"react-data-table-component\";\nimport { columns } from \"./columns\";\nimport { categoryColumns } from \"./categoryColumns\";\nimport ColumnCustomizer from \"./ColumnsCustomizer\";\n\n//** MUI Imports\nimport AddInventoryDialog from \"../../../../../components/QuickAddForms/AddInventoryDialog\";\nimport {conditionalRowStylesForms, tablesDateFormat} from \"../../../../../utility/Utils\";\nimport ReportingTagsDialog from \"../../../../../@core/components/reporting-tags/ReportingTagsDialog\";\nimport {getReportingTags} from \"../../../sales/customer-invoice/store\";\nimport FormColumnCustomizer from \"../../../../../components/FormsColumnCustomizer\";\n\nconst customStyles = {\n control: (base) => ({\n ...base,\n height: 40,\n minWidth: 100,\n minHeight: 30,\n }),\n};\nconst FormView = ({ title, recno, preview, show, duplicate = false, po, gr, ...props }) => {\n\n const { t } = useTranslation();\n const ability = useCan();\n const { userData } = useAppDefaults();\n const { vendorInvoice, defaultCurrency, defaultCostLocation, detailKey, setDetailKey, listSalesInv, setListSalesInv, categoryList, setCategoryList, loadInvoice, loadInvoiceCode, handleVendorInvoice, addItemDetail, addLandedItemDetail, loadPO, loadGRN, removeVendorInvoiceDetail, removeVendorInvoiceCoaDetail, handleTaxSummaryDetail, handleInvoiceDetail, handleTransactionRate, storeInvoice, handleInvoiceDetailInBulk, addCategoryDetail, compareModel } = useVendorInvoice();\n const history = useHistory();\n const { accounts } = useMapAccounts();\n const parent = useRef(null);\n const wrapperRef = useRef(null);\n const wrapperLandedRef = useRef(null);\n const wrapperRefCoa = useRef(null);\n const frRef = useRef(null);\n const exDRef = useRef(null);\n const [selectedTerm, setSelectedTerm] = useState();\n const [supplierList, setSuplierList] = useState([]);\n const [showTRN, setShowTRN] = useState(false);\n const [showExit, setShowExit] = useState(false);\n const [inventoryItems, setInventoryItems] = useState([]);\n const [costLocations, setCostLocations] = useState([]);\n const [openCustomizer, setOpenCustomizer] = useState(false);\n const [openCustomizerCategory, setOpenCustomizerCategory] = useState(false);\n const [costCenterList, setCostCenterList] = useState([]);\n const [showTaxIndex, setShowTaxIndex] = useState(-1);\n const [detailCoaList, setDetailCoaList] = useState([]);\n const [selectedArea, setSelectedArea] = useState();\n const [taxTypeList, settaxTypeList] = useState([]);\n const [customerList, setCustomerList] = useState([]);\n const [showFreight, setShowFreight] = useState(false);\n const [openFreightTax, setOpenFreightTax] = useState(false);\n const [freightTax, setFreightTax] = useState();\n const [clickedAddRow, setClickedAddRow] = useState(false);\n const [clickedAddLandedRow, setClickedAddLandedRow] = useState(false);\n const [itemCategory, setItemCategory] = useState(false);\n const [showExDiscount, setShowExDiscount] = useState(false);\n const [selectedSupplier, setSelectedSupplier] = useState();\n const [selectedSupplierDetail, setSelectedSupplierDetail] = useState();\n const [attachmentFiles, setAttachmentFiles] = useState([]);\n const [selectedLineCoa, setSelectedLineCoa] = useState(-1);\n const [selectedLine, setSelectedLine] = useState(-1);\n const [selectedLandLine, setSelectedLandLine] = useState(-1);\n const [isOpenModal, setIsOpenModal] = useState(false);\n const addBtnRef = useRef(null);\n const taxfRef = useRef(null);\n const categoryRef = useRef(null);\n const [areaList, setAreaList] = useState([]);\n\n const [detailList, setDetailList] = useState([]);\n const [showBilling, setShowBilling] = useState(false);\n const [selectedAll, setSelectAll] = useState(false);\n const [showShipping, setShowShipping] = useState(false);\n const [loading, setLoading] = useState(false);\n const [pageLoading, setPageLoading] = useState(false);\n const [searchBarOpen, setSearchBar] = useState({ type: \"\", open: false });\n const [searchData, setSearchData] = useState({});\n const [quickAddBar, setQuickAddBar] = useState({ open: false, type: \"\" });\n const [sendData, setSendData] = useState({ index: -1 });\n const [rowIndex, setRowIndex] = useState(-1);\n const [reportingTagsArray, setReportingTagsArray] = useState([])\n const [options, setOptions] = useState([])\n const [account, setAccount] = useState([])\n const [totalTags, setTotalTags] = useState(0)\n\n const [exitAlert, setExitAlert] = useState(false);\n const unblock = useRef(null);\n const [showFields, setShowFields] = useState({ showFreight: false, showClass: false, showDisc: false, showWO: false, showTerms: false });\n const [returnUri, setReturnUri] = useState(\"/apps/purchases/vendor-invoice/list\");\n const store = useSelector((state) => state.purchaseInvoicePref);\n const storeSalesInvoice = useSelector((state) => state.customerInvoice);\n const advanceStore = useSelector((state) => state?.advanceSettings);\n\n const dispatch = useDispatch();\n\n useEffect(()=>{\n if(rowIndex > -1){\n if(vendorInvoice?.details[rowIndex]?.tags?.length > 0){\n setReportingTagsArray(vendorInvoice?.details[rowIndex]?.tags)\n }\n else{\n setReportingTagsArray([])\n }\n }\n },[rowIndex])\n\n useEffect(()=>{\n dispatch(getReportingTags({dispatch}))\n },[])\n\n useEffect(()=>{\n if(storeSalesInvoice.reportingTags.length > 0){\n setOptions(storeSalesInvoice.reportingTags);\n setTotalTags(storeSalesInvoice.reportingTags.length)\n let tempAcc = storeSalesInvoice.reportingTags.map(() => null);\n setAccount(tempAcc);\n }\n },[storeSalesInvoice.reportingTags])\n\n useEffect(() => {\n let tempShowFields = {};\n (store.data ?? []).map((e, _) => {\n if (e.keyName === \"costCenter\") {\n tempShowFields.showClass = e.isVisible;\n if(!(e.isVisible)) {\n setListSalesInv([...listSalesInv.filter((x) => x.colName !== 'costCenter')])\n setCategoryList([...categoryList.filter((x) => x.colName !== 'costCenter')])\n }\n } else if (e.keyName === \"transactionCurrencyspdiscount\") {\n tempShowFields.showDesc = e.isVisible;\n } else if (e.keyName === \"transactionCurrencyFreight\") {\n tempShowFields.showFreight = e.isVisible;\n } else if (e.keyName === \"workorderId\") {\n tempShowFields.showWO = e.isVisible;\n } else if (e.keyName === \"terms\") {\n tempShowFields.showTerms = e.isVisible;\n }\n });\n\n setShowFields({ ...showFields, ...tempShowFields });\n }, [store.data]);\n\n useEffect(() => {\n unblock.current = history.block((location) => {\n if(location.pathname !== '/login') {\n if (showExit && !popoverOpen) {\n setReturnUri(location?.pathname ?? \"/apps/purchases/vendor-invoice/list\");\n if (location?.pathname !== \"/apps/purchases/vendor-invoice/add\") {\n setExitAlert(true);\n }\n return false;\n }\n }\n });\n return function () {\n unblock.current.current && unblock.current.current();\n };\n }, [history, compareModel]);\n\n\n const handleArea = (value) => {\n handleVendorInvoice({ areaId: value?.value });\n setSelectedArea(value);\n };\n\n\n const [showAddInventory, setShowAddInventory] = useState(false);\n\n const toggleQuickAddBar = (type = \"\", recno = null) => {\n if(type === 'inventory_add'){\n setShowAddInventory(!showAddInventory);\n } else {\n setQuickAddBar({type, open: !quickAddBar.open, recno});\n }\n };\n\n const toggleFreightTax = () => {\n setOpenFreightTax(!openFreightTax);\n };\n\n const toggleSearchBar = () => {\n setSearchBar({ type: \"\", open: !searchBarOpen });\n };\n const clearSearch = () => {\n setSearchData(searchData);\n };\n const doSearch = async (data) => {\n if (vendorInvoice.vendorId || data.vendorId) {\n const response = await axios.get(\"/PurchaseOrders/List\", {\n params: {\n ...data,\n vendorId: vendorInvoice.vendorId ? vendorInvoice.vendorId : data.vendorId,\n },\n });\n const existList = vendorInvoice.details.filter((f) => f.source !== undefined);\n const checkDisabled = (itm) =>\n existList.findIndex((item) => {\n return item.sourceFyear === itm.fyear && item.sourceLocation === itm.location && item.sourceno === itm.pno && item.sLine === itm.lineNo && item.source === searchBarOpen.type;\n }) !== -1;\n\n const list = response.data.data.list\n ?.filter((f) => f.balanceQty > 0)\n ?.map((itm, index) => {\n return {\n ...itm,\n // qty: itm.balanceQty,\n transactionCurrencyRate: itm.rate,\n lineno: detailKey + index + 1,\n selected: selectedAll,\n disabled: checkDisabled(itm),\n };\n });\n setDetailList(list);\n } else {\n fireMessage(t(\"please select the vendor\"), \"\", \"warning\", {t});\n }\n };\n\n const loadDetails = () => {\n let count = vendorInvoice.details[vendorInvoice.details.length - 1].lineno;\n // if single row and item not seleted\n if (vendorInvoice.details.length === 1 && !vendorInvoice.details[0].itemId) {\n count = 0;\n }\n const filteredList = detailList\n .filter((f) => f.selected === true)\n .map((f, i) => ({\n ...f,\n lineno: count + (i + 1),\n }));\n\n if (filteredList.length) {\n setDetailKey((key) => key + filteredList.length);\n if (vendorInvoice.details.length === 1 && !vendorInvoice.details[0].itemId) {\n handleVendorInvoice({ details: [...filteredList] });\n } else {\n handleVendorInvoice({ details: [...vendorInvoice.details, ...filteredList] });\n }\n setSearchBar({ type: \"\", open: false });\n setDetailList([]);\n }\n };\n const handleEditDetail = (detail, index) => {\n detailList[index] = { ...detailList[index], ...detail };\n setDetailList(() => [...detailList]);\n };\n const onHandleSelectDeselectAll = (value) => {\n const list = detailList.map((l) => ({ ...l, selected: value }));\n setSelectAll(value);\n setDetailList(list);\n };\n const onHandleCopyItem = (value, index) => {\n detailList[index].selected = value;\n setDetailList(() => [...detailList]);\n };\n const clearDetails = () => {\n setDetailList([]);\n };\n const closeDetails = () => {\n clearDetails(0);\n setSearchBar({ type: \"\", open: false });\n };\n\n // <==== copy from\n\n const [transactionCurrency, setTransactionCurrency] = useState(defaultCurrency);\n const [transactionCurrencyRate, setTransactionCurrencyRate] = useState(defaultCurrency?.conversionRate || 0);\n const [userRate, setUserRate] = useState(transactionCurrencyRate || 0);\n const [width, setWidth] = useState(0);\n const [popoverOpen, setPopoverOpen] = useState(false);\n const [redirect, setRedirect] = useState(false);\n const inputRef = useRef(null);\n const [taxupdatedValue,setUpdatedValue]= useState()\n\n\n useEffect(() => {\n if (!!vendorInvoice.recno && vendorInvoice.details.length > 0) {\n setTransactionCurrencyRate(vendorInvoice.details[0].transactionCurrencyConversionRate);\n } else if (!!vendorInvoice.recno && vendorInvoice.coaDetails.length > 0) {\n setTransactionCurrencyRate(vendorInvoice.coaDetails[0].transactionCurrencyConversionRate);\n }\n\n if (clickedAddRow) {\n setSelectedLine(vendorInvoice.details[vendorInvoice.details.length - 1].lineno);\n setClickedAddRow(false);\n }\n\n if (clickedAddLandedRow) {\n setSelectedLandLine(vendorInvoice.landedCostDetails[vendorInvoice.landedCostDetails.length - 1].lineno);\n setClickedAddLandedRow(false);\n }\n\n if (itemCategory) {\n setSelectedLineCoa(vendorInvoice.coaDetails[vendorInvoice.coaDetails.length - 1].lineno);\n setItemCategory(false);\n }\n }, [inventoryItems, vendorInvoice, supplierList]);\n\n\n useEffect(() => {\n setWidth(parent?.current?.offsetWidth || 0);\n }, [parent]);\n\n useEffect(() => {\n window.addEventListener(\"resize\", () => setWidth(parent?.current?.offsetWidth || 0), false);\n }, []);\n const onAttachment = (file) => {\n setAttachmentFiles((attachments) => [...attachments, file]);\n };\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef.current]);\n\n const onAttachmentRemove = (index) => {\n setAttachmentFiles((attachments) => attachments.filter((a, ix) => ix !== index));\n };\n\n const loadSupplierList = async () => {\n const response = await service.Get(`/Defaults/Vendors`);\n setSuplierList(response.data);\n };\n\n const loadInventoryList = async () => {\n const response = await service.Get(`/Defaults/Inventory`, {Type: 'purchase'});\n setInventoryItems(response.data);\n };\n\n const loadAreasList = async () => {\n const response = await service.Get(`/Defaults/Areas`);\n setAreaList(response.data);\n };\n const loadCostLocations = async () => {\n const response = await service.Get(`/Defaults/Locations`);\n setCostLocations(response.data);\n };\n\n const loadTaxTypes = async () => {\n const response = await service.Get(`/Defaults/TaxTypes`);\n settaxTypeList(response.data);\n };\n\n const loadCustomerList = async () => {\n const response = await service.Get(`/Defaults/AllCustomersAndProjects`);\n setCustomerList(response.data);\n };\n\n const loadCostCenterList = async () => {\n const response = await service.Get(`/Defaults/CostCenters`);\n setCostCenterList(response.data);\n };\n\n const loadDetailCoaList = async () => {\n const response = await service.Get(`/Defaults/DetailCOAList`);\n setDetailCoaList(response.data);\n };\n\n const handleDuePicker = (value) => {\n handleVendorInvoice({ creditDueDate: value });\n };\n\n\n const onSuccessColumns = () => {\n dispatch(getData({...store.params}))\n }\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n setSelectedLine(-1);\n }\n\n if (wrapperLandedRef.current && !wrapperLandedRef.current.contains(event.target)) {\n setSelectedLandLine(-1);\n }\n\n if (wrapperRefCoa.current && !wrapperRefCoa.current.contains(event.target)) {\n setSelectedLineCoa(-1);\n }\n\n if (frRef.current && !frRef.current.contains(event.target)) {\n setShowFreight(false);\n }\n\n if (taxfRef.current && !taxfRef.current.contains(event.target)) {\n setShowTaxIndex(-1);\n }\n\n if (exDRef.current && !exDRef.current.contains(event.target)) {\n setShowExDiscount(false);\n }\n }\n\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [wrapperRef, wrapperLandedRef, wrapperRefCoa, frRef, exDRef, taxfRef]);\n\n const loadVendorInvoice = async () => {\n setPageLoading(true);\n try {\n let respo = await loadInvoice(recno, duplicate);\n // setTransactionCurrencyRate(respo?.transactionCurrencyRate);\n setUserRate(respo?.transactionCurrencyRate);\n setPageLoading(false);\n } catch (error) {\n setPageLoading(false);\n await fireMessage(error, t(\"Error...\"), \"error\", {t});\n setRedirect(true);\n }\n };\n\n useEffect(() => {\n\n dispatch(getData());\n\n Promise.all([loadSupplierList(), loadInventoryList(), loadAreasList(), loadCostLocations(), loadCostCenterList(), loadDetailCoaList(), loadTaxTypes(), loadCustomerList()]);\n\n if (recno) {\n loadVendorInvoice();\n } else {\n if (po) {\n loadPO(po);\n }\n else if(gr){\n loadGRN(gr)\n }\n else {\n loadInvoiceCode();\n }\n }\n }, [recno]);\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive) {\n let saving_data = {};\n\n if(selectedSupplier) {\n saving_data = {\n vendorId: selectedSupplier?.recno,\n coaId: selectedSupplier?.coaId,\n transactionCurrency: selectedSupplier?.defaultCurrencyId ?? defaultCurrency.recno,\n creditDays: selectedSupplier?.creditDays ?? 0,\n creditTerms: selectedSupplier?.creditTerms,\n address: selectedSupplier?.address,\n trnNo: selectedSupplier?.trnNo,\n taxType: selectedSupplier?.taxType,\n };\n\n if (selectedSupplier?.taxType !== undefined && selectedSupplier?.taxType !== 0 && !recno) {\n taxTypeList.map((savedTax) => {\n if (savedTax.value === selectedSupplier?.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n handleInvoiceDetailInBulk({\n taxType: savedTax?.value ?? 0,\n taxPer: savedTax?.taxPercent ?? 0,\n taxText: savedTax?.text,\n });\n }\n });\n }\n\n if(store?.terms && !recno) {\n saving_data.terms = store?.terms;\n }\n\n if(store?.notes && !recno) {\n saving_data.remarks = store?.notes;\n }\n\n handleVendorInvoice(saving_data);\n }\n }\n\n return () => {\n isActive = false;\n }\n\n }, [selectedSupplier, store?.terms, store?.notes])\n\n\n useEffect(() => {\n if (!recno && supplierList.length) {\n const i = supplierList[supplierList.findIndex((x) => x.recno === accounts.defaultVendor)];\n setSelectedSupplier(i);\n if (i && i.recno) {\n handleVendorInvoice({ vendorId: i.recno, coaId: i.coaId });\n }\n }\n }, [supplierList.length, recno, accounts]);\n\n const reloadVendor = async (vendorId) => {\n let f_response = await service.Get(\"/Vendors/\" + vendorId);\n if (f_response.isSuccessFull) {\n setSelectedSupplierDetail(f_response.data);\n }\n };\n\n const handleCreditTerm = (value) => {\n if(vendorInvoice.creditTerms !== value?.value){\n setShowExit(true);\n }\n setSelectedTerm(value);\n handleVendorInvoice({ creditTerms: value?.value, creditDueDate: getDateFromTerm(value.defaultValue, vendorInvoice.pDate) });\n };\n\n const handlePicker = (value) => {\n handleVendorInvoice({ pDate: value, creditDueDate: getDateFromTerm(selectedTerm?.defaultValue ?? \"Custom\", value) });\n };\n\n const handleFreightTaxType = (value) => {\n setFreightTax(value);\n handleVendorInvoice({ freightTaxType: value?.value ?? 0, freightTaxPer: value?.taxPercent ?? 0 });\n };\n\n const handleSupplier = async (value) => {\n if (value?.recno === -1) {\n toggleQuickAddBar(\"vendor\");\n setSelectedSupplier();\n let saving_data = {\n vendorId: null,\n coaId: null,\n transactionCurrency: defaultCurrency.recno,\n creditDays: 0,\n creditTerms: value?.creditTerms,\n address: null,\n trnNo: null,\n };\n handleVendorInvoice(saving_data);\n } else if (value) {\n\n if(vendorInvoice.vendorId !== value?.recno){\n setShowExit(true);\n }\n\n let f_response = await service.Get(\"/Vendors/\" + value.recno);\n if (f_response.isSuccessFull) {\n setSelectedSupplierDetail(f_response.data);\n }\n\n setSelectedSupplier(value);\n\n }\n };\n\n\n const delay = (ms) => {\n return new Promise((resolve) => setTimeout(resolve, ms));\n }\n\n const handleCurrency = async(value) => {\n if (value.recno !== transactionCurrency?.recno) {\n // handleVendorInvoice({transactionCurrency: value?.recno, transactionCurrencyRate: value?.conversionRate});\n // await delay(300);\n setTransactionCurrency(value || {});\n if (value?.recno === vendorInvoice?.modifiedCurrencyPrevious) {\n handleTransactionRate(vendorInvoice?.modifiedCurrencyRate);\n setTransactionCurrencyRate(vendorInvoice?.modifiedCurrencyRate);\n } else {\n handleTransactionRate(value?.conversionRate);\n setTransactionCurrencyRate(value?.conversionRate);\n }\n // if (!recno || value?.recno !== vendorInvoice.transactionCurrency) {\n // handleTransactionRate(value?.conversionRate);\n // }\n // await delay(300);\n // setTransactionCurrencyRate(value?.conversionRate || 0);\n }\n }\n\n const updateTransactionRate = () => {\n handleVendorInvoice({ transactionCurrencyRate: parseFloat(`${userRate}`) });\n handleTransactionRate(parseFloat(`${userRate}`));\n setTransactionCurrencyRate(parseFloat(`${userRate}`));\n setPopoverOpen(!popoverOpen);\n }\n\n const onSubmit = async (index) => {\n\n setLoading(true);\n try {\n if (vendorInvoice.term === \"cash\" && vendorInvoice.cashAmount !== vendorInvoice.netAmount) {\n await fireMessage(t(\"Net amount and Cash Paid amount should be same\"), \"\", \"error\", {t});\n setLoading(false);\n return;\n }\n\n if (!accounts.roudingDifferenceAdjustment) {\n await fireMessage(t(\"Please Map Rounding Difference Adjustment Account\"), \"\", \"error\", {t});\n setLoading(false);\n return;\n }\n\n const invalid = vendorInvoice.details.findIndex((i) => i.invalidDiscount);\n if (invalid !== -1) {\n $(`#positionBottom-${invalid}`).focus();\n setLoading(false);\n return;\n }\n\n const invalidQty = vendorInvoice.details.findIndex((i) => i.invalidQty);\n if (invalidQty !== -1) {\n $(`#QtyBottom-${invalidQty}`).focus();\n setLoading(false);\n return;\n }\n\n const response = await storeInvoice(!!recno, attachmentFiles, duplicate);\n if (response && response.data.invoiceData && response.data.invoiceData.details.length > 0)\n setSendData({\n index: index,\n vendorId: response?.data?.invoiceData?.vendorId,\n coaId: response?.data?.invoiceData?.coaId,\n invoiceNo: response.data.invoiceData.recno,\n });\n await fireMessage(t(\"Saved Successfully\"), t(\"Success...\"), \"success\", {t});\n setLoading(false);\n if (unblock) {\n unblock?.current();\n }\n if (index === 0) {\n history.replace(`/apps/purchase/vendor/Payments?vendor=${response?.data?.invoiceData?.vendorId}&coaId=${response?.data?.invoiceData?.coaId}&invoice=${response.data.invoiceData.recno}`);\n } else {\n history.goBack();\n }\n } catch (error) {\n setLoading(false);\n await fireMessage(error, t(\"Error...\"), \"error\", {t});\n if(!recno) {\n loadInvoiceCode();\n }\n }\n };\n const pushInList = (data, recno = null) => {\n if (quickAddBar.type === \"inventory\" || quickAddBar.type === \"non-inventory\" || quickAddBar.type === \"service-inventory\") {\n if (recno) {\n const list = [...inventoryItems];\n list[list.findIndex((l) => l.recno === recno)] = data;\n setInventoryItems(list);\n } else {\n setInventoryItems((items) => [data, ...items]);\n }\n } else if (quickAddBar.type === \"vendor\") {\n setSuplierList((vendors) => [data, ...vendors]);\n } else if (quickAddBar.type === \"customer\") {\n data.customerId = data.recno;\n setCustomerList((customers) => [data, ...customers]);\n } else if (quickAddBar.type === \"coa\") {\n setDetailCoaList((list) => [data, ...list]);\n }\n };\n const handleTaxAmount = (e, index)=>{\n setUpdatedValue(e.target.value)\n handleTaxSummaryDetail({transactionCurrencyTaxAmount: parseFloat(e.target.value)}, index);\n }\n return redirect ? (\n sendData.index === -1 || sendData.index === 1 ? (\n \n {/* Header */}\n \n
\n\n \n \n \n {t(\"Currency\")}*\n \n
\n\n \n
\n\n {\n !(advanceStore.data.allowMultiCurrency) &&\n {t(title || \"New Bill\")}
\n\n \n handleVendorInvoice({ code: e.target.value })} value={vendorInvoice.code} />\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n {vendorInvoice.vendorId && (\n \n \n {\n reloadVendor(vendorInvoice.vendorId);\n setShowBilling(true);\n }}\n >\n
\n {\n
\n )}\n
\n\n {t(\"BILLING ADDRESS\")}
\n \n\n {selectedSupplierDetail?.address}, {selectedSupplierDetail?.city} {selectedSupplierDetail?.state}, {selectedSupplierDetail?.country}\n
\n }\n \n\n {vendorInvoice.vendorId && (\n \n \n {\n reloadVendor(vendorInvoice.vendorId).then(_ => {\n\n });\n setShowShipping(true);\n }}\n >\n
\n {\n
\n )}\n
\n\n {t(\"SHIPPING ADDRESS\")}
\n \n\n {selectedSupplierDetail?.shippingAddress}, {selectedSupplierDetail?.shippingCity} {selectedSupplierDetail?.shippingState}, {selectedSupplierDetail?.shippingCountry}\n
\n }\n \n\n {vendorInvoice.vendorId && (\n \n \n {\n reloadVendor(vendorInvoice.vendorId).then(_ => {\n\n });\n setShowTRN(true);\n }}\n >\n
\n {
\n )}\n
\n\n {vendorInvoice?.source === 'PRC' ?\n {t(\"TRN\")}
\n \n{vendorInvoice.trnNo}
}\n \n\n \n {\n setShowExit(true);\n handleVendorInvoice({poCode: e.target.value});\n }} className=\"s-input form-control\" style={{ height: \"40px\" }} />\n
\n :\n \n \n {\n setShowExit(true);\n handleVendorInvoice({poCode: e.target.value});\n }} className=\"s-input form-control\" style={{ height: \"40px\" }} />\n
\n }\n\n \n
\n
}\n\n \n \n
\n \n \n\n {\n setShowExit(true);\n handleVendorInvoice({ invoiceTaxType: event.target.value });\n handleInvoiceDetailInBulk({ invoiceTaxType: event.target.value });\n if (event.target.value === \"OutOfScope\") {\n setListSalesInv(\n listSalesInv.map((e) =>\n e.colName === \"taxType\"\n ? {\n ...e,\n show: false,\n avoidChange: true\n }\n : e\n )\n );\n\n setCategoryList(\n categoryList.map((e) =>\n e.colName === \"taxType\"\n ? {\n ...e,\n show: false,\n avoidChange: true\n }\n : e\n )\n );\n\n } else {\n setListSalesInv(\n listSalesInv.map((e) =>\n e.colName === \"taxType\"\n ? {\n ...e,\n show: true,\n avoidChange: false\n }\n : e\n )\n );\n setCategoryList(\n categoryList.map((e) =>\n e.colName === \"taxType\"\n ? {\n ...e,\n show: true,\n avoidChange: false\n }\n : e\n )\n );\n }\n }}\n value={vendorInvoice.invoiceTaxType}\n onBlur={(_) => setSelectedLineCoa(vendorInvoice.coaDetails.length > 0 ? vendorInvoice.coaDetails[0].lineno : 0)}\n >\n \n \n \n \n
\n \n
{t(\"Category Detail\")}
\n\n index}\n onRowClicked={(row, _) => setSelectedLineCoa((vendorInvoice.coaDetails??[]).findIndex(x => x.lineno === row.lineno))}\n columns={categoryColumns(\n ability,\n defaultCurrency.symbol,\n categoryList,\n transactionCurrency,\n transactionCurrencyRate,\n (vendorInvoice?.coaDetails).filter((r) => !r.isDeleted).length,\n costLocations,\n costCenterList,\n inventoryItems,\n taxTypeList,\n accounts,\n toggleQuickAddBar,\n userData.roundingDigit,\n preview,\n detailCoaList,\n removeVendorInvoiceCoaDetail,\n vendorInvoice.invoiceTaxType,\n selectedLineCoa,\n (_) => {\n setSelectedLineCoa(selectedLineCoa + 1);\n },\n customerList,\n t,\n setSelectedLineCoa\n )}\n responsive={true}\n conditionalRowStyles={conditionalRowStylesForms}\n data={(vendorInvoice.coaDetails ?? [])}\n sortIcon={
\n {!preview && (\n \n \n {\n setShowExit(true);\n addCategoryDetail(defaultCostLocation, transactionCurrencyRate);\n setItemCategory(true);\n }}\n style={{ marginTop: \"10px\" }}\n outline\n color=\"success\"\n ref={categoryRef}\n >\n {t(\"Add Row\")}\n \n {\n setOpenCustomizerCategory(true);\n }}\n style={{ marginTop: \"10px\" }}\n color=\"danger\"\n >\n {t(\"Customization\")}\n \n
\n \n )}\n {t(\"Item Detail\")}
\n\n\n index}\n onRowClicked={(row, _) => setSelectedLine((vendorInvoice.details??[]).findIndex(x => x.lineno === row.lineno))}\n columns={columns(\n totalTags,\n setRowIndex,\n ability,\n defaultCurrency.symbol,\n listSalesInv,\n transactionCurrency,\n transactionCurrencyRate,\n vendorInvoice.details.filter((r) => !r.isDeleted).length,\n costLocations,\n costCenterList,\n inventoryItems,\n taxTypeList,\n accounts,\n toggleQuickAddBar,\n userData.roundingDigit,\n preview,\n removeVendorInvoiceDetail,\n vendorInvoice.invoiceTaxType,\n selectedLine,\n (_) => {\n setSelectedLine(selectedLine + 1);\n },\n customerList,\n t,\n setSelectedLine\n )}\n responsive={true}\n conditionalRowStyles={conditionalRowStylesForms}\n data={vendorInvoice.details}\n sortIcon={
\n\n {\n (vendorInvoice.landedCostDetails??[]).length > 0 &&\n {t(\"Landed Cost Detail\")}
\n }\n\n {\n (vendorInvoice.landedCostDetails??[]).length > 0 &&\n\n index}\n onRowClicked={(row, _) => setSelectedLandLine((vendorInvoice.landedCostDetails ?? []).findIndex(x => x.lineno === row.lineno))}\n columns={columns(\n totalTags,\n setRowIndex,\n ability,\n defaultCurrency.symbol,\n listSalesInv,\n transactionCurrency,\n transactionCurrencyRate,\n vendorInvoice.landedCostDetails.filter((r) => !r.isDeleted).length,\n costLocations,\n costCenterList,\n inventoryItems.filter((filterData) => filterData.isService),\n taxTypeList,\n accounts,\n toggleQuickAddBar,\n userData.roundingDigit,\n preview,\n removeVendorInvoiceDetail,\n vendorInvoice.invoiceTaxType,\n selectedLandLine,\n (_) => {\n setSelectedLandLine(selectedLandLine + 1);\n },\n customerList,\n t,\n setSelectedLandLine,\n true\n )}\n responsive={true}\n conditionalRowStyles={conditionalRowStylesForms}\n data={vendorInvoice.landedCostDetails ?? []}\n sortIcon={
\n }\n {!preview && (\n \n \n
\n \n\n \n \n \n
\n
\n\n \n \n handleVendorInvoice({ remarks: e.target.value })} disabled={preview} />\n\n\n {\n vendorInvoice.remarks !== store.notes && (vendorInvoice.remarks??\"\").length > 1 &&\n
\n\n {showFields?.showTerms && (\n \n {\n handleVendorInvoice({changeDefaultNotes: !(vendorInvoice.changeDefaultNotes)})\n }}/>\n \n
\n }\n\n \n \n handleVendorInvoice({ terms: e.target.value })} disabled={preview} />\n\n {\n vendorInvoice.terms !== store.terms && (vendorInvoice.terms??\"\").length > 1 &&\n
\n )}\n \n {\n handleVendorInvoice({changeDefaultTerms: !(vendorInvoice.changeDefaultTerms)})\n }}/>\n \n
\n }\n\n \n
\n \n \n {t(\"Sub Total\")} ({transactionCurrency.code})\n
\n ({t(\"Tax\")} {t(vendorInvoice.invoiceTaxType)})\n \n\n\n {formatCurrency(vendorInvoice.transactionCurrencyTotalAmount, transactionCurrency, false)}\n \n
\n {(vendorInvoice?.transactionCurrencyTotalDiscount ?? 0) - (vendorInvoice?.transactionCurrencyspdiscount ?? 0) !== 0 && (\n \n ({t(\"Tax\")} {t(vendorInvoice.invoiceTaxType)})\n \n\n
\n \n {t(\"Discount\")}\n \n \n {formatCurrency(vendorInvoice.transactionCurrencyTotalDiscount - vendorInvoice.transactionCurrencyspdiscount, transactionCurrency, false)}\n \n
\n )}\n\n {showFields.showFreight && (\n \n \n {\" \"}\n {t(\"Freight\")}\n toggleFreightTax()} id=\"vendor-freight-tax\">\n {vendorInvoice.freightTaxPer ?? \"\"}%{/**/}\n \n \n \n
\n \n \n \n \n \n \n {showFreight ? (\n \n handleVendorInvoice({\n transactionCurrencyFreight: e.target.value !== \"\" ? +e.target.value : e.target.value,\n })\n }\n />\n ) : (\n \n \n setShowFreight(true)} className=\"me-50\" />\n {\" \"}\n {formatCurrency(vendorInvoice.transactionCurrencyFreight, transactionCurrency, false)}\n \n )}\n
\n )}\n\n {(vendorInvoice?.taxDetails || []).map((e, index) => {\n let taxName = taxTypeList[taxTypeList.findIndex((r) => r.value === e.taxType)];\n return taxName && !e.isDeleted ? (\n {t(\"Freight Tax\")}
\n\n
\n \n {taxName.text} - {e.taxPercent}%\n {\" \"}\n {showTaxIndex === index ? (\n handleTaxAmount(e, index)}\n />\n ) : (\n \n \n setShowTaxIndex(index)} className=\"me-50\" />\n {\" \"}\n {formatCurrency(e.transactionCurrencyTaxAmount, transactionCurrency, false)}\n {/*{formatCurrency(taxupdatedValue? taxupdatedValue:e.transactionCurrencyTaxAmount, transactionCurrency, false)}*/}\n \n )}\n
\n ) : null;\n })}\n\n {showFields.showDesc && (\n \n \n {t(\"Extra Disc.\")}\n \n {showExDiscount ? (\n \n handleVendorInvoice({\n transactionCurrencyspdiscount: e.target.value !== \"\" ? +e.target.value : 0,\n })\n }\n />\n ) : (\n \n \n setShowExDiscount(true)} className=\"me-50\" />\n {\" \"}\n {formatCurrency(vendorInvoice.transactionCurrencyspdiscount, transactionCurrency, false)}\n \n )}\n
\n )}\n\n \n \n {t(\"Total\")} ({transactionCurrency.code})\n \n \n {formatCurrency(vendorInvoice.transactionCurrencyNetAmount, transactionCurrency, false)}\n \n
\n \n
\n\n \n \n \n \n {!preview && ((!vendorInvoice.recno && ability.can(\"new\", \"PurchaseInvoices\")) || (!!vendorInvoice.recno && ability.can(\"edit\", \"PurchaseInvoices\"))) && (\n \n {loading ? (\n \n ) : (\n \n )}\n \n\n \n \n {[/*\"Save & Pay\", \"Save & Download\", \"Save & Preview\",*/ t(\"Save\")].map((e, index) => {\n return (\n onSubmit(index + 1)}>\n {e}\n \n );\n })}\n \n \n )}\n {props.quickAdd ? (\n {\n unblock?.current();\n props.toggleQuickAddBar();\n }} color=\"\" className=\"btn-outline-primary\" style={{ marginLeft: 12 }}>\n \n ) : (\n {\n unblock?.current();\n history.goBack();\n }}\n size=\"sm\"\n color=\"error\"\n style={{ marginLeft: 12 }}\n className=\"btn-outline-primary\"\n >\n \n \n
\n {/* /Invoice Note */}\n\n {/* Invoice Actions */}\n
\n {/* /Invoice Actions */}\n\n {searchBarOpen.open && (\n \n
\n
\n \n {t(\"Vendor Details\")}
\n {t(\"Enter Your Vendor Details.\")}\n\n
\n \n {t(\"Vendor Address\")}
\n {t(\"Add Vendor Address.\")}\n\n
\n \n {t(\"Notes\")}
\n {t(\"Add your notes.\")}\n\n
\n \n {t(\"Vendor Tax Details\")}
\n {t(\"Enter Your Vendor Tax Details.\")}\n\n
\n \n {t(\"Billing Details\")}
\n {t(\"Enter Your Vendor Billing Details.\")}\n\n
\n \n {t(\"Contact Person\")}
\n {t(\"Enter Your Contact Person Details.\")}\n\n\n \n setStepper(el)}\n ref={ref}\n steps={steps}\n options={{\n linear: false\n }}/>\n }\n\n
\n\n \n\n \n \n \n : \n )\n }\n \n \n {!preview && ((!model.recno && ability.can('new', 'Vendors')) || (!!model.recno && ability.can('edit', 'Vendors'))) &&\n (\n loading ? \n : \n \n )\n }\n {props.quickAdd ? : {\n unblock?.current()\n history.goBack()\n }} color='' className='btn-outline-primary' >\n }\n \n \n
\n \n\n
\n \n {t(`${title??\"New\"} Vendor`)}\n
\n\n {\n pageLoading ?\n\n
{\n setCustomDisplay('block');\n }}\n onMouseLeave={e => {\n setCustomDisplay('none')\n }}>\n 
\n \n {\n template.isDefault && \n
\n \n \n )\n}\n\nexport default ChooseTemplateCard\n","// ** Custom Components\n\nimport { Offcanvas, OffcanvasBody, OffcanvasHeader, Row } from \"reactstrap\";\nimport * as React from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport ChooseTemplateCard from \"./ChooseTemplateCard\";\nimport axios from \"axios\";\nimport { getData } from \"../../templates/store\";\nimport { fireMessage } from \"../../../../components/MessageModel\";\nimport { useState } from \"react\";\nimport BlockingUI from \"../../../../components/BlockingUI\";\nimport { getData as getCustomizationData } from \"../store\";\n\nconst TemplatesSidebar = ({ open, toggleSidebar }) => {\n const store = useSelector((state) => state?.templateStore);\n // console.log(\"storeTemplates\", store.data);\n const dispatch = useDispatch();\n const [loading, setLoading] = useState(false);\n\n const onClickUse = async (template) => {\n setLoading(true);\n try {\n let res = await axios.put(\n \"/InvoicePreviewCustomization/SetDefaultSalesInvoiceTemplate/\" +\n template.recno,\n {}\n );\n fireMessage(\n \"Template changed successfully\",\n \"Successful\",\n \"success\"\n );\n dispatch(getCustomizationData());\n dispatch(getData({ template: \"SalesInvoice\" }));\n } catch (e) {\n fireMessage(e, \"Error\", \"error\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n \n onClickUse(template)}>\n Use\n \n
\n \n
\n )\n}\nexport default ApprovalDialog\n","//** React imports\nimport {useEffect, useState} from \"react\";\n\n// ** Custom Components\nimport InvoiceActivityLogs from '@components/invoice-approval-activity-logs'\n\n// ** Reactstrap Imports\nimport {\n Card,\n CardHeader,\n CardTitle,\n CardBody,\n} from 'reactstrap'\n\n// ** Third Party Imports\nimport {useTranslation} from \"react-i18next\";\nimport {useSelector} from \"react-redux\";\n\nconst CustomerInvoiceApprovalActivity = () => {\n\n // ** Hook\n const {t} = useTranslation();\n\n // ** State\n const [activities, setActivities] = useState([])\n\n // ** Store\n const store = useSelector((state) => state.customerInvoice);\n\n useEffect(()=>{\n setActivities(store.activityLogs)\n },[store.activityLogs])\n\n return (\n \n setOpen({...open, open: false})} className='modal-dialog-centered'>\n setOpen({...open, open: false})}>{type === 1 ? t(`Mark as ${approval_data.salesFirstApprovalLevelHeading}`) : type === 2 ? t(`Mark as ${approval_data.salesSecondApprovalLevelHeading}`) : type === 3 ? t(`Mark as ${approval_data.salesThirdApprovalLevelHeading}`) : t(`Mark as ${approval_data.salesForthApprovalLevelHeading}`)} \n \n \n \n \n {\n }}\n onChange={(e) => setComments(e.target.value)}\n className={commentRequired ? 'form-control is-invalid rounded-0' : 'form-control rounded-0'}\n />\n \n \n \n \n {\n isLoading ?\n :\n \n }\n\n {\n isLoading ?\n :\n \n }\n \n \n
\n {type === 1 ? t(`Do you really want to mark this as ${approval_data.salesFirstApprovalLevelHeading}. Please write the reason below.`) : type === 2 ? t(`Do you really want to mark this as ${approval_data.salesSecondApprovalLevelHeading}. Please write the reason below.`) : type === 3 ? t(`Do you really want to mark this as ${approval_data.salesThirdApprovalLevelHeading}. Please write the reason below.`) : t(`Do you really want to mark this as ${approval_data.salesForthApprovalLevelHeading}. Please write the reason below.`)}
\n\n\n {t(\"Activity Logs\")} \n
\n \n
\n \n \n
\n {title}
\n\n {message}\n
\n Branch: {locationInfo?.name}
\n{invoiceDetail.length > 0 ? invoiceDetail[0].Code : \"NAN\"}
\n\n {!dummy && invoiceDetail.length > 0 && (\n
\n \n \n \n \n \n {\"Mail\"}\n \n
\n )}\n\n\n {!dummy && ability.can('delete', 'SalesInvoices') && invoiceDetail.length && (\n \n handleDeleteInvoice({\n ...invoiceDetail[0],\n recno: recNo\n })} id={'InvoicePreviewEditPrint'}>\n \n \n {\"Delete\"}\n \n
\n )}\n\n {!dummy && ability.can('edit', 'SalesInvoices') && (\n \n \n \n \n {\"Edit\"}\n \n
\n )}\n\n \n {\n await printPdf();\n }}\n component='div'\n >\n file_download \n \n \n {\"Download\"}\n \n
\n\n {!dummy &&\n \n \n print \n \n \n {\"Print\"}\n \n
\n }\n {\n \n setHidden(true)}>\n close \n \n \n {\"Close\"}\n \n
\n }\n \n {\n (invoiceDetail.length > 0 && (invoiceDetail[0].status ?? \"\").toLowerCase() !== \"paid\") ?\n :\n 0 ? (invoiceDetail[0].status ?? \"\").toLowerCase() === \"paid\" ? 'light-success' : (invoiceDetail[0].status ?? \"\").toLowerCase() === \"overdue\" ? 'light-danger' : 'light-warning' : 'warning'}>\n {invoiceDetail.length > 0 ? invoiceDetail[0].status : \"Pending\"}\n \n }\n
\n }\n\n \n {\n invoiceDetail.length > 0 &&\n
\n\n \n {\n (advanceStore.approval_data.isSalesApprovalLvl1RightsEnabled) && (invoiceDetail.length > 0 ? !(invoiceDetail[0].isApproved) : false) &&\n \n }\n\n {\n (advanceStore.approval_data.isSalesApprovalLvl2RightsEnabled) && (invoiceDetail.length > 0 ? ((invoiceDetail[0].isApproved) && !(invoiceDetail[0].isVerified)) : false) &&\n \n }\n\n {\n (advanceStore.approval_data.isSalesApprovalLvl3RightsEnabled) && (invoiceDetail.length > 0 ? ((invoiceDetail[0].isApproved) && (invoiceDetail[0].isVerified) && !(invoiceDetail[0].isApprovedLvl3)) : false) &&\n \n }\n\n {\n (advanceStore.approval_data.isSalesApprovalLvl4RightsEnabled) && (invoiceDetail.length > 0 ? ((invoiceDetail[0].isApproved) && (invoiceDetail[0].isVerified) && (invoiceDetail[0].isApprovedLvl3) && !(invoiceDetail[0].isApprovedLvl4)) : false) &&\n \n }\n\n
\n }\n \n \n \n \n \n \n \n handleClickOpen()}\n style={{width: \"100%\"}}>\n Change Logo\n \n {\n !((dummy ? dummyCustomization.pageSize ?? \"\" : store.data.pageSize ?? \"\").includes(\"80\")) &&\n handleChangeWithLogo()}\n style={{width: \"100%\"}}>\n {withLogo === \"1\" ? \"Hide Logo\" : \"Show Logo\"}\n \n }\n {\n !((dummy ? dummyCustomization.pageSize ?? \"\" : store.data.pageSize ?? \"\").includes(\"80\")) &&\n toggleOpenCustomization()}\n style={{width: \"100%\"}}>\n Preferences\n \n }\n toggleOpenTemplates()}\n style={{width: \"100%\"}}>\n Templates\n \n \n \n
\n\n \n )}\n {!dummy && (\n \n
\n )}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].payments.length > 0 && (\n <>\n \n \n
\n \n \n {\n \n
\n \n )}\n \n index}\n subHeader={false}\n columns={columns(ability, defaultCurrency, onClickRowDelete)}\n responsive={true}\n data={invoiceDetail.length > 0 ? invoiceDetail[0].payments : []}\n sortIcon={
\n }\n \n\n {store.data.isRtl ?\n \n : (dummy ? dummyCustomization.pageSize ?? \"\" : store.data.pageSize ?? \"\").includes(\"80\") ? (\n \n ) : (dummy ? dummyCustomization.pageSize ?? \"\" : store.data.pageSize ?? \"\").includes(\"Letter\") ? (\n \n ) : (dummy ? dummyCustomization.pageSize ?? \"\" : store.data.pageSize ?? \"\").includes(\"Legal\") ? (\n \n ) : (\n \n )\n }\n
\n \n
\n )\n}\nexport default ExceedDialog","// ** Custom Components\n\nimport {\n Col,\n Nav,\n NavItem,\n NavLink,\n Offcanvas,\n OffcanvasBody,\n OffcanvasHeader,\n Row,\n TabContent,\n TabPane\n} from \"reactstrap\";\nimport {useEffect, useState} from \"react\";\nimport BranchBankDetail from \"../../../settings/company/form-view/steps/BranchBankDetail\";\nimport * as React from \"react\";\nimport {useCompany} from \"../../../settings/company/context/useCompany\";\nimport GeneralSettings from \"../tabs/GeneralSettings\";\nimport HeaderSettings from \"../tabs/HeaderSettings\";\nimport FooterSettings from \"../tabs/FooterSettings\";\nimport FontSettings from \"../tabs/FontSettings\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {getData} from '../store'\nimport {CompanyLogoProvider} from \"../../../../utility/context/invoices/CompanyLogoContext\";\nimport BankSettings from \"../tabs/BankSettings\";\n\nconst InvoiceCustomization = ({\n open,\n toggleSidebar,\n locationInfo,\n invoiceNo,\n setInvoiceNo,\n getLocation,\n setLocationInfo\n }) => {\n const [active, setActive] = useState('1')\n const [customization, setCustomization] = useState();\n const store = useSelector(state => state.saleInvoiceCustomization)\n const dispatch = useDispatch()\n\n const {\n bankDetail,\n loadBank,\n handleBank,\n storeBank\n } = useCompany()\n\n const toggle = tab => {\n setActive(tab)\n }\n\n useEffect(() => {\n setCustomization(store.data)\n }, [store.data]);\n\n useEffect(() => {\n dispatch(getData());\n }, []);\n\n\n return (\n \n setCenteredModal(!centeredModal)} className='modal-dialog-centered'>\n setCenteredModal(!centeredModal)}>Excess Amount \n \n \n handleExceedAccount(record)}\n isDisabled={false}\n />\n \n \n \n \n \n \n \n
\n {message}
\n\n
{customization.showWaterImage && }\n
\n )}\n\n {props.pageNum === 1 && (\n 0 ? (invoiceDetail[0].invoiceNetAmount - paidAmount > 0 ? \"#ffb907\" : \"#0b9b25\") : \"#0b9b25\",\n fontWeight: 'bold',\n fontSize: `8pt`\n }}>\n {invoiceDetail.length > 0 ? (invoiceDetail[0].invoiceNetAmount - paidAmount > 0 ? \"\" : \"PAID\") : \"PAID\"}\n
\n\n \n\n
\n {(state.invoice_remarks ?? \"\").length > 0 ? state.invoice_remarks ?? \"\" : customization.notes}\n
\n\n {props.pageNum} / {props.totalPages}\n
\n \n \n );\n };\n\n return (\n\n 0 ? invoiceDetail[0].Code : \"Sale-Invoice\"}\n >\n \n \n
\n\n \n\n \n {\n if (e.target.checked) {\n const amount = data.transactionInvOutstanding;\n handleVoucherDet({\n error: false,\n checked_pay_all: true,\n transactionamount: parseFloat(amount)\n }, srNo)\n } else {\n const amount = 0;\n handleVoucherDet({\n error: false,\n checked_pay_all: false,\n transactionamount: amount\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n }\n }}/>\n ) : colum === \"date\" ? (\n <>\n {\n if (e.target.checked) {\n const amount = data.transactionAdjustableAmount;\n handleVoucherAdj({\n error: false,\n checked_pay_all: true,\n transactionAdjustedAmount: parseFloat(amount)\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n } else {\n const amount = 0;\n handleVoucherAdj({\n error: false,\n checked_pay_all: false,\n transactionAdjustedAmount: amount\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n }\n }}/>\n ) : colum === \"date\" ? (\n <>\n \n \n)\n\nconst CashFormView = ({\n title,\n recno,\n full_screen,\n preview,\n onCancel,\n onSubmit,\n payment,\n customer_query,\n invoice_query,\n formType,\n unCategories = false,\n un_transaction = {},\n ...props\n }) => {\n\n const {t} = useTranslation()\n const ability = useCan()\n const {\n userData,\n voucher,\n defaultCurrency,\n currencies,\n loadVoucher,\n handleVoucher,\n handleInvoiceDetailInBulk,\n handleTransactionRate,\n handleVoucherDet,\n storeVoucher,\n loadVoucherCode\n } = useCashVoucher()\n\n const {skin} = useSkin()\n\n const dispatch = useDispatch();\n\n // ** States\n const [selectedCreditAccount, setSelectedCreditAccount] = useState(payment)\n const [selectedCustomer, setSelectedCustomer] = useState()\n const [width, setWidth] = useState(500);\n const [selectedChequeNo, SetSelectedChequeNo] = useState('')\n const [selectedPType, SetSelectedPType] = useState('')\n const [openPending, setOpenPending] = useState(false)\n const [attachments, setAttachments] = useState([])\n const [transactionCurrency, setTransactionCurrency] = useState(defaultCurrency)\n const [transactionCurrencyRate, setTransactionCurrencyRate] = useState(defaultCurrency?.conversionRate || 0)\n const [userRate, setUserRate] = useState(transactionCurrencyRate || 0)\n const [loading, setLoading] = useState(false)\n const [isAmountFocused, setIsAmountFocused] = useState(false);\n const [showAlertAmount, setShowAlertAmount] = useState(false);\n const [exceedAccount, setExceedAccount] = useState();\n const advanceStore = useSelector((state) => state?.advanceSettings);\n\n const unblock = useRef(null);\n const [doCompareModel, setDoCompareModel] = useState(false);\n let history = useHistory();\n const parent = useRef(null);\n const [selectedLine, setSelectedLine] = useState(-1)\n const wrapperRef = useRef(null);\n const creditWrapperRef = useRef(null);\n const frRef = useRef(null);\n const [exitAlert, setExitAlert] = useState(false);\n const { accounts } = useMapAccounts();\n const [withHeldTax, setWithHeldTax] = useState()\n const [popoverOpen, setPopoverOpen] = useState(false)\n const [openBankCharges, setOpenBankCharges] = useState(false)\n const [openExceedDialog, setOpenExceedDialog] = useState(false)\n const [popoverExceed, setPopoverExceed] = useState(false)\n const [returnUri, setReturnUri] = useState(\"/apps/customer-receiving/list\");\n\n\n useEffect(() => {\n setWidth(parent?.current?.offsetWidth || 500);\n }, [parent]);\n\n useEffect(() => {\n window.addEventListener(\"resize\", () => setWidth(parent?.current?.offsetWidth || 500), false);\n }, []);\n\n useEffect(() => {\n unblock.current = history.block((location) => {\n if(location.pathname !== '/login') {\n if (doCompareModel) {\n setReturnUri(location.pathname);\n if (location?.pathname !== \"/apps/sales/customers/receiving/Recoveries\") {\n setExitAlert(true);\n }\n return false;\n } else {\n unblock?.current();\n }\n }\n });\n return function () {\n unblock.current.current && unblock.current.current();\n };\n }, [history, voucher, doCompareModel]);\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n setSelectedLine(-1)\n }\n\n if (creditWrapperRef.current && !creditWrapperRef.current.contains(event.target)) {\n setSelectedLine(-1)\n }\n if (frRef.current && !frRef.current.contains(event.target)) {\n setOpenBankCharges(false)\n }\n }\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [wrapperRef, frRef, creditWrapperRef]);\n\n const onAttachment = file => {\n setAttachments(attachments => [...attachments, file])\n }\n\n const onAttachmentRemove = (index) => {\n setAttachments(attachments => attachments.filter((a, ix) => ix !== index))\n }\n\n const doLoadVoucher = async () => {\n try {\n setLoading(true)\n await loadVoucher(recno)\n } catch (error) {\n await fireMessage(error, \"Error...\", 'error')\n unblock?.current();\n onCancel()\n } finally {\n setLoading(false)\n }\n }\n\n useEffect(async () => {\n if (voucher.customer && !preview && !recno && voucher.transactionCurrency === transactionCurrency.recno) {\n await loadPendingInvoice()\n }\n\n }, [voucher.customer, transactionCurrencyRate])\n\n useEffect(() => {\n if (customer_query) {\n handleVoucher({customer: customer_query});\n }\n }, [customer_query])\n\n useEffect(() => {\n SetSelectedPType(voucher.pType);\n }, [voucher.pType])\n\n const loadPendingInvoice = async () => {\n service.Get(`/Recoveries/GetCustomerPendingSalesInvoice`, {\n CustomerId: voucher.customer,\n ConvertionRate: userRate,\n InvoiceRecNo: invoice_query\n }).then(response => response.data).then(data => {\n if (data.invoices) {\n handleVoucher({\n details: data.invoices.map((l, index) => ({\n ...l,\n isNewAdded: true,\n crId: null,\n isDeleted: false,\n isUpdated: true,\n lineno: index + 1\n }))\n })\n } else {\n handleVoucher({details: []})\n }\n\n if (data.adjustments) {\n handleVoucher({\n advanceInvoiceDetails: data.adjustments.map((l, index) => ({\n ...l,\n isNewAdded: true,\n crId: null,\n isDeleted: false,\n isUpdated: true,\n lineno: index + 1\n }))\n })\n } else {\n handleVoucher({advanceInvoiceDetails: []})\n }\n })\n }\n\n useEffect(() => {\n if (!!voucher.recno && voucher.details.length > 0) {\n setTransactionCurrencyRate(voucher.transactionCurrencyRate)\n }\n }, [voucher])\n\n useEffect(() => {\n if ((voucher.transactionCurrencyBankVal ?? 0) > 0) {\n if (!isAmountFocused) {\n setShowAlertAmount(true)\n }\n }\n }, [isAmountFocused])\n\n useEffect(() => {\n let total = 0;\n if (invoice_query) {\n voucher.details.map((e, index) => {\n if (e.transactionamount <= 0) {\n handleVoucherDet({\n error: false,\n checked_pay_all: true,\n transactionamount: parseFloat((e.transactionInvOutstanding ?? 0).toFixed(userData.roundingDigit))\n }, index)\n total += e.transactionInvOutstanding;\n } else {\n total += e.transactionamount;\n }\n })\n handleAmount(parseFloat((total ?? 0).toFixed(userData.roundingDigit)))\n }\n }, [voucher.details])\n\n const handleAmountDistribution = () => {\n setLoading(true);\n setShowAlertAmount(false);\n let totalAmount = voucher.transactionCurrencyBankVal + (voucher.transactionCurrencyAdjustAmount);\n if (totalAmount > 0) {\n let details = voucher.details.map((e, index) => {\n let all_pay = false;\n let payingAmount = 0;\n\n if (totalAmount > 0) {\n let remainingAm = totalAmount - (e?.transactionInvOutstanding ?? 0);\n\n if (remainingAm < 1) {\n payingAmount = totalAmount;\n } else {\n payingAmount = (e?.transactionInvOutstanding ?? 0);\n all_pay = true;\n }\n\n totalAmount = remainingAm;\n }\n\n e.error = false;\n e.checked_pay_all = all_pay;\n e.transactionamount = parseFloat(payingAmount.toFixed(userData.roundingDigit))\n\n\n // handleVoucherDet({\n // error: false,\n // checked_pay_all: all_pay,\n // transactionamount: parseFloat(payingAmount.toFixed(userData.roundingDigit))\n // }, index)\n\n return e;\n });\n\n handleInvoiceDetailInBulk({...voucher, details: details});\n }\n\n setLoading(false);\n }\n\n useEffect(() => {\n if (recno) {\n doLoadVoucher()\n } else {\n handleVoucher({\n gstWithHeld: accounts.defSalesWithHeldTaxCoa,\n writeOff: accounts.defSalesWriteOffCoa\n })\n loadVoucherCode(\"CP\");\n }\n }, [recno])\n\n\n const handlePicker = (value) => {\n handleVoucher({vDate: value})\n }\n\n const handleChequeDatePicker = (value) => {\n handleVoucher({chqDate: value})\n }\n\n const handleCreditAccount = (value) => {\n\n if(value?.defaultCurrencyId !== defaultCurrency.recno) {\n handleVoucher({bankCode: value?.recno, transactionCurrency: value?.defaultCurrencyId ?? defaultCurrency.recno})\n setSelectedCreditAccount(value)\n } else {\n handleVoucher({bankCode: value?.recno})\n setSelectedCreditAccount(value)\n }\n }\n\n\n const handleCustomer = (value) => {\n if(value?.recno !== voucher.customer) {\n setDoCompareModel(true);\n }\n\n handleVoucher({\n customer: value.recno,\n ccode: value.coaId,\n transactionCurrency: value.defaultCurrencyId ?? defaultCurrency.recno,\n exceedCoa: value?.advanceAdjustCOAId,\n adjust: value?.advanceAdjustCOAId,\n })\n setSelectedCustomer(value)\n }\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive && unCategories) {\n let deposits = (un_transaction?.deposits??0);\n let currencyBank = currencies.find((element) => element?.recno === un_transaction?.bankCurrencyId)\n if(un_transaction?.bankCurrencyId !== defaultCurrency.recno) {\n deposits = (un_transaction?.deposits??0) * (currencyBank?.conversionRate??1);\n }\n\n handleAmount(deposits);\n\n }\n\n return () => {\n isActive = false;\n }\n }, [unCategories, un_transaction])\n\n const handleAmount = (value) => {\n if(unCategories) {\n handleVoucher({\n transactionCurrencyBankVal: parseFloat(`${value}`),\n statementRecno: un_transaction?.recno??0\n })\n } else {\n if (!isNaN(parseFloat(value))) {\n handleVoucher({\n transactionCurrencyBankVal: parseFloat(value),\n transactionCurrencyBankValInvalid: false\n })\n } else {\n handleVoucher({\n transactionCurrencyBankVal: 0,\n transactionCurrencyBankValInvalid: false\n })\n }\n }\n }\n\n const handleDescription = (value) => {\n handleVoucher({description: value})\n }\n\n\n const handlePType = (value) => {\n handleVoucher({pType: value})\n SetSelectedPType(value)\n }\n\n const handleCheqNo = (value) => {\n handleVoucher({chqNo: value})\n SetSelectedChequeNo(value)\n }\n\n\n const handleCurrency = (value) => {\n if(unCategories) {\n let deposits = (un_transaction?.deposits??0);\n let currencyBank = currencies.find((element) => element?.recno === un_transaction?.bankCurrencyId)\n if(un_transaction?.bankCurrencyId !== defaultCurrency.recno) {\n deposits = (un_transaction?.deposits??0) * (currencyBank?.conversionRate??1);\n }\n\n handleVoucher({\n transactionCurrency: value.recno,\n transactionCurrencyBankVal: parseFloat(`${(deposits??0)/(value.conversionRate??1)}`),\n statementRecno: un_transaction?.recno??0\n })\n } else {\n handleVoucher({transactionCurrency: value.recno})\n }\n setTransactionCurrency(value)\n setTransactionCurrencyRate(value.conversionRate)\n setUserRate(value.conversionRate)\n\n }\n\n const updateTransactionRate = () => {\n if(unCategories) {\n let deposits = (un_transaction?.deposits??0);\n let currencyBank = currencies.find((element) => element?.recno === un_transaction?.bankCurrencyId)\n if(un_transaction?.bankCurrencyId !== defaultCurrency.recno) {\n deposits = (un_transaction?.deposits??0) * (currencyBank?.conversionRate??1);\n }\n\n handleVoucher({\n transactionCurrencyBankVal: parseFloat(`${(deposits??0)/(userRate??1)}`),\n })\n }\n\n setTransactionCurrencyRate(parseFloat(userRate))\n setPopoverOpen(!popoverOpen)\n }\n\n const openExceedPopOver = () => {\n setPopoverExceed(!popoverExceed)\n }\n\n const handleExceedAccount = (record) => {\n setExceedAccount(record)\n handleVoucher({exceedCoa: record?.recno})\n }\n\n const doSubmit = async (verified = false) => {\n setOpenExceedDialog(false)\n try {\n\n if (\n voucher.bankCode === null || voucher.bankCode === undefined\n ) {\n await fireMessage(\n \"Please select payment account\",\n \"\",\n \"error\"\n )\n return\n }\n\n if ((voucher.transactionCurrencyBankVal + (voucher.transactionCurrencyAdjustAmount??0) - (voucher.transactionCurrencyVAmount - (voucher.transactionCurrencyWriteOffVal))) < 0) {\n await fireMessage(\n \"Amount Received from customer is less than invoices amount\",\n \"\",\n \"error\"\n )\n return\n }\n\n if ((voucher.transactionCurrencyBankVal + (voucher.transactionCurrencyAdjustAmount??0) - voucher.transactionCurrencyVAmount) > 0 && !verified) {\n setOpenExceedDialog(true)\n return\n }\n\n setLoading(true)\n\n const response = await storeVoucher(!!recno, attachments)\n toast.success(\n , // default role was 'admin'\n {icon: false, transition: Slide, hideProgressBar: true, autoClose: 2000}\n )\n unblock?.current();\n if (full_screen) {\n history.goBack()\n if(invoice_query) {\n dispatch(\n getInvoiceData({\n forceLoad: true\n })\n );\n }\n } else {\n await onSubmit(response)\n }\n setLoading(false)\n\n } catch (error) {\n await fireMessage(error, \"Error...\", 'error')\n setLoading(false)\n\n }\n }\n\n const doCancel = async () => {\n if (props.quickAdd) {\n unblock?.current();\n props.toggleQuickAddBar()\n } else {\n history.goBack();\n }\n }\n\n useEffect(() => {\n handleTransactionRate(transactionCurrencyRate)\n }, [transactionCurrencyRate])\n\n useEffect(() => {\n handleCreditAccount(payment)\n }, [payment])\n\n useEffect(() => {\n handleVoucher({pAdjustType: \"SALES\", pType: \"Cash\", voucherType: \"CP\", details: []})\n }, [])\n\n useEffect(()=>{\n if(!recno){\n if(voucher.transactionCurrencyBankVal > 0 && withHeldTax){\n const calPercent = (voucher.transactionCurrencyBankVal * withHeldTax.taxPercent) / 100\n\n handleVoucher({\n transactionCurrencyGstWithHeldVal: isNaN(parseFloat(calPercent)) ? 0 : parseFloat(calPercent)\n })\n }\n else{\n handleVoucher({\n transactionCurrencyGstWithHeldVal: 0\n })\n }\n }\n\n },[voucher.transactionCurrencyBankVal, withHeldTax])\n\n const handleWithHeldTax = (record) => {\n\n setWithHeldTax(record)\n\n handleVoucher({\n gstWithHeld: record?.coaId ? record?.coaId : null,\n gstWithHeldPr: record?.taxPercent ? record?.taxPercent : null\n })\n }\n\n return (\n \n \n \n \n \n handleVoucher({codeId: e.target.value})}\n className=\"s-input form-control\"\n />\n
\n\n \n {customization.showHeaderImage && customization.headerImage && (\n \n \n 
: null}\n \n \n {customization.showOrgName && (\n \n {locationInfo?.name ?? \"اسم الشركة\"}\n \n )}\n \n {locationInfo?.address ?? \"لا عنوان\"}\n \n {locationInfo?.address2 && (\n \n {locationInfo?.address2 ?? \"لا عنوان\"}\n \n )}\n {(locationInfo?.city || locationInfo?.country) && (\n \n {locationInfo?.city ?? \"\"}, {locationInfo?.country ?? \"\"}\n \n )}\n {locationInfo?.contactNo && (\n \n هاتف: {locationInfo?.contactNo}\n \n )}\n {locationInfo?.email && (\n \n البريد الإلكتروني: {locationInfo?.email}\n \n )}\n\n {locationInfo?.web && (\n \n شبكة: {locationInfo?.web}\n \n )}\n {customization.showOrgTaxNo && (\n \n TRN: {locationInfo?.taxNo}\n \n )}\n
\n )}\n \n
\n \n \n {customization.showDocumentTitle && (\n \n {(customization.reportTitle ?? \"فاتورة البيع\").toUpperCase()}\n \n )}\n {invoiceNo + '#'}\n \n
\n \n {customization.showBalanceDue && (\n <>\n الرصيد المستحق\n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n
\n \n \n )}\n \n \n
\n\n \n {customization.showAddress && (\n \n {customization.showBillTo && (\n \n {customization.billToTitle ?? \"إلى الفاتورة\"}\n \n )}\n {invoiceDetail.length && invoiceDetail[0].bllingContactPerson && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].bllingContactPerson : \"\"}\n \n )}\n\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Name : \"NAN\"}\n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address : \"NAN\"}\n \n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Address_2 : \"\"}\n \n )}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_City + \" \" + invoiceDetail[0].Customer_State + \", \" + (invoiceDetail[0].Customer_Country ?? \"\") + \" , \" + (invoiceDetail[0].Customer_Postal_Code ?? \"\") : \"NAN\"}\n \n ) : null}\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Tax !== undefined ? (\n \n TRN: {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Tax : \"NAN\"}\n \n ) : null}\n {invoiceDetail.length > 0 && invoiceDetail[0].billingAddressPhoneno ? (\n \n هاتف : {invoiceDetail.length > 0 ? invoiceDetail[0].billingAddressPhoneno : \"--\"}\n \n ) : null}\n \n \n )}\n \n \n {customization.shipToTitle ?? \"عنوان الشحن\"}\n \n\n {invoiceDetail.length && invoiceDetail[0].shippingContactPerson && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].shippingContactPerson : \"\"}\n \n )}\n\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address : \"NAN\"}\n \n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_Address_2 && (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_Address_2 : \"NAN\"}\n \n )}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].Customer_Shipping_City ? (\n \n {invoiceDetail.length > 0 ? invoiceDetail[0].Customer_Shipping_City + \" \" + invoiceDetail[0].Customer_Shipping_State + \", \" + invoiceDetail[0].Customer_Shipping_Country + \" , \" + invoiceDetail[0].Customer_Shipping_Postal_Code : \"NAN\"}\n \n ) : null}\n\n {invoiceDetail.length > 0 && invoiceDetail[0].shipingAddressPhoneno ? (\n \n هاتف: {invoiceDetail.length > 0 ? invoiceDetail[0].shipingAddressPhoneno : \"--\"}\n \n ) : null}\n \n )}\n \n {!customization.showAddress && \n \n \n \n تاريخ الفاتورة :\n \n \n \n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].Date), (userData.previewDateFormat??tablesDateFormat).toLowerCase()) : \"NAN\"}\n \n \n \n\n \n \n \n الشروط :\n \n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].creditTerms ?? \"N/A\" : \"N/A\"}\n \n \n\n \n \n \n مستحق في :\n \n \n \n \n {invoiceDetail.length > 0 ? dateFormat(new Date(invoiceDetail[0].creditDueDate ?? invoiceDetail[0].Date), (userData.previewDateFormat??tablesDateFormat).toLowerCase()) : \"\"}\n \n \n \n\n\n {\n invoiceDetail.length > 0 && invoiceDetail[0].customerInvoiceNo &&\n \n \n \n أمر الشراء# :\n \n \n \n {invoiceDetail.length > 0 ? invoiceDetail[0].customerInvoiceNo : \"\"}\n \n \n }\n \n \n
\n\n \n
\n\n {customization.showTaxableAmount && (\n \n \n المبلغ الخاضع للضريبة\n \n \n \n {formatCurrency(state.totalAmount, customCurrency)}\n \n \n
\n )}\n\n {customization.showTaxableAmount && (\n \n \n إجمالي ضريبة القيمة المضافة\n \n \n \n {formatCurrency(state.totalTaxSummary, customCurrency)}\n \n \n
\n )}\n\n {state.spDiscount > 0 && (\n \n \n خصم\n \n \n \n {formatCurrency(state.spDiscount, customCurrency)}\n \n \n
\n )}\n\n {customization.showFreight > 0 && (\n \n \n شحن\n \n \n \n {formatCurrency(invoiceDetail.length > 0 ? invoiceDetail[0].Invoice_Frieght ?? 0 : 0, customCurrency)}\n \n \n
\n )}\n\n {customization.showTaxableAmount && (\n \n \n {(customization.totalTitle ?? \"\").length > 0 ? customization.totalTitle : \"المبلغ الإجمالي\"}\n \n \n \n {formatCurrency(invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0, customCurrency)}\n \n \n
\n )}\n\n {(\n \n \n الإجمالي بالكلمات :\n \n )}\n \n \n {inWords(invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0, customCurrency)}\n \n )}\n \n\n \n {(customization.totalTitle ?? \"\").length > 0 ? customization.totalTitle : \"الرصيد المستحق\"}\n \n }\n \n \n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n }\n \n
\n )}\n\n {customization.showTaxSummaryTable && (customization.showTaxSummaryTableTaxDetailsTitle || customization.showTaxSummaryTableTaxableAmountTitle || customization.showTaxSummaryTableTaxAmountTitle) && (taxDetail || []).length > 0 && (\n
\n \n \n );\n};\n\nexport default SalesArabicInvoice;\n\n/*\n\nA predefined size. The supported paper sizes are: A0-A10, B0-B10, C0-C10, Executive, Folio, Legal, Letter, Tabloid.\n\n*/\n","import '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useState, useEffect, memo} from 'react'\nimport {useTranslation} from \"react-i18next\"\nimport {useCashVoucher} from \"../../../../../../utility/hooks/useCashVoucher\";\nimport {Checkbox} from \"@mui/material\";\nimport * as React from \"react\";\nimport {formatCurrency, formatDate} from \"../../../../../../utility/Utils\";\nimport {Link} from \"react-router-dom\";\n\n\nconst ColumnCell = (props) => {\n const {t} = useTranslation()\n\n const {\n colum,\n srNo,\n data,\n roundingDigit,\n preview,\n transactionCurrency\n } = props\n\n const {\n handleVoucherDet\n } = useCashVoucher()\n\n return colum === \"check\" ? (\n \n \n
\n )}\n \n \n {customization.showBalanceDue && (\n <>\n الرصيد المستحق\n {formatCurrency((invoiceDetail.length > 0 ? invoiceDetail[0].invoiceNetAmount ?? 0 : 0) - paidAmount, customCurrency)}\n \n
\n \n \n )}\n
\n \n
\n
\n )}\n\n {customization.showBankDetails && (\n \n {customization.taxSummaryTableTitle ?? \"ملخص الضرائب\"} {customCurrency?.code !== defaultCurrency?.code ? `(1 ${customCurrency?.code??\"\"} = ${customCurrency?.conversionRate} ${defaultCurrency?.code??\"\"})` : ''}\n
\n\n \n
\n )}\n\n {customization.showSalesman && (\n {customization.bankNotesTitle ?? \"Bank Detail\"}
\n\n\n Account Title:\n {\" \" + (dummy ? `${process.env.REACT_APP_NAME}` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].banckAccountTitle :\"\") : bank?.banckAccountTitle ?? \"\"))}\n
\n\n \n A/c No:\n {\" \" + (dummy ? `1234 5678 9012 1234` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankAccountNo :\"\") : (bank?.bankAccountNo ?? \"\")))}\n
\n\n \n IBAN:\n {\" \" + (dummy ? `AM 01 BG 1234 5678 9012 1234` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankIBAN :\"\") : bank?.bankIBAN ?? \"\"))}\n
\n\n \n Bank:\n {\" \" + (dummy ? `ABC` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankName :\"\") : (bank?.bankName ?? \"\" + \" \")))}\n
\n\n \n Swift Code:\n {\" \" + (dummy ? `X-1234` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankSwiftCode :\"\") : bank?.bankSwiftCode ?? \"\"))}\n
\n\n \n Branch:\n {\" \" + (dummy ? `XYZ` : (advanceStore.data.allowBankSave ? (invoiceDetail.length > 0 ? invoiceDetail[0].bankBranchName :\"\") : bank?.bankBranchName ?? \"\"))}\n
\n \n {customization?.salesmanTitle ?? \"بائع\"}: 0 ? customization.salesmanFontSize : 6}pt`,\n fontWeight: \"normal\",\n color: `${customization.salesmanFontColor ?? \"#000000\"}`\n }}>\n {invoiceDetail.length > 0 ? invoiceDetail[0].SalesMan_Name : \"\"}\n \n
\n )}\n\n {customization.showNotes && (\n <>\n\n {\"ملحوظة:\"}\n
\n\n\n
0 ? state.notes : customization.notes).replace(/(?:\\r\\n|\\r|\\n)/g, \"
\") }} />\n \n \n )}\n\n {customization.showTerms && (\n <>\n
\n\n \n \") }} />\n \n \n )}\n\n {customization.showTerms && (\n <>\n
\n {customization.termsTitle ?? \"الشروط والأحكام\"}\n
\n\n\n
0 ? state.terms : customization.termsAndConditions).replace(/(?:\\r\\n|\\r|\\n)/g, \"
\") }} />\n \n \n )}\n\n {(customization.showSignature || customization.showStamp) && (\n <>\n\n {\n customization.showSignature &&\n \n\n {customization.showStamp && (\n
\n \") }} />\n \n \n )}\n\n {(customization.showSignature || customization.showStamp) && (\n <>\n
{customization.signatureTitle ?? \"Signature\"}
\n }\n {\n customization.showSignature &&\n\n \n\n
\n }\n {customization.signatureImage && }
\n \n
\n )}\n \n )}\n\n {customization.showFooterBackground && customization.footerBackgroundImage && (\n {customization.stampImage && }\n
\n \n \n
\n )}\n\n {formatDate(data.tDate)}
\n \n ) : colum === \"description\" ? (\n <>\n{data.invoiceType}
\n {formatCurrency(data.transactionInvAmount, transactionCurrency, true, -1)}\n ) : colum === \"open_balance\" ? (\n{formatCurrency(data.transactionInvOutstanding, transactionCurrency, true, -1)}
\n ) : colum === \"payment\" ? (\n\n e.target?.blur()}\n disabled={preview} className='form-control'\n style={{width: '100%', maxWidht: '100%', textAlign: 'right'}}\n type={\"number\"} value={data.transactionamount !== 0 ? data.transactionamount : \"\"}\n onChange={async (e) => {\n if (e.target.value) {\n if (e.target.value > data.transactionInvOutstanding) {\n await handleVoucherDet({error: true}, srNo)\n return\n }\n const amount = e.target.value === \"\" ? \"\" : +e.target.value\n await handleVoucherDet({\n error: false,\n transactionamount: parseFloat((amount ?? 0).toFixed(roundingDigit))\n }, srNo)\n // await handleInvoiceDetailInBulk({}, false);\n } else{\n await handleVoucherDet({\n error: false,\n transactionamount: 0\n }, srNo)\n // await handleInvoiceDetailInBulk({}, false);\n }\n }} placeholder='0.00'/>\n\n {data.error &&\n
\n ) : (\n <>\n )\n}\n\nexport default memo(ColumnCell)","import ColumnCell from \"./ColumnCell\";\n\n// ** Table columns\nexport const columns = (ability, symbol, transactionCurrency, transactionCurrencyRate, detailsLength, roundingDigit, preview, selectedLine, onBlurAmount, details) => {\n\n return [\n {\n name: '',\n width: '50px',\n cell: (data) => (\n Invalid amount
}\n\n ele.lineno === data.lineno)}\n allowEdit={data.lineno === selectedLine}\n transactionCurrency={transactionCurrency}\n transactionCurrencyRate={transactionCurrencyRate}\n onBlurAmount={onBlurAmount}/>\n
\n )\n },\n {\n name: 'Description',\n minWidth: '150px',\n cell: (data) => (\n \n ele.lineno === data.lineno)}\n allowEdit={data.lineno === selectedLine}\n transactionCurrency={transactionCurrency}\n transactionCurrencyRate={transactionCurrencyRate}\n onBlurAmount={onBlurAmount}/>\n
\n )\n },\n {\n name: 'Date',\n cell: (data) => (\n \n ele.lineno === data.lineno)}\n allowEdit={data.lineno === selectedLine}\n transactionCurrency={transactionCurrency}\n transactionCurrencyRate={transactionCurrencyRate}\n onBlurAmount={onBlurAmount}/>\n
\n )\n },\n {\n name: 'Amount',\n minWidth: '50px',\n cell: (data) => (\n \n ele.lineno === data.lineno)}\n allowEdit={data.lineno === selectedLine}\n transactionCurrency={transactionCurrency}\n transactionCurrencyRate={transactionCurrencyRate}\n onBlurAmount={onBlurAmount}/>\n
\n )\n },\n {\n name: 'Open Balance',\n minWidth: '50px',\n cell: (data) => (\n \n ele.lineno === data.lineno)}\n allowEdit={data.lineno === selectedLine}\n transactionCurrency={transactionCurrency}\n transactionCurrencyRate={transactionCurrencyRate}\n onBlurAmount={onBlurAmount}/>\n
\n )\n },\n {\n name: 'Payment',\n minWidth: '130px',\n right: true,\n cell: (data) => (\n \n ele.lineno === data.lineno)}\n allowEdit={data.lineno === selectedLine}\n transactionCurrency={transactionCurrency}\n transactionCurrencyRate={transactionCurrencyRate}\n onBlurAmount={onBlurAmount}/>\n
\n )\n }\n ]\n}\n","import '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useState, useEffect, memo} from 'react'\nimport {useTranslation} from \"react-i18next\"\nimport {useCashVoucher} from \"../../../../../../utility/hooks/useCashVoucher\";\nimport {Checkbox} from \"@mui/material\";\nimport * as React from \"react\";\nimport {formatCurrency, formatDate} from \"../../../../../../utility/Utils\";\nimport {Link} from \"react-router-dom\";\n\n\nconst AdjustmentColumnCell = (props) => {\n const {t} = useTranslation()\n\n const {\n colum,\n srNo,\n data,\n roundingDigit,\n preview,\n transactionCurrencyRate,\n transactionCurrency,\n allowEdit,\n onBlurAmount\n } = props\n\n const {\n handleInvoiceDetailInBulk,\n handleVoucherAdj\n } = useCashVoucher()\n\n return colum === \"check\" ? (\n {formatDate(data.mainInvoiceDate)}
\n \n ) : colum === \"description\" ? (<>\n{data.invoiceType}
\n {data.mainCode && #{data.mainCode}}\n \n ) : colum === \"amount\" ? (\n{formatCurrency(data.transactionTotalAmount, transactionCurrency, true, -1)}
\n ) : colum === \"open_balance\" ? (\n{formatCurrency(data.transactionAdjustableAmount, transactionCurrency, true, -1)}
\n ) : colum === \"payment\" ? (\n\n e.target?.blur()}\n disabled={preview} className='form-control'\n style={{width: '100%', maxWidht: '100%'}}\n type={\"number\"} value={data.transactionAdjustedAmount !== 0 ? data.transactionAdjustedAmount : \"\"}\n onChange={(e) => {\n if (e.target.value) {\n if (e.target.value > data.transactionAdjustableAmount) {\n handleVoucherAdj({error: true}, srNo)\n // setToast('Invalid Amount', 'Payment Amount should me equal or less than Due Amount', 'warning')\n return\n }\n const amount = e.target.value === \"\" ? \"\" : +e.target.value\n handleVoucherAdj({\n error: false,\n transactionAdjustedAmount: parseFloat((amount ?? 0))\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n } else{\n handleVoucherAdj({\n error: false,\n transactionAdjustedAmount: 0\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n }\n }} placeholder='0.00'/>\n\n {data.error &&\n
\n ) : (\n <>\n )\n}\n\nexport default memo(AdjustmentColumnCell)","import AdjustmentColumnCell from \"./AdjustmentColumnCell\";\n\n// ** Table columns\nexport const adjColumns = (ability, symbol, transactionCurrency, transactionCurrencyRate, detailsLength, roundingDigit, preview, selectedLine, onBlurAmount) => {\n\n return [\n {\n name: '',\n width: '50px',\n cell: (data, index) => (\n Invalid amount
}\n\n \n
\n )\n },\n {\n name: 'Description',\n minWidth: '150px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: 'date',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: 'Amount',\n minWidth: '50px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: 'Open Balance',\n minWidth: '50px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: 'Payment',\n minWidth: '150px',\n cell: (data, index) => (\n \n \n
\n )\n }\n ]\n}\n","import Avatar from '@components/avatar'\nimport {useCan} from '@hooks/useCan'\nimport {useCashVoucher} from '@hooks/useCashVoucher'\nimport {useSkin} from '@hooks/useSkin'\nimport CurrencySelector from '@src/components/CurrencyConvertor'\nimport AccountDetailSelector_v2 from '@src/components/AccountDetailSelector_v2'\n\nimport {fireMessage} from '@src/components/MessageModel'\nimport '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {Fragment, useEffect, useRef, useState} from 'react'\nimport {\n Edit3,\n Save,\n X,\n CheckSquare,\n AlertTriangle,\n CheckCircle,\n ChevronDown\n} from 'react-feather'\nimport DatePickr from \"@src/components/DatePickr\";\nimport {useTranslation} from 'react-i18next'\nimport * as service from '@api/api.service'\n\n// ** Styles\nimport 'react-slidedown/lib/slidedown.css'\nimport {Slide, toast} from 'react-toastify'\nimport {\n Button,\n Card,\n CardBody, Col,\n Input, InputGroup,\n InputGroupText,\n Label,\n Popover,\n PopoverBody,\n Row, Tooltip\n} from 'reactstrap'\nimport BlockingUI from '@src/components/BlockingUI'\nimport Attachments from '@src/components/Attachments'\nimport CashBankSelector_v2 from '../../../../../../components/CashBankSelector_v2'\nimport SimpleCustomerSelector_v2 from '../../../../../../components/SimpleCustomerSelector_v2'\nimport { Stack} from \"@mui/material\";\nimport { useHistory} from \"react-router-dom\";\nimport * as React from \"react\";\nimport {formatCurrency} from \"@src/utility/Utils\";\nimport ExceedDialog from \"../../customer-advance/ExceedDialog\";\nimport DataTable from \"react-data-table-component\";\nimport {columns} from \"./columns\";\nimport {adjColumns} from \"./adjustmentColumns\";\nimport SavingExitDialog from \"@src/components/SavingExitDialog\";\nimport {getData as getInvoiceData} from \"../../../../sales/customer-invoice/store\";\nimport {useDispatch, useSelector} from \"react-redux\";\nimport {useMapAccounts} from \"@hooks/useMapAccounts\";\nimport {tablesDateFormat} from \"../../../../../../utility/Utils\";\nimport WithHeldTaxSelector_v2 from \"../../../../../../components/WithHeldTaxSelector_v2\";\n\nconst ToastContent = ({title}) => (\n \n
\n \n }/>\n
\n {title}
\n\n {title} saved successfully!\n
\n \n {/* Header */}\n \n \n \n
\n }\n \n
\n\n {\n full_screen && {t(title || 'New Payment')}
\n\n \n setShowAlertAmount(!showAlertAmount)}\n >\n \n \n \n \n \n \n \n
\n\n \n \n {transactionCurrency.code} \n 0 ? voucher.transactionCurrencyBankVal : \"\"}\n onWheel={(e) => e.target?.blur()}\n invalid={voucher.transactionCurrencyBankValInvalid}\n onChange={e => {\n if(parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleVoucher({ transactionCurrencyBankValInvalid: true })\n return;\n }\n\n setDoCompareModel(true);\n handleAmount(e.target.value)\n }}\n style={{fontSize: '1rem'}} disabled={preview || !voucher?.customer || unCategories}\n onBlur={() => setIsAmountFocused(false)}\n onFocus={() => setIsAmountFocused(true)}/>\n\n\n \n {t(\"This value is not in range.\")}\n \n\n \n
\n\n Do you want this amount\n distribute to pending invoices?
\n\n \n {voucher.details.length !== 0 && (<>\n \n {\n setOpenPending(!openPending)\n }}>\n \n \n )}\n {\n voucher.details.length !== 0 &&
\n\n Outstanding Transactions ({voucher.details?.length??0})
\n\n index}\n onRowClicked={(row, event) => setSelectedLine(row.lineno)}\n columns={columns(ability, defaultCurrency.symbol,\n transactionCurrency,\n transactionCurrencyRate,\n voucher.details.length,\n userData.roundingDigit,\n preview,\n selectedLine, (e) => {\n setSelectedLine(selectedLine+1)\n },\n voucher.details??[])\n }\n pagination\n responsive={true}\n data={voucher.details}\n sortIcon={
\n }\n Adjustments ({(voucher.advanceInvoiceDetails??[]).length})
\n\n index}\n onRowClicked={(row, event) => setSelectedLine(row.lineno)}\n columns={adjColumns(ability, defaultCurrency.symbol,\n transactionCurrency,\n transactionCurrencyRate,\n voucher.advanceInvoiceDetails.length,\n userData.roundingDigit,\n preview,\n selectedLine, (e) => {\n setSelectedLine(selectedLine+1)\n })\n }\n responsive={true}\n data={voucher.advanceInvoiceDetails}\n sortIcon={
\n }\n \n\n \n
\n \n \n \n\n {/* Invoice Note */}\n\n \n
\n\n {\n (voucher.transactionCurrencyGstWithHeldVal > 0) &&\n \n {t(\"Received Amount\")} ({transactionCurrency.code})\n
\n\n\n {formatCurrency(voucher.transactionCurrencyBankVal, transactionCurrency, false)}\n
\n\n
\n }\n\n {\n (voucher.transactionCurrencyWriteOffVal > 0) &&\n \n {t(\"WHT Amount\")} ({transactionCurrency.code})\n
\n\n\n {formatCurrency((voucher.transactionCurrencyGstWithHeldVal??0), transactionCurrency, false)}\n
\n\n
\n }\n {\n voucher.transactionCurrencyAdjustAmount !== 0 &&\n \n {t(\"Write Off Amount\")} ({transactionCurrency.code})\n
\n\n\n {formatCurrency((voucher.transactionCurrencyWriteOffVal??0), transactionCurrency, false)}\n
\n\n
\n }\n\n {\n \n {t(\"Adjustment Amount\")}\n
\n\n {formatCurrency(voucher.transactionCurrencyAdjustAmount, transactionCurrency, false)}\n
\n\n
\n }\n\n {\n \n {t(\"Invoices Amount\")}\n
\n\n {formatCurrency(voucher.transactionCurrencyVAmount, transactionCurrency, false)}\n
\n\n {\n if(parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleVoucher({ transactionCurrencyBankChargesInvalid: true })\n return;\n }\n\n handleVoucher({\n transactionCurrencyBankCharges: isNaN(parseFloat(e.target.value)) ? 0 : parseFloat(e.target.value),\n transactionCurrencyBankChargesInvalid: false\n })\n }}\n /> :\n
\n }\n\n \n {\" \"}\n {t(\"Bank Charges\")}\n
\n {\n openBankCharges ?\n\n {formatCurrency(voucher.transactionCurrencyBankCharges, transactionCurrency, false)}\n
\n }\n\n \n \n
\n handleExceedAccount(record)}\n isDisabled={preview || !voucher.customer}\n />\n \n \n \n \n \n
\n \n {t(\"Excess Amount\")} ({transactionCurrency.code}) openExceedPopOver()}> {voucher.exceedCoa ?\n
\n {formatCurrency(voucher.transactionCurrencyBankVal + (voucher.transactionCurrencyAdjustAmount??0) - (voucher.transactionCurrencyVAmount - (voucher.transactionCurrencyWriteOffVal??0)), transactionCurrency, false)}\n
\n{t(\"Exceed amounts will go in\")}:
\n\n
\n \n \n \n \n \n {!preview && ((!voucher.recno && ability.can('new', 'Recoveries')) || (!!voucher.recno && ability.can('edit', 'Recoveries'))) &&\n doSubmit(false)}>\n {t('Save')}\n \n }\n\n {\n unblock?.current();\n onCancel();\n }}>\n {t(preview ? 'Back' : 'Cancel')}\n \n\n \n \n
\n
\n\n\n {formatDate(data.tDate)}
\n \n ) : colum === \"description\" ? (\n <>\n{data.invoiceType}
\n {formatCurrency(data.transactionInvAmount, transactionCurrency, true, -1)}\n ) : colum === \"open_balance\" ? (\n{formatCurrency(data.transactionInvOutstanding, transactionCurrency, true, -1)}
\n ) : colum === \"payment\" ? (\n\n e.target?.blur()}\n disabled={preview} className='form-control'\n style={{width: '100%', maxWidht: '100%'}}\n type={\"number\"} value={data.transactionamount !== 0 ? data.transactionamount : \"\"}\n onChange={async (e) => {\n if (e.target.value) {\n if (e.target.value > data.transactionInvOutstanding) {\n await handleVoucherDet({error: true}, srNo)\n // setToast('Invalid Amount', 'Payment Amount should me equal or less than Due Amount', 'warning')\n return\n }\n const amount = e.target.value === \"\" ? 0 : +e.target.value\n await handleVoucherDet({\n error: false,\n transactionamount: parseFloat((amount ?? 0).toFixed(roundingDigit))\n }, srNo)\n // await handleInvoiceDetailInBulk({}, false);\n } else{\n await handleVoucherDet({\n error: false,\n transactionamount: 0\n }, srNo)\n // await handleInvoiceDetailInBulk({}, false);\n }\n }} placeholder='0.00'/>\n\n {data.error &&\n
\n ) : (\n <>\n )\n}\n\nexport default memo(ColumnCell)","import ColumnCell from \"./ColumnCell\";\n\n// ** Table columns\nexport const columns = (ability, symbol, transactionCurrency, transactionCurrencyRate, detailsLength, roundingDigit, preview, selectedLine, onBlurAmount, t) => {\n\n return [\n {\n name: '',\n width: '50px',\n cell: (data, index) => (\n Invalid amount
}\n\n \n
\n )\n },\n {\n name: t('Description'),\n minWidth: '150px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Date'),\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Amount'),\n minWidth: '50px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Open Balance'),\n minWidth: '50px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Payment'),\n minWidth: '150px',\n cell: (data, index) => (\n \n \n
\n )\n }\n ]\n}\n","import '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport {useState, useEffect, memo} from 'react'\nimport {useTranslation} from \"react-i18next\"\nimport {useCashVoucher} from \"../../../../../../utility/hooks/useCashVoucher\";\nimport {Checkbox} from \"@mui/material\";\nimport * as React from \"react\";\nimport {formatCurrency, formatDate} from \"../../../../../../utility/Utils\";\nimport {Link} from \"react-router-dom\";\n\n\nconst AdjustmentColumnCell = (props) => {\n const {t} = useTranslation()\n\n const {\n colum,\n srNo,\n data,\n roundingDigit,\n preview,\n transactionCurrencyRate,\n transactionCurrency,\n allowEdit,\n onBlurAmount\n } = props\n\n const {\n handleInvoiceDetailInBulk,\n handleVoucherAdj\n } = useCashVoucher()\n\n return colum === \"check\" ? (\n {formatDate(data.mainInvoiceDate)}
\n \n ) : colum === \"description\" ? (<>\n{data.invoiceType}
\n {data.mainCode && #{data.mainCode}}\n \n ) : colum === \"amount\" ? (\n{formatCurrency(data.transactionTotalAmount, transactionCurrency, true, -1)}
\n ) : colum === \"open_balance\" ? (\n{formatCurrency(data.transactionAdjustableAmount, transactionCurrency, true, -1)}
\n ) : colum === \"payment\" ? (\n\n e.target?.blur()}\n disabled={preview} className='form-control'\n style={{width: '100%', maxWidth: '100%'}}\n type={\"number\"} defaultValue={data.transactionAdjustedAmount !== 0 ? data.transactionAdjustedAmount : \"\"}\n onChange={(e) => {\n if (e.target.value) {\n if (e.target.value > data.transactionAdjustableAmount) {\n handleVoucherAdj({error: true}, srNo)\n // setToast('Invalid Amount', 'Payment Amount should me equal or less than Due Amount', 'warning')\n return\n }\n const amount = e.target.value === \"\" ? 0 : +e.target.value\n handleVoucherAdj({\n error: false,\n transactionAdjustedAmount: parseFloat((amount ?? 0))\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n } else{\n handleVoucherAdj({\n error: false,\n transactionAdjustedAmount: 0\n }, srNo)\n // handleInvoiceDetailInBulk({}, false);\n }\n }} placeholder='0.00'/>\n\n {data.error &&\n
\n ) : (\n <>\n )\n}\n\nexport default memo(AdjustmentColumnCell)","import AdjustmentColumnCell from \"./AdjustmentColumnCell\";\n\n// ** Table columns\nexport const adjColumns = (ability, symbol, transactionCurrency, transactionCurrencyRate, detailsLength, roundingDigit, preview, selectedLine, onBlurAmount, t) => {\n\n return [\n {\n name: '',\n width: '50px',\n cell: (data, index) => (\n Invalid amount
}\n\n \n
\n )\n },\n {\n name: t('Description'),\n minWidth: '150px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Date'),\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Amount'),\n minWidth: '50px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Open Balance'),\n minWidth: '50px',\n cell: (data, index) => (\n \n \n
\n )\n },\n {\n name: t('Payment'),\n minWidth: '150px',\n cell: (data, index) => (\n \n \n
\n )\n }\n ]\n}\n","import Avatar from '@components/avatar'\nimport {useCan} from '@hooks/useCan'\nimport {useCashVoucher} from '@hooks/useCashVoucher'\nimport {useSkin} from '@hooks/useSkin'\nimport CurrencySelector from '@src/components/CurrencyConvertor'\nimport {fireMessage} from '@src/components/MessageModel'\n\n//** Styles\nimport '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport 'react-slidedown/lib/slidedown.css'\n\n//** React imports\nimport {Fragment, useEffect, useRef, useState} from 'react'\n\n\nimport {\n Save,\n X,\n CheckSquare,\n CheckCircle,\n AlertTriangle,\n ChevronDown,\n} from 'react-feather'\nimport DatePickr from \"@src/components/DatePickr\";\nimport {useTranslation} from 'react-i18next'\nimport * as service from '@api/api.service'\n\n// ** Reactstrap imports\nimport {Slide, toast} from 'react-toastify'\nimport {\n Button,\n Card,\n CardBody,\n Col,\n Input, InputGroup, InputGroupText,\n Label,\n Popover,\n PopoverBody,\n Row, Tooltip,\n} from 'reactstrap'\nimport BlockingUI from '@src/components/BlockingUI'\nimport Attachments from '@src/components/Attachments'\nimport CashBankSelector_v2 from '@src/components/CashBankSelector_v2'\nimport SimpleVendorSelector_v2 from '@src/components/SimpleVendorSelector_v2'\nimport {Stack} from \"@mui/material\";\nimport {Redirect, useHistory} from \"react-router-dom\";\nimport * as React from \"react\";\nimport {formatCurrency} from \"@src/utility/Utils\";\n\nimport AccountDetailSelector_v2 from '@src/components/AccountDetailSelector_v2'\nimport DataTable from \"react-data-table-component\";\nimport {columns} from \"./columns\";\nimport {adjColumns} from \"./adjustmentColumns\";\nimport {useSelector} from \"react-redux\";\nimport {tablesDateFormat} from \"../../../../../../utility/Utils\";\nimport WithHeldTaxSelector_v2 from \"../../../../../../components/WithHeldTaxSelector_v2\";\n\nconst ToastContent = ({title, t}) => (\n \n
\n \n }/>\n
\n {t(title)}
\n\n {t(title)} {t(\"saved successfully!\")}\n
\n \n {/* Header */}\n \n \n \n \n
\n
\n\n \n
\n\n {\n full_screen && {t(title || 'New Payment')}
\n\n\n
\n }\n\n \n \n handleVoucher({codeId: e.target.value})}\n className=\"s-input form-control\"\n />\n
\n \n \n \n
\n\n \n \n
\n\n \n\n \n \n \n
\n\n \n \n {\n handleVoucher({chqNo: e.target.value})\n SetSelectedChequeNo(e.target.value)\n }}\n disabled={preview || !voucher?.vendor}\n />\n
\n \n \n
\n \n \n \n
\n \n\n
\n\n {t(\"Do you want this amount distribute to pending invoices?\")}
\n\n\n \n {voucher.details.length !== 0 && (<>\n \n \n )}\n {\n voucher.details.length !== 0 &&
\n\n {t(\"Outstanding Transactions\")} ({voucher.details?.length??0})
\n\n index}\n onRowClicked={(row, event) => setSelectedLine(row.lineno)}\n columns={columns(ability, defaultCurrency.symbol,\n transactionCurrency,\n transactionCurrencyRate,\n voucher.details.length,\n userData.roundingDigit,\n preview,\n selectedLine, (e) => {\n setSelectedLine(selectedLine+1)\n }, t)\n }\n responsive={true}\n data={voucher.details}\n sortIcon={
\n }\n {t(\"Adjustments\")} ({(voucher.advanceInvoiceDetails??[]).length})
\n\n index}\n onRowClicked={(row, event) => setSelectedLine(row.lineno)}\n columns={adjColumns(ability, defaultCurrency.symbol,\n transactionCurrency,\n transactionCurrencyRate,\n voucher.advanceInvoiceDetails.length,\n userData.roundingDigit,\n preview,\n selectedLine, (e) => {\n setSelectedLine(selectedLine+1)\n }, t)\n }\n responsive={true}\n data={voucher.advanceInvoiceDetails}\n sortIcon={
\n }\n \n\n \n \n handleDescription(e.target.value)}\n style={{fontSize: 12}} disabled={preview || !voucher?.vendor}/>\n
\n\n \n
\n \n \n \n
\n\n {\n (voucher.transactionCurrencyGstWithHeldVal > 0 || voucher.transactionCurrencyWriteOffVal > 0) &&\n \n {t(\"Received Amount\")} ({transactionCurrency.code})\n
\n\n\n {formatCurrency(voucher.transactionCurrencyBankVal, transactionCurrency, false)}\n
\n\n
\n }\n\n {\n voucher.transactionCurrencyAdjustAmount !== 0 &&\n \n {t(\"WHT Amount\")} ({transactionCurrency.code})\n
\n\n\n {formatCurrency((voucher.transactionCurrencyGstWithHeldVal??0) + (voucher.transactionCurrencyWriteOffVal??0), transactionCurrency, false)}\n
\n\n
\n }\n\n {\n \n {t(\"Adjustment Amount\")}\n
\n\n {formatCurrency(voucher.transactionCurrencyAdjustAmount, transactionCurrency, false)}\n
\n\n
\n }\n\n \n {t(\"Invoices Amount\")}\n
\n\n {formatCurrency(voucher.transactionCurrencyVAmount, transactionCurrency, false)}\n
\n\n \n \n
\n handleExceedAccount(record)}\n isDisabled={preview || !voucher.vendor}\n />\n \n \n \n \n \n
\n \n {t(\"Excess Amount\")} ({transactionCurrency.code}) openExceedPopOver()}> {voucher.exceedCoa ?\n
\n {formatCurrency(voucher.transactionCurrencyBankVal + (voucher.transactionCurrencyAdjustAmount??0) - (voucher.transactionCurrencyVAmount - (voucher.transactionCurrencyWriteOffVal??0)), transactionCurrency, false)}\n
\n{t(\"Exceed amounts will go in:\")}
\n\n
\n \n\n {/* Invoice Note */}\n\n
\n \n \n \n\n \n\n \n {!preview && ((!voucher.recno && ability.can('new', 'Payments')) || (!!voucher.recno && ability.can('edit', 'Payments'))) &&\n \n \n {t('Save')}\n \n }\n \n \n {t(preview ? 'Back' : 'Cancel')}\n \n \n \n
\n
\n \n {/* /Invoice Actions */}\n \n
\n \n }/>\n
\n {t(\"a second ago\")}\n {t(\"Error!\")}
\n\n \n {t(message)}\n \n
\n \n ![{tempFiles.length]()
0 ? tempFiles[0].name : \"Default Avatar\"} src={tempFiles.length > 0 ? URL.createObjectURL(tempFiles[0]) : defaultImage} style={{borderRadius: '10px', maxWidth: '180px', maxHeight: '180px'}} />\n
\n }\n \n\n {\n cropper === null &&\n
\n\n \n \n \n
\n }\n\n\n {\n cropper !== null && type !== 0 &&\n \n \n \n\n \n\n \n\n \n\n \n \n
\n }\n\n {\n cropper !== null &&\n \n \n \n\n \n\n \n \n
\n }\n\n {\n error.show && error.message && \n *{error.message}\n
\n }\n \n \n
\n\n \n
\n {new Date(item.transactionTime).toDateString()}\n {item.transactionByName}
\n\n message: {` ${item.message}`}\n
\n\n \n \n )\n })}\n \n )\n}\n\nexport default InvoiceActivityLogs\n\n// ** PropTypes\nInvoiceActivityLogs.propTypes = {\n tag: Proptypes.string,\n className: Proptypes.string,\n data: Proptypes.array.isRequired\n}\n","// ** React Imports\nimport {useEffect, useState} from 'react'\n\n// ** Reactstrap Imports\nimport {\n Button,\n Modal,\n ModalHeader,\n ModalBody,\n Label,\n Col,\n Input, Row, ListGroupItem\n} from 'reactstrap';\n\nimport {Settings} from \"react-feather\";\nimport * as React from \"react\";\nimport {useTranslation} from \"react-i18next\";\nimport {ReactSortable} from \"react-sortablejs\";\nimport axios from \"axios\";\nimport {fireMessage} from \"./MessageModel\";\n\nconst ListColumnCustomizer = ({open, setOpen, store, apiUrl, category = false, onSuccess}) => {\n const [columns, setColumns] = useState([]);\n const [loadingColumns, setLoadingColumns] = useState(false);\n\n const { t } = useTranslation();\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive) {\n setColumns([...(store.columns)])\n }\n\n return () => {\n isActive = false;\n }\n }, [store.columns])\n\n\n const onReset = () => {\n setOpen(false)\n }\n\n const onSubmit = async (e) => {\n e.preventDefault();\n setLoadingColumns(true);\n try{\n let res = await axios.put(apiUrl??'/Prefrences/UpdateSalesFormColumns', columns)\n fireMessage(\"Setting changed successfully\", \"Successful\", 'success');\n setOpen(false)\n if(onSuccess) {\n onSuccess();\n }\n }catch (e){\n fireMessage(e, \"Error\", 'error');\n }finally {\n setLoadingColumns(false);\n }\n }\n\n const handleChangeColumns = (index, updated) => {\n if(columns){\n let updatedColumn = {...columns[index], ...updated};\n columns.splice(index, 1);\n columns.splice(index, 0, updatedColumn);\n setColumns([...columns]);\n }\n }\n\n return (\n\n
\n )\n}\nexport default ListColumnCustomizer","//** react imports\nimport {useState, useEffect, memo} from 'react'\n\n//** tranlation imports\nimport {useTranslation} from \"react-i18next\"\n// ** Styles\nimport '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\nimport 'react-slidedown/lib/slidedown.css'\n\n//** Reactstrap imports\nimport {\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n Input,\n InputGroup,\n UncontrolledDropdown,\n UncontrolledTooltip\n} from 'reactstrap'\n\n\n//** Custom imports\nimport {useVendorInvoice} from '../context/useVendorInvoice'\nimport {fireMessage} from \"@src/components/MessageModel\"\nimport TaxTypeSelector_v2 from \"@src/components/TaxTypeSelector_v2\";\nimport CostCenterSelector_v2 from '@src/components/CostCenterSelector_v2'\nimport InventoryItemSelector_v2 from '@src/components/InventoryItemSelector_v2'\nimport {checkAndSetNumVal} from '@src/utility/Utils'\nimport CostLocationSelector_v2 from '@src/components/CostLocationSelector_v2'\nimport ConfirmModal from \"@src/components/ConfirmModal\";\nimport SimpleCustomerSelector_v2 from \"@src/components/SimpleCustomerSelector_v2\";\n\n//** Icons\nimport {X} from \"react-feather\";\nimport {getTransactionalRate} from \"../../../../../utility/Utils\";\nimport ProjectACustomerSelector_v2 from \"../../../../../components/ProjectACustomerSelector_v2\";\nimport * as React from \"react\";\nimport UOMSelector_v2 from \"../../../../../components/UOMSelector_v2\";\n\nconst ColumnCell = (props) => {\n const {t} = useTranslation()\n\n const {\n colum,\n srNo,\n data,\n accounts,\n toggleQuickAddBar,\n roundingDigit,\n preview,\n inventoryItems,\n costLocations,\n workorders = [],\n costCenterList,\n transactionCurrencyRate,\n taxTypeList,\n removeDetail,\n customerList,\n onClickRow\n } = props\n const {\n handleInvoiceDetail,\n vendorInvoice\n } = useVendorInvoice()\n\n const [isOpenModal, setIsOpenModal] = useState(false)\n\n const deleteForm = () => {\n removeDetail(srNo)\n }\n\n const [item, setItem] = useState()\n const [customer, setCustomer] = useState()\n const [costLocation, setCostLocation] = useState()\n const [costCenter, setCostCenter] = useState()\n const [uom, setUom] = useState()\n const [taxType, setTaxType] = useState()\n\n\n const handleItem = (record) => {\n if (record?.recno === -1) {\n toggleQuickAddBar('inventory_add')\n } else {\n if (!record.purchaseAccount) {\n setTimeout(() => {\n fireMessage(\n \n setOpen(!open)} className='modal-dialog-centered'>\n setOpen(!open)}> \n \n \n {\n let updatedCols = [];\n for (let a = 0; a < columns.length; a++) {\n let tempCol = {...columns[a], sortNo: a}\n updatedCols.push(tempCol);\n }\n\n setColumns([...updatedCols]);\n }}>\n {\n (columns || []).map((e, index) => {\n return (\n \n \n handleChangeColumns(index, {minWidth: parseInt(event.target.value)})}\n />\n \n handleChangeColumns(index, {columnDescription: event.target.value})}\n />\n \n
\n \n )\n })\n }\n \n \n
\n \n \n
\n \n
\n {t(\"Column Customization\")}
\n{t(\"Set columns visibility in line items\")}
\n\n handleChangeColumns(index, {isShow: event.target.checked})}/>\n \n
\n \n {t(`Please add Purchase Account to ${record.name}`)}
,\n \"\",\n \"warning\",\n {\n showCloseButton: true,\n showCancelButton: true,\n focusConfirm: true,\n confirmButtonText: 'Quick Add',\n cancelButtonText: 'Close'\n }\n ).then(results => {\n\n if (results.isConfirmed) {\n toggleQuickAddBar('inventory_add', record.recno)\n }\n\n })\n }, [100])\n return\n }\n setItem(record)\n let saving_data = {};\n if ((record.taxType && record.taxType !== 0) || (vendorInvoice.taxType && vendorInvoice.taxType !== 0) ) {\n let taxObj = (record.taxType && record.taxType !== 0) ? record : vendorInvoice;\n taxTypeList.map((savedTax) => {\n if (savedTax.value === taxObj.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n }\n })\n }\n\n let subUnitIndex = (record?.subUnits??[]).findIndex((ele) => !ele.isDefault);\n let subUnit = null;\n if(subUnitIndex > -1) {\n subUnit = record?.subUnits[subUnitIndex]\n }\n\n let defaultSubUnitIndex = (record?.subUnits??[]).findIndex((ele) => ele.isDefault);\n let defaultSubUnit = null;\n if(subUnitIndex > -1) {\n defaultSubUnit = record?.subUnits[defaultSubUnitIndex]\n }\n\n handleInvoiceDetail({\n itemId: record?.recno,\n qty: 1,\n itemName: record?.name,\n uomList: (record?.subUnits??[]),\n unitId: record?.unit,\n subUnitId: subUnit?.recno??null,\n subUnitName: subUnit?.description??null,\n unitFraction: subUnit?.ratio??1,\n subUnitQty: subUnit?.ratio??1,\n subUnitDefaultId: defaultSubUnit?.recno??null,\n subUnitTransactionRate: getTransactionalRate(record.purchaseRate, transactionCurrencyRate, roundingDigit)/(subUnit?.ratio??1),\n code: record.code,\n sRemarks: record?.description,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: getTransactionalRate(record.purchaseRate, transactionCurrencyRate, roundingDigit),\n ...saving_data,\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n }\n }\n\n const handleTaxType = (record) => {\n setTaxType(record)\n handleInvoiceDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }\n\n\n const handleCustomer = (record) => {\n setCustomer(record)\n handleInvoiceDetail({customerId: record?.customerId, workOrderId: record?.projectId}, srNo)\n }\n\n const handleCostLocation = (record) => {\n setCostLocation(record)\n handleInvoiceDetail({cLocation: record?.recno}, srNo)\n }\n\n const handleCostCenter = (record) => {\n setCostCenter(record)\n handleInvoiceDetail({costCenter: record?.recno}, srNo)\n }\n\n const handleOnChange = (e) => {\n const {name, value} = e.target\n handleInvoiceDetail({[name]: value}, srNo)\n }\n\n const handleChangeUOM = (record) => {\n setUom(record);\n handleInvoiceDetail({subUnitId: record?.recno, subUnitName: record?.description, unitFraction: record?.ratio??1, subUnitQty: (record?.ratio??1) * (data.qty??1), subUnitTransactionRate: (data.transactionCurrencyRate??0) > 0 ? ((data.transactionCurrencyRate??0)/(record?.ratio??1)) : 0 }, srNo)\n }\n\n useEffect(() => {\n const error = ((data.discountVal > 100 && data.discountType === \"%\") || ((data.discountVal > (data.qty * data.transactionCurrencyRate)) && data.discountType === \"@\"))\n handleInvoiceDetail({invalidDiscount: error}, srNo)\n }, [data.transactionCurrencyRate, data.qty, data.discountVal, data.discountType])\n\n useEffect(() => {\n if (data.balanceQty) {\n const error = (data.qty ?? 0) > data.balanceQty\n handleInvoiceDetail({invalidQty: error}, srNo)\n }\n\n }, [data.qty])\n\n\n useEffect(() => {\n setItem(inventoryItems.find(v => v.recno === data.itemId) ?? null)\n setCostCenter(costCenterList.find(v => v.recno === data.costCenter ?? null))\n setCustomer(customerList?.find((v) => (v.customerId === data.customerId && v.projectId === data.workOrderId) ?? null));\n if(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits??[]).length > 0) {\n if(!uom) {\n setUom(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? []).find(v => v.recno === data.subUnitId ?? null))\n if((data.uomList??[]).length <= 0) {\n handleInvoiceDetail({uomList: ((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? [])}, srNo);\n }\n }\n }\n }, [costCenterList, costLocation, workorders, inventoryItems, data.itemId, data.workOrderId, data.cLocation, data.cLocation, data.taxType])\n\n return colum === \"lineno\" ? (\n onClickRow(srNo)}>{srNo+1}
\n ) : colum === \"itemId\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{item?.name}
\n ) : colum === \"customerId\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{customer?.text ?? \"\"}
\n ) : colum === \"qty\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.qty > 0 ? data?.qty : \"\"}
\n ) : colum === \"unitFraction\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{data?.unitFraction > 0 ? data?.unitFraction : \"\"}
\n ) : colum === \"subUnitQty\" ? (\n props.allowEdit ?\n {\n let value = checkAndSetNumVal(e, data.subUnitQty, roundingDigit).target.value;\n handleInvoiceDetail({subUnitQty: value, transactionCurrencyRate: 0, subUnitTransactionRate: 0}, srNo)\n }}\n disabled={preview}\n />\n
: onClickRow(srNo)}>{data?.subUnitQty > 0 ? data?.subUnitQty : \"\"}
\n ) : colum === \"sRemarks\" ? (\n props.allowEdit ? 10 ? (data.sRemarks?.length??1)/10 : 1}\n name='sRemarks'\n placeholder='Description'\n value={data.sRemarks}\n onChange={e => handleOnChange({target: {name: e.target.name, value: e.target.value}})}\n disabled={preview}\n /> : <>\n
\n : onClickRow(srNo)} style={{width: '100%', textAlign: 'left'}}>{uom?.description??\"\"}
\n ) : colum === \"transactionCurrencyRate\" ? (\n props.allowEdit ? {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleInvoiceDetail({transactionCurrencyRateInvalid: true}, srNo)\n return;\n }\n\n let event = checkAndSetNumVal(e, data.transactionCurrencyRate, 13);\n let { value } = event.target;\n\n handleInvoiceDetail({transactionCurrencyRateInvalid: false, transactionCurrencyRate: value, subUnitTransactionRate: ((value / ((data.subUnitQty??1)/(data.qty??1)))) }, srNo)\n }}\n disabled={preview}\n /> :onClickRow(srNo)}>{data?.transactionCurrencyRate > 0 ? data?.transactionCurrencyRate : \"\"}
\n ) : colum === \"subUnitTransactionRate\" ? (\n props.allowEdit ?\n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n return;\n }\n let event = checkAndSetNumVal(e, data.subUnitTransactionRate, 13);\n let { value } = event.target;\n handleInvoiceDetail({subUnitTransactionRate: value, transactionCurrencyRate: ((value * (data.subUnitQty??1))/data.qty) }, srNo)\n }}\n disabled={preview}\n />
:\n onClickRow(srNo)} style={{height: 'fit-content', display: 'flex', flexDirection: 'column'}}>\n
\n ) : colum === \"discountType\" ? (\n props.allowEdit ? {data?.subUnitTransactionRate > 0 ? data?.subUnitTransactionRate : \"\"}
\nonClickRow(srNo)}>{(data?.discountVal??0) === 0 ? \"\" : `${data?.discountType === \"@\" ? data?.discountType : \"\"} ${data?.discountVal} ${data?.discountType === \"%\" ? data?.discountType : \"\"}` }
\n ) : colum === \"discountVal\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.discountVal}
\n ) : colum === \"discountAmount\" ? (\n props.allowEdit ? handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={true}\n /> :onClickRow(srNo)}>{data?.discountAmount}
\n ) : colum === \"exAmount\" ? (\n props.allowEdit ? handleOnChange(e)}\n /> :onClickRow(srNo)}>{data?.exAmount}
\n ) : colum === \"taxType\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: '100%'}}>
\n ): colum === \"costLocation\" ? (\n onClickRow(srNo)}>{data?.inAmount > 0 ? data?.inAmount : \"\"}
\n ) : colum === \"Action\" ? (\n <>\n\n {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}\n removeDetail={removeDetail}/>\n
\n )\n }\n ]\n}\n","//** React imports\nimport {useState, useEffect, memo} from 'react'\n\n//** Translation\nimport {useTranslation} from \"react-i18next\"\n\n// ** Styles\nimport 'react-slidedown/lib/slidedown.css'\nimport '@styles/base/pages/app-invoice.scss'\nimport '@styles/react/libs/flatpickr/flatpickr.scss'\nimport '@styles/react/libs/react-select/_react-select.scss'\n\n//** Custom imports\nimport {fireMessage} from \"@src/components/MessageModel\"\nimport {useVendorInvoice} from '../context/useVendorInvoice'\nimport TaxTypeSelector_v2 from \"@src/components/TaxTypeSelector_v2\";\nimport CostCenterSelector_v2 from '@src/components/CostCenterSelector_v2'\nimport InventoryItemSelector_v2 from '@src/components/InventoryItemSelector_v2'\nimport {checkAndSetNumVal} from '@src/utility/Utils'\nimport CostLocationSelector_v2 from '@src/components/CostLocationSelector_v2'\nimport AccountDetailSelector_v2 from \"@src/components/AccountDetailSelector_v2\";\nimport ConfirmModal from \"@src/components/ConfirmModal\";\nimport SimpleCustomerSelector_v2 from \"@src/components/SimpleCustomerSelector_v2\";\n\n\n//** Icons\nimport {X} from \"react-feather\";\n\n//** React strap imports\nimport {\n DropdownItem,\n DropdownMenu,\n DropdownToggle,\n Input,\n InputGroup,\n UncontrolledDropdown,\n UncontrolledTooltip\n} from 'reactstrap'\nimport ProjectACustomerSelector_v2 from \"../../../../../components/ProjectACustomerSelector_v2\";\nimport * as React from \"react\";\n\nconst CategoryColumnCell = (props) => {\n const {t} = useTranslation()\n\n const {\n colum,\n srNo,\n data,\n accounts,\n toggleQuickAddBar,\n roundingDigit,\n preview,\n inventoryItems,\n customerList,\n detailCoaList,\n costLocations,\n workorders = [],\n costCenterList,\n transactionCurrencyRate,\n taxTypeList,\n removeDetail,\n onClickRow\n } = props\n const {\n handleInvoiceCategoryDetail,\n vendorInvoice\n } = useVendorInvoice()\n\n const [isOpenModal, setIsOpenModal] = useState(false)\n\n const deleteForm = () => {\n removeDetail(srNo)\n }\n\n const [item, setItem] = useState()\n const [account, setAccount] = useState()\n const [customer, setCustomer] = useState()\n const [costLocation, setCostLocation] = useState()\n const [costCenter, setCostCenter] = useState()\n const [taxType, setTaxType] = useState()\n\n const handleItem = (record) => {\n if (record?.recno === -1) {\n toggleQuickAddBar('inventory')\n } else {\n if (!record.purchaseAccount) {\n setTimeout(() => {\n fireMessage(\n {t(`Please add Purchase Account to ${record.name}`)}
,\n \"\",\n \"warning\",\n {\n showCloseButton: true,\n showCancelButton: true,\n focusConfirm: true,\n confirmButtonText: 'Quick Add',\n cancelButtonText: 'Close'\n }\n ).then(results => {\n\n if (results.isConfirmed) {\n toggleQuickAddBar('inventory', record.recno)\n }\n\n })\n }, [100])\n return\n }\n setItem(record)\n let saving_data = {};\n if ((record.taxType && record.taxType !== 0) || (vendorInvoice.taxType && vendorInvoice.taxType !== 0)) {\n let taxObj = (record.taxType && record.taxType !== 0) ? record : vendorInvoice;\n taxTypeList.map((savedTax) => {\n if (savedTax.value === taxObj.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n }\n })\n }\n\n handleInvoiceCategoryDetail({\n itemId: record?.recno,\n qty: 1,\n itemName: record?.name,\n code: record.code,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: record.saleRate ? (record.saleRate * transactionCurrencyRate) : 0,\n ...saving_data,\n // taxPer: record.taxType > 0 ? record.taxPer : vendorInvoice.taxPer,\n // taxText: record.taxText ? record.taxText : vendorInvoice.taxText,\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n }\n }\n\n const handleAccount = (record) => {\n setAccount(record)\n handleInvoiceCategoryDetail({coaId: record?.recno}, srNo)\n }\n\n const handleCustomer = (record) => {\n setCustomer(record)\n handleInvoiceCategoryDetail({customerId: record?.customerId, workOrderId: record?.projectId}, srNo)\n }\n\n const handleTaxType = (record) => {\n setTaxType(record)\n handleInvoiceCategoryDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }\n\n const handleCostLocation = (record) => {\n setCostLocation(record)\n handleInvoiceCategoryDetail({cLocation: record?.recno}, srNo)\n }\n\n const handleCostCenter = (record) => {\n setCostCenter(record)\n handleInvoiceCategoryDetail({costCenter: record?.recno}, srNo)\n }\n\n const handleOnChange = (e) => {\n const {name, value} = e.target\n handleInvoiceCategoryDetail({[name]: value}, srNo)\n }\n\n useEffect(() => {\n const error = ((data.discountVal > 100 && data.discountType === \"%\") || ((data.discountVal > (data.qty * data.transactionCurrencyRate)) && data.discountType === \"@\"))\n handleInvoiceCategoryDetail({invalidDiscount: error}, srNo)\n }, [data.transactionCurrencyRate, data.qty, data.discountVal, data.discountType])\n\n useEffect(() => {\n if (data.balanceQty) {\n const error = (data.qty ?? 0) > data.balanceQty\n handleInvoiceCategoryDetail({invalidQty: error}, srNo)\n }\n\n }, [data.qty])\n\n\n useEffect(() => {\n setAccount(detailCoaList.find(v => v.recno === data.coaId) ?? null)\n setCostCenter(costCenterList.find(v => v.recno === data.costCenter ?? null))\n setCustomer(customerList?.find((v) => (v.customerId === data.customerId && v.projectId === data.workOrderId) ?? null));\n }, [costCenterList, costLocation, customerList, detailCoaList, data.coaId, data.workOrderId, data.cLocation, data.cLocation, data.taxType])\n\n return colum === \"lineno\" ? (\n onClickRow(srNo)}>{srNo+1}
\n ) : colum === \"itemId\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{item?.name}{item?.name ? \"-\" : \"\"}{item?.code}
\n ) : colum === \"coaid\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{account?.text ?? \"\"}
\n ) : colum === \"customerId\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{customer?.text ?? \"\"}
\n ) : colum === \"qty\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.qty > 0 ? data?.qty : \"\"}
\n ) : colum === \"sRemarks\" ? (\n props.allowEdit ? 10 ? (data.sRemarks?.length??1)/10 : 1}\n name='sRemarks'\n placeholder='Description'\n value={data.sRemarks}\n onChange={e => handleOnChange({target: {name: e.target.name, value: e.target.value}})}\n disabled={preview}\n /> : <>onClickRow(srNo)}>{data?.transactionCurrencyRate > 0 ? data?.transactionCurrencyRate : \"\"}
\n ) : colum === \"discountType\" ? (\n props.allowEdit ?onClickRow(srNo)}>{(data?.discountVal ?? 0) === 0 ? \"\" : `${data?.discountType === \"@\" ? data?.discountType : \"\"} ${data?.discountVal} ${data?.discountType === \"%\" ? data?.discountType : \"\"}`}
\n ) : colum === \"discountVal\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.discountVal}
\n ) : colum === \"discountAmount\" ? (\n props.allowEdit ? handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={true}\n /> :onClickRow(srNo)}>{data?.discountAmount}
\n ) : colum === \"exAmount\" ? (\n props.allowEdit ? handleOnChange(e)}\n /> :onClickRow(srNo)}>{data?.exAmount}
\n ) : colum === \"taxType\" ? (\nonClickRow(srNo)}>{data?.inAmount > 0 ? data?.inAmount : \"\"}
\n ) : colum === \"Action\" ? (\n <>\n\n {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}\n removeDetail={removeDetail}/>\n
\n )\n }\n ]\n}","//** React imports\nimport { Fragment, useEffect, useRef, useState } from \"react\";\nimport * as React from \"react\";\n\n//** Stores hooks\nimport * as service from \"@api/api.service\";\nimport { useCan } from \"@hooks/useCan\";\nimport { useVendorInvoice } from \"../context/useVendorInvoice\";\nimport { useAppDefaults } from \"@hooks/useAppDefaults\";\n\n//** Styles imports\nimport \"react-slidedown/lib/slidedown.css\";\nimport \"@styles/base/pages/app-invoice.scss\";\nimport \"@styles/react/libs/flatpickr/flatpickr.scss\";\nimport \"@styles/react/libs/react-select/_react-select.scss\";\n\n// ** Reactstrap Imports\nimport { Button, Card, CardBody, Col, Input, Label, Row } from \"reactstrap\";\n\n//** Icons\nimport { ChevronDown, Edit3, Save, Settings, X } from \"react-feather\";\n\n//** Translation\nimport { useTranslation } from \"react-i18next\";\n\n//** Third party imports\nimport { Link, useHistory } from \"react-router-dom\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport axios from \"axios\";\n\n//** Custom Imports\nimport DatePickr from \"@src/components/DatePickr\";\nimport CurrencySelector from \"@src/components/CurrencyConvertor\";\nimport { fireMessage } from \"@src/components/MessageModel\";\nimport AreaSelector_v2 from \"@src/components/AreaSelector_v2\";\nimport { getData } from \"@src/views/settings/company/form-view/steps/preferences/purchase-order/store\";\nimport Attachments from \"@src/components/Attachments\";\nimport SimpleVendorSelector_v2 from \"@src/components/SimpleVendorSelector_v2\";\nimport ConfirmModal from \"@src/components/ConfirmModal\";\nimport { useMapAccounts } from \"@src/utility/hooks/useMapAccounts\";\nimport CopyFromSearchBar from \"@src/components/CopyFromSearchBar\";\nimport SavingExitDialog from \"@src/components/SavingExitDialog\";\nimport CreditTermsSelector from \"@src/components/CreditTermsSelector\";\nimport QuickAddForm from \"@src/components/QuickAddForms\";\nimport UpdateVendorAddress from \"../../vendors/detail/steps/UpdateVendorAddress\";\n\n//** JQuery Imports\nimport $ from \"jquery\";\n\n\n//** Utils\nimport { formatCurrency, getDateFromTerm } from \"@src/utility/Utils\";\n\n//** Table Components\nimport DataTable from \"react-data-table-component\";\nimport { columns } from \"./columns\";\nimport ColumnCustomizer from \"./ColumnsCustomizer\";\nimport { categoryColumns } from \"./categoryColumns\";\nimport AddInventoryDialog from \"../../../../../components/QuickAddForms/AddInventoryDialog\";\nimport {conditionalRowStylesForms, tablesDateFormat} from \"../../../../../utility/Utils\";\nimport FormColumnCustomizer from \"../../../../../components/FormsColumnCustomizer\";\n\nconst customStyles = {\n control: (base) => ({\n ...base,\n height: 40,\n minWidth: 100,\n minHeight: 30,\n }),\n};\n\nconst FormView = ({ title, recno, preview,duplicate, show, pr, ...props }) => {\n\n const { t } = useTranslation();\n const ability = useCan();\n const { userData } = useAppDefaults();\n const { compareModel, vendorInvoice, defaultCurrency, defaultCostLocation, loadInvoice, loadInvoiceCode, handleVendorInvoice, addItemDetail, addCategoryDetail, handleTransactionRate, storeInvoice, removeVendorInvoiceDetail, removeVendorInvoiceCoaDetail, handleTaxSummaryDetail, handleInvoiceDetail, handleInvoiceDetailInBulk, loadPurchaseRequest, listSalesInv, setListSalesInv, categoryList, setCategoryList, detailKey, setDetailKey } = useVendorInvoice();\n const { accounts } = useMapAccounts();\n const parent = useRef(null);\n const exDRef = useRef(null);\n const taxfRef = useRef(null);\n\n // ** States\n const [supplierList, setSuplierList] = useState([]);\n const [inventoryItems, setInventoryItems] = useState([]);\n const [costLocations, setCostLocations] = useState([]);\n const [detailCoaList, setDetailCoaList] = useState([]);\n const [costCenterList, setCostCenterList] = useState([]);\n const [itemCategory, setItemCategory] = useState(false);\n const [selectedSupplier, setSelectedSupplier] = useState();\n const [selectedSupplierDetail, setSelectedSupplierDetail] = useState();\n const [areaList, setAreaList] = useState([]);\n const [selectedArea, setSelectedArea] = useState();\n const [selectedTerm, setSelectedTerm] = useState();\n const [attachmentFiles, setAttachmentFiles] = useState([]);\n const [taxTypeList, setTaxTypeList] = useState([]);\n const [customerList, setCustomerList] = useState([]);\n const [showFreight, setShowFreight] = useState(false);\n const [showTaxIndex, setShowTaxIndex] = useState(-1);\n const [openCustomizer, setOpenCustomizer] = useState(false);\n const [openCustomizerCategory, setOpenCustomizerCategory] = useState(false);\n const [clickedAddRow, setClickedAddRow] = useState(false);\n const [showExDiscount, setShowExDiscount] = useState(false);\n const [selectedLine, setSelectedLine] = useState(-1);\n const [selectedLineCoa, setSelectedLineCoa] = useState(-1);\n const [isOpenModal, setIsOpenModal] = useState(false);\n\n // ** States\n const [isVendorSelectable, setIsVendorSelectable] = useState(true);\n const [detailList, setDetailList] = useState([]);\n const [showBilling, setShowBilling] = useState(false);\n const [selectedAll, setSelectAll] = useState(false);\n const [showShipping, setShowShipping] = useState(false);\n const [showTRN, setShowTRN] = useState(false);\n const [loading, setLoading] = useState(false);\n const [searchBarOpen, setSearchBar] = useState({ type: \"\", open: false });\n const [searchData, setSearchData] = useState({});\n const [quickAddBar, setQuickAddBar] = useState({ open: false, type: \"\" });\n const [doCompareModel, setDoCompareModel] = useState(false);\n const [showFields, setShowFields] = useState({ showFreight: false, showClass: false, showDisc: false, showWO: false, showTerms: false });\n const [exitAlert, setExitAlert] = useState(false);\n const wrapperRef = useRef(null);\n const wrapperRefCoa = useRef(null);\n const addBtnRef = useRef(null);\n const frRef = useRef(null);\n const categoryRef = useRef(null);\n const unblock = useRef(null);\n const history = useHistory();\n const [returnUri, setReturnUri] = useState(\"/apps/purchases/purchase-orders/add\");\n const [transactionCurrency, setTransactionCurrency] = useState(defaultCurrency);\n const [transactionCurrencyRate, setTransactionCurrencyRate] = useState(defaultCurrency?.conversionRate || 0);\n const [userRate, setUserRate] = useState(transactionCurrencyRate || 0);\n const [width, setWidth] = useState(0);\n const [popoverOpen, setPopoverOpen] = useState(false);\n const inputRef = useRef(null);\n\n // ** Stores\n const dispatch = useDispatch();\n const store = useSelector((state) => state.purchaseOrderPref);\n const advanceStore = useSelector((state) => state?.advanceSettings);\n\n useEffect(() => {\n dispatch(getData());\n }, []);\n\n useEffect(()=>{\n if( duplicate === true ) {\n loadInvoiceCode()\n }\n },[])\n\n useEffect(() => {\n let tempShowFields = {};\n (store.data ?? []).map((e, index) => {\n if (e.keyName === \"costCenter\") {\n tempShowFields.showClass = e.isVisible;\n if(!(e.isVisible)) {\n setListSalesInv([...listSalesInv.filter((x) => x.colName !== 'costCenter')])\n setCategoryList([...categoryList.filter((x) => x.colName !== 'costCenter')])\n }\n } else if (e.keyName === \"transactionCurrencyspdiscount\") {\n tempShowFields.showDesc = e.isVisible;\n } else if (e.keyName === \"transactionCurrencyFreight\") {\n tempShowFields.showFreight = e.isVisible;\n } else if (e.keyName === \"workorderId\") {\n tempShowFields.showWO = e.isVisible;\n } else if (e.keyName === \"otherTerms\") {\n tempShowFields.showTerms = e.isVisible;\n }\n });\n\n setShowFields({ ...showFields, ...tempShowFields });\n }, [store.data]);\n\n const [showAddInventory, setShowAddInventory] = useState(false);\n\n const toggleQuickAddBar = (type = \"\", recno = null) => {\n if(type === 'inventory_add'){\n setShowAddInventory(!showAddInventory);\n } else {\n setQuickAddBar({type, open: !quickAddBar.open, recno});\n }\n };\n const toggleSearchBar = () => {\n setSearchBar({ type: \"\", open: !searchBarOpen });\n };\n const clearSearch = () => {\n setSearchData(searchData);\n };\n\n const handleArea = (value) => {\n if (value?.recno && !value.customerId) {\n } else {\n setDoCompareModel(true);\n }\n if (value) {\n handleVendorInvoice({ purchaseLocation: value.value });\n } else {\n handleVendorInvoice({ purchaseLocation: null });\n }\n setSelectedArea(value);\n };\n\n\n const onSuccessColumns = () => {\n dispatch(getData({...store.params}))\n }\n\n useEffect(() => {\n unblock.current = history.block((location) => {\n if(location.pathname !== '/login') {\n if (doCompareModel) {\n setReturnUri(location?.pathname ?? \"/apps/purchases/purchase-orders/list\");\n if (location?.pathname !== \"/apps/purchases/purchase-orders/add\") {\n setExitAlert(true);\n }\n return false;\n }\n }\n });\n return function () {\n unblock.current.current && unblock.current.current();\n };\n }, [history, vendorInvoice, compareModel]);\n\n const doSearch = async (data) => {\n let response,\n error = \"\";\n if (searchBarOpen.type === \"PO\") {\n if (vendorInvoice.vendorId || data.vendorId) {\n response = await axios.get(\"/PurchaseOrders/List\", {\n params: {\n ...data,\n vendorId: vendorInvoice.vendorId ? vendorInvoice.vendorId : data.vendorId,\n },\n });\n } else {\n error = \"vendor\";\n }\n } else if (searchBarOpen.type === \"PR\") {\n if (vendorInvoice.vendorId || data.vendorId) {\n response = await axios.get(\"/PurchaseRequests/List\", {\n params: {\n ...data,\n vendorId: vendorInvoice.vendorId ? vendorInvoice.vendorId : data.vendorId,\n },\n });\n } else {\n error = \"vendor\";\n }\n } else if (searchBarOpen.type === \"INV\") {\n if (vendorInvoice.customerId || data.customerId) {\n response = await axios.get(\"/SalesInvoices/List\", {\n params: {\n ...data,\n customerId: vendorInvoice.customerId ? vendorInvoice.customerId : data.customerId,\n },\n });\n } else {\n error = \"customer\";\n }\n }\n if (error) {\n fireMessage(t(\"please select the \") + error, \"\", \"warning\", {t});\n return;\n }\n\n const existList = vendorInvoice.details.filter((f) => f.source !== undefined);\n const checkDisabled = (itm) =>\n existList.findIndex((item) => {\n return item.sourceFyear === itm.fyear && item.sourceLocation === itm.location && item.sourceno === itm.sno && item.sLine === itm.lineNo && item.source === searchBarOpen.type;\n }) !== -1;\n\n const list = response.data.data.list\n ?.filter((f) => f?.balanceQty > 0)\n ?.map((itm, index) => {\n return {\n ...itm,\n // qty: itm.balanceQty,\n transactionCurrencyRate: itm.rate,\n lineno: detailKey + index + 1,\n selected: selectedAll,\n disabled: checkDisabled(itm),\n };\n });\n\n setDetailList(list);\n };\n\n useEffect(() => {\n if (!!vendorInvoice.recno && vendorInvoice.details.length > 0) {\n setTransactionCurrencyRate(vendorInvoice.details[0].transactionCurrencyConversionRate);\n }\n\n if (clickedAddRow) {\n setSelectedLine(vendorInvoice.details[vendorInvoice.details.length - 1].lineno);\n setClickedAddRow(false);\n }\n }, [inventoryItems, vendorInvoice]);\n\n const loadDetails = () => {\n setDoCompareModel(true);\n let count = vendorInvoice.details[vendorInvoice.details.length - 1].lineno;\n\n if (vendorInvoice.details.length === 1 && !vendorInvoice.details[0].itemId) {\n count = 0;\n }\n\n const filteredList = detailList.filter((f) => f.selected === true).map((f, i) => ({ ...f, lineno: count + (i + 1) }));\n\n if (filteredList.length) {\n setDetailKey((key) => key + filteredList.length);\n if (vendorInvoice.details.length === 1 && !vendorInvoice.details[0].itemId) {\n handleVendorInvoice({ details: [...filteredList] });\n } else {\n handleVendorInvoice({ details: [...vendorInvoice.details, ...filteredList] });\n }\n setSearchBar({ type: \"\", open: false });\n setDetailList([]);\n }\n };\n\n const handleEditDetail = (detail, index) => {\n setDoCompareModel(true);\n detailList[index] = { ...detailList[index], ...detail };\n setDetailList(() => [...detailList]);\n };\n\n const onHandleSelectDeselectAll = (value) => {\n setDoCompareModel(true);\n const list = detailList.map((l) => ({ ...l, selected: value }));\n setSelectAll(value);\n setDetailList(list);\n };\n\n const onHandleCopyItem = (value, index) => {\n detailList[index].selected = value;\n setDetailList(() => [...detailList]);\n };\n\n const clearDetails = () => {\n setDetailList([]);\n };\n\n const closeDetails = () => {\n clearDetails(0);\n setSearchBar({ type: \"\", open: false });\n };\n\n useEffect(() => {\n setIsVendorSelectable(vendorInvoice.details.filter((d) => !!d.source).length);\n }, [vendorInvoice.details.length]);\n\n\n useEffect(() => {\n setWidth(parent?.current?.offsetWidth || 0);\n }, [parent]);\n\n const loadDetailCoaList = async () => {\n const response = await service.Get(`/Defaults/DetailCOAList`);\n setDetailCoaList(response.data);\n };\n\n useEffect(() => {\n window.addEventListener(\"resize\", () => setWidth(parent?.current?.offsetWidth || 0), false);\n }, []);\n\n const onAttachment = (file) => {\n setAttachmentFiles((attachments) => [...attachments, file]);\n };\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.focus();\n }\n }, [inputRef.current]);\n\n const onAttachmentRemove = (index) => {\n setAttachmentFiles((attachments) => attachments.filter((a, ix) => ix !== index));\n };\n\n const loadSupplierList = async () => {\n const response = await service.Get(`/Defaults/Vendors`);\n setSuplierList(response.data);\n };\n const loadInventoryList = async () => {\n const response = await service.Get(`/Defaults/Inventory?Type=purchase`);\n setInventoryItems(response.data);\n };\n const loadCostLocations = async () => {\n const response = await service.Get(`/Defaults/Locations`);\n setCostLocations(response.data);\n };\n\n const reloadVendor = async (vendorId) => {\n let f_response = await service.Get(\"/Vendors/\" + vendorId);\n if (f_response.isSuccessFull) {\n setSelectedSupplierDetail(f_response.data);\n }\n };\n\n const handleCreditTerm = (value) => {\n setDoCompareModel(true);\n setSelectedTerm(value);\n handleVendorInvoice({\n creditTerms: value?.value,\n creditDueDate: getDateFromTerm(value.defaultValue, vendorInvoice.sDate),\n });\n };\n\n\n const loadTaxTypes = async () => {\n const response = await service.Get(`/Defaults/TaxTypes`);\n setTaxTypeList(response.data);\n };\n\n const loadCustomerList = async () => {\n const response = await service.Get(`/Defaults/AllCustomersAndProjects`);\n setCustomerList(response.data);\n };\n\n const loadCostCenterList = async () => {\n const response = await service.Get(`/Defaults/CostCenters`);\n setCostCenterList(response.data);\n };\n const loadVendorInvoice = async () => {\n try {\n await loadInvoice(recno,duplicate);\n handleInvoiceDetail({}, 0);\n } catch (error) {\n await fireMessage(error, t(\"Error...\"), \"error\", {t});\n }\n };\n\n useEffect(() => {\n if (!!vendorInvoice.recno && vendorInvoice.details.length > 0) {\n setTransactionCurrencyRate(vendorInvoice.details[0].transactionCurrencyConversionRate);\n }\n }, [supplierList, inventoryItems, vendorInvoice]);\n\n useEffect(() => {\n Promise.all([loadSupplierList(), loadInventoryList(), loadCostLocations(), loadCostCenterList(), loadDetailCoaList(), loadTaxTypes(), loadCustomerList()]);\n if (recno) {\n loadVendorInvoice();\n } if (pr) {\n loadPurchaseRequest(pr);\n }else {\n loadInvoiceCode();\n }\n }, [recno]);\n\n\n //** default vendor selected\n useEffect(() => {\n if (!recno && supplierList.length && accounts.defaultVendor) {\n const i = supplierList[supplierList.findIndex((x) => x.recno === accounts.defaultVendor)];\n if (i) {\n setSelectedSupplier(i);\n console.log(\"---\", i);\n handleVendorInvoice({ vendorId: i.recno, coaId: i.coaId });\n }\n }\n }, [supplierList.length, recno, accounts]);\n\n useEffect(() => {\n let isActive = true;\n\n if(isActive) {\n let saving_data = {};\n\n if(selectedSupplier) {\n saving_data = {\n vendorId: selectedSupplier?.recno,\n coaId: selectedSupplier?.coaId,\n transactionCurrency: selectedSupplier?.defaultCurrencyId ?? defaultCurrency.recno,\n creditDays: selectedSupplier?.creditDays ?? 0,\n creditTerms: recno ? vendorInvoice.creditTerms : selectedSupplier?.creditTerms,\n address: selectedSupplier?.address,\n trnNo: selectedSupplier?.trnNo,\n taxType: selectedSupplier?.taxType,\n };\n\n if (selectedSupplier?.area && selectedSupplier?.area !== 0) {\n areaList.map((savedArea) => {\n if (savedArea.value === selectedSupplier?.area) {\n if (selectedSupplier) {\n saving_data.areaId = savedArea.value;\n } else {\n handleVendorInvoice({ areaId: null });\n }\n setSelectedArea(savedArea);\n }\n });\n }\n\n if (selectedSupplier?.taxType !== undefined && selectedSupplier?.taxType !== 0 && !recno) {\n taxTypeList.map((savedTax) => {\n if (savedTax.value === selectedSupplier?.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n handleInvoiceDetailInBulk({\n taxType: savedTax?.value ?? 0,\n taxPer: savedTax?.taxPercent ?? 0,\n taxText: savedTax?.text,\n });\n }\n });\n }\n\n if(store?.terms && !recno) {\n saving_data.otherTerms = store?.terms;\n }\n\n if(store?.notes && !recno) {\n saving_data.remarks = store?.notes;\n }\n\n handleVendorInvoice(saving_data);\n }\n }\n\n return () => {\n isActive = false;\n }\n\n }, [selectedSupplier, store?.terms, store?.notes])\n\n const handlePicker = (value) => {\n handleVendorInvoice({ pDate: value, creditDueDate: getDateFromTerm(selectedTerm?.defaultValue ?? \"Custom\", value) });\n };\n\n useEffect(() => {\n function handleClickOutside(event) {\n if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {\n setSelectedLine(-1);\n }\n\n if (wrapperRefCoa.current && !wrapperRefCoa.current.contains(event.target)) {\n setSelectedLineCoa(-1);\n }\n\n if (frRef.current && !frRef.current.contains(event.target)) {\n setShowFreight(false);\n }\n\n if (taxfRef.current && !taxfRef.current.contains(event.target)) {\n setShowTaxIndex(-1);\n }\n\n if (exDRef.current && !exDRef.current.contains(event.target)) {\n setShowExDiscount(false);\n }\n }\n // Bind the event listener\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [wrapperRef, wrapperRefCoa, frRef, exDRef, taxfRef]);\n\n\n const handleSupplier = async (value) => {\n if (value?.recno === -1) {\n toggleQuickAddBar(\"vendor\");\n setSelectedSupplier();\n let saving_data = {\n vendorId: null,\n coaId: null,\n transactionCurrency: defaultCurrency.recno,\n creditDays: 0,\n creditTerms: recno ? vendorInvoice.creditTerms : value?.creditTerms,\n address: null,\n trnNo: null,\n };\n handleVendorInvoice(saving_data);\n } else if (value) {\n setDoCompareModel(true);\n let f_response = await service.Get(\"/Vendors/\" + value.recno);\n\n if (f_response.isSuccessFull) {\n setSelectedSupplierDetail(f_response.data);\n }\n\n setSelectedSupplier(value);\n }\n };\n\n\n\n const handleCurrency = (value) => {\n handleVendorInvoice({ transactionCurrency: value?.recno });\n setTransactionCurrency(value || {});\n handleTransactionRate(value?.conversionRate);\n\n setTransactionCurrencyRate(value?.conversionRate || 0);\n };\n const updateTransactionRate = () => {\n handleTransactionRate(parseFloat(userRate));\n setTransactionCurrencyRate(parseFloat(userRate));\n setPopoverOpen(!popoverOpen);\n };\n const handleDuePicker = (value) => {\n handleVendorInvoice({ expectedDelivery: value });\n };\n\n const onSubmit = async (e) => {\n setLoading(true);\n e.preventDefault();\n setLoading(true);\n try {\n if (vendorInvoice.term === \"cash\" && vendorInvoice.cashAmount !== vendorInvoice.netAmount) {\n await fireMessage(t(\"Net amount and Cash Paid amount should be same\"), \"\", \"error\", {t});\n return;\n }\n\n if (!accounts.roudingDifferenceAdjustment) {\n await fireMessage(t(\"Please Map Rounding Difference Adjustment Account\"), \"\", \"error\", {t});\n setLoading(false);\n return;\n }\n\n const invalid = vendorInvoice.details.findIndex((i) => i.invalidDiscount);\n if (invalid !== -1) {\n $(`#positionBottom-${invalid}`).focus();\n setLoading(false);\n return;\n }\n\n const invalidQty = vendorInvoice.details.findIndex((i) => i.invalidQty);\n if (invalidQty !== -1) {\n $(`#QtyBottom-${invalidQty}`).focus();\n setLoading(false);\n return;\n }\n setDoCompareModel(false);\n const response = await storeInvoice(!!recno, attachmentFiles, duplicate);\n await fireMessage(t(\"Purchase Order saved successfully\"), t(\"Success...\"), \"success\", {t});\n setLoading(false);\n if (unblock) {\n unblock.current();\n }\n history.replace(\"/apps/purchases/purchase-orders/list\");\n } catch (error) {\n setLoading(false);\n await fireMessage(error, t(\"Error...\"), \"error\", {t});\n if(!recno) {\n loadInvoiceCode();\n }\n }\n };\n\n useEffect(() => {\n if (!!vendorInvoice.recno && vendorInvoice.details.length > 0) {\n setTransactionCurrencyRate(vendorInvoice.details[0].transactionCurrencyConversionRate);\n }\n\n if (clickedAddRow) {\n setSelectedLine(vendorInvoice.details[vendorInvoice.details.length - 1].lineno);\n setClickedAddRow(false);\n }\n\n if (itemCategory) {\n setSelectedLineCoa(vendorInvoice.coaDetails[vendorInvoice.coaDetails.length - 1].lineno);\n setItemCategory(false);\n }\n }, [inventoryItems, vendorInvoice]);\n\n const pushInList = (data, recno = null) => {\n if (quickAddBar.type === \"inventory\" || quickAddBar.type === \"non-inventory\" || quickAddBar.type === \"service-inventory\") {\n if (recno) {\n const list = [...inventoryItems];\n list[list.findIndex((l) => l.recno === recno)] = data;\n setInventoryItems(list);\n } else {\n setInventoryItems((items) => [data, ...items]);\n }\n } else if (quickAddBar.type === \"vendor\") {\n setSuplierList((vendors) => [data, ...vendors]);\n }\n };\n\n return (\n \n {/* Header */}\n \n
\n\n \n \n \n {t(\"Currency\")} *\n \n
\n \n
\n\n {t(title || \"New Purchase Order\")}
\n\n {vendorInvoice.recno && duplicate === false && (\n
\n\n {\n !(advanceStore.data.allowMultiCurrency) &&\n \n {t(\"Sr#\")} : {vendorInvoice.recno}\n
\n )}\n\n \n handleVendorInvoice({ code: e.target.value })} className=\"s-input form-control\" />\n
\n\n \n \n {t(\"Vendor\")} *\n \n\n
\n \n \n \n
\n \n \n
\n \n \n
\n \n
\n {vendorInvoice.vendorId && (\n \n \n {\n reloadVendor(vendorInvoice.vendorId);\n setShowBilling(true);\n }}\n >\n
\n {\n
\n )}\n
\n\n {t(\"BILLING ADDRESS\")}
\n \n\n {selectedSupplierDetail?.address}, {selectedSupplierDetail?.city} {selectedSupplierDetail?.state}, {selectedSupplierDetail?.country}\n
\n }\n \n\n {vendorInvoice.vendorId && (\n \n \n {\n reloadVendor(vendorInvoice.vendorId);\n setShowShipping(true);\n }}\n >\n
\n {\n
\n )}\n
\n\n {t(\"SHIPPING ADDRESS\")}
\n \n\n {selectedSupplierDetail?.shippingAddress}, {selectedSupplierDetail?.shippingCity} {selectedSupplierDetail?.shippingState}, {selectedSupplierDetail?.shippingCountry}\n
\n }\n \n\n {vendorInvoice.vendorId && (\n \n \n {\n reloadVendor(vendorInvoice.vendorId);\n setShowTRN(true);\n }}\n >\n
\n {
\n )}\n
\n\n {t(\"TRN\")}
\n \n{selectedSupplierDetail?.taxNo ?? t(\"Add TRN\")}
}\n \n\n \n handleVendorInvoice({ refNo: e.target.value })} className=\"s-input form-control\" style={{ height: \"40px\" }} />\n
\n \n
\n \n
\n \n \n\n {\n handleVendorInvoice({ invoiceTaxType: e.target.value });\n handleInvoiceDetailInBulk({ invoiceTaxType: e.target.value });\n if (e.target.value === \"OutOfScope\") {\n setListSalesInv(listSalesInv.map((e) => (e.colName === \"taxType\" ? { ...e, show: false, avoidChange: true } : e)));\n setCategoryList(categoryList.map((e) => (e.colName === \"taxType\" ? { ...e, show: false, avoidChange: true } : e)));\n } else {\n setListSalesInv(listSalesInv.map((e) => (e.colName === \"taxType\" ? { ...e, show: true, avoidChange: false } : e)));\n setCategoryList(categoryList.map((e) => (e.colName === \"taxType\" ? { ...e, show: true, avoidChange: false } : e)));\n }\n }}\n value={vendorInvoice.invoiceTaxType}\n onBlur={(e) => setSelectedLineCoa(vendorInvoice.coaDetails.length > 0 ? vendorInvoice.coaDetails[0].lineno : 0)}\n >\n \n \n \n \n
\n \n\n
\n index}\n onRowClicked={(row, event) => setSelectedLineCoa((vendorInvoice.coaDetails??[]).findIndex(x => x.lineno === row.lineno))}\n columns={categoryColumns(\n ability,\n defaultCurrency.symbol,\n categoryList,\n transactionCurrency,\n transactionCurrencyRate,\n (vendorInvoice?.coaDetails ?? []).filter((r) => !r.isDeleted).length,\n costLocations,\n costCenterList,\n inventoryItems,\n taxTypeList,\n accounts,\n toggleQuickAddBar,\n userData.roundingDigit,\n preview,\n detailCoaList,\n removeVendorInvoiceCoaDetail,\n vendorInvoice.invoiceTaxType,\n selectedLineCoa,\n (e) => {\n setSelectedLineCoa(selectedLineCoa + 1);\n },\n customerList,\n t,\n setSelectedLineCoa\n )}\n responsive={true}\n conditionalRowStyles={conditionalRowStylesForms}\n data={(vendorInvoice.coaDetails ?? [])}\n sortIcon={
\n {!preview && (\n \n \n {\n addCategoryDetail(defaultCostLocation, transactionCurrencyRate);\n setItemCategory(true);\n }}\n style={{ marginTop: \"10px\" }}\n outline\n color=\"success\"\n ref={categoryRef}\n >\n {t(\"Add Row\")}\n \n {\n setOpenCustomizerCategory(true);\n }}\n style={{ marginTop: \"10px\" }}\n color=\"danger\"\n >\n {t(\"Customization\")}\n \n
\n \n )}\n \n\n
\n index}\n onRowClicked={(row, event) => setSelectedLine((vendorInvoice.details??[]).findIndex(x => x.lineno === row.lineno))}\n columns={columns(\n ability,\n defaultCurrency.symbol,\n listSalesInv,\n transactionCurrency,\n transactionCurrencyRate,\n vendorInvoice.details.filter((r) => !r.isDeleted).length,\n costLocations,\n costCenterList,\n inventoryItems,\n taxTypeList,\n accounts,\n toggleQuickAddBar,\n userData?.roundingDigit,\n preview,\n removeVendorInvoiceDetail,\n vendorInvoice.invoiceTaxType,\n selectedLine,\n (e) => {\n setSelectedLine(selectedLine + 1);\n },\n customerList,\n t,\n setSelectedLine\n )}\n responsive={true}\n conditionalRowStyles={conditionalRowStylesForms}\n data={vendorInvoice.details}\n sortIcon={
\n {!preview && (\n \n \n {\n addItemDetail(defaultCostLocation, transactionCurrencyRate);\n setClickedAddRow(true);\n }}\n style={{ marginTop: \"10px\" }}\n outline\n color=\"success\"\n ref={addBtnRef}\n >\n {t(\"Add Row\")}\n \n {\n setOpenCustomizer(true);\n }}\n style={{ marginTop: \"10px\" }}\n color=\"danger\"\n >\n {t(\"Customization\")}\n \n
\n \n )}\n \n \n
\n \n\n {!preview && (\n \n \n\n
\n
\n\n \n \n handleVendorInvoice({ remarks: e.target.value })} disabled={preview} />\n\n {\n vendorInvoice.remarks !== store.notes && (vendorInvoice.remarks??\"\").length > 1 &&\n
\n\n {showFields?.showTerms && (\n \n {\n handleVendorInvoice({changeDefaultNotes: !(vendorInvoice.changeDefaultNotes)})\n }}/>\n \n
\n }\n\n \n \n handleVendorInvoice({ otherTerms: e.target.value })} disabled={preview} />\n\n {\n vendorInvoice.terms !== store.terms && (vendorInvoice.terms??\"\").length > 1 &&\n
\n )}\n \n {\n handleVendorInvoice({changeDefaultTerms: !(vendorInvoice.changeDefaultTerms)})\n }}/>\n \n
\n }\n\n \n
\n \n \n {t(\"Sub Total\")} ({transactionCurrency.code})\n
\n ({t(\"Tax\")} {t(vendorInvoice.invoiceTaxType)})\n \n\n\n {formatCurrency(vendorInvoice.transactionCurrencyTotalAmount, transactionCurrency, false)}\n \n
\n {(vendorInvoice?.transactionCurrencyTotalDiscount ?? 0) - (vendorInvoice?.transactionCurrencyspdiscount ?? 0) !== 0 && (\n \n ({t(\"Tax\")} {t(vendorInvoice.invoiceTaxType)})\n \n\n
\n \n {t(\"Discount\")}\n \n \n {formatCurrency(vendorInvoice.transactionCurrencyTotalDiscount - vendorInvoice.transactionCurrencyspdiscount, transactionCurrency, false)}\n \n
\n )}\n {(vendorInvoice?.taxDetails || []).map((e, index) => {\n let taxName = taxTypeList[taxTypeList.findIndex((r) => r.value === e.taxType)];\n return taxName && !e.isDeleted ? (\n \n \n {taxName.text} - {e.taxPercent}%\n {\" \"}\n {showTaxIndex === index ? (\n {\n handleTaxSummaryDetail(\n {\n transactionCurrencyTaxAmount: r.target.value !== \"\" ? +r.target.value : r.target.value,\n },\n index\n );\n }}\n />\n ) : (\n \n {formatCurrency(e.transactionCurrencyTaxAmount, transactionCurrency, false)}\n \n )}\n
\n ) : null;\n })}\n\n {showFields?.showFreight && (\n \n \n {\" \"}\n {t(\"Freight\")}\n \n {showFreight ? (\n \n handleVendorInvoice({\n transactionCurrencyFreight: e.target.value !== \"\" ? +e.target.value : e.target.value,\n })\n }\n />\n ) : (\n \n \n setShowFreight(true)} className=\"me-50\" />\n {\" \"}\n {formatCurrency(vendorInvoice.transactionCurrencyFreight, transactionCurrency, false)}\n \n )}\n
\n )}\n {showFields?.showDesc && (\n \n \n {t(\"Extra Disc.\")}\n \n {showExDiscount ? (\n \n handleVendorInvoice({\n transactionCurrencyspdiscount: e.target.value !== \"\" ? parseFloat(`${e.target.value}`) : e.target.value,\n })\n }\n />\n ) : (\n \n \n setShowExDiscount(true)} className=\"me-50\" />\n {\" \"}\n {formatCurrency(vendorInvoice.transactionCurrencyspdiscount, transactionCurrency, false)}\n \n )}\n
\n )}\n\n \n \n {t(\"Total\")} ({transactionCurrency.code})\n \n \n {formatCurrency(vendorInvoice.transactionCurrencyNetAmount, transactionCurrency, false)}\n \n
\n \n \n \n \n \n \n {!preview &&\n ((!vendorInvoice.recno && ability.can(\"new\", \"PurchaseOrders\")) || (!!vendorInvoice.recno && ability.can(\"edit\", \"PurchaseOrders\"))) &&\n (loading ? (\n \n ) : (\n \n \n ))}\n\n {props.quickAdd ? (\n {\n unblock?.current();\n props.toggleQuickAddBar();\n }} color=\"\" className=\"btn-outline-primary\" style={{ marginLeft: 12 }}>\n \n ) : (\n \n \n )}\n \n \n
\n
\n\n {searchBarOpen.open && (\n {t(`Please add Purchase Account to ${record.name}`)}
,\n \"\",\n \"warning\",\n {\n showCloseButton: true,\n showCancelButton: true,\n focusConfirm: true,\n confirmButtonText: 'Quick Add',\n cancelButtonText: 'Close'\n }\n ).then(results => {\n\n if (results.isConfirmed) {\n toggleQuickAddBar('inventory_add', record.recno)\n }\n\n })\n }, [100])\n return\n }\n setItem(record)\n let saving_data = {};\n if ((record.taxType && record.taxType !== 0) || (vendorInvoice.taxType && vendorInvoice.taxType !== 0) ) {\n let taxObj = (record.taxType && record.taxType !== 0) ? record : vendorInvoice;\n taxTypeList.map((savedTax) => {\n if (savedTax.value === taxObj.taxType) {\n saving_data.taxType = savedTax?.value ?? 0;\n saving_data.taxPer = savedTax?.taxPercent ?? 0;\n saving_data.taxText = savedTax?.text ?? 0;\n }\n })\n }\n\n let subUnitIndex = (record?.subUnits??[]).findIndex((ele) => !ele.isDefault);\n let subUnit = null;\n if(subUnitIndex > -1) {\n subUnit = record?.subUnits[subUnitIndex]\n }\n\n let defaultSubUnitIndex = (record?.subUnits??[]).findIndex((ele) => ele.isDefault);\n let defaultSubUnit = null;\n if(subUnitIndex > -1) {\n defaultSubUnit = record?.subUnits[defaultSubUnitIndex]\n }\n\n handleInvoiceDetail({\n itemId: record?.recno,\n qty: 1,\n uomList: (record?.subUnits??[]),\n itemName: record?.name,\n unitId: record?.unit,\n subUnitId: subUnit?.recno??null,\n subUnitName: subUnit?.description??null,\n unitFraction: subUnit?.ratio??1,\n subUnitQty: subUnit?.ratio??1,\n subUnitDefaultId: defaultSubUnit?.recno??null,\n code: record.code,\n sRemarks: record.description,\n discountType: record.discountType ? record.discountType : \"%\",\n discountVal: record.discountValue ? record.discountValue : 0,\n transactionCurrencyRate: getTransactionalRate(record.saleRate, transactionCurrencyRate, roundingDigit),\n subUnitTransactionRate: getTransactionalRate(record.saleRate, transactionCurrencyRate, roundingDigit)/(subUnit?.ratio??1),\n ...saving_data,\n transactionCurrencyConversionRate: transactionCurrencyRate\n }, srNo)\n }\n }\n\n const handleTaxType = (record) => {\n setTaxType(record)\n handleInvoiceDetail({taxType: record?.value, taxPer: record?.taxPercent, taxText: record?.text}, srNo)\n }\n\n const handleCostLocation = (record) => {\n setCostLocation(record)\n handleInvoiceDetail({cLocation: record?.recno}, srNo)\n }\n\n const handleCostCenter = (record) => {\n setCostCenter(record)\n handleInvoiceDetail({costCenter: record?.recno}, srNo)\n }\n\n const handleOnChange = (e) => {\n const {name, value} = e.target\n handleInvoiceDetail({[name]: value}, srNo)\n }\n\n const handleChangeUOM = (record) => {\n setUom(record);\n handleInvoiceDetail({subUnitId: record?.recno, subUnitName: record?.description, unitFraction: record?.ratio??1, subUnitQty: (record?.ratio??1) * (data.qty??1), subUnitTransactionRate: (data.transactionCurrencyRate??0) > 0 ? ((data.transactionCurrencyRate??0)/(record?.ratio??1)) : 0 }, srNo)\n }\n\n\n const handleOnChangeAmount = (e) => {\n const {name, value} = e.target\n if(value && (`${value}`.slice(-1)) !== \".\") {\n let transactionCurrencyRateCalculated = (parseFloat(value) / parseFloat(vendorInvoice.details[srNo].qty));\n handleInvoiceDetail({transactionCurrencyRate: transactionCurrencyRateCalculated}, srNo)\n }\n }\n\n useEffect(() => {\n const error = ((data.discountVal > 100 && data.discountType === \"%\") || ((data.discountVal > (data.qty * data.transactionCurrencyRate)) && data.discountType === \"@\"))\n handleInvoiceDetail({invalidDiscount: error}, srNo)\n }, [data.transactionCurrencyRate, data.qty, data.discountVal, data.discountType])\n\n useEffect(() => {\n if (data.balanceQty) {\n const error = (data.qty ?? 0) > data.balanceQty\n handleInvoiceDetail({invalidQty: error}, srNo)\n }\n\n }, [data.qty])\n\n\n useEffect(() => {\n setItem(inventoryItems.find(v => v.recno === data.itemId) ?? null)\n setCostCenter(costCenterList.find(v => v.recno === data.costCenter ?? null))\n setCostLocation(costLocations.find(v => v.recno === data.cLocation ?? null))\n if(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits??[]).length > 0) {\n if(!uom) {\n setUom(((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? []).find(v => v.recno === data.subUnitId ?? null))\n if((data.uomList??[]).length <= 0) {\n handleInvoiceDetail({uomList: ((inventoryItems.find(v => v.recno === data.itemId) ?? null)?.subUnits ?? [])}, srNo);\n }\n }\n }\n // if(!data.taxText) {\n // handleTaxType(taxTypeList.find(v => v.value === data.taxType ?? null))\n // }\n }, [costCenterList, costLocation, workorders, inventoryItems, data.itemId, data.workOrderId, data.cLocation, data.cLocation, data.taxType])\n\n return colum === \"lineno\" ? (\n onClickRow(srNo)}>{srNo+1}
\n ) : colum === \"itemId\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{item?.name}
\n ) : colum === \"qty\" ? (\n props.allowEdit ?\n {\n let {value} = checkAndSetNumVal(e, data.qty, roundingDigit).target;\n handleInvoiceDetail({qty: (value??1), subUnitQty: parseFloat(`${value??1}`) * (data.unitFraction??1)}, srNo)\n }}\n disabled={preview}\n />\n
: onClickRow(srNo)}>{data?.qty > 0 ? data?.qty : \"\"}
\n ) : colum === \"unitFraction\" ? (\n props.allowEdit ?\n
: onClickRow(srNo)}>{data?.unitFraction > 0 ? data?.unitFraction : \"\"}
\n ) : colum === \"subUnitQty\" ? (\n props.allowEdit ?\n {\n let value = checkAndSetNumVal(e, data.subUnitQty, roundingDigit).target.value;\n handleInvoiceDetail({subUnitQty: value, transactionCurrencyRate: 0, subUnitTransactionRate: 0}, srNo)\n }}\n disabled={preview}\n />\n
: onClickRow(srNo)}>{data?.subUnitQty > 0 ? data?.subUnitQty : \"\"}
\n ) : colum === \"sRemarks\" ? (\n props.allowEdit ?\n 10 ? (data.sRemarks?.length??1)/15 : 1}\n name='sRemarks'\n placeholder='Description'\n value={data?.sRemarks??\"\"}\n onChange={e => {\n if((e.target.value??\"\").length > 4000) {\n return;\n }\n handleOnChange({target: {name: e.target.name, value: e.target.value}})\n }}\n disabled={preview}\n />\n
: <>onClickRow(srNo)} id={`tooltip-for-remarks-${srNo}`}>\n {/*{(data?.sRemarks??\"\").length > 28 ? `${data?.sRemarks.substring(0,28)}...` : data?.sRemarks}*/}\n
28 ? `${data?.sRemarks.substring(0,28)}...` : data?.sRemarks ?? '').replace(/(?:\\r\\n|\\r|\\n)/g, \"
\") }} />\n \n\n
\") }} />\n \n
28 ? `${data?.sRemarks.substring(0,28)}...` : data?.sRemarks ?? '').replace(/(?:\\r\\n|\\r|\\n)/g, \"
\") }} />\n \n \n ) : colum === 'uom' ? (\n props.allowEdit ?\n\n {}}\n onChange={e => handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={preview}\n />\n \n \n {data.discountType}\n \n \n handleOnChange(e)}>% \n handleOnChange(e)}>@ \n \n \n : handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={preview}\n /> : {\n deleteForm();\n setIsOpenModal(false)\n }} data={data} message=\"Do you want to delete this row?\" onClose={() => setIsOpenModal(false)}/>\n {props.detailsLength > 1 && (data.itemId ? setIsOpenModal(true) : deleteForm())}\n style={{height: '40px', marginRight: \"4px\"}}/>}\n \n ) : (\n <>\n )\n}\n\nexport default memo(ColumnCell)","import ColumnCell from \"./ColumnCell\";\n\n// ** Table columns\nexport const columns = (ability, symbol, UnFilteredList, transactionCurrency, transactionCurrencyRate, detailsLength, costLocations, costCenterList, inventoryItems, taxTypeList, accounts, toggleQuickAddBar, roundingDigit, preview, removeDetail, invoiceTaxType, selectedLine, onBlurTaxType, t, setSelectedLine) => {\n let columList = UnFilteredList?.filter((fItem) => {\n return fItem.isShow;\n })\n const list = columList?.map(colum => {\n\n if (colum.columnName === \"lineno\") {\n return {\n name: t(colum.columnDescription),\n maxWidth: '70px',\n minWidth: '50px',\n sortable: false,\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"itemId\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '205px',\n maxWidth: '205px',\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"unitFraction\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '100px',\n maxWidth: '100px',\n right: true,\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"uom\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '140px',\n maxWidth: '140px',\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"subUnitQty\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '100px',\n maxWidth: '100px',\n right: true,\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"qty\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '100px',\n maxWidth: '100px',\n right: true,\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"sRemarks\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '180px',\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"transactionCurrencyRate\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '100px',\n maxWidth: '100px',\n right: true,\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"subUnitTransactionRate\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '100px',\n maxWidth: '100px',\n right: true,\n // selector: (row, index) => index,\n cell: (data, index) => {\n setSelectedLine(index)\n }}\n taxTypeList={taxTypeList}/>\n }\n }\n\n if (colum.columnName === \"discountType\") {\n return {\n name: t(colum.columnDescription),\n sortable: false,\n minWidth: '140px',\n right: true,\n // selector: (row, index) => index,\n cell: (data, index) =>
\") }} />\n \n \n ) : colum === 'uom' ? (\n props.allowEdit ?\n
\n
\n : onClickRow(srNo)} style={{width: '100%', textAlign: 'left'}}>{uom?.description??\"\"}
\n ) : colum === \"transactionCurrencyRate\" ? (\n props.allowEdit ?\n\n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n handleInvoiceDetail({transactionCurrencyRateInvalid: true}, srNo)\n return;\n }\n\n let event = checkAndSetNumVal(e, data.transactionCurrencyRate, 13);\n let { value } = event.target;\n\n handleInvoiceDetail({transactionCurrencyRateInvalid: false, transactionCurrencyRate: value, subUnitTransactionRate: ((value / ((data.subUnitQty??1)/(data.qty??1)))) }, srNo)\n }}\n disabled={preview}\n />\n
\n : onClickRow(srNo)} style={{width: '100%', textAlign: 'right'}}>{data?.transactionCurrencyRate > 0 ? data?.transactionCurrencyRate : \"\"}
\n ) : colum === \"subUnitTransactionRate\" ? (\n props.allowEdit ?\n {\n if (parseFloat(e.target.value) > 99999999999 || parseFloat(e.target.value) < 0) {\n return;\n }\n let event = checkAndSetNumVal(e, data.subUnitTransactionRate, 13);\n let { value } = event.target;\n handleInvoiceDetail({subUnitTransactionRate: value, transactionCurrencyRate: ((value * (data.subUnitQty??1))/data.qty) }, srNo)\n }}\n disabled={preview}\n />
:\n onClickRow(srNo)} style={{height: 'fit-content', display: 'flex', flexDirection: 'column'}}>\n
\n ) : colum === \"discountType\" ? (\n props.allowEdit ? {data?.subUnitTransactionRate > 0 ? data?.subUnitTransactionRate : \"\"}
\nonClickRow(srNo)}>{(data?.discountVal??0) === 0 ? \"\" : `${data?.discountType === \"@\" ? data?.discountType : \"\"} ${data?.discountVal} ${data?.discountType === \"%\" ? data?.discountType : \"\"}` }
\n ) : colum === \"discountVal\" ? (\n props.allowEdit ?onClickRow(srNo)}>{data?.discountVal}
\n ) : colum === \"discountAmount\" ? (\n props.allowEdit ? handleOnChange({\n target: {\n name: e.target.name,\n value: e.target.value !== \"\" ? +e.target.value : \"\"\n }\n })}\n disabled={true}\n /> :onClickRow(srNo)}>{data?.discountAmount}
\n ) : colum === \"exAmount\" ? (\n 1 === 2 ? handleOnChangeAmount(e)}\n /> :onClickRow(srNo)}>{data?.exAmount}
\n ) : colum === \"taxType\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: 'fit-content'}}>
\n ) : colum === \"costCenter\" ? (\n onClickRow(srNo)} className='l-small-label' style={{width: 'fit-content'}}>
\n ) : colum === \"inAmount\" ? (\n onClickRow(srNo)}>{data?.inAmount > 0 ? data?.inAmount.toFixed(roundingDigit) : \"\"}
\n ) : colum === \"Action\" ? (\n <>\n