From b6e32aaae6732d297d016f71c769f91e35907511 Mon Sep 17 00:00:00 2001
From: Mattsson <111893710+mattssonn@users.noreply.github.com>
Date: Fri, 17 Apr 2026 11:45:10 +0200
Subject: [PATCH] Fix/supportarende input (#261)

* fix: update amount input handling to use Controller for better value management

* fix: replace Input with Controller for description field in expense items

* Update app/(dashboard)/expenses/new/page.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update app/(dashboard)/expenses/new/page.tsx

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* fix: restore broken Controller render wrappers in expense items

The previous two web-UI commits stripped the `render={({ field }) => (`
wrapper from the description Controller and the `<Input>` wrapper from
the amount Controller, causing a Turbopack parse error and failed
Vercel build.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/(dashboard)/expenses/new/page.tsx | 64 ++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 16 deletions(-)

diff --git a/app/(dashboard)/expenses/new/page.tsx b/app/(dashboard)/expenses/new/page.tsx
index e121d953..dd8ff5c2 100644
--- a/app/(dashboard)/expenses/new/page.tsx
+++ b/app/(dashboard)/expenses/new/page.tsx
@@ -470,17 +470,35 @@ export default function NewExpensePage() {
                         />
                       </td>
                       <td className="py-2 pr-2">
-                        <Input
-                          placeholder="Beskrivning"
-                          {...register(`items.${index}.description`)}
+                        <Controller
+                          name={`items.${index}.description`}
+                          control={control}
+                          render={({ field }) => (
+                            <Input
+                              placeholder="Beskrivning"
+                              value={field.value || ''}
+                              onChange={field.onChange}
+                              onBlur={field.onBlur}
+                            />
+                          )}
                         />
                       </td>
                       <td className="py-2 pr-2">
-                        <Input
-                          type="number"
-                          step="0.01"
-                          placeholder="0,00"
-                          {...register(`items.${index}.amount`, { valueAsNumber: true })}
+                        <Controller
+                          name={`items.${index}.amount`}
+                          control={control}
+                          render={({ field }) => (
+                            <Input
+                              type="number"
+                              step="0.01"
+                              placeholder="0,00"
+                              value={field.value || ''}
+                              onChange={(e) => {
+                                const parsed = parseFloat(e.target.value)
+                                field.onChange(e.target.value === '' || isNaN(parsed) ? 0 : parsed)
+                              }}
+                            />
+                          )}
                         />
                       </td>
                       <td className="py-2 pr-2">
@@ -560,19 +578,33 @@ export default function NewExpensePage() {
                   </div>
                   <div className="space-y-2">
                     <Label className="text-xs text-muted-foreground">Beskrivning</Label>
-                    <Input
-                      placeholder="Beskrivning"
-                      {...register(`items.${index}.description`)}
+                    <Controller
+                      name={`items.${index}.description`}
+                      control={control}
+                      render={({ field }) => (
+                        <Input
+                          placeholder="Beskrivning"
+                          value={field.value || ''}
+                          onChange={field.onChange}
+                        />
+                      )}
                     />
                   </div>
                   <div className="grid grid-cols-2 gap-3">
                     <div className="space-y-2">
                       <Label className="text-xs text-muted-foreground">Belopp (exkl.)</Label>
-                      <Input
-                        type="number"
-                        step="0.01"
-                        placeholder="0,00"
-                        {...register(`items.${index}.amount`, { valueAsNumber: true })}
+                      <Controller
+                        name={`items.${index}.amount`}
+                        control={control}
+                        render={({ field }) => (
+                          <Input
+                            type="number"
+                            step="0.01"
+                            placeholder="0,00"
+                            value={field.value || ''}
+                            onChange={(e) => field.onChange(e.target.value === '' ? 0 : parseFloat(e.target.value) || 0)}
+                          />
+                        )}
                       />
                     </div>
                     <div className="space-y-2">