🥪 Sandwich Grill – Billing Software Guide

Version 2 · Bills saved in the cloud (Supabase) · Opened from a secure https:// address in Google Chrome or Microsoft Edge

What is new in Version 2 (read this first)

• Open the app from its https:// address (the bookmark), not from a folder. Both laptops then always run the same, newest version.
• Log in. The Admin and the Shop Manager each have their own email and password. Never share them or write them on the laptop. Press Log out when you leave a laptop.
• The light at the top: green "Online" means bills save and both laptops update by themselves. Amber means bills still save but the other laptop updates once a minute. Red means no internet: bills cannot be saved.
• "Saved" only after the cloud confirms. A bill is finished only when the screen says "Saved in the cloud: bill SG-…".
• No internet: keep the bill on screen, take payment as usual, and press Save when the light is green again. Nothing is saved on the laptop only.
• NOT CONFIRMED: if the internet drops while saving, the bill stays on screen and is locked. Press Try saving again when the light is green. It never makes the same bill twice.
• Cancel or refund instead of delete: open the bill in Orders and press "Cancel / Refund" with a reason. It stays in the list "Cancelled / refunded".
• Menu delete asks you to type the item's name. "Switch off instead" hides the item but keeps it safe.
• Printer settings (paper width, auto print) are saved on each laptop separately.
• New version: a banner says a new version is ready; the app reloads by itself after the current bill.
• Daily copy: bills are safe in the cloud, but press Settings → Download full copy every day for extra safety.
• UPI: the app does not check the bank. Check the payment on the phone as before.

1. The simple approach

The app is a set of normal web files (HTML, CSS, JavaScript) that you keep in a folder on your laptop. You open index.html in Chrome or Edge, and the app runs inside the browser.

• No internet needed, no website, no hosting, no server, no monthly fee.
• Data is saved inside the browser on this laptop (using the browser's built-in database called IndexedDB). Everything is saved the moment you click a button.
• Printing uses the normal Windows print window, so any printer with a working Windows driver can print the receipt. No paid printing service.
• Backups are files you download with one click and keep on a pen drive or Google Drive.

2. The files and folders

SandwichGrill\                 ← the main folder (keep it in one place)
│  index.html                   ← OPEN THIS to start the app
│  GUIDE.html                   ← this guide
│  README.txt                   ← short start instructions
├─ css\
│     style.css                 ← colours and layout of the app
│     receipt.css               ← how the printed bill looks
└─ js\
      default-data.js           ← your starting menu + prices (used only the first time)
      utils.js                  ← helpers: money format, dates, pop-ups, downloads
      storage.js                ← saving/loading data, bill numbers, calculations
      receipt.js                ← builds the 80mm / 58mm receipt and opens Print
      billing.js                ← the Billing screen
      orders.js                 ← the Orders page (search, status, reprint, delete)
      reports.js                ← Dashboard and Reports pages
      menu-admin.js             ← the Menu page (items, sizes, prices, costs, combos)
      settings.js               ← Settings, test print, backup and restore
      main.js                   ← starts the app and switches pages

You do not need to edit any file to change prices, items or the shop name. Do that inside the app.

3. Run it on your Windows laptop

1. Download the file sandwich-billing.zip.
2. Open File Explorer → Downloads. Right-click sandwich-billing.zip → Extract All…
3. In the box, type C:\SandwichGrill and click Extract. (Any folder is fine, but then never move or rename it later.)
4. Open C:\SandwichGrill. You should see index.html, GUIDE.html, and the folders css and js.
   If you see one more folder inside, open it: the files must be directly in the folder you use.
5. Right-click index.html → Open with → Google Chrome (or Microsoft Edge). The Billing screen appears with your menu.
6. Make it easy for your father: in Chrome press Ctrl+D to bookmark it. Press F11 for full screen (press F11 again to exit).

Make a desktop icon (recommended)

1. Right-click on the desktop → New → Shortcut.
2. Paste this as the location (for Chrome):

   "C:\Program Files\Google\Chrome\Application\chrome.exe" --start-fullscreen "file:///C:/SandwichGrill/index.html"

   For Edge use:

   "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --start-fullscreen "file:///C:/SandwichGrill/index.html"

3. Click Next, name it Sandwich Grill Billing, click Finish.

4. First-time setup

a) Shop name and contact details

1. Click ⚙️ Settings & Backup.
2. Shop name is already Sandwich Grill. Fill in Address line 1, Address line 2, Phone number, and an optional extra line (e.g. Instagram).
3. Check the thank-you message and "Bill number starts with" (default SG-, so bills are SG-0001, SG-0002 …).
4. Click 💾 Save settings.

b) Check the menu and prices

