UI strings, add order icon

src/compose.yml

@@ -28,7 +28,7 @@ services:
       - ./frontend/vite.config.ts:/app/vite.config.ts
       - ./frontend/tsconfig.json:/app/tsconfig.json
       - ./frontend/tsconfig.node.json:/app/tsconfig.node.json
-      - /app/node_modules
+      - /app/node_modules # Reset node_modules by running with '--renew-anon-volumes'
     command: npm run dev -- --host 0.0.0.0 --port 8000
 
   mailpit:

src/frontend/package-lock.json

@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "dependencies": {
         "@ant-design/icons": "^6.1.0",
+        "@mdi/js": "^7.4.47",
+        "@mdi/react": "^1.6.1",
         "antd": "^5.27.3",
         "dompurify": "^3.3.3",
         "marked": "^16.0.0",
@@ -930,6 +932,21 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mdi/js": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
+      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@mdi/react": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
+      "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "node_modules/@rc-component/async-validator": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.1.0.tgz",

src/frontend/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^6.1.0",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "antd": "^5.27.3",
     "dompurify": "^3.3.3",
     "marked": "^16.0.0",

src/frontend/src/components/views/HomeOrdersTable.tsx

@@ -6,6 +6,8 @@ import {
   formatEstimatedTotal,
   stripPriceDecorations,
 } from "../../lib/orderFormatting";
+import Icon from "@mdi/react";
+import { mdiFood } from "@mdi/js";
 
 const { Text } = Typography;
 
@@ -40,6 +42,12 @@ function getEstimatedTotalText(rawValue: unknown): string | null {
   return null;
 }
 
+function getOrderIconStyle(isClosed: boolean) {
+  return {
+    opacity: isClosed ? 0.25 : 0.6,
+  };
+}
+
 export default function HomeOrdersTable({
   orders,
   selectedState,
@@ -81,31 +89,40 @@ export default function HomeOrdersTable({
               item.submission?.estimated_total,
             );
 
+            const isClosed = !!item.closed;
+            const closedStr = isClosed ? " Closed" : "Open";
+
+            const dateStr =
+              item.created_at
+                ? new Date(item.created_at).toLocaleString()
+                : "Unknown creation time";
+
             return (
-              <Space direction="vertical" size={0}>
-                <Space size={8} align="center">
-                  <Text strong>{item.title || item.id}</Text>
-                  {item.is_owner ? <Tag color="geekblue">Owner</Tag> : null}
-                  {state === "paid" ? <Tag color="green">Paid</Tag> : null}
-                  {state === "unpaid" ? (
-                    <Tag color="volcano">Unpaid</Tag>
-                  ) : null}
-                  {state === "pending" ? <Tag color="blue">Pending</Tag> : null}
+              <Space size={16}>
+                <Icon path={mdiFood} size={1} style={getOrderIconStyle(isClosed)} />
+                <Space direction="vertical" size={0}>
+                  <Space size={8} align="center">
+                    <Text strong>{item.title || item.id}</Text>
+                    {item.is_owner ? <Tag color="geekblue">Owner</Tag> : null}
+                    {state === "paid" ? <Tag color="green">Paid</Tag> : null}
+                    {state === "unpaid" ? (
+                      <Tag color="volcano">Unpaid</Tag>
+                    ) : null}
+                    {state === "pending" ? <Tag color="blue">Pending</Tag> : null}
+                  </Space>
+                  <Text type="secondary">
+                    {<Tooltip title={`Order is ${closedStr.toLocaleLowerCase()}`}>{closedStr}</Tooltip>}{" • "}
+                    {<Tooltip title={`Created at: ${dateStr}`}>{dateStr}</Tooltip>}
+                    {item.is_participant && formatted && (
+                      <>
+                        {" • "}
+                        <Tooltip title="Your order">
+                          {formatted}
+                        </Tooltip>
+                      </>
+                    )}
+                  </Text>
                 </Space>
-                <Text type="secondary">
-                  {item.created_at
-                    ? new Date(item.created_at).toLocaleString()
-                    : "Unknown creation time"}
-                  {item.is_participant && formatted && ` • ${formatted}`}
-                  {item.is_participant && estimateText && (
-                    <>
-                      {" • "}
-                      <Tooltip title="Rough estimate based on menu prices. Final amount may differ.">
-                        {estimateText}
-                      </Tooltip>
-                    </>
-                  )}
-                </Text>
               </Space>
             );
           },
@@ -124,7 +141,7 @@ export default function HomeOrdersTable({
                   navigateTo(`/order/${item.id}/admin`);
                 }}
               >
-                Edit
+                Manage
               </Button>
             ) : null,
         },

src/frontend/src/views/ParticipantView.tsx

@@ -428,7 +428,7 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
                     navigateTo(`/order/${orderId}/admin`);
                   }}
                 >
-                  Edit order
+                  Manage order
                 </Link>
               </Text>
             }
@@ -454,7 +454,7 @@ export default function ParticipantView({ orderId }: { orderId: string }) {
                   type="primary"
                   onClick={() => setIsEditingSubmittedOrder(true)}
                 >
-                  Edit Order
+                  Manage order
                 </Button>
               ) : (
                 <Button