Notes

import React from 'react';
import './AdjustmentCalculation.css';
import { useState } from "react";
import { useSelector, useDispatch } from 'react-redux';
import { Button, Link, Typography, Checkbox } from '@qbe/ui-core';
import Scrollup from '../../Assets/Icon/UpArrow.svg'
import Scrolldown from '../../Assets/Icon/DownArrow.svg'
import { Modal } from '../../Components/Modal/Modal.js';
import { Link as Link2, useNavigate } from "react-router-dom";
import { SaveForLater } from '../Modals/SaveForLater.js';
import { setSaveForLaterModalState } from "../../Redux/Slices/modalSlice.js"
import { Adjustment } from '../Modals/Adjustment.js';
import BackToDashbaord from "../../Components/BackToDashboard/BackToDashboard.js"




export const CalculatePremium = ({ reviewPremium }) => {

const navigate = useNavigate();
const dispatch = useDispatch();

const isSaveForLaterModalActive = useSelector((state) => state.modal.isSaveForLaterModalActive);
const [isHidden, setIsHidden] = useState(false);

const [isSaveForLater, setSaveForLater] = useState(false);
const [isAdjustmentModalActive, setAdjustmentModalActive] = useState(false); // State for the Adjustment modal


const toggleVisibility = () => {
setIsHidden(!isHidden);
};

return (
<>

<div className='Adjustment-premium-top-section' >
<BackToDashbaord path="/policydashboard/policydetails/" backTo={"Policy Details"} />
</div>
<div className="Adjustment-premium-container">
<div className="Adjustment-premium-main">
<Modal shown={isSaveForLaterModalActive}><SaveForLater /></Modal>
</div>
<div className='Adjustment-premium-header'>
<Typography variant="h1" className='Adjustment-premium-header-text'>
Make an adjustment
</Typography>
<Typography variant="h1" className='Adjustment-premium-company'>
Performance Services Pty Ltd - May 2024
</Typography>
</div>
<div className="adjustment-receipts-container">
<table className="adjustment-receipts-table">
<thead>
<tr>
<th className='adjustment-premium-theader'><Typography variant="label2" className='adjustment-receipts-table-header'>Category</Typography></th>
<th className='adjustment-premium-theader'><Typography variant="label2" className='adjustment-receipts-table-header'>Current Enrollment</Typography></th>
<th className='adjustment-premium-theader'><Typography variant="label2" className='adjustment-receipts-table-header'>Adjustment</Typography></th>
<th className='adjustment-premium-theader'><Typography variant="label2" className='adjustment-receipts-table-header'>Updated Enrollment</Typography></th>
<th className='adjustment-premium-theader'><Typography variant="label2" className='adjustment-receipts-table-header'>Rate</Typography></th>
<th className='adjustment-premium-theader'><Typography variant="label2" className='adjustment-receipts-table-header'> Adjustment Premium</Typography></th>
</tr>
</thead>
<tbody>
<tr className='adjustment-receipts-table-row'>
<Typography variant="label2" className='adjustment-receipts-table-label'>
Specific Coverage
</Typography>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>

</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Single</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"10"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>9</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"1"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>10</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$110.10</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$110.10</Typography></td>
</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Family</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"10"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>2</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"1"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>1</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$35.05</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$35.05</Typography></td>
</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Employee</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"0"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>0</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"0"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>-</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$70.00</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Forth</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"0"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>0</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"0"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>-</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$10.00</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr className='adjustment-receipts-table-row'>
<Typography variant="label2" className='adjustment-receipts-table-label'
>
Aggregate Coverage
</Typography>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>
<td><Typography variant="body1" className='adjustment-receipts-table-row'></Typography></td>

</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Composite</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"10"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>10</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"1"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>11</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$7.93</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$7.93</Typography></td>
</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Aggregate Accomodation</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"10"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>10</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"1"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>11</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$1.52</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$1.52</Typography></td>
</tr>
<tr className='adjustment-receipts-table-data'>
<td><Typography variant="body1" className='adjustment-receipts-table-body'>Third</Typography></td>
<td>
{/* <input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"0"} /> */}
<td><Typography variant="label1" className='adjustment-receipts-table-body'>0</Typography></td>
</td>
<td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-dash-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1z" />
</svg>
<input type='textbox' className='adjustment-receipts-table-textfield adjustment-receipts-table-body' value={"0"} />
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(0, 61, 165)" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
</svg>
</td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>-</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$10.00</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-body'>$0.00</Typography></td>
</tr>
<tr className='adjustment-receipts-table-total'>
<td></td>
<td></td>
<td></td>
<td></td>
<td><Typography variant="body1" className='adjustment-receipts-table-sum'

>Total</Typography></td>
<td><Typography variant="label1" className='adjustment-receipts-table-sum'

>$119.55</Typography></td>
</tr>
</tbody>
</table>
<table className="adjustment-summary-container">
<tr>
<Typography variant="h5" className='adjustment-summary-container-header'
sx={(theme) => ({
marginTop: "20px",
marginLeft: "20px",
})}
>
Adjustment summary
</Typography>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Single</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$110.10</Typography></td>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Family</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$35.05</Typography></td>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Composite</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$7.93</Typography></td>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Aggregate Accomodation</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$1.52</Typography></td>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Management fee</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$0.00</Typography></td>
</tr>
<hr className='hr-line-calc-adjustment' />

<tr>
<td className={'adjustment-summary-container-row'}>
<Typography variant="label1" weight="semibold" className='adjustment-summary-container-deduction'
>
Deductions
</Typography>
</td>
<td className='adjustment-summary-container-row'>
{isHidden ?
<img src={Scrolldown} alt="expand" className='Adjustment-premium-header-scroll'
onClick={toggleVisibility} /> :

<img src={Scrollup} alt="collapse" className='Adjustment-premium-header-scroll'
onClick={toggleVisibility} />
}
</td>
</tr>
<tr className={isHidden ? 'hidden' : ''}>
<td className='adjustment-summary-container-row'><Checkbox checked id="chkPercentage" label="Percentage of Premium (10%)" name="chkPercentage" size="small" className='adjustment-receipts-table-body' /></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>($11.96)</Typography></td>
</tr>
<tr className={isHidden ? 'hidden' : ''}>
<td className='adjustment-summary-container-row'><Checkbox id="chkEmployee" label="Employee (0.50/per employee%)" name="chkEmployee" size="small" className='adjustment-receipts-table-body' /></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>-</Typography></td>
</tr>
<tr className={isHidden ? 'hidden' : ''}>
<td className='adjustment-summary-container-row'><Checkbox id="chkrate" label="Flat rate per month" name="chkrate" size="small" className='adjustment-receipts-table-body' /></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>-</Typography></td>
</tr>
<hr className={isHidden ? 'hidden' : 'hr-line-calc-adjustment'} />
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Gross premium</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$119.55</Typography></td>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-receipts-table-body'>Premium deductions</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-receipts-table-body'>$11.96</Typography></td>
</tr>
<tr>
<td className='adjustment-summary-container-row'><Typography variant="body1" className='adjustment-summary-container-deduction'>Net premium</Typography></td>
<td className='adjustment-summary-container-row'><Typography variant="label1" className='adjustment-summary-container-deduction'>$107.59</Typography></td>
</tr>
<div>
<div className='adjustment-receipts-table-button'>
<Button variant='secondary-on-light' onClick={() => dispatch(setSaveForLaterModalState(true))} label="Save for later" className='' />
<Link2 to="/adjustmentcalculation/reviewadjustment"> <Button variant='primary-on-light' label="Review & pay" className='' /></Link2>
</div>
<div className='delete-adjustment'>
<td className='delete-adjustment-row'> <a onClick={() => setAdjustmentModalActive(true)} >Delete adjustment</a>
<Modal shown={isAdjustmentModalActive}>

<Adjustment close={() => setAdjustmentModalActive(false)} /></Modal>
</td>
</div>
</div>
</table>
</div>
</div>

</>
);
}
export default CalculatePremium;