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

.gitignore

@@ -71,3 +71,10 @@ frontend/**/pnpm-lock.yaml
 
 # Legacy bin directory
 bin/
+
+# Rust / Tauri
+frontend/apps/scanner/src-tauri/target/
+
+# Nix / direnv
+result
+.direnv/

flake.lock

@@ -0,0 +1,82 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1731533236,
+        "narHash": "sha256-l0KFg5HjrsfsO/JpG+r7fRrqm12kzFHyUHqHCVpMMbI=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "11707dc2f618dd54ca8739b309ec4fc024de578b",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1773628058,
+        "narHash": "sha256-hpXH0z3K9xv0fHaje136KY872VT2T5uwxtezlAskQgY=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "f8573b9c935cfaa162dd62cc9e75ae2db86f85df",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs",
+        "rust-overlay": "rust-overlay"
+      }
+    },
+    "rust-overlay": {
+      "inputs": {
+        "nixpkgs": [
+          "nixpkgs"
+        ]
+      },
+      "locked": {
+        "lastModified": 1773889863,
+        "narHash": "sha256-tSsmZOHBgq4qfu5MNCAEsKZL1cI4avNLw2oUTXWeb74=",
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "rev": "dbfd51be2692cb7022e301d14c139accb4ee63f0",
+        "type": "github"
+      },
+      "original": {
+        "owner": "oxalica",
+        "repo": "rust-overlay",
+        "type": "github"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,81 @@
+{
+  description = "Effigenix ERP – Dev Environment";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+    rust-overlay = {
+      url = "github:oxalica/rust-overlay";
+      inputs.nixpkgs.follows = "nixpkgs";
+    };
+  };
+
+  outputs = { nixpkgs, flake-utils, rust-overlay, ... }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        overlays = [ (import rust-overlay) ];
+        pkgs = import nixpkgs { inherit system overlays; };
+
+        rustToolchain = pkgs.rust-bin.stable.latest.default.override {
+          extensions = [ "rust-src" "rust-analyzer" ];
+          targets = [
+            "aarch64-linux-android"
+            "armv7-linux-androideabi"
+            "i686-linux-android"
+            "x86_64-linux-android"
+          ];
+        };
+      in
+      {
+        devShells.default = pkgs.mkShell {
+          name = "effigenix";
+
+          buildInputs = with pkgs; [
+            # ─── Frontend ───────────────────────────
+            nodejs_22
+            nodePackages.pnpm
+
+            # ─── Rust / Tauri ───────────────────────
+            rustToolchain
+            cargo-tauri
+
+            # Tauri v2 system deps (Linux/GTK)
+            pkg-config
+            openssl
+            gtk3
+            webkitgtk_4_1
+            libsoup_3
+            glib
+            gdk-pixbuf
+            cairo
+            pango
+            harfbuzz
+            atk
+
+            # ─── Tools ─────────────────────────────
+            just
+            jq
+            curl
+            postgresql
+            rainfrog
+          ];
+
+          # Tauri braucht diese zur Laufzeit
+          LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath (with pkgs; [
+            gtk3
+            webkitgtk_4_1
+            libsoup_3
+            openssl
+          ]);
+
+          shellHook = ''
+            echo "Node    $(node --version)"
+            echo "pnpm    $(pnpm --version)"
+            echo "rustc   $(rustc --version)"
+            echo "cargo   $(cargo --version)"
+            echo ""
+            echo "just --list  für alle Befehle"
+          '';
+        };
+      });
+}

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

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>

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"
+  }
+}

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"

frontend/apps/scanner/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build()
+}

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"
+  ]
+}

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"]}}

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>

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>

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");
+}

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()
+}

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"
+    ]
+  }
+}

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>
+  );
+}

frontend/apps/scanner/src/index.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@effigenix/ui/theme.css';
+
+@source '../../packages/ui/src/**/*.{ts,tsx}';

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>
+);

