Tree Nook Café — Staff Manual

Everything you need to manage the website. Keep this page bookmarked.

📊
Dashboard 🍳
Recipes 🏷
Labels 🎨
Icon Maker
Contents
1. Logging In & Out — admin access & passwords 2. Edit Your Site Panel — banners, cards, social links, sound 3. Admin Dashboard — orders, bookings, merch, café rentals 4. Email Templates — editing & placeholder tags 5. Archive & Reports — filters, date picker, print report 6. Merch Stock — automatic stock reduction 7. Undo System — reversing mistakes 8. Placeholder Reference — {name}, {id}, {items} … 9. Fonts Used — brand fonts & where they're used 10. POS System — cashier, orders, inventory & payroll
1. Logging In & Out

How to log in

1
Go to the main page (index.html). Click the 🔑 Login button at the top-right corner.
2
Enter the admin password. Once correct, the Edit Your Site panel opens and admin-only buttons appear.
3
The session is saved in your browser — you stay logged in unless you click 🔓 Logout or clear browser data.

Logging out

Open the Edit Your Site panel → click 🔓 Logout. This clears your admin session immediately.

Note: The sound toggle (🔊/🔇) button is only visible when you are logged in as admin. Customers will never see it.
2. Edit Your Site Panel

Opening the panel

Click 🔑 Login (top-right of the main page) and enter the password. The panel slides in from the right.

Tabs in the panel

TabWhat you can edit
EditHero text, countdown, opening date, footer copyright, social media links, banner cards
FoodFood menu items — name, price, description, image URL
DrinksDrinks menu items
PastryPastry / snack items
CardsHomepage feature cards (Gaming, Merch, Café rental)
CaféCafé rental packages and pricing

Saving changes

  • Click ☁️ Save All to Cloud at the top of the Edit tab to save all settings to Supabase.
  • Individual sections (menu items, social links) have their own Save buttons.
  • Changes sync instantly to the live site when saved.

Social Media Links

1
In the Edit tab, scroll to Social Media Icons.
2
Paste the full URL for Instagram, Facebook, and TikTok.
3
Click Save Social Links. The floating icons on the left side of the homepage update immediately.

Leave a field empty to hide that icon.

3. Admin Dashboard

Accessing the dashboard

Log in → open the Edit Your Site panel → click 📊 Dashboard. Or go directly to treenook-admin.html.

Dashboard panels

PanelPurpose
🍔 Food OrdersView and manage food/drink orders placed by customers. Accept, complete, or remove them.
🛍 Merch & RewardsSee merch orders. Stock updates automatically when a customer checks out.
🎮 Gaming BookingsManage gaming room bookings — confirm, cancel, or view details.
☕ Café RentalsHandle café event rental requests and send confirmation emails.
📦 ArchiveCompleted / historical transactions with filter and print options.
📧 Email TemplatesEdit the default email content for each type of transaction.

Sending emails from the dashboard

Each order/booking row has an ✉ Email button. Clicking it opens Gmail pre-filled with the correct template and customer info. Just hit Send.

4. Email Templates

Template types

TemplateSent when
Gaming — ConfirmedGaming booking is approved
Gaming — CancelledGaming booking is cancelled
Café — ConfirmedCafé rental request is approved
Café — CancelledCafé rental is cancelled
Café — DeclinedCafé rental request is declined
☕ Food OrderCustomer places a food order
🛍 Merch OrderCustomer places a merch order

Editing a template

1
Go to 📧 Email Templates in the dashboard.
2
Find the template card you want to edit. Change the Subject and/or Body.
3
Use {placeholders} where you want customer info to auto-fill (see Section 8 below).
4
Click 💾 Save Templates. Changes sync to Supabase and will be used for all future emails.
5. Archive & Reports

Filters

ButtonShows
All TimeEvery completed transaction ever
This MonthCurrent calendar month only
This YearCurrent calendar year only
📅 DateOpens a date picker — shows only that specific day

Printing a report

1
Select the filter you want (e.g. This Month).
2
Click 🖨 Print Report. A new window opens with a formatted summary table.
3
Use your browser's Print (Ctrl+P) to print or save as PDF.
6. Merch Stock

How stock works

  • When a customer checks out on the Merch page, their ordered quantities are automatically subtracted from the stock in Supabase.
  • If a customer orders 5 of an item with 10 in stock, the stock immediately becomes 5.
  • Stock cannot go below 0 — it stops at zero.
  • The dashboard Merch panel always shows the current live stock.

Adjusting stock manually

Go to the 🛍 Merch & Rewards panel in the dashboard. Each item shows its current stock. You can edit it directly and save.

7. Undo System

How undo works

