🍽️ Table ordering system: QR codes, /order page, admin orders panel, midnight cleanup

data/menu.json

@@ -1,4 +1,6 @@
 {
+  "tables": 8,
+  "orders": [],
   "items": [
     {
       "id": "a1b2c3d4-0001",
@@ -189,4 +191,4 @@
     ],
     "email": "hello@theroastedbean.com"
   }
-}
+}

package-lock.json

@@ -11,6 +11,7 @@
         "bcryptjs": "^2.4.3",
         "express": "^4.18.2",
         "express-session": "^1.17.3",
+        "qrcode": "^1.5.4",
         "uuid": "^9.0.0"
       }
     },
@@ -27,6 +28,30 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -101,6 +126,44 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -146,6 +209,15 @@
         "ms": "2.0.0"
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -165,6 +237,12 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -185,6 +263,12 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
       "license": "MIT"
     },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
     "node_modules/encodeurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
@@ -326,6 +410,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -353,6 +450,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -473,6 +579,27 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -590,6 +717,42 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -599,12 +762,30 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
       "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==",
       "license": "MIT"
     },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -618,6 +799,23 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.15.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
@@ -667,6 +865,21 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -738,6 +951,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -825,6 +1044,32 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
@@ -899,6 +1144,67 @@
       "engines": {
         "node": ">= 0.8"
       }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
     }
   }
 }

package.json

@@ -8,9 +8,10 @@
     "dev": "node server.js"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
     "express": "^4.18.2",
     "express-session": "^1.17.3",
-    "bcryptjs": "^2.4.3",
+    "qrcode": "^1.5.4",
     "uuid": "^9.0.0"
   }
 }

public/admin.html

@@ -37,6 +37,7 @@
           <button class="tb-nav-item active" data-section="menu">Menu</button>
           <button class="tb-nav-item" data-section="categories">Categories</button>
           <button class="tb-nav-item" data-section="info">Cafe Info</button>
+          <button class="tb-nav-item" data-section="tables">Tables & Orders</button>
           <button class="tb-nav-item" data-section="settings">Settings</button>
         </nav>
         <div class="topbar-actions">
@@ -126,6 +127,36 @@
         </form>
       </section>
 
+      <!-- Tables & Orders Section -->
+      <section id="tablesSection" class="panel" style="display: none;">
+        <!-- Table count -->
+        <div class="panel-head">
+          <h2>Tables & QR Codes</h2>
+        </div>
+        <div class="form-block" style="margin-bottom: 28px;">
+          <div class="field" style="max-width: 200px;">
+            <label for="tableCount">Number of tables</label>
+            <input type="number" id="tableCount" min="0" max="100" placeholder="8">
+          </div>
+          <button type="button" id="saveTablesBtn" class="btn">Save</button>
+          <button type="button" id="loadQrBtn" class="btn btn-ghost" style="margin-left:8px;">Generate QR codes</button>
+        </div>
+
+        <!-- QR Code Grid -->
+        <div class="qr-grid" id="qrGrid">
+          <p style="color:var(--parchment);font-size:0.82rem;padding:32px;">Set the number of tables above, then click "Generate QR codes" to generate printable QR codes for each table.</p>
+        </div>
+
+        <!-- Orders -->
+        <div class="panel-head" style="margin-top: 44px;">
+          <h2>Active orders</h2>
+          <button id="refreshOrdersBtn" class="btn btn-ghost" style="font-size:0.75rem;">Refresh</button>
+        </div>
+        <div id="ordersContainer">
+          <p style="color:var(--parchment);font-size:0.82rem;">No orders yet.</p>
+        </div>
+      </section>
+
       <!-- Settings Section -->
       <section id="settingsSection" class="panel" style="display: none;">
         <div class="panel-head">

public/css/admin.css

@@ -650,6 +650,167 @@ body {
   border-top: 1px solid var(--rule);
 }
 
