Order management UI

src/frontend/src/components/views/ParticipantSubmissionSummary.tsx

@@ -54,7 +54,7 @@ export default function ParticipantSubmissionSummary({
   const statuses = [
     { label: "Accepted", done: submission.accepted, hint: "Your order has been accepted", pending: "Waiting for your order to be accepted" },
     { label: "Paid", done: submission.paid, hint: "Your payment has been received", pending: "Payment not received yet" },
-    { label: "Received", done: !!submission.handed_out, hint: "You have received your order", pending: "Order not marked as received yet" },
+    { label: "Handed out", done: !!submission.handed_out, hint: "Your order has been handed out to you", pending: "Order not handed out yet" },
   ];
 
   return (
@@ -63,19 +63,26 @@ export default function ParticipantSubmissionSummary({
         <Text strong>
           <CheckCircleFilled style={{ color: token.colorSuccess }} /> Order submitted
         </Text>
-        <Flex gap={4} wrap="wrap">
-          {statuses.map(({ label, done, hint, pending }) => (
-            <Tooltip key={label} title={done ? hint : pending}>
-              <Tag
-                bordered={false}
-                color={done ? "success" : "default"}
-                icon={done ? <CheckOutlined /> : <ClockCircleOutlined />}
-                style={{ marginInlineEnd: 0 }}
-              >
-                {label}
-              </Tag>
-            </Tooltip>
-          ))}
+        <Flex vertical gap={8} align="flex-end">
+          <Flex gap={4} wrap="wrap" justify="flex-end">
+            {statuses.map(({ label, done, hint, pending }) => (
+              <Tooltip key={label} title={done ? hint : pending}>
+                <Tag
+                  bordered={false}
+                  color={done ? "success" : "default"}
+                  icon={done ? <CheckOutlined /> : <ClockCircleOutlined />}
+                  style={{ marginInlineEnd: 0 }}
+                >
+                  {label}
+                </Tag>
+              </Tooltip>
+            ))}
+          </Flex>
+          {onEdit && !isClosed && (
+            <Button type="primary" icon={<EditOutlined />} onClick={onEdit}>
+              Edit order
+            </Button>
+          )}
         </Flex>
       </Flex>
       <Tooltip title="Your submitted order">
@@ -103,11 +110,6 @@ export default function ParticipantSubmissionSummary({
           Updated {formatTimestamp(submission.updated_at)}
         </Text>
       </Space>
-      {onEdit && !isClosed && (
-        <Button type="primary" icon={<EditOutlined />} onClick={onEdit} style={{ alignSelf: "flex-start" }}>
-          Edit order
-        </Button>
-      )}
     </Flex>
   );
 }