+ {step === 'file-selection' && (
+
+
+
+ )
+}
diff --git a/apps/web/src/components/setup/index.ts b/apps/web/src/components/setup/index.ts
new file mode 100644
index 0000000..4a52ebb
--- /dev/null
+++ b/apps/web/src/components/setup/index.ts
@@ -0,0 +1,5 @@
+export { FileSelection } from './file-selection'
+export { Preview } from './preview'
+export { ColumnMappingComponent } from './column-mapping'
+export { Validation } from './validation'
+export { Complete } from './complete'
diff --git a/apps/web/src/components/setup/preview.tsx b/apps/web/src/components/setup/preview.tsx
new file mode 100644
index 0000000..3dc02e9
--- /dev/null
+++ b/apps/web/src/components/setup/preview.tsx
@@ -0,0 +1,94 @@
+import { FileSpreadsheet, ArrowLeft, ArrowRight, Rows3 } from 'lucide-react'
+import { Button } from '../ui/button'
+import type { ParsedData } from '../../types/setup'
+
+interface PreviewProps {
+ data: ParsedData[]
+ headers: string[]
+ rowCount: number
+ fileName: string
+ onBack: () => void
+ onNext: () => void
+}
+
+export function Preview({ data, headers, rowCount, fileName, onBack, onNext }: PreviewProps) {
+ const previewData = data.slice(0, 10)
+
+ return (
+
+
+
+
+
+ + Import Your Products +
++ Upload a CSV file with your product inventory +
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ document.getElementById('file-input')?.click()
+ }
+ }}
+ className={`
+ relative border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer
+ transition-all duration-300 outline-none
+ ${isDragging
+ ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 scale-[1.02]'
+ : 'border-slate-300 dark:border-slate-600 hover:border-slate-400 dark:hover:border-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800/50 focus-visible:ring-4 focus-visible:ring-blue-500/20'
+ }
+ `}
+ >
+
+
+
+
+
+ {error && (
+
+
+
+ {isDragging ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ + {isDragging ? 'Drop your file here' : 'Drag & drop your CSV file'} +
++ or click to browse +
+
+ .csv
+ Max 10 MB
+
+
+
+
+ )}
+
+ {/* Help text */}
+ {error}
+
+
+ + Your CSV should include columns like: SKU, Name, Quantity +
+
+
+ )
+}
diff --git a/apps/web/src/components/setup/validation.tsx b/apps/web/src/components/setup/validation.tsx
new file mode 100644
index 0000000..5bbb320
--- /dev/null
+++ b/apps/web/src/components/setup/validation.tsx
@@ -0,0 +1,222 @@
+import { useMemo } from 'react'
+import { AlertTriangle, CheckCircle, XCircle, ArrowLeft, ArrowRight, AlertCircle } from 'lucide-react'
+import { Button } from '../ui/button'
+import { IMPORT_FIELDS, type ColumnMapping, type ParsedData, type ValidationResult, type ValidationError, type ValidationWarning } from '../../types/setup'
+
+interface ValidationProps {
+ data: ParsedData[]
+ columnMapping: ColumnMapping
+ onBack: () => void
+ onImport: () => void
+ isImporting?: boolean
+ error?: string | null
+}
+
+export function Validation({ data, columnMapping, onBack, onImport, isImporting = false, error }: ValidationProps) {
+ const validation = useMemo((): ValidationResult => {
+ const errors: ValidationError[] = []
+ const warnings: ValidationWarning[] = []
+
+ // Check required field mappings first
+ const requiredFields = IMPORT_FIELDS.filter(f => f.required)
+ for (const field of requiredFields) {
+ if (!columnMapping[field.key]) {
+ errors.push({ row: 0, field: field.key, message: `Required field "${field.label}" is not mapped` })
+ }
+ }
+
+ // If required fields are missing, don't validate data
+ if (errors.length > 0) {
+ return { isValid: false, errors, warnings }
+ }
+
+ const skuField = columnMapping.sku
+ const nameField = columnMapping.name
+ const quantityField = columnMapping.quantity
+
+ // Track seen SKUs for duplicate detection
+ const seenSkus = new Set
+
+
+ + Preview Your Data +
++ Showing first 10 rows from {rowCount} total rows +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {rowCount > 10 && (
+ | + # + | + {headers.map((header) => ( ++ {header} + | + ))} +
|---|---|
| {idx + 1} | + {headers.map((header) => ( ++ {row[header] || '-'} + | + ))} +
+ ... and {rowCount - 10} more rows
+
+ )}
+
+
+
+
+
+
+ )
+}
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index f9425ee..647fc9b 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
+import './styles.css'
+
const router = createRouter({
routeTree,
defaultPreload: 'intent',
diff --git a/apps/web/src/routes/index.tsx b/apps/web/src/routes/index.tsx
index 3178b44..8078496 100644
--- a/apps/web/src/routes/index.tsx
+++ b/apps/web/src/routes/index.tsx
@@ -1,118 +1,9 @@
-import { createFileRoute } from '@tanstack/react-router'
-import {
- Zap,
- Server,
- Route as RouteIcon,
- Shield,
- Waves,
- Sparkles,
-} from 'lucide-react'
-
-export const Route = createFileRoute('/')({ component: App })
-
-function App() {
- const features = [
- {
- icon:
+
+
+ {/* Summary cards */}
+ + Validate Your Data +
++ Review errors and warnings before importing +
+
+
+
+ {/* Errors section */}
+ {errorCount > 0 && (
+
+
+
+
+ {validation.isValid ? (
+
+
+
+
+ {validation.isValid ? 'Valid' : 'Invalid'}
+
+
+ {data.length} rows
+
+
+
+
+
+
+
+
+
+ {errorCount}
+
+
+ Errors
+
+
+
+
+
+
+
+
+ {warningCount}
+
+
+ Warnings
+
+
+
+
+
+ )}
+
+ {/* Warnings section */}
+ {warningCount > 0 && (
+
+
+
+ {validation.errors.map((error, idx) => (
+
+
+
+ ))}
+
+
+ Row {error.row}
+
+ - {error.message}
+
+
+
+
+
+ )}
+
+ {/* No issues */}
+ {errorCount === 0 && warningCount === 0 && !error && (
+
+
+
+ {validation.warnings.map((warning, idx) => (
+
+
+
+ ))}
+
+
+ Row {warning.row}
+
+ - {warning.message}
+
+
+
+ )}
+
+ {/* Import error */}
+ {error && (
+ + All data looks good! No issues found. +
+
+
+
+ )}
+
+ {error}
+
+
+
+
+
-
-
-
-
-
-
-
- )
-}
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+ beforeLoad: () => {
+ throw redirect({
+ to: '/setup',
+ })
+ },
+})
diff --git a/apps/web/src/routes/setup.tsx b/apps/web/src/routes/setup.tsx
new file mode 100644
index 0000000..636246a
--- /dev/null
+++ b/apps/web/src/routes/setup.tsx
@@ -0,0 +1,196 @@
+import { useState, useCallback } from 'react'
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { FileSelection, Preview, ColumnMappingComponent, Validation, Complete } from '../components/setup'
+import { type SetupStep, type ColumnMapping, type ParsedData } from '../types/setup'
+import { importProducts } from '@wareflow/db'
+
+export const Route = createFileRoute('/setup')({
+ component: SetupPage,
+})
+
+const STEPS = ['file-selection', 'preview', 'column-mapping', 'validation'] as const
+const STEP_LABELS = ['File', 'Preview', 'Mapping', 'Validate']
+
+function SetupPage() {
+ const navigate = useNavigate()
+
+ const [step, setStep] = useState
-
-
- 
-
-
- - TANSTACK{' '} - - START - -
-- The framework for next generation AI applications -
-- Full-stack framework powered by TanStack Router for React and Solid. - Build modern applications with server functions, streaming, and type - safety. -
-
-
- Documentation
-
-
-
- Begin your TanStack Start journey by editing{' '}
-
- /src/routes/index.tsx
-
-
- {features.map((feature, index) => (
-
-
-
- ))}
- {feature.icon}
- - {feature.title} -
-- {feature.description} -
-
+ {/* Progress indicator */}
+ {step !== 'complete' && (
+
+
+
+ )
+}
diff --git a/apps/web/src/types/setup.ts b/apps/web/src/types/setup.ts
new file mode 100644
index 0000000..20b1ca1
--- /dev/null
+++ b/apps/web/src/types/setup.ts
@@ -0,0 +1,56 @@
+export type ImportField = {
+ key: 'sku' | 'name' | 'quantity' | 'sector' | 'zone' | 'floor' | 'description' | 'category' | 'unit'
+ label: string
+ required: boolean
+ defaultValue?: string
+}
+
+export const IMPORT_FIELDS: ImportField[] = [
+ { key: 'sku', label: 'SKU', required: true },
+ { key: 'name', label: 'Name', required: true },
+ { key: 'quantity', label: 'Quantity', required: true },
+ { key: 'sector', label: 'Sector', required: false },
+ { key: 'zone', label: 'Zone', required: false },
+ { key: 'floor', label: 'Floor', required: false },
+ { key: 'description', label: 'Description', required: false },
+ { key: 'category', label: 'Category', required: false },
+ { key: 'unit', label: 'Unit', required: false, defaultValue: 'pcs' },
+]
+
+export type ParsedData = Record
+
+ )}
+
+ {/* Step content */}
+
+
+
+ {STEPS.map((s, idx) => {
+ const isActive = s === step
+ const isCompleted = idx < currentStepIndex
+
+ return (
+
+
+
+ )
+ })}
+
+
+ {idx < STEPS.length - 1 && (
+
+ )}
+
+ {isCompleted ? (
+
+ ) : (
+ idx + 1
+ )}
+
+
+ {STEP_LABELS[idx]}
+
+