new features

frontend/src/pages/Bestellungen.tsx

@@ -109,6 +109,11 @@ export default function Bestellungen() {
     queryFn: bestellungApi.getVendors,
   });
 
+  const { data: orderUsers = [] } = useQuery({
+    queryKey: ['bestellungen', 'order-users'],
+    queryFn: bestellungApi.getOrderUsers,
+  });
+
   // ── Mutations ──
   const createOrder = useMutation({
     mutationFn: (data: BestellungFormData) => bestellungApi.createOrder(data),
@@ -194,7 +199,7 @@ export default function Bestellungen() {
       <Typography variant="h4" sx={{ mb: 3 }}>Bestellungen</Typography>
 
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs value={tab} onChange={(_e, v) => { setTab(v); navigate(`/bestellungen?tab=${v}`, { replace: true }); }}>
+        <Tabs value={tab} onChange={(_e, v) => { setTab(v); navigate(`/bestellungen?tab=${v}`, { replace: true }); }} variant="scrollable" scrollButtons="auto">
           <Tab label="Bestellungen" />
           <Tab label="Lieferanten" />
         </Tabs>
@@ -366,10 +371,12 @@ export default function Bestellungen() {
               </Box>
             </Paper>
           )}
-          <TextField
-            label="Besteller"
-            value={orderForm.besteller_id || ''}
-            onChange={(e) => setOrderForm((f) => ({ ...f, besteller_id: e.target.value }))}
+          <Autocomplete
+            options={orderUsers}
+            getOptionLabel={(o) => o.name}
+            value={orderUsers.find((u) => u.id === orderForm.besteller_id) || null}
+            onChange={(_e, v) => setOrderForm((f) => ({ ...f, besteller_id: v?.id || '' }))}
+            renderInput={(params) => <TextField {...params} label="Besteller" />}
           />
           <TextField
             label="Budget"