# Admin Panel Setup

The React frontend ship with a basic administrator UI. Follow these steps to integrate it with your existing backend.

## Available Pages

* **/admin/login** – login form
* **/admin** – dashboard (protected)

The implementation is in:

* `src/contexts/AuthProvider.jsx` – authentication context using `localStorage` and JWTs
* `src/components/RequireAdmin.jsx` – wrapper that redirects unauthorized users
* `src/pages/AdminLogin.jsx` and `src/pages/AdminDashboard.jsx`
* Header links update and logout logic are in `src/components/Header.jsx`.

## Backend Requirements

1. **Login endpoint**: POST `/api/login` (or adjust the URL) expects JSON body with `username` and `password` and returns `{ token, user }` where `user.role` is `'admin'` for admin accounts.
2. **Protected API**: any `/api/admin/...` route must check the token in the `Authorization: Bearer <token>` header and reject non-admins.

Example response from login:

```json
{
  "token": "eyJhbGciOiJI...",
  "user": { "id": 42, "name": "Alice", "role": "admin" }
}
```

## Extending the Frontend

* To add another admin page just create a new component under `src/pages` and add a route guarded with `<RequireAdmin>` in `App.jsx`.
* Use the stored `token` from `useAuth()` to make authorized fetch calls to your backend.
* The `logout()` function clears state and localStorage.

## Running Locally

Leave your backend running separately. In the frontend project root:

```bash
npm install   # if you haven't already
npm run dev
```

Adjust the fetch URLs (e.g. add a full host) if your backend is served from a different origin. You can also configure a proxy in `vite.config.js`.

## Sample backend (included)

A simple example backend is provided in the `backend/` directory to help you
get started. It uses Node, Express, SQLite and JWTs. You can run it alongside
your own server or adapt the code for production.

### quick start

```bash
cd backend
npm install            # install dependencies
node server.js         # or npm run start
```

The first time it runs it will create `backend/db.sqlite` and insert a default
admin user (`username: admin`, password: `admin123`). **Change that password
immediately** by editing the database or modifying the initialization logic.

Endpoints defined:

* `POST /api/login` – expects `{username,password}`; responds with `{token,user}`.
* `GET /api/admin/data` – returns a protected JSON object.
* CRUD operations under `/api/admin/items` as a demonstration of content
  management.

Feel free to inspect `backend/server.js` and modify it however you need. The
frontend is already configured to hit these routes at the same origin; if you
run the backend on a different port or host, adjust the `fetch` URLs or add a
proxy in `vite.config.js`.

## Notes

* Non-admin users are redirected to `/` if they try to access `/admin`.
* You can style the admin UI however you like; it's just plain React + Bootstrap now.

---
