Reference UI fix (#132)

* feat: display invoice references as tags instead of plain text

Replace the single-line text input for "Er referens" with a tag-style
input that lets users add/remove individual references as chips. Updates
the detail page, review modal, and PDF template to render comma-separated
references as wrapped badge/tag elements instead of a single string.

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

* Fixed our reference field

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/(dashboard)/invoices/[id]/page.tsx

@@ -613,15 +613,27 @@ export default function InvoiceDetailPage({ params }: { params: Promise<{ id: st
                 </span>
               </div>
               {invoice.your_reference && (
-                <div className="flex justify-between">
+                <div className="space-y-1">
                   <span className="text-muted-foreground">Er referens</span>
-                  <span>{invoice.your_reference}</span>
+                  <div className="flex flex-wrap gap-1">
+                    {invoice.your_reference.split(',').map((ref, i) => (
+                      <Badge key={i} variant="secondary" className="text-xs font-normal">
+                        {ref.trim()}
+                      </Badge>
+                    ))}
+                  </div>
                 </div>
               )}
               {invoice.our_reference && (
-                <div className="flex justify-between">
+                <div className="space-y-1">
                   <span className="text-muted-foreground">Vår referens</span>
-                  <span>{invoice.our_reference}</span>
+                  <div className="flex flex-wrap gap-1">
+                    {invoice.our_reference.split(',').map((ref, i) => (
+                      <Badge key={i} variant="secondary" className="text-xs font-normal">
+                        {ref.trim()}
+                      </Badge>
+                    ))}
+                  </div>
                 </div>
               )}
             </CardContent>

app/(dashboard)/invoices/new/page.tsx

@@ -10,6 +10,7 @@ import { addDays, format } from 'date-fns'
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
+import { TagInput } from '@/components/ui/tag-input'
 import { Label } from '@/components/ui/label'
 import { Textarea } from '@/components/ui/textarea'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
@@ -653,15 +654,32 @@ export default function NewInvoicePage() {
 
                 <div className="space-y-2">
                   <Label>Er referens</Label>
-                  <Input
-                    placeholder="Kontaktperson hos kund"
-                    {...register('your_reference')}
+                  <Controller
+                    name="your_reference"
+                    control={control}
+                    render={({ field }) => (
+                      <TagInput
+                        value={field.value ?? ''}
+                        onChange={field.onChange}
+                        placeholder="Kontaktperson hos kund"
+                      />
+                    )}
                   />
                 </div>
 
                 <div className="space-y-2">
                   <Label>Vår referens</Label>
-                  <Input placeholder="Ditt namn" {...register('our_reference')} />
+                  <Controller
+                    name="our_reference"
+                    control={control}
+                    render={({ field }) => (
+                      <TagInput
+                        value={field.value ?? ''}
+                        onChange={field.onChange}
+                        placeholder="Ditt namn"
+                      />
+                    )}
+                  />
                 </div>
               </CardContent>
             </Card>