feat(frontend): Tauri Apps, Shared UI Library und Nix Flake

- packages/ui: Shared React Component Library (Button, Card, Badge, Input) mit Tailwind v4 @theme Design Tokens (oklch) - apps/web: ERP Web-UI (Vite + React + Tailwind v4, API-Proxy :8080) - apps/scanner: Tauri v2 Mobile App mit Barcode-Scanner Plugin (cfg(mobile) für Desktop-Kompatibilität) - flake.nix: Nix Flake mit rust-overlay, Tauri System-Deps (GTK, WebKitGTK, libsoup, OpenSSL), ersetzt shell.nix - justfile: Dev-Befehle für alle Projekte (backend, cli, web, scanner) - frontend/CLAUDE.md: Agent Guide mit Base UI Docs Referenz
2026-03-28 10:19:35 +01:00 · 2026-03-19 16:45:47 +01:00 · 2026-03-19 16:45:47 +01:00 · ef50eb8279
commit ef50eb8279
parent b9b89e3f0e
96 changed files with 11682 additions and 16 deletions
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@ -0,0 +1,22 @@
+# Effigenix Frontend – Agent Guide
+
+## Stack
+pnpm Workspaces Monorepo, React 18, TypeScript 5, Tailwind v4, Vite 6, tsup, Tauri v2
+
+## Packages
+- `packages/ui` – Shared React Component Library mit Tailwind v4 Theme (Design Tokens)
+- `packages/types` – TypeScript Types (OpenAPI-generiert)
+- `packages/config` – Shared Configuration Constants
+- `packages/validation` – Zod Validation Schemas
+- `packages/api-client` – Type-safe HTTP Client
+
+## Apps
+- `apps/cli` – Terminal UI (Ink + React)
+- `apps/web` – ERP Web-UI (Vite + React + Tailwind v4)
+- `apps/scanner` – Tauri v2 Mobile App (QR-Scanner)
+
+## Dokumentation
+
+### Base UI (Headless Component Library)
+Für komplexere UI-Komponenten (Dialog, Select, Combobox etc.) wird Base UI verwendet.
+AI-optimierte Dokumentation: https://base-ui.com/llms.txt
--- a/frontend/apps/scanner/index.html
+++ b/frontend/apps/scanner/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Effigenix Scanner</title>
+  </head>
+  <body class="bg-warm-50 text-warm-900 font-sans antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/apps/scanner/package.json
+++ b/frontend/apps/scanner/package.json
@ -0,0 +1,35 @@
+{
+  "name": "@effigenix/scanner",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Effigenix mobile scanner app (Tauri v2)",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-barcode-scanner": "^2.0.0",
+    "@effigenix/ui": "workspace:*",
+    "@effigenix/api-client": "workspace:*",
+    "@effigenix/types": "workspace:*",
+    "@effigenix/validation": "workspace:*",
+    "@effigenix/config": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "@tauri-apps/cli": "^2.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^6.0.0"
+  }
+}
--- a/frontend/apps/scanner/src-tauri/Cargo.lock
+++ b/frontend/apps/scanner/src-tauri/Cargo.lock
--- a/frontend/apps/scanner/src-tauri/Cargo.toml
+++ b/frontend/apps/scanner/src-tauri/Cargo.toml
@ -0,0 +1,20 @@
+[package]
+name = "effigenix-scanner"
+version = "0.1.0"
+description = "Effigenix mobile scanner app"
+edition = "2021"
+
+[lib]
+name = "effigenix_scanner_lib"
+crate-type = ["lib", "cdylib", "staticlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+
+[target.'cfg(any(target_os = "android", target_os = "ios"))'.dependencies]
+tauri-plugin-barcode-scanner = "2"
--- a/frontend/apps/scanner/src-tauri/build.rs
+++ b/frontend/apps/scanner/src-tauri/build.rs
@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}
--- a/frontend/apps/scanner/src-tauri/capabilities/default.json
+++ b/frontend/apps/scanner/src-tauri/capabilities/default.json
@ -0,0 +1,8 @@
+{
+  "identifier": "default",
+  "description": "Default capabilities for the scanner app",
+  "windows": ["main"],
+  "permissions": [
+    "core:default"
+  ]
+}
--- a/frontend/apps/scanner/src-tauri/gen/schemas/acl-manifests.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/acl-manifests.json
--- a/frontend/apps/scanner/src-tauri/gen/schemas/capabilities.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/capabilities.json
@ -0,0 +1 @@
+{"default":{"identifier":"default","description":"Default capabilities for the scanner app","local":true,"windows":["main"],"permissions":["core:default"]}}
--- a/frontend/apps/scanner/src-tauri/gen/schemas/desktop-schema.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/desktop-schema.json
--- a/frontend/apps/scanner/src-tauri/gen/schemas/linux-schema.json
+++ b/frontend/apps/scanner/src-tauri/gen/schemas/linux-schema.json
--- a/frontend/apps/scanner/src-tauri/icons/128x128.png
+++ b/frontend/apps/scanner/src-tauri/icons/128x128.png
--- a/frontend/apps/scanner/src-tauri/icons/128x128@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/128x128@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/32x32.png
+++ b/frontend/apps/scanner/src-tauri/icons/32x32.png
--- a/frontend/apps/scanner/src-tauri/icons/64x64.png
+++ b/frontend/apps/scanner/src-tauri/icons/64x64.png
--- a/frontend/apps/scanner/src-tauri/icons/Square107x107Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square107x107Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square142x142Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square142x142Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square150x150Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square150x150Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square284x284Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square284x284Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square30x30Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square30x30Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square310x310Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square310x310Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square44x44Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square44x44Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square71x71Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square71x71Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/Square89x89Logo.png
+++ b/frontend/apps/scanner/src-tauri/icons/Square89x89Logo.png
--- a/frontend/apps/scanner/src-tauri/icons/StoreLogo.png
+++ b/frontend/apps/scanner/src-tauri/icons/StoreLogo.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/frontend/apps/scanner/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
--- a/frontend/apps/scanner/src-tauri/icons/android/values/ic_launcher_background.xml
+++ b/frontend/apps/scanner/src-tauri/icons/android/values/ic_launcher_background.xml
@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>
--- a/frontend/apps/scanner/src-tauri/icons/icon.icns
+++ b/frontend/apps/scanner/src-tauri/icons/icon.icns
--- a/frontend/apps/scanner/src-tauri/icons/icon.ico
+++ b/frontend/apps/scanner/src-tauri/icons/icon.ico
--- a/frontend/apps/scanner/src-tauri/icons/icon.png
+++ b/frontend/apps/scanner/src-tauri/icons/icon.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-20x20@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-29x29@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-40x40@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-512@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-512@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@3x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-60x60@3x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@1x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@1x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-76x76@2x.png
--- a/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
+++ b/frontend/apps/scanner/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
--- a/frontend/apps/scanner/src-tauri/src/lib.rs
+++ b/frontend/apps/scanner/src-tauri/src/lib.rs
@ -0,0 +1,11 @@
+#[cfg_attr(mobile, tauri::mobile_entry_point)]
+pub fn run() {
+    let builder = tauri::Builder::default();
+
+    #[cfg(mobile)]
+    let builder = builder.plugin(tauri_plugin_barcode_scanner::init());
+
+    builder
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
--- a/frontend/apps/scanner/src-tauri/src/main.rs
+++ b/frontend/apps/scanner/src-tauri/src/main.rs
@ -0,0 +1,5 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+fn main() {
+    effigenix_scanner_lib::run()
+}
--- a/frontend/apps/scanner/src-tauri/tauri.conf.json
+++ b/frontend/apps/scanner/src-tauri/tauri.conf.json
@ -0,0 +1,37 @@
+{
+  "$schema": "https://raw.githubusercontent.com/nicfit/tauri/tauri-v2/crates/tauri-cli/schema.json",
+  "productName": "Effigenix Scanner",
+  "version": "0.1.0",
+  "identifier": "de.effigenix.scanner",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:1420",
+    "beforeDevCommand": "pnpm dev",
+    "beforeBuildCommand": "pnpm build"
+  },
+  "app": {
+    "withGlobalTauri": false,
+    "windows": [
+      {
+        "title": "Effigenix Scanner",
+        "width": 400,
+        "height": 700,
+        "resizable": true
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ]
+  }
+}
--- a/frontend/apps/scanner/src/App.tsx
+++ b/frontend/apps/scanner/src/App.tsx
@ -0,0 +1,29 @@
+import { Button, Card } from '@effigenix/ui';
+
+export function App() {
+  return (
+    <div className="min-h-screen p-6">
+      <div className="mx-auto max-w-md space-y-6">
+        <h1 className="text-2xl font-bold text-brand-700">Effigenix Scanner</h1>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Chargen-Scanner</h2>
+          <p className="mb-4 text-sm text-warm-600">
+            QR-Code oder Barcode scannen, um Chargen-Details anzuzeigen.
+          </p>
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-full"
+            onClick={() => {
+              // TODO: Barcode-Scanner Integration
+              console.log('Scan gestartet');
+            }}
+          >
+            Scan starten
+          </Button>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/frontend/apps/scanner/src/index.css
+++ b/frontend/apps/scanner/src/index.css
@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@effigenix/ui/theme.css';
+
+@source '../../packages/ui/src/**/*.{ts,tsx}';
--- a/frontend/apps/scanner/src/main.tsx
+++ b/frontend/apps/scanner/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/frontend/apps/scanner/src/vite-env.d.ts
+++ b/frontend/apps/scanner/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/apps/scanner/tsconfig.json
+++ b/frontend/apps/scanner/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "composite": false,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true
+  },
+  "include": ["src"]
+}
--- a/frontend/apps/scanner/vite.config.ts
+++ b/frontend/apps/scanner/vite.config.ts
@ -0,0 +1,22 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: 'ws',
+          host,
+          port: 1421,
+        }
+      : undefined,
+  },
+});
--- a/frontend/apps/web/index.html
+++ b/frontend/apps/web/index.html
@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Effigenix ERP</title>
+  </head>
+  <body class="bg-warm-50 text-warm-900 font-sans antialiased">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/apps/web/package.json
+++ b/frontend/apps/web/package.json
@ -0,0 +1,31 @@
+{
+  "name": "@effigenix/web",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Effigenix ERP Web UI",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@effigenix/ui": "workspace:*",
+    "@effigenix/api-client": "workspace:*",
+    "@effigenix/types": "workspace:*",
+    "@effigenix/validation": "workspace:*",
+    "@effigenix/config": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.3.3",
+    "vite": "^6.0.0"
+  }
+}
--- a/frontend/apps/web/src/App.tsx
+++ b/frontend/apps/web/src/App.tsx
@ -0,0 +1,43 @@
+import { Button, Card, Badge, Input } from '@effigenix/ui';
+
+export function App() {
+  return (
+    <div className="min-h-screen p-8">
+      <div className="mx-auto max-w-3xl space-y-8">
+        <h1 className="text-3xl font-bold text-brand-700">Effigenix ERP</h1>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Buttons</h2>
+          <div className="flex flex-wrap gap-3">
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="primary" disabled>
+              Disabled
+            </Button>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Badges</h2>
+          <div className="flex flex-wrap gap-3">
+            <Badge variant="success">Aktiv</Badge>
+            <Badge variant="warning">Ausstehend</Badge>
+            <Badge variant="danger">Fehler</Badge>
+            <Badge variant="info">Info</Badge>
+            <Badge variant="neutral">Neutral</Badge>
+          </div>
+        </Card>
+
+        <Card>
+          <h2 className="mb-4 text-lg font-semibold">Input</h2>
+          <div className="max-w-sm space-y-3">
+            <Input placeholder="Artikelbezeichnung..." />
+            <Input placeholder="Disabled" disabled />
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}
--- a/frontend/apps/web/src/index.css
+++ b/frontend/apps/web/src/index.css
@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@effigenix/ui/theme.css';
+
+@source '../../packages/ui/src/**/*.{ts,tsx}';
--- a/frontend/apps/web/src/main.tsx
+++ b/frontend/apps/web/src/main.tsx
@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
--- a/frontend/apps/web/src/vite-env.d.ts
+++ b/frontend/apps/web/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/apps/web/tsconfig.json
+++ b/frontend/apps/web/tsconfig.json
@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "composite": false,
+    "declaration": false,
+    "declarationMap": false,
+    "incremental": true
+  },
+  "include": ["src"]
+}
--- a/frontend/apps/web/vite.config.ts
+++ b/frontend/apps/web/vite.config.ts
@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8080',
+        changeOrigin: true,
+      },
+    },
+  },
+});
--- a/frontend/package.json
+++ b/frontend/package.json
@ -6,6 +6,8 @@
  "scripts": {
    "build": "pnpm run --recursive build",
    "dev": "pnpm run --filter @effigenix/cli dev",
+    "dev:web": "pnpm run --filter @effigenix/web dev",
+    "dev:scanner": "pnpm run --filter @effigenix/scanner dev",
    "test": "pnpm run --recursive test",
    "test:coverage": "pnpm run --recursive test:coverage",
    "typecheck": "pnpm run --recursive typecheck",
--- a/frontend/packages/ui/package.json
+++ b/frontend/packages/ui/package.json
@ -0,0 +1,60 @@
+{
+  "name": "@effigenix/ui",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Shared React component library with Tailwind v4 theme",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./theme.css": "./src/theme.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/theme.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0"
+  },
+  "tsup": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "esm"
+    ],
+    "dts": true,
+    "clean": true,
+    "sourcemap": true,
+    "splitting": false,
+    "external": [
+      "react",
+      "react-dom"
+    ]
+  }
+}
--- a/frontend/packages/ui/src/components/Badge.tsx
+++ b/frontend/packages/ui/src/components/Badge.tsx
@ -0,0 +1,34 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../lib/cn';
+
+type BadgeVariant = 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+}
+
+const variantStyles: Record<BadgeVariant, string> = {
+  success: 'bg-success-100 text-success-800 border-success-300',
+  warning: 'bg-warning-100 text-warning-800 border-warning-300',
+  danger: 'bg-danger-100 text-danger-800 border-danger-300',
+  info: 'bg-info-100 text-info-800 border-info-300',
+  neutral: 'bg-warm-100 text-warm-700 border-warm-300',
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'neutral', ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium',
+          variantStyles[variant],
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
--- a/frontend/packages/ui/src/components/Button.tsx
+++ b/frontend/packages/ui/src/components/Button.tsx
@ -0,0 +1,48 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react';
+import { cn } from '../lib/cn';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    'bg-brand-600 text-white hover:bg-brand-700 active:bg-brand-800 focus-visible:ring-brand-500',
+  secondary:
+    'bg-warm-100 text-warm-800 hover:bg-warm-200 active:bg-warm-300 focus-visible:ring-warm-400 border border-warm-300',
+  ghost: 'text-warm-700 hover:bg-warm-100 active:bg-warm-200 focus-visible:ring-warm-400',
+  danger:
+    'bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800 focus-visible:ring-danger-500',
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: 'px-3 py-1.5 text-sm',
+  md: 'px-4 py-2 text-sm',
+  lg: 'px-5 py-2.5 text-base',
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', size = 'md', disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          'inline-flex items-center justify-center font-medium rounded-md transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+          'disabled:opacity-50 disabled:pointer-events-none',
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        disabled={disabled}
+        {...props}
+      />
+    );
+  }
+);
+
+Button.displayName = 'Button';
--- a/frontend/packages/ui/src/components/Card.tsx
+++ b/frontend/packages/ui/src/components/Card.tsx
@ -0,0 +1,19 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../lib/cn';
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-lg border border-warm-200 bg-white p-6 shadow-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+Card.displayName = 'Card';
--- a/frontend/packages/ui/src/components/Input.tsx
+++ b/frontend/packages/ui/src/components/Input.tsx
@ -0,0 +1,22 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '../lib/cn';
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        'block w-full rounded-md border border-warm-300 bg-white px-3 py-2 text-sm text-warm-900',
+        'placeholder:text-warm-400',
+        'focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20',
+        'disabled:cursor-not-allowed disabled:bg-warm-50 disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = 'Input';
--- a/frontend/packages/ui/src/index.ts
+++ b/frontend/packages/ui/src/index.ts
@ -0,0 +1,5 @@
+export { Button, type ButtonProps } from './components/Button';
+export { Card, type CardProps } from './components/Card';
+export { Badge, type BadgeProps } from './components/Badge';
+export { Input, type InputProps } from './components/Input';
+export { cn } from './lib/cn';
--- a/frontend/packages/ui/src/lib/cn.ts
+++ b/frontend/packages/ui/src/lib/cn.ts
@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
--- a/frontend/packages/ui/src/theme.css
+++ b/frontend/packages/ui/src/theme.css
@ -0,0 +1,88 @@
+@theme {
+  /* Brand – warm orange/amber */
+  --color-brand-50: oklch(0.98 0.02 75);
+  --color-brand-100: oklch(0.95 0.04 75);
+  --color-brand-200: oklch(0.9 0.08 75);
+  --color-brand-300: oklch(0.83 0.12 75);
+  --color-brand-400: oklch(0.75 0.16 70);
+  --color-brand-500: oklch(0.65 0.19 55);
+  --color-brand-600: oklch(0.58 0.2 50);
+  --color-brand-700: oklch(0.5 0.18 50);
+  --color-brand-800: oklch(0.42 0.14 50);
+  --color-brand-900: oklch(0.35 0.1 50);
+  --color-brand-950: oklch(0.25 0.07 50);
+
+  /* Warm neutrals */
+  --color-warm-50: oklch(0.98 0.005 75);
+  --color-warm-100: oklch(0.95 0.01 75);
+  --color-warm-200: oklch(0.91 0.015 75);
+  --color-warm-300: oklch(0.85 0.02 75);
+  --color-warm-400: oklch(0.7 0.02 75);
+  --color-warm-500: oklch(0.55 0.02 75);
+  --color-warm-600: oklch(0.45 0.02 75);
+  --color-warm-700: oklch(0.37 0.015 75);
+  --color-warm-800: oklch(0.3 0.01 75);
+  --color-warm-900: oklch(0.22 0.008 75);
+  --color-warm-950: oklch(0.15 0.005 75);
+
+  /* Success – green */
+  --color-success-50: oklch(0.97 0.03 145);
+  --color-success-100: oklch(0.93 0.06 145);
+  --color-success-200: oklch(0.87 0.1 145);
+  --color-success-300: oklch(0.78 0.15 145);
+  --color-success-400: oklch(0.68 0.18 145);
+  --color-success-500: oklch(0.6 0.17 145);
+  --color-success-600: oklch(0.52 0.15 145);
+  --color-success-700: oklch(0.45 0.12 145);
+  --color-success-800: oklch(0.38 0.1 145);
+  --color-success-900: oklch(0.32 0.07 145);
+  --color-success-950: oklch(0.22 0.05 145);
+
+  /* Warning – yellow/amber */
+  --color-warning-50: oklch(0.98 0.03 95);
+  --color-warning-100: oklch(0.95 0.07 95);
+  --color-warning-200: oklch(0.9 0.12 90);
+  --color-warning-300: oklch(0.84 0.17 85);
+  --color-warning-400: oklch(0.78 0.18 80);
+  --color-warning-500: oklch(0.72 0.17 75);
+  --color-warning-600: oklch(0.62 0.16 65);
+  --color-warning-700: oklch(0.52 0.13 60);
+  --color-warning-800: oklch(0.44 0.1 60);
+  --color-warning-900: oklch(0.37 0.07 60);
+  --color-warning-950: oklch(0.27 0.05 60);
+
+  /* Danger – red */
+  --color-danger-50: oklch(0.97 0.02 25);
+  --color-danger-100: oklch(0.93 0.05 25);
+  --color-danger-200: oklch(0.87 0.1 25);
+  --color-danger-300: oklch(0.78 0.15 25);
+  --color-danger-400: oklch(0.68 0.18 25);
+  --color-danger-500: oklch(0.6 0.2 25);
+  --color-danger-600: oklch(0.52 0.19 25);
+  --color-danger-700: oklch(0.45 0.16 25);
+  --color-danger-800: oklch(0.38 0.12 25);
+  --color-danger-900: oklch(0.32 0.09 25);
+  --color-danger-950: oklch(0.22 0.06 25);
+
+  /* Info – blue */
+  --color-info-50: oklch(0.97 0.02 245);
+  --color-info-100: oklch(0.93 0.05 245);
+  --color-info-200: oklch(0.87 0.09 245);
+  --color-info-300: oklch(0.78 0.14 245);
+  --color-info-400: oklch(0.68 0.17 245);
+  --color-info-500: oklch(0.6 0.18 245);
+  --color-info-600: oklch(0.52 0.17 245);
+  --color-info-700: oklch(0.45 0.14 245);
+  --color-info-800: oklch(0.38 0.11 245);
+  --color-info-900: oklch(0.32 0.08 245);
+  --color-info-950: oklch(0.22 0.06 245);
+
+  /* Font */
+  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
+
+  /* Radius */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}
--- a/frontend/packages/ui/tsconfig.json
+++ b/frontend/packages/ui/tsconfig.json
@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "composite": false,
+    "incremental": false
+  },
+  "include": ["src"]
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
				`@ -0,0 +1 @@`
				`{"default":{"identifier":"default","description":"Default capabilities for the scanner app","local":true,"windows":["main"],"permissions":["core:default"]}}`