# NanoFox Dashboard — Cloud Sync Setup (Hostinger)

This turns your dashboard from "saved only in this browser" into "saved on
your own Hostinger hosting", so you can open it from your phone, laptop,
anywhere — and it's all the same data.

How it works: `dashboard.html` runs in the browser like before, but instead
of `localStorage` it talks to a small PHP file (`api/api.php`) which reads
and writes one row in a MySQL database on your hosting. Everything is your
own — no third-party service involved.

## What you got

```
dashboard.html          <- the dashboard itself (upload anywhere on your site)
api/
  api.php               <- the backend endpoint the dashboard talks to
  config.php             <- your DB credentials + secret key (edit this)
  schema.sql             <- run once in phpMyAdmin to create the table
```

## Step 1 — Create a MySQL database

1. Log in to **hPanel** (Hostinger's control panel).
2. Go to **Databases → MySQL Databases**.
3. Create a new database (note the **database name**), a **database user**,
   and a **password**. Hostinger will show something like:
   - Database: `u123456789_nanofox`
   - User: `u123456789_admin`
   - Host: `localhost`
4. Keep this tab open — you'll need these three values in Step 3.

## Step 2 — Create the table

1. In hPanel, open **phpMyAdmin** for that database.
2. Click the **SQL** tab.
3. Open `api/schema.sql` from this download, copy its contents, paste into
   the SQL box, and click **Go**.
4. You should now see a table called `app_state` with one row in it.

## Step 3 — Configure the backend

1. Open `api/config.php` in any text editor.
2. Fill in:
   - `DB_NAME` → your database name from Step 1
   - `DB_USER` → your database user from Step 1
   - `DB_PASS` → your database password from Step 1
   - `API_KEY` → make up a long random string (this is the "password" the
     dashboard uses to talk to the API — treat it like a password, don't
     share it publicly). 20+ random characters is plenty, e.g.
     `f8Kq2mZ...` — anything long and unguessable works.
3. Save the file.

## Step 4 — Upload to Hostinger

1. Open **hPanel → File Manager** (or use FTP).
2. Go into `public_html` (or a subfolder if you want the dashboard at a
   specific path, e.g. `public_html/business/`).
3. Upload the whole `api/` folder there (keep `api.php` and `config.php`
   together inside it).
4. Upload `dashboard.html` into the same folder.

Your API address will then be something like:

```
https://yourdomain.com/api/api.php
```

or, if you put things in a subfolder:

```
https://yourdomain.com/business/api/api.php
```

## Step 5 — Open the dashboard

1. Visit `https://yourdomain.com/dashboard.html` (or wherever you uploaded
   it) in your browser.
2. It'll show a **"Connect your dashboard"** screen the first time.
3. Enter:
   - **API URL**: the address from Step 4 (must be the full `.../api.php`
     path)
   - **API Key**: the exact value you put in `API_KEY` in `config.php`
4. Click **Connect**. From then on, that browser remembers the connection
   and loads your live data automatically.
5. Do the same one-time setup on any other device (phone, another laptop)
   — same URL, same key — and they'll all read and write the same data.

## Notes

- Only the connection details (URL + key) are stored in each browser —
  your actual business data lives in the MySQL database on your hosting.
- If two devices save at almost the same moment, the last save wins (there's
  no merge). For a single-person dashboard this is rarely an issue.
- Use **Export JSON / Export Excel / Export PDF** in the Data Tools section
  any time you want a local backup file — that still works exactly as before.
- If the dashboard ever shows "Could not connect", double-check:
  - The API URL is reachable (open it directly in a browser — a GET
    request without the key will show `{"error":"Invalid or missing API key"}`,
    which means the file itself is working).
  - `config.php` has the correct DB credentials.
  - The API key you typed into the dashboard exactly matches `API_KEY` in
    `config.php`.
- To reconnect or point the dashboard at a different server later, open
  **Data Tools → ⚙️ Change API connection**.
- Once everything is working, you can tighten security by changing
  `ALLOWED_ORIGIN` in `config.php` from `'*'` to your exact site URL,
  e.g. `'https://yourdomain.com'`.