Add/csv import options (#420)

* feat(import): add customer and supplier parsing functionality - Implemented customer file parsing in `lib/import/customers/parser.ts` with support for Excel and CSV formats. - Created types for detected customer columns and parsed customer rows in `lib/import/customers/types.ts`. - Added tests for customer classification logic in `lib/import/shared/__tests__/classify.test.ts`. - Developed classification functions for customers and suppliers in `lib/import/shared/classify.ts`. - Introduced shared column utility functions in `lib/import/shared/column-utils.ts`. - Implemented supplier file parsing in `lib/import/suppliers/parser.ts` with validation for various fields. - Created types for detected supplier columns and parsed supplier rows in `lib/import/suppliers/types.ts`. - Added tests for supplier column detection and parsing in `lib/import/suppliers/__tests__/column-detector.test.ts` and `lib/import/suppliers/__tests__/parser.test.ts`. * fix(labels): update 'Svenskt företag' to 'Svenskt företag eller organisation' for clarity * feat(import): refactor encoding handling for Swedish files and add tests for character preservation * feat(recapt): implement clearRecaptIdentity function and integrate into logout flow * feat(bookkeeping): implement copy functionality and next voucher sequence retrieval * feat(import): enhance customer and supplier import functionality with normalization and event handling
2026-05-08 15:42:06 +02:00
parent 6c5c49f588
commit 81e9dd224e
62 changed files with 4468 additions and 124 deletions
@@ -0,0 +1,125 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Label } from '@/components/ui/label'
+
+/** A field that can be mapped to a column in the uploaded file. */
+export interface RegisterColumnSpec<K extends string> {
+  key: K
+  label: string
+  required: boolean
+}
+
+interface RegisterColumnMappingStepProps<K extends string> {
+  headers: string[]
+  previewRows: string[][]
+  specs: RegisterColumnSpec<K>[]
+  initial: Record<K, number | null>
+  onConfirm: (mapping: Record<K, number | null>) => void
+  onBack: () => void
+}
+
+export default function RegisterColumnMappingStep<K extends string>({
+  headers,
+  previewRows,
+  specs,
+  initial,
+  onConfirm,
+  onBack,
+}: RegisterColumnMappingStepProps<K>) {
+  const [mapping, setMapping] = useState<Record<K, number | null>>(initial)
+
+  const columnOptions = headers.map((h, i) => ({
+    value: String(i),
+    label: `${i + 1}: ${h || '(tom)'}`,
+  }))
+
+  const canContinue = specs
+    .filter((s) => s.required)
+    .every((s) => mapping[s.key] !== null && mapping[s.key]! >= 0)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Kolumnmappning</CardTitle>
+        <CardDescription>
+          Vi kunde inte automatiskt identifiera alla kolumner. Ange vilka kolumner i din fil
+          som motsvarar respektive fält. Lämna tomt för fält som inte finns.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          {specs.map((spec) => (
+            <div key={spec.key} className="space-y-2">
+              <Label>
+                {spec.label}
+                {spec.required && ' *'}
+              </Label>
+              <Select
+                value={mapping[spec.key] !== null ? String(mapping[spec.key]) : 'none'}
+                onValueChange={(v) =>
+                  setMapping((prev) => ({
+                    ...prev,
+                    [spec.key]: v === 'none' ? null : Number(v),
+                  }))
+                }
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="Välj kolumn" />
+                </SelectTrigger>
+                <SelectContent>
+                  {!spec.required && <SelectItem value="none">(ingen)</SelectItem>}
+                  {columnOptions.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ))}
+        </div>
+
+        {previewRows.length > 0 && (
+          <div className="space-y-2">
+            <Label className="text-muted-foreground">Förhandsgranskning (5 första raderna)</Label>
+            <div className="overflow-x-auto rounded-md border">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b bg-muted/50">
+                    {headers.map((h, i) => (
+                      <th key={i} className="px-3 py-2 text-left font-medium whitespace-nowrap">
+                        {h || `Kolumn ${i + 1}`}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {previewRows.slice(0, 5).map((row, ri) => (
+                    <tr key={ri} className="border-b last:border-0">
+                      {row.map((cell, ci) => (
+                        <td key={ci} className="px-3 py-1.5 whitespace-nowrap">
+                          {cell}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        <div className="flex justify-between">
+          <Button variant="ghost" onClick={onBack}>Tillbaka</Button>
+          <Button onClick={() => onConfirm(mapping)} disabled={!canContinue}>
+            Fortsätt
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}