\n \n \n \n {headers.map((header, index) => (\n \n {header}\n \n ))}\n \n \n \n {lines.slice(1).map((line, rowIndex) => (\n \n {parseCSVRow(line).map((cell, cellIndex) => (\n \n {cell}\n \n ))}\n \n ))}\n \n

\n );\n };\n \n return (\n

Import Bank Statement

\n \n

\n \n {/* Step indicator */}\n

= 1 ? 'text-blue-600' : 'text-gray-400'}`}>\n

= 1 ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400'\n }`}>\n 1\n

Upload CSV

= 2 ? 'text-blue-600' : 'text-gray-400'}`}>\n

= 2 ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400'\n }`}>\n 2\n

Map Columns

= 3 ? 'text-blue-600' : 'text-gray-400'}`}>\n

= 3 ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-400'\n }`}>\n 3\n

Import

\n \n {error && (\n

\n {error}\n

\n )}\n \n {step === 1 && (\n

📊

Upload your bank statement CSV

\n We'll help you map the columns to import your transactions\n

\n \n Select CSV File\n \n \n

\n )}\n \n {step === 2 && (\n

Map Your CSV Columns

\n Tell us which columns contain your transaction data\n

\n \n

\n \n Date Column *\n \n handleMappingChange(\"date\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n \n

\n \n Description Column *\n \n handleMappingChange(\"description\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n \n

\n \n Amount Column *\n \n handleMappingChange(\"amount\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n required\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n \n

\n \n Transaction Type Column (optional)\n \n handleMappingChange(\"type\", e.target.value)}\n className=\"w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n {headers.map((header, index) => (\n \n ))}\n \n

\n Use this if your CSV has a column indicating debit/credit\n

\n \n

Preview

\n {renderPreview()}\n

\n \n

\n setStep(1)}\n className=\"px-4 py-2 text-gray-700 font-medium\"\n >\n Back\n \n {\n if (!mapping.date || !mapping.description || !mapping.amount) {\n setError(\"Date, Description, and Amount fields are required\");\n return;\n }\n setError(\"\");\n setStep(3);\n }}\n className=\"px-6 py-2 bg-blue-500 text-white rounded-lg font-medium hover:bg-blue-600 transition-colors\"\n >\n Continue\n \n

\n )}\n \n {step === 3 && (\n

🎉

Ready to Import

\n We'll import your transactions using the following mapping:\n

\n \n

Date: {mapping.date}

Description: {mapping.description}

Amount: {mapping.amount}

\n {mapping.type &&

Type: {mapping.type}

}\n

\n \n

\n setStep(2)}\n className=\"px-4 py-2 text-gray-700 font-medium mr-4\"\n >\n Back\n \n \n Import Transactions\n \n

\n )}\n

\n );\n};\n\nexport default CSVImport;","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/pmaxx/untitled-8939/code/frontend/components/CSVImport.tsx","extension","actionData","errors"]