Accessing Sales on Mobile (Foodops)

Plain-English summary

Yes — you can run Foodops on a phone or tablet, and there is nothing to download from the App Store or Play Store. Everything is on the web. The piece you actually take sales with — the Counter POS (counter.foodops.io) — is a Progressive Web App (PWA): open it in the phone's browser, log in, and you can also "install" it to the home screen so it launches full-screen like a native app and keeps working if the connection drops. The back-office admin app (admin.foodops.io), where you view reports (like the daily sales summary), also works on a phone — it's a responsive site with a mobile menu — but it is not installable and needs a live connection. So: Counter = your mobile till; admin app in a mobile browser = your mobile reports view.

When you'd use this

• Taking orders and payments from a phone or tablet on the floor (no fixed terminal)
• Running a pop-up / market stall / delivery counter off a tablet
• Checking today's sales from your phone while away from the shop
• Installing the till on a spare Android tablet or iPad without an app-store account
• Keeping the till usable through a brief Wi-Fi/internet drop

The two mobile surfaces

Live host note: on the current Salesmade-branded deployment the same two apps are served from counter.salesmade.io (till) and app.salesmade.io (admin). The behaviour below is identical — only the domain differs.

The Counter is an installable PWA

The counter app is built as a Progressive Web App: it ships a web app manifest with display: 'standalone' and a service worker that precaches the app shell and caches the menu at runtime, so it can be added to a phone/tablet home screen and survives a connection drop. [code: foodops.counter.app/vite.config.ts:144-193 (VitePWA(...), manifest.display: 'standalone', start_url: '/'); src/sw.ts (injectManifest service worker)]

It also carries the standard mobile/PWA meta tags: a mobile viewport, a theme-color, both mobile-web-app-capable and apple-mobile-web-app-capable, an apple-mobile-web-app-title of "Foodops Counter", and Apple touch icons for the home-screen tile. [code: foodops.counter.app/index.html:7,10,13-16,22-24]

The order-taking screen is laid out mobile-first: three columns (category rail · products · cart) on a desktop/tablet width, collapsing to a stacked single-column layout on a phone. [code: foodops.counter.app/src/pages/OrderCreatePage.tsx:230]

Install the Counter on a phone/tablet home screen

1. Open counter.foodops.io in the device browser and log in.
2. Add it to the home screen:
   • iPhone / iPad (Safari) — tap the Share button → Add to Home Screen. (On iOS this only works from Safari, not Chrome.)
   • Android (Chrome) — tap the ⋮ menu → Install app (or Add to Home screen).
3. Launch it from the new home-screen icon. Because the manifest is standalone, it opens full-screen without browser chrome — it looks and behaves like a native app.

Offline behaviour

The service worker precaches the app shell (JS/CSS/HTML/icons) and caches menu data at runtime, so the till keeps rendering and can keep taking orders through a short internet drop. Updates use a prompt strategy: when a new version is deployed you get a "new version available / Reload" toast rather than a silent swap — tap Reload to move to the new build. [code: foodops.counter.app/vite.config.ts:146-193 (registerType: 'prompt', skipWaiting intentionally off)]

The admin back-office is responsive (but not installable)

The admin app (menu setup, Reports, expenses, settings) is a normal responsive React web app. It has a mobile viewport and theme-color, but no web manifest and no service worker — so it can't be installed to the home screen and doesn't work offline. [code: foodops-admin-app/apps/admin/index.html:6,8 (viewport/theme-color, no manifest link); apps/admin/vite.config.ts (no VitePWA)]

On a small screen it swaps the desktop sidebar for a hamburger top bar: tap the menu icon (top-left) to slide the navigation in as an overlay drawer, tap outside to dismiss. [code: foodops-admin-app/apps/admin/src/components/layout/MobileTopBar.tsx (sm:hidden bar with a Menu button); components/layout/Layout.tsx:206 (renders MobileTopBar; drawer state)]

See your sales on a phone

1. Open admin.foodops.io in the phone browser and log in.
2. Tap the hamburger (top-left) to open the menu.
3. Go to Reports → Day Summary for today's sales, or any other report. See Reports Catalogue.

Wide report tables scroll sideways within the page on a narrow phone; a tablet in landscape is more comfortable for report-heavy work.

No separate native app

There is no dedicated native iOS/Android app to download for taking or viewing sales — the Counter PWA is the mobile app. (The foodops.delivery.mobile repo is dormant, and the only native/desktop client in the stack is foodops.app.printing, a receipt/label print client — not a sales app. See _meta/repo-prod-branches.md.)

Key concepts

• PWA (Progressive Web App) — a website that can be installed to the home screen, launch full-screen, and work offline via a service worker. The Counter is one; the admin app is not.
• Standalone display — a PWA launched from the home screen runs without browser address-bar/tabs, so it feels like a native app.
• Service worker — the background script that caches the app shell + data, enabling offline use and the update prompt.
• Responsive web app — adapts its layout to the screen size but still runs inside a browser tab (no install, no offline). The admin app is this.

