Notes

import React, { useState, useEffect, useContext } from "react";
import Box from "@mui/material/Box";
import { Grid, Paper, Tab, Tabs } from "@mui/material";
import { TabContext, TabPanel, TabList } from "@mui/lab";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import InputLabel from "@mui/material/InputLabel";
import FormControl from "@mui/material/FormControl";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import IconButton from "@mui/material/IconButton";
import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import DirectionsIcon from "@mui/icons-material/Directions";
import TurnRightIcon from "@mui/icons-material/TurnRight";
import MenuItem from "@mui/material/MenuItem";
import MultiSelect from "../common/MultiSelect";
import states from "../../data/StateLookup.json";
import Checkbox from "@mui/material/Checkbox";
import DeleteIcon from "@mui/icons-material/Delete";
import axios from "axios";
import { borderLeft } from "@mui/system";
// import DeleteIcon from "@mui/icons-material"
// import { Checkbox } from 'primereact/checkbox';
import useDialog from "../common/UseDialog";

export default function ApprovalConfig() {
const [name, setName] = React.useState("");
const [state, setState] = React.useState("");
const [selectCustomer, setSelectedCustomer] = useState(null);
const [selectedCustomerObj, setSelectCustomerObj] = useState(null);
const [customerList, setCustomerList] = useState([]);
const [selectedState, setSelectedState] = useState([]);
const [approverList, setApproverList] = useState([]);
const [value, setValue] = React.useState("");
const [selectedRadio, setSelectedRadio] = React.useState("state");
const [selectedApproverData, setSelectedApproverData] = React.useState([]);
const [isPopUpVisible, setIsPopUpVisible] = useState(false);
const [selectReset, setSelectReset] = useState(false);
const [approverId, setApproverId] = useState(null);
const [customerId, setCustomerId] = useState(null);
const [tabValue, setTabValue] = useState("1");
// const [sendapproverList,setSendApproverList]=useState([])
const [masterApproverList, setMasterApproverList] = React.useState("");
const [masterApproverId, setMasterApproverId] = useState(null);
const [masterSelectedRadio, setMasterSelectedRadio] = React.useState("state");
const [masterSelectedState, setMasterSelectedState] = useState([]);
const [masterSelectedApproverData, setMasterSelectedApproverData] =
React.useState([]);
const [deleteData, SetDeleteData] = React.useState(null);
// const [clientdeleteData, SetClientDeleteData] = React.useState(null);
const [clientData,SetClientData] = React.useState(null);
const [stateData,SetStateData]=React.useState(null);
const [approverData,SetApproverData]=React.useState(null);



//Get Customer List
useEffect(() => {
getCustomerList();
}, []);
const getCustomerList = () => {
fetch(
"https://jsitracknowdevapi.azurewebsites.net/api/Customer/CustomerList"
)
.then((response) => response.json())
.then((data) => setCustomerList(data));
};

//Get Approver List
useEffect(() => {
getApproverList();
}, []);
const getApproverList = () => {
fetch(
"https://jsitracknowdevapi.azurewebsites.net/api/Application/ListApprovers"
)
.then((response) => response.json())
.then((data) => setApproverList(data));
};

//on Submit
const sendApprover = async () => {
let postObj = selectedState.map((ele, i) => {
return {
approverId: 0,
approverName: value,
customerId: customerId,
juristiction: selectedRadio,
state: ele,
isdefault: selectedApproverData[0].isDefault[i],
approverGroupId: 1,
// createDate: 2023-03-28T03:53:25.589Z,
createUser: "string",
// updateDate: 2023-03-28T03:53:25.589Z,
updateUser: "string",
};
});
console.log("send data is passing", postObj);
await axios
.post(
"https://jsitracknowdevapi.azurewebsites.net/api/Application/CreateApprovers",
postObj
)
.then((res) => {
getApproverList();
});
};
const sendMasterApprover = async () => {
let postObj = masterSelectedState.map((ele, i) => {
return {
approverId: 0,
approverName: masterApproverList,
juristiction: masterSelectedRadio,
state: ele,
isdefault: masterSelectedApproverData[0].isDefault[i],
approverGroupId: 1,
// createDate: 2023-03-28T03:53:25.589Z,
createUser: "string",
// updateDate: 2023-03-28T03:53:25.589Z,
updateUser: "string",
};
});
console.log("send data is passing", postObj);
await axios
.post(
"https://jsitracknowdevapi.azurewebsites.net/api/Application/CreateApprovers",
postObj
)
.then((res) => {
getApproverList();
});
};

useEffect(() => {
console.log("selectedApproverData", selectedApproverData);
}, [selectedApproverData]);

//Collect Approver Data
const collectApproverData = () => {
let selectedApprover;
if (selectedApproverData.length > 0) {
selectedApprover = [...selectedApproverData];
let isClient = selectedApprover.filter((ele) => ele.client === name);
console.log("selectedApprover isClient", isClient);
if (isClient.length > 0) {
selectedState.forEach((state) => {
let isState = isClient[0].states.filter((ele) => ele.state === state);
console.log("selectedApprover isState", isState);
if (isState.length > 0) {
let newApprover = { ApproverName: value, isDefault: false };
isState[0].approvers.push(newApprover);
} else {
let newState =
selectedRadio === "Federal Compliance"
? {
state: "Federal",
approvers: [{ ApproverName: value, isDefault: false }],
}
: {
state: state,
approvers: [{ ApproverName: value, isDefault: false }],
};
isClient[0].states.push(newState);
console.log(
"selectedApprover newState",
newState,
selectedApprover
);
}
});
} else {
let newClient = {
client: name,
states:
selectedRadio === "Federal Compliance"
? [
{
state: "Federal",
approvers: [{ ApproverName: value, isDefault: false }],
},
]
: selectedState.map((ele) => ({
state: ele,
approvers: [{ ApproverName: value, isDefault: false }],
})),
};
selectedApprover.push(newClient);
console.log("selectedApprover newClient", newClient, selectedApprover);
}
} else {
selectedApprover = [
{
client: name,
states:
selectedRadio === "Federal Compliance"
? [
{
state: "Federal",
approvers: [{ ApproverName: value, isDefault: false }],
},
]
: selectedState.map((ele) => ({
state: ele,
approvers: [{ ApproverName: value, isDefault: false }],
})),
},
];
}
setSelectedApproverData(selectedApprover);
console.log("selectedApprover array ->", selectedApprover);
};
const collectMasterApproverData = () => {
let selectedApprover = {
ApproverName: masterApproverList,
states: masterSelectedState,
isDefault: masterSelectedState.map((ele) => {
return false;
}),
};
let arr = [selectedApprover];

setMasterSelectedApproverData(arr);
console.log("array", arr);
};

//Handle Reset
const handleReset = () => {
setName("");
setValue("");
setSelectedState([]);
setSelectedApproverData([]);
};
const handleMasterReset = (type) => {
setMasterApproverList("");
setMasterSelectedState([]);
setMasterSelectedApproverData([]);
};

//Handle Name Change
const nameChange = (event) => {
setName(event.target.value);
customerList.forEach((obj) => {
if (obj.customerName == event.target.value) {
setCustomerId(obj.customerId);
}
});
};

//Handle Approver List Change
const handlenameChange = (event) => {
setValue(event.target.value);
approverList.forEach((obj) => {
if (obj.approverName == event.target.value) {
setApproverId(obj.approverId);
}
});
console.log(approverId);
};
const handleMasterApproverList = (event) => {
setMasterApproverList(event.target.value);
approverList.forEach((obj) => {
if (obj.approverName == event.target.value) {
setMasterApproverId(obj.approverId);
}
});
console.log(masterApproverId);
};

//Handle Radio Change
const handleRadioChange = (event) => {
setSelectedRadio(event.target.value);
console.log("val", selectedRadio);
};
const handleMasterRadioChange = (event) => {
setMasterSelectedRadio(event.target.value);
console.log("val", masterSelectedRadio);
};

//Handle Tab Change
const handleTabChange = (event, newValue) => {
console.log("handleTabChange", event, newValue);
setTabValue(newValue);
};

//Handle Delete
const handleDelete = (client, stateName, approver) => {
// SetClientDeleteData(client, stateName, approver);
SetClientData(client);
SetStateData(stateName);
SetApproverData(approver);
SetDeleteData(state);
console.log("handleDelete",client,stateName,approver);
showDialog(
"Confirmation",
"Are you sure to delete this Approver?",
"confirm"
)
};

const handleSubmit = () => {
deleteFunc();
};

const closeConfirm = () => {
// navigate("/");
};

const {
AlertDialog: ConfirmDialog,
showDialog,
closeDialog,
} = useDialog({
onSubmit: handleSubmit,
onClose: closeConfirm,
});

const { AlertDialog, showDialog: showAlert } = useDialog({});

const deleteFunc = () => {
let newSelectedState = masterSelectedState.filter(
(ele) => ele !== deleteData);
setMasterSelectedState(newSelectedState);
let newSelectedApproverData = masterSelectedApproverData;
newSelectedApproverData[0].states = newSelectedState;
console.log("handleDelete", newSelectedApproverData);
setMasterSelectedApproverData(newSelectedApproverData);

let findClient = selectedApproverData.filter((ele) => {
if (ele.client === clientData) {
ele.states = ele.states.filter((state) => {
if (state.state === stateData) {
state.approvers = state.approvers.filter(
(ele) => ele.ApproverName !== approverData
);
}
console.log("handleDelete", state);
if (state.approvers.length > 0) {
return state;
}
});
}
console.log("handleDelete", ele);
if (ele.states.length > 0) {
return ele;
}
});
console.log("handleDelete removeApprover", findClient);
setSelectedApproverData(findClient);

showAlert("Success", "Successfully deleted Approver", "success");
closeDialog();
};

const handleMasterDelete = (state) => {
SetDeleteData(state);
console.log(
"handleDelete",
state,
selectedState,
masterSelectedApproverData
);
showDialog(
"Confirmation",
"Are you sure to delete this Approver?",
"confirm"
);
};

//Handle State Change
const stateChange = (event) => {
const {
target: { value },
} = event;
setSelectedState(typeof value === "string" ? value.split(",") : value);
};
const masterStateChange = (event) => {
const {
target: { value },
} = event;
setMasterSelectedState(
typeof value === "string" ? value.split(",") : value
);
};

//isDefaut Change
const isDefaultMasterChange = (event, i) => {
console.log(
"isDefaultMasterChange",
masterSelectedApproverData,
event.target.value,
i
);
let newIsDefault = masterSelectedApproverData;
newIsDefault[0].isDefault[i] = !newIsDefault[0].isDefault[i];
setMasterSelectedApproverData(newIsDefault);
};
const isDefaultChange = (event, i) => {
console.log("isDefaultChange", selectedApproverData, event.target.value, i);
let newIsDefault = selectedApproverData;
newIsDefault[0].isDefault[i] = !newIsDefault[0].isDefault[i];
setSelectedApproverData(newIsDefault);
};

return (
<div style={{ padding: "20px" }}>
<TabContext value={tabValue}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "end",
margin: "2rem",
}}
>
<h3
style={{
fontFamily: "sans-serif",
fontWeight: 600,
fontSize: "1rem",
margin: 0,
}}
>
APPROVER CONFIGURATION
</h3>
<TabList onChange={handleTabChange} style={{ justifyContent: "end" }}>
<Tab label="CLIENT FILING" value="1" />
<Tab label="MASTER FILING" value="2" />
</TabList>
</Box>
<TabPanel value="1">
<Grid style={{ display: "flex" }}>
<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "rgba(0, 0, 0, 0.06)",
overflow: "auto",
border: 0,
},
}}
>
<Paper variant="outlined">
<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
SELECT CLIENT
</h5>