1. Click 🍔 Menu. All 43 items from your printed menu are loaded in 9 categories.
2. Click Edit on any item to change its name, category, sizes, selling price or cost. Click 💾 Save item.
3. Use the Available switch to turn an item off when it is sold out. It shows as "Not available" on the Billing screen.
4. Categories tab: add, rename, delete (only empty ones) and change the order of categories.
5. Sauces tab: sauce prices start at ₹0 because your menu does not give a price for each sauce. Type the price and click 💾 Save sauces.
6. Combo offers tab: click Create combo, add the items inside it, type the combo price, and the estimated cost (the "use item costs" button adds up the item costs for you).

c) Preparation cost (for profit reports)

The menu does not show your costs, so every cost starts at ₹0 and reports warn you. For each item, click Edit and type your estimated cost to make one (bread, filling, cheese, sauce, packing…). Until you do this, the "estimated gross profit" is too high.

5. Daily use (for the counter)

1. Open the app. The Billing screen shows categories on the left, items in the middle, the bill on the right.
2. Tap a category, then tap an item. If the item has sizes (Medium/Large, Steam/Fried, Sandwich/Wrap) or sauces, a window asks you to choose; tap ➕ Add to bill.
3. Use + and − to change quantity. To type a big number (e.g. 6), click on the number itself. Tap ✕ to remove an item.
4. Discount: type the amount, and choose ₹ (rupees) or % (percent).
5. Choose Cash, UPI or Card.
6. Finish the bill:
   • 🖨️ Complete & Print – customer has paid; saves and prints.
   • ✅ Complete – customer has paid; saves without printing.
   • ⏳ Save as Pending – order taken but not paid / not handed over yet.
7. Pending orders: click ⏳ Pending orders (top of Billing) or the Orders page. Click ✅ Complete when paid. Click View → ✏️ Edit items to add items to a pending order.
8. For UPI: check that the money has arrived on your phone/UPI app before clicking Complete. This software does not check UPI or card payments; it only records what you select.

6. Connect and test the thermal printer

a) Before buying – check compatibility

• Ask the seller / POSIFLOW support: "Does this printer have a Windows 10/11 64-bit driver, so it appears in the normal Windows printer list and can print from Chrome?" Their website has a Drivers & Demo menu.
• The model in your photo is USB only (no Wi-Fi/Bluetooth). Your laptop needs a free USB port (or a USB adapter).
• Buy 80mm thermal paper rolls (80 × 50mm or similar). The 58mm option in the app is only for 58mm printers.

b) Install the driver

1. Download the Windows driver for your exact model from POSIFLOW's "Drivers & Demo" page (or use the CD/pen drive in the box). Only download from the official site.
2. Run the installer as the instructions say. Choose the USB port when asked. Some drivers ask you to choose a model name like "POS-80" – pick the one the manual says.
3. Plug in the printer, load the paper (shiny side towards the print head – usually paper comes out from under the roll), close the lid, switch it on.
4. Printer self-test: most thermal printers print a self-test page if you hold the FEED button while switching on. Check your manual.
5. Open Settings → Bluetooth & devices → Printers & scanners. The printer should be listed. Click it → Print test page.

c) Printer settings in Windows

1. In Printers & scanners → your printer → Printing preferences.
2. Paper size: choose the 80mm roll size (names differ: e.g. 80mm × 297mm, 72mm × Receipt, Roll Paper 80 × 3276mm).
3. If there is a cut option (auto cutter), choose "cut at end of document / page".
4. Tip: do not set it as the default printer if you also use a normal printer; Chrome remembers the last printer you used anyway.

d) Print the test receipt from the app

1. App → ⚙️ Settings & Backup. Paper width: 80 mm. Click 🖨️ Print test receipt.
2. In the print window: Destination = your thermal printer.
3. Click More settings: Margins = None, Scale = Default, untick Headers and footers.
4. Click Print. Chrome remembers these settings for next time.

Check: shop name at the top, all text inside the paper, ₹ symbol visible, total in bold, paper cut after the thank-you line.

7. Backup every day, and restore

Daily backup (2 minutes after closing)

1. Click ⚙️ Settings & Backup → ⬇️ Download full backup (or the orange button in the yellow reminder bar).
2. A file like sandwich-grill-backup_2026-10-17_2215.json is saved in Downloads.
3. Copy it to a pen drive and/or upload it to Google Drive. Keep at least the last 7 days. A copy only on the same laptop does not protect you if the laptop breaks.

The app shows a yellow reminder at the top on any day you have bills but no backup.

Restore (only when needed)

1. Settings & Backup → 📂 Choose backup file… → select the backup file.
2. The app checks the file. If it is damaged or from another program, nothing is changed.
3. You see what is in the file next to what is in the browser now (number of bills, items, shop name), and a warning if the file has fewer bills.
4. Type RESTORE and click Replace my data with this backup. The app first downloads a SAFETY backup of your current data, then replaces it.