Common questions

Q: Is there a Foodops app to download from the App Store / Play Store? A: No. Nothing to download from an app store. The till (Counter) is a web app you open in the browser and can add to your home screen; the back-office (admin) you just open in a mobile browser.

Q: Can I take orders and payments from a phone or tablet? A: Yes — that's exactly what the Counter (counter.foodops.io) is for. It's designed mobile/tablet-first. Open it in the browser, log in, and take sales; install it to the home screen for a full-screen, app-like experience.

Q: How do I install the till on my phone's home screen? A: iPhone/iPad — open counter.foodops.io in Safari, tap Share → Add to Home Screen. Android — open it in Chrome, tap ⋮ → Install app. It then launches full-screen from the icon.

Q: Does the till keep working if the internet drops? A: For a short drop, yes — the Counter caches its app shell and the menu, so it keeps rendering and taking orders. It syncs back up when the connection returns. It is not a fully offline-forever system, but it rides out brief outages.

Q: Can I see my sales / reports on my phone? A: Yes. Open the admin app (admin.foodops.io) in your phone browser, tap the hamburger menu, and go to Reports → Day Summary (today's sales) or any other report. The Counter also shows the Day Summary at /reports/day-summary for an on-the-floor read.

Q: Can I install the back-office (admin) app to my home screen like the till? A: No — the admin app isn't a PWA, so there's no "install" option. Use it in a normal browser tab. Only the Counter is installable.

Q: Which should I use on a phone — the Counter or the admin app? A: To take sales, use the Counter (install it). To view sales, reports, or do back-office setup, use the admin app in the browser. They're two different tools.

Q: Do I need a special device? Does a tablet work? A: Any modern phone or tablet with an up-to-date browser works. A tablet (especially in landscape) is the most comfortable for the till and for report tables; a phone is fine for quick order-taking and checking figures.

Q: The till says a new version is available — what do I do? A: Tap Reload on the toast. The Counter deliberately waits for you to confirm before switching to a new version (so it never swaps out mid-sale); reloading picks up the latest build.

Q: Why does the till feel like a real app but the back-office feels like a website? A: Because it is — the Counter is a PWA (installable, standalone, offline-capable), while the admin back-office is a responsive website that runs in a browser tab. Different tools, built for different jobs.

Q: What about the kitchen display and the customer ordering page on mobile? A: The customer ordering site (order.foodops.io) is a customer-facing web page that opens on any phone browser — that's how guests order from their own phones. The kitchen display (kds.foodops.io) is meant for a mounted kitchen screen rather than a handheld. Neither is part of "accessing your sales," which is the Counter + admin reports covered above.

Edge cases and known issues

"Add to Home Screen" is missing on iPhone

• Symptom: No "Add to Home Screen" option
• Cause: You're not in Safari — iOS only allows PWA install from Safari, not Chrome/Firefox on iOS
• Workaround: Open counter.foodops.io in Safari, then Share → Add to Home Screen

Installed till shows an old version after a deploy

• Symptom: A teammate has the new build, your home-screen till doesn't
• Cause: The update prompt was dismissed / not yet shown; the Counter won't force-swap versions
• Workaround: Reload the app (or tap Reload on the update toast) to pick up the latest build

Report tables are hard to read on a small phone

• Symptom: Wide report columns overflow on a narrow screen
• Cause: The admin app is responsive but some report tables are inherently wide
• Workaround: Scroll the table sideways, rotate to landscape, or use a tablet for report-heavy work; export to CSV/PDF for offline reading

Related

• Reports Catalogue — the reports (incl. Day Summary) you view on a phone via the admin app

• POS Takeaway Order — taking a sale on the Counter

• Recording Expenses — the back-office expenses flow (admin, mobile browser)

• 2026-07-17 — Authored (codebase-only; not live-walked). Verified the Counter is an installable PWA against foodops.counter.app@a974d67: VitePWA with manifest.display: 'standalone' + injectManifest service worker (vite.config.ts:144-193, src/sw.ts), PWA/apple meta + touch icons (index.html:7,10,13-16,22-24), mobile-first three-column→stacked order screen (OrderCreatePage.tsx:230). Verified the admin app is responsive-but-not-installable against foodops-admin-app@289bf0e: viewport/theme-color but no manifest/VitePWA (apps/admin/index.html, apps/admin/vite.config.ts), mobile hamburger drawer (MobileTopBar.tsx, Layout.tsx:206). No dedicated native sales app (per _meta/repo-prod-branches.md: foodops.delivery.mobile dormant, foodops.app.printing is a print client). Live install/offline walk + screenshots still UI-TODO.