feat: enhance accessibility and testing with data-test attributes and improve error handling

packages/features/finance/src/components/create-invoice-form.tsx

@@ -66,7 +66,7 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
     onSuccess: ({ data }) => {
       if (data?.success) {
         toast.success('Rechnung erfolgreich erstellt');
-        router.push(`/home/${account}/finance-cms`);
+        router.push(`/home/${account}/finance/invoices`);
       }
     },
     onError: ({ error }) => {
@@ -98,7 +98,7 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Rechnungsnummer *</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input data-test="invoice-number-input" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -111,7 +111,11 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Rechnungsdatum</FormLabel>
                   <FormControl>
-                    <Input type="date" {...field} />
+                    <Input
+                      type="date"
+                      data-test="invoice-issue-date-input"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -124,7 +128,11 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Fälligkeitsdatum *</FormLabel>
                   <FormControl>
-                    <Input type="date" {...field} />
+                    <Input
+                      type="date"
+                      data-test="invoice-due-date-input"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -145,7 +153,7 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Name *</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input data-test="invoice-recipient-input" {...field} />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -178,6 +186,7 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
                 type="button"
                 variant="outline"
                 size="sm"
+                data-test="invoice-add-item-btn"
                 onClick={() =>
                   append({ description: '', quantity: 1, unitPrice: 0 })
                 }
@@ -287,6 +296,7 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
                       min={0}
                       step="0.5"
                       className="max-w-[120px]"
+                      data-test="invoice-tax-rate-input"
                       {...field}
                       onChange={(e) => field.onChange(Number(e.target.value))}
                     />
@@ -329,10 +339,19 @@ export function CreateInvoiceForm({ accountId, account }: Props) {
         </Card>
 
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="outline" onClick={() => router.back()}>
+          <Button
+            type="button"
+            variant="outline"
+            data-test="invoice-cancel-btn"
+            onClick={() => router.back()}
+          >
             Abbrechen
           </Button>
-          <Button type="submit" disabled={isPending}>
+          <Button
+            type="submit"
+            data-test="invoice-submit-btn"
+            disabled={isPending}
+          >
             {isPending ? 'Wird erstellt...' : 'Rechnung erstellen'}
           </Button>
         </div>

packages/features/finance/src/components/create-sepa-batch-form.tsx

@@ -82,6 +82,7 @@ export function CreateSepaBatchForm({ accountId, account }: Props) {
                   <FormControl>
                     <select
                       {...field}
+                      data-test="sepa-batch-type-select"
                       className="border-input bg-background flex h-10 w-full rounded-md border px-3 py-2 text-sm"
                     >
                       <option value="direct_debit">
@@ -104,6 +105,7 @@ export function CreateSepaBatchForm({ accountId, account }: Props) {
                   <FormControl>
                     <Input
                       placeholder="z.B. Mitgliedsbeiträge Q1 2026"
+                      data-test="sepa-batch-description-input"
                       {...field}
                     />
                   </FormControl>
@@ -119,7 +121,11 @@ export function CreateSepaBatchForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Ausführungsdatum *</FormLabel>
                   <FormControl>
-                    <Input type="date" {...field} />
+                    <Input
+                      type="date"
+                      data-test="sepa-batch-date-input"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -129,10 +135,19 @@ export function CreateSepaBatchForm({ accountId, account }: Props) {
         </Card>
 
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="outline" onClick={() => router.back()}>
+          <Button
+            type="button"
+            variant="outline"
+            data-test="sepa-batch-cancel-btn"
+            onClick={() => router.back()}
+          >
             Abbrechen
           </Button>
-          <Button type="submit" disabled={isPending}>
+          <Button
+            type="submit"
+            data-test="sepa-batch-submit-btn"
+            disabled={isPending}
+          >
             {isPending ? 'Wird erstellt...' : 'Einzug erstellen'}
           </Button>
         </div>