import { Link } from 'react-router-dom'; import { useState, useEffect } from 'react'; import { useDispatch } from 'react-redux'; import { setPageTitle } from '../../../store/themeConfigSlice'; import IconX from '../../../components/Icon/IconX'; import IconSend from '../../../components/Icon/IconSend'; import IconSave from '../../../components/Icon/IconSave'; import IconEye from '../../../components/Icon/IconEye'; import IconDownload from '../../../components/Icon/IconDownload'; const Edit = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Invoice Edit')); }); const currencyList = ['USD - US Dollar', 'GBP - British Pound', 'IDR - Indonesian Rupiah', 'INR - Indian Rupee', 'BRL - Brazilian Real', 'EUR - Germany (Euro)', 'TRY - Turkish Lira']; const [tax, setTax] = useState(0); const [discount, setDiscount] = useState(0); const [shippingCharge, setShippingCharge] = useState(0); const [paymentMethod, setPaymentMethod] = useState('bank'); const [items, setItems] = useState([ { id: 1, title: 'Calendar App Customization', description: 'Make Calendar App Dynamic', quantity: 2, amount: 120, isTax: false, }, { id: 2, title: 'Chat App Customization', description: 'Customized Chat Application to resolve some Bug Fixes', quantity: 1, amount: 25, isTax: false, }, ]); const [selectedCurrency, setSelectedCurrency] = useState('USD - US Dollar'); const [params, setParams] = useState({ title: 'Tailwind', invoiceNo: '#0001', to: { name: 'Jesse Cory', email: 'redq@company.com', address: '405 Mulberry Rd. Mc Grady, NC, 28649', phone: '(128) 666 070', }, invoiceDate: '', dueDate: '', bankInfo: { no: '1234567890', name: 'Bank of America', swiftCode: 'VS70134', country: 'United States', ibanNo: 'K456G', }, notes: 'It was a pleasure working with you and your team. We hope you will keep us in mind for future freelance projects. Thank You!', }); useEffect(() => { let dt: Date = new Date(); const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1; let date = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate(); setParams({ ...params, invoiceDate: dt.getFullYear() + '-' + month + '-' + date, dueDate: dt.getFullYear() + '-' + month + '-' + date, }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const addItem = () => { let maxId = 0; maxId = items?.length ? items.reduce((max: number, character: any) => (character.id > max ? character.id : max), items[0].id) : 0; setItems([...items, { id: maxId + 1, title: '', description: '', rate: 0, quantity: 0, amount: 0 }]); }; const removeItem = (item: any = null) => { setItems(items.filter((d: any) => d.id !== item.id)); }; const changeQuantityPrice = (type: string, value: string, id: number) => { // const list = items; const item = items.find((d: any) => d.id === id); if (type === 'quantity') { item.quantity = Number(value); } if (type === 'price') { item.amount = Number(value); } setItems([...items]); }; return (

13 Tetrick Road, Cypress Gardens, Florida, 33884, US

vristo@gmail.com

+1 (070) 123-4567

Invoice Number

Invoice Label

Invoice Date

Due Date

Bill To :-

Name

Address

Phone Number

Payment Details:

Account Number

Bank Name

SWIFT Number

IBAN Number

Country

{items.length <= 0 && ( )} {items.map((item: any, index: any) => { return ( ); })}

Item	Quantity	Price	Total
No Item Available
	changeQuantityPrice('quantity', e.target.value, item.id)} />	changeQuantityPrice('price', e.target.value, item.id)} />	${item.quantity * item.amount}

Subtotal

$265.00

Tax(%)

Shipping Rate($)

$0.00

Discount(%)

Total

$265.00

Notes

Currency

Tax(%) setTax(e.target.value)} />

Discount(%) setDiscount(e.target.value)} />

Shipping Charge($) setShippingCharge(e.target.value)} />

Accept Payment Via

Preview

); }; export default Edit;