+/* ── QR Grid ──────────────────────────────────────────────────────────── */
+.qr-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  background: var(--white);
+  border: 1px solid var(--rule);
+  padding: 28px;
+}
+
+.qr-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid var(--rule-light);
+  background: var(--paper);
+}
+
+.qr-card img {
+  display: block;
+  border: 1px solid var(--rule-light);
+}
+
+.qr-label {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--roast);
+}
+
+.qr-url {
+  font-size: 0.6rem;
+  color: var(--parchment);
+  word-break: break-all;
+  max-width: 150px;
+  text-align: center;
+  line-height: 1.3;
+}
+
+/* ── Order Cards ─────────────────────────────────────────────────────── */
+.order-card {
+  background: var(--white);
+  border: 1px solid var(--rule);
+  margin-bottom: 12px;
+}
+
+.order-card.order-cancelled {
+  opacity: 0.5;
+  background: var(--paper);
+}
+
+.order-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--rule-light);
+}
+
+.order-tbl {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--roast);
+  margin-right: 12px;
+}
+
+.order-time {
+  font-size: 0.72rem;
+  color: var(--parchment);
+}
+
+.order-card-body {
+  padding: 16px 20px;
+}
+
+.order-items {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.order-items li {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.84rem;
+  color: var(--roast);
+  padding: 4px 0;
+}
+
+.order-items li span {
+  font-weight: 600;
+  color: var(--roast-med);
+}
+
+.order-item-custom {
+  font-style: italic;
+  color: var(--parchment) !important;
+}
+
+.order-note {
+  margin-top: 8px;
+  font-size: 0.78rem;
+  color: var(--parchment);
+  font-style: italic;
+  padding-top: 8px;
+  border-top: 1px solid var(--rule-light);
+}
+
+.order-total {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--rule);
+  font-weight: 700;
+  font-size: 0.88rem;
+  color: var(--green);
+  text-align: right;
+}
+
+.order-card-actions {
+  display: flex;
+  gap: 8px;
+  padding: 12px 20px;
+  border-top: 1px solid var(--rule-light);
+}
+
+.order-card-actions .btn {
+  font-size: 0.75rem;
+  padding: 8px 16px;
+}
+
+.order-card-actions .btn.serve {
+  background: var(--green);
+  color: var(--white);
+}
+
+.order-card-actions .btn.serve:hover { background: var(--green-light); }
+
+.order-card-actions .btn.paid {
+  background: var(--roast);
+  color: var(--paper);
+}
+
+.order-card-actions .btn.cancel {
+  border-color: var(--cherry);
+  color: var(--cherry);
+}
+
+.order-card-actions .btn.cancel:hover {
+  background: var(--cherry-bg);
+  border-color: var(--cherry);
+}
+
+.badge-order-new { color: var(--green); }
+.badge-order-served { color: var(--roast-med); }
+.badge-order-paid { color: var(--parchment); }
+.badge-order-cancelled { color: var(--cherry); }
+
 /* ── Toast ─────────────────────────────────────────────────────────────── */
 .toast {
   position: fixed;

public/css/order.css

@@ -0,0 +1,579 @@
+/* ── Order Page — The Roasted Bean ───────────────────────────────────── */
+/* Mobile-first: scanned from table QR codes */
+
+:root {
+  --paper: #F4F2EC;
+  --roast: #1B1512;
+  --roast-med: #4A4038;
+  --parchment: #968878;
+  --green: #3C6E55;
+  --green-light: #4E8A6B;
+  --cherry: #C44D34;
+  --cherry-bg: rgba(196, 77, 52, 0.06);
+  --crema: #EAE5DD;
+  --white: #FFFFFF;
+  --rule: #D9D2C7;
+  --rule-light: #EBE7E0;
+  --font-display: 'Newsreader', Georgia, serif;
+  --font-body: 'Figtree', sans-serif;
+  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html {
+  background: var(--paper);
+  color: var(--roast);
+  font-family: var(--font-body);
+  font-size: 15px;
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  min-height: 100vh;
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+::selection { background: rgba(60, 110, 85, 0.12); }
+
+/* ── Header ─────────────────────────────────────────────────────────── */
+.ord-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(244, 242, 236, 0.94);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--rule);
+}
+
+.ord-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  height: 52px;
+  gap: 12px;
+}
+
+.ord-logo {
+  font-family: var(--font-display);
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--green);
+  text-decoration: none;
+  letter-spacing: -0.01em;
+}
+
+.ord-table {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.ord-table-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--parchment);
+}
+
+.ord-table-num {
+  font-family: var(--font-display);
+  font-size: 1.2rem;
+  font-weight: 700;
+  color: var(--roast);
+}
+
+.ord-cart-badge {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--roast);
+  color: var(--paper);
+  padding: 5px 12px;
+  border-radius: 20px;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.ord-cart-badge svg { color: var(--paper); }
+
+/* ── Main Layout ────────────────────────────────────────────────────── */
+.ord-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px 16px 100px;
+}
+
+/* ── Section Title ──────────────────────────────────────────────────── */
+.ord-section-title {
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--roast);
+  margin-bottom: 16px;
+  letter-spacing: -0.01em;
+}
+
+/* ── Filters ────────────────────────────────────────────────────────── */
+.ord-filter {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-bottom: 18px;
+}
+
+.ord-filter-btn {
+  padding: 6px 14px;
+  border: 1px solid var(--rule);
+  background: var(--white);
+  font-family: var(--font-body);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--roast-med);
+  cursor: pointer;
+  transition: all 0.15s var(--ease);
+}
+
+.ord-filter-btn:hover { border-color: var(--roast-med); color: var(--roast); }
+.ord-filter-btn.active {
+  background: var(--roast);
+  color: var(--paper);
+  border-color: var(--roast);
+}
+
+/* ── Menu Items ─────────────────────────────────────────────────────── */
+.ord-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--rule);
+  border: 1px solid var(--rule);
+}
+
+.ord-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  background: var(--white);
+  cursor: pointer;
+  transition: background 0.12s;
+  user-select: none;
+}
+
+.ord-item:active { background: var(--paper); }
+.ord-item.sold-out { opacity: 0.45; cursor: default; }
+
+.ord-item-img {
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  flex-shrink: 0;
+  background: var(--crema);
+  position: relative;
+}
+
+.ord-item-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.ord-item-img svg {
+  width: 22px;
+  height: 22px;
+  color: var(--parchment);
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  z-index: 0;
+  opacity: 0.6;
+}
+
+.ord-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ord-item-name {
+  font-weight: 600;
+  font-size: 0.88rem;
+  color: var(--roast);
+}
+
+.ord-item-desc {
+  font-size: 0.72rem;
+  color: var(--parchment);
+  margin-top: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ord-item-price {
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--roast-med);
+  flex-shrink: 0;
+}
+
+.ord-item-add {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1.5px solid var(--green);
+  background: transparent;
+  color: var(--green);
+  font-size: 1.1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s;
+}
+
+.ord-item-add:active { background: var(--green); color: var(--white); }
+.ord-item.sold-out .ord-item-add { border-color: var(--rule); color: var(--rule); cursor: default; }
+
+/* ── Cart ───────────────────────────────────────────────────────────── */
+.ord-cart {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  max-width: 800px;
+  margin: 0 auto;
+  background: var(--white);
+  border-top: 1px solid var(--rule);
+  z-index: 40;
+  max-height: 50vh;
+  overflow-y: auto;
+  box-shadow: 0 -4px 24px rgba(27, 21, 18, 0.08);
+  transition: max-height 0.25s var(--ease);
+}
+
+.ord-cart.collapsed {
+  max-height: 56px;
+  overflow: hidden;
+}
+
+.ord-cart-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 18px 10px;
+  cursor: pointer;
+}
+
+.ord-cart-head h2 {
+  font-family: var(--font-display);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--roast);
+  letter-spacing: -0.01em;
+}
+
+.ord-cart-total {
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--green);
+}
+
+.ord-cart-items {
+  padding: 0 18px 8px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.ord-cart-empty {
+  font-size: 0.78rem;
+  color: var(--parchment);
+  padding: 8px 0;
+  text-align: center;
+}
+
+.cart-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--rule-light);
+  gap: 8px;
+}
+
+.cart-item:last-child { border-bottom: none; }
+
+.cart-item-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.cart-item-name {
+  font-weight: 600;
+  font-size: 0.82rem;
+  color: var(--roast);
+}
+
+.cart-item-meta {
+  font-size: 0.68rem;
+  color: var(--parchment);
+}
+
+.cart-item-qty {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cart-qty-btn {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  border: 1px solid var(--rule);
+  background: var(--white);
+  font-size: 0.85rem;
+  color: var(--roast-med);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+.cart-qty-btn:active { background: var(--paper); }
+
+.cart-qty-num {
+  width: 26px;
+  text-align: center;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: var(--roast);
+}
+
+.cart-item-price {
+  font-weight: 600;
+  font-size: 0.82rem;
+  color: var(--roast-med);
+  min-width: 48px;
+  text-align: right;
+}
+
+.cart-item-remove {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  color: var(--cherry);
+  cursor: pointer;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.5;
+}
+
+.cart-item-remove:hover { opacity: 1; }
+
+.cart-item-custom {
+  font-style: italic;
+  color: var(--roast-med);
+}
+
+/* ── Cart Note ──────────────────────────────────────────────────────── */
+.ord-cart-note {
+  padding: 0 18px 10px;
+}
+
+.ord-cart-note label {
+  display: block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--parchment);
+  margin-bottom: 4px;
+}
+
+.ord-cart-note textarea {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--rule);
+  font-family: var(--font-body);
+  font-size: 0.8rem;
+  color: var(--roast);
+  background: var(--paper);
+  resize: none;
+  transition: border-color 0.2s;
+}
+
+.ord-cart-note textarea:focus {
+  outline: none;
+  border-color: var(--green);
+}
+
+/* ── Table Select (when no table param) ─────────────────────────────── */
+.ord-cart-table-row {
+  padding: 0 18px 10px;
+}
+
+.ord-cart-table-row label {
+  display: block;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--parchment);
+  margin-bottom: 4px;
+}
+
+.ord-cart-table-row select {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid var(--rule);
+  font-family: var(--font-body);
+  font-size: 0.82rem;
+  color: var(--roast);
+  background: var(--paper);
+  transition: border-color 0.2s;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23968878' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  padding-right: 30px;
+}
+
+.ord-cart-table-row select:focus {
+  outline: none;
+  border-color: var(--green);
+}
+
+/* ── Submit Button ──────────────────────────────────────────────────── */
+.ord-submit {
+  display: block;
+  width: calc(100% - 36px);
+  margin: 8px 18px 18px;
+  padding: 14px;
+  background: var(--roast);
+  color: var(--paper);
+  border: none;
+  border-radius: 6px;
+  font-family: var(--font-body);
+  font-size: 0.88rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background 0.2s, transform 0.1s;
+  letter-spacing: 0.02em;
+}
+
+.ord-submit:hover { background: var(--green); }
+.ord-submit:active { transform: scale(0.98); }
+.ord-submit:disabled {
+  background: var(--rule);
+  color: var(--parchment);
+  cursor: not-allowed;
+}
+
+/* ── Toast ──────────────────────────────────────────────────────────── */
+.ord-toast {
+  position: fixed;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s var(--ease);
+}
+
+.ord-toast.show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ord-toast-inner {
+  background: var(--roast);
+  color: var(--paper);
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  text-align: center;
+  box-shadow: 0 4px 16px rgba(27, 21, 18, 0.15);
+}
+
+/* ── Success State ──────────────────────────────────────────────────── */
+.ord-success {
+  text-align: center;
+  padding: 60px 20px;
+}
+
+.ord-success-icon {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto 20px;
+  background: var(--green);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--white);
+}
+
+.ord-success h2 {
+  font-family: var(--font-display);
+  font-size: 1.4rem;
+  color: var(--roast);
+  margin-bottom: 8px;
+}
+
+.ord-success p {
+  color: var(--roast-med);
+  font-size: 0.88rem;
+  margin-bottom: 24px;
+}
+
+/* ── Reduced Motion ─────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ── Desktop (wider than 500px) ─────────────────────────────────────── */
+@media (min-width: 500px) {
+  .ord-main {
+    flex-direction: row;
+    gap: 24px;
+    padding: 24px 20px 120px;
+  }
+
+  .ord-menu { flex: 1; }
+  .ord-cart {
+    position: sticky;
+    bottom: auto;
+    top: 72px;
+    width: 300px;
+    flex-shrink: 0;
+    border: 1px solid var(--rule);
+    border-top: 1px solid var(--rule);
+    box-shadow: none;
+    align-self: flex-start;
+    max-height: calc(100vh - 100px);
+  }
+}