frontend/apps/scanner/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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"]
+}

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,
+  },
+});

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>

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"
+  }
+}

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>
+  );
+}

frontend/apps/web/src/index.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@import '@effigenix/ui/theme.css';
+
+@source '../../packages/ui/src/**/*.{ts,tsx}';

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>
+);

frontend/apps/web/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

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"]
+}

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,
+      },
+    },
+  },
+});

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",

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"
+    ]
+  }
+}

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';

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';

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';

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';

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';

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));
+}

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;
+}

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"]
+}

justfile

@@ -0,0 +1,91 @@
+# Effigenix ERP – Development Commands
+
+# Default: alle Recipes auflisten
+default:
+    @just --list
+
+# ─── Dev Modi ─────────────────────────────────────────────
+
+# Backend starten (Spring Boot)
+dev-backend:
+    cd backend && SENTRY_DSN=$(grep '^SENTRY_DSN=' ../.env 2>/dev/null | cut -d= -f2-) mvn spring-boot:run
+
+# CLI/TUI starten
+dev-cli:
+    cd frontend/apps/cli && node --env-file=../../../.env --import tsx src/index.tsx
+
+# Web-UI starten (Vite :3000)
+dev-web:
+    cd frontend && pnpm run --filter @effigenix/web dev
+
+# Scanner-App starten (Tauri + Vite :1420)
+dev-scanner:
+    cd frontend/apps/scanner && pnpm tauri dev
+
+# UI-Library im Watch-Modus bauen
+dev-ui:
+    cd frontend && pnpm run --filter @effigenix/ui dev
+
+# ─── Build ────────────────────────────────────────────────
+
+# Frontend komplett bauen
+build-frontend:
+    cd frontend && pnpm build
+
+# Backend bauen
+build-backend:
+    cd backend && mvn package -DskipTests
+
+# ─── Checks ──────────────────────────────────────────────
+
+# Frontend Typecheck
+typecheck:
+    cd frontend && pnpm typecheck
+
+# Frontend Tests
+test-frontend:
+    cd frontend && pnpm test
+
+# Backend Tests
+test-backend:
+    cd backend && mvn test
+
+# ─── Code Generation ─────────────────────────────────────
+
+# OpenAPI Spec + TypeScript Types generieren
+generate-openapi:
+    ./scripts/generate-openapi.sh
+
+# ─── Datenbank ────────────────────────────────────────────
+
+# Testdaten einspielen
+seed-testdata:
+    PGPASSWORD=effigenix nix shell nixpkgs#postgresql --command psql -f backend/src/main/resources/db/changelog/changes/099-seed-testdata.sql -h localhost -p 5432 -U effigenix -d effigenix
+
+# ─── Fuzz Testing ─────────────────────────────────────────
+
+# Alle Fuzz-Tests
+fuzz:
+    cd backend && mvn test -Pfuzz
+
+# Fuzz-Regressionstests
+fuzz-regression:
+    cd backend && mvn test -Pfuzz-regression
+
+# Einzelnen Fuzz-Test ausführen (z.B. just fuzz-single BatchFuzzTest)
+fuzz-single TEST:
+    cd backend && mvn test -Pfuzz -Dtest={{ TEST }}
+
+# ─── Services ─────────────────────────────────────────────
+
+# Bugsink starten (Error Tracking)
+bugsink:
+    @. ./.env 2>/dev/null || true; \
+    docker start bugsink 2>/dev/null || \
+    docker run \
+        --name bugsink \
+        -p 8000:8000 \
+        -e SECRET_KEY=${BUGSINK_SECRET_KEY:?BUGSINK_SECRET_KEY muss gesetzt sein} \
+        -e CREATE_SUPERUSER=admin:admin \
+        bugsink/bugsink:latest
+    @echo "Bugsink: http://localhost:8000 (admin/admin)"

shell.nix

@@ -14,6 +14,7 @@ pkgs.mkShell {
     curl # Manual HTTP requests
     postgresql
     rainfrog
+    just
   ];
 
   shellHook = ''