[V0_FILE]typescriptreact:file="types.ts" isEdit="true" isMerged="true" export interface ImportStep { id: number title: string status: "current" | "upcoming" | "completed" } export interface CSVData { columns: string[] rows: any[][] totalRows: number } export interface MappedColumn { csvColumn: string attribute: string } [V0_FILE]typescriptreact:file="components/step-indicator.tsx" isEdit="true" isMerged="true" import { Check } from "lucide-react" interface StepIndicatorProps { steps: Array<{ id: number title: string status: "current" | "upcoming" | "completed" }> } export function StepIndicator({ steps }: StepIndicatorProps) { return (

{steps.map((step, index) => (

{step.status === "completed" ? : step.id}

{index < steps.length - 1 && (

)}

))}

) } [V0_FILE]typescriptreact:file="components/column-mapper.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardBody, CardHeader } from "@nextui-org/card" import { Select, SelectItem } from "@nextui-org/select" import { Eye, ArrowRight } from "lucide-react" interface ColumnMapperProps { csvColumns: string[] csvData: any[][] onColumnMapped: (mapping: { csvColumn: string; attribute: string }) => void } export function ColumnMapper({ csvColumns, csvData, onColumnMapped }: ColumnMapperProps) { const attributes = [ "mobile_number", "mask", "transaction_id", "message_id", "message_text", "timestamp", "status", "cause", "latency", "sms_type", "delivery_code", "retry_status", "template_id", ] return (

{csvColumns.map((column) => (

{column}

))}

Data preview

{csvData.slice(0, 5).map((row, i) => (

{row[0]}

))}

This preview shows only a portion of the column values

) } [V0_FILE]typescriptreact:file="app/import/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { StepIndicator } from "@/components/step-indicator" import { FileUpload } from "@/components/file-upload" import { ColumnMapper } from "@/components/column-mapper" import { ReviewTable } from "@/components/review-table" import { UpdateSettingsModal } from "@/components/update-settings-modal" import { ImportProgressModal } from "@/components/import-progress-modal" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Settings2, X } from "lucide-react" import Link from "next/link" interface CSVData { columns: string[] rows: string[][] totalRows: number } interface MappedColumn { csvColumn: string dbColumn: string } const steps = [ { id: 1, title: "Upload file", status: "current" as const }, { id: 2, title: "Map columns", status: "upcoming" as const }, { id: 3, title: "Review & finalize", status: "upcoming" as const }, ] export default function ImportPage() { const [currentStep, setCurrentStep] = useState(1) const [csvData, setCsvData] = useState(null) const [mappedColumns, setMappedColumns] = useState([]) const [updateExisting, setUpdateExisting] = useState(false) const [updateIdentifier, setUpdateIdentifier] = useState("") const [showUpdateModal, setShowUpdateModal] = useState(false) const [showImportProgress, setShowImportProgress] = useState(false) // Simulate some issues for the review step const issues = [ { row: 3, message: "Invalid format" }, { row: 13, message: "Duplicate entry" }, ] const handleFileLoaded = (data: CSVData) => { setCsvData(data) } const handleColumnMapped = (mapping: MappedColumn) => { setMappedColumns((prev) => { const existing = prev.findIndex((m) => m.csvColumn === mapping.csvColumn) if (existing !== -1) { const updated = [...prev] updated[existing] = mapping return updated } return [...prev, mapping] }) } const handleUpdateToggle = (checked: boolean) => { setUpdateExisting(checked) if (checked && !updateIdentifier) { setShowUpdateModal(true) } } const handleUpdateSave = (identifier: string) => { setUpdateIdentifier(identifier) setShowUpdateModal(false) } const handleImport = () => { setShowImportProgress(true) } return (

Import Companies

({ ...step, status: step.id === currentStep ? "current" : step.id < currentStep ? "completed" : "upcoming", }))} /> {(currentStep === 2 || currentStep === 3) && (

Update existing records {updateExisting && ( )}

)}

{currentStep === 1 && (

{csvData && (

File analysis complete

Found {csvData.columns.length} columns and {csvData.totalRows} rows in your CSV file

)}

)} {currentStep === 2 && csvData && (

)} {currentStep === 3 && csvData && (

)}

) } [V0_FILE]typescriptreact:file="components/update-settings-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter } from "@nextui-org/modal" import { Select, SelectItem } from "@nextui-org/select" import { Button } from "@nextui-org/button" import { MergeVisualization } from "./merge-visualization" interface UpdateSettingsModalProps { open: boolean onOpenChange: (open: boolean) => void columns: string[] onSave: (identifier: string) => void } export function UpdateSettingsModal({ open, onOpenChange, columns, onSave }: UpdateSettingsModalProps) { const [selectedIdentifier, setSelectedIdentifier] = useState("") return ( {(onClose) => ( <>