Every panel header has an ↩ Undo button. It becomes active after you make a change (delete, status update, etc.).

  • Each panel tracks its own undo history.
  • Clicking ↩ Undo reverses the most recent action in that panel — the record is restored in the database.
  • You can undo multiple times to go further back.
  • The button is grayed out when there is nothing to undo.
Tip: If you accidentally delete a booking or order, hit ↩ Undo immediately in that panel. It re-inserts the exact record.
8. Placeholder Reference

Use these tags in your email Subject or Body. They are replaced automatically with the customer's real data when the email opens.

TagReplaced withUsed in
{name} Customer's full name
e.g. Peter Ebonia		 All templates
{id} Order or booking ID
e.g. ORDER #M0006		 All templates
{date} Date & time of order or event
e.g. 7/1/2026, 9:01 AM		 All templates
{total} Total amount in ₱
e.g. 800		 All templates
{slot} Time slot booked
e.g. 2:00 PM – 4:00 PM		 Gaming only
{pkg} Package selected
e.g. Standard Package		 Gaming only
{event} Event type / name
e.g. Birthday Party		 Café rentals only
{items} Itemized list of ordered products
e.g. - Tree Nook Cup ×2 (₱350)		 Food & Merch only
9. Fonts Used

Genty (Brand Font)

The main display font for the Tree Nook. logo and big headings throughout the site. This is a custom font file (GentyDemo-Regular.ttf) stored locally in the website folder. Do not delete or rename this file — removing it will break the logo on every page.

Fredoka One

Used for buttons, navigation labels, tags, UI elements, and section headers. It gives the site its friendly, rounded feel. Loaded automatically from Google Fonts — requires internet to display correctly.

Nunito

The everyday reading font for body text, descriptions, paragraphs, and form inputs. Clean and easy to read at any size. Also loaded from Google Fonts.

Pacifico

Acts as a fallback for Genty. If the GentyDemo-Regular.ttf file is missing or fails to load, Pacifico will appear in its place for the logo. Loaded from Google Fonts.

Playfair Display

Used only in the tarpaulin / opening-soon print page (treenook-tarpaulin.html) for decorative headline text. Not used anywhere else on the main website. Loaded from Google Fonts.

Important: All Google Fonts (Fredoka One, Nunito, Pacifico, Playfair Display) require an active internet connection. If the website is opened offline, these fonts will fall back to the browser's default system font. Only Genty works offline since it is stored in the project folder.
10. POS System

Live URL

The Tree Nook POS is a web-based system accessible from any device with internet and Chrome:

https://treenook-n9sw2svn3-tree-nook-cafe.vercel.app

Works on phones, tablets, laptops, and Android POS terminals. No app installation needed.

Install as App (Android POS Terminal)

  1. Open Chrome on the terminal
  2. Go to the URL above
  3. Tap the 3-dot menu → "Add to Home Screen"
  4. It launches full-screen like a native app

Staff Roles

Role Access
Super Admin / Admin Full access — POS, admin panel, reports, employees
Manager POS + admin panel + reports
Cashier POS terminal only
Kitchen Staff Kitchen display only

Key Pages

Page What it does
/pos Main cashier screen — take orders, assign tables, apply discounts, process payment
/kitchen Kitchen display — shows incoming orders in real-time with table number
/tables Table management — floor plan grid, table status, today's orders per table
/dashboard Financial overview — revenue, COGS, profit, ingredient cost breakdown
/products Menu products — manage items, variants, recipe ingredients, pricing
/inventory Ingredient stock — cost per unit auto-updates product cost prices in real-time
/employees Staff management — clock in/out, payroll, payslips, per-employee access permissions
/reports Sales analytics, revenue charts, top products

Key Features

  • Table Orders: Assign any dine-in order to a table at the POS. The /tables page shows every table's status and all orders placed at that table today.
  • Real-time Cost of Goods (COGS): Dashboard → Financial calculates COGS directly from live ingredient costs — always accurate, no manual updates needed.
  • Auto Cost Price: On Products → Edit Product, the Cost Price field is auto-filled from the ingredient recipe and updates instantly whenever ingredient costs change in Inventory.
  • Access Permissions: Each employee can be given granular page access — POS, Kitchen, Tables, Dashboard, Products, Inventory, Employees, Reports, and more. Set these under Employees → Edit → Access Permissions.
  • Payroll & Payslips: Track staff hours via clock-in/out. Generate and download payslips directly from the Employees page.
  • Loyalty Program: Customers earn points per peso spent. Tier upgrades, streak bonuses, and redeemable rewards managed under /loyalty.
  • Inventory Auto-deduction: When an order is completed, ingredient stock is automatically reduced based on the product recipe.
  • Kitchen Display System: Orders appear on the kitchen screen immediately after payment, with the table number shown for dine-in orders.
Note: Employee accounts are created in the admin panel under Employees → Add Employee. Each staff member logs in at the POS URL using their email and password.