63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import { InputNumber } from 'antd'
|
|
import { useState } from 'react'
|
|
import { Button } from '../../elements/Button'
|
|
|
|
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 htmlType="button">cancel</Button>
|
|
<Button htmlType="submit">Submit</Button>
|
|
</label>
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|