Excel / CSV exports

• Orders page → Bills CSV (one row per bill) or Item lines CSV (one row per item sold), using the current filters.
• Reports page → Report CSV (summary, day-by-day and item-wise for the chosen dates).
• CSV files open in Excel or Google Sheets. They are for reading; to restore data you need the .json backup.

8. How the numbers are counted

9. Limits you must know

• One laptop, one browser. Data is not shared with other computers or phones. There is no online access.
• Clearing browser data deletes everything. Never clear "Cookies and other site data" / "Hosted app data". Uninstalling Chrome/Edge or resetting Windows can also remove it. Your backups are the only protection.
• The browser may delete stored data in rare cases if the disk is almost full. Keep free disk space and take daily backups.
• Use the app in one tab only. The app warns you if it is open twice.
• No GST invoice. The receipt is a simple bill. It does not calculate GST or show a GSTIN, so it is not a GST tax invoice. If the shop is GST-registered, talk to your accountant before using it for GST billing.
• No payment checking. UPI and Card are only recorded, not verified.
• No user login or passwords. Anyone using the laptop can change prices or delete bills. (Deleted bills stay in the log.)
• No stock / inventory, no kitchen order tickets (KOT), no customer database in this version.

10. Test it yourself (10 minutes)

I tested all of these automatically in Chrome (48 checks, all passed). Do them once on your laptop too, before the shop starts using it:

1. Add Veg Sandwich → choose Wrap + Garlic Mayo → qty 2. Add Coke 3 times, French Fries Large. Check the subtotal: 158 + 60 + 159 = ₹377.
2. Type discount 10 → total ₹367. Choose % → total ₹339.30. Set it back to ₹.
3. Choose UPI → Save as Pending. Bill SG-0001 appears in Pending orders.
4. Make another bill with 6 × Masala Bread Omelette (click the quantity and type 6) → Complete.
5. Close the browser and open the app again. Both bills are still there (Orders page).
6. Orders → SG-0001 → ✅ Complete. Dashboard shows today's sales, Cash and UPI split.
7. Reports → Today → Report CSV and open it in Excel.
8. Settings → Print test receipt (choose "Save as PDF" if the printer is not connected yet).
9. Settings → Download full backup. Then Orders → delete one bill with a reason. Then restore the backup file: the bill comes back.
10. When you are happy, reset everything for real use: see "Start fresh" below.

Start fresh after testing

Test bills stay in the data. When testing is finished: Settings & Backup → 🗑️ Delete all bills → type DELETE. All bills are removed and numbering starts again at SG-0001. Your menu, prices, costs and shop details are kept, and a safety backup is downloaded first.

11. Menu details to confirm

• Spelling corrected from the printed menu: Panner → Paneer, Mushroon → Mushroom, Nugets → Nuggets.
• Sandwich / Wrap items: the printed menu column says "Sandwich/wrap" with one price, so each item has two types, Sandwich and Wrap, at the same price. Delete the Wrap type if you do not offer it.
• Chicken Popcorn ₹159 / ₹259: entered as Medium / Large (same column as the fries). Rename if different.
• Momos: Steam / Fried prices as listed. Schezwan Momos ₹159 has one price.
• Sauces: the Munchies sauce box on your menu says "@29". I did not set sauce prices; type 29 (or the right price) in Menu → Sauces if sauces are charged.
• The "Sandwich" card on the menu has a "Steam/Fried" heading, which looks like a design mistake, so those items have one price.
• Costs are all ₹0 until you enter them.

12. Problems and fixes

13. How the code works (for learning)

• index.html has the page structure: top tabs, the Billing screen, the Orders page, and empty sections that JavaScript fills in.
• storage.js → Store.load() reads everything from IndexedDB into memory when the app starts. Every change calls a save function (saveOrder, saveMenu…) that writes to IndexedDB at once.
• A bill (order) is saved like this:

  { billNo: "SG-0001", createdAt: "2026-10-17T12:30:00Z", status: "Pending",
    payment: "UPI", subtotal: 377, discount: 10, total: 367, totalCost: 0,
    lines: [ { name: "Veg Sandwich", sizeName: "Wrap", sauces: [{name:"Garlic Mayo"}],
               qty: 2, unitPrice: 79, unitCost: 0 }, ... ] }

• The bill copies the name, price and cost at the moment of sale. That is why menu changes don't change old bills.
• Calc.totals() in storage.js calculates subtotal, discount and total. Calc.summarize() makes the report numbers (only Completed bills).
• receipt.js builds the receipt HTML, measures its length, sets the paper size (80mm or 58mm wide), and calls window.print(). receipt.css hides the app and shows only the receipt when printing.
• To change colours, edit the values at the top of css/style.css (for example --orange).