<FormControl sx={{ m: 1, minWidth: 280, width: "10%" }}>
<InputLabel id="demo-simple-select-helper-label">
Select Name
</InputLabel>
<Select
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={name}
label="Select Name"
onChange={nameChange}
width="10%"
style={{
width: 340,
marginLeft: "3%",
backgroundColor: "white",
}}
>
{customerList.map((customer) => (
<MenuItem
key={customer.id}
value={customer.customerName}
>
{customer.customerName}
</MenuItem>
))}
</Select>
</FormControl>

<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
APPROVER LISTS
</h5>

<FormControl sx={{ m: 1, minWidth: 280, width: "75%" }}>
<InputLabel id="demo-simple-select-helper-label">
Select Name
</InputLabel>
<Select
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={value}
label="Select Name"
onChange={handlenameChange}
style={{
width: 340,
marginLeft: "3%",
backgroundColor: "white",
}}
>
{approverList.map((approver) => (
<MenuItem
key={approver.id}
value={approver.approverName}
>
{approver.approverName}
</MenuItem>
))}
</Select>
</FormControl>
</Paper>
</Box>
</Grid>

<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "rgba(0, 0, 0, 0.06)",
overflow: "auto",
marginLeft: "-8px",
},
}}
>
<Paper variant="outlined">
<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
JURISDICTION
</h5>
<FormControl>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
defaultValue={selectedRadio}
name="radio-buttons-group"
>
<FormControlLabel
value="State Compliance"
control={<Radio />}
label="State"
style={{ marginLeft: "10px" }}
onChange={handleRadioChange}
/>
<FormControlLabel
value="Federal Compliance"
control={<Radio />}
label="Federal"
style={{ marginLeft: "10px" }}
onChange={handleRadioChange}
/>
</RadioGroup>
</FormControl>
{selectedRadio == "State Compliance" ? (
<FormControl fullWidth variant="filled">
<InputLabel id="state-label">Select State</InputLabel>
<Select
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={selectedState}
onChange={stateChange}
style={{
width: 340,
marginLeft: "3%",
backgroundColor: "white",
}}
renderValue={(selected) => selected.join(", ")}
>
{states.map((item) => (
<MenuItem key={item.code} value={item.state}>
<Checkbox
checked={selectedState.indexOf(item.state) > -1}
// <Checkbox checked={personName.indexOf(name) > -1} />
/>
{item.state}
</MenuItem>
))}
</Select>
</FormControl>
) : (
""
)}
</Paper>
</Box>
</Grid>
<Grid style={{ marginTop: "200px" }}>
<button
style={{
backgroundColor: "#0000ff",
border: 0,
padding: "5px",
width: "50px",
borderRadius: "5px",
}}
>
<TurnRightIcon
onClick={collectApproverData}
style={{ color: "white" }}
/>
</button>
</Grid>
<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "rgba(0, 0, 0, 0.06)",
overflow: "auto",
border: 0,
},
}}
>
<Paper variant="outlined">
<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
SELECTED APPROVER
</h5>
<div>
{selectedApproverData.map((obj) => (
<div style={{ margin: "0px 20px 20px 20px" }}>
<div>
<p>{obj.client}</p>
<div>
<table style={{ width: "100%" }}>
{obj.states.map((state) => (
<div>
{state.approvers.map((ele, i) => (
<tr
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
}}
>
<td style={{ width: "30%" }}>
{i < 1 && <div>{state.state} </div>}
</td>

<div
style={{
width: "70%",
display: "flex",
justifyContent: "space-between",
}}
>
<td>
<Checkbox
onChange={(e) =>
isDefaultChange(e, i)
}
/>
{ele.ApproverName}
</td>
<td>
<DeleteIcon
onClick={() => {
handleDelete(
obj.client,
state.state,
ele.ApproverName
);
}}
/>
</td>
</div>
</tr>
))}{" "}
</div>
))}
</table>
</div>
</div>
</div>
))}
</div>
</Paper>
</Box>