public/index.html

@@ -17,6 +17,7 @@
       <a href="#" class="nav-logo">The Roasted Bean</a>
       <div class="nav-links">
         <a href="#menu">Menu</a>
+        <a href="/order">Order</a>
         <a href="#about">About</a>
         <a href="#visit">Visit</a>
       </div>

public/js/admin.js

@@ -89,6 +89,10 @@ function showSection(section) {
       document.getElementById('infoSection').style.display = '';
       renderInfo();
       break;
+    case 'tables':
+      document.getElementById('tablesSection').style.display = '';
+      setupTablesSection();
+      break;
     case 'settings':
       document.getElementById('settingsSection').style.display = '';
       break;
@@ -408,6 +412,143 @@ function setupForms() {
   });
 }
 
+// ── Tables & Orders ────────────────────────────────────────────────────────
+let tablesSetup = false;
+
+function setupTablesSection() {
+  if (tablesSetup) { renderOrders(); return; }
+  tablesSetup = true;
+
+  document.getElementById('saveTablesBtn').addEventListener('click', saveTableCount);
+  document.getElementById('loadQrBtn').addEventListener('click', loadQrCodes);
+  document.getElementById('refreshOrdersBtn').addEventListener('click', () => { renderOrders(); });
+
+  // Set current table count
+  document.getElementById('tableCount').value = menuData.tables || 0;
+  renderOrders();
+}
+
+async function saveTableCount() {
+  const count = parseInt(document.getElementById('tableCount').value);
+  if (isNaN(count) || count < 0 || count > 100) {
+    return showToast('Enter 0–100', 'error');
+  }
+  try {
+    const res = await fetch('/api/tables', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ count })
+    });
+    if (!res.ok) throw new Error('Failed');
+    menuData.tables = count;
+    showToast(`Saved: ${count} tables`, 'success');
+  } catch { showToast('Error saving', 'error'); }
+}
+
+async function loadQrCodes() {
+  const grid = document.getElementById('qrGrid');
+  grid.innerHTML = '<p style="color:var(--parchment);font-size:0.82rem;padding:20px;">Generating QR codes…</p>';
+  try {
+    const res = await fetch('/api/qr');
+    if (!res.ok) throw new Error('Failed');
+    const qrs = await res.json();
+
+    if (qrs.length === 0) {
+      grid.innerHTML = '<p style="color:var(--parchment);font-size:0.82rem;padding:32px;">No tables configured. Set the number above first.</p>';
+      return;
+    }
+
+    grid.innerHTML = qrs.map(q => `
+      <div class="qr-card">
+        <img src="${q.dataUrl}" alt="QR for Table ${q.table}" width="150" height="150">
+        <div class="qr-label">Table ${q.table}</div>
+        <div class="qr-url">${esc(q.url)}</div>
+      </div>
+    `).join('');
+
+    showToast(`${qrs.length} QR codes ready for print`, 'success');
+  } catch (err) {
+    console.error(err);
+    grid.innerHTML = '<p style="color:var(--cherry);font-size:0.82rem;padding:32px;">Failed to generate QR codes.</p>';
+  }
+}
+
+async function renderOrders() {
+  const container = document.getElementById('ordersContainer');
+  try {
+    const res = await fetch('/api/orders');
+    if (!res.ok) throw new Error('Failed');
+    const orders = await res.json();
+
+    if (orders.length === 0) {
+      container.innerHTML = '<p style="color:var(--parchment);font-size:0.82rem;padding:16px 0;">No active orders.</p>';
+      return;
+    }
+
+    const statusLabel = { pending: 'New', served: 'Served', paid: 'Paid', cancelled: 'Cancelled' };
+    const statusClass = { pending: 'badge-order-new', served: 'badge-order-served', paid: 'badge-order-paid', cancelled: 'badge-order-cancelled' };
+
+    container.innerHTML = orders.map(o => `
+      <div class="order-card ${o.status === 'cancelled' ? 'order-cancelled' : ''}">
+        <div class="order-card-head">
+          <div>
+            <span class="order-tbl">Table ${o.table}</span>
+            <span class="order-time">${timeAgo(o.createdAt)}</span>
+          </div>
+          <span class="badge ${statusClass[o.status] || ''}">${statusLabel[o.status] || o.status}</span>
+        </div>
+        <div class="order-card-body">
+          <ul class="order-items">
+            ${o.items.map(i => i.mid
+              ? `<li>${i.qty}× ${esc(i.name)} <span>$${(i.price * i.qty).toFixed(2)}</span></li>`
+              : `<li class="order-item-custom">"${esc(i.text)}"</li>`
+            ).join('')}
+          </ul>
+          ${o.note ? `<p class="order-note">📝 ${esc(o.note)}</p>` : ''}
+          <p class="order-total">Total: $${o.total.toFixed(2)}</p>
+        </div>
+        ${o.status !== 'cancelled' ? `
+          <div class="order-card-actions">
+            ${o.status === 'pending' ? `<button class="btn act-order serve" data-id="${o.id}" data-status="served">✓ Served</button>` : ''}
+            ${o.status === 'served' ? `<button class="btn act-order paid" data-id="${o.id}" data-status="paid">$ Paid</button>` : ''}
+            ${o.status !== 'paid' ? `<button class="btn btn-ghost act-order cancel" data-id="${o.id}" data-status="cancelled">✕ Cancel</button>` : ''}
+          </div>
+        ` : ''}
+      </div>
+    `).join('');
+
+    // Wire up action buttons
+    container.querySelectorAll('.act-order').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const id = btn.dataset.id;
+        const status = btn.dataset.status;
+        try {
+          const res = await fetch(`/api/orders/${id}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ status })
+          });
+          if (!res.ok) throw new Error('Failed');
+          showToast(`Order ${status}`, 'success');
+          renderOrders();
+        } catch { showToast('Error updating', 'error'); }
+      });
+    });
+  } catch (err) {
+    console.error(err);
+    container.innerHTML = '<p style="color:var(--cherry);">Failed to load orders.</p>';
+  }
+}
+
+function timeAgo(iso) {
+  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+  if (diff < 60) return 'just now';
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  const d = new Date(iso);
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
 // ── Toast ───────────────────────────────────────────────────────────────────
 function showToast(msg, type = 'success') {
   const container = document.getElementById('toastContainer');

public/js/order.js

@@ -0,0 +1,261 @@
+// ── Order Page — The Roasted Bean ─────────────────────────────────────
+
+let menuData = null;
+let cart = [];
+let tableNumber = null;
+let tablesCount = 0;
+
+document.addEventListener('DOMContentLoaded', init);
+
+async function init() {
+  // Get table from URL
+  const params = new URLSearchParams(window.location.search);
+  const tableParam = params.get('table');
+  if (tableParam) {
+    tableNumber = parseInt(tableParam);
+    document.getElementById('tableNumber').textContent = `#${tableNumber}`;
+  }
+
+  // Load data
+  const [menuRes, tablesRes] = await Promise.all([
+    fetch('/api/menu'),
+    fetch('/api/tables')
+  ]);
+  menuData = await menuRes.json();
+  const tablesData = await tablesRes.json();
+  tablesCount = tablesData.tables || 0;
+
+  // No table from URL — show table selector
+  if (!tableNumber) {
+    document.getElementById('tableDisplay').style.display = 'none';
+    const sel = document.getElementById('cartTableSelect');
+    sel.innerHTML = '<option value="">Select your table</option>' +
+      Array.from({ length: tablesCount }, (_, i) =>
+        `<option value="${i + 1}">Table ${i + 1}</option>`
+      ).join('');
+    sel.addEventListener('change', () => {
+      tableNumber = parseInt(sel.value) || null;
+      updateSubmit();
+    });
+    document.getElementById('cartTableRow').style.display = '';
+  } else {
+    document.getElementById('cartTableRow').style.display = 'none';
+  }
+
+  renderFilters();
+  renderItems();
+  updateSubmit();
+  setupCartToggle();
+}
+
+// ── Filters ──────────────────────────────────────────────────────────
+function renderFilters() {
+  const cats = menuData.categories || [];
+  const container = document.getElementById('ordFilters');
+  container.innerHTML = cats.map(c => `
+    <button class="ord-filter-btn${c.id === 'all' ? ' active' : ''}" data-cat="${c.id}">
+      ${c.name}
+    </button>
+  `).join('');
+
+  container.addEventListener('click', (e) => {
+    const btn = e.target.closest('.ord-filter-btn');
+    if (!btn) return;
+    container.querySelectorAll('.ord-filter-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    renderItems(btn.dataset.cat);
+  });
+}
+
+// ── Items ────────────────────────────────────────────────────────────
+function renderItems(catId = 'all') {
+  const container = document.getElementById('ordItems');
+  let items = menuData.items || [];
+  if (catId !== 'all') items = items.filter(i => i.category === catId);
+
+  container.innerHTML = items.map(item => {
+    const hasImg = item.image && item.image.startsWith('http');
+    const thumbSvg = svgPlaceholder(item.category);
+    const inCart = cart.find(c => c.mid === item.id);
+    const qty = inCart ? inCart.qty : 0;
+
+    return `
+      <div class="ord-item${!item.available ? ' sold-out' : ''}" data-id="${item.id}">
+        <div class="ord-item-img">
+          ${thumbSvg}
+          ${hasImg ? `<img src="${esc(item.image)}" alt="" loading="lazy" onerror="this.style.display='none'">` : ''}
+        </div>
+        <div class="ord-item-info">
+          <div class="ord-item-name">${esc(item.name)}</div>
+          <div class="ord-item-desc">${esc(item.description || '')}</div>
+        </div>
+        <div class="ord-item-price">$${item.price.toFixed(2)}</div>
+        <button class="ord-item-add" ${!item.available ? 'disabled' : ''}>${qty > 0 ? qty : '+'}</button>
+      </div>
+    `;
+  }).join('');
+
+  // Click handler
+  container.querySelectorAll('.ord-item:not(.sold-out)').forEach(el => {
+    el.addEventListener('click', () => {
+      const id = el.dataset.id;
+      const item = menuData.items.find(i => i.id === id);
+      if (!item) return;
+      addToCart(item);
+    });
+  });
+}
+
+// ── Cart ──────────────────────────────────────────────────────────────
+function addToCart(item) {
+  const existing = cart.find(c => c.mid === item.id);
+  if (existing) {
+    existing.qty++;
+  } else {
+    cart.push({ mid: item.id, name: item.name, price: item.price, qty: 1 });
+  }
+  renderCart();
+  renderItems(document.querySelector('.ord-filter-btn.active')?.dataset?.cat || 'all');
+}
+
+function removeFromCart(mid) {
+  cart = cart.filter(c => c.mid !== mid);
+  renderCart();
+  renderItems(document.querySelector('.ord-filter-btn.active')?.dataset?.cat || 'all');
+}
+
+function changeQty(mid, delta) {
+  const item = cart.find(c => c.mid === mid);
+  if (!item) return;
+  item.qty += delta;
+  if (item.qty <= 0) {
+    removeFromCart(mid);
+    return;
+  }
+  renderCart();
+  renderItems(document.querySelector('.ord-filter-btn.active')?.dataset?.cat || 'all');
+}
+
+function renderCart() {
+  const container = document.getElementById('cartItems');
+  const total = cart.reduce((sum, c) => sum + c.price * c.qty, 0);
+
+  if (cart.length === 0) {
+    container.innerHTML = '<p class="ord-cart-empty">Tap items from the menu to add them here.</p>';
+  } else {
+    container.innerHTML = cart.map(c => `
+      <div class="cart-item">
+        <div class="cart-item-info">
+          <div class="cart-item-name">${esc(c.name)}</div>
+          <div class="cart-item-meta">$${c.price.toFixed(2)} each</div>
+        </div>
+        <div class="cart-item-qty">
+          <button class="cart-qty-btn" data-action="minus" data-mid="${c.mid}">−</button>
+          <span class="cart-qty-num">${c.qty}</span>
+          <button class="cart-qty-btn" data-action="plus" data-mid="${c.mid}">+</button>
+        </div>
+        <div class="cart-item-price">$${(c.price * c.qty).toFixed(2)}</div>
+        <button class="cart-item-remove" data-action="remove" data-mid="${c.mid}">✕</button>
+      </div>
+    `).join('');
+
+    container.querySelectorAll('.cart-qty-btn, .cart-item-remove').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const action = btn.dataset.action;
+        const mid = btn.dataset.mid;
+        if (action === 'plus') changeQty(mid, 1);
+        else if (action === 'minus') changeQty(mid, -1);
+        else if (action === 'remove') removeFromCart(mid);
+      });
+    });
+  }
+
+  document.getElementById('cartTotal').textContent = `$${total.toFixed(2)}`;
+  document.getElementById('cartCount').textContent = cart.reduce((s, c) => s + c.qty, 0);
+  document.getElementById('cartBadge').style.display = cart.length > 0 ? '' : 'none';
+
+  updateSubmit();
+}
+
+// ── Submit ────────────────────────────────────────────────────────────
+function updateSubmit() {
+  const btn = document.getElementById('submitBtn');
+  const valid = cart.length > 0 && !!tableNumber;
+  btn.disabled = !valid;
+}
+
+document.getElementById('submitBtn').addEventListener('click', async () => {
+  if (!tableNumber || cart.length === 0) return;
+
+  const note = document.getElementById('orderNote').value.trim();
+  const btn = document.getElementById('submitBtn');
+  btn.disabled = true;
+  btn.textContent = 'Placing order…';
+
+  try {
+    const res = await fetch('/api/orders', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ table: tableNumber, items: cart, note })
+    });
+    if (!res.ok) throw new Error((await res.json()).error || 'Failed');
+
+    // Success state
+    document.getElementById('ordMenu').innerHTML = `
+      <div class="ord-success">
+        <div class="ord-success-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+        </div>
+        <h2>Order placed!</h2>
+        <p>Table #${tableNumber} — your order is being prepared.</p>
+        <p style="font-size:0.78rem;color:var(--parchment);">Total: $${cart.reduce((s,c)=>s+c.price*c.qty,0).toFixed(2)}</p>
+        ${note ? `<p style="font-size:0.75rem;color:var(--parchment);margin-top:4px;">Note: ${esc(note)}</p>` : ''}
+      </div>
+    `;
+    document.getElementById('ordCart').style.display = 'none';
+
+    // Show toast then redirect
+    showToast('✓ Sent to the kitchen!');
+    setTimeout(() => { window.location.href = '/'; }, 6000);
+  } catch (err) {
+    btn.disabled = false;
+    btn.textContent = 'Place order';
+    showToast('Something went wrong. Try again.');
+    console.error(err);
+  }
+});
+
+// ── Cart Toggle (mobile) ──────────────────────────────────────────────
+function setupCartToggle() {
+  const cart = document.getElementById('ordCart');
+  const head = cart.querySelector('.ord-cart-head');
+  head.addEventListener('click', () => {
+    cart.classList.toggle('collapsed');
+  });
+}
+
+// ── Toast ────────────────────────────────────────────────────────────
+function showToast(msg) {
+  const container = document.getElementById('ordToast');
+  container.innerHTML = `<div class="ord-toast-inner">${msg}</div>`;
+  container.classList.add('show');
+  setTimeout(() => container.classList.remove('show'), 2500);
+}
+
+// ── Utils ─────────────────────────────────────────────────────────────
+function esc(str) {
+  const div = document.createElement('div');
+  div.textContent = str || '';
+  return div.innerHTML;
+}
+
+function svgPlaceholder(category) {
+  const svgs = {
+    'coffee': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h14v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"/><path d="M18 9h2a2 2 0 012 2v1a2 2 0 01-2 2h-2"/><ellipse cx="8" cy="14" rx="2" ry="1.5"/><path d="M8 1v2" opacity="0.4"/><path d="M6 0v2" opacity="0.3"/><path d="M10 0v2" opacity="0.3"/></svg>',
+    'tea': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8h10a3 3 0 013 3v3a3 3 0 01-3 3H5a3 3 0 01-3-3v-3a3 3 0 013-3z"/><path d="M2 11l-2 3h2l1-3"/><path d="M7 8V6a1 1 0 011-1h2a1 1 0 011 1v2"/><circle cx="10" cy="3.5" r="1.2"/><path d="M8 1v2" opacity="0.4"/><path d="M10 0v2" opacity="0.3"/><path d="M12 1v2" opacity="0.3"/></svg>',
+    'pastries': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 16C4 16 6 10 12 8s10 0 10 0c-4 2-6 8-6 8"/><path d="M5 14c1-3 4-6 7-7"/><path d="M19 14c-1-3-4-6-7-7"/><path d="M8 10h8" opacity="0.3"/></svg>',
+    'food': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="18" rx="10" ry="3"/><rect x="8" y="8" width="8" height="7" rx="1"/><line x1="10" y1="9.5" x2="14" y2="9.5" opacity="0.4"/><line x1="10" y1="11.5" x2="14" y2="11.5" opacity="0.3"/><ellipse cx="12" cy="16" rx="3" ry="2" fill="currentColor" opacity="0.15"/></svg>'
+  };
+  return svgs[category] || svgs['coffee'];
+}