Update existing records

Enabling this option instructs Peso to update existing records that match the field value you indicate below. You can match records by their title field value, record id or auto-number value. {"\n\n"} Please make sure to include the selected Merge Field into your import.

Identifier

)} ) } [V0_FILE]typescriptreact:file="components/review-table.tsx" isEdit="true" isMerged="true" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Search, Download, AlertCircle } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface ReviewTableProps { data: any[][] columns: string[] issues: { row: number; message: string }[] } export function ReviewTable({ data, columns, issues }: ReviewTableProps) { const cleanRows = data.length - issues.length return (

All rows {data.length}

Clean rows {cleanRows}

Rows with issues {issues.length}

# {columns.map((column) => ( {column} ))} {data.slice(0, 50).map((row, index) => { const hasIssue = issues.some((issue) => issue.row === index) return ( {index + 1} {row.map((cell, cellIndex) => (

{hasIssue && } {cell}

))} ) })}

) } [V0_FILE]typescriptreact:file="components/import-progress-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Modal, ModalContent, ModalHeader, ModalBody } from "@nextui-org/modal" import { Progress } from "@nextui-org/progress" import { Button } from "@nextui-org/button" import { CheckCircle } from "lucide-react" interface ImportProgressModalProps { open: boolean onOpenChange: (open: boolean) => void totalRows: number } export function ImportProgressModal({ open, onOpenChange, totalRows }: ImportProgressModalProps) { const [progress, setProgress] = useState(0) const [processedRows, setProcessedRows] = useState(0) const [isComplete, setIsComplete] = useState(false) useEffect(() => { if (open && processedRows < totalRows) { const interval = setInterval(() => { setProcessedRows((prev) => { const next = prev + Math.floor(Math.random() * 10) if (next >= totalRows) { clearInterval(interval) setIsComplete(true) return totalRows } return next }) }, 100) return () => clearInterval(interval) } }, [open, totalRows, processedRows]) useEffect(() => { setProgress((processedRows / totalRows) * 100) }, [processedRows, totalRows]) return ( {(onClose) => ( <> {isComplete ? (

Import Complete

Successfully imported {totalRows} rows

) : ( <>

Importing data

Processing {processedRows} of {totalRows} rows

)} )} ) } [V0_FILE]typescriptreact:file="components/merge-visualization.tsx" isEdit="true" isMerged="true" import { Card, CardBody } from "@nextui-org/card" import { Tooltip } from "@nextui-org/tooltip" import { Image } from "@nextui-org/image" import { Plus, ArrowRight, Equal, FileText, ImageIcon, CheckCircle, MessageSquare, Info } from "lucide-react" export function MergeVisualization() { return (

Our system intelligently combines your data. Note that the second selected record holds higher priority.

{/* Left section */} {/* Arrow 1 */} {/* Middle section */}

Rekord

{[ { icon: , count: 0 }, { icon: , count: 0 }, { icon: , count: 0 }, { icon: , count: 0 }, ].map((item, index) => (

{item.icon} {item.count}

))}

{/* Arrow 2 */} {/* Right section - Same as middle section */}

Rekord

{[ { icon: , count: 0 }, { icon: , count: 0 }, { icon: , count: 0 }, { icon: , count: 0 }, ].map((item, index) => (

{item.icon} {item.count}

))}

) } [V0_FILE]typescriptreact:file="components/file-upload.tsx" isEdit="true" "use client" import { useState, useCallback } from "react" import { useDropzone } from "react-dropzone" import { Card, CardBody } from "@nextui-org/card" import { Button } from "@nextui-org/button" import { FileSpreadsheet } from "lucide-react" import Papa from "papaparse" import type { CSVData } from "../types" interface FileUploadProps { onFileLoaded: (data: CSVData) => void } export function FileUpload({ onFileLoaded }: FileUploadProps) { const [loading, setLoading] = useState(false) const processFile = useCallback( (file: File) => { if (file) { setLoading(true) Papa.parse(file, { complete: (results) => { const columns = results.data[0] as string[] const rows = results.data.slice(1) as any[][] onFileLoaded({ columns, rows, totalRows: rows.length, }) setLoading(false) }, error: (error) => { console.error("Error parsing CSV:", error) setLoading(false) }, }) } }, [onFileLoaded], ) const onDrop = useCallback( (acceptedFiles: File[]) => { const file = acceptedFiles[0] if (file) { processFile(file) } }, [processFile], ) const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ onDrop, accept: { "text/csv": [".csv"], }, multiple: false, noClick: true, }) return (

{isDragActive ? "Drop your .CSV file here" : "Drop your .CSV file onto this area to upload"}

) }