adserver-dashboard 1.0.0

package/client/src/components/line-items/geofencing/components/ExistingFilesTab.tsx

@@ -0,0 +1,268 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button } from '@moving-walls/design-system';
+import { Input } from '@moving-walls/design-system';
+import { Badge } from '@moving-walls/design-system';
+import {
+  Search,
+  Trash2,
+  Eye,
+  Download,
+  Loader2,
+  FileText,
+  MapPin,
+  Calendar,
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@moving-walls/design-system';
+import { fetchGeoImportFiles, deleteGeoImportFile } from '@/store/mapMarkerLocationsSlice';
+import { geoImportApi } from '@/lib/geo-import-api';
+import type { AppDispatch, RootState } from '@/store';
+import type { GeoImportFile } from '@/types/geofencing';
+
+const AlertDialog = Dialog;
+const AlertDialogContent = DialogContent;
+const AlertDialogHeader = DialogHeader;
+const AlertDialogFooter = DialogFooter;
+const AlertDialogTitle = DialogTitle;
+const AlertDialogDescription = DialogDescription;
+const AlertDialogAction = Button;
+const AlertDialogCancel = Button;
+
+interface ExistingFilesTabProps {
+  onViewFile?: (file: GeoImportFile) => void;
+  onSelectFile?: (file: GeoImportFile) => void;
+}
+
+export function ExistingFilesTab({ onViewFile, onSelectFile }: ExistingFilesTabProps) {
+  const dispatch = useDispatch<AppDispatch>();
+  const { files, isLoading, pagination } = useSelector(
+    (state: RootState) => state.mapMarkerLocations
+  );
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [deleteFileId, setDeleteFileId] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchGeoImportFiles({ page: 1, limit: 10 }));
+  }, [dispatch]);
+
+  const handleSearch = () => {
+    dispatch(fetchGeoImportFiles({ page: 1, limit: 10, search: searchQuery }));
+  };
+
+  const handlePageChange = (page: number) => {
+    dispatch(fetchGeoImportFiles({ page, limit: 10, search: searchQuery }));
+  };
+
+  const handleDelete = async () => {
+    if (!deleteFileId) return;
+    setIsDeleting(true);
+    try {
+      await dispatch(deleteGeoImportFile(deleteFileId)).unwrap();
+    } catch (error) {
+      console.error('Failed to delete file:', error);
+    } finally {
+      setIsDeleting(false);
+      setDeleteFileId(null);
+    }
+  };
+
+  const handleDownload = async (file: GeoImportFile) => {
+    try {
+      const blob = await geoImportApi.downloadGeoImportFile(file.id);
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = file.originalName || file.fileName;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Failed to download file:', error);
+    }
+  };
+
+  const getStatusBadge = (status: GeoImportFile['status']) => {
+    const statusConfig = {
+      pending: { variant: 'secondary' as const, label: 'Pending' },
+      processing: { variant: 'primary' as const, label: 'Processing' },
+      completed: { variant: 'success' as const, label: 'Completed' },
+      failed: { variant: 'error' as const, label: 'Failed' },
+    };
+    const config = statusConfig[status] || statusConfig.pending;
+    return <Badge variant={config.variant}>{config.label}</Badge>;
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-mw-neutral-400" />
+          <Input
+            placeholder="Search files..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
+            className="pl-9"
+          />
+        </div>
+        <Button variant="outline" onClick={handleSearch}>
+          Search
+        </Button>
+      </div>
+
+      {isLoading ? (
+        <div className="flex items-center justify-center py-12">
+          <Loader2 className="h-8 w-8 text-mw-primary-500 animate-spin" />
+        </div>
+      ) : files.length === 0 ? (
+        <div className="text-center py-12">
+          <FileText className="h-12 w-12 text-mw-neutral-300 mx-auto mb-3" />
+          <p className="text-sm text-mw-neutral-600">No files found</p>
+          <p className="text-xs text-mw-neutral-500 mt-1">
+            Upload a CSV file to get started
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {files.map((file) => (
+            <div
+              key={file.id}
+              className="bg-white border border-mw-neutral-200 rounded-lg p-4 hover:border-mw-neutral-300 transition-colors"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-2">
+                    <h4 className="text-sm font-medium text-mw-neutral-900 truncate">
+                      {file.originalName || file.fileName}
+                    </h4>
+                    {getStatusBadge(file.status)}
+                  </div>
+                  <div className="flex flex-wrap gap-4 text-xs text-mw-neutral-500">
+                    <span className="flex items-center gap-1">
+                      <MapPin className="h-3.5 w-3.5" />
+                      {file.locationCount} locations
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Calendar className="h-3.5 w-3.5" />
+                      {formatDate(file.uploadedAt)}
+                    </span>
+                    <span className="capitalize">{file.countryName}</span>
+                  </div>
+                </div>
+                <div className="flex items-center gap-1">
+                  {onSelectFile && file.status === 'completed' && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => onSelectFile(file)}
+                    >
+                      Select
+                    </Button>
+                  )}
+                  {onViewFile && file.status === 'completed' && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onViewFile(file)}
+                    >
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                  )}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleDownload(file)}
+                  >
+                    <Download className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setDeleteFileId(file.id)}
+                    className="text-mw-error-500 hover:text-mw-error-600 hover:bg-mw-error-50"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {pagination.totalPages > 1 && (
+        <div className="flex items-center justify-between pt-4 border-t border-mw-neutral-200">
+          <p className="text-xs text-mw-neutral-500">
+            Showing {files.length} of {pagination.total} files
+          </p>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePageChange(pagination.page - 1)}
+              disabled={pagination.page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </Button>
+            <span className="px-3 text-sm text-mw-neutral-600">
+              Page {pagination.page} of {pagination.totalPages}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePageChange(pagination.page + 1)}
+              disabled={pagination.page >= pagination.totalPages}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <AlertDialog open={!!deleteFileId} onOpenChange={() => setDeleteFileId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete File</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this file? This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className="bg-mw-error-500 hover:bg-mw-error-600"
+            >
+              {isDeleting ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                'Delete'
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}

package/client/src/components/line-items/geofencing/components/TemplateDownloadSection.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { Button } from '@moving-walls/design-system';
+import { Download, Loader2, FileSpreadsheet } from 'lucide-react';
+import { geoImportApi } from '@/lib/geo-import-api';
+
+export function TemplateDownloadSection() {
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownloadTemplate = async () => {
+    setIsDownloading(true);
+    try {
+      const blob = await geoImportApi.downloadTemplate();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'geo-import-template.csv';
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+    } catch (error) {
+      console.error('Failed to download template:', error);
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return (
+    <div className="bg-mw-neutral-50 rounded-lg p-4 border border-mw-neutral-200">
+      <div className="flex items-start gap-3">
+        <div className="p-2 bg-white rounded-lg border border-mw-neutral-200">
+          <FileSpreadsheet className="h-5 w-5 text-mw-primary-500" />
+        </div>
+        <div className="flex-1">
+          <h4 className="text-sm font-medium text-mw-neutral-900 mb-1">
+            Download CSV Template
+          </h4>
+          <p className="text-xs text-mw-neutral-600 mb-3">
+            Download the template file to see the required format for uploading locations.
+            The template includes columns for name, latitude, longitude, and optional radius.
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleDownloadTemplate}
+            disabled={isDownloading}
+          >
+            {isDownloading ? (
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+            ) : (
+              <Download className="h-4 w-4 mr-2" />
+            )}
+            Download Template
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/client/src/components/line-items/geofencing/components/UploadTab.tsx

@@ -0,0 +1,215 @@
+import { useState, useCallback, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from '@/lib/i18n';
+import { Button } from '@moving-walls/design-system';
+import { Input } from '@moving-walls/design-system';
+import { Label } from '@moving-walls/design-system';
+import { Select } from '@moving-walls/design-system';
+import { Upload, FileText, X, Loader2, CheckCircle, AlertCircle } from 'lucide-react';
+import { uploadGeoCoordinates } from '@/store/mapMarkerLocationsSlice';
+import { TemplateDownloadSection } from './TemplateDownloadSection';
+import type { AppDispatch, RootState } from '@/store';
+
+const COUNTRIES = [
+  { value: 'malaysia', label: 'Malaysia' },
+  { value: 'singapore', label: 'Singapore' },
+  { value: 'indonesia', label: 'Indonesia' },
+  { value: 'thailand', label: 'Thailand' },
+  { value: 'philippines', label: 'Philippines' },
+  { value: 'vietnam', label: 'Vietnam' },
+  { value: 'india', label: 'India' },
+  { value: 'japan', label: 'Japan' },
+  { value: 'south-korea', label: 'South Korea' },
+  { value: 'australia', label: 'Australia' },
+  { value: 'hong-kong', label: 'Hong Kong' },
+  { value: 'taiwan', label: 'Taiwan' },
+  { value: 'uae', label: 'United Arab Emirates' },
+  { value: 'saudi-arabia', label: 'Saudi Arabia' },
+  { value: 'united-kingdom', label: 'United Kingdom' },
+];
+
+interface UploadTabProps {
+  onUploadSuccess?: () => void;
+}
+
+export function UploadTab({ onUploadSuccess }: UploadTabProps) {
+  const { t } = useTranslation('lineItems');
+  const dispatch = useDispatch<AppDispatch>();
+  const { isUploading, error } = useSelector((state: RootState) => state.mapMarkerLocations);
+  
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [selectedCountry, setSelectedCountry] = useState<string>('');
+  const [uploadStatus, setUploadStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [dragActive, setDragActive] = useState(false);
+  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 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);
+        setUploadStatus('idle');
+      }
+    }
+  }, []);
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files[0]) {
+      setSelectedFile(e.target.files[0]);
+      setUploadStatus('idle');
+    }
+  };
+
+  const handleRemoveFile = () => {
+    setSelectedFile(null);
+    setUploadStatus('idle');
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile || !selectedCountry) return;
+
+    try {
+      await dispatch(uploadGeoCoordinates({ file: selectedFile, countryName: selectedCountry })).unwrap();
+      setUploadStatus('success');
+      setSelectedFile(null);
+      setSelectedCountry('');
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+      onUploadSuccess?.();
+    } catch {
+      setUploadStatus('error');
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <TemplateDownloadSection />
+
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="country" className="text-sm font-medium text-mw-neutral-700 mb-2 block">
+            {t('geofencing.upload.selectCountry')}
+          </Label>
+          <Select
+            value={selectedCountry}
+            onChange={(e) => setSelectedCountry(e.target.value)}
+            options={COUNTRIES}
+            placeholder={t('geofencing.upload.selectCountryPlaceholder')}
+          />
+        </div>
+
+        <div>
+          <Label className="text-sm font-medium text-mw-neutral-700 mb-2 block">
+            {t('geofencing.upload.uploadCsvFile')}
+          </Label>
+          <div
+            className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
+              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}
+          >
+            {selectedFile ? (
+              <div className="flex items-center justify-center gap-3">
+                <FileText className="h-8 w-8 text-mw-primary-500" />
+                <div className="text-left">
+                  <p className="text-sm font-medium text-mw-neutral-900">{selectedFile.name}</p>
+                  <p className="text-xs text-mw-neutral-500">
+                    {(selectedFile.size / 1024).toFixed(2)} KB
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleRemoveFile}
+                  className="ml-2"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+            ) : (
+              <>
+                <Upload className="h-10 w-10 text-mw-neutral-400 mx-auto mb-3" />
+                <p className="text-sm text-mw-neutral-600 mb-2">
+                  {t('geofencing.upload.dragDropCsv')}{' '}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="text-mw-primary-500"
+                  >
+                    {t('geofencing.upload.browse')}
+                  </Button>
+                </p>
+                <p className="text-xs text-mw-neutral-500">
+                  {t('geofencing.upload.supportedFormat')}
+                </p>
+              </>
+            )}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv"
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+          </div>
+        </div>
+
+        {uploadStatus === 'success' && (
+          <div className="flex items-center gap-2 p-3 bg-mw-success-50 text-mw-success-700 rounded-lg">
+            <CheckCircle className="h-5 w-5" />
+            <span className="text-sm">{t('geofencing.upload.uploadSuccess')}</span>
+          </div>
+        )}
+
+        {uploadStatus === 'error' && error && (
+          <div className="flex items-center gap-2 p-3 bg-mw-error-50 text-mw-error-700 rounded-lg">
+            <AlertCircle className="h-5 w-5" />
+            <span className="text-sm">{error}</span>
+          </div>
+        )}
+
+        <Button
+          onClick={handleUpload}
+          disabled={!selectedFile || !selectedCountry || isUploading}
+          className="w-full"
+        >
+          {isUploading ? (
+            <>
+              <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              {t('geofencing.upload.uploading')}
+            </>
+          ) : (
+            <>
+              <Upload className="h-4 w-4 mr-2" />
+              {t('geofencing.upload.uploadLocations')}
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+}