You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.5 KiB
61 lines
1.5 KiB
import { InputNumber } from 'antd' |
|
import { useState } from 'react' |
|
|
|
import '../../scss/transaction-modal.scss' |
|
type Props = { |
|
stackId: string |
|
} |
|
|
|
export const TransactionForm = ({ stackId }: Props) => { |
|
const [amount, setAmount] = useState(0) |
|
const [stack, setStack] = useState(stackId) |
|
const [details, setDetails] = useState('') |
|
|
|
const handleSubmit = (e: React.FormEvent) => { |
|
e.preventDefault() |
|
|
|
if (!amount) return |
|
|
|
const body = { |
|
stack, |
|
details, |
|
amount: amount, |
|
created_at: new Date().toISOString(), |
|
} |
|
|
|
console.log('creating tx', body) |
|
} |
|
|
|
return ( |
|
<div className="transaction-modal"> |
|
<form onSubmit={handleSubmit} className="form"> |
|
<div className="cancel-button">X</div> |
|
<h3>Expense for {stack} account</h3> |
|
<label> |
|
Amount: |
|
<InputNumber |
|
autoFocus |
|
value={amount} |
|
onChange={(v) => setAmount(v)} |
|
/> |
|
</label> |
|
<label> |
|
Details: |
|
<input |
|
value={details} |
|
onChange={(e) => setDetails(e.currentTarget.value)} |
|
></input> |
|
</label> |
|
<label> |
|
<select value={stack} onChange={(e) => setStack(e.target.value)}> |
|
<option value={-1} disabled> |
|
Select Account |
|
</option> |
|
</select> |
|
<button type="button">cancel</button> |
|
<button type="submit">Submit</button> |
|
</label> |
|
</form> |
|
</div> |
|
) |
|
}
|
|
|