u

src/components/manifest/OrderDocumentsTiles.jsx

@@ -13,6 +13,7 @@ import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutli
 import { PanelTile } from 'dashgui/panels';
 import { formatDate } from './manifestConfig';
 import { formatPrice } from '../../utils/price';
+import { typeLabel, typeIcon } from './OrderPaymentList';
 import {
   GREEN_PANEL,
   YELLOW_PANEL,
@@ -220,29 +221,55 @@ export class OrderDocumentsTiles extends PureComponent {
 
         {payments.length > 0 ? (
           <Stack spacing={1}>
-            {payments.map((pay) => (
-              <Card
-                key={pay.id}
-                variant="outlined"
-                sx={{
-                  p: 1,
-                  bgcolor: WHITE,
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                }}
-              >
-                <Stack direction="row" spacing={0.75} alignItems="center">
-                  <CheckCircleOutlineOutlinedIcon sx={{ fontSize: 16, color: 'success.main' }} />
-                  <Typography variant="caption" sx={{ fontWeight: 600 }}>
-                    #{pay.id}
-                  </Typography>
-                </Stack>
-                <Typography variant="caption" sx={{ fontWeight: 700, color: 'success.dark' }}>
-                  +{formatPrice(pay.amount)}
-                </Typography>
-              </Card>
-            ))}
+            {payments.map((pay) => {
+              const pType = pay.type || pay.paymentType || pay.payment_type;
+              return (
+                <Card
+                  key={pay.id}
+                  variant="outlined"
+                  onClick={this.handleOpenPayments}
+                  sx={{
+                    p: 1.25,
+                    bgcolor: WHITE,
+                    cursor: 'pointer',
+                    transition: 'all 0.15s ease',
+                    '&:hover': {
+                      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                      borderColor: 'primary.main',
+                    },
+                  }}
+                >
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.25 }}>
+                    <Stack direction="row" spacing={0.75} alignItems="center">
+                      <CheckCircleOutlineOutlinedIcon sx={{ fontSize: 16, color: 'success.main' }} />
+                      <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.85rem' }}>
+                        #{pay.id}
+                      </Typography>
+                    </Stack>
+                    <Typography
+                      variant="subtitle2"
+                      sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums' }}
+                    >
+                      +{formatPrice(pay.amount)}
+                    </Typography>
+                  </Box>
+
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <Stack direction="row" spacing={0.5} alignItems="center">
+                      {typeIcon(pType, { fontSize: 15, color: 'text.secondary' })}
+                      <Typography variant="caption" color="text.secondary" sx={{ fontWeight: 600 }}>
+                        {typeLabel(pType)}
+                      </Typography>
+                    </Stack>
+                    {pay.date ? (
+                      <Typography variant="caption" color="text.secondary">
+                        {formatDate(pay.date)}
+                      </Typography>
+                    ) : null}
+                  </Box>
+                </Card>
+              );
+            })}
           </Stack>
         ) : (
           <Box

src/components/manifest/OrderPaymentList.jsx

@@ -44,7 +44,7 @@ import {
 
 const cfg = manifestConfig('order');
 
-const PAYMENT_TYPES = [
+export const PAYMENT_TYPES = [
   { value: 'transfer', label: 'Banküberweisung', icon: AccountBalanceIcon },
   { value: 'cash', label: 'Barzahlung', icon: PointOfSaleIcon },
   { value: 'card', label: 'EC- / Kreditkarte', icon: CreditCardIcon },
@@ -54,15 +54,15 @@ const PAYMENT_TYPES = [
   { value: 'other', label: 'Sonstige', icon: PaymentsIcon },
 ];
 
-function typeLabel(val) {
+export function typeLabel(val) {
   const match = PAYMENT_TYPES.find((t) => t.value === val);
   return match?.label || val || 'Zahlung';
 }
 
-function typeIcon(val) {
+export function typeIcon(val, sx = { fontSize: 18 }) {
   const match = PAYMENT_TYPES.find((t) => t.value === val);
   const IconComp = match?.icon || PaymentsIcon;
-  return <IconComp sx={{ fontSize: 18 }} />;
+  return <IconComp sx={sx} />;
 }
 
 const rowSx = {