public/order.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Order — The Roasted Bean</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/css/order.css">
+</head>
+<body>
+
+<header class="ord-header">
+  <div class="ord-header-inner">
+    <a href="/" class="ord-logo">← Back</a>
+    <div class="ord-table" id="tableDisplay">
+      <span class="ord-table-label">Table</span>
+      <span class="ord-table-num" id="tableNumber">—</span>
+    </div>
+    <div class="ord-cart-badge" id="cartBadge" style="display:none">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
+      <span id="cartCount">0</span>
+    </div>
+  </div>
+</header>
+
+<main class="ord-main">
+  <!-- Menu items list -->
+  <section class="ord-menu" id="ordMenu">
+    <h2 class="ord-section-title">Menu</h2>
+    <div class="ord-filter" id="ordFilters"></div>
+    <div class="ord-items" id="ordItems"></div>
+  </section>
+
+  <!-- Cart panel -->
+  <aside class="ord-cart" id="ordCart">
+    <div class="ord-cart-head">
+      <h2>Your order</h2>
+      <span class="ord-cart-total" id="cartTotal">$0.00</span>
+    </div>
+    <div class="ord-cart-items" id="cartItems">
+      <p class="ord-cart-empty">Tap items from the menu to add them here.</p>
+    </div>
+    <div class="ord-cart-note">
+      <label for="orderNote">Special requests</label>
+      <textarea id="orderNote" rows="2" placeholder="e.g. Extra hot, oat milk instead"></textarea>
+    </div>
+    <div class="ord-cart-table-row" id="cartTableRow">
+      <label for="cartTableSelect">Table</label>
+      <select id="cartTableSelect"></select>
+    </div>
+    <button class="ord-submit" id="submitBtn" disabled>Place order</button>
+  </aside>
+</main>
+
+<!-- Confirmation toast -->
+<div class="ord-toast" id="ordToast"></div>
+
+<script src="/js/order.js"></script>
+</body>
+</html>

