2585 lines
77 KiB
JavaScript
2585 lines
77 KiB
JavaScript
import React, {
|
|
useEffect,
|
|
useState,
|
|
useRef,
|
|
useContext,
|
|
useCallback,
|
|
} from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import { Select, Tooltip } from "antd";
|
|
import { Form, Input, Table } from "antd";
|
|
import {
|
|
EditFilled,
|
|
DeleteFilled,
|
|
ArrowRightOutlined,
|
|
} from "@ant-design/icons";
|
|
import {
|
|
PutStockPrice,
|
|
bulkPriceUpdate,
|
|
getStockNames,
|
|
} from "../../Features/StockPriceUpdate/StockPriceUpdateMaster";
|
|
import {
|
|
dateFormatChange,
|
|
ExtractDateFormate,
|
|
getSession,
|
|
} from "../../Services/Others";
|
|
import { DefaultModal } from "../../Components/Modal/DefaultModal";
|
|
import { Tables } from "../../Components/Tables/Table";
|
|
import Buttons from "../../Components/Forms/Buttons";
|
|
import { Messages } from "../../Components/Notifications/Messages";
|
|
import {
|
|
changeBreadCrumb,
|
|
getEmpAccess,
|
|
} from "../../Features/AppPage/CenterPage.js";
|
|
import FormHeader from "../PageComponents/FormHeader";
|
|
import Search from "../../Components/Forms/Search";
|
|
import { RadioGrpButton } from "../../Components/Forms/RadioGroup.jsx";
|
|
import { useAuth } from "../../AuthContext.jsx";
|
|
import "../../Styles/OverAllStyle/OverAllStyle.scss";
|
|
import { getPreferenceData } from "../../Features/BookingScreen/BookingData/BookingData.js";
|
|
import { DropDowns } from "../../Components/Forms/DropDown.jsx";
|
|
import { FiDelete, FiUploadCloud } from "react-icons/fi";
|
|
import { CiExport } from "react-icons/ci";
|
|
import Excelupldimg from "../../Images/Excel.png";
|
|
import {
|
|
emptyExcelData,
|
|
fileInputRefSelector,
|
|
} from "../../Features/ExcelUploadPage/ExcelUploadPage.js";
|
|
const subDirectory = import.meta.env.BASE_URL;
|
|
import ExcelJS from "exceljs";
|
|
import { read, utils } from "xlsx";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { InputField } from "../../Components/Forms/InputField.jsx";
|
|
import { MdOutlineAppRegistration } from "react-icons/md";
|
|
import {
|
|
getFieldSetupData,
|
|
postFieldSetup,
|
|
} from "../../Features/ProductPage/ProductPage.js";
|
|
import {
|
|
ApplicationPreferences,
|
|
getCommonAppPreference,
|
|
} from "../../Features/BrachLogin/BranchLogin.js";
|
|
import { IoClose } from "react-icons/io5";
|
|
|
|
const StockPriceUpdate = () => {
|
|
const { SadminuserAccess } = useAuth();
|
|
let SAAccessCommonMaster = SadminuserAccess?.find(
|
|
(e) => e?.MenuName === "Price Change",
|
|
);
|
|
|
|
const ApplicationPreferenceData = useSelector(ApplicationPreferences);
|
|
const categoryId = ApplicationPreferenceData?.find(
|
|
(p) => p?.PreferredCatName?.toLowerCase() === "price change fields",
|
|
)?.PreferredCatId;
|
|
|
|
const excelCategoryId = ApplicationPreferenceData?.find(
|
|
(p) => p?.PreferredCatName?.toLowerCase() === "price change sheet fields",
|
|
)?.PreferredCatId;
|
|
|
|
const fileInputRef = useRef(fileInputRefSelector);
|
|
const excelDataRef = useRef(null);
|
|
const formRef = useRef(null);
|
|
|
|
const allowedExcelTypes = [
|
|
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", // .xlsx
|
|
"application/vnd.ms-excel", // .xls
|
|
];
|
|
|
|
const dispatch = useDispatch();
|
|
const [selectedFields, setSelectedFields] = useState([]);
|
|
const [selectedExcelFields, setSelectedExcelFields] = useState([]);
|
|
const [tableFieldPreferences, setTableFieldPreferences] = useState([]);
|
|
const [tableExcelFieldPreferences, setTableExcelFieldPreferences] = useState(
|
|
[],
|
|
);
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [StockNames, setStockNames] = useState([]);
|
|
const [ProductName, setProductName] = useState(null);
|
|
|
|
const [fieldSetup, setFieldSetup] = useState(false);
|
|
const [excelFieldSetup, setExcelFieldSetup] = useState(false);
|
|
const [StockDetails, setStockDetails] = useState([]);
|
|
const [dataSource, setDataSource] = useState([]);
|
|
const [sortedInfo, setSortedInfo] = useState({});
|
|
const [BulksortedInfo, setBulksortedInfo] = useState({});
|
|
const [searchedText, setSearchedText] = useState("");
|
|
const [BulksearchedText, setBulksearchedText] = useState("");
|
|
const [filteredInfo, setFilteredInfo] = useState({});
|
|
const [page, setpage] = useState(1);
|
|
const [Bulkchangepage, setBulkchangepage] = useState(1);
|
|
|
|
const [pageSize, setPageSize] = useState(10);
|
|
const [openEditModal, setOpenEditModal] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
const [excelModalOpen, setExcelModalOpen] = useState(false);
|
|
const [priceChangeModalOpen, setPriceChangeModalOpen] = useState(false);
|
|
const [stockVariantBased, setStockVariantBased] = useState("Yes");
|
|
const [exportLoading, setExportLoading] = useState(false);
|
|
const [fileLoading, setFileLoading] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [headers, setHeaders] = useState([]);
|
|
const [uploadedData, setUploadedData] = useState([]);
|
|
const CompId = getSession("CompId");
|
|
const BranchId = getSession("BranchId");
|
|
const AppId = getSession("AppId");
|
|
const UserId = getSession("UserId");
|
|
const UserType = getSession("UserType");
|
|
|
|
const [empData, setEmpData] = useState();
|
|
const [addnewAccess, setaddnewAccess] = useState(true);
|
|
const [RadioSelection, setRadioSelection] = useState("Single");
|
|
const [BulkProductData, setBulkProductData] = useState([]);
|
|
const [allowDecimal, setAllowDecimal] = useState(false);
|
|
const hasFieldExists = (label) =>
|
|
headers.some((h) => h.toLowerCase() === label.toLowerCase());
|
|
const hasField = (label) =>
|
|
tableFieldPreferences?.some((f) => f.label === label && f.access === "Y");
|
|
const hasExcelField = (label) =>
|
|
tableExcelFieldPreferences?.some(
|
|
(f) => f.label === label && f.access === "Y",
|
|
);
|
|
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page/home`,
|
|
},
|
|
];
|
|
|
|
const handleRemoveRecord = (index) => {
|
|
setUploadedData((prev) => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
title: "Product Name",
|
|
dataIndex: "ProductName",
|
|
key: "ProductName",
|
|
width: 180,
|
|
render: (value, record, index) => (
|
|
<p>{`${value} (${record?.Size} ${record?.UOMName})`}</p>
|
|
),
|
|
},
|
|
{
|
|
title: "Variant Name",
|
|
dataIndex: "VariantName",
|
|
key: "VariantName",
|
|
width: 180,
|
|
},
|
|
{
|
|
title: "Batch No",
|
|
dataIndex: "BatchRef",
|
|
key: "BatchRef",
|
|
width: 180,
|
|
},
|
|
...(hasFieldExists("Stock")
|
|
? [
|
|
{
|
|
title: "Stock",
|
|
dataIndex: "Stock",
|
|
key: "Stock",
|
|
width: 80,
|
|
},
|
|
]
|
|
: []),
|
|
...(hasFieldExists("Stock Date")
|
|
? [
|
|
{
|
|
title: "Stock Date",
|
|
dataIndex: "StockDate",
|
|
key: "StockDate",
|
|
width: 80,
|
|
},
|
|
]
|
|
: []),
|
|
...(hasFieldExists("Old MRP")
|
|
? [
|
|
{
|
|
title: "Old MRP",
|
|
dataIndex: "OldMRP",
|
|
key: "OldMRP",
|
|
width: 100,
|
|
},
|
|
]
|
|
: []),
|
|
...(hasFieldExists("Old SP")
|
|
? [
|
|
{
|
|
title: "Old SP",
|
|
dataIndex: "OldSP",
|
|
key: "OldSP",
|
|
width: 100,
|
|
},
|
|
]
|
|
: []),
|
|
...(hasFieldExists("Old Wholesale Price")
|
|
? [
|
|
{
|
|
title: "Old Wholesale Price",
|
|
dataIndex: "OldWholeSalePrice",
|
|
key: "OldWholeSalePrice",
|
|
width: 140,
|
|
},
|
|
]
|
|
: []),
|
|
|
|
// ✅ EDITABLE
|
|
{
|
|
title: "New MRP",
|
|
dataIndex: "NewMRP",
|
|
key: "NewMRP",
|
|
width: 120,
|
|
render: (_, record, index) => (
|
|
<Form.Item name={`NewMRP${record.localId}`}>
|
|
<Input
|
|
placeholder="New MRP"
|
|
inputMode="decimal"
|
|
onChange={(e) =>
|
|
handlePriceChange(index, "NewMRP", e.target.value, record.localId)
|
|
}
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, "");
|
|
if (cleanedValue.startsWith(".")) {
|
|
cleanedValue = "0" + cleanedValue;
|
|
}
|
|
const parts = cleanedValue.split(".");
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join("")}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
),
|
|
},
|
|
{
|
|
title: "New SP",
|
|
dataIndex: "NewSellPrice",
|
|
key: "NewSellPrice",
|
|
width: 120,
|
|
render: (_, record, index) => (
|
|
<Form.Item
|
|
name={`NewSellPrice${record.localId}`}
|
|
validateTrigger={["onChange", "onBlur"]}
|
|
rules={[
|
|
({ getFieldValue }) => ({
|
|
validator(_, value) {
|
|
const mrp = getFieldValue(`NewMRP${record.localId}`);
|
|
|
|
if (mrp === undefined || mrp === null || mrp === "") {
|
|
return Promise.resolve();
|
|
}
|
|
|
|
const numMRP = Number(mrp);
|
|
const numSP =
|
|
value === undefined || value === null || value === ""
|
|
? null
|
|
: Number(value);
|
|
|
|
if (numSP === null) {
|
|
return Promise.reject(
|
|
new Error("New SP is required when New MRP is provided"),
|
|
);
|
|
}
|
|
|
|
if (numSP > numMRP) {
|
|
return Promise.reject(
|
|
new Error("New SP cannot be greater than New MRP"),
|
|
);
|
|
}
|
|
|
|
return Promise.resolve();
|
|
},
|
|
}),
|
|
]}
|
|
>
|
|
<Input
|
|
placeholder="New SP"
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, "");
|
|
const parts = cleanedValue.split(".");
|
|
if (cleanedValue.startsWith(".")) {
|
|
cleanedValue = "0" + cleanedValue;
|
|
}
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join("")}`
|
|
: cleanedValue;
|
|
}}
|
|
onChange={(e) => {
|
|
{
|
|
handlePriceChange(
|
|
index,
|
|
"NewSellPrice",
|
|
e.target.value,
|
|
record.localId,
|
|
);
|
|
excelDataRef.current
|
|
?.validateFields([`NewSellPrice${record.localId}`])
|
|
.catch(() => { });
|
|
}
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
),
|
|
},
|
|
...(hasFieldExists("New Wholesale Price")
|
|
? [
|
|
{
|
|
title: "New Wholesale Price",
|
|
dataIndex: "NewWholeSalePrice",
|
|
key: "NewWholeSalePrice",
|
|
width: 160,
|
|
render: (value, record, index) => (
|
|
<Form.Item name={`NewWholeSalePrice${record?.localId}`}>
|
|
<Input
|
|
onChange={(e) =>
|
|
handlePriceChange(
|
|
index,
|
|
"NewWholeSalePrice",
|
|
e.target.value,
|
|
record.localId,
|
|
)
|
|
}
|
|
placeholder="New Wholesale"
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
let cleanedValue = e.target.value.replace(/[^0-9.]/g, "");
|
|
const parts = cleanedValue.split(".");
|
|
if (cleanedValue.startsWith(".")) {
|
|
cleanedValue = "0" + cleanedValue;
|
|
}
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join("")}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
),
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
title: "Action",
|
|
key: "action",
|
|
width: 80,
|
|
align: "center",
|
|
render: (_, record, index) => (
|
|
<DeleteFilled
|
|
style={{
|
|
color: "#EF4443",
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => handleRemoveRecord(index)}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
getPreference();
|
|
// if (UserType === "Employee") {
|
|
// fetchApi()
|
|
// }
|
|
}, []);
|
|
useEffect(() => {
|
|
dispatch(getCommonAppPreference(AppId));
|
|
}, [AppId, dispatch]);
|
|
useEffect(() => {
|
|
if (UserType === "Employee") {
|
|
fetchApi();
|
|
}
|
|
}, [UserType]);
|
|
|
|
useEffect(() => {
|
|
getFieldSetup();
|
|
}, [categoryId]);
|
|
|
|
useEffect(() => {
|
|
getExcelFieldSetup();
|
|
}, [excelCategoryId]);
|
|
|
|
const getFieldSetup = async () => {
|
|
try {
|
|
const response = await dispatch(
|
|
getFieldSetupData({ AppId, CompId, BranchId, categoryId, Type: "GB" }),
|
|
).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
console.log(response?.data?.data?.[0]?.ConfigDtl, "Field Setup Data");
|
|
setSelectedFields(
|
|
response?.data?.data?.[0]?.ConfigDtl?.filter(
|
|
(c) => c.ConfigId && c.Access === "Y",
|
|
)?.map((c) => c.ConfigId) || [],
|
|
);
|
|
setTableFieldPreferences(
|
|
response?.data?.data?.[0]?.ConfigDtl?.map((c) => ({
|
|
value: c.ConfigId,
|
|
label: c.ConfigName,
|
|
access: c.Access,
|
|
})) || [],
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching field setup:", error);
|
|
}
|
|
};
|
|
|
|
const getExcelFieldSetup = async () => {
|
|
try {
|
|
const response = await dispatch(
|
|
getFieldSetupData({
|
|
AppId,
|
|
CompId,
|
|
BranchId,
|
|
categoryId: excelCategoryId,
|
|
Type: "GB",
|
|
}),
|
|
).unwrap();
|
|
if (response?.data?.statusCode === 1) {
|
|
console.log(response?.data?.data?.[0]?.ConfigDtl, "Field Setup Data");
|
|
setSelectedExcelFields(
|
|
response?.data?.data?.[0]?.ConfigDtl?.filter(
|
|
(c) => c.ConfigId && c.Access === "Y",
|
|
)?.map((c) => c.ConfigId) || [],
|
|
);
|
|
setTableExcelFieldPreferences(
|
|
response?.data?.data?.[0]?.ConfigDtl?.map((c) => ({
|
|
value: c.ConfigId,
|
|
label: c.ConfigName,
|
|
access: c.Access,
|
|
})) || [],
|
|
);
|
|
}
|
|
} catch (error) {
|
|
console.error("Error fetching field setup:", error);
|
|
}
|
|
};
|
|
|
|
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]);
|
|
|
|
useEffect(() => {
|
|
if (uploadedData?.length) {
|
|
setFormValuesFromExtractedData(uploadedData);
|
|
} else {
|
|
excelDataRef?.current?.resetFields();
|
|
}
|
|
}, [uploadedData]);
|
|
|
|
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 === "Price Change",
|
|
);
|
|
setEmpData(datas?.[0]);
|
|
};
|
|
|
|
const EditableContext = React.createContext(null);
|
|
const EditableRow = ({ index, ...props }) => {
|
|
const [form] = Form.useForm();
|
|
return (
|
|
<Form form={form} component={false}>
|
|
<EditableContext.Provider value={form}>
|
|
<tr {...props} />
|
|
</EditableContext.Provider>
|
|
</Form>
|
|
);
|
|
};
|
|
const BulkEditableRow = ({ index, ...props }) => {
|
|
const [form] = Form.useForm();
|
|
return (
|
|
<Form form={form} component={false}>
|
|
<EditableContext.Provider value={form}>
|
|
<tr {...props} />
|
|
</EditableContext.Provider>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
const EditableCell = ({
|
|
title,
|
|
editable,
|
|
children,
|
|
dataIndex,
|
|
record,
|
|
handleSave,
|
|
...restProps
|
|
}) => {
|
|
const [editing, setEditing] = useState(false);
|
|
const inputRef = useRef(null);
|
|
const form = useContext(EditableContext);
|
|
|
|
useEffect(() => {
|
|
if (editing) {
|
|
inputRef?.current?.focus();
|
|
}
|
|
}, [editing]);
|
|
|
|
const toggleEdit = () => {
|
|
setEditing(!editing);
|
|
|
|
form.setFieldsValue({
|
|
[dataIndex]: record[dataIndex],
|
|
});
|
|
};
|
|
|
|
const save = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
toggleEdit();
|
|
handleSave({
|
|
...record,
|
|
...values,
|
|
});
|
|
} catch (errInfo) {
|
|
console.log("Save failed:", errInfo);
|
|
}
|
|
};
|
|
|
|
let childNode = children;
|
|
|
|
if (editable) {
|
|
childNode = editing ? (
|
|
<Form.Item
|
|
style={{
|
|
margin: 0,
|
|
}}
|
|
name={dataIndex}
|
|
rules={[
|
|
{
|
|
pattern: /^(?!0$)(\d+)(\.\d{1,2})?$/,
|
|
message: "Invalid format (Max 2 decimals, No zero)",
|
|
},
|
|
{
|
|
validator: (_, value) =>
|
|
value?.length > 10
|
|
? Promise.reject("Max 10 characters allowed")
|
|
: Promise.resolve(),
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
className="editable-table-input"
|
|
ref={inputRef}
|
|
onPressEnter={save}
|
|
onBlur={save}
|
|
// onMouseLeave={save}
|
|
value={
|
|
Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
|
|
}
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
const cleanedValue = e.target.value.replace(/[^0-9.]/g, "");
|
|
const parts = cleanedValue.split(".");
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join("")}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
<div className="editable-cell-value-wrap" onClick={toggleEdit}>
|
|
{/* {dataIndex === 'CurrentAmt' && Array.isArray(record[dataIndex])
|
|
? record[dataIndex]?.map((item, index) => (
|
|
<span key={index}>
|
|
{item.CurrentAmt + '-' + item.CurrentAmt}
|
|
</span>
|
|
))
|
|
: children} */}
|
|
|
|
<Input
|
|
ref={inputRef}
|
|
className="editable-table-input"
|
|
onPressEnter={save}
|
|
onBlur={save}
|
|
value={
|
|
Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <td {...restProps}>{childNode}</td>;
|
|
};
|
|
const BulkEditableCell = ({
|
|
title,
|
|
editable,
|
|
children,
|
|
dataIndex,
|
|
record,
|
|
handleSave,
|
|
...restProps
|
|
}) => {
|
|
const [editing, setEditing] = useState(false);
|
|
const inputRef = useRef(null);
|
|
const form = useContext(EditableContext);
|
|
|
|
useEffect(() => {
|
|
if (editing) {
|
|
inputRef?.current?.focus();
|
|
}
|
|
}, [editing]);
|
|
|
|
const toggleEdit = () => {
|
|
setEditing(!editing);
|
|
|
|
form.setFieldsValue({
|
|
[dataIndex]: record[dataIndex],
|
|
});
|
|
};
|
|
|
|
const Bulksave = async () => {
|
|
try {
|
|
const values = await form.validateFields();
|
|
toggleEdit();
|
|
handleBulkSave({
|
|
...record,
|
|
...values,
|
|
});
|
|
} catch (errInfo) {
|
|
console.log("Save failed:", errInfo);
|
|
}
|
|
};
|
|
|
|
let childNode = children;
|
|
|
|
if (editable) {
|
|
childNode = editing ? (
|
|
<Form.Item
|
|
style={{
|
|
margin: 0,
|
|
}}
|
|
name={dataIndex}
|
|
rules={[
|
|
{
|
|
pattern: /^(?!0$)(\d+)(\.\d{1,2})?$/,
|
|
message: "Invalid format (Max 2 decimals, No zero)",
|
|
},
|
|
{
|
|
validator: (_, value) =>
|
|
value?.length > 10
|
|
? Promise.reject("Max 10 characters allowed")
|
|
: Promise.resolve(),
|
|
},
|
|
]}
|
|
>
|
|
<Input
|
|
ref={inputRef}
|
|
onPressEnter={Bulksave}
|
|
onBlur={Bulksave}
|
|
// onMouseLeave={Bulksave}
|
|
value={
|
|
Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
|
|
}
|
|
inputMode="decimal"
|
|
onInput={(e) => {
|
|
const cleanedValue = e.target.value.replace(/[^0-9.]/g, "");
|
|
const parts = cleanedValue.split(".");
|
|
e.target.value =
|
|
parts.length > 2
|
|
? `${parts[0]}.${parts.slice(1).join("")}`
|
|
: cleanedValue;
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
) : (
|
|
<div className="editable-cell-value-wrap" onClick={toggleEdit}>
|
|
{/* {dataIndex === "CurrentAmt" && Array.isArray(record[dataIndex])
|
|
? record[dataIndex]?.map((item, index) => (
|
|
<span key={index}>
|
|
{item.CurrentAmt + "-" + item.CurrentAmt}
|
|
</span>
|
|
))
|
|
: children} */}
|
|
<Input
|
|
ref={inputRef}
|
|
onPressEnter={Bulksave}
|
|
onBlur={Bulksave}
|
|
value={
|
|
Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return <td {...restProps}>{childNode}</td>;
|
|
};
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
const getPreference = async () => {
|
|
const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
|
|
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 fetchData = async () => {
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
AppId: AppId,
|
|
};
|
|
|
|
let res = await dispatch(getStockNames(data)).unwrap();
|
|
const stockNamesWithKeys = res?.data?.data?.map((stockName) => ({
|
|
...stockName,
|
|
stockDetails: stockName?.stockDetails?.map((item, index) => ({
|
|
...item,
|
|
key: `${stockName.ProdId}_${index}`,
|
|
})),
|
|
}));
|
|
|
|
setStockNames(stockNamesWithKeys);
|
|
const flattenedArray = res?.data?.data?.flatMap((product) =>
|
|
product.stockDetails.map((detail) => ({
|
|
ProdName: product.ProdName,
|
|
InwardDtlId: detail.InwardDtlId,
|
|
InwardDate: detail.InwardDate,
|
|
ExpDate: detail.ExpDate,
|
|
BalanceQty: detail.BalanceQty,
|
|
MRP: detail.MRP,
|
|
SellPrice: detail.SellPrice,
|
|
ProdId: product.ProdId,
|
|
Size: product.Size,
|
|
StockAvailable: product.StockAvailable,
|
|
CompId: product.CompId,
|
|
BranchId: product.BranchId,
|
|
AppId: product.AppId,
|
|
UOM: product.UOM,
|
|
UOMName: product.UOMName,
|
|
WhSalePrice: detail?.WhSalePrice,
|
|
ProdVariantName: detail?.ProdVariantName,
|
|
BatchRef: detail?.BatchRef,
|
|
key: `${product.ProdId}_${detail.InwardDtlId}`,
|
|
})),
|
|
);
|
|
setBulkProductData(flattenedArray);
|
|
};
|
|
|
|
const actionsFormatter = async (row) => {
|
|
setOpenEditModal(true);
|
|
setDataSource([row]);
|
|
};
|
|
|
|
const handlePriceChange = (rowIndex, field, value, localId) => {
|
|
const numValue = value ? parseFloat(value) : null;
|
|
|
|
setUploadedData((prev) => {
|
|
const updated = [...prev];
|
|
const currentRow = { ...updated[rowIndex] };
|
|
|
|
// If changing New MRP, clear New SP
|
|
if (field === "NewMRP") {
|
|
currentRow.NewSellPrice = null;
|
|
excelDataRef.current?.setFieldsValue({
|
|
[`NewSellPrice${localId}`]: null,
|
|
});
|
|
}
|
|
|
|
currentRow[field] = numValue;
|
|
updated[rowIndex] = currentRow;
|
|
return updated;
|
|
});
|
|
|
|
// Validate New SP against New MRP
|
|
if (field === "NewSellPrice" && numValue) {
|
|
const currentRow = uploadedData[rowIndex];
|
|
const newMRP = currentRow?.NewMRP;
|
|
|
|
if (newMRP && numValue > newMRP) {
|
|
setMessageType("error");
|
|
setMessageData("New SP cannot be greater than New MRP");
|
|
return;
|
|
}
|
|
}
|
|
|
|
excelDataRef.current?.setFieldsValue({
|
|
[`${field}${localId}`]: numValue,
|
|
});
|
|
};
|
|
|
|
const statusFormatter = async (row) => {
|
|
const updatedData = StockDetails?.filter(
|
|
(item) => item?.InwardDtlId !== row?.InwardDtlId,
|
|
);
|
|
setStockDetails(updatedData);
|
|
};
|
|
|
|
let tableValue = StockNames?.[0]?.stockDetails;
|
|
let DataSource = StockNames?.map((name, index) => ({
|
|
value: index + 1,
|
|
label: name?.ProdName + "(" + (name?.Size + " " + name?.UOMName) + ")",
|
|
ProdId: name?.ProdId,
|
|
stockDetails: name?.stockDetails,
|
|
Quantity: name?.Size,
|
|
QuantityName: name?.UOMName,
|
|
ExpDate: name.stockDetails?.[0]?.ExpDate,
|
|
}));
|
|
|
|
useEffect(() => {
|
|
setDataSource(tableValue);
|
|
}, [tableValue]);
|
|
|
|
const handleSave = (row) => {
|
|
if (row?.CurrentAmt && row?.CurrentMRP) {
|
|
if (parseFloat(row?.CurrentMRP) >= parseFloat(row?.CurrentAmt)) {
|
|
const newData = StockDetails?.map((item) => {
|
|
return item.key === row.key ? { ...item, ...row } : item;
|
|
});
|
|
const index = newData?.findIndex((item) => row.key === item.key);
|
|
const item = newData[index];
|
|
newData?.splice(index, 1, {
|
|
...item,
|
|
...row,
|
|
});
|
|
setStockDetails(newData);
|
|
} else {
|
|
setMessageType("error");
|
|
setMessageData("MRP is must be greater than or equal to selling price");
|
|
}
|
|
} else {
|
|
const newData = StockDetails?.map((item) => {
|
|
return item.key === row.key ? { ...item, ...row } : item;
|
|
});
|
|
const index = newData?.findIndex((item) => row.key === item.key);
|
|
const item = newData[index];
|
|
newData?.splice(index, 1, {
|
|
...item,
|
|
...row,
|
|
});
|
|
setStockDetails(newData);
|
|
}
|
|
};
|
|
const handleBulkSave = (row) => {
|
|
if (row?.CurrentAmt && row?.CurrentMRP) {
|
|
if (parseFloat(row?.CurrentMRP) >= parseFloat(row?.CurrentAmt)) {
|
|
const newData = BulkProductData?.map((item) => {
|
|
return item.key === row.key ? { ...item, ...row } : item;
|
|
});
|
|
const index = newData?.findIndex((item) => row.key === item.key);
|
|
const item = newData[index];
|
|
newData?.splice(index, 1, {
|
|
...item,
|
|
...row,
|
|
});
|
|
setBulkProductData(newData);
|
|
} else {
|
|
setMessageType("error");
|
|
setMessageData(
|
|
"MRP is must be greater than or equal to selling price",
|
|
);
|
|
}
|
|
} else {
|
|
const newData = BulkProductData?.map((item) => {
|
|
return item.key === row.key ? { ...item, ...row } : item;
|
|
});
|
|
const index = newData?.findIndex((item) => row.key === item.key);
|
|
const item = newData[index];
|
|
newData?.splice(index, 1, {
|
|
...item,
|
|
...row,
|
|
});
|
|
setBulkProductData(newData);
|
|
}
|
|
};
|
|
const components = {
|
|
body: {
|
|
row: EditableRow,
|
|
cell: EditableCell,
|
|
},
|
|
};
|
|
const BulkComponents = {
|
|
body: {
|
|
row: BulkEditableRow,
|
|
cell: BulkEditableCell,
|
|
},
|
|
};
|
|
|
|
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();
|
|
}
|
|
|
|
const columns2 = [
|
|
{
|
|
title: "Sl.No",
|
|
align: "center",
|
|
key: "sno",
|
|
width: "60px",
|
|
render: (text, object, index) => (
|
|
<a style={{ color: "black" }}>{index + 1}</a>
|
|
),
|
|
},
|
|
{
|
|
title: "Product Name",
|
|
dataIndex: "ProdName",
|
|
key: "ProdName",
|
|
width: "20%",
|
|
filteredValue: [searchedText],
|
|
onFilter: (value, record) => {
|
|
return String(record.ProdName)
|
|
?.toLowerCase()
|
|
.includes(value?.toLowerCase());
|
|
},
|
|
sorter: (a, b) => a?.ProdName?.localeCompare(b.ProdName),
|
|
sortOrder: sortedInfo.columnKey === "ProdName" ? sortedInfo.order : null,
|
|
ellipsis: true,
|
|
|
|
render: (_, record) => (
|
|
<span>
|
|
{record.ProdName} ({record.UOM} {record.UOMName})
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
title: "stock Date",
|
|
dataIndex: "InwardDate",
|
|
key: "InwardDate",
|
|
align: "right",
|
|
width: "150px",
|
|
render: (InwardDate) =>
|
|
InwardDate !== null ? ExtractDateFormate(InwardDate) : "-",
|
|
},
|
|
{
|
|
title: "Old MRP",
|
|
dataIndex: "MRP",
|
|
key: "MRP",
|
|
align: "right",
|
|
render: (MRP) => (safeRound(MRP) !== null ? safeRound(MRP) : "-"),
|
|
},
|
|
|
|
{
|
|
title: "Old Price",
|
|
dataIndex: "SellPrice",
|
|
key: "SellPrice",
|
|
align: "right",
|
|
render: (SellPrice) =>
|
|
safeRound(SellPrice) !== null ? safeRound(SellPrice) : "-",
|
|
},
|
|
{
|
|
title: "New MRP",
|
|
dataIndex: "CurrentMRP",
|
|
key: "CurrentMRP",
|
|
align: "right",
|
|
editable: true,
|
|
render: (text, record) => <p>{text ? text : "Enter MRP"}</p>,
|
|
width: 100,
|
|
},
|
|
{
|
|
title: "New SP",
|
|
dataIndex: "CurrentAmt",
|
|
key: "CurrentAmt",
|
|
align: "right",
|
|
editable: true,
|
|
render: (text, record) => <p>{text ? text : "Enter Price"}</p>,
|
|
width: 100,
|
|
},
|
|
|
|
{
|
|
title: "Action",
|
|
dataIndex: "SellPrice",
|
|
key: "SellPrice",
|
|
align: "center",
|
|
width: "100px",
|
|
render: (_, record, index) => (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
columnGap: "1rem",
|
|
}}
|
|
>
|
|
<DeleteFilled
|
|
style={{ color: "#FF4D4F" }}
|
|
onClick={() => statusFormatter(record, index)}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
const BulkPricechangeColumns = [
|
|
{
|
|
title: "Sl.No",
|
|
align: "center",
|
|
key: "sno",
|
|
width: "50px",
|
|
render: (text, object, index) => (
|
|
<a style={{ color: "black" }}>
|
|
{(Bulkchangepage - 1) * 10 + index + 1}
|
|
</a>
|
|
),
|
|
},
|
|
{
|
|
title: "Name",
|
|
dataIndex: "ProdName",
|
|
key: "ProdName",
|
|
width: "20%",
|
|
filteredValue: [BulksearchedText],
|
|
onFilter: (value, record) => {
|
|
return String(record.ProdName)
|
|
?.toLowerCase()
|
|
.includes(value?.toLowerCase());
|
|
},
|
|
sorter: (a, b) => a?.ProdName?.localeCompare(b.ProdName),
|
|
sortOrder:
|
|
BulksortedInfo.columnKey === "ProdName" ? BulksortedInfo.order : null,
|
|
ellipsis: true,
|
|
render: (_, record) => (
|
|
<span>
|
|
{record.ProdName} ({record.Size} {record.UOMName})
|
|
</span>
|
|
),
|
|
},
|
|
{
|
|
title: "Variant Name",
|
|
dataIndex: "ProdVariantName",
|
|
key: "ProdVariantName",
|
|
align: "left",
|
|
width: "120px",
|
|
},
|
|
{
|
|
title: "Batch No",
|
|
dataIndex: "BatchRef",
|
|
key: "BatchRef",
|
|
align: "left",
|
|
width: "120px",
|
|
},
|
|
...(hasField("Stock Date")
|
|
? [
|
|
{
|
|
title: "stock Date",
|
|
dataIndex: "InwardDate",
|
|
key: "InwardDate",
|
|
align: "center",
|
|
width: "100px",
|
|
render: (InwardDate) =>
|
|
InwardDate !== null ? ExtractDateFormate(InwardDate) : "-",
|
|
},
|
|
]
|
|
: []),
|
|
...(hasField("Expiry Date")
|
|
? [
|
|
{
|
|
title: "Exp date",
|
|
dataIndex: "ExpDate",
|
|
key: "ExpDate",
|
|
align: "center",
|
|
width: "100px",
|
|
render: (ExpDate) =>
|
|
ExpDate !== null ? ExtractDateFormate(ExpDate) : "-",
|
|
},
|
|
]
|
|
: []),
|
|
...(hasField("Stock")
|
|
? [
|
|
|
|
{
|
|
title: "stock",
|
|
dataIndex: "BalanceQty",
|
|
key: "BalanceQty",
|
|
align: "right",
|
|
width: "60px",
|
|
render: (BalanceQty) => (BalanceQty !== null ? BalanceQty : "-"),
|
|
},
|
|
]
|
|
: []),
|
|
...(hasField("Old MRP")
|
|
? [
|
|
{
|
|
title: "Old MRP",
|
|
dataIndex: "MRP",
|
|
key: "MRP",
|
|
align: "right",
|
|
width: "70px",
|
|
render: (MRP) => (safeRound(MRP) !== null ? safeRound(MRP) : "-"),
|
|
},
|
|
]
|
|
: []),
|
|
...(hasField("Old SP")
|
|
? [
|
|
{
|
|
title: "Old SP",
|
|
dataIndex: "SellPrice",
|
|
key: "SellPrice",
|
|
align: "right",
|
|
width: "70px",
|
|
render: (SellPrice) =>
|
|
safeRound(SellPrice) !== null ? safeRound(SellPrice) : "-",
|
|
},
|
|
]
|
|
: []),
|
|
...(hasField("Old Wholesale Price")
|
|
? [
|
|
{
|
|
title: "Old Wholesale Price",
|
|
dataIndex: "WhSalePrice",
|
|
key: "WhSalePrice",
|
|
align: "right",
|
|
width: "120px",
|
|
render: (WhSalePrice) =>
|
|
safeRound(WhSalePrice) !== null ? safeRound(WhSalePrice) : "-",
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
title: "New MRP",
|
|
dataIndex: "CurrentMRP",
|
|
key: "CurrentMRP",
|
|
align: "center",
|
|
with: "4rem",
|
|
editable: true,
|
|
render: (text, record) => <p>{text ? text : "Enter MRP"}</p>,
|
|
width: 100,
|
|
},
|
|
{
|
|
title: "New SP",
|
|
dataIndex: "CurrentAmt",
|
|
key: "CurrentAmt",
|
|
align: "center",
|
|
with: "4rem",
|
|
editable: true,
|
|
render: (text, record) => <p>{text ? text : "Enter Price"}</p>,
|
|
width: 100,
|
|
},
|
|
...(hasField("New Wholesale Price")
|
|
? [
|
|
{
|
|
title: "New Wholesale Price",
|
|
dataIndex: "CurrentWhAmt",
|
|
key: "CurrentWhAmt",
|
|
align: "center",
|
|
with: "4rem",
|
|
editable: true,
|
|
render: (text, record) => (
|
|
<p>{text ? text : "Enter Wholesale Price"}</p>
|
|
),
|
|
width: 120,
|
|
},
|
|
]
|
|
: []),
|
|
];
|
|
|
|
const HandleStockNames = (e, option) => {
|
|
const newStockDetails = option?.stockDetails || [];
|
|
// Check if any of the new products already exist in StockDetails
|
|
setStockDetails((prevStockDetails) => {
|
|
const existingInwardDtlIds = new Set(
|
|
prevStockDetails?.map((item) => item.InwardDtlId),
|
|
);
|
|
|
|
const uniqueNewStockDetails = newStockDetails
|
|
?.filter((item) => !existingInwardDtlIds.has(item.InwardDtlId))
|
|
?.map((detail) => ({
|
|
...detail,
|
|
UOMName: option?.QuantityName,
|
|
UOM: option?.Quantity,
|
|
}));
|
|
|
|
return [...prevStockDetails, ...uniqueNewStockDetails];
|
|
});
|
|
|
|
setProductName(option?.label);
|
|
};
|
|
// const handleCancel = () => {
|
|
// setOpen(false);
|
|
// setOpenEditModal(false);
|
|
// };
|
|
// const HandleSubmit = () => {
|
|
// const newStockDetails = dataSource || [];
|
|
// const filteredCurrentAmtData = newStockDetails?.filter(
|
|
// (item) =>
|
|
// item.CurrentAmt !== undefined &&
|
|
// item.CurrentAmt !== null &&
|
|
// item.CurrentMRP !== undefined &&
|
|
// item.CurrentMRP !== null
|
|
// );
|
|
// if (filteredCurrentAmtData?.length > 0) {
|
|
// setStockDetails((prevStockDetails) => {
|
|
// const existingInwardDtlIds = new Set(
|
|
// prevStockDetails?.map((item) => item.InwardDtlId)
|
|
// );
|
|
// const uniqueNewStockDetails = filteredCurrentAmtData?.filter(
|
|
// (item) => !existingInwardDtlIds.has(item.InwardDtlId)
|
|
// );
|
|
|
|
// let beforeFinal = [...prevStockDetails, ...uniqueNewStockDetails];
|
|
// const existingInwardDtlIds2 = new Set(
|
|
// filteredCurrentAmtData?.map((item) => item.InwardDtlId)
|
|
// );
|
|
// const uniqueNewStockDetails2 = beforeFinal?.filter(
|
|
// (item) => !existingInwardDtlIds2.has(item.InwardDtlId)
|
|
// );
|
|
// return [...filteredCurrentAmtData, ...uniqueNewStockDetails2];
|
|
// });
|
|
// setOpen(false);
|
|
// } else {
|
|
// setMessageType('error');
|
|
// setMessageData('Please give all details');
|
|
// }
|
|
// };
|
|
|
|
const HandlePutData = async () => {
|
|
if (RadioSelection == "Bulk") {
|
|
const filteredCurrentAmtData = BulkProductData?.filter(
|
|
(item) =>
|
|
(item.CurrentAmt !== undefined &&
|
|
item.CurrentAmt !== null &&
|
|
item.CurrentAmt !== "" &&
|
|
item.CurrentMRP !== undefined &&
|
|
item.CurrentMRP !== null &&
|
|
item.CurrentMRP !== "") ||
|
|
(item.CurrentWhAmt !== undefined &&
|
|
item.CurrentWhAmt !== null &&
|
|
item.CurrentWhAmt !== ""),
|
|
);
|
|
const hasInvalidData = BulkProductData.every((item) => {
|
|
const isAbsent = item.CurrentAmt == null && item.CurrentMRP == null;
|
|
|
|
const isPresent = item.CurrentAmt != null && item.CurrentMRP != null;
|
|
|
|
return isAbsent || isPresent;
|
|
});
|
|
|
|
if (filteredCurrentAmtData?.length > 0 && hasInvalidData) {
|
|
let Postdata = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
Type: "Variant",
|
|
ProductDetails: filteredCurrentAmtData?.map((item) => ({
|
|
ProdId: item?.ProdId,
|
|
NewMRP: item?.CurrentMRP,
|
|
NewSellPrice: item?.CurrentAmt,
|
|
AdjComment: "string",
|
|
InwardDtlId: item?.InwardDtlId,
|
|
NewWholeSalePrice: item.CurrentWhAmt,
|
|
})),
|
|
};
|
|
|
|
let response = await dispatch(bulkPriceUpdate(Postdata)).unwrap();
|
|
|
|
if (response?.data?.statusCode == 1) {
|
|
setProductName();
|
|
setMessageType("success");
|
|
setMessageData(response?.data?.response);
|
|
fetchData();
|
|
setBulksearchedText("");
|
|
setStockDetails([]);
|
|
setBulkProductData([]);
|
|
} else {
|
|
setMessageType("error");
|
|
setMessageData(response?.data?.response);
|
|
}
|
|
} else {
|
|
setMessageType("error");
|
|
setMessageData("Please give all details");
|
|
}
|
|
} else {
|
|
const filteredStockDetails = StockDetails?.filter(
|
|
(item) =>
|
|
item?.CurrentMRP &&
|
|
item?.CurrentMRP !== "" &&
|
|
item?.CurrentAmt &&
|
|
item?.CurrentAmt !== "",
|
|
);
|
|
|
|
if (filteredStockDetails?.length === 0) {
|
|
setMessageType("error");
|
|
setMessageData("Please enter price details for at least one product");
|
|
return;
|
|
}
|
|
|
|
let data = {
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
ProductDetails: filteredStockDetails?.map((item) => ({
|
|
ProdId: item?.ProdId,
|
|
MRP: item?.CurrentMRP,
|
|
SellPrice: item?.CurrentAmt,
|
|
AdjComment: "string",
|
|
InwardDtlId: item?.InwardDtlId,
|
|
})),
|
|
UpdatedBy: 1,
|
|
AppId: AppId,
|
|
};
|
|
|
|
let response = await dispatch(PutStockPrice(data)).unwrap();
|
|
let res = await dispatch(getStockNames(data)).unwrap();
|
|
setStockNames(res?.data?.data);
|
|
if (response?.data?.statusCode == 1) {
|
|
setProductName();
|
|
setMessageType("success");
|
|
setMessageData(response?.data?.response);
|
|
fetchData();
|
|
} else {
|
|
setMessageType("error");
|
|
setMessageData(response?.data?.response);
|
|
}
|
|
setStockDetails([]);
|
|
}
|
|
};
|
|
|
|
// const HandleEditSubmit = () => {
|
|
// let newStockDetails = dataSource || [];
|
|
|
|
// let filteredInverd = StockDetails?.filter(
|
|
// (item) => item.InwardDtlId !== newStockDetails?.[0].InwardDtlId
|
|
// );
|
|
// filteredInverd.push(newStockDetails?.[0]);
|
|
// setStockDetails(filteredInverd);
|
|
// setOpenEditModal(false);
|
|
// };
|
|
|
|
// const columns = defaultColumns?.map((col) => {
|
|
// if (!col.editable) {
|
|
// return col;
|
|
// }
|
|
// return {
|
|
// ...col,
|
|
// onCell: (record) => ({
|
|
// record,
|
|
// editable: col.editable,
|
|
// dataIndex: col.dataIndex,
|
|
// title: col.title,
|
|
// handleSave,
|
|
// }),
|
|
// };
|
|
// });
|
|
|
|
const columns2WithEditable = columns2?.map((col) => {
|
|
if (!col.editable) {
|
|
return col;
|
|
}
|
|
return {
|
|
...col,
|
|
onCell: (record) => ({
|
|
record,
|
|
editable: col.editable,
|
|
dataIndex: col.dataIndex,
|
|
title: col.title,
|
|
handleSave,
|
|
}),
|
|
};
|
|
});
|
|
const BulkPriceColumns = BulkPricechangeColumns?.map((col) => {
|
|
if (!col.editable) {
|
|
return col;
|
|
}
|
|
return {
|
|
...col,
|
|
onCell: (record) => ({
|
|
record,
|
|
editable: col.editable,
|
|
dataIndex: col.dataIndex,
|
|
title: col.title,
|
|
handleSave,
|
|
}),
|
|
};
|
|
});
|
|
|
|
const handlePageChange = (current) => {
|
|
setpage(current);
|
|
};
|
|
const handlePageChangeBulk = (current) => {
|
|
setBulkchangepage(current);
|
|
|
|
setPageSize(pageSize);
|
|
};
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
|
|
const onSearch = (value) => {
|
|
setSearchedText(value);
|
|
};
|
|
const onSearchBulk = (value) => {
|
|
setBulksearchedText(value);
|
|
};
|
|
const onSearchChange = (e) => {
|
|
setSearchedText(e?.target?.value);
|
|
};
|
|
const onSearchChangeBulk = (e) => {
|
|
setBulksearchedText(e?.target?.value);
|
|
};
|
|
const handleChange = (pagination, filters, sorter) => {
|
|
setFilteredInfo(filters);
|
|
setSortedInfo(sorter);
|
|
};
|
|
const handleChangeBulk = (pagination, filters, sorter) => {
|
|
setBulksortedInfo(sorter);
|
|
};
|
|
const onRadioChange = (data) => {
|
|
setRadioSelection(data);
|
|
};
|
|
|
|
const handleUploadExcel = () => {
|
|
setExcelModalOpen(true);
|
|
};
|
|
|
|
const handleFieldSetup = () => {
|
|
setFieldSetup(true);
|
|
};
|
|
|
|
const handleExcelFieldSetup = () => {
|
|
setExcelFieldSetup(true);
|
|
};
|
|
|
|
const showPriceChangeModal = () => {
|
|
setPriceChangeModalOpen(true);
|
|
};
|
|
|
|
const handleExport = async (isStockVariantBased = "Yes") => {
|
|
setExportLoading(true);
|
|
setPriceChangeModalOpen(false);
|
|
|
|
const uniqueBulkProductData =
|
|
isStockVariantBased === "Yes"
|
|
? BulkProductData || []
|
|
: (BulkProductData || [])?.filter(
|
|
(item, index, self) =>
|
|
index === self.findIndex((p) => p.ProdId === item.ProdId),
|
|
);
|
|
|
|
if (!uniqueBulkProductData?.length) {
|
|
setMessageType("error");
|
|
setMessageData("No data available to export");
|
|
setExportLoading(false);
|
|
return;
|
|
}
|
|
|
|
const workbook = new ExcelJS.Workbook();
|
|
const worksheet = workbook.addWorksheet("Products");
|
|
|
|
/* ---------------- COLUMN DEFINITIONS ---------------- */
|
|
const columns = [
|
|
{ header: "Product Name", key: "ProdName", width: 20 },
|
|
...(isStockVariantBased === "Yes"
|
|
? [{ header: "Variant Name", key: "ProdVariantName", width: 20 }]
|
|
: []),
|
|
...(isStockVariantBased === "Yes"
|
|
? [{ header: "Batch No", key: "BatchRef", width: 20 }]
|
|
: []),
|
|
...(hasExcelField("Stock Date")
|
|
? [{ header: "Stock Date", key: "StockDate", width: 15 }]
|
|
: []),
|
|
...(hasExcelField("Expiry Date")
|
|
? [{ header: "Exp Date", key: "ExpDate", width: 15 }]
|
|
: []),
|
|
...(hasExcelField("Stock")
|
|
? [{ header: "Stock", key: "Stock", width: 10 }]
|
|
: []),
|
|
...(hasExcelField("Old MRP")
|
|
? [{ header: "Old MRP", key: "OldMRP", width: 10 }]
|
|
: []),
|
|
...(hasExcelField("Old SP")
|
|
? [{ header: "Old SP", key: "OldSP", width: 10 }]
|
|
: []),
|
|
...(hasExcelField("Old Wholesale Price")
|
|
? [{ header: "Old Wholesale Price", key: "WhSalePrice", width: 14 }]
|
|
: []),
|
|
...(hasExcelField("Size")
|
|
? [{ header: "Size", key: "Size", width: 10 }]
|
|
: []),
|
|
...(hasExcelField("Stock Maintainence")
|
|
? [{ header: "Stock Maintainence", key: "StockAvailable", width: 18 }]
|
|
: []),
|
|
...(hasExcelField("UOM Name")
|
|
? [{ header: "UOMName", key: "UOMName", width: 15 }]
|
|
: []),
|
|
// ...(hasExcelField("New MRP & New SP")
|
|
// ? [
|
|
{ header: "New MRP", key: "NewMRP", width: 12 },
|
|
{ header: "New SP", key: "NewSP", width: 12 },
|
|
// ]
|
|
// : []),
|
|
|
|
...(hasExcelField("New Wholesale Price")
|
|
? [{ header: "New Wholesale Price", key: "NewWhSalePrice", width: 14 }]
|
|
: []),
|
|
|
|
// --- Hidden system columns (always included) ---
|
|
{ header: "ProdId", key: "ProdId", width: 1 },
|
|
|
|
...(isStockVariantBased === "Yes"
|
|
? [{ header: "InwardDtlId", key: "InwardDtlId", width: 1 }]
|
|
: []),
|
|
|
|
{ header: "key", key: "key", width: 1 },
|
|
{ header: "downloadType", key: "downloadType", width: 1 },
|
|
];
|
|
|
|
worksheet.columns = columns;
|
|
|
|
worksheet.views = [{ state: "frozen", xSplit: 1, ySplit: 1 }];
|
|
|
|
const headerRow = worksheet.getRow(1);
|
|
|
|
const newMRPCol = headerRow.values.indexOf("New MRP");
|
|
const newSPCol = headerRow.values.indexOf("New SP");
|
|
const hasNewMRPAndSP = newMRPCol > 0 && newSPCol > 0;
|
|
|
|
/* ---------------- HEADER STYLE ---------------- */
|
|
worksheet.getRow(1).eachCell((cell) => {
|
|
const header = cell.value;
|
|
|
|
const isHiddenCol =
|
|
header === "key" ||
|
|
header === "ProdId" ||
|
|
header === "InwardDtlId" ||
|
|
header === "downloadType";
|
|
|
|
cell.font = {
|
|
bold: true,
|
|
size: isHiddenCol ? 1 : 11,
|
|
color: { argb: isHiddenCol ? "FFFFFFFF" : "FF000000" },
|
|
};
|
|
|
|
cell.alignment = {
|
|
horizontal: "center",
|
|
vertical: "middle",
|
|
wrapText: true, // ✅ prevents overflow in header
|
|
};
|
|
|
|
cell.fill = {
|
|
type: "pattern",
|
|
pattern: "solid",
|
|
fgColor: {
|
|
argb: isHiddenCol ? "FFFFFFFF" : "FF52C41A",
|
|
},
|
|
};
|
|
|
|
cell.border = isHiddenCol
|
|
? undefined
|
|
: {
|
|
right: { style: "thin", color: { argb: "FF000000" } },
|
|
bottom: { style: "thin", color: { argb: "FF000000" } },
|
|
};
|
|
});
|
|
|
|
/* ---------------- ADD DATA ---------------- */
|
|
uniqueBulkProductData.forEach((product) => {
|
|
worksheet.addRow({
|
|
ProdName: product?.ProdName,
|
|
ProdVariantName: product?.ProdVariantName,
|
|
BatchRef: product?.BatchRef,
|
|
StockDate: product?.InwardDate,
|
|
ExpDate: product?.ExpDate || "-",
|
|
Stock: product?.BalanceQty,
|
|
OldMRP: product?.MRP,
|
|
OldSP: product?.SellPrice,
|
|
WhSalePrice: product?.WhSalePrice,
|
|
Size: product?.Size,
|
|
StockAvailable: product?.StockAvailable,
|
|
UOMName: product?.UOMName,
|
|
key: product?.key,
|
|
downloadType: isStockVariantBased === "Yes" ? "Variant" : "Product",
|
|
NewMRP: "",
|
|
NewSP: "",
|
|
NewWhSalePrice: "",
|
|
ProdId: product?.ProdId,
|
|
InwardDtlId:
|
|
isStockVariantBased === "Yes" ? product?.InwardDtlId : undefined,
|
|
});
|
|
});
|
|
|
|
// ---------------- VALIDATION: New SP <= New MRP ----------------
|
|
if (hasNewMRPAndSP) {
|
|
worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
|
|
if (rowNumber === 1) return; // skip header
|
|
|
|
const newMRPCell = row.getCell(newMRPCol);
|
|
const newSPCell = row.getCell(newSPCol);
|
|
|
|
newSPCell.dataValidation = {
|
|
type: "custom",
|
|
allowBlank: true,
|
|
formulae: [
|
|
`IFERROR(VALUE(${newSPCell.address}),0) <= IFERROR(VALUE(${newMRPCell.address}),0)`,
|
|
],
|
|
showErrorMessage: true,
|
|
errorStyle: "stop",
|
|
errorTitle: "Invalid Selling Price",
|
|
error: "New SP cannot be greater than New MRP",
|
|
};
|
|
});
|
|
}
|
|
|
|
/* ---------------- UNLOCK EVERYTHING ---------------- */
|
|
worksheet.eachRow({ includeEmpty: true }, (row) => {
|
|
row.eachCell({ includeEmpty: true }, (cell) => {
|
|
cell.protection = { locked: false };
|
|
});
|
|
});
|
|
|
|
/* ---------------- LOCK HEADER ---------------- */
|
|
worksheet.getRow(1).eachCell((cell) => {
|
|
cell.protection = { locked: true };
|
|
});
|
|
|
|
worksheet.getRow(1).height = 32;
|
|
|
|
/* ---------------- LOCK ALL EXCEPT New MRP & New SP ---------------- */
|
|
worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
|
|
if (rowNumber === 1) return;
|
|
|
|
row.eachCell((cell, colNumber) => {
|
|
const header = worksheet.getRow(1).getCell(colNumber).value;
|
|
|
|
const isHiddenCol =
|
|
header === "key" ||
|
|
header === "ProdId" ||
|
|
header === "InwardDtlId" ||
|
|
header === "downloadType";
|
|
|
|
const isEditable =
|
|
header === "New MRP" ||
|
|
header === "New SP" ||
|
|
header === "New Wholesale Price";
|
|
|
|
cell.protection = { locked: !isEditable };
|
|
cell.alignment = {
|
|
vertical: "middle",
|
|
wrapText: true,
|
|
};
|
|
if (isHiddenCol) {
|
|
cell.font = {
|
|
size: 1,
|
|
color: { argb: "FFFFFFFF" },
|
|
};
|
|
|
|
cell.fill = {
|
|
type: "pattern",
|
|
pattern: "solid",
|
|
fgColor: { argb: "FFFFFFFF" },
|
|
};
|
|
}
|
|
});
|
|
});
|
|
|
|
/* ---------------- PROTECT SHEET ---------------- */
|
|
await worksheet.protect("", {
|
|
selectLockedCells: false,
|
|
selectUnlockedCells: true,
|
|
formatCells: false,
|
|
formatColumns: false,
|
|
insertRows: false,
|
|
deleteRows: false,
|
|
});
|
|
|
|
/* ---------------- DOWNLOAD ---------------- */
|
|
const buffer = await workbook.xlsx.writeBuffer();
|
|
const blob = new Blob([buffer], {
|
|
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
|
});
|
|
|
|
const link = document.createElement("a");
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = "PriceChange_Data.xlsx";
|
|
link.click();
|
|
|
|
setExportLoading(false);
|
|
};
|
|
|
|
const handleClick = () => {
|
|
fileInputRef.current.click();
|
|
};
|
|
|
|
const handleFileUpload = (e) => {
|
|
setFileLoading(true);
|
|
const file = e.target.files[0];
|
|
|
|
if (!file) {
|
|
dispatch(emptyExcelData());
|
|
setFileLoading(false);
|
|
return;
|
|
}
|
|
|
|
const isAllowed = allowedExcelTypes?.includes(file.type);
|
|
if (!isAllowed) {
|
|
Modal.error({
|
|
title: "Invalid File Type",
|
|
content: "Only Excel files (.xls, .xlsx) are allowed.",
|
|
});
|
|
handleCancelData();
|
|
setFileLoading(false);
|
|
return;
|
|
}
|
|
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = (event) => {
|
|
const arrayBuffer = event.target.result;
|
|
|
|
const extractedData = extractPriceChangeDataFromExcel(arrayBuffer);
|
|
|
|
console.log(extractedData, "extractedData");
|
|
if ((extractedData || [])?.length === 0) {
|
|
setMessageData("No Data Found in Uploaded Sheet");
|
|
setMessageType("error");
|
|
handleCancelData();
|
|
setFileLoading(false);
|
|
return;
|
|
}
|
|
setUploadedData(extractedData);
|
|
setFileLoading(false);
|
|
// setFormValuesFromExtractedData(extractedData);
|
|
};
|
|
|
|
reader.readAsArrayBuffer(file); // ✅ THIS IS REQUIRED
|
|
};
|
|
|
|
const setFormValuesFromExtractedData = (data) => {
|
|
const formValues = {};
|
|
|
|
data.forEach((item) => {
|
|
const id = item.localId;
|
|
|
|
if (item.NewMRP !== null && item.NewMRP !== undefined) {
|
|
formValues[`NewMRP${id}`] = item.NewMRP;
|
|
}
|
|
|
|
if (item.NewSellPrice !== null && item.NewSellPrice !== undefined) {
|
|
formValues[`NewSellPrice${id}`] = item.NewSellPrice;
|
|
}
|
|
|
|
if (
|
|
item.NewWholeSalePrice !== null &&
|
|
item.NewWholeSalePrice !== undefined
|
|
) {
|
|
formValues[`NewWholeSalePrice${id}`] = item.NewWholeSalePrice;
|
|
}
|
|
});
|
|
|
|
excelDataRef.current?.setFieldsValue(formValues);
|
|
};
|
|
|
|
const extractPriceChangeDataFromExcel = (arrayBuffer) => {
|
|
const workbook = read(arrayBuffer, { type: "array" });
|
|
const worksheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
|
|
const rows = utils.sheet_to_json(worksheet, {
|
|
header: 1,
|
|
raw: false,
|
|
defval: "",
|
|
});
|
|
|
|
if (!rows.length) return [];
|
|
|
|
const header = rows[0];
|
|
setHeaders(header);
|
|
const dataRows = rows.slice(1);
|
|
|
|
// Helper to safely get column value
|
|
const getVal = (row, colName) => {
|
|
const idx = header.indexOf(colName);
|
|
return idx !== -1 ? row[idx] : "";
|
|
};
|
|
|
|
const result = dataRows
|
|
.map((row) => {
|
|
const prodId = getVal(row, "ProdId")?.toString().trim();
|
|
if (!prodId) return null;
|
|
|
|
const newMRP =
|
|
getVal(row, "New MRP") !== "" ? Number(getVal(row, "New MRP")) : null;
|
|
|
|
const newSP =
|
|
getVal(row, "New SP") !== "" ? Number(getVal(row, "New SP")) : null;
|
|
|
|
const newWholesale =
|
|
getVal(row, "New Wholesale Price") !== ""
|
|
? Number(getVal(row, "New Wholesale Price"))
|
|
: null;
|
|
|
|
// ❌ Must have at least one change
|
|
if (newMRP === null && newSP === null && newWholesale === null) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
// 🔹 Product identity
|
|
localId: uuidv4(),
|
|
ProdId: prodId,
|
|
InwardDtlId: getVal(row, "InwardDtlId")
|
|
? getVal(row, "InwardDtlId").toString()
|
|
: null,
|
|
|
|
// 🔹 Product info
|
|
VariantName: getVal(row, "Variant Name") || null,
|
|
BatchRef: getVal(row, "Batch No") || null,
|
|
ProductName: getVal(row, "Product Name") || null,
|
|
Size: getVal(row, "Size") || null,
|
|
UOMName: getVal(row, "UOMName") || null,
|
|
StockMaintainence: getVal(row, "Stock Maintainence") || null,
|
|
|
|
// 🔹 Stock / dates
|
|
StockDate: getVal(row, "Stock Date") || null,
|
|
ExpDate: getVal(row, "Exp Date") || null,
|
|
downloadType: getVal(row, "downloadType") || null,
|
|
Stock:
|
|
getVal(row, "Stock") !== "" ? Number(getVal(row, "Stock")) : null,
|
|
|
|
// 🔹 Old prices
|
|
OldMRP:
|
|
getVal(row, "Old MRP") !== ""
|
|
? Number(getVal(row, "Old MRP"))
|
|
: null,
|
|
|
|
OldSP:
|
|
getVal(row, "Old SP") !== "" ? Number(getVal(row, "Old SP")) : null,
|
|
|
|
OldWholeSalePrice:
|
|
getVal(row, "Old Wholesale Price") !== ""
|
|
? Number(getVal(row, "Old Wholesale Price"))
|
|
: null,
|
|
|
|
// 🔹 New prices (normalized)
|
|
NewMRP: newMRP,
|
|
NewSellPrice: newSP,
|
|
NewWholeSalePrice: newWholesale,
|
|
};
|
|
})
|
|
.filter(Boolean);
|
|
|
|
return result;
|
|
};
|
|
|
|
const handleCancelData = () => {
|
|
dispatch(emptyExcelData());
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = "";
|
|
}
|
|
setUploadedData([]);
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const formValues = excelDataRef.current?.getFieldsValue();
|
|
|
|
// Validate all records
|
|
for (let i = 0; i < uploadedData.length; i++) {
|
|
const record = uploadedData[i];
|
|
const newMRP = formValues[`NewMRP${record.localId}`];
|
|
const newSP = formValues[`NewSellPrice${record.localId}`];
|
|
|
|
// If MRP is present, SP must also be present
|
|
if (newMRP && !newSP) {
|
|
setMessageType("error");
|
|
setMessageData(
|
|
"If New MRP is provided, New SP must also be provided",
|
|
);
|
|
return;
|
|
}
|
|
|
|
// If SP is present, MRP must also be present
|
|
if (newSP && !newMRP) {
|
|
setMessageType("error");
|
|
setMessageData(
|
|
"If New SP is provided, New MRP must also be provided",
|
|
);
|
|
return;
|
|
}
|
|
|
|
// New SP cannot be greater than New MRP
|
|
if (newMRP && newSP && parseFloat(newSP) > parseFloat(newMRP)) {
|
|
setMessageType("error");
|
|
setMessageData("New SP cannot be greater than New MRP");
|
|
return;
|
|
}
|
|
}
|
|
|
|
const updatedData = uploadedData
|
|
?.filter((data) => {
|
|
const hasMRP = !!data?.NewMRP;
|
|
const hasSell = !!data?.NewSellPrice;
|
|
const hasWholesale = !!data?.NewWholeSalePrice;
|
|
|
|
// valid cases
|
|
if (hasMRP && hasSell) return true;
|
|
if (!hasMRP && !hasSell && hasWholesale) return true;
|
|
|
|
return false;
|
|
})
|
|
?.map((data) => ({
|
|
ProdId: data?.ProdId,
|
|
InwardDtlId: data?.InwardDtlId,
|
|
NewSellPrice: data?.NewSellPrice,
|
|
NewMRP: data?.NewMRP,
|
|
NewWholeSalePrice: data?.NewWholeSalePrice,
|
|
AdjComment: "string",
|
|
}));
|
|
|
|
const putData = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
Type: uploadedData?.[0]?.downloadType,
|
|
ProductDetails: updatedData,
|
|
CreatedBy: UserId,
|
|
};
|
|
|
|
const res = await dispatch(bulkPriceUpdate(putData))?.unwrap();
|
|
|
|
if (res?.data?.statusCode === 1) {
|
|
setMessageData(res?.data?.response || "Price Updated Successfully");
|
|
setMessageType("success");
|
|
setUploadedData([]);
|
|
handleCancelData();
|
|
setExcelModalOpen(false);
|
|
await fetchData();
|
|
} else {
|
|
setMessageData(res?.data?.response);
|
|
setMessageType("error");
|
|
}
|
|
|
|
// If validation passes, proceed with submission
|
|
console.log("Form validation passed", updatedData);
|
|
} catch (error) {
|
|
setMessageType("error");
|
|
setMessageData("Please check all fields and try again");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleFieldSetupSubmit = async () => {
|
|
const postData = {
|
|
AppId: AppId,
|
|
CompId: CompId,
|
|
BranchId: BranchId,
|
|
Type: "GB",
|
|
FormType: fieldSetup ? "Price Change" : "Price Change Sheet",
|
|
TypeId: fieldSetup ? categoryId : excelCategoryId,
|
|
ConfigDtl: (fieldSetup ? selectedFields : selectedExcelFields)?.map(
|
|
(field) => ({
|
|
ConfigId: field,
|
|
Access: "Y",
|
|
}),
|
|
),
|
|
CreatedBy: UserId,
|
|
};
|
|
|
|
const response = await dispatch(postFieldSetup(postData))?.unwrap();
|
|
|
|
if (response?.data?.statusCode === 1) {
|
|
setMessageType("success");
|
|
setMessageData(response?.data?.response);
|
|
if (fieldSetup) {
|
|
await getFieldSetup();
|
|
} else {
|
|
await getExcelFieldSetup();
|
|
}
|
|
} else {
|
|
setMessageType("error");
|
|
setMessageData("Failed to set up fields");
|
|
}
|
|
};
|
|
|
|
const handleFieldSelect = (value) => {
|
|
if (fieldSetup) {
|
|
setSelectedFields((prev) => {
|
|
if (prev.includes(value)) {
|
|
return prev;
|
|
}
|
|
return [value, ...prev];
|
|
});
|
|
} else {
|
|
setSelectedExcelFields((prev) => {
|
|
if (prev.includes(value)) {
|
|
return prev;
|
|
}
|
|
return [value, ...prev];
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleFieldRemove = (id) => {
|
|
if (fieldSetup) {
|
|
setSelectedFields((prev) => prev.filter((field) => field !== id));
|
|
} else {
|
|
setSelectedExcelFields((prev) => prev.filter((field) => field !== id));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="userPageTable">
|
|
<div className="userPageContent">
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
|
|
<div className="formAddNew">
|
|
<div>
|
|
<FormHeader title={"Price Change"} />
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
{RadioSelection == "Bulk" && (
|
|
<div
|
|
className="toolbar"
|
|
style={{
|
|
display: "flex",
|
|
gap: "1rem",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<div className="formSearch">
|
|
<Search
|
|
value={BulksearchedText}
|
|
placeholder="Search"
|
|
onSearch={onSearchBulk}
|
|
onSearchChange={onSearchChangeBulk}
|
|
/>
|
|
</div>
|
|
<div className="uploadexcelBtn">
|
|
<Buttons
|
|
buttonText="Upload Excel"
|
|
className="tertiary_Button"
|
|
handleSubmit={handleUploadExcel}
|
|
disabled={addnewAccess}
|
|
icon={<FiUploadCloud size={18} />}
|
|
/>
|
|
</div>
|
|
<Tooltip title="Field Setup">
|
|
<div className="btn btn--info" onClick={handleFieldSetup}>
|
|
<MdOutlineAppRegistration size={19} />
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{RadioSelection == "Single" && (
|
|
<div
|
|
style={{ width: "100%", marginBottom: "0" }}
|
|
className="searchAddDiv"
|
|
>
|
|
<div style={{ width: "100%" }} className="formSearch">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
gap: "1rem",
|
|
flexWrap: "wrap",
|
|
rowGap: "1.5rem",
|
|
marginBottom: "0.5rem",
|
|
// justifyContent: 'space-between',
|
|
width: "100%",
|
|
}}
|
|
className="PricePrice-input"
|
|
>
|
|
<DropDowns
|
|
label="Select Product"
|
|
valueData={ProductName}
|
|
showSearch
|
|
onChangeFunction={(value, option) =>
|
|
HandleStockNames(value, option)
|
|
}
|
|
style={{ width: "240px" }}
|
|
options={DataSource}
|
|
isOnchanges={ProductName ? true : false}
|
|
/>
|
|
<div className="formSearch">
|
|
<Search
|
|
placeholder="Search"
|
|
onSearch={onSearch}
|
|
onSearchChange={onSearchChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{/* {RadioSelection == "Bulk" &&
|
|
<div style={{ padding: "5px 5px" }}>
|
|
<Search
|
|
value={BulksearchedText}
|
|
placeholder="Search"
|
|
onSearch={onSearchBulk}
|
|
onSearchChange={onSearchChangeBulk}
|
|
/>
|
|
</div>
|
|
} */}
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
gap: "1rem",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div>
|
|
<RadioGrpButton
|
|
content={[
|
|
{ value: "Single", label: "Single Product" },
|
|
{ value: "Bulk", label: "Bulk Product" },
|
|
]}
|
|
fieldState={true}
|
|
defaultSelect={RadioSelection}
|
|
onSelectFuntion={(e) => onRadioChange(e)}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
{(RadioSelection == "Bulk" ||
|
|
(RadioSelection == "Single" && StockDetails.length > 0)) && (
|
|
<div className="samplereportTableButton">
|
|
<Buttons
|
|
buttonText="Submit"
|
|
color="901D77"
|
|
palcement={"right"}
|
|
handleSubmit={HandlePutData}
|
|
icon={<ArrowRightOutlined />}
|
|
disabled={addnewAccess}
|
|
></Buttons>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{RadioSelection == "Single" && (
|
|
<div
|
|
className="samplereportTable reportTable pricechangeTable"
|
|
style={{ height: "61vh !important" }}
|
|
>
|
|
<Table
|
|
columns={columns2WithEditable}
|
|
components={components}
|
|
bordered
|
|
dataSource={StockDetails}
|
|
data={StockDetails}
|
|
pagination={
|
|
StockDetails?.length < 11
|
|
? false
|
|
: {
|
|
current: page,
|
|
pageSize: pageSize,
|
|
onChange: handlePageChange,
|
|
}
|
|
}
|
|
onChange={handleChange}
|
|
></Table>
|
|
</div>
|
|
)}
|
|
{RadioSelection == "Bulk" && (
|
|
<div
|
|
className="samplereportTable reportTable pricechangeTable"
|
|
style={{ height: "65vh !important" }}
|
|
>
|
|
<Table
|
|
columns={BulkPriceColumns}
|
|
components={BulkComponents}
|
|
data={BulkProductData}
|
|
dataSource={BulkProductData}
|
|
onChange={handleChangeBulk}
|
|
pagination={{
|
|
current: Bulkchangepage,
|
|
pageSize: pageSize,
|
|
pageSizeOptions: ["10", "20", "30"],
|
|
onChange: handlePageChangeBulk,
|
|
showSizeChanger: false,
|
|
}}
|
|
></Table>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<DefaultModal
|
|
open={excelModalOpen}
|
|
title="Bulk Upload"
|
|
footer={false}
|
|
className={"bulkuploadmodal padding-less-modal"}
|
|
handleCancel={() => {
|
|
setExcelModalOpen(false);
|
|
handleCancelData();
|
|
}}
|
|
width={uploadedData?.length > 0 ? 1200 : 600}
|
|
children={
|
|
<>
|
|
{uploadedData?.length === 0 && (
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
display: "flex",
|
|
justifyContent: "flex-end",
|
|
marginBottom: "1rem",
|
|
gap: "0.5rem",
|
|
}}
|
|
>
|
|
<Tooltip title="Field Setup">
|
|
<div
|
|
className="btn btn--info"
|
|
style={{
|
|
background: "#00694aff",
|
|
color: "#fff",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "5px 12px",
|
|
borderRadius: "4px",
|
|
}}
|
|
onClick={handleExcelFieldSetup}
|
|
>
|
|
<MdOutlineAppRegistration size={19} />
|
|
</div>
|
|
</Tooltip>
|
|
<div
|
|
className={`export-excel-div ${exportLoading ? "is-loading" : ""}`}
|
|
onClick={
|
|
exportLoading ? () => { } : () => showPriceChangeModal()
|
|
}
|
|
>
|
|
<div>
|
|
<CiExport size={20} strokeWidth={1} />
|
|
</div>
|
|
<div style={{ fontSize: "14px", letterSpacing: "0.2px" }}>
|
|
Export Excel
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{(!uploadedData || uploadedData?.length === 0) && (
|
|
<>
|
|
{!fileLoading && (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
border: "1px dashed #000",
|
|
width: "max-content",
|
|
padding: "10px",
|
|
borderRadius: "6px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{ position: "relative", display: "inline-block" }}
|
|
>
|
|
{/* <Imageupload size="2x" /> */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<img
|
|
src={Excelupldimg}
|
|
width={"80px"}
|
|
style={{ cursor: "pointer", margin: "0 0 1rem 0" }}
|
|
onClick={handleClick}
|
|
/>
|
|
<input
|
|
type="file"
|
|
className="form-control"
|
|
onChange={handleFileUpload}
|
|
ref={fileInputRef}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "100%",
|
|
opacity: 0,
|
|
cursor: "pointer",
|
|
}}
|
|
/>
|
|
<a style={{ color: "#000", fontSize: "12px" }}>
|
|
{" "}
|
|
Upload Sheet{" "}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{fileLoading && (
|
|
<div style={{ textAlign: "center", marginTop: "1rem" }}>
|
|
<div
|
|
style={{
|
|
border: "4px solid #f3f3f3",
|
|
borderTop: "4px solid #3498db",
|
|
borderRadius: "50%",
|
|
width: "40px",
|
|
height: "40px",
|
|
animation: "spin 2s linear infinite",
|
|
margin: "0 auto",
|
|
}}
|
|
></div>
|
|
<p style={{ marginTop: "0.5rem", color: "#666" }}>
|
|
Processing file...
|
|
</p>
|
|
<style>{`
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{uploadedData && uploadedData?.length > 0 && !loading ? (
|
|
<div
|
|
className="viewerExcelupload"
|
|
style={{ maxHeight: "90vh", overflowX: "auto" }}
|
|
>
|
|
<Form ref={excelDataRef} onFinish={handleSubmit}>
|
|
<div className="pricechangedata">
|
|
<Table
|
|
columns={columns}
|
|
rowKey={(record) => record.localId}
|
|
// components={components}
|
|
// bordered
|
|
dataSource={uploadedData}
|
|
// className="tableExcelUpload"
|
|
// onChange={handleTableChange}
|
|
className="price-change-data"
|
|
/>
|
|
</div>
|
|
<div
|
|
className="cancel-link"
|
|
onClick={handleCancelData}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: ".5rem",
|
|
padding: "0.3rem 0.4rem",
|
|
borderRadius: "6px",
|
|
backgroundColor: "ghostwhite",
|
|
width: "max-content",
|
|
}}
|
|
>
|
|
<FiDelete style={{ fontSize: "20px", color: "#1292EE" }} />
|
|
<a style={{ color: "#000" }}> Remove File</a>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "flex-end",
|
|
gap: "1rem",
|
|
marginTop: "1rem",
|
|
}}
|
|
>
|
|
<Buttons
|
|
buttonText="Submit"
|
|
color="901D77"
|
|
placement={"right"}
|
|
icon={<ArrowRightOutlined />}
|
|
disabled={addnewAccess}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
) : (
|
|
<p></p>
|
|
)}
|
|
{loading && (
|
|
<div style={{ textAlign: "center", marginTop: "1rem" }}>
|
|
<div
|
|
style={{
|
|
border: "4px solid #f3f3f3",
|
|
borderTop: "4px solid #3498db",
|
|
borderRadius: "50%",
|
|
width: "40px",
|
|
height: "40px",
|
|
animation: "spin 2s linear infinite",
|
|
margin: "0 auto",
|
|
}}
|
|
></div>
|
|
<p style={{ marginTop: "0.5rem", color: "#666" }}>
|
|
Submitting...
|
|
</p>
|
|
<style>{`
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
`}</style>
|
|
</div>
|
|
)}
|
|
<DefaultModal
|
|
open={excelFieldSetup}
|
|
handleCancel={() => setExcelFieldSetup(false)}
|
|
footer={false}
|
|
title={"Select the columns you want to include in the sheet"}
|
|
children={
|
|
<div className="field-setup-container">
|
|
{/* <div className="field-setup-header">
|
|
<FormHeader title={'Select the fields you want to include in the table'} />
|
|
</div> */}
|
|
<div className="field-setup-content">
|
|
<Form onFinish={handleFieldSetupSubmit} ref={formRef}>
|
|
<Form.Item name="fields">
|
|
<DropDowns
|
|
label="Select fields"
|
|
// valueData={selectedFields}
|
|
onChangeFunction={handleFieldSelect}
|
|
options={tableExcelFieldPreferences?.filter(
|
|
(p) =>
|
|
!selectedExcelFields?.some((s) => s === p.value),
|
|
)}
|
|
/>
|
|
</Form.Item>
|
|
<div className="field-setup-selected-fields">
|
|
{selectedExcelFields
|
|
?.map((id) =>
|
|
tableExcelFieldPreferences?.find(
|
|
(p) => p.value === id,
|
|
),
|
|
)
|
|
.filter(Boolean)
|
|
.map((field) => (
|
|
<div className="selected-field" key={field.value}>
|
|
<div>{field.label}</div>
|
|
<div
|
|
className="close-icon"
|
|
onClick={() => handleFieldRemove(field.value)}
|
|
>
|
|
<IoClose size={15} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div
|
|
style={{ display: "flex", justifyContent: "flex-end" }}
|
|
>
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
icon={<ArrowRightOutlined />}
|
|
htmlType={true}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
</>
|
|
}
|
|
/>
|
|
<DefaultModal
|
|
open={priceChangeModalOpen}
|
|
title={
|
|
<p style={{ fontSize: "18px" }}>Stock/Variant Based Price Change?</p>
|
|
}
|
|
footer={true}
|
|
width={500}
|
|
handleCancel={() => setPriceChangeModalOpen(false)}
|
|
handleSubmit={() => handleExport(stockVariantBased)}
|
|
children={
|
|
<div style={{ padding: "0.1rem 0" }}>
|
|
<RadioGrpButton
|
|
content={[
|
|
{ value: "Yes", label: "Yes" },
|
|
{ value: "No", label: "No" },
|
|
]}
|
|
fieldState={true}
|
|
defaultSelect={stockVariantBased}
|
|
onSelectFuntion={(e) => setStockVariantBased(e)}
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
<DefaultModal
|
|
open={fieldSetup}
|
|
handleCancel={() => setFieldSetup(false)}
|
|
footer={false}
|
|
title={"Select the fields you want to include in the table"}
|
|
children={
|
|
<div className="field-setup-container">
|
|
{/* <div className="field-setup-header">
|
|
<FormHeader title={'Select the fields you want to include in the table'} />
|
|
</div> */}
|
|
<div className="field-setup-content">
|
|
<Form onFinish={handleFieldSetupSubmit} ref={formRef}>
|
|
<Form.Item name="fields">
|
|
<DropDowns
|
|
label="Select fields"
|
|
// valueData={selectedFields}
|
|
onChangeFunction={handleFieldSelect}
|
|
options={tableFieldPreferences?.filter(
|
|
(p) => !selectedFields?.some((s) => s === p.value),
|
|
)}
|
|
/>
|
|
</Form.Item>
|
|
<div className="field-setup-selected-fields">
|
|
{selectedFields
|
|
?.map((id) =>
|
|
tableFieldPreferences?.find((p) => p.value === id),
|
|
)
|
|
.filter(Boolean)
|
|
.map((field) => (
|
|
<div className="selected-field" key={field.value}>
|
|
<div>{field.label}</div>
|
|
<div
|
|
className="close-icon"
|
|
onClick={() => handleFieldRemove(field.value)}
|
|
>
|
|
<IoClose size={15} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div style={{ display: "flex", justifyContent: "flex-end" }}>
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
icon={<ArrowRightOutlined />}
|
|
htmlType={true}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StockPriceUpdate;
|