new features

backend/src/controllers/bestellung.controller.ts

@@ -113,7 +113,7 @@ class BestellungController {
   }
 
   async createOrder(req: Request, res: Response): Promise<void> {
-    const { bezeichnung, lieferant_id, budget, besteller_id } = req.body;
+    const { bezeichnung, lieferant_id, budget, besteller_id, positionen } = req.body;
     if (!bezeichnung || typeof bezeichnung !== 'string' || bezeichnung.trim().length === 0) {
       res.status(400).json({ success: false, message: 'Bezeichnung ist erforderlich' });
       return;
@@ -130,6 +130,10 @@ class BestellungController {
       res.status(400).json({ success: false, message: 'Ungültige Besteller-ID' });
       return;
     }
+    if (positionen != null && !Array.isArray(positionen)) {
+      res.status(400).json({ success: false, message: 'Positionen muss ein Array sein' });
+      return;
+    }
     try {
       const order = await bestellungService.createOrder(req.body, req.user!.id);
       res.status(201).json({ success: true, data: order });

backend/src/services/bestellung.service.ts

@@ -174,21 +174,38 @@ async function getOrderById(id: number) {
   }
 }
 
-async function createOrder(data: { bezeichnung: string; lieferant_id?: number; besteller_id?: string; notizen?: string; budget?: number }, userId: string) {
+async function createOrder(data: { bezeichnung: string; lieferant_id?: number; besteller_id?: string; notizen?: string; budget?: number; positionen?: Array<{ bezeichnung: string; menge: number; einheit?: string }> }, userId: string) {
+  const client = await pool.connect();
   try {
+    await client.query('BEGIN');
     const bestellerId = data.besteller_id && data.besteller_id.trim() ? data.besteller_id.trim() : null;
-    const result = await pool.query(
+    const result = await client.query(
       `INSERT INTO bestellungen (bezeichnung, lieferant_id, besteller_id, notizen, budget, erstellt_von)
        VALUES ($1, $2, $3, $4, $5, $6)
        RETURNING *`,
       [data.bezeichnung, data.lieferant_id || null, bestellerId, data.notizen || null, data.budget || null, userId]
     );
     const order = result.rows[0];
+
+    if (data.positionen && data.positionen.length > 0) {
+      for (const pos of data.positionen) {
+        await client.query(
+          `INSERT INTO bestellpositionen (bestellung_id, bezeichnung, menge, einheit)
+           VALUES ($1, $2, $3, $4)`,
+          [order.id, pos.bezeichnung, pos.menge, pos.einheit || 'Stk']
+        );
+      }
+    }
+
     await logAction(order.id, 'Bestellung erstellt', `Bestellung "${data.bezeichnung}" erstellt`, userId);
+    await client.query('COMMIT');
     return order;
   } catch (error) {
+    await client.query('ROLLBACK');
     logger.error('BestellungService.createOrder failed', { error });
     throw new Error('Bestellung konnte nicht erstellt werden');
+  } finally {
+    client.release();
   }
 }
 

frontend/src/components/shared/Sidebar.tsx

@@ -126,12 +126,7 @@ const baseNavigationItems: NavigationItem[] = [
     text: 'Shop',
     icon: <Store />,
     path: '/shop',
-    subItems: [
+    // subItems computed dynamically in navigationItems useMemo
-      { text: 'Katalog', path: '/shop?tab=0' },
-      { text: 'Meine Anfragen', path: '/shop?tab=1' },
-      { text: 'Alle Anfragen', path: '/shop?tab=2' },
-      { text: 'Übersicht', path: '/shop?tab=3' },
-    ],
     permission: 'shop:view',
   },
   {
@@ -194,8 +189,21 @@ function Sidebar({ mobileOpen, onMobileClose }: SidebarProps) {
       subItems: vehicleSubItems.length > 0 ? vehicleSubItems : undefined,
       permission: 'fahrzeuge:view',
     };
+
+    // Build Shop sub-items dynamically based on permissions (tab order must match Shop.tsx)
+    const shopSubItems: SubItem[] = [];
+    let shopTabIdx = 0;
+    if (hasPermission('shop:create_request')) { shopSubItems.push({ text: 'Meine Anfragen', path: `/shop?tab=${shopTabIdx}` }); shopTabIdx++; }
+    if (hasPermission('shop:approve_requests')) { shopSubItems.push({ text: 'Alle Anfragen', path: `/shop?tab=${shopTabIdx}` }); shopTabIdx++; }
+    if (hasPermission('shop:view_overview')) { shopSubItems.push({ text: 'Übersicht', path: `/shop?tab=${shopTabIdx}` }); shopTabIdx++; }
+    shopSubItems.push({ text: 'Katalog', path: `/shop?tab=${shopTabIdx}` });
+
     const items = baseNavigationItems
-      .map((item) => item.path === '/fahrzeuge' ? fahrzeugeItem : item)
+      .map((item) => {
+        if (item.path === '/fahrzeuge') return fahrzeugeItem;
+        if (item.path === '/shop') return { ...item, subItems: shopSubItems };
+        return item;
+      })
       .filter((item) => !item.permission || hasPermission(item.permission));
     return hasPermission('admin:view') ? [...items, adminItem, adminSettingsItem] : items;
   }, [vehicleSubItems, hasPermission]);

frontend/src/pages/Bestellungen.tsx

@@ -26,7 +26,7 @@ import {
   Tooltip,
   Autocomplete,
 } from '@mui/material';
-import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import { Add as AddIcon, Edit as EditIcon, Delete as DeleteIcon, RemoveCircleOutline as RemoveIcon } from '@mui/icons-material';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
@@ -35,7 +35,7 @@ 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, BestellungFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
+import type { BestellungStatus, BestellungFormData, BestellpositionFormData, LieferantFormData, Lieferant } from '../types/bestellung.types';
 
 // ── Helpers ──
 
@@ -61,8 +61,9 @@ const ALL_STATUSES: BestellungStatus[] = ['entwurf', 'erstellt', 'bestellt', 'te
 
 // ── Empty form data ──
 
-const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', budget: undefined, notizen: '' };
+const emptyOrderForm: BestellungFormData = { bezeichnung: '', lieferant_id: undefined, besteller_id: '', budget: undefined, notizen: '', positionen: [] };
 const emptyVendorForm: LieferantFormData = { name: '', kontakt_name: '', email: '', telefon: '', adresse: '', website: '', notizen: '' };
+const emptyPosition: BestellpositionFormData = { bezeichnung: '', menge: 1, einheit: 'Stk' };
 
 // ══════════════════════════════════════════════════════════════════════════════
 // Component
@@ -330,12 +331,13 @@ export default function Bestellungen() {
       </TabPanel>
 
       {/* ── Create Order Dialog ── */}
-      <Dialog open={orderDialogOpen} onClose={() => setOrderDialogOpen(false)} maxWidth="sm" fullWidth>
+      <Dialog open={orderDialogOpen} onClose={() => setOrderDialogOpen(false)} maxWidth="md" fullWidth>
         <DialogTitle>Neue Bestellung</DialogTitle>
         <DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: '16px !important' }}>
           <TextField
             label="Bezeichnung"
             required
+            InputLabelProps={{ shrink: true }}
             value={orderForm.bezeichnung}
             onChange={(e) => setOrderForm((f) => ({ ...f, bezeichnung: e.target.value }))}
           />
@@ -378,13 +380,6 @@ export default function Bestellungen() {
             onChange={(_e, v) => setOrderForm((f) => ({ ...f, besteller_id: v?.id || '' }))}
             renderInput={(params) => <TextField {...params} label="Besteller" />}
           />
-          <TextField
-            label="Budget"
-            type="number"
-            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
@@ -392,6 +387,69 @@ export default function Bestellungen() {
             value={orderForm.notizen || ''}
             onChange={(e) => setOrderForm((f) => ({ ...f, notizen: e.target.value }))}
           />
+
+          {/* ── Dynamic Items List ── */}
+          <Typography variant="subtitle2" sx={{ mt: 1 }}>Positionen</Typography>
+          {(orderForm.positionen || []).map((pos, idx) => (
+            <Box key={idx} sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
+              <TextField
+                label="Bezeichnung"
+                size="small"
+                required
+                InputLabelProps={{ shrink: true }}
+                value={pos.bezeichnung}
+                onChange={(e) => {
+                  const next = [...(orderForm.positionen || [])];
+                  next[idx] = { ...next[idx], bezeichnung: e.target.value };
+                  setOrderForm((f) => ({ ...f, positionen: next }));
+                }}
+                sx={{ flexGrow: 1 }}
+              />
+              <TextField
+                label="Menge"
+                size="small"
+                type="number"
+                InputLabelProps={{ shrink: true }}
+                value={pos.menge}
+                onChange={(e) => {
+                  const next = [...(orderForm.positionen || [])];
+                  next[idx] = { ...next[idx], menge: Math.max(1, Number(e.target.value) || 1) };
+                  setOrderForm((f) => ({ ...f, positionen: next }));
+                }}
+                sx={{ width: 90 }}
+                inputProps={{ min: 1 }}
+              />
+              <TextField
+                label="Einheit"
+                size="small"
+                InputLabelProps={{ shrink: true }}
+                value={pos.einheit || 'Stk'}
+                onChange={(e) => {
+                  const next = [...(orderForm.positionen || [])];
+                  next[idx] = { ...next[idx], einheit: e.target.value };
+                  setOrderForm((f) => ({ ...f, positionen: next }));
+                }}
+                sx={{ width: 100 }}
+              />
+              <IconButton
+                size="small"
+                color="error"
+                onClick={() => {
+                  const next = (orderForm.positionen || []).filter((_, i) => i !== idx);
+                  setOrderForm((f) => ({ ...f, positionen: next }));
+                }}
+              >
+                <RemoveIcon />
+              </IconButton>
+            </Box>
+          ))}
+          <Button
+            size="small"
+            startIcon={<AddIcon />}
+            onClick={() => setOrderForm((f) => ({ ...f, positionen: [...(f.positionen || []), { ...emptyPosition }] }))}
+          >
+            Position hinzufügen
+          </Button>
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOrderDialogOpen(false)}>Abbrechen</Button>

frontend/src/pages/Shop.tsx

@@ -653,11 +653,12 @@ export default function Shop() {
   };
 
   const tabIndex = useMemo(() => {
-    const map: Record<string, number> = { katalog: 0 };
+    const map: Record<string, number> = {};
-    let next = 1;
+    let next = 0;
     if (canCreate) { map.meine = next; next++; }
     if (canApprove) { map.alle = next; next++; }
-    if (canViewOverview) { map.uebersicht = next; }
+    if (canViewOverview) { map.uebersicht = next; next++; }
+    map.katalog = next;
     return map;
   }, [canCreate, canApprove, canViewOverview]);
 
@@ -675,17 +676,17 @@ export default function Shop() {
 
       <Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
         <Tabs value={activeTab} onChange={handleTabChange} variant="scrollable" scrollButtons="auto">
-          <Tab label="Katalog" />
           {canCreate && <Tab label="Meine Anfragen" />}
           {canApprove && <Tab label="Alle Anfragen" />}
           {canViewOverview && <Tab label="Übersicht" />}
+          <Tab label="Katalog" />
         </Tabs>
       </Box>
 
-      {activeTab === tabIndex.katalog && <KatalogTab />}
       {canCreate && activeTab === tabIndex.meine && <MeineAnfragenTab />}
       {canApprove && activeTab === tabIndex.alle && <AlleAnfragenTab />}
       {canViewOverview && activeTab === tabIndex.uebersicht && <UebersichtTab />}
+      {activeTab === tabIndex.katalog && <KatalogTab />}
     </DashboardLayout>
   );
 }

frontend/src/types/bestellung.types.ts

@@ -75,6 +75,7 @@ export interface BestellungFormData {
   status?: BestellungStatus;
   budget?: number;
   notizen?: string;
+  positionen?: BestellpositionFormData[];
 }
 
 // ── Line Items ──