<br></br>

<Grid style={{ display: "flex" }}>
<button
style={{
padding: "10px 20px",
marginLeft: "60px",
border: "none",
color: "blue",
}}
onClick={handleReset}
>
RESET
</button>

<button
style={{
padding: "8px 30px",
marginLeft: "30px",
backgroundColor: "blue",
color: "white",
border: "1px",
borderRadius: "3px",
}}
onClick={sendApprover}
>
SUBMIT
</button>
</Grid>
</Grid>
</Grid>
</TabPanel>
<TabPanel value="2">
<Grid style={{ display: "flex" }}>
<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "rgba(0, 0, 0, 0.06)",
overflow: "auto",
border: 0,
},
}}
>
<Paper variant="outlined">
<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
APPROVER LISTS
</h5>

<FormControl sx={{ m: 1, minWidth: 280, width: "75%" }}>
<InputLabel id="demo-simple-select-helper-label">
Select Name
</InputLabel>
<Select
labelId="demo-simple-select-helper-label"
id="demo-simple-select-helper"
value={masterApproverList}
label="Select Name"
onChange={handleMasterApproverList}
style={{
width: 340,
marginLeft: "3%",
backgroundColor: "white",
}}
>
{approverList.map((approver) => (
<MenuItem
key={approver.id}
value={approver.approverName}
>
{approver.approverName}
</MenuItem>
))}
</Select>
</FormControl>
</Paper>
</Box>
</Grid>

