Amaury Aparicio - Cash Register solution — Rust WASM core + TanStack Start UI

app/.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.vinxi/
+.output/
+src/wasm-pkg/
+src/routeTree.gen.ts
+bun.lock
+*.timestamp_*.js

app/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "cash-register-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "wasm:build": "cd ../cash-register-wasm && wasm-pack build --target bundler --out-dir ../app/src/wasm-pkg",
+    "wasm:test": "cd ../cash-register-wasm && cargo test",
+    "dev": "bun run wasm:build && vite dev --port 3456",
+    "build": "bun run wasm:build && vite build",
+    "start": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "latest",
+    "@tanstack/react-start": "latest",
+    "@tanstack/router-plugin": "^1.132.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.6.0",
+    "zod": "^3"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^5",
+    "jsdom": "^29.0.2",
+    "typescript": "^5",
+    "vite": "^7",
+    "vite-tsconfig-paths": "^5",
+    "vitest": "^3"
+  }
+}

app/src/components/ErrorBanner.tsx

@@ -0,0 +1,17 @@
+type ErrorBannerProps = {
+  message: string
+  onDismiss?: () => void
+}
+
+export function ErrorBanner({ message, onDismiss }: ErrorBannerProps) {
+  return (
+    <div className="error-banner">
+      <span>{message}</span>
+      {onDismiss ? (
+        <button className="error-banner-dismiss" onClick={onDismiss}>
+          &times;
+        </button>
+      ) : null}
+    </div>
+  )
+}

app/src/components/FileUpload.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useRef, useState } from "react"
+
+type FileUploadProps = {
+  onFileLoaded: (content: string, fileName: string) => void
+}
+
+export function FileUpload({ onFileLoaded }: FileUploadProps) {
+  const [fileName, setFileName] = useState<string | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleFile = useCallback(
+    (file: File) => {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        const content = e.target?.result as string
+        setFileName(file.name)
+        onFileLoaded(content, file.name)
+      }
+      reader.readAsText(file)
+    },
+    [onFileLoaded],
+  )
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+      const file = e.dataTransfer.files[0]
+      if (file) {
+        handleFile(file)
+      }
+    },
+    [handleFile],
+  )
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (file) {
+        handleFile(file)
+      }
+    },
+    [handleFile],
+  )
+
+  const isLoaded = fileName !== null
+
+  return (
+    <div
+      className={`dropzone ${isLoaded ? "dropzone-loaded" : ""} ${isDragging ? "dropzone-dragging" : ""}`}
+      onDragOver={(e) => {
+        e.preventDefault()
+        setIsDragging(true)
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current?.click()}
+    >
+      <div className="dropzone-icon">{isLoaded ? "\u{1F4C4}" : "\u{1F4C1}"}</div>
+      <div className="dropzone-text">
+        {isLoaded ? (
+          <strong>{fileName}</strong>
+        ) : (
+          <>
+            <strong>Drop file here</strong> or click to browse
+          </>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".csv,.txt"
+        onChange={handleChange}
+        style={{ display: "none" }}
+      />
+    </div>
+  )
+}

app/src/components/ResultsTable.skeleton.tsx

@@ -0,0 +1,36 @@
+export function ResultsTableSkeleton() {
+  return (
+    <div className="results-container">
+      <div className="results-table-wrapper">
+        <table className="results-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Input</th>
+              <th>Output</th>
+              <th>Strategy</th>
+            </tr>
+          </thead>
+          <tbody>
+            {[1, 2, 3].map((i) => (
+              <tr key={i}>
+                <td>
+                  <div className="skeleton" style={{ width: 20, height: 16 }} />
+                </td>
+                <td>
+                  <div className="skeleton" style={{ width: 80, height: 16 }} />
+                </td>
+                <td>
+                  <div className="skeleton" style={{ width: 200, height: 16 }} />
+                </td>
+                <td>
+                  <div className="skeleton" style={{ width: 60, height: 20, borderRadius: 99 }} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

app/src/components/ResultsTable.tsx

@@ -0,0 +1,58 @@
+import type { ProcessResponse } from "../lib/schemas"
+
+type ResultsTableProps = {
+  response: ProcessResponse
+}
+
+export function ResultsTable({ response }: ResultsTableProps) {
+  return (
+    <div className="results-container">
+      <div className="results-table-wrapper">
+        <table className="results-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Input</th>
+              <th>Output</th>
+              <th>Strategy</th>
+            </tr>
+          </thead>
+          <tbody>
+            {response.results.map((result) => (
+              <tr key={result.line} className={result.error ? "row-error" : ""}>
+                <td className="line-num">{result.line}</td>
+                <td className="input-col">{result.input}</td>
+                <td className="output-col">
+                  {result.error ? (
+                    <span className="error-text">{result.error}</span>
+                  ) : (
+                    result.output
+                  )}
+                </td>
+                <td className="strategy-col">
+                  {result.strategy ? (
+                    <span
+                      className={`badge ${result.strategy === "random" ? "badge-random" : "badge-ok"}`}
+                    >
+                      {result.strategy}
+                    </span>
+                  ) : null}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="results-summary">
+        <div className="summary-stat">
+          <span className="summary-dot dot-green" />
+          {response.total_lines} processed
+        </div>
+        <div className="summary-stat">
+          <span className="summary-dot dot-red" />
+          {response.error_count} errors
+        </div>
+      </div>
+    </div>
+  )
+}

app/src/components/RulesBuilder.skeleton.tsx

@@ -0,0 +1,18 @@
+export function RulesBuilderSkeleton() {
+  return (
+    <div className="config-controls">
+      <div className="config-field">
+        <div className="skeleton skeleton-label" />
+        <div className="skeleton skeleton-select" />
+      </div>
+      <div className="config-field">
+        <div className="skeleton skeleton-label" />
+        <div className="skeleton skeleton-select" />
+      </div>
+      <div>
+        <div className="skeleton skeleton-label" />
+        <div className="skeleton skeleton-rule-card" />
+      </div>
+    </div>
+  )
+}