server.js

@@ -2,6 +2,7 @@ const express = require('express');
 const session = require('express-session');
 const bcrypt = require('bcryptjs');
 const { v4: uuidv4 } = require('uuid');
+const QRCode = require('qrcode');
 const fs = require('fs');
 const path = require('path');
 
@@ -181,6 +182,116 @@ app.put('/api/info', requireAuth, (req, res) => {
   res.json(data.info);
 });
 
+// ── Tables API ──────────────────────────────────────────────────────────────
+app.get('/api/tables', (req, res) => {
+  const data = readMenu();
+  res.json({ tables: data.tables || 0 });
+});
+
+app.put('/api/tables', requireAuth, (req, res) => {
+  const { count } = req.body;
+  if (typeof count !== 'number' || count < 0 || count > 100) {
+    return res.status(400).json({ error: 'Count must be 0–100' });
+  }
+  const data = readMenu();
+  data.tables = count;
+  writeMenu(data);
+  res.json({ tables: count });
+});
+
+// ── Orders API ──────────────────────────────────────────────────────────────
+// Create order (public)
+app.post('/api/orders', (req, res) => {
+  const { table, items, note } = req.body;
+  if (!table || !items || !Array.isArray(items) || items.length === 0) {
+    return res.status(400).json({ error: 'table and items are required' });
+  }
+
+  const data = readMenu();
+  const orderItems = [];
+  let total = 0;
+
+  for (const it of items) {
+    if (it.mid) {
+      const menuItem = data.items.find(m => m.id === it.mid);
+      if (!menuItem || !menuItem.available) continue;
+      const qty = Math.max(1, it.qty || 1);
+      orderItems.push({ mid: menuItem.id, name: menuItem.name, price: menuItem.price, qty });
+      total += menuItem.price * qty;
+    } else if (it.text) {
+      orderItems.push({ text: it.text, price: 0 });
+    }
+  }
+
+  if (orderItems.length === 0) {
+    return res.status(400).json({ error: 'No valid items in order' });
+  }
+
+  const order = {
+    id: uuidv4(),
+    table: parseInt(table),
+    items: orderItems,
+    note: note || '',
+    status: 'pending',
+    total: Math.round(total * 100) / 100,
+    createdAt: new Date().toISOString()
+  };
+
+  data.orders = data.orders || [];
+  data.orders.push(order);
+  writeMenu(data);
+  res.status(201).json(order);
+});
+
+// Get all orders (admin)
+app.get('/api/orders', requireAuth, (req, res) => {
+  const data = readMenu();
+  const orders = data.orders || [];
+  orders.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
+  res.json(orders);
+});
+
+// Update order status (admin)
+app.put('/api/orders/:id', requireAuth, (req, res) => {
+  const data = readMenu();
+  const idx = (data.orders || []).findIndex(o => o.id === req.params.id);
+  if (idx === -1) return res.status(404).json({ error: 'Order not found' });
+
+  const { status } = req.body;
+  if (!['pending', 'served', 'paid', 'cancelled'].includes(status)) {
+    return res.status(400).json({ error: 'Invalid status' });
+  }
+  data.orders[idx].status = status;
+  writeMenu(data);
+  res.json(data.orders[idx]);
+});
+
+// ── QR Codes (admin) ────────────────────────────────────────────────────────
+app.get('/api/qr', requireAuth, async (req, res) => {
+  try {
+    const data = readMenu();
+    const count = data.tables || 0;
+    const host = req.get('host');
+    const baseUrl = (host && (host.includes('localhost') || host.includes('127.0.0.1')))
+      ? 'https://qr-code-cafe.hf.space'
+      : `https://${host}`;
+
+    const qrs = [];
+    for (let i = 1; i <= count; i++) {
+      const url = `${baseUrl}/order?table=${i}`;
+      const dataUrl = await QRCode.toDataURL(url, {
+        width: 200, margin: 2,
+        color: { dark: '#1B1512', light: '#FFFFFF' }
+      });
+      qrs.push({ table: i, url, dataUrl });
+    }
+    res.json(qrs);
+  } catch (err) {
+    console.error('QR generation error:', err);
+    res.status(500).json({ error: 'QR generation failed' });
+  }
+});
+
 // ── Health ──────────────────────────────────────────────────────────────────
 app.get('/health', (req, res) => res.json({ status: 'ok' }));
 