<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "rgba(0, 0, 0, 0.06)",
overflow: "auto",
marginLeft: "-8px",
},
}}
>
<Paper variant="outlined">
<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
JURISDICTION
</h5>
<FormControl>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
defaultValue={masterSelectedRadio}
name="radio-buttons-group"
>
<FormControlLabel
value="State Compliance"
control={<Radio />}
label="State"
style={{ marginLeft: "10px" }}
onChange={handleMasterRadioChange}
/>
<FormControlLabel
value="Federal Compliance"
control={<Radio />}
label="Federal"
style={{ marginLeft: "10px" }}
onChange={handleMasterRadioChange}
/>
</RadioGroup>
</FormControl>
{masterSelectedRadio == "State Compliance" ? (
<FormControl fullWidth variant="filled">
<InputLabel id="state-label">Select State</InputLabel>
<Select
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={masterSelectedState}
onChange={masterStateChange}
style={{
width: 340,
marginLeft: "3%",
backgroundColor: "white",
}}
renderValue={(selected) => selected.join(", ")}
>
{states.map((item) => (
<MenuItem key={item.code} value={item.state}>
<Checkbox
checked={
masterSelectedState.indexOf(item.state) > -1
}
// <Checkbox checked={personName.indexOf(name) > -1} />
/>
{item.state}
</MenuItem>
))}
</Select>
</FormControl>
) : (
""
)}
</Paper>
</Box>
</Grid>
<Grid style={{ marginTop: "200px" }}>
<button
style={{
backgroundColor: "#0000ff",
border: 0,
padding: "5px",
width: "50px",
borderRadius: "5px",
}}
>
<TurnRightIcon
onClick={collectMasterApproverData}
style={{ color: "white" }}
/>
</button>
</Grid>

