623 lines
20 KiB
JavaScript
623 lines
20 KiB
JavaScript
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import {
|
|
getSession,
|
|
dateTimeFormatChange,
|
|
validateSafeInput,
|
|
} from '../../../Services/Others';
|
|
import { Tables } from '../../../Components/Tables/Table';
|
|
import { Form } from 'antd';
|
|
import { InputField } from '../../../Components/Forms/InputField.jsx';
|
|
import Buttons from '../../../Components/Forms/Buttons.jsx';
|
|
import { DropDowns } from '../../../Components/Forms/DropDown.jsx';
|
|
import { getWholeSalePayments } from '../../../Features/WSTransaction/WSTransaction.js';
|
|
import { Messages } from '../../../Components/Notifications/Messages.jsx';
|
|
import { DatePicProd } from '../../../Components/Forms/DatePickerProduct.jsx';
|
|
import moment from 'moment';
|
|
import { GlobalLastEntryDateDtl } from '../../../Features/WholeSale/WholesaleData.js';
|
|
import { useAuth } from '../../../AuthContext.jsx';
|
|
import {
|
|
changeBreadCrumb,
|
|
getEmpAccess,
|
|
} from '../../../Features/AppPage/CenterPage.js';
|
|
import '../../../Styles/Payment/PaymentReceivedRetail/PaymentReceivedRetail.scss';
|
|
import FormHeader from '../../PageComponents/FormHeader.jsx';
|
|
import {
|
|
getEmployeeList,
|
|
getRetailTranList,
|
|
PostPaymentReceivedData,
|
|
} from '../../../Features/Payment/PaymentReceivedRetail/PaymentReceivedRetail.js';
|
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
|
import { getPreferenceData } from '../../../Features/BookingScreen/BookingData/BookingData.js';
|
|
const subDirectory = import.meta.env.BASE_URL;
|
|
const PaymentReceivedRetail = () => {
|
|
const { SadminuserAccess } = useAuth();
|
|
let SAAccessCommonMaster = SadminuserAccess?.find(
|
|
(e) => e?.MenuName === 'Payment Received'
|
|
);
|
|
const dispatch = useDispatch();
|
|
const formRef = useRef();
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const AppId = getSession('AppId');
|
|
const UserId = getSession('UserId');
|
|
const UserType = getSession('UserType');
|
|
const WSLastEntryDate = useSelector(GlobalLastEntryDateDtl);
|
|
|
|
const [page, setpage] = useState(1);
|
|
const [SelectedCustomer, setSelectedCustomer] = useState();
|
|
const [SelectedCustomerRole, setSelectedCustomerRole] = useState();
|
|
const [customer, setCustomer] = useState();
|
|
const [CustPaymentModes, setPaymentModesCust] = useState([]);
|
|
const [AjustDate, setAjustDate] = useState();
|
|
const [EmployeePaymentModes, setPaymentModesEmployee] = useState([]);
|
|
const [CustTableData, setCustTableData] = useState([]);
|
|
const [selectedPaymentMode, setSelectedPaymentMode] = useState('');
|
|
const [PaidListData, SetPaidListData] = useState([]);
|
|
const [ButtonDisabled, setButtonDisabled] = useState(false);
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [PaymentType, setPaymentType] = useState('M');
|
|
const [FilterData, setFilterData] = useState([]);
|
|
const [empData, setEmpData] = useState();
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
|
const [allowDecimal, setAllowDecimal] = useState(false);
|
|
|
|
const items = [
|
|
{
|
|
name: 'Home',
|
|
link: `${subDirectory}app-page/home`,
|
|
},
|
|
|
|
{
|
|
name: 'Payment Updates',
|
|
link: `${subDirectory}setting/payment-received-retail`,
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const PaymentCredit =
|
|
CustPaymentModes?.find((a) => a?.ConfigId === selectedPaymentMode)
|
|
?.ConfigName === 'Credit';
|
|
if (PaymentCredit) {
|
|
const SelectCustData = customer?.find(
|
|
(a) => a?.CustSuppId === SelectedCustomer
|
|
);
|
|
formRef?.current?.setFieldsValue({
|
|
Payment: SelectCustData?.NetAmount || 0,
|
|
});
|
|
}
|
|
}, [selectedPaymentMode]);
|
|
useEffect(() => {
|
|
// Get the current date in "DD-MM-YYYY" format
|
|
const currentDate = moment().format('DD-MM-YYYY');
|
|
|
|
// Call DateChange function with the current date
|
|
DateChange(null, currentDate);
|
|
}, [PaymentType]);
|
|
useEffect(() => {
|
|
if (PaidListData?.length > 0) {
|
|
if (PaymentType === 'M') {
|
|
let filterData = PaidListData?.filter(
|
|
(item) =>
|
|
item.UserRole !== 'Customer' &&
|
|
item?.OBType !== 'Y' &&
|
|
item?.BalanceType !== 'A' &&
|
|
(SelectedCustomer == null ||
|
|
SelectedCustomer == 0 ||
|
|
item?.UserId == SelectedCustomer)
|
|
);
|
|
setFilterData(filterData);
|
|
} else if (PaymentType === 'C') {
|
|
let filterData = PaidListData?.filter(
|
|
(item) =>
|
|
item.UserRole === 'Customer' &&
|
|
item?.OBType !== 'Y' &&
|
|
(SelectedCustomer == null ||
|
|
SelectedCustomer == 0 ||
|
|
item?.UserId == SelectedCustomer)
|
|
);
|
|
setFilterData(filterData);
|
|
} else if (PaymentType === 'O') {
|
|
let filterData = PaidListData?.filter(
|
|
(item) =>
|
|
item?.OBType === 'Y' &&
|
|
item?.BalanceType === 'OB' &&
|
|
(SelectedCustomer == null ||
|
|
SelectedCustomer == 0 ||
|
|
item?.UserId == SelectedCustomer)
|
|
);
|
|
setFilterData(filterData);
|
|
} else if (PaymentType == 'A') {
|
|
let filterData = PaidListData?.filter(
|
|
(item) =>
|
|
item?.BalanceType === 'A' &&
|
|
(SelectedCustomer == null ||
|
|
SelectedCustomer == 0 ||
|
|
item?.UserId == SelectedCustomer)
|
|
);
|
|
setFilterData(filterData);
|
|
}
|
|
}
|
|
}, [PaymentType, PaidListData, SelectedCustomer]);
|
|
|
|
const columns = [
|
|
{
|
|
title: 'Sl.No',
|
|
key: 'sno',
|
|
align: 'center',
|
|
width: '80px',
|
|
render: (text, object, index) => (
|
|
<a style={{ color: 'black' }}>{(page - 1) * 10 + index + 1}</a>
|
|
),
|
|
},
|
|
// {
|
|
// title: 'No',
|
|
// key: 'UniqueId',
|
|
// dataIndex: 'UniqueId',
|
|
// align: 'center',
|
|
// width: '80px',
|
|
// render: (text, object, index) => <a style={{ color: 'black' }}>{text}</a>,
|
|
// },
|
|
{
|
|
title: 'Name',
|
|
key: 'EmpFirstName',
|
|
dataIndex: 'EmpFirstName',
|
|
render: (productDetails, record) => (
|
|
<a style={{ color: 'black' }}>
|
|
{PaymentType === 'M'
|
|
? record?.UserRole === 'Admin'
|
|
? `${record?.UserShortName || record?.UserName} (Admin)`
|
|
: record?.EmpFirstName !== ''
|
|
? record?.EmpFirstName
|
|
: `${record?.UserShortName || record?.UserName} (Employee)`
|
|
: record?.UserShortName
|
|
? record?.UserShortName
|
|
: record?.UserName}
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
title: 'Date',
|
|
key: 'Date',
|
|
dataIndex: 'Date',
|
|
render: (productDetails, record) => (
|
|
<a style={{ color: 'black' }}>{dateTimeFormatChange(record?.Date)}</a>
|
|
),
|
|
},
|
|
|
|
{
|
|
title: 'Payment Type',
|
|
key: 'PaymentTypeName',
|
|
dataIndex: 'PaymentTypeName',
|
|
render: (productDetails, record) => (
|
|
<a style={{ color: 'black' }}>{record?.PaymentTypeName}</a>
|
|
),
|
|
},
|
|
|
|
{
|
|
title: 'Amount',
|
|
key: 'Amount',
|
|
dataIndex: 'Amount',
|
|
align: 'right',
|
|
render: (productDetails, record) => (
|
|
<a
|
|
style={{
|
|
color: record?.Amount < 0 ? 'red' : 'green',
|
|
}}
|
|
>
|
|
{safeRound(record?.Amount)}
|
|
</a>
|
|
),
|
|
},
|
|
];
|
|
|
|
const onChangeOption = async (e) => {
|
|
setButtonDisabled(false);
|
|
setPaymentType(e);
|
|
formRef?.current?.setFieldsValue({ Customer: null });
|
|
setSelectedCustomer(null);
|
|
setSelectedCustomerRole(null);
|
|
};
|
|
|
|
const ChangeCustomer = (e, role) => {
|
|
formRef?.current?.setFieldsValue({ Customer: e });
|
|
setSelectedCustomer(e);
|
|
setSelectedCustomerRole(role);
|
|
};
|
|
|
|
const paymentDtlfun = async () => {
|
|
let res = await dispatch(
|
|
getWholeSalePayments({ TypeName: 'Wholesale Payment Mode' })
|
|
).unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
let cashMode = res?.data?.data?.filter(
|
|
(item) => item.ConfigName !== 'Card'
|
|
);
|
|
let cashEmployee = res?.data?.data?.filter(
|
|
(item) => item.ConfigName !== 'Card' && item?.ConfigName !== 'Credit'
|
|
);
|
|
setPaymentModesCust(cashMode);
|
|
setPaymentModesEmployee(cashEmployee);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
paymentDtlfun();
|
|
TranCompltList();
|
|
getPreference();
|
|
// if (UserType === "Employee") {
|
|
// fetchApi()
|
|
// }
|
|
}, []);
|
|
useEffect(() => {
|
|
if (UserType === 'Employee') {
|
|
fetchApi();
|
|
}
|
|
}, [UserType]);
|
|
useEffect(() => {
|
|
let hasAccess = false;
|
|
|
|
if (UserType === 'Admin' || UserType === 'Super Admin') {
|
|
hasAccess = true;
|
|
} else if (UserType === 'Employee') {
|
|
hasAccess = empData?.AddAccess === 'Y';
|
|
} else if (UserType === 'Super Admin User') {
|
|
hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
|
|
}
|
|
|
|
setaddnewAccess(!hasAccess);
|
|
}, [empData, SAAccessCommonMaster, UserType]);
|
|
const fetchApi = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
EmpId: UserId,
|
|
};
|
|
let response = await dispatch(getEmpAccess(data)).unwrap();
|
|
let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
|
|
(item) => item.ConfigName === 'Payment Received'
|
|
);
|
|
|
|
setEmpData(datas?.[0]);
|
|
};
|
|
useEffect(() => {
|
|
fetchWholeSaleEmployee();
|
|
}, [EmployeePaymentModes]);
|
|
const fetchWholeSaleEmployee = async () => {
|
|
const Data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
};
|
|
const gettingTableData = await dispatch(getEmployeeList(Data)).unwrap();
|
|
if (gettingTableData?.data?.statusCode === 1) {
|
|
setCustomer(gettingTableData?.data?.data);
|
|
let EmpDefaultValue = EmployeePaymentModes?.[0];
|
|
setSelectedPaymentMode(EmpDefaultValue?.ConfigId);
|
|
} else {
|
|
setCustomer([]);
|
|
setSelectedPaymentMode('');
|
|
}
|
|
};
|
|
const getPreference = async () => {
|
|
const data = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
UserId: UserId,
|
|
};
|
|
const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
|
|
const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
|
|
(setting) =>
|
|
setting?.SettingIdName?.toLowerCase() === 'decimal' &&
|
|
setting?.SettingValue === 'Y'
|
|
);
|
|
if (decimalSetting) {
|
|
setAllowDecimal(true);
|
|
}
|
|
};
|
|
const onFinish = async (values) => {
|
|
setButtonDisabled(true);
|
|
const postData = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
UserId: values?.Customer,
|
|
Date: AjustDate,
|
|
ReceivedAmount: values?.Payment,
|
|
PaymentStatus: 'S',
|
|
UserRole: customer?.find((item) => item.UserId === SelectedCustomer)
|
|
?.RoleName,
|
|
BalanceType: 'A',
|
|
Amount: values?.Payment,
|
|
PaymentType: selectedPaymentMode,
|
|
CreatedBy: UserId,
|
|
};
|
|
|
|
console.log(postData, 'postDatapostData');
|
|
const res = await dispatch(PostPaymentReceivedData(postData)).unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
setMessageType('success');
|
|
setMessageData('Amount Added Successfully');
|
|
|
|
await fetchWholeSaleEmployee();
|
|
|
|
await TranCompltList();
|
|
await Clearfun();
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData(res?.data?.response);
|
|
}
|
|
};
|
|
|
|
const Clearfun = async () => {
|
|
setSelectedCustomer(null);
|
|
setSelectedCustomerRole(null);
|
|
// formRef?.current?.setFieldsValue({ Customer: '' });
|
|
// formRef?.current?.setFieldsValue({ Payment: 0 });
|
|
formRef.current?.resetFields(['Customer', 'Payment']);
|
|
|
|
const currentDate = moment().format('DD-MM-YYYY');
|
|
|
|
// Call DateChange function with the current date
|
|
DateChange(null, currentDate);
|
|
formRef.current?.setFieldsValue({ Date: currentDate });
|
|
};
|
|
|
|
const TranCompltList = async () => {
|
|
const Data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
UserId: UserId,
|
|
};
|
|
const gettingTableData = await dispatch(getRetailTranList(Data)).unwrap();
|
|
if (gettingTableData?.data?.statusCode === 1) {
|
|
SetPaidListData(gettingTableData?.data?.data);
|
|
setButtonDisabled(false);
|
|
} else {
|
|
SetPaidListData([]);
|
|
}
|
|
};
|
|
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
|
|
const handlePageChange = (current) => {
|
|
setpage(current);
|
|
};
|
|
const handleHoldCancel = () => {
|
|
setHold(false);
|
|
};
|
|
|
|
const handleAddCustomer = () => {
|
|
setAddCustomer(true);
|
|
};
|
|
const handleAddCustomerCancel = () => {
|
|
// fetchWholeSaleProducts();
|
|
fetchWholeSaleCustomer();
|
|
setAddCustomer(false);
|
|
};
|
|
const DateChange = async (date, dateString) => {
|
|
if (dateString) {
|
|
const Date1 = moment(dateString, ['DD-MM-YYYY']).format(
|
|
'YYYY-MM-DDTHH:mm:ss'
|
|
);
|
|
formRef.current?.setFieldsValue({ Date: Date1 });
|
|
await setAjustDate(Date1);
|
|
}
|
|
};
|
|
function safeRound(amountStr) {
|
|
if (amountStr == null) return allowDecimal ? '0.00' : '0';
|
|
|
|
const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
|
|
const num = Number(cleaned);
|
|
|
|
if (isNaN(num)) return allowDecimal ? '0.00' : '0';
|
|
|
|
return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
|
|
}
|
|
|
|
return (
|
|
<div className="pageOverAll">
|
|
<div className="userPage">
|
|
<div className="userPageContent">
|
|
<div className="formName" style={{ margin: '0 0rem' }}>
|
|
<FormHeader title={'Payment Updates'} />
|
|
</div>
|
|
<div>
|
|
<div className="PaymentReceivedRetail-Master">
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
|
|
<div className="formDiv">
|
|
<Form
|
|
style={{ width: '100%' }}
|
|
ref={formRef}
|
|
className="formDivAnt"
|
|
onFinish={onFinish}
|
|
>
|
|
<div className="OBamountOwner">
|
|
<Form.Item
|
|
name="Customer"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Employee',
|
|
},
|
|
]}
|
|
>
|
|
<div>
|
|
<DropDowns
|
|
defaultValue={SelectedCustomer}
|
|
options={[
|
|
{ value: '0', label: 'All' },
|
|
...(
|
|
customer?.map((option) => ({
|
|
value: option?.UserId,
|
|
label: option?.EmpFirstName
|
|
? `${option?.EmpFirstName} (${option?.RoleName})`
|
|
: option?.MobileNo,
|
|
})) || []
|
|
)?.sort((a, b) =>
|
|
(a.label ?? '')
|
|
?.toLowerCase()
|
|
?.localeCompare((b.label ?? '')?.toLowerCase())
|
|
),
|
|
]}
|
|
label={<label>Owner / Employee </label>}
|
|
className="field-DropDown"
|
|
onChangeFunction={(e) =>
|
|
ChangeCustomer(e, 'Employee')
|
|
}
|
|
valueData={SelectedCustomer}
|
|
alphabetfilter="No"
|
|
/>
|
|
</div>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="Payment"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: /^[0-9]*\.?[0-9]+$/,
|
|
message: 'Please enter a valid Amount',
|
|
},
|
|
{
|
|
validator: async (_, value) => {
|
|
await validateSafeInput(value); // To block HTML tags & SQL keywords
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
label={<label className="required">Amount</label>}
|
|
autocomplete="off"
|
|
inputMode="numeric"
|
|
onInput={(e) =>
|
|
(e.target.value = e.target.value.replace(
|
|
/[^0-9]/g,
|
|
''
|
|
))
|
|
}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="Date"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Enter Date',
|
|
},
|
|
]}
|
|
>
|
|
<div
|
|
className="amountreceivedDate"
|
|
style={{ width: '120px' }}
|
|
>
|
|
{/* <label style={{ fontWeight: "600" }}>Date : </label> */}
|
|
|
|
<DatePicProd
|
|
canSelectPast={true}
|
|
cancelFuture={true}
|
|
onChange={DateChange}
|
|
valueData={AjustDate}
|
|
minDate={WSLastEntryDate}
|
|
|
|
// disabled={Checked}
|
|
/>
|
|
</div>
|
|
</Form.Item>
|
|
|
|
<div style={{ display: 'flex', gap: '0.5rem' }}>
|
|
{EmployeePaymentModes.map((item) => {
|
|
return (
|
|
<div
|
|
className="saveBTNOB"
|
|
key={item.ConfigId}
|
|
style={{
|
|
backgroundColor:
|
|
item.ConfigId === selectedPaymentMode
|
|
? '#28AA3A'
|
|
: 'rgb(174 174 174)',
|
|
color:
|
|
item.ConfigId === selectedPaymentMode
|
|
? '#FFF'
|
|
: '#000',
|
|
}}
|
|
onClick={() =>
|
|
setSelectedPaymentMode(item.ConfigId)
|
|
}
|
|
>
|
|
{item.ConfigName}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="sumbitButtoProduct-entry">
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
icon={<ArrowRightOutlined />}
|
|
htmlType={true}
|
|
disabled={
|
|
SelectedCustomer == '0'
|
|
? true
|
|
: ButtonDisabled || addnewAccess
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* <div> */}
|
|
</Form>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: ' flex',
|
|
alignItems: 'center',
|
|
width: '100%',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<p className="TransactionList-title">Transaction List</p>
|
|
</div>
|
|
<div
|
|
className="AllEntryShowList"
|
|
style={{ overflow: 'scroll', scrollbarWidth: 'none' }}
|
|
>
|
|
<div className="Re-Print-table">
|
|
<Tables
|
|
columns={columns}
|
|
data={FilterData}
|
|
dataSource={FilterData}
|
|
// data={PaidListData}
|
|
// dataSource={PaidListData}
|
|
pagination={handlePageChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PaymentReceivedRetail;
|