# Installing Nowills PMS on cPanel

The dashboard is **pure HTML, CSS and JavaScript**. There is no Node.js runtime,
no database, no PHP and no build step on the server. It is the easiest class of
application to host: you copy files into a folder and you are finished.

Everything runs in the browser, so it works on the cheapest shared hosting plan.

---

## What you upload

Run this once on your machine to generate the upload package:

```bash
node scripts/build-cpanel.mjs
```

It produces:

| Output | Purpose |
| --- | --- |
| `nowills-pms-cpanel.zip` | ~1.9 MB — upload this one file |
| `cpanel-build/` | The same files unzipped, if you prefer FTP |

The package contains:

| File | Size | Role |
| --- | --- | --- |
| `index.html` | 6 KB | The dashboard document |
| `nowills.css` | 41 KB | Design system — glassmorphism, dark/light, animations |
| `nowills-data.js` | 53 KB | Property engine, all reservation operations |
| `nowills-app.js` | 98 KB | Rendering, drag & drop, filters, interactions |
| `nowills-ai.js` | 14 KB | AI reservation assistant |
| `nowills-charts.js` | 7 KB | SVG chart library |
| `sw.js` | 2 KB | Offline service worker |
| `manifest.webmanifest` | 0.4 KB | PWA manifest (installable) |
| `icon.svg` | 0.4 KB | App icon |
| `rooms/` | 1.8 MB | Seven room photographs |
| `.htaccess` | 2 KB | Compression, caching, security headers |

---

## Method 1 — File Manager (recommended, ~2 minutes)

1. Log in to cPanel.
2. Open **Files → File Manager**.
3. Navigate into **`public_html`**.
4. Click **Upload**, choose `nowills-pms-cpanel.zip`, wait for 100%.
5. Go back to `public_html`, **right-click the zip → Extract**, confirm.
6. Delete the zip file (it is no longer needed).
7. Visit your domain — the dashboard loads.

> **Important:** make sure `index.html` sits directly inside `public_html`,
> not inside a nested `cpanel-build` folder. If cPanel created a subfolder
> during extraction, open it, select all files, and use **Move** to relocate
> them up one level into `public_html`.

## Method 2 — FTP / FileZilla

1. Connect with your cPanel FTP credentials (host, username, password, port 21).
2. Open the remote `public_html` directory.
3. Drag the **contents** of `cpanel-build/` into it — not the folder itself.
4. Ensure hidden files are visible so `.htaccess` transfers
   (FileZilla: *Server → Force showing hidden files*).

---

## Installing in a subfolder

To serve the dashboard at `yourhotel.com/pms` instead of the domain root:

1. In `public_html`, click **+ Folder** and create `pms`.
2. Upload and extract the zip inside that folder.

Every path in the application is relative, so it works at any depth with no
edits. This is useful when your marketing website already occupies the root.

---

## Enable HTTPS (do this)

The offline/installable PWA features require a secure origin, and guest data
should never travel unencrypted.

1. cPanel → **Security → SSL/TLS Status**.
2. Select your domain → **Run AutoSSL**. Wait for the certificate to issue.
3. Edit `.htaccess` in `public_html` and uncomment the HTTPS block:

```apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTPS} !=on
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
```

---

## Restricting access to staff

The dashboard has no login screen, so anyone with the URL can open it. On a
public domain you should protect it.

**Option A — cPanel Directory Privacy (simplest)**

1. cPanel → **Files → Directory Privacy**.
2. Select the folder holding the dashboard.
3. Tick **Password protect this directory**, name it, **Save**.
4. Create a username and password for each staff member.

Apache will now demand credentials before serving any file.

**Option B — IP allow-list** (front-desk terminals on a fixed office IP).
Add to `.htaccess`:

```apache
<RequireAny>
  Require ip 102.176.0.0/16
  Require ip 41.66.12.34
</RequireAny>
```

---

## Updating later

Re-run `node scripts/build-cpanel.mjs`, then upload and extract the new zip,
overwriting the old files. Because `.htaccess` sends `no-cache` for HTML and
`sw.js`, staff browsers pick up the new version on their next refresh — no
cache-clearing instructions required.

---

## Troubleshooting

| Symptom | Cause and fix |
| --- | --- |
| Blank white page | `index.html` is in a nested folder. Move all files directly into `public_html`. |
| Page loads but unstyled | `nowills.css` did not upload, or file permissions are wrong. Set files to `644` and folders to `755` via File Manager → Permissions. |
| Room photos missing | The `rooms/` folder was not extracted. Re-upload it, preserving the folder name. |
| "Add to Home Screen" absent | HTTPS is not active. Run AutoSSL and enable the redirect. |
| Changes not appearing | Hard-refresh with `Ctrl/Cmd + Shift + R`, or bump `CACHE = "nowills-pms-v3"` to `v4` in `sw.js`. |
| 403 Forbidden | Permissions. Folders `755`, files `644`. |

---

## What this deployment does *not* include

Be aware of the trade-off you are accepting with a static install:

- **Data is per-browser.** The property, reservations and every change live in
  the visitor's browser session, generated from a fixed seed. Two staff members
  on two computers see their own independent copies, and changes are not shared.
- **Nothing persists to a server.** A hard refresh regenerates the seeded data.

This is ideal for demonstrations, training, tender presentations, offline
showcases and UI sign-off. To run a real property with shared live data you
need a server component — a database plus an API — at which point you would
deploy the Next.js version to a Node host (cPanel's *Setup Node.js App*,
or a platform such as Vercel or Railway) rather than as static files.