<Grid>
<Box
sx={{
display: "flex",
"& > :not(style)": {
m: 1,
width: 368,
height: 368,
backgroundColor: "rgba(0, 0, 0, 0.06)",
overflow: "auto",
border: 0,
},
}}
>
<Paper variant="outlined">
<h5
style={{
marginLeft: "20px",
fontWeight: "500",
fontSize: "0.9rem",
textColor: "black",
}}
>
SELECTED APPROVER
</h5>
<div>
<div
style={{
display: "flex",
justifyContent: "space-between",
}}
></div>
{masterSelectedApproverData.map((obj) => (
<div style={{ margin: "20px" }}>
<p>{obj.client}</p>
<div>
<div>
{obj.states.map((state, i) => (
<div>
<table style={{ display: "flex" }}>
<tr
style={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
}}
>
<td style={{ width: "30%" }}>{state}</td>
<td>
<Checkbox
onChange={(e) =>
isDefaultMasterChange(e, i)
}
/>
{obj.ApproverName}
</td>
<td>
<DeleteIcon
onClick={() => {
handleMasterDelete(state);
}}
/>
</td>
</tr>
</table>
</div>
))}
</div>
</div>
</div>
))}
</div>
</Paper>
</Box>

<br></br>

<Grid style={{ display: "flex" }}>
<button
style={{
padding: "10px 20px",
marginLeft: "60px",
border: "none",
color: "blue",
}}
onClick={handleMasterReset}
>
RESET
</button>

<button
style={{
padding: "8px 30px",
marginLeft: "30px",
backgroundColor: "blue",
color: "white",
border: "1px",
borderRadius: "3px",
}}
onClick={sendMasterApprover}
>
SUBMIT
</button>
</Grid>
</Grid>
</Grid>
</TabPanel>
</TabContext>
<ConfirmDialog />
<AlertDialog deleteFunc={deleteFunc} />
</div>
);
}