@hed-hog/contact 0.0.303 → 0.0.305

package/hedhog/frontend/app/person/_components/person-import-sheet.tsx.ejs

@@ -0,0 +1,1120 @@
+'use client';
+
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { EntityPicker } from '@/components/ui/entity-picker';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { cn } from '@/lib/utils';
+import { useApp } from '@hed-hog/next-app-provider';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronLeft,
+  ChevronRight,
+  FileSpreadsheet,
+  FileText,
+  Loader2,
+  Upload,
+  X,
+  XCircle,
+} from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+type ImportPreview = {
+  fileName: string;
+  totalEstimated: number;
+  columns: string[];
+  preview: Record<string, string>[];
+};
+
+type ImportResult = {
+  imported: number;
+  skipped: number;
+  errors: Array<{ row: number; message: string }>;
+};
+
+type ColumnMapping = Record<string, string>;
+
+type CompanyOption = {
+  id: number;
+  name: string;
+  trade_name?: string | null;
+};
+
+type WizardStep = 'upload' | 'preview' | 'mapping' | 'confirm' | 'result';
+
+// ─── CRM Field Definitions ───────────────────────────────────────────────────
+
+type CrmFieldDef = {
+  value: string;
+  labelKey: string;
+  allowMultiple?: boolean;
+};
+
+const CRM_FIELDS: CrmFieldDef[] = [
+  { value: '_ignore', labelKey: 'importMappingIgnore' },
+  { value: 'name', labelKey: 'importFieldName' },
+  { value: 'type', labelKey: 'importFieldType' },
+  { value: 'status', labelKey: 'importFieldStatus' },
+  { value: 'email', labelKey: 'importFieldEmail' },
+  { value: 'phone', labelKey: 'importFieldPhone' },
+  { value: 'mobile', labelKey: 'importFieldMobile' },
+  { value: 'cpf', labelKey: 'importFieldCpf' },
+  { value: 'cnpj', labelKey: 'importFieldCnpj' },
+  { value: 'job_title', labelKey: 'importFieldJobTitle' },
+  { value: 'company_name', labelKey: 'importFieldCompanyName' },
+  { value: 'trade_name', labelKey: 'importFieldTradeName' },
+  { value: 'website', labelKey: 'importFieldWebsite' },
+  { value: 'notes', labelKey: 'importFieldNotes' },
+  { value: 'source', labelKey: 'importFieldSource' },
+  { value: 'address_street', labelKey: 'importFieldAddressStreet' },
+  { value: 'address_city', labelKey: 'importFieldAddressCity' },
+  { value: 'address_state', labelKey: 'importFieldAddressState' },
+  { value: 'address_zip', labelKey: 'importFieldAddressZip' },
+  { value: 'address_country', labelKey: 'importFieldAddressCountry' },
+];
+
+// Fields that should not be duplicated (mapped to more than one CSV column)
+const UNIQUE_FIELDS = CRM_FIELDS.filter((f) => f.value !== '_ignore').map(
+  (f) => f.value
+);
+
+// ─── Step indicator ──────────────────────────────────────────────────────────
+
+const STEPS: { key: WizardStep; labelKey: string; icon: React.ElementType }[] =
+  [
+    { key: 'upload', labelKey: 'importStepUpload', icon: Upload },
+    { key: 'preview', labelKey: 'importStepPreview', icon: FileText },
+    { key: 'mapping', labelKey: 'importStepMapping', icon: FileSpreadsheet },
+    { key: 'confirm', labelKey: 'importStepConfirm', icon: CheckCircle2 },
+    { key: 'result', labelKey: 'importStepResult', icon: CheckCircle2 },
+  ];
+
+function StepIndicator({ current }: { current: WizardStep }) {
+  const t = useTranslations('contact.ContactPage');
+  const currentIndex = STEPS.findIndex((s) => s.key === current);
+
+  return (
+    <div className="grid grid-cols-5 gap-1.5 px-4 py-3 border-b bg-muted/30">
+      {STEPS.map((step, index) => {
+        const Icon = step.icon;
+        const isCurrent = step.key === current;
+        const isPast = index < currentIndex;
+
+        return (
+          <div
+            key={step.key}
+            className={cn(
+              'flex flex-col items-center gap-1 rounded-xl border px-1.5 py-2 text-center transition-colors',
+              isCurrent
+                ? 'border-primary bg-primary/10 text-primary'
+                : isPast
+                  ? 'border-green-500/30 bg-green-500/10 text-green-600'
+                  : 'border-border/50 bg-transparent text-muted-foreground'
+            )}
+          >
+            {isPast ? (
+              <CheckCircle2 className="size-3.5" />
+            ) : (
+              <Icon className="size-3.5" />
+            )}
+            <span className="text-[10px] font-medium leading-tight hidden sm:block">
+              {t(step.labelKey as any)}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Step 0: Upload ──────────────────────────────────────────────────────────
+
+function UploadStep({
+  file,
+  onFileChange,
+  error,
+}: {
+  file: File | null;
+  onFileChange: (f: File | null) => void;
+  error: string | null;
+}) {
+  const t = useTranslations('contact.ContactPage');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files?.[0] ?? null;
+    if (selected) {
+      const ext = selected.name.split('.').pop()?.toLowerCase();
+      if (ext !== 'csv') {
+        onFileChange(null);
+        return;
+      }
+    }
+    onFileChange(selected);
+    e.target.value = '';
+  };
+
+  return (
+    <div className="space-y-4">
+      <label
+        className={cn(
+          'flex cursor-pointer flex-col items-center justify-center gap-3 rounded-2xl border-2 border-dashed px-4 py-10 text-center transition-colors',
+          file
+            ? 'border-primary/40 bg-primary/5'
+            : 'border-border hover:border-primary/40 hover:bg-accent/20'
+        )}
+      >
+        <div
+          className={cn(
+            'flex h-12 w-12 items-center justify-center rounded-xl border',
+            file ? 'border-primary/30 bg-primary/10' : 'border-border bg-muted'
+          )}
+        >
+          <FileSpreadsheet
+            className={cn(
+              'size-6',
+              file ? 'text-primary' : 'text-muted-foreground'
+            )}
+          />
+        </div>
+
+        {file ? (
+          <div className="space-y-1">
+            <p className="text-sm font-semibold text-foreground">{file.name}</p>
+            <p className="text-xs text-muted-foreground">
+              {t('importFileSelected')}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-1">
+            <p className="text-sm font-semibold text-foreground">
+              {t('importDropzoneLabel')}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {t('importDropzoneHint')}
+            </p>
+          </div>
+        )}
+
+        {file && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-7 rounded-lg text-xs"
+            onClick={(e) => {
+              e.preventDefault();
+              inputRef.current?.click();
+            }}
+          >
+            <Upload className="mr-1.5 h-3 w-3" />
+            {t('importDropzoneChange')}
+          </Button>
+        )}
+
+        <input
+          ref={inputRef}
+          type="file"
+          accept=".csv,text/csv"
+          className="hidden"
+          onChange={handleFileChange}
+        />
+      </label>
+
+      {error && (
+        <Alert variant="destructive" className="py-2">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription className="text-xs">{error}</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+}
+
+// ─── Step 1: Preview ─────────────────────────────────────────────────────────
+
+function PreviewStep({
+  preview,
+  isLoading,
+  error,
+}: {
+  preview: ImportPreview | null;
+  isLoading: boolean;
+  error: string | null;
+}) {
+  const t = useTranslations('contact.ContactPage');
+  if (isLoading) {
+    return (
+      <div className="space-y-3">
+        <Skeleton className="h-5 w-32" />
+        <Skeleton className="h-40 w-full rounded-xl" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="destructive" className="py-2">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertDescription className="text-xs">{error}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (!preview) return null;
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        <div className="flex items-center gap-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2">
+          <FileText className="h-4 w-4 text-muted-foreground" />
+          <div>
+            <p className="text-[10px] font-medium tracking-widest text-muted-foreground uppercase">
+              {t('importConfirmFile')}
+            </p>
+            <p className="text-xs font-semibold text-foreground truncate max-w-40">
+              {preview.fileName}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2">
+          <FileSpreadsheet className="h-4 w-4 text-muted-foreground" />
+          <div>
+            <p className="text-[10px] font-medium tracking-widest text-muted-foreground uppercase">
+              {t('importTotalEstimated')}
+            </p>
+            <p className="text-xs font-semibold text-foreground">
+              {preview.totalEstimated.toLocaleString()}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2 rounded-xl border border-border/70 bg-muted/30 px-3 py-2">
+          <CheckCircle2 className="h-4 w-4 text-muted-foreground" />
+          <div>
+            <p className="text-[10px] font-medium tracking-widest text-muted-foreground uppercase">
+              {t('importColumnsDetected')}
+            </p>
+            <p className="text-xs font-semibold text-foreground">
+              {preview.columns.length}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <p className="mb-2 text-xs font-medium text-muted-foreground">
+          {t('importPreviewDescription')}
+        </p>
+        <div className="overflow-x-auto rounded-xl border border-border/70">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/40">
+                {preview.columns.map((col) => (
+                  <TableHead
+                    key={col}
+                    className="whitespace-nowrap text-xs font-semibold"
+                  >
+                    {col}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {preview.preview.slice(0, 5).map((row, i) => (
+                <TableRow key={i} className="text-xs">
+                  {preview.columns.map((col) => (
+                    <TableCell key={col} className="max-w-32 truncate py-1.5">
+                      {row[col] || (
+                        <span className="text-muted-foreground/50">—</span>
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 2: Mapping ─────────────────────────────────────────────────────────
+
+function MappingStep({
+  columns,
+  mapping,
+  onMappingChange,
+  validationError,
+}: {
+  columns: string[];
+  mapping: ColumnMapping;
+  onMappingChange: (mapping: ColumnMapping) => void;
+  validationError: string | null;
+}) {
+  const t = useTranslations('contact.ContactPage');
+  const mappedValues = useMemo(
+    () => Object.values(mapping).filter((v) => v !== '_ignore'),
+    [mapping]
+  );
+
+  const duplicateFields = useMemo(() => {
+    const counts: Record<string, number> = {};
+    for (const val of mappedValues) {
+      counts[val] = (counts[val] ?? 0) + 1;
+    }
+    return Object.entries(counts)
+      .filter(([, count]) => count > 1)
+      .map(([field]) => field);
+  }, [mappedValues]);
+
+  const handleChange = (csvCol: string, crmField: string) => {
+    onMappingChange({ ...mapping, [csvCol]: crmField });
+  };
+
+  return (
+    <div className="space-y-3">
+      {validationError && (
+        <Alert variant="destructive" className="py-2">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription className="text-xs">
+            {validationError}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {duplicateFields.length > 0 && (
+        <Alert className="border-amber-500/30 bg-amber-500/10 py-2">
+          <AlertTriangle className="h-4 w-4 text-amber-600" />
+          <AlertDescription className="text-xs text-amber-700">
+            {duplicateFields
+              .map((field) => {
+                const fieldDef = CRM_FIELDS.find((f) => f.value === field);
+                const label = fieldDef ? t(fieldDef.labelKey as any) : field;
+                return t('importMappingDuplicateWarning', { field: label });
+              })
+              .join(' ')}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="rounded-xl border border-border/70 overflow-hidden">
+        <div className="grid grid-cols-2 gap-0 bg-muted/40 px-3 py-2 border-b text-xs font-semibold text-muted-foreground uppercase tracking-widest">
+          <span>{t('importMappingColumnLabel')}</span>
+          <span>{t('importMappingFieldLabel')}</span>
+        </div>
+        <div className="divide-y divide-border/50">
+          {columns.map((col) => {
+            const currentValue = mapping[col] ?? '_ignore';
+            const isDuplicate =
+              currentValue !== '_ignore' &&
+              UNIQUE_FIELDS.includes(currentValue) &&
+              duplicateFields.includes(currentValue);
+
+            return (
+              <div
+                key={col}
+                className={cn(
+                  'grid grid-cols-2 items-center gap-3 px-3 py-2',
+                  isDuplicate && 'bg-amber-500/5'
+                )}
+              >
+                <div className="flex items-center gap-2 min-w-0">
+                  {isDuplicate && (
+                    <AlertTriangle className="h-3 w-3 shrink-0 text-amber-500" />
+                  )}
+                  <span className="truncate text-sm font-medium">{col}</span>
+                  {currentValue === '_ignore' && (
+                    <Badge
+                      variant="outline"
+                      className="shrink-0 border-border/50 text-[10px] text-muted-foreground px-1.5 py-0"
+                    >
+                      {t('importMappingIgnore')}
+                    </Badge>
+                  )}
+                </div>
+                <Select
+                  value={currentValue}
+                  onValueChange={(val) => handleChange(col, val)}
+                >
+                  <SelectTrigger
+                    className={cn(
+                      'h-8 text-xs w-full',
+                      isDuplicate && 'border-amber-500/50 bg-amber-500/5'
+                    )}
+                  >
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {CRM_FIELDS.map((field) => (
+                      <SelectItem
+                        key={field.value}
+                        value={field.value}
+                        className="text-xs"
+                      >
+                        {t(field.labelKey as any)}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 3: Confirm ─────────────────────────────────────────────────────────
+
+function ConfirmStep({
+  preview,
+  mapping,
+  companyId,
+  onCompanyChange,
+}: {
+  preview: ImportPreview;
+  mapping: ColumnMapping;
+  companyId: number | null;
+  onCompanyChange: (id: number | null) => void;
+}) {
+  const t = useTranslations('contact.ContactPage');
+  const { request } = useApp();
+  const mappedFields = Object.entries(mapping).filter(
+    ([, v]) => v !== '_ignore'
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Summary cards */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between rounded-xl border border-border/70 bg-muted/30 px-3 py-2">
+          <span className="text-xs text-muted-foreground">
+            {t('importConfirmFile')}
+          </span>
+          <span className="text-xs font-semibold truncate max-w-48">
+            {preview.fileName}
+          </span>
+        </div>
+        <div className="flex items-center justify-between rounded-xl border border-border/70 bg-muted/30 px-3 py-2">
+          <span className="text-xs text-muted-foreground">
+            {t('importTotalEstimated')}
+          </span>
+          <span className="text-xs font-semibold">
+            {preview.totalEstimated.toLocaleString()}
+          </span>
+        </div>
+        <div className="flex items-center justify-between rounded-xl border border-border/70 bg-muted/30 px-3 py-2">
+          <span className="text-xs text-muted-foreground">
+            {t('importConfirmMappedFields')}
+          </span>
+          <span className="text-xs font-semibold">{mappedFields.length}</span>
+        </div>
+      </div>
+
+      {/* Mapping summary */}
+      <div className="rounded-xl border border-border/70 overflow-hidden">
+        <div className="bg-muted/40 px-3 py-2 border-b">
+          <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            {t('importMappingTitle')}
+          </p>
+        </div>
+        <div className="divide-y divide-border/50 max-h-36 overflow-y-auto">
+          {mappedFields.map(([col, field]) => {
+            const fieldDef = CRM_FIELDS.find((f) => f.value === field);
+            return (
+              <div
+                key={col}
+                className="flex items-center justify-between px-3 py-1.5"
+              >
+                <span className="text-xs text-muted-foreground truncate">
+                  {col}
+                </span>
+                <Badge
+                  variant="outline"
+                  className="text-[10px] border-primary/30 bg-primary/5 text-primary px-1.5 py-0"
+                >
+                  {fieldDef ? t(fieldDef.labelKey as any) : field}
+                </Badge>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Optional company */}
+      <div className="space-y-2">
+        <p className="text-xs font-medium text-foreground">
+          {t('importConfirmCompanyLabel')}
+        </p>
+        <EntityPicker
+          placeholder={t('importConfirmCompanyPlaceholder')}
+          value={companyId}
+          clearable
+          allowEmptySelection
+          emptySelectionLabel={t('importConfirmNoCompany')}
+          createTitle={t('importCreateCompanyTitle')}
+          createDescription={t('importCreateCompanyDescription')}
+          onChange={(val) => {
+            onCompanyChange(val ? Number(val) : null);
+          }}
+          getOptionValue={(opt) => (opt as any).id}
+          getOptionLabel={(opt) => (opt as any).name ?? ''}
+          getOptionDescription={(opt) => (opt as any).trade_name ?? undefined}
+          loadOptions={async ({ page, pageSize, search }) => {
+            const params = new URLSearchParams({
+              page: String(page),
+              pageSize: String(pageSize),
+              type: 'company',
+            });
+            if (search) params.set('search', search);
+            const res = await request<{
+              data: CompanyOption[];
+              total: number;
+            }>({ url: `/person?${params}`, method: 'GET' });
+            return {
+              items: res.data.data ?? [],
+              hasMore: (res.data.total ?? 0) > page * pageSize,
+            };
+          }}
+          mapSearchToCreateValues={(search) => ({ name: search })}
+          onCreate={async (values) => {
+            const res = await request<CompanyOption>({
+              url: '/person/accounts',
+              method: 'POST',
+              data: {
+                name: values.name,
+                trade_name: values.trade_name || null,
+                status: 'active',
+              },
+            });
+            return res.data as unknown as CompanyOption &
+              Record<string, unknown>;
+          }}
+          renderCreateContent={(ctx) => (
+            <div className="mt-6 space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="new-company-name">
+                  {t('importCreateCompanyName')}
+                  <span className="ml-1 text-destructive">*</span>
+                </Label>
+                <Input
+                  id="new-company-name"
+                  value={ctx.values.name ?? ''}
+                  placeholder={t('importCreateCompanyNamePlaceholder')}
+                  onChange={(e) => ctx.setValue('name', e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && ctx.values.name?.trim()) {
+                      e.preventDefault();
+                      void ctx.submitCreate();
+                    }
+                  }}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="new-company-trade-name">
+                  {t('importCreateCompanyTradeName')}
+                </Label>
+                <Input
+                  id="new-company-trade-name"
+                  value={ctx.values.trade_name ?? ''}
+                  placeholder={t('importCreateCompanyTradeNamePlaceholder')}
+                  onChange={(e) => ctx.setValue('trade_name', e.target.value)}
+                />
+              </div>
+              <div className="flex justify-end gap-2 pt-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={ctx.closeCreate}
+                >
+                  {t('cancel')}
+                </Button>
+                <Button
+                  type="button"
+                  disabled={ctx.isCreating || !ctx.values.name?.trim()}
+                  onClick={() => void ctx.submitCreate()}
+                >
+                  {ctx.isCreating && (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  )}
+                  {t('importCreateCompanySave')}
+                </Button>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Step 4: Result ──────────────────────────────────────────────────────────
+
+function ResultStep({
+  result,
+  isLoading,
+  error,
+}: {
+  result: ImportResult | null;
+  isLoading: boolean;
+  error: string | null;
+}) {
+  const t = useTranslations('contact.ContactPage');
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 py-12 text-center">
+        <Loader2 className="h-10 w-10 animate-spin text-primary" />
+        <p className="text-sm font-medium text-muted-foreground">
+          {t('importStart')}…
+        </p>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <Alert variant="destructive" className="py-2">
+        <XCircle className="h-4 w-4" />
+        <AlertDescription className="text-xs">{error}</AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (!result) return null;
+
+  const hasErrors = result.errors.length > 0;
+
+  return (
+    <div className="space-y-4">
+      <div
+        className={cn(
+          'flex items-center gap-3 rounded-xl border px-4 py-3',
+          !hasErrors
+            ? 'border-green-500/30 bg-green-500/10'
+            : 'border-amber-500/30 bg-amber-500/10'
+        )}
+      >
+        {!hasErrors ? (
+          <CheckCircle2 className="h-5 w-5 shrink-0 text-green-600" />
+        ) : (
+          <AlertTriangle className="h-5 w-5 shrink-0 text-amber-600" />
+        )}
+        <p
+          className={cn(
+            'text-sm font-semibold',
+            !hasErrors ? 'text-green-700' : 'text-amber-700'
+          )}
+        >
+          {!hasErrors
+            ? t('importResultSuccess')
+            : t('importResultPartial', {
+                imported: result.imported,
+                errors: result.errors.length,
+              })}
+        </p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-2">
+        <div className="flex flex-col items-center rounded-xl border border-green-500/20 bg-green-500/10 px-3 py-3 text-center">
+          <span className="text-xl font-bold text-green-700">
+            {result.imported}
+          </span>
+          <span className="text-[11px] text-green-600">
+            {t('importResultImported')}
+          </span>
+        </div>
+        <div className="flex flex-col items-center rounded-xl border border-slate-500/20 bg-slate-500/10 px-3 py-3 text-center">
+          <span className="text-xl font-bold text-slate-600">
+            {result.skipped}
+          </span>
+          <span className="text-[11px] text-slate-500">
+            {t('importResultSkipped')}
+          </span>
+        </div>
+        <div className="flex flex-col items-center rounded-xl border border-red-500/20 bg-red-500/10 px-3 py-3 text-center">
+          <span className="text-xl font-bold text-red-600">
+            {result.errors.length}
+          </span>
+          <span className="text-[11px] text-red-500">
+            {t('importResultErrors')}
+          </span>
+        </div>
+      </div>
+
+      {hasErrors && (
+        <div className="space-y-1.5">
+          <p className="text-xs font-semibold text-muted-foreground uppercase tracking-widest">
+            {t('importResultErrorsLabel')}
+          </p>
+          <div className="max-h-40 overflow-y-auto rounded-xl border border-red-500/20 divide-y divide-border/50">
+            {result.errors.slice(0, 50).map((err) => (
+              <div key={err.row} className="flex items-start gap-2 px-3 py-1.5">
+                <span className="shrink-0 text-[10px] font-semibold text-red-500 mt-0.5">
+                  {t('importResultRow', { row: err.row })}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {err.message}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main Sheet ──────────────────────────────────────────────────────────────
+
+export type PersonImportSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+  initialCompanyId?: number | null;
+};
+
+export function PersonImportSheet({
+  open,
+  onOpenChange,
+  onSuccess,
+  initialCompanyId = null,
+}: PersonImportSheetProps) {
+  const t = useTranslations('contact.ContactPage');
+  const { request } = useApp();
+
+  // Wizard state
+  const [step, setStep] = useState<WizardStep>('upload');
+
+  // Step 0: Upload
+  const [file, setFile] = useState<File | null>(null);
+  const [uploadError, setUploadError] = useState<string | null>(null);
+
+  // Step 1: Preview
+  const [preview, setPreview] = useState<ImportPreview | null>(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+
+  // Step 2: Mapping
+  const [mapping, setMapping] = useState<ColumnMapping>({});
+  const [mappingError, setMappingError] = useState<string | null>(null);
+
+  // Step 3: Confirm
+  const [companyId, setCompanyId] = useState<number | null>(initialCompanyId);
+
+  // Step 4: Result
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const [importLoading, setImportLoading] = useState(false);
+  const [importError, setImportError] = useState<string | null>(null);
+
+  // ── Reset on open ──
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) {
+        // Reset all state when closing
+        setStep('upload');
+        setFile(null);
+        setUploadError(null);
+        setPreview(null);
+        setPreviewError(null);
+        setPreviewLoading(false);
+        setMapping({});
+        setMappingError(null);
+        setCompanyId(initialCompanyId);
+        setResult(null);
+        setImportError(null);
+        setImportLoading(false);
+      }
+      onOpenChange(nextOpen);
+    },
+    [onOpenChange]
+  );
+
+  // ── Auto-initialise mapping from columns ──
+  const initMapping = useCallback((columns: string[]) => {
+    const initial: ColumnMapping = {};
+    columns.forEach((col) => {
+      initial[col] = '_ignore';
+    });
+    setMapping(initial);
+  }, []);
+
+  // ── Navigation ──
+  const canGoNext = (): boolean => {
+    if (step === 'upload') return !!file;
+    if (step === 'preview') return !!preview && !previewError;
+    if (step === 'mapping') {
+      const hasName = Object.values(mapping).includes('name');
+      return hasName;
+    }
+    if (step === 'confirm') return true;
+    return false;
+  };
+
+  const handleNext = async () => {
+    if (step === 'upload') {
+      if (!file) {
+        setUploadError(t('importErrorFileRequired'));
+        return;
+      }
+      const MAX_FILE_SIZE = 10 * 1024 * 1024;
+      if (file.size > MAX_FILE_SIZE) {
+        setUploadError(t('importErrorFileTooLarge'));
+        return;
+      }
+      setUploadError(null);
+      await fetchPreview();
+    } else if (step === 'preview') {
+      setStep('mapping');
+    } else if (step === 'mapping') {
+      const hasName = Object.values(mapping).includes('name');
+      if (!hasName) {
+        setMappingError(t('importMappingNameRequired'));
+        return;
+      }
+      setMappingError(null);
+      setStep('confirm');
+    } else if (step === 'confirm') {
+      await runImport();
+    }
+  };
+
+  const handleBack = () => {
+    if (step === 'preview') setStep('upload');
+    else if (step === 'mapping') setStep('preview');
+    else if (step === 'confirm') setStep('mapping');
+  };
+
+  // ── Fetch preview ──
+  const fetchPreview = async () => {
+    if (!file) return;
+    setPreviewLoading(true);
+    setPreviewError(null);
+    setStep('preview');
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      const res = await request<ImportPreview>({
+        url: '/person/import/preview',
+        method: 'POST',
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+
+      setPreview(res.data);
+      initMapping(res.data.columns);
+    } catch (err: any) {
+      const msg =
+        err?.response?.data?.message ?? err?.message ?? t('importErrorGeneric');
+      setPreviewError(msg);
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  // ── Run import ──
+  const runImport = async () => {
+    if (!file) return;
+    setImportLoading(true);
+    setImportError(null);
+    setStep('result');
+
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('mapping', JSON.stringify(mapping));
+      if (companyId) formData.append('company_id', String(companyId));
+
+      const res = await request<ImportResult>({
+        url: '/person/import',
+        method: 'POST',
+        data: formData,
+        headers: { 'Content-Type': 'multipart/form-data' },
+      });
+
+      setResult(res.data);
+      onSuccess();
+    } catch (err: any) {
+      const msg =
+        err?.response?.data?.message ?? err?.message ?? t('importErrorGeneric');
+      setImportError(msg);
+    } finally {
+      setImportLoading(false);
+    }
+  };
+
+  const isLastActionStep = step === 'confirm';
+  const showBack = step !== 'upload' && step !== 'result';
+
+  return (
+    <Sheet open={open} onOpenChange={handleOpenChange}>
+      <SheetContent className="flex h-full w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl">
+        {/* Header */}
+        <SheetHeader className="border-b px-4 py-4 text-left">
+          <div className="flex items-center gap-3">
+            <div className="flex h-9 w-9 items-center justify-center rounded-xl border border-primary/20 bg-primary/10">
+              <Upload className="h-4 w-4 text-primary" />
+            </div>
+            <div>
+              <SheetTitle className="text-base">
+                {t('importSheetTitle')}
+              </SheetTitle>
+              <SheetDescription className="text-xs">
+                {t('importSheetDescription')}
+              </SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        {/* Step indicator */}
+        <StepIndicator current={step} />
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-4 py-4">
+          {step === 'upload' && (
+            <UploadStep
+              file={file}
+              onFileChange={(f) => {
+                setFile(f);
+                setUploadError(null);
+              }}
+              error={uploadError}
+            />
+          )}
+
+          {step === 'preview' && (
+            <PreviewStep
+              preview={preview}
+              isLoading={previewLoading}
+              error={previewError}
+            />
+          )}
+
+          {step === 'mapping' && preview && (
+            <MappingStep
+              columns={preview.columns}
+              mapping={mapping}
+              onMappingChange={(m) => {
+                setMapping(m);
+                setMappingError(null);
+              }}
+              validationError={mappingError}
+            />
+          )}
+
+          {step === 'confirm' && preview && (
+            <ConfirmStep
+              preview={preview}
+              mapping={mapping}
+              companyId={companyId}
+              onCompanyChange={(id) => setCompanyId(id)}
+            />
+          )}
+
+          {step === 'result' && (
+            <ResultStep
+              result={result}
+              isLoading={importLoading}
+              error={importError}
+            />
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between border-t px-4 py-3">
+          <div>
+            {showBack && (
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={handleBack}
+                disabled={previewLoading || importLoading}
+              >
+                <ChevronLeft className="mr-1 h-4 w-4" />
+                {t('importBack')}
+              </Button>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {step === 'result' ? (
+              <Button
+                type="button"
+                size="sm"
+                onClick={() => handleOpenChange(false)}
+              >
+                {t('importClose')}
+              </Button>
+            ) : (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() => handleOpenChange(false)}
+                  disabled={previewLoading || importLoading}
+                >
+                  <X className="mr-1 h-4 w-4" />
+                  {t('cancel')}
+                </Button>
+                <Button
+                  type="button"
+                  size="sm"
+                  onClick={handleNext}
+                  disabled={!canGoNext() || previewLoading || importLoading}
+                >
+                  {previewLoading || importLoading ? (
+                    <Loader2 className="mr-1 h-4 w-4 animate-spin" />
+                  ) : isLastActionStep ? null : (
+                    <ChevronRight className="ml-1 h-4 w-4 order-last" />
+                  )}
+                  {isLastActionStep ? (
+                    <>
+                      <Upload className="mr-1.5 h-4 w-4" />
+                      {t('importStart')}
+                    </>
+                  ) : (
+                    t('importNext')
+                  )}
+                </Button>
+              </>
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}