@@ -189,12 +300,39 @@ app.get('/admin', (req, res) => {
   res.sendFile(path.join(__dirname, 'public', 'admin.html'));
 });
 
+app.get('/order', (req, res) => {
+  res.sendFile(path.join(__dirname, 'public', 'order.html'));
+});
+
 // SPA fallback
 app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public', 'index.html'));
 });
 
+// ── Midnight cleanup ────────────────────────────────────────────────────────
+function scheduleMidnightCleanup() {
+  const now = new Date();
+  const midnight = new Date(now);
+  midnight.setHours(24, 0, 0, 0);
+  const msUntilMidnight = midnight - now;
+
+  setTimeout(() => {
+    try {
+      const data = readMenu();
+      if (data.orders && data.orders.length > 0) {
+        data.orders = [];
+        writeMenu(data);
+        console.log('🗑️  Midnight: cleared all orders');
+      }
+    } catch (err) {
+      console.error('Midnight cleanup error:', err);
+    }
+    scheduleMidnightCleanup();
+  }, msUntilMidnight);
+}
+
 // ── Start ───────────────────────────────────────────────────────────────────
 app.listen(PORT, '0.0.0.0', () => {
   console.log(`☕ The Roasted Bean serving on 0.0.0.0:${PORT}`);
 });
+scheduleMidnightCleanup();