adapting and shit

frontend/src/forms/AccountForm.tsx

@@ -0,0 +1,80 @@
+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!`)
+
+    const body = {
+      name,
+      income,
+      expenses,
+      details,
+    }
+
+    // account?.id
+    //   ? await api.updateAccount(account.id, body)
+    //   : await api.createAccount(body)
+
+    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 &amp; 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>
+    </>
+  )
+}