adserver-dashboard 1.0.0

package/client/src/components/inventory/csv-upload-modal.tsx

@@ -0,0 +1,639 @@
+import { useState, useCallback, useRef, useMemo } from 'react';
+import Papa from 'papaparse';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@moving-walls/design-system';
+import { Button, cn } from '@moving-walls/design-system';
+import { Select } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import {
+  Upload,
+  FileSpreadsheet,
+  X,
+  ChevronLeft,
+  ChevronRight,
+  Check,
+  AlertCircle,
+  CheckCircle,
+  Loader2,
+  FileText,
+  Table2,
+  AlertTriangle,
+} from 'lucide-react';
+
+type Step = 'upload' | 'mapping' | 'validation' | 'complete';
+
+interface ColumnMapping {
+  name: string | null;
+  address: string | null;
+  latitude: string | null;
+  longitude: string | null;
+  mediaOwner: string | null;
+  type: string | null;
+  size: string | null;
+}
+
+interface ValidationError {
+  row: number;
+  column: string;
+  message: string;
+}
+
+interface ParsedInventoryItem {
+  name?: string;
+  address?: string;
+  latitude?: number;
+  longitude?: number;
+  mediaOwner?: string;
+  type?: string;
+  size?: string;
+  [key: string]: string | number | undefined;
+}
+
+export interface CSVUploadModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onComplete?: (data: ParsedInventoryItem[]) => void;
+  onCancel?: () => void;
+}
+
+const REQUIRED_FIELDS = ['name', 'address', 'latitude', 'longitude'];
+const OPTIONAL_FIELDS = ['mediaOwner', 'type', 'size'];
+const ALL_FIELDS = [...REQUIRED_FIELDS, ...OPTIONAL_FIELDS];
+
+const FIELD_LABELS: Record<string, string> = {
+  name: 'Name',
+  address: 'Address',
+  latitude: 'Latitude',
+  longitude: 'Longitude',
+  mediaOwner: 'Media Owner',
+  type: 'Type',
+  size: 'Size',
+};
+
+const STEP_TITLES: Record<Step, string> = {
+  upload: 'Upload CSV',
+  mapping: 'Preview & Mapping',
+  validation: 'Validation',
+  complete: 'Import Complete',
+};
+
+function autoDetectColumn(headers: string[], targetField: string): string | null {
+  const patterns: Record<string, RegExp[]> = {
+    name: [/^name$/i, /^screen.?name$/i, /^inventory.?name$/i, /^title$/i],
+    address: [/^address$/i, /^location$/i, /^street$/i, /^full.?address$/i],
+    latitude: [/^lat$/i, /^latitude$/i, /^lat.?coord$/i],
+    longitude: [/^lon$/i, /^lng$/i, /^longitude$/i, /^long$/i, /^lon.?coord$/i],
+    mediaOwner: [/^media.?owner$/i, /^owner$/i, /^publisher$/i, /^vendor$/i],
+    type: [/^type$/i, /^screen.?type$/i, /^format$/i, /^category$/i],
+    size: [/^size$/i, /^dimension$/i, /^resolution$/i, /^screen.?size$/i],
+  };
+
+  const fieldPatterns = patterns[targetField] || [];
+  for (const header of headers) {
+    for (const pattern of fieldPatterns) {
+      if (pattern.test(header)) {
+        return header;
+      }
+    }
+  }
+  return null;
+}
+
+export function CSVUploadModal({
+  open,
+  onOpenChange,
+  onComplete,
+  onCancel,
+}: CSVUploadModalProps) {
+  const [currentStep, setCurrentStep] = useState<Step>('upload');
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [dragActive, setDragActive] = useState(false);
+  const [parsedData, setParsedData] = useState<Record<string, string>[]>([]);
+  const [headers, setHeaders] = useState<string[]>([]);
+  const [columnMapping, setColumnMapping] = useState<ColumnMapping>({
+    name: null,
+    address: null,
+    latitude: null,
+    longitude: null,
+    mediaOwner: null,
+    type: null,
+    size: null,
+  });
+  const [validationErrors, setValidationErrors] = useState<ValidationError[]>([]);
+  const [isValidating, setIsValidating] = useState(false);
+  const [importedCount, setImportedCount] = useState(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDrag = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  }, []);
+
+  const parseCSVFile = (file: File) => {
+    Papa.parse(file, {
+      header: true,
+      skipEmptyLines: true,
+      complete: (results) => {
+        const data = results.data as Record<string, string>[];
+        const csvHeaders = results.meta.fields || [];
+        
+        setParsedData(data);
+        setHeaders(csvHeaders);
+
+        const autoMapping: ColumnMapping = {
+          name: autoDetectColumn(csvHeaders, 'name'),
+          address: autoDetectColumn(csvHeaders, 'address'),
+          latitude: autoDetectColumn(csvHeaders, 'latitude'),
+          longitude: autoDetectColumn(csvHeaders, 'longitude'),
+          mediaOwner: autoDetectColumn(csvHeaders, 'mediaOwner'),
+          type: autoDetectColumn(csvHeaders, 'type'),
+          size: autoDetectColumn(csvHeaders, 'size'),
+        };
+        setColumnMapping(autoMapping);
+        setCurrentStep('mapping');
+      },
+      error: (error) => {
+        console.error('CSV parsing error:', error);
+      },
+    });
+  };
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const file = e.dataTransfer.files[0];
+      if (file.type === 'text/csv' || file.name.endsWith('.csv')) {
+        setSelectedFile(file);
+        parseCSVFile(file);
+      }
+    }
+  }, []);
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0];
+      setSelectedFile(file);
+      parseCSVFile(file);
+    }
+  };
+
+  const handleMappingChange = (field: keyof ColumnMapping, value: string | null) => {
+    setColumnMapping((prev) => ({
+      ...prev,
+      [field]: value === '' ? null : value,
+    }));
+  };
+
+  const validateData = useCallback(() => {
+    setIsValidating(true);
+    const errors: ValidationError[] = [];
+
+    parsedData.forEach((row, index) => {
+      const rowNum = index + 2;
+
+      if (columnMapping.name) {
+        const nameValue = row[columnMapping.name];
+        if (!nameValue || nameValue.trim() === '') {
+          errors.push({ row: rowNum, column: 'Name', message: 'Name is required' });
+        }
+      } else {
+        errors.push({ row: rowNum, column: 'Name', message: 'Name column not mapped' });
+      }
+
+      if (columnMapping.latitude) {
+        const latValue = row[columnMapping.latitude];
+        if (latValue) {
+          const lat = parseFloat(latValue);
+          if (isNaN(lat) || lat < -90 || lat > 90) {
+            errors.push({ row: rowNum, column: 'Latitude', message: `Invalid latitude value: ${latValue}` });
+          }
+        }
+      }
+
+      if (columnMapping.longitude) {
+        const lngValue = row[columnMapping.longitude];
+        if (lngValue) {
+          const lng = parseFloat(lngValue);
+          if (isNaN(lng) || lng < -180 || lng > 180) {
+            errors.push({ row: rowNum, column: 'Longitude', message: `Invalid longitude value: ${lngValue}` });
+          }
+        }
+      }
+    });
+
+    setValidationErrors(errors);
+    setIsValidating(false);
+    setCurrentStep('validation');
+  }, [parsedData, columnMapping]);
+
+  const handleImport = useCallback(() => {
+    const importedItems: ParsedInventoryItem[] = parsedData.map((row) => ({
+      name: columnMapping.name ? row[columnMapping.name] : undefined,
+      address: columnMapping.address ? row[columnMapping.address] : undefined,
+      latitude: columnMapping.latitude ? parseFloat(row[columnMapping.latitude]) : undefined,
+      longitude: columnMapping.longitude ? parseFloat(row[columnMapping.longitude]) : undefined,
+      mediaOwner: columnMapping.mediaOwner ? row[columnMapping.mediaOwner] : undefined,
+      type: columnMapping.type ? row[columnMapping.type] : undefined,
+      size: columnMapping.size ? row[columnMapping.size] : undefined,
+    }));
+
+    setImportedCount(importedItems.length);
+    setCurrentStep('complete');
+    onComplete?.(importedItems);
+  }, [parsedData, columnMapping, onComplete]);
+
+  const handleClose = useCallback(() => {
+    setCurrentStep('upload');
+    setSelectedFile(null);
+    setParsedData([]);
+    setHeaders([]);
+    setColumnMapping({
+      name: null,
+      address: null,
+      latitude: null,
+      longitude: null,
+      mediaOwner: null,
+      type: null,
+      size: null,
+    });
+    setValidationErrors([]);
+    setImportedCount(0);
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    handleClose();
+  }, [onCancel, handleClose]);
+
+  const handleBack = useCallback(() => {
+    if (currentStep === 'mapping') {
+      setCurrentStep('upload');
+      setSelectedFile(null);
+      setParsedData([]);
+      setHeaders([]);
+    } else if (currentStep === 'validation') {
+      setCurrentStep('mapping');
+    }
+  }, [currentStep]);
+
+  const previewData = useMemo(() => parsedData.slice(0, 5), [parsedData]);
+
+  const mappedFieldsCount = useMemo(() => {
+    return Object.values(columnMapping).filter((v) => v !== null).length;
+  }, [columnMapping]);
+
+  const requiredFieldsMapped = useMemo(() => {
+    return REQUIRED_FIELDS.every(
+      (field) => columnMapping[field as keyof ColumnMapping] !== null
+    );
+  }, [columnMapping]);
+
+  const renderUploadStep = () => (
+    <div className="space-y-6 py-6">
+      <div
+        className={cn(
+          'border-2 border-dashed rounded-lg p-8 text-center transition-colors cursor-pointer',
+          dragActive
+            ? 'border-mw-primary-500 bg-mw-primary-50'
+            : 'border-mw-neutral-300 hover:border-mw-neutral-400'
+        )}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <Upload className="h-12 w-12 text-mw-neutral-400 mx-auto mb-4" />
+        <p className="text-sm text-mw-neutral-700 mb-2">
+          Drag and drop your CSV file here, or{' '}
+          <span className="text-mw-primary-500 font-medium">click to browse</span>
+        </p>
+        <p className="text-xs text-mw-neutral-500">Supported format: CSV</p>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept=".csv"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+      </div>
+
+      <div className="flex justify-end gap-3">
+        <Button variant="outline" onClick={handleCancel}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+
+  const renderMappingStep = () => (
+    <div className="space-y-6 py-4">
+      <div className="flex items-center gap-3 p-3 bg-mw-neutral-50 rounded-lg">
+        <FileText className="h-5 w-5 text-mw-primary-500" />
+        <div>
+          <p className="text-sm font-medium text-mw-neutral-900">{selectedFile?.name}</p>
+          <p className="text-xs text-mw-neutral-500">
+            {parsedData.length} rows found • {headers.length} columns detected
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h4 className="text-sm font-medium text-mw-neutral-900">Column Mapping</h4>
+        <div className="grid grid-cols-2 gap-4">
+          {ALL_FIELDS.map((field) => (
+            <div key={field} className="space-y-1.5">
+              <label className="text-xs font-medium text-mw-neutral-700 flex items-center gap-1">
+                {FIELD_LABELS[field]}
+                {REQUIRED_FIELDS.includes(field) && (
+                  <span className="text-mw-error-500">*</span>
+                )}
+              </label>
+              <Select
+                value={columnMapping[field as keyof ColumnMapping] || ''}
+                onChange={(e) =>
+                  handleMappingChange(field as keyof ColumnMapping, e.target.value)
+                }
+                options={headers.map((header) => ({ value: header, label: header }))}
+                placeholder="Select column..."
+                className="w-full"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-medium text-mw-neutral-900">Preview</h4>
+          <Badge variant="secondary" className="text-xs">
+            Showing first 5 of {parsedData.length} rows
+          </Badge>
+        </div>
+        <div className="border rounded-lg overflow-x-auto">
+          <table className="w-full text-xs">
+            <thead className="bg-mw-neutral-50">
+              <tr>
+                {headers.slice(0, 6).map((header) => (
+                  <th
+                    key={header}
+                    className="px-3 py-2 text-left font-medium text-mw-neutral-700 whitespace-nowrap"
+                  >
+                    {header}
+                  </th>
+                ))}
+                {headers.length > 6 && (
+                  <th className="px-3 py-2 text-left font-medium text-mw-neutral-500">
+                    +{headers.length - 6} more
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-mw-neutral-200">
+              {previewData.map((row, idx) => (
+                <tr key={idx}>
+                  {headers.slice(0, 6).map((header) => (
+                    <td
+                      key={header}
+                      className="px-3 py-2 text-mw-neutral-600 whitespace-nowrap max-w-[150px] truncate"
+                    >
+                      {row[header] || '-'}
+                    </td>
+                  ))}
+                  {headers.length > 6 && <td className="px-3 py-2">...</td>}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="flex justify-between gap-3 pt-2">
+        <Button variant="outline" onClick={handleBack}>
+          <ChevronLeft className="h-4 w-4 mr-1" />
+          Back
+        </Button>
+        <div className="flex gap-3">
+          <Button variant="outline" onClick={handleCancel}>
+            Cancel
+          </Button>
+          <Button onClick={validateData} disabled={!requiredFieldsMapped}>
+            Next
+            <ChevronRight className="h-4 w-4 ml-1" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderValidationStep = () => (
+    <div className="space-y-6 py-4">
+      {isValidating ? (
+        <div className="flex flex-col items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 text-mw-primary-500 animate-spin mb-4" />
+          <p className="text-sm text-mw-neutral-600">Validating data...</p>
+        </div>
+      ) : (
+        <>
+          <div
+            className={cn(
+              'p-4 rounded-lg flex items-start gap-3',
+              validationErrors.length === 0
+                ? 'bg-mw-success-50'
+                : 'bg-mw-warning-50'
+            )}
+          >
+            {validationErrors.length === 0 ? (
+              <>
+                <CheckCircle className="h-5 w-5 text-mw-success-600 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-mw-success-700">
+                    Validation Successful
+                  </p>
+                  <p className="text-xs text-mw-success-600 mt-1">
+                    All {parsedData.length} rows passed validation and are ready to import.
+                  </p>
+                </div>
+              </>
+            ) : (
+              <>
+                <AlertTriangle className="h-5 w-5 text-mw-warning-600 mt-0.5" />
+                <div>
+                  <p className="text-sm font-medium text-mw-warning-700">
+                    Validation Warnings
+                  </p>
+                  <p className="text-xs text-mw-warning-600 mt-1">
+                    Found {validationErrors.length} issue(s) in the data. You can proceed or go back to fix.
+                  </p>
+                </div>
+              </>
+            )}
+          </div>
+
+          {validationErrors.length > 0 && (
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-mw-neutral-900">
+                Issues Found
+              </h4>
+              <div className="border rounded-lg max-h-[200px] overflow-y-auto">
+                <table className="w-full text-xs">
+                  <thead className="bg-mw-neutral-50 sticky top-0">
+                    <tr>
+                      <th className="px-3 py-2 text-left font-medium text-mw-neutral-700">
+                        Row
+                      </th>
+                      <th className="px-3 py-2 text-left font-medium text-mw-neutral-700">
+                        Column
+                      </th>
+                      <th className="px-3 py-2 text-left font-medium text-mw-neutral-700">
+                        Issue
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-mw-neutral-200">
+                    {validationErrors.slice(0, 50).map((error, idx) => (
+                      <tr key={idx}>
+                        <td className="px-3 py-2 text-mw-neutral-600">
+                          {error.row}
+                        </td>
+                        <td className="px-3 py-2 text-mw-neutral-600">
+                          {error.column}
+                        </td>
+                        <td className="px-3 py-2 text-mw-error-600">
+                          {error.message}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+              {validationErrors.length > 50 && (
+                <p className="text-xs text-mw-neutral-500">
+                  Showing first 50 of {validationErrors.length} issues
+                </p>
+              )}
+            </div>
+          )}
+
+          <div className="p-3 bg-mw-neutral-50 rounded-lg">
+            <div className="flex items-center justify-between text-sm">
+              <span className="text-mw-neutral-600">Total rows to import:</span>
+              <span className="font-medium text-mw-neutral-900">
+                {parsedData.length}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex justify-between gap-3 pt-2">
+            <Button variant="outline" onClick={handleBack}>
+              <ChevronLeft className="h-4 w-4 mr-1" />
+              Back
+            </Button>
+            <div className="flex gap-3">
+              <Button variant="outline" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button onClick={handleImport}>
+                Import {parsedData.length} Items
+                <Check className="h-4 w-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  const renderCompleteStep = () => (
+    <div className="space-y-6 py-8">
+      <div className="flex flex-col items-center text-center">
+        <div className="h-16 w-16 rounded-full bg-mw-success-100 flex items-center justify-center mb-4">
+          <CheckCircle className="h-8 w-8 text-mw-success-600" />
+        </div>
+        <h3 className="text-lg font-semibold text-mw-neutral-900 mb-2">
+          Import Successful!
+        </h3>
+        <p className="text-sm text-mw-neutral-600">
+          Successfully imported {importedCount} inventory items.
+        </p>
+      </div>
+
+      <div className="flex justify-center">
+        <Button onClick={handleClose}>Close</Button>
+      </div>
+    </div>
+  );
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 'upload':
+        return renderUploadStep();
+      case 'mapping':
+        return renderMappingStep();
+      case 'validation':
+        return renderValidationStep();
+      case 'complete':
+        return renderCompleteStep();
+      default:
+        return null;
+    }
+  };
+
+  const stepIndicators = ['upload', 'mapping', 'validation', 'complete'] as const;
+  const currentStepIndex = stepIndicators.indexOf(currentStep);
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader className="pb-4 border-b">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-lg bg-mw-primary-100 flex items-center justify-center">
+                <FileSpreadsheet className="h-5 w-5 text-mw-primary-600" />
+              </div>
+              <div>
+                <DialogTitle>{STEP_TITLES[currentStep]}</DialogTitle>
+                <p className="text-xs text-mw-neutral-500 mt-0.5">
+                  Step {currentStepIndex + 1} of 4
+                </p>
+              </div>
+            </div>
+            <Button variant="ghost" size="sm" onClick={handleClose}>
+              <X className="w-4 h-4" />
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-2 mt-4">
+            {stepIndicators.map((step, idx) => (
+              <div key={step} className="flex items-center flex-1">
+                <div
+                  className={cn(
+                    'h-2 flex-1 rounded-full transition-colors',
+                    idx <= currentStepIndex
+                      ? 'bg-mw-primary-500'
+                      : 'bg-mw-neutral-200'
+                  )}
+                />
+              </div>
+            ))}
+          </div>
+        </DialogHeader>
+
+        {renderStepContent()}
+      </DialogContent>
+    </Dialog>
+  );
+}