u

src/components/manifest/OrderDocumentsTiles.jsx

@@ -11,10 +11,19 @@ import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined
 import PaymentsOutlinedIcon from '@mui/icons-material/PaymentsOutlined';
 import AddIcon from '@mui/icons-material/Add';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
+import { enqueueSnackbar } from 'notistack';
 import { PanelTile } from 'dashgui/panels';
-import { formatDate, formatDateTime } from './manifestConfig';
+import AppDialog from '../AppDialog';
+import { payment as paymentApi } from '../../api';
+import { notifyError } from '../../utils/notify';
+import { formatDate, formatDateTime, todayInputValue } from './manifestConfig';
 import { formatPrice } from '../../utils/price';
-import { typeLabel, typeIcon } from './OrderPaymentList';
+import { typeLabel, typeIcon, PAYMENT_TYPES } from './OrderPaymentList';
 import ShipmentDetailDialog from './ShipmentDetailDialog';
 import {
   GREEN_PANEL,
@@ -23,19 +32,81 @@ import {
 } from '../../colors';
 
 /**
- * Renders 1-wide associated document tiles for an order in edit mode:
+ * Renders 1-wide associated document tiles for an order or retoure in edit mode:
  * 1. Lieferscheine / Auslieferungen (Shipments)
- * 2. Zahlungen (Payments)
+ * 2. Zahlungen / Erstattungen (Payments)
  */
 export class OrderDocumentsTiles extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
       selectedShipment: null,
+      paymentDialogOpen: false,
+      paymentAmount: '',
+      paymentType: 'cash',
+      paymentDate: todayInputValue(),
+      paymentSaving: false,
     };
     this.handleOpenShipment = this.handleOpenShipment.bind(this);
     this.handleCloseShipment = this.handleCloseShipment.bind(this);
     this.handleOpenPayments = this.handleOpenPayments.bind(this);
