u

src/components/manifest/OrderDocumentsTiles.jsx

@@ -12,7 +12,7 @@ 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 { formatDate, formatDateTime } from './manifestConfig';
 import { formatPrice } from '../../utils/price';
 import { typeLabel, typeIcon } from './OrderPaymentList';
 import ShipmentDetailDialog from './ShipmentDetailDialog';
@@ -91,6 +91,7 @@ export class OrderDocumentsTiles extends PureComponent {
               const carrier = sh.shippings?.[0]?.carrier;
               const tracking = sh.shippings?.[0]?.trackingCode;
               const posCount = sh.lineCount ?? sh.lines?.length ?? 0;
+              const shDate = sh.date || sh.createdAt || sh.created_at;
 
               return (
                 <Card
@@ -114,7 +115,7 @@ export class OrderDocumentsTiles extends PureComponent {
                     </Typography>
                     <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
                       <Typography variant="caption" color="text.secondary">
-                        {sh.date ? formatDate(sh.date) : '–'}
+                        {shDate ? formatDateTime(shDate) : '–'}
                       </Typography>
                       {navigate && (
                         <IconButton
@@ -231,6 +232,7 @@ export class OrderDocumentsTiles extends PureComponent {
           <Stack spacing={1}>
             {payments.map((pay) => {
               const pType = pay.type || pay.paymentType || pay.payment_type;
+              const payDate = pay.date || pay.createdAt || pay.created_at || pay.timestamp;
               return (
                 <Card
                   key={pay.id}
@@ -257,20 +259,26 @@ export class OrderDocumentsTiles extends PureComponent {
                       </Typography>
                     </Stack>
 
-                    <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flexShrink: 0, ml: 1 }}>
-                      {pay.date ? (
-                        <Typography variant="caption" color="text.secondary">
-                          {formatDate(pay.date)}
-                        </Typography>
-                      ) : null}
-                      <Typography
-                        variant="subtitle2"
-                        sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums' }}
-                      >
-                        +{formatPrice(pay.amount)}
-                      </Typography>
-                    </Stack>
+                    <Typography
+                      variant="subtitle2"
+                      sx={{ fontWeight: 700, color: 'success.dark', fontVariantNumeric: 'tabular-nums', flexShrink: 0, ml: 1 }}
+                    >
+                      +{formatPrice(pay.amount)}
+                    </Typography>
                   </Box>
+
+                  {payDate ? (
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5 }}>
+                      {pay.id != null ? (
+                        <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+                          #{pay.id}
+                        </Typography>
+                      ) : <span />}
+                      <Typography variant="caption" color="text.secondary">
+                        {formatDateTime(payDate)}
+                      </Typography>
+                    </Box>
+                  ) : null}
                 </Card>
               );
             })}