feat: invoice generator

components/settings/business-settings-form.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { saveProfileAction } from "@/app/(app)/settings/actions"
+import { FormError } from "@/components/forms/error"
+import { FormAvatar, FormInput, FormTextarea } from "@/components/forms/simple"
+import { Button } from "@/components/ui/button"
+import { User } from "@/prisma/client"
+import { CircleCheckBig } from "lucide-react"
+import { useActionState } from "react"
+
+export default function BusinessSettingsForm({ user }: { user: User }) {
+  const [saveState, saveAction, pending] = useActionState(saveProfileAction, null)
+
+  return (
+    <div>
+      <form action={saveAction} className="space-y-4">
+        <FormInput
+          title="Business Name"
+          name="businessName"
+          placeholder="Acme Inc."
+          defaultValue={user.businessName ?? ""}
+        />
+
+        <FormTextarea
+          title="Business Address"
+          name="businessAddress"
+          placeholder="Street, City, State, Zip Code, Country, Tax ID"
+          defaultValue={user.businessAddress ?? ""}
+        />
+
+        <FormTextarea
+          title="Bank Details"
+          name="businessBankDetails"
+          placeholder="Bank Name, Account Number, BIC, IBAN, details of payment, etc."
+          defaultValue={user.businessBankDetails ?? ""}
+        />
+
+        <FormAvatar
+          title="Business Logo"
+          name="businessLogo"
+          className="w-52 h-52"
+          defaultValue={user.businessLogo ?? ""}
+        />
+
+        <div className="flex flex-row items-center gap-4">
+          <Button type="submit" disabled={pending}>
+            {pending ? "Saving..." : "Save"}
+          </Button>
+          {saveState?.success && (
+            <p className="text-green-500 flex flex-row items-center gap-2">
+              <CircleCheckBig />
+              Saved!
+            </p>
+          )}
+        </div>
+
+        {saveState?.error && <FormError>{saveState.error}</FormError>}
+      </form>
+    </div>
+  )
+}

components/settings/profile-settings-form.tsx

@@ -2,7 +2,7 @@
 
 import { saveProfileAction } from "@/app/(app)/settings/actions"
 import { FormError } from "@/components/forms/error"
-import { FormInput } from "@/components/forms/simple"
+import { FormAvatar, FormInput } from "@/components/forms/simple"
 import { Button } from "@/components/ui/button"
 import { User } from "@/prisma/client"
 import { CircleCheckBig } from "lucide-react"
@@ -15,7 +15,9 @@ export default function ProfileSettingsForm({ user }: { user: User }) {
   return (
     <div>
       <form action={saveAction} className="space-y-4">
-        <FormInput title="Your Name" name="name" defaultValue={user.name || ""} />
+        <FormAvatar title="Avatar" name="avatar" className="w-24 h-24" defaultValue={user.avatar || ""} />
+
+        <FormInput title="Account Name" name="name" defaultValue={user.name || ""} />
 
         <div className="flex flex-row items-center gap-4">
           <Button type="submit" disabled={pending}>