+    this.handleOpenPaymentDialog = this.handleOpenPaymentDialog.bind(this);
+    this.handleClosePaymentDialog = this.handleClosePaymentDialog.bind(this);
+    this.handleSubmitPayment = this.handleSubmitPayment.bind(this);
+  }
+
+  handleOpenPaymentDialog() {
+    const { orderTotal, paidTotal, kind } = this.props;
+    const tot = Number(orderTotal) || 0;
+    const pd = Number(paidTotal) || 0;
+    const absTot = Math.abs(tot);
+    const absPd = Math.abs(pd);
+    const isPaid = Boolean(this.props.paid || (absTot > 0 && absPd >= absTot - 0.005));
+    const remaining = isPaid ? 0 : Math.max(0, absTot - absPd);
+    const defaultAmount = remaining > 0
+      ? (kind === 'retoure' || tot < 0 ? -remaining : remaining)
+      : '';
+    this.setState({
+      paymentDialogOpen: true,
+      paymentAmount: defaultAmount !== '' ? String(Math.round(defaultAmount * 100) / 100) : '',
+      paymentType: 'cash',
+      paymentDate: todayInputValue(),
+    });
+  }
+
+  handleClosePaymentDialog() {
+    this.setState({ paymentDialogOpen: false, paymentSaving: false });
+  }
+
+  async handleSubmitPayment(e) {
+    e?.preventDefault?.();
+    const { orderId, onShipmentChanged } = this.props;
+    const { paymentAmount, paymentType, paymentDate, paymentSaving } = this.state;
+    if (paymentSaving || !orderId) return;
+
+    const amt = Number(String(paymentAmount).replace(',', '.'));
+    if (Number.isNaN(amt) || amt === 0) {
+      enqueueSnackbar('Bitte einen gültigen Betrag ungleich 0 eingeben.', { variant: 'warning' });
+      return;
+    }
+
+    this.setState({ paymentSaving: true });
+    try {
+      await paymentApi.create({
+        manifestId: orderId,
+        amount: amt,
+        type: paymentType,
+        date: paymentDate || undefined,
+      });
+      enqueueSnackbar(amt < 0 ? 'Erstattung erfolgreich gebucht!' : 'Zahlung erfolgreich erfasst!', {
+        variant: 'success',
+      });
+      this.handleClosePaymentDialog();
+      onShipmentChanged?.();
+    } catch (err) {
+      notifyError(err);
+      this.setState({ paymentSaving: false });
+    }
   }
 
   handleOpenShipment(sh) {
@@ -163,31 +234,53 @@ export class OrderDocumentsTiles extends PureComponent {
   }
 
   renderPaymentsTile() {
-    const { payments = [], paid, paidTotal, orderTotal } = this.props;
+    const { payments = [], paid, paidTotal, orderTotal, kind } = this.props;
+    const isRetoure = kind === 'retoure';
 
     const tot = Number(orderTotal) || 0;
     const pd = Number(paidTotal) || 0;
-    const openAmount = Math.max(0, tot - pd);
+    const absTot = Math.abs(tot);
+    const absPd = Math.abs(pd);
+    const isPaid = Boolean(paid || (absTot > 0 && absPd >= absTot - 0.005));
 
-    const isPaid = Boolean(paid || tot <= 0 || (tot > 0 && pd >= tot));
-    const statusLabel = isPaid ? 'Bezahlt' : pd > 0 ? 'Teilzahlung' : 'Offen';
-    const statusColor = isPaid ? 'success' : pd > 0 ? 'warning' : 'error';
+    let openAmount = 0;
+    if (!isPaid) {
+      const remaining = Math.max(0, absTot - absPd);
+      openAmount = tot < 0 ? -remaining : remaining;
+    }
+
+    const statusLabel = isPaid
+      ? (isRetoure ? 'Erstattet' : 'Bezahlt')
+      : Math.abs(pd) > 0
+      ? 'Teilzahlung'
+      : 'Offen';
+    const statusColor = isPaid ? 'success' : Math.abs(pd) > 0 ? 'warning' : 'error';
 
     return (
-      <PanelTile wide={1} minHeight={220} color={YELLOW_PANEL} title="Zahlungen">
+      <PanelTile wide={1} minHeight={220} color={YELLOW_PANEL} title={isRetoure ? 'Erstattungen / Zahlungen' : 'Zahlungen'}>
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
           <Stack direction="row" spacing={0.75} sx={{ alignItems: 'center' }}>
             <PaymentsOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
             <Chip size="small" label={statusLabel} color={statusColor} sx={{ fontWeight: 600, height: 22 }} />
           </Stack>
-          <Button
-            size="small"
-            variant="outlined"
-            onClick={this.handleOpenPayments}
-            sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
-          >
-            Zahlungen
-          </Button>
+          <Box sx={{ display: 'flex', gap: 0.5 }}>
+            <Button
+              size="small"
+              variant="contained"
+              onClick={this.handleOpenPaymentDialog}
+              sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
+            >
+              {isRetoure ? '+ Erstattung' : '+ Zahlung'}
+            </Button>
+            <Button
+              size="small"
+              variant="outlined"
+              onClick={this.handleOpenPayments}
+              sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
+            >
+              Journal
+            </Button>
+          </Box>
         </Box>
 
         {/* Financial KPI Card */}
@@ -203,7 +296,7 @@ export class OrderDocumentsTiles extends PureComponent {
         >
           <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
             <Typography variant="caption" color="text.secondary">
-              Summe:
+              {isRetoure ? 'Gutschrift / Summe:' : 'Summe:'}
             </Typography>
             <Typography variant="caption" sx={{ fontWeight: 700 }}>
               {formatPrice(tot)}
@@ -211,7 +304,7 @@ export class OrderDocumentsTiles extends PureComponent {
           </Box>
           <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.25 }}>
             <Typography variant="caption" color="text.secondary">
-              Bezahlt:
+              {isRetoure ? 'Erstattet:' : 'Bezahlt:'}
             </Typography>
             <Typography variant="caption" sx={{ fontWeight: 700, color: 'success.main' }}>
               {formatPrice(pd)}
@@ -222,7 +315,7 @@ export class OrderDocumentsTiles extends PureComponent {
             <Typography variant="caption" color="text.secondary">
               Offen:
             </Typography>
-            <Typography variant="caption" sx={{ fontWeight: 700, color: openAmount > 0 ? 'error.main' : 'text.secondary' }}>
+            <Typography variant="caption" sx={{ fontWeight: 700, color: openAmount !== 0 ? 'error.main' : 'text.secondary' }}>
               {formatPrice(openAmount)}
             </Typography>
           </Box>
@@ -233,6 +326,8 @@ export class OrderDocumentsTiles extends PureComponent {
             {payments.map((pay) => {
               const pType = pay.type || pay.paymentType || pay.payment_type;
               const payDate = pay.date || pay.createdAt || pay.created_at || pay.timestamp;
+              const pAmt = Number(pay.amount) || 0;
+              const isRefund = pAmt < 0;
               return (
                 <Card
                   key={pay.id}
@@ -261,9 +356,15 @@ export class OrderDocumentsTiles extends PureComponent {
 
                     <Typography
                       variant="subtitle2"
-                      sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums', flexShrink: 0, ml: 1 }}
+                      sx={{
+                        fontWeight: 700,
+                        color: isRefund ? 'error.main' : 'success.dark',
+                        fontVariantNumeric: 'tabular-nums',
+                        flexShrink: 0,
+                        ml: 1,
+                      }}
                     >
-                      +{formatPrice(pay.amount)}
+                      {isRefund ? formatPrice(pAmt) : `+${formatPrice(pAmt)}`}
                     </Typography>
                   </Box>
 
@@ -289,6 +390,9 @@ export class OrderDocumentsTiles extends PureComponent {
   }
 
   render() {
+    const { kind } = this.props;
+    const isRetoure = kind === 'retoure';
+
     return (
       <>
         {this.renderShipmentsTile()}
@@ -300,6 +404,56 @@ export class OrderDocumentsTiles extends PureComponent {
           onNavigate={this.props.navigate}
           onChanged={this.props.onShipmentChanged}
         />
+        <AppDialog
+          open={this.state.paymentDialogOpen}
+          onClose={this.handleClosePaymentDialog}
+          title={isRetoure ? 'Erstattung buchen' : 'Zahlung erfassen'}
+        >
+          <Box component="form" onSubmit={this.handleSubmitPayment} sx={{ p: 2, display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <TextField
+              label="Betrag (€)"
+              type="text"
+              autoFocus
+              value={this.state.paymentAmount}
+              onChange={(e) => this.setState({ paymentAmount: e.target.value })}
+              helperText={isRetoure ? 'Negative Beträge für Gutschrift/Erstattung (z.B. -50.00)' : 'Zahlungsbetrag'}
+              fullWidth
+              required
+            />
+            <TextField
+              select
+              label="Zahlungsart"
+              value={this.state.paymentType}
+              onChange={(e) => this.setState({ paymentType: e.target.value })}
+              fullWidth
+            >
+              {PAYMENT_TYPES.map((t) => (
+                <MenuItem key={t.value} value={t.value}>
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {typeIcon(t.value, { fontSize: 18 })}
+                    <span>{t.label}</span>
+                  </Box>
+                </MenuItem>
+              ))}
+            </TextField>
+            <TextField
+              label="Datum"
+              type="date"
+              value={this.state.paymentDate}
+              onChange={(e) => this.setState({ paymentDate: e.target.value })}
+              slotProps={{ inputLabel: { shrink: true } }}
+              fullWidth
+            />
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
+              <Button onClick={this.handleClosePaymentDialog} disabled={this.state.paymentSaving}>
+                Abbrechen
+              </Button>
+              <Button type="submit" variant="contained" disabled={this.state.paymentSaving}>
+                {this.state.paymentSaving ? 'Bucht…' : 'Buchen'}
+              </Button>
+            </Box>
+          </Box>
+        </AppDialog>
       </>
     );
   }