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.
69 lines
2.0 KiB
69 lines
2.0 KiB
import React, { useState } from 'react' |
|
import { Account } from '../types' |
|
|
|
import { message } from 'antd' |
|
import { useStacks } from '../hooks/getMany/useStacks' |
|
|
|
type Props = { |
|
account?: Account |
|
} |
|
|
|
export const AccountForm = ({ account }: Props) => { |
|
const stacks = useStacks() |
|
|
|
const [name, setName] = useState<string>(account?.name || '') |
|
const [details, setDetails] = useState<string>(account?.details || '') |
|
const [income, setIncome] = useState<number>(account?.income || 0) |
|
const [expenses, setExpenses] = useState<number>(account?.expenses || 0) |
|
|
|
const handleSubmit = async (e: React.FormEvent) => { |
|
e.preventDefault() |
|
if (!name || !income || !expenses) message.error(`fill out all the fields!`) |
|
|
|
message.success('Yaaa') |
|
} |
|
|
|
return ( |
|
<> |
|
<h1>{account?.id ? 'Budget Details' : 'Create Budget'}</h1> |
|
<form className="dank-form" onSubmit={handleSubmit}> |
|
<h3>General</h3> |
|
<label> |
|
Name: |
|
<input onChange={(e) => setName(e.target.value)} value={name}></input> |
|
</label> |
|
<label> |
|
Description (optional): |
|
<input |
|
type="text" |
|
onChange={(e) => setDetails(e.target.value)} |
|
value={details} |
|
></input> |
|
</label> |
|
<h3>Income & Expenses</h3> |
|
<label> |
|
Monthly Income: |
|
<input |
|
onChange={(e) => setIncome(parseInt(e.target.value) || 0)} |
|
value={income} |
|
></input> |
|
</label> |
|
<label> |
|
Monthly Expenses: |
|
<input |
|
onChange={(e) => setExpenses(parseInt(e.target.value) || 0)} |
|
value={expenses} |
|
></input> |
|
</label> |
|
<h3>Budgets</h3> |
|
{stacks.data?.map((stack) => ( |
|
<div key={stack.details} className="form-item"> |
|
<label>{stack.name}</label> |
|
<input type="number" value={stack.amount}></input> |
|
</div> |
|
))} |
|
<button type="submit">{account?.id ? 'Save' : 'Create'}</button> |
|
</form> |
|
</> |
|
) |
|
}
|
|
|