refactor external orders

backend/src/controllers/bestellung.controller.ts

@@ -21,6 +21,40 @@ class BestellungController {
     }
   }
 
+  async getVendor(req: Request, res: Response): Promise<void> {
+    const id = parseInt(param(req, 'id'), 10);
+    if (isNaN(id)) {
+      res.status(400).json({ success: false, message: 'Ungültige ID' });
+      return;
+    }
+    try {
+      const vendor = await bestellungService.getVendorById(id);
+      if (!vendor) {
+        res.status(404).json({ success: false, message: 'Lieferant nicht gefunden' });
+        return;
+      }
+      res.status(200).json({ success: true, data: vendor });
+    } catch (error) {
+      logger.error('BestellungController.getVendor error', { error });
+      res.status(500).json({ success: false, message: 'Lieferant konnte nicht geladen werden' });
+    }
+  }
+
+  async getVendorOrders(req: Request, res: Response): Promise<void> {
+    const id = parseInt(param(req, 'id'), 10);
+    if (isNaN(id)) {
+      res.status(400).json({ success: false, message: 'Ungültige ID' });
+      return;
+    }
+    try {
+      const orders = await bestellungService.getOrders({ lieferant_id: id });
+      res.status(200).json({ success: true, data: orders });
+    } catch (error) {
+      logger.error('BestellungController.getVendorOrders error', { error });
+      res.status(500).json({ success: false, message: 'Bestellungen konnten nicht geladen werden' });
+    }
+  }
+
   async createVendor(req: Request, res: Response): Promise<void> {
     const { name } = req.body;
     if (!name || typeof name !== 'string' || name.trim().length === 0) {

backend/src/database/migrations/061_add_laufende_nummer.sql

@@ -0,0 +1,14 @@
+-- Add laufende_nummer (sequential number per year) to bestellungen
+ALTER TABLE bestellungen ADD COLUMN laufende_nummer INTEGER;
+
+-- Backfill existing rows with sequential numbers per year
+WITH numbered AS (
+  SELECT id, ROW_NUMBER() OVER (
+    PARTITION BY EXTRACT(YEAR FROM erstellt_am) ORDER BY erstellt_am, id
+  ) AS nr
+  FROM bestellungen
+)
+UPDATE bestellungen b SET laufende_nummer = n.nr FROM numbered n WHERE b.id = n.id;
+
+-- Make NOT NULL after backfill
+ALTER TABLE bestellungen ALTER COLUMN laufende_nummer SET NOT NULL;

backend/src/routes/bestellung.routes.ts

@@ -17,6 +17,20 @@ router.get(
   bestellungController.listVendors.bind(bestellungController)
 );
 
+router.get(
+  '/vendors/:id',
+  authenticate,
+  requirePermission('bestellungen:view'),
+  bestellungController.getVendor.bind(bestellungController)
+);
+
+router.get(
+  '/vendors/:id/orders',
+  authenticate,
+  requirePermission('bestellungen:view'),
+  bestellungController.getVendorOrders.bind(bestellungController)
+);
+
 router.post(
   '/vendors',
   authenticate,

backend/src/services/bestellung.service.ts

@@ -119,13 +119,17 @@ async function getOrders(filters?: { status?: string; lieferant_id?: number; bes
               l.name AS lieferant_name,
               COALESCE(u.name, u.preferred_username, u.email) AS besteller_name,
               COALESCE(pos.total_cost, 0) AS total_cost,
-              COALESCE(pos.items_count, 0) AS items_count
+              COALESCE(pos.items_count, 0) AS items_count,
+              COALESCE(pos.total_received, 0) AS total_received,
+              COALESCE(pos.total_ordered, 0) AS total_ordered
        FROM bestellungen b
        LEFT JOIN lieferanten l ON l.id = b.lieferant_id
        LEFT JOIN users u ON u.id = b.erstellt_von
        LEFT JOIN LATERAL (
          SELECT SUM(einzelpreis * menge) AS total_cost,
-                COUNT(*) AS items_count
+                COUNT(*) AS items_count,
+                SUM(erhalten_menge) AS total_received,
+                SUM(menge) AS total_ordered
          FROM bestellpositionen
          WHERE bestellung_id = b.id
        ) pos ON true
@@ -178,12 +182,21 @@ async function createOrder(data: { bezeichnung: string; lieferant_id?: number; b
   const client = await pool.connect();
   try {
     await client.query('BEGIN');
+
+    // Get next laufende_nummer for the current year
+    const nrResult = await client.query(
+      `SELECT COALESCE(MAX(laufende_nummer), 0) + 1 AS next_nr
+       FROM bestellungen
+       WHERE EXTRACT(YEAR FROM erstellt_am) = EXTRACT(YEAR FROM NOW())`
+    );
+    const laufendeNummer = nrResult.rows[0].next_nr;
+
     const bestellerId = data.besteller_id && data.besteller_id.trim() ? data.besteller_id.trim() : null;
     const result = await client.query(
-      `INSERT INTO bestellungen (bezeichnung, lieferant_id, besteller_id, notizen, budget, steuersatz, erstellt_von)
+      `INSERT INTO bestellungen (bezeichnung, lieferant_id, besteller_id, notizen, budget, steuersatz, laufende_nummer, erstellt_von)
-       VALUES ($1, $2, $3, $4, $5, $6, $7)
+       VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
        RETURNING *`,
-      [data.bezeichnung, data.lieferant_id || null, bestellerId, data.notizen || null, data.budget || null, data.steuersatz ?? 20, userId]
+      [data.bezeichnung, data.lieferant_id || null, bestellerId, data.notizen || null, data.budget || null, data.steuersatz ?? 20, laufendeNummer, userId]
     );
     const order = result.rows[0];
 

frontend/src/App.tsx

@@ -29,6 +29,7 @@ import Wissen from './pages/Wissen';
 import Bestellungen from './pages/Bestellungen';
 import BestellungDetail from './pages/BestellungDetail';
 import BestellungNeu from './pages/BestellungNeu';
+import LieferantDetail from './pages/LieferantDetail';
 import Ausruestungsanfrage from './pages/Ausruestungsanfrage';
 import AusruestungsanfrageDetail from './pages/AusruestungsanfrageDetail';
 import AusruestungsanfrageArtikelDetail from './pages/AusruestungsanfrageArtikelDetail';
@@ -242,6 +243,22 @@ function App() {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path="/bestellungen/lieferanten/neu"
+              element={
+                <ProtectedRoute>
+                  <LieferantDetail />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/bestellungen/lieferanten/:id"
+              element={
+                <ProtectedRoute>
+                  <LieferantDetail />
+                </ProtectedRoute>
+              }
+            />
             <Route
               path="/bestellungen/:id"
               element={

frontend/src/pages/BestellungDetail.tsx

@@ -24,6 +24,9 @@ import {
   Checkbox,
   Menu,
   MenuItem,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
 } from '@mui/material';
 import {
   ArrowBack,
@@ -38,6 +41,7 @@ import {
   Upload as UploadIcon,
   ArrowDropDown,
   MoreVert,
+  ExpandMore as ExpandMoreIcon,
 } from '@mui/icons-material';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useParams, useNavigate } from 'react-router-dom';
@@ -104,6 +108,8 @@ export default function BestellungDetail() {
   const [deleteItemTarget, setDeleteItemTarget] = useState<number | null>(null);
   const [deleteFileTarget, setDeleteFileTarget] = useState<number | null>(null);
 
+  const [editMode, setEditMode] = useState(false);
+
   const [reminderForm, setReminderForm] = useState<ErinnerungFormData>({ faellig_am: '', nachricht: '' });
   const [reminderFormOpen, setReminderFormOpen] = useState(false);
   const [deleteReminderTarget, setDeleteReminderTarget] = useState<number | null>(null);
@@ -124,6 +130,7 @@ export default function BestellungDetail() {
   const canCreate = hasPermission('bestellungen:create');
   const canDelete = hasPermission('bestellungen:delete');
   const canManageReminders = hasPermission('bestellungen:manage_reminders');
+  const canManageOrders = hasPermission('bestellungen:manage_orders');
   const validTransitions = bestellung ? STATUS_TRANSITIONS[bestellung.status] : [];
 
   // All statuses except current, for force override
@@ -322,25 +329,19 @@ export default function BestellungDetail() {
 
       {/* ── Info Cards ── */}
       <Grid container spacing={2} sx={{ mb: 3 }}>
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item xs={12} sm={6} md={4}>
           <Card variant="outlined"><CardContent>
             <Typography variant="caption" color="text.secondary">Lieferant</Typography>
             <Typography>{bestellung.lieferant_name || '–'}</Typography>
           </CardContent></Card>
         </Grid>
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item xs={12} sm={6} md={4}>
           <Card variant="outlined"><CardContent>
             <Typography variant="caption" color="text.secondary">Besteller</Typography>
             <Typography>{bestellung.besteller_name || '–'}</Typography>
           </CardContent></Card>
         </Grid>
-        <Grid item xs={12} sm={6} md={3}>
+        <Grid item xs={12} sm={6} md={4}>
-          <Card variant="outlined"><CardContent>
-            <Typography variant="caption" color="text.secondary">Budget</Typography>
-            <Typography>{formatCurrency(bestellung.budget)}</Typography>
-          </CardContent></Card>
-        </Grid>
-        <Grid item xs={12} sm={6} md={3}>
           <Card variant="outlined"><CardContent>
             <Typography variant="caption" color="text.secondary">Erstellt am</Typography>
             <Typography>{formatDate(bestellung.erstellt_am)}</Typography>
@@ -349,7 +350,7 @@ export default function BestellungDetail() {
       </Grid>
 
       {/* ── Status Action ── */}
-      {canCreate && (
+      {canManageOrders && (
         <Box sx={{ mb: 3, display: 'flex', gap: 1, alignItems: 'center' }}>
           {validTransitions.length === 1 ? (
             <Button variant="contained" onClick={() => { setStatusForce(false); setStatusConfirmTarget(validTransitions[0]); }}>
@@ -440,7 +441,19 @@ export default function BestellungDetail() {
       {/* Positionen */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
       <Paper sx={{ p: 2, mb: 3 }}>
-        <Typography variant="h6" sx={{ mb: 2 }}>Positionen</Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+          <Typography variant="h6" sx={{ flexGrow: 1 }}>Positionen</Typography>
+          {canCreate && (
+            <Button
+              size="small"
+              variant={editMode ? 'outlined' : 'text'}
+              startIcon={editMode ? <CloseIcon /> : <EditIcon />}
+              onClick={() => setEditMode((m) => !m)}
+            >
+              {editMode ? 'Abbrechen' : 'Bearbeiten'}
+            </Button>
+          )}
+        </Box>
         <TableContainer>
           <Table size="small">
             <TableHead>
@@ -457,7 +470,7 @@ export default function BestellungDetail() {
             </TableHead>
             <TableBody>
               {positionen.map((p) =>
-                editingItemId === p.id ? (
+                editMode && editingItemId === p.id ? (
                   <TableRow key={p.id}>
                     <TableCell>
                       <TextField size="small" value={editingItemData.bezeichnung || ''} onChange={(e) => setEditingItemData((d) => ({ ...d, bezeichnung: e.target.value }))} />
@@ -490,7 +503,7 @@ export default function BestellungDetail() {
                     <TableCell align="right">{formatCurrency(p.einzelpreis)}</TableCell>
                     <TableCell align="right">{formatCurrency((p.einzelpreis ?? 0) * p.menge)}</TableCell>
                     <TableCell align="right">
-                      {canCreate ? (
+                      {canManageOrders ? (
                         <TextField
                           size="small"
                           type="number"
@@ -505,8 +518,8 @@ export default function BestellungDetail() {
                     </TableCell>
                     {(canCreate || canDelete) && (
                       <TableCell align="right">
-                        {canCreate && <IconButton size="small" onClick={() => startEditItem(p)}><EditIcon fontSize="small" /></IconButton>}
+                        {editMode && canCreate && <IconButton size="small" onClick={() => startEditItem(p)}><EditIcon fontSize="small" /></IconButton>}
-                        {canDelete && <IconButton size="small" color="error" onClick={() => setDeleteItemTarget(p.id)}><DeleteIcon fontSize="small" /></IconButton>}
+                        {editMode && canDelete && <IconButton size="small" color="error" onClick={() => setDeleteItemTarget(p.id)}><DeleteIcon fontSize="small" /></IconButton>}
                       </TableCell>
                     )}
                   </TableRow>
@@ -514,7 +527,7 @@ export default function BestellungDetail() {
               )}
 
               {/* ── Add Item Row ── */}
-              {canCreate && (
+              {editMode && canCreate && (
                 <TableRow>
                   <TableCell>
                     <TextField size="small" placeholder="Bezeichnung" value={newItem.bezeichnung} onChange={(e) => setNewItem((f) => ({ ...f, bezeichnung: e.target.value }))} />
@@ -553,7 +566,7 @@ export default function BestellungDetail() {
                     <TableCell colSpan={5} align="right">
                       <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 0.5 }}>
                         MwSt.
-                        {canCreate ? (
+                        {editMode && canCreate ? (
                           <TextField
                             size="small"
                             type="number"
@@ -715,14 +728,25 @@ export default function BestellungDetail() {
         )}
       </Paper>
 
+      {/* ── Notizen ── */}
+      {bestellung.notizen && (
+        <Paper sx={{ p: 2, mb: 3 }}>
+          <Typography variant="h6" sx={{ mb: 1 }}>Notizen</Typography>
+          <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{bestellung.notizen}</Typography>
+        </Paper>
+      )}
+
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* Historie */}
       {/* ══════════════════════════════════════════════════════════════════════ */}
-      <Paper sx={{ p: 2, mb: 3 }}>
+      <Accordion defaultExpanded={false} sx={{ mb: 3 }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-          <History sx={{ mr: 1 }} />
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="h6">Historie</Typography>
+            <History />
+            <Typography variant="h6">Historie ({historie.length} Einträge)</Typography>
           </Box>
+        </AccordionSummary>
+        <AccordionDetails>
           {historie.length === 0 ? (
             <Typography variant="body2" color="text.secondary">Keine Einträge</Typography>
           ) : (
@@ -745,15 +769,8 @@ export default function BestellungDetail() {
               ))}
             </Box>
           )}
-      </Paper>
+        </AccordionDetails>
-
+      </Accordion>
-      {/* ── Notizen ── */}
-      {bestellung.notizen && (
-        <Paper sx={{ p: 2, mb: 3 }}>
-          <Typography variant="h6" sx={{ mb: 1 }}>Notizen</Typography>
-          <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>{bestellung.notizen}</Typography>
-        </Paper>
-      )}
 
       {/* ══════════════════════════════════════════════════════════════════════ */}
       {/* Dialogs */}

frontend/src/pages/BestellungNeu.tsx

@@ -21,7 +21,7 @@ import { useNotification } from '../contexts/NotificationContext';
 import { bestellungApi } from '../services/bestellung';
 import type { BestellungFormData, BestellpositionFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
 
-const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', budget: undefined, notizen: '', positionen: [] };
+const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', notizen: '', positionen: [] };
 const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
 const emptyPosition: BestellpositionFormData = { bezeichnung: '', menge: 1, einheit: 'Stk' };
 
@@ -135,15 +135,6 @@ export default function BestellungNeu() {
           renderInput={(params) => <TextField {...params} label="Besteller" />}
         />
 
-        <TextField
-          label="Budget"
-          type="number"
-          InputLabelProps={{ shrink: true }}
-          value={orderForm.budget ?? ''}
-          onChange={(e) => setOrderForm((f) => ({ ...f, budget: e.target.value ? Number(e.target.value) : undefined }))}
-          inputProps={{ min: 0, step: 0.01 }}
-        />
-
         <TextField
           label="Notizen"
           multiline

frontend/src/pages/Bestellungen.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import {
   Box,
   Tab,
@@ -12,29 +12,24 @@ import {
   TableRow,
   Paper,
   Chip,
-  IconButton,
   Button,
-  Dialog,
+  Checkbox,
-  DialogTitle,
+  FormControlLabel,
-  DialogContent,
+  FormGroup,
-  DialogActions,
+  Popover,
-  TextField,
+  Badge,
-  MenuItem,
+  LinearProgress,
-  Select,
+  Divider,
-  FormControl,
-  InputLabel,
-  Tooltip,
 } from '@mui/material';
-import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import { Add as AddIcon, FilterList as FilterListIcon } from '@mui/icons-material';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
 import ChatAwareFab from '../components/shared/ChatAwareFab';
-import { useNotification } from '../contexts/NotificationContext';
 import { usePermissionContext } from '../contexts/PermissionContext';
 import { bestellungApi } from '../services/bestellung';
 import { BESTELLUNG_STATUS_LABELS, BESTELLUNG_STATUS_COLORS } from '../types/bestellung.types';
-import type { BestellungStatus, LieferantFormData, Lieferant } from '../types/bestellung.types';
+import type { BestellungStatus, Bestellung } from '../types/bestellung.types';
 
 // ── Helpers ──
 
@@ -54,13 +49,26 @@ function TabPanel({ children, value, index }: TabPanelProps) {
 
 const TAB_COUNT = 2;
 
-// ── Status options for filter ──
+// ── Status options ──
 
 const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'erstellt', 'bestellt', 'teillieferung', 'vollstaendig', 'abgeschlossen'];
+const DEFAULT_EXCLUDED_STATUSES: BestellungStatus[] = ['abgeschlossen'];
 
-// ── Empty form data ──
+// ── Kennung formatter ──
 
-const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
+function formatKennung(o: Bestellung): string {
+  if (o.laufende_nummer == null) return '–';
+  const year = new Date(o.erstellt_am).getFullYear();
+  return `${year}/${o.laufende_nummer}`;
+}
+
+// ── Brutto calculator ──
+
+function calcBrutto(o: Bestellung): number | undefined {
+  if (o.total_cost == null) return undefined;
+  const rate = (parseFloat(String(o.steuersatz)) || 20) / 100;
+  return o.total_cost * (1 + rate);
+}
 
 // ══════════════════════════════════════════════════════════════════════════════
 // Component
@@ -69,8 +77,6 @@ const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email:
 export default function Bestellungen() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const queryClient = useQueryClient();
-  const { showSuccess, showError } = useNotification();
   const { hasPermission } = usePermissionContext();
 
   // Tab from URL
@@ -83,19 +89,19 @@ export default function Bestellungen() {
     if (t >= 0 && t < TAB_COUNT) setTab(t);
   }, [searchParams]);
 
-  // ── State ──
+  // ── Filter state ──
-  const [statusFilter, setStatusFilter] = useState<string>('');
+  const [filterAnchor, setFilterAnchor] = useState<HTMLElement | null>(null);
 
-  const [vendorDialogOpen, setVendorDialogOpen] = useState(false);
+  const [selectedVendors, setSelectedVendors] = useState<Set<string> | null>(null); // null = all
-  const [vendorForm, setVendorForm] = useState<LieferantFormData>({ ...emptyVendorForm });
+  const [selectedOrderers, setSelectedOrderers] = useState<Set<string> | null>(null);
-  const [editingVendor, setEditingVendor] = useState<Lieferant | null>(null);
+  const [selectedStatuses, setSelectedStatuses] = useState<Set<BestellungStatus>>(
-
+    () => new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s)))
-  const [deleteVendorTarget, setDeleteVendorTarget] = useState<Lieferant | null>(null);
+  );
 
   // ── Queries ──
   const { data: orders = [], isLoading: ordersLoading } = useQuery({
-    queryKey: ['bestellungen', statusFilter],
+    queryKey: ['bestellungen'],
-    queryFn: () => bestellungApi.getOrders(statusFilter ? { status: statusFilter } : undefined),
+    queryFn: () => bestellungApi.getOrders(),
   });
 
   const { data: vendors = [], isLoading: vendorsLoading } = useQuery({
@@ -103,58 +109,105 @@ export default function Bestellungen() {
     queryFn: bestellungApi.getVendors,
   });
 
-  // ── Mutations ──
+  // ── Derive unique filter values from data ──
-  const createVendor = useMutation({
+  const uniqueVendors = useMemo(() => {
-    mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
+    const map = new Map<string, string>();
-    onSuccess: () => {
+    orders.forEach((o) => {
-      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
+      if (o.lieferant_name) map.set(String(o.lieferant_id ?? o.lieferant_name), o.lieferant_name);
-      showSuccess('Lieferant erstellt');
-      closeVendorDialog();
-    },
-    onError: () => showError('Fehler beim Erstellen des Lieferanten'),
     });
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [orders]);
 
-  const updateVendor = useMutation({
+  const uniqueOrderers = useMemo(() => {
-    mutationFn: ({ id, data }: { id: number; data: LieferantFormData }) => bestellungApi.updateVendor(id, data),
+    const map = new Map<string, string>();
-    onSuccess: () => {
+    orders.forEach((o) => {
-      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
+      if (o.besteller_name) map.set(o.besteller_id ?? o.besteller_name, o.besteller_name);
-      showSuccess('Lieferant aktualisiert');
-      closeVendorDialog();
-    },
-    onError: () => showError('Fehler beim Aktualisieren des Lieferanten'),
     });
+    return Array.from(map.entries()).sort((a, b) => a[1].localeCompare(b[1]));
+  }, [orders]);
 
-  const deleteVendor = useMutation({
+  // ── Filtered orders ──
-    mutationFn: (id: number) => bestellungApi.deleteVendor(id),
+  const filteredOrders = useMemo(() => {
-    onSuccess: () => {
+    return orders.filter((o) => {
-      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
+      // Status filter
-      showSuccess('Lieferant gelöscht');
+      if (!selectedStatuses.has(o.status)) return false;
-      setDeleteVendorTarget(null);
+      // Vendor filter (null = all selected)
-    },
+      if (selectedVendors !== null) {
-    onError: () => showError('Fehler beim Löschen des Lieferanten'),
+        const key = String(o.lieferant_id ?? o.lieferant_name ?? '');
+        if (!selectedVendors.has(key)) return false;
+      }
+      // Orderer filter (null = all selected)
+      if (selectedOrderers !== null) {
+        const key = o.besteller_id ?? o.besteller_name ?? '';
+        if (!selectedOrderers.has(key)) return false;
+      }
+      return true;
     });
+  }, [orders, selectedStatuses, selectedVendors, selectedOrderers]);
 
-  // ── Dialog helpers ──
+  // ── Active filter count ──
+  const activeFilterCount = useMemo(() => {
+    let count = 0;
+    if (selectedStatuses.size !== ALL_STATUSES.length - DEFAULT_EXCLUDED_STATUSES.length) count++;
+    if (selectedVendors !== null) count++;
+    if (selectedOrderers !== null) count++;
+    return count;
+  }, [selectedStatuses, selectedVendors, selectedOrderers]);
 
-  function openEditVendor(v: Lieferant) {
+  // ── Filter handlers ──
-    setEditingVendor(v);
+  function resetFilters() {
-    setVendorForm({ name: v.name, kontakt_name: v.kontakt_name || '', email: v.email || '', telefon: v.telefon || '', adresse: v.adresse || '', website: v.website || '', notizen: v.notizen || '' });
+    setSelectedVendors(null);
-    setVendorDialogOpen(true);
+    setSelectedOrderers(null);
+    setSelectedStatuses(new Set(ALL_STATUSES.filter((s) => !DEFAULT_EXCLUDED_STATUSES.includes(s))));
   }
 
-  function closeVendorDialog() {
+  function toggleStatus(s: BestellungStatus) {
-    setVendorDialogOpen(false);
+    setSelectedStatuses((prev) => {
-    setEditingVendor(null);
+      const next = new Set(prev);
-    setVendorForm({ ...emptyVendorForm });
+      if (next.has(s)) next.delete(s);
+      else next.add(s);
+      return next;
+    });
   }
 
-  function handleVendorSave() {
+  function toggleVendor(key: string) {
-    if (!vendorForm.name.trim()) return;
+    setSelectedVendors((prev) => {
-    if (editingVendor) {
+      if (prev === null) {
-      updateVendor.mutate({ id: editingVendor.id, data: vendorForm });
+        // was "all selected" → deselect this one
-    } else {
+        const allKeys = new Set(uniqueVendors.map(([k]) => k));
-      createVendor.mutate(vendorForm);
+        allKeys.delete(key);
+        return allKeys;
       }
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      // if all are selected again, go back to null
+      if (next.size === uniqueVendors.length) return null;
+      return next;
+    });
+  }
+
+  function toggleOrderer(key: string) {
+    setSelectedOrderers((prev) => {
+      if (prev === null) {
+        const allKeys = new Set(uniqueOrderers.map(([k]) => k));
+        allKeys.delete(key);
+        return allKeys;
+      }
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      if (next.size === uniqueOrderers.length) return null;
+      return next;
+    });
+  }
+
+  function isVendorSelected(key: string) {
+    return selectedVendors === null || selectedVendors.has(key);
+  }
+
+  function isOrdererSelected(key: string) {
+    return selectedOrderers === null || selectedOrderers.has(key);
   }
 
   // ── Render ──
@@ -173,47 +226,123 @@ export default function Bestellungen() {
       {/* ── Tab 0: Orders ── */}
       <TabPanel value={tab} index={0}>
         <Box sx={{ mb: 2, display: 'flex', gap: 2, alignItems: 'center' }}>
-          <FormControl size="small" sx={{ minWidth: 200 }}>
+          <Badge badgeContent={activeFilterCount} color="primary">
-            <InputLabel>Status Filter</InputLabel>
+            <Button
-            <Select
+              variant="outlined"
-              value={statusFilter}
+              size="small"
-              label="Status Filter"
+              startIcon={<FilterListIcon />}
-              onChange={(e) => setStatusFilter(e.target.value)}
+              onClick={(e) => setFilterAnchor(e.currentTarget)}
             >
-              <MenuItem value="">Alle</MenuItem>
+              Filter
-              {ALL_STATUSES.map((s) => (
+            </Button>
-                <MenuItem key={s} value={s}>{BESTELLUNG_STATUS_LABELS[s]}</MenuItem>
+          </Badge>
-              ))}
+          {activeFilterCount > 0 && (
-            </Select>
+            <Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
-          </FormControl>
+          )}
+          <Typography variant="body2" color="text.secondary">
+            {filteredOrders.length} von {orders.length} Bestellungen
+          </Typography>
         </Box>
 
+        {/* Filter Popover */}
+        <Popover
+          open={!!filterAnchor}
+          anchorEl={filterAnchor}
+          onClose={() => setFilterAnchor(null)}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+          slotProps={{ paper: { sx: { p: 2, maxWidth: 480, maxHeight: '70vh', overflow: 'auto' } } }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {/* Status */}
+            <Box>
+              <Typography variant="subtitle2" sx={{ mb: 0.5 }}>Status</Typography>
+              <FormGroup row>
+                {ALL_STATUSES.map((s) => (
+                  <FormControlLabel
+                    key={s}
+                    control={<Checkbox size="small" checked={selectedStatuses.has(s)} onChange={() => toggleStatus(s)} />}
+                    label={BESTELLUNG_STATUS_LABELS[s]}
+                  />
+                ))}
+              </FormGroup>
+            </Box>
+            <Divider />
+
+            {/* Vendor */}
+            {uniqueVendors.length > 0 && (
+              <Box>
+                <Typography variant="subtitle2" sx={{ mb: 0.5 }}>Lieferant</Typography>
+                <FormGroup>
+                  {uniqueVendors.map(([key, label]) => (
+                    <FormControlLabel
+                      key={key}
+                      control={<Checkbox size="small" checked={isVendorSelected(key)} onChange={() => toggleVendor(key)} />}
+                      label={label}
+                    />
+                  ))}
+                </FormGroup>
+              </Box>
+            )}
+            {uniqueVendors.length > 0 && <Divider />}
+
+            {/* Orderer */}
+            {uniqueOrderers.length > 0 && (
+              <Box>
+                <Typography variant="subtitle2" sx={{ mb: 0.5 }}>Besteller</Typography>
+                <FormGroup>
+                  {uniqueOrderers.map(([key, label]) => (
+                    <FormControlLabel
+                      key={key}
+                      control={<Checkbox size="small" checked={isOrdererSelected(key)} onChange={() => toggleOrderer(key)} />}
+                      label={label}
+                    />
+                  ))}
+                </FormGroup>
+              </Box>
+            )}
+
+            <Divider />
+            <Button size="small" onClick={resetFilters}>Zurücksetzen</Button>
+          </Box>
+        </Popover>
+
         <TableContainer component={Paper}>
           <Table size="small">
             <TableHead>
               <TableRow>
+                <TableCell>Kennung</TableCell>
                 <TableCell>Bezeichnung</TableCell>
                 <TableCell>Lieferant</TableCell>
                 <TableCell>Besteller</TableCell>
                 <TableCell>Status</TableCell>
                 <TableCell align="right">Positionen</TableCell>
-                <TableCell align="right">Gesamtpreis</TableCell>
+                <TableCell align="right">Gesamtpreis (brutto)</TableCell>
+                <TableCell>Lieferung</TableCell>
                 <TableCell>Erstellt am</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {ordersLoading ? (
-                <TableRow><TableCell colSpan={7} align="center">Laden...</TableCell></TableRow>
+                <TableRow><TableCell colSpan={9} align="center">Laden...</TableCell></TableRow>
-              ) : orders.length === 0 ? (
+              ) : filteredOrders.length === 0 ? (
-                <TableRow><TableCell colSpan={7} align="center">Keine Bestellungen vorhanden</TableCell></TableRow>
+                <TableRow><TableCell colSpan={9} align="center">Keine Bestellungen vorhanden</TableCell></TableRow>
               ) : (
-                orders.map((o) => (
+                filteredOrders.map((o) => {
+                  const brutto = calcBrutto(o);
+                  const totalOrdered = o.total_ordered ?? 0;
+                  const totalReceived = o.total_received ?? 0;
+                  const deliveryPct = totalOrdered > 0 ? (totalReceived / totalOrdered) * 100 : 0;
+                  return (
                     <TableRow
                       key={o.id}
                       hover
                       sx={{ cursor: 'pointer' }}
                       onClick={() => navigate(`/bestellungen/${o.id}`)}
                     >
+                      <TableCell sx={{ whiteSpace: 'nowrap', fontFamily: 'monospace', fontSize: '0.85rem' }}>
+                        {formatKennung(o)}
+                      </TableCell>
                       <TableCell>{o.bezeichnung}</TableCell>
                       <TableCell>{o.lieferant_name || '–'}</TableCell>
                       <TableCell>{o.besteller_name || '–'}</TableCell>
@@ -225,10 +354,25 @@ export default function Bestellungen() {
                         />
                       </TableCell>
                       <TableCell align="right">{o.items_count ?? 0}</TableCell>
-                    <TableCell align="right">{formatCurrency(o.total_cost)}</TableCell>
+                      <TableCell align="right">{formatCurrency(brutto)}</TableCell>
+                      <TableCell sx={{ minWidth: 100 }}>
+                        {totalOrdered > 0 ? (
+                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <LinearProgress
+                              variant="determinate"
+                              value={deliveryPct}
+                              sx={{ flexGrow: 1, height: 6, borderRadius: 3 }}
+                            />
+                            <Typography variant="caption" sx={{ whiteSpace: 'nowrap' }}>
+                              {totalReceived}/{totalOrdered}
+                            </Typography>
+                          </Box>
+                        ) : '–'}
+                      </TableCell>
                       <TableCell>{formatDate(o.erstellt_am)}</TableCell>
                     </TableRow>
-                ))
+                  );
+                })
               )}
             </TableBody>
           </Table>
@@ -252,34 +396,30 @@ export default function Bestellungen() {
                 <TableCell>E-Mail</TableCell>
                 <TableCell>Telefon</TableCell>
                 <TableCell>Website</TableCell>
-                <TableCell align="right">Aktionen</TableCell>
               </TableRow>
             </TableHead>
             <TableBody>
               {vendorsLoading ? (
-                <TableRow><TableCell colSpan={6} align="center">Laden...</TableCell></TableRow>
+                <TableRow><TableCell colSpan={5} align="center">Laden...</TableCell></TableRow>
               ) : vendors.length === 0 ? (
-                <TableRow><TableCell colSpan={6} align="center">Keine Lieferanten vorhanden</TableCell></TableRow>
+                <TableRow><TableCell colSpan={5} align="center">Keine Lieferanten vorhanden</TableCell></TableRow>
               ) : (
                 vendors.map((v) => (
-                  <TableRow key={v.id}>
+                  <TableRow
+                    key={v.id}
+                    hover
+                    sx={{ cursor: 'pointer' }}
+                    onClick={() => navigate(`/bestellungen/lieferanten/${v.id}`)}
+                  >
                     <TableCell>{v.name}</TableCell>
                     <TableCell>{v.kontakt_name || '–'}</TableCell>
-                    <TableCell>{v.email ? <a href={`mailto:${v.email}`}>{v.email}</a> : '–'}</TableCell>
+                    <TableCell>{v.email ? <a href={`mailto:${v.email}`} onClick={(e) => e.stopPropagation()}>{v.email}</a> : '–'}</TableCell>
                     <TableCell>{v.telefon || '–'}</TableCell>
                     <TableCell>
                       {v.website ? (
-                        <a href={v.website} target="_blank" rel="noopener noreferrer">{v.website}</a>
+                        <a href={v.website} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>{v.website}</a>
                       ) : '–'}
                     </TableCell>
-                    <TableCell align="right">
-                      <Tooltip title="Bearbeiten">
-                        <IconButton size="small" onClick={() => openEditVendor(v)}><EditIcon fontSize="small" /></IconButton>
-                      </Tooltip>
-                      <Tooltip title="Löschen">
-                        <IconButton size="small" color="error" onClick={() => setDeleteVendorTarget(v)}><DeleteIcon fontSize="small" /></IconButton>
-                      </Tooltip>
-                    </TableCell>
                   </TableRow>
                 ))
               )}
@@ -288,79 +428,11 @@ export default function Bestellungen() {
         </TableContainer>
 
         {hasPermission('bestellungen:manage_vendors') && (
-          <ChatAwareFab onClick={() => setVendorDialogOpen(true)} aria-label="Lieferant hinzufügen">
+          <ChatAwareFab onClick={() => navigate('/bestellungen/lieferanten/neu')} aria-label="Lieferant hinzufügen">
             <AddIcon />
           </ChatAwareFab>
         )}
       </TabPanel>
-
-      {/* ── Create/Edit Vendor Dialog ── */}
-      <Dialog open={vendorDialogOpen} onClose={closeVendorDialog} maxWidth="sm" fullWidth>
-        <DialogTitle>{editingVendor ? 'Lieferant bearbeiten' : 'Neuer Lieferant'}</DialogTitle>
-        <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
-          <TextField
-            label="Name"
-            required
-            value={vendorForm.name}
-            onChange={(e) => setVendorForm((f) => ({ ...f, name: e.target.value }))}
-          />
-          <TextField
-            label="Kontakt-Name"
-            value={vendorForm.kontakt_name || ''}
-            onChange={(e) => setVendorForm((f) => ({ ...f, kontakt_name: e.target.value }))}
-          />
-          <TextField
-            label="E-Mail"
-            type="email"
-            value={vendorForm.email || ''}
-            onChange={(e) => setVendorForm((f) => ({ ...f, email: e.target.value }))}
-          />
-          <TextField
-            label="Telefon"
-            value={vendorForm.telefon || ''}
-            onChange={(e) => setVendorForm((f) => ({ ...f, telefon: e.target.value }))}
-          />
-          <TextField
-            label="Adresse"
-            value={vendorForm.adresse || ''}
-            onChange={(e) => setVendorForm((f) => ({ ...f, adresse: e.target.value }))}
-          />
-          <TextField
-            label="Website"
-            value={vendorForm.website || ''}
-            onChange={(e) => setVendorForm((f) => ({ ...f, website: e.target.value }))}
-          />
-          <TextField
-            label="Notizen"
-            multiline
-            rows={3}
-            value={vendorForm.notizen || ''}
-            onChange={(e) => setVendorForm((f) => ({ ...f, notizen: e.target.value }))}
-          />
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={closeVendorDialog}>Abbrechen</Button>
-          <Button variant="contained" onClick={handleVendorSave} disabled={!vendorForm.name.trim() || createVendor.isPending || updateVendor.isPending}>
-            {editingVendor ? 'Speichern' : 'Erstellen'}
-          </Button>
-        </DialogActions>
-      </Dialog>
-
-      {/* ── Delete Vendor Confirm ── */}
-      <Dialog open={!!deleteVendorTarget} onClose={() => setDeleteVendorTarget(null)}>
-        <DialogTitle>Lieferant löschen</DialogTitle>
-        <DialogContent>
-          <Typography>
-            Soll der Lieferant <strong>{deleteVendorTarget?.name}</strong> wirklich gelöscht werden?
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={() => setDeleteVendorTarget(null)}>Abbrechen</Button>
-          <Button color="error" variant="contained" onClick={() => deleteVendorTarget && deleteVendor.mutate(deleteVendorTarget.id)} disabled={deleteVendor.isPending}>
-            Löschen
-          </Button>
-        </DialogActions>
-      </Dialog>
     </DashboardLayout>
   );
 }

frontend/src/pages/LieferantDetail.tsx

@@ -0,0 +1,306 @@
+import { useState, useEffect } from 'react';
+import {
+  Box,
+  Typography,
+  Paper,
+  Button,
+  TextField,
+  IconButton,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Grid,
+  Card,
+  CardContent,
+  Skeleton,
+} from '@mui/material';
+import { ArrowBack, Edit as EditIcon, Delete as DeleteIcon, Save as SaveIcon, Close as CloseIcon } from '@mui/icons-material';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useParams, useNavigate } from 'react-router-dom';
+import DashboardLayout from '../components/dashboard/DashboardLayout';
+import { useNotification } from '../contexts/NotificationContext';
+import { usePermissionContext } from '../contexts/PermissionContext';
+import { bestellungApi } from '../services/bestellung';
+import type { LieferantFormData } from '../types/bestellung.types';
+
+const emptyForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
+
+export default function LieferantDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { showSuccess, showError } = useNotification();
+  const { hasPermission } = usePermissionContext();
+
+  const isNew = id === 'neu';
+  const vendorId = isNew ? 0 : Number(id);
+  const canManage = hasPermission('bestellungen:manage_vendors');
+
+  const [editMode, setEditMode] = useState(isNew);
+  const [form, setForm] = useState<LieferantFormData>({ ...emptyForm });
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  // ── Query ──
+  const { data: vendor, isLoading, isError } = useQuery({
+    queryKey: ['lieferant', vendorId],
+    queryFn: () => bestellungApi.getVendor(vendorId),
+    enabled: !isNew && !!vendorId,
+  });
+
+  // Sync form with loaded vendor data
+  useEffect(() => {
+    if (vendor) {
+      setForm({
+        name: vendor.name,
+        kontakt_name: vendor.kontakt_name || '',
+        email: vendor.email || '',
+        telefon: vendor.telefon || '',
+        adresse: vendor.adresse || '',
+        website: vendor.website || '',
+        notizen: vendor.notizen || '',
+      });
+    }
+  }, [vendor]);
+
+  // ── Mutations ──
+  const createVendor = useMutation({
+    mutationFn: (data: LieferantFormData) => bestellungApi.createVendor(data),
+    onSuccess: (created) => {
+      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
+      showSuccess('Lieferant erstellt');
+      navigate(`/bestellungen/lieferanten/${created.id}`, { replace: true });
+    },
+    onError: () => showError('Fehler beim Erstellen des Lieferanten'),
+  });
+
+  const updateVendor = useMutation({
+    mutationFn: (data: LieferantFormData) => bestellungApi.updateVendor(vendorId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lieferant', vendorId] });
+      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
+      showSuccess('Lieferant aktualisiert');
+      setEditMode(false);
+    },
+    onError: () => showError('Fehler beim Aktualisieren des Lieferanten'),
+  });
+
+  const deleteVendor = useMutation({
+    mutationFn: () => bestellungApi.deleteVendor(vendorId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['lieferanten'] });
+      showSuccess('Lieferant gelöscht');
+      navigate('/bestellungen?tab=1');
+    },
+    onError: () => showError('Fehler beim Löschen des Lieferanten'),
+  });
+
+  function handleSave() {
+    if (!form.name.trim()) return;
+    if (isNew) {
+      createVendor.mutate(form);
+    } else {
+      updateVendor.mutate(form);
+    }
+  }
+
+  function handleCancel() {
+    if (isNew) {
+      navigate('/bestellungen?tab=1');
+    } else if (vendor) {
+      setForm({
+        name: vendor.name,
+        kontakt_name: vendor.kontakt_name || '',
+        email: vendor.email || '',
+        telefon: vendor.telefon || '',
+        adresse: vendor.adresse || '',
+        website: vendor.website || '',
+        notizen: vendor.notizen || '',
+      });
+      setEditMode(false);
+    }
+  }
+
+  // ── Loading / Error ──
+  if (!isNew && isLoading) {
+    return (
+      <DashboardLayout>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
+          <IconButton onClick={() => navigate('/bestellungen?tab=1')}><ArrowBack /></IconButton>
+          <Skeleton width={300} height={40} />
+        </Box>
+        <Paper sx={{ p: 3 }}>
+          <Skeleton height={40} />
+          <Skeleton height={40} />
+          <Skeleton height={40} />
+        </Paper>
+      </DashboardLayout>
+    );
+  }
+
+  if (!isNew && (isError || !vendor)) {
+    return (
+      <DashboardLayout>
+        <Box sx={{ p: 4, textAlign: 'center' }}>
+          <Typography color="error">Lieferant nicht gefunden.</Typography>
+          <Button sx={{ mt: 2 }} onClick={() => navigate('/bestellungen?tab=1')}>Zurück</Button>
+        </Box>
+      </DashboardLayout>
+    );
+  }
+
+  const isSaving = createVendor.isPending || updateVendor.isPending;
+
+  return (
+    <DashboardLayout>
+      {/* ── Header ── */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
+        <IconButton onClick={() => navigate('/bestellungen?tab=1')}>
+          <ArrowBack />
+        </IconButton>
+        <Typography variant="h4" sx={{ flexGrow: 1 }}>
+          {isNew ? 'Neuer Lieferant' : vendor!.name}
+        </Typography>
+        {!isNew && canManage && !editMode && (
+          <>
+            <Button startIcon={<EditIcon />} onClick={() => setEditMode(true)}>
+              Bearbeiten
+            </Button>
+            <Button startIcon={<DeleteIcon />} color="error" onClick={() => setDeleteDialogOpen(true)}>
+              Löschen
+            </Button>
+          </>
+        )}
+        {editMode && (
+          <>
+            <Button
+              variant="contained"
+              startIcon={<SaveIcon />}
+              onClick={handleSave}
+              disabled={!form.name.trim() || isSaving}
+            >
+              Speichern
+            </Button>
+            <Button startIcon={<CloseIcon />} onClick={handleCancel}>
+              Abbrechen
+            </Button>
+          </>
+        )}
+      </Box>
+
+      {/* ── Content ── */}
+      {editMode ? (
+        <Paper sx={{ p: 3 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <TextField
+              label="Name"
+              required
+              value={form.name}
+              onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+            />
+            <TextField
+              label="Kontakt-Name"
+              value={form.kontakt_name || ''}
+              onChange={(e) => setForm((f) => ({ ...f, kontakt_name: e.target.value }))}
+            />
+            <TextField
+              label="E-Mail"
+              type="email"
+              value={form.email || ''}
+              onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
+            />
+            <TextField
+              label="Telefon"
+              value={form.telefon || ''}
+              onChange={(e) => setForm((f) => ({ ...f, telefon: e.target.value }))}
+            />
+            <TextField
+              label="Adresse"
+              value={form.adresse || ''}
+              onChange={(e) => setForm((f) => ({ ...f, adresse: e.target.value }))}
+            />
+            <TextField
+              label="Website"
+              value={form.website || ''}
+              onChange={(e) => setForm((f) => ({ ...f, website: e.target.value }))}
+            />
+            <TextField
+              label="Notizen"
+              multiline
+              rows={4}
+              value={form.notizen || ''}
+              onChange={(e) => setForm((f) => ({ ...f, notizen: e.target.value }))}
+            />
+          </Box>
+        </Paper>
+      ) : (
+        <Grid container spacing={2}>
+          <Grid item xs={12} sm={6} md={4}>
+            <Card variant="outlined"><CardContent>
+              <Typography variant="caption" color="text.secondary">Name</Typography>
+              <Typography>{vendor!.name}</Typography>
+            </CardContent></Card>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <Card variant="outlined"><CardContent>
+              <Typography variant="caption" color="text.secondary">Kontakt</Typography>
+              <Typography>{vendor!.kontakt_name || '–'}</Typography>
+            </CardContent></Card>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <Card variant="outlined"><CardContent>
+              <Typography variant="caption" color="text.secondary">E-Mail</Typography>
+              <Typography>
+                {vendor!.email ? <a href={`mailto:${vendor!.email}`}>{vendor!.email}</a> : '–'}
+              </Typography>
+            </CardContent></Card>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <Card variant="outlined"><CardContent>
+              <Typography variant="caption" color="text.secondary">Telefon</Typography>
+              <Typography>{vendor!.telefon || '–'}</Typography>
+            </CardContent></Card>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <Card variant="outlined"><CardContent>
+              <Typography variant="caption" color="text.secondary">Website</Typography>
+              <Typography>
+                {vendor!.website ? <a href={vendor!.website} target="_blank" rel="noopener noreferrer">{vendor!.website}</a> : '–'}
+              </Typography>
+            </CardContent></Card>
+          </Grid>
+          <Grid item xs={12} sm={6} md={4}>
+            <Card variant="outlined"><CardContent>
+              <Typography variant="caption" color="text.secondary">Adresse</Typography>
+              <Typography>{vendor!.adresse || '–'}</Typography>
+            </CardContent></Card>
+          </Grid>
+          {vendor!.notizen && (
+            <Grid item xs={12}>
+              <Card variant="outlined"><CardContent>
+                <Typography variant="caption" color="text.secondary">Notizen</Typography>
+                <Typography sx={{ whiteSpace: 'pre-wrap' }}>{vendor!.notizen}</Typography>
+              </CardContent></Card>
+            </Grid>
+          )}
+        </Grid>
+      )}
+
+      {/* ── Delete Dialog ── */}
+      <Dialog open={deleteDialogOpen} onClose={() => setDeleteDialogOpen(false)}>
+        <DialogTitle>Lieferant löschen</DialogTitle>
+        <DialogContent>
+          <Typography>
+            Soll der Lieferant <strong>{vendor?.name}</strong> wirklich gelöscht werden?
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteDialogOpen(false)}>Abbrechen</Button>
+          <Button color="error" variant="contained" onClick={() => deleteVendor.mutate()} disabled={deleteVendor.isPending}>
+            Löschen
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </DashboardLayout>
+  );
+}

frontend/src/types/bestellung.types.ts

@@ -67,6 +67,9 @@ export interface Bestellung {
   // Computed
   total_cost?: number;
   items_count?: number;
+  total_received?: number;
+  total_ordered?: number;
+  laufende_nummer?: number;
 }
 
 export interface BestellungFormData {