u

src/components/manifest/OrderDocumentsTiles.jsx

@@ -6,13 +6,16 @@ import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 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 { PanelTile } from 'dashgui/panels';
 import { formatDate } from './manifestConfig';
 import { formatPrice } from '../../utils/price';
 import { typeLabel, typeIcon } from './OrderPaymentList';
+import ShipmentDetailDialog from './ShipmentDetailDialog';
 import {
   GREEN_PANEL,
   YELLOW_PANEL,
@@ -25,20 +28,32 @@ import {
  * 2. Zahlungen (Payments)
  */
 export class OrderDocumentsTiles extends PureComponent {
-  handleOpenShipment = () => {
-    if (this.props.navigate) {
-      this.props.navigate('/auftrag/ausliefern');
-    }
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedShipment: null,
+    };
+    this.handleOpenShipment = this.handleOpenShipment.bind(this);
+    this.handleCloseShipment = this.handleCloseShipment.bind(this);
+    this.handleOpenPayments = this.handleOpenPayments.bind(this);
+  }
 
-  handleOpenPayments = () => {
+  handleOpenShipment(sh) {
+    this.setState({ selectedShipment: sh });
+  }
+
+  handleCloseShipment() {
+    this.setState({ selectedShipment: null });
+  }
+
+  handleOpenPayments() {
     if (this.props.navigate) {
       this.props.navigate('/auftrag/zahlungen');
     }
-  };
+  }
 
   renderShipmentsTile() {
-    const { shipments = [], shipped, delivered, navigate } = this.props;
+    const { shipments = [], shipped, delivered, navigate, deliverDisabled } = this.props;
 
     const statusLabel = delivered
       ? 'Geliefert'
@@ -53,7 +68,7 @@ export class OrderDocumentsTiles extends PureComponent {
     return (
       <PanelTile wide={1} minHeight={220} color={GREEN_PANEL} title="Lieferscheine">
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-          <Stack direction="row" spacing={0.75} alignItems="center">
+          <Stack direction="row" spacing={0.75} sx={{ alignItems: 'center' }}>
             <LocalShippingOutlinedIcon sx={{ fontSize: 20, color: 'text.secondary' }} />
             <Chip size="small" label={statusLabel} color={statusColor} sx={{ fontWeight: 600, height: 22 }} />
           </Stack>
@@ -61,7 +76,9 @@ export class OrderDocumentsTiles extends PureComponent {
             size="small"
             variant="outlined"
             startIcon={<AddIcon />}
-            onClick={() => navigate?.('/auftrag/ausliefern')}
+            disabled={deliverDisabled}
+            onClick={this.props.onOpenCreateShipment || (() => navigate?.('/auftrag/ausliefern'))}
+            title={deliverDisabled ? 'Alle Positionen bereits ausgeliefert' : 'Lieferschein erstellen'}
             sx={{ fontWeight: 600, textTransform: 'none', height: 26, fontSize: '0.75rem', px: 1 }}
           >
             Liefern
@@ -79,7 +96,7 @@ export class OrderDocumentsTiles extends PureComponent {
                 <Card
                   key={sh.id ?? sh.number}
                   variant="outlined"
-                  onClick={this.handleOpenShipment}
+                  onClick={() => this.handleOpenShipment(sh)}
                   sx={{
                     p: 1.25,
                     bgcolor: WHITE,
@@ -95,9 +112,24 @@ export class OrderDocumentsTiles extends PureComponent {
                     <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.85rem' }}>
                       {sh.number}
                     </Typography>
-                    <Typography variant="caption" color="text.secondary">
-                      {sh.date ? formatDate(sh.date) : '–'}
-                    </Typography>
+                    <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
+                      <Typography variant="caption" color="text.secondary">
+                        {sh.date ? formatDate(sh.date) : '–'}
+                      </Typography>
+                      {navigate && (
+                        <IconButton
+                          size="small"
+                          title="In Auslieferungen öffnen"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            navigate(`/auftrag/ausliefern?shipmentId=${sh.id}`);
+                          }}
+                          sx={{ p: 0.25, ml: 0.5, color: 'text.secondary', '&:hover': { color: 'primary.main' } }}
+                        >
+                          <OpenInNewIcon sx={{ fontSize: 13 }} />
+                        </IconButton>
+                      )}
+                    </Stack>
                   </Box>
 
                   {sh.externalNumber ? (
@@ -142,7 +174,7 @@ export class OrderDocumentsTiles extends PureComponent {
               size="small"
               variant="contained"
               startIcon={<LocalShippingOutlinedIcon />}
-              onClick={() => navigate?.('/auftrag/ausliefern')}
+              onClick={this.props.onOpenCreateShipment || (() => navigate?.('/auftrag/ausliefern'))}
               sx={{ textTransform: 'none', fontWeight: 600, fontSize: '0.75rem' }}
             >
               Lieferschein anlegen
@@ -166,7 +198,7 @@ export class OrderDocumentsTiles extends PureComponent {
     return (
       <PanelTile wide={1} minHeight={220} color={YELLOW_PANEL} title="Zahlungen">
         <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 1.5 }}>
-          <Stack direction="row" spacing={0.75} alignItems="center">
+          <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>
@@ -239,7 +271,7 @@ export class OrderDocumentsTiles extends PureComponent {
                   }}
                 >
                   <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    <Stack direction="row" spacing={0.75} alignItems="center" sx={{ minWidth: 0, overflow: 'hidden' }}>
+                    <Stack direction="row" spacing={0.75} sx={{ alignItems: 'center', minWidth: 0, overflow: 'hidden' }}>
                       <Box sx={{ display: 'flex', alignItems: 'center', color: 'text.secondary', flexShrink: 0 }}>
                         {typeIcon(pType, { fontSize: 16 })}
                       </Box>
@@ -248,7 +280,7 @@ export class OrderDocumentsTiles extends PureComponent {
                       </Typography>
                     </Stack>
 
-                    <Stack direction="row" spacing={1} alignItems="center" sx={{ flexShrink: 0, ml: 1 }}>
+                    <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flexShrink: 0, ml: 1 }}>
                       {pay.date ? (
                         <Typography variant="caption" color="text.secondary">
                           {formatDate(pay.date)}
@@ -291,6 +323,13 @@ export class OrderDocumentsTiles extends PureComponent {
       <>
         {this.renderShipmentsTile()}
         {this.renderPaymentsTile()}
+        <ShipmentDetailDialog
+          open={Boolean(this.state.selectedShipment)}
+          shipment={this.state.selectedShipment}
+          onClose={this.handleCloseShipment}
+          onNavigate={this.props.navigate}
+          onChanged={this.props.onShipmentChanged}
+        />
       </>
     );
   }