# PromoGest — Full Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Build a complete PWA (Progressive Web App) for managing promotional plans from 3 food suppliers, with Excel import, alias normalization, interactive calendar, and PHP JSON backend.

**Architecture:** Single-page app served by Apache/PHP, with all Excel parsing done client-side via SheetJS. PHP provides a REST JSON API that reads/writes flat JSON files on disk (no database). Auth uses PHP sessions + HttpOnly "remember me" cookies. The frontend is vanilla JS ES6+ with Bootstrap 5.3 and no build step.

**Tech Stack:** HTML5, Bootstrap 5.3 (CDN), Vanilla JS ES6+, SheetJS (xlsx.full.min.js), PHP 8.1+, Chart.js (CDN), Apache + .htaccess

**Deploy target:** `/Users/paolo/Server/Siti Web/_private/valentina/promogest/` → served as `http://localhost/valentina/promogest/`

---

## Conventions

- All PHP files use `header('Content-Type: application/json')` and `exit` at the end.
- All API responses: `{ "success": true, "data": ... }` or `{ "success": false, "error": "message" }`.
- JSON files are written with `flock()` for concurrency safety.
- JS modules are plain `<script>` tags (no bundler). Global state lives in `window.App = {}`.
- Bootstrap classes preferred; custom CSS only when Bootstrap can't do it.

---

## PHASE 1 — Core MVP

---

### Task 1: Project Scaffold

**Files:**
- Create: `promogest/`  (root directory)
- Create: `promogest/.htaccess`
- Create: `promogest/data/.htaccess`
- Create: `promogest/favicon.ico` (placeholder — 1x1 transparent)
- Create: `promogest/icons/icon-192.png` (placeholder)
- Create: `promogest/icons/icon-512.png` (placeholder)

**Step 1: Create directory structure**

```bash
cd "/Users/paolo/Server/Siti Web/_private/valentina"
mkdir -p promogest/{css,js,lib,api,data,icons,docs}
```

**Step 2: Create root .htaccess**

`promogest/.htaccess`:
```apache
Options -Indexes
RewriteEngine On
# Send all non-file, non-dir requests to index.html (SPA)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/api/
RewriteRule ^(.*)$ index.html [L]
```

**Step 3: Create data/.htaccess** (block direct JSON access)

`promogest/data/.htaccess`:
```apache
<Files "*.json">
    Require all denied
</Files>
```

**Step 4: Create placeholder favicon**

```bash
# Create minimal 1x1 ICO (base64 encoded transparent icon)
php -r "file_put_contents('promogest/favicon.ico', base64_decode('AAABAAEAAQEAAAEAGAAoAAAAFgAAACgAAAABAAAAAgAAAAEAGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=='));"
```

**Step 5: Download SheetJS**

```bash
curl -L "https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js" \
  -o promogest/lib/xlsx.full.min.js
```

**Step 6: Verify structure**

```bash
find promogest/ -type f | sort
```
Expected: `.htaccess`, `data/.htaccess`, `favicon.ico`, `lib/xlsx.full.min.js`

---

### Task 2: Seed Data Files

**Files:**
- Create: `promogest/data/users.json`
- Create: `promogest/data/companies.json`
- Create: `promogest/data/aliases.json`
- Create: `promogest/data/events.json`

**Step 1: Create users.json**

```bash
php -r "
\$hash = password_hash('valentina', PASSWORD_BCRYPT);
\$data = ['users' => [['id'=>'u1','username'=>'valentina','password_hash'=>\$hash,'remember_tokens'=>[],'created_at'=>date('c')]]];
file_put_contents('promogest/data/users.json', json_encode(\$data, JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE));
echo 'users.json created';
"
```

**Step 2: Create companies.json**

`promogest/data/companies.json`:
```json
{
  "companies": [
    {
      "id": "caseifici_gt",
      "name": "Caseifici GT",
      "color": "#2196F3",
      "mapping": {
        "sellout_start": 9,
        "sellout_end": 10,
        "insegna": 3,
        "product": 6,
        "extra_info": 13,
        "extra_info_label": "Meccanica",
        "header_row": 0
      },
      "last_import": null
    },
    {
      "id": "salumifici_gt",
      "name": "Salumifici GT",
      "color": "#4CAF50",
      "mapping": {
        "sellout_start": 12,
        "sellout_end": 13,
        "insegna": 7,
        "product": 15,
        "extra_info": 8,
        "extra_info_label": "Tema",
        "header_row": 0
      },
      "last_import": null
    },
    {
      "id": "parmacotto",
      "name": "Parmacotto",
      "color": "#FF9800",
      "mapping": {
        "sellout_start": 7,
        "sellout_end": 8,
        "insegna": 1,
        "product": 4,
        "extra_info": 11,
        "extra_info_label": "Volantino",
        "header_row": 0
      },
      "last_import": null
    }
  ]
}
```

**Step 3: Create aliases.json**

`promogest/data/aliases.json`:
```json
{
  "aliases": [
    { "id": "a1",  "canonical_name": "DIMAR",              "variants": ["DIMAR SPA", "DIMAR"] },
    { "id": "a2",  "canonical_name": "ALFI",               "variants": ["ALFI SRL", "ALFI"] },
    { "id": "a3",  "canonical_name": "BENNET",             "variants": ["BENNET SPA", "BENNET BRAND", "BENNET"] },
    { "id": "a4",  "canonical_name": "ESSELUNGA",          "variants": ["ESSELUNGA SPA", "ESSELUNGA"] },
    { "id": "a5",  "canonical_name": "MIGROSS",            "variants": ["MIGROSS SPA", "MIGROSS SpA"] },
    { "id": "a6",  "canonical_name": "UNICOOP FIRENZE",    "variants": ["UNICOOP FIRENZE"] },
    { "id": "a7",  "canonical_name": "L'ABBONDANZA",       "variants": ["L'ABBONDANZA SRL", "L'ABBONDANZA"] },
    { "id": "a8",  "canonical_name": "TATO' PARIDE",       "variants": ["TATO' PARIDE SPA", "TATO' PARIDE"] },
    { "id": "a9",  "canonical_name": "UNICOMM",            "variants": ["UNICOMM SRL", "UNICOMM"] },
    { "id": "a10", "canonical_name": "RETAILPRO",          "variants": ["RETAILPRO SPA", "RETAILPRO"] },
    { "id": "a11", "canonical_name": "ASPIAG",             "variants": ["ASPIAG SERVICE S.R.L.", "ASPIAG SERVICE SRL", "ASPIAG CEDI"] },
    { "id": "a12", "canonical_name": "CE.DI SIGMA CAMPANIA", "variants": ["CE.DI.SIGMA CAMPANIA S.p.A.", "CE.DI SIGMA CAMPANIA SPA"] },
    { "id": "a13", "canonical_name": "CE.DI MARCHE",       "variants": ["CE.DI MARCHE SOC. COOPERATIVA", "CE.DI.MARCHE SOCIETA' COOPERATIVA"] },
    { "id": "a14", "canonical_name": "MULTICEDI",          "variants": ["MULTICEDI S.R.L.", "MULTICEDI SRL"] },
    { "id": "a15", "canonical_name": "MAIORA",             "variants": ["MAIORA SPA", "MAIORA SRL"] }
  ]
}
```

**Step 4: Create events.json**

`promogest/data/events.json`:
```json
{
  "events": []
}
```

**Step 5: Set permissions**

```bash
chmod 664 promogest/data/*.json
```

---

### Task 3: PHP Shared Utilities

**Files:**
- Create: `promogest/api/utils.php`

**Step 1: Write utils.php**

`promogest/api/utils.php`:
```php
<?php
// Shared utilities for all API endpoints

define('DATA_DIR', __DIR__ . '/../data/');

function readJson(string $file): array {
    $path = DATA_DIR . $file;
    if (!file_exists($path)) return [];
    $content = file_get_contents($path);
    return json_decode($content, true) ?? [];
}

function writeJson(string $file, array $data): void {
    $path = DATA_DIR . $file;
    $fp = fopen($path, 'w');
    if (!$fp) throw new RuntimeException("Cannot open $file for writing");
    flock($fp, LOCK_EX);
    fwrite($fp, json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
    flock($fp, LOCK_UN);
    fclose($fp);
}

function jsonResponse(bool $success, mixed $data = null, string $error = ''): never {
    header('Content-Type: application/json; charset=utf-8');
    if ($success) {
        echo json_encode(['success' => true, 'data' => $data], JSON_UNESCAPED_UNICODE);
    } else {
        http_response_code(400);
        echo json_encode(['success' => false, 'error' => $error], JSON_UNESCAPED_UNICODE);
    }
    exit;
}

function requireAuth(): array {
    session_start();
    // Check session
    if (!empty($_SESSION['user_id'])) {
        $users = readJson('users.json');
        foreach ($users['users'] as $u) {
            if ($u['id'] === $_SESSION['user_id']) return $u;
        }
    }
    // Check remember-me cookie
    if (!empty($_COOKIE['remember_token'])) {
        $token = $_COOKIE['remember_token'];
        $users = readJson('users.json');
        foreach ($users['users'] as $u) {
            if (!empty($u['remember_tokens'])) {
                foreach ($u['remember_tokens'] as $rt) {
                    if (hash_equals($rt['token'], hash('sha256', $token)) && $rt['expires'] > time()) {
                        $_SESSION['user_id'] = $u['id'];
                        return $u;
                    }
                }
            }
        }
    }
    header('Content-Type: application/json; charset=utf-8');
    http_response_code(401);
    echo json_encode(['success' => false, 'error' => 'Unauthorized']);
    exit;
}

function getBody(): array {
    $body = file_get_contents('php://input');
    return json_decode($body, true) ?? [];
}

function generateId(string $prefix = ''): string {
    return $prefix . bin2hex(random_bytes(8));
}
```

**Step 2: Verify PHP syntax**

```bash
php -l promogest/api/utils.php
```
Expected: `No syntax errors detected`

---

### Task 4: PHP Auth API

**Files:**
- Create: `promogest/api/auth.php`

**Step 1: Write auth.php**

`promogest/api/auth.php`:
```php
<?php
require_once __DIR__ . '/utils.php';

header('Content-Type: application/json; charset=utf-8');
$action = $_GET['action'] ?? '';

match($action) {
    'login'           => handleLogin(),
    'logout'          => handleLogout(),
    'check'           => handleCheck(),
    'change_password' => handleChangePassword(),
    default           => jsonResponse(false, null, 'Unknown action'),
};

function handleLogin(): never {
    session_start();
    $body = getBody();
    $username = trim($body['username'] ?? '');
    $password = $body['password'] ?? '';
    $remember = !empty($body['remember']);

    $users = readJson('users.json');
    $found = null;
    foreach ($users['users'] as $u) {
        if ($u['username'] === $username) { $found = $u; break; }
    }
    if (!$found || !password_verify($password, $found['password_hash'])) {
        jsonResponse(false, null, 'Credenziali non valide');
    }
    session_regenerate_id(true);
    $_SESSION['user_id'] = $found['id'];

    if ($remember) {
        $token = bin2hex(random_bytes(32));
        $hash  = hash('sha256', $token);
        $expires = time() + 30 * 86400;
        // Store hashed token
        foreach ($users['users'] as &$u) {
            if ($u['id'] === $found['id']) {
                $u['remember_tokens'][] = ['token' => $hash, 'expires' => $expires];
                break;
            }
        }
        writeJson('users.json', $users);
        setcookie('remember_token', $token, [
            'expires'  => $expires,
            'path'     => '/',
            'httponly' => true,
            'samesite' => 'Strict',
        ]);
    }
    jsonResponse(true, ['username' => $found['username']]);
}

function handleLogout(): never {
    session_start();
    // Remove remember token if present
    if (!empty($_COOKIE['remember_token'])) {
        $token = $_COOKIE['remember_token'];
        $hash  = hash('sha256', $token);
        $users = readJson('users.json');
        foreach ($users['users'] as &$u) {
            $u['remember_tokens'] = array_values(array_filter(
                $u['remember_tokens'] ?? [],
                fn($rt) => $rt['token'] !== $hash
            ));
        }
        writeJson('users.json', $users);
        setcookie('remember_token', '', ['expires' => time() - 1, 'path' => '/']);
    }
    session_destroy();
    jsonResponse(true, null);
}

function handleCheck(): never {
    $user = requireAuth();
    jsonResponse(true, ['username' => $user['username']]);
}

function handleChangePassword(): never {
    $user = requireAuth();
    $body = getBody();
    $old = $body['old_password'] ?? '';
    $new = $body['new_password'] ?? '';

    if (strlen($new) < 6) jsonResponse(false, null, 'Password troppo corta (min 6 caratteri)');
    if (!password_verify($old, $user['password_hash'])) jsonResponse(false, null, 'Password attuale errata');

    $users = readJson('users.json');
    foreach ($users['users'] as &$u) {
        if ($u['id'] === $user['id']) {
            $u['password_hash'] = password_hash($new, PASSWORD_BCRYPT);
            break;
        }
    }
    writeJson('users.json', $users);
    jsonResponse(true, null);
}
```

**Step 2: Verify PHP syntax**

```bash
php -l promogest/api/auth.php
```
Expected: `No syntax errors detected`

---

### Task 5: PHP Events API

**Files:**
- Create: `promogest/api/events.php`

**Step 1: Write events.php**

`promogest/api/events.php`:
```php
<?php
require_once __DIR__ . '/utils.php';
requireAuth();

header('Content-Type: application/json; charset=utf-8');
$method = $_SERVER['REQUEST_METHOD'];
$action = $_GET['action'] ?? '';

if ($method === 'GET') {
    $data = readJson('events.json');
    jsonResponse(true, $data['events'] ?? []);
}

if ($method === 'POST' && $action === 'import') {
    $body = getBody();
    $company_id = $body['company_id'] ?? '';
    $newEvents  = $body['events'] ?? [];

    if (empty($company_id)) jsonResponse(false, null, 'company_id mancante');

    $data = readJson('events.json');
    // Remove all existing events for this company
    $data['events'] = array_values(array_filter(
        $data['events'] ?? [],
        fn($e) => $e['company_id'] !== $company_id
    ));
    // Assign IDs and append
    foreach ($newEvents as $evt) {
        $evt['id']          = generateId('evt_');
        $evt['company_id']  = $company_id;
        $evt['imported_at'] = date('c');
        $data['events'][]   = $evt;
    }
    writeJson('events.json', $data);

    // Update last_import in companies.json
    $companies = readJson('companies.json');
    foreach ($companies['companies'] as &$c) {
        if ($c['id'] === $company_id) {
            $c['last_import'] = date('c');
            break;
        }
    }
    writeJson('companies.json', $companies);

    jsonResponse(true, ['count' => count($newEvents)]);
}

if ($method === 'DELETE' && $action === 'clear') {
    $body = getBody();
    $company_id = $body['company_id'] ?? '';
    if (empty($company_id)) jsonResponse(false, null, 'company_id mancante');

    $data = readJson('events.json');
    $before = count($data['events'] ?? []);
    $data['events'] = array_values(array_filter(
        $data['events'] ?? [],
        fn($e) => $e['company_id'] !== $company_id
    ));
    writeJson('events.json', $data);
    jsonResponse(true, ['deleted' => $before - count($data['events'])]);
}

jsonResponse(false, null, 'Method not allowed');
```

**Step 2: Verify syntax**

```bash
php -l promogest/api/events.php
```

---

### Task 6: PHP Companies API

**Files:**
- Create: `promogest/api/companies.php`

**Step 1: Write companies.php**

`promogest/api/companies.php`:
```php
<?php
require_once __DIR__ . '/utils.php';
requireAuth();

header('Content-Type: application/json; charset=utf-8');
$method = $_SERVER['REQUEST_METHOD'];

if ($method === 'GET') {
    $data = readJson('companies.json');
    jsonResponse(true, $data['companies'] ?? []);
}

if ($method === 'PUT') {
    $body    = getBody();
    $updated = $body['company'] ?? null;
    if (!$updated || empty($updated['id'])) jsonResponse(false, null, 'company non valida');

    $data = readJson('companies.json');
    $found = false;
    foreach ($data['companies'] as &$c) {
        if ($c['id'] === $updated['id']) {
            // Update only allowed fields
            $c['name']    = $updated['name']    ?? $c['name'];
            $c['color']   = $updated['color']   ?? $c['color'];
            $c['mapping'] = $updated['mapping'] ?? $c['mapping'];
            $found = true;
            break;
        }
    }
    if (!$found) jsonResponse(false, null, 'Azienda non trovata');
    writeJson('companies.json', $data);
    jsonResponse(true, null);
}

if ($method === 'POST') {
    $body    = getBody();
    $company = $body['company'] ?? null;
    if (!$company || empty($company['name'])) jsonResponse(false, null, 'name mancante');

    $data = readJson('companies.json');
    $company['id']          = generateId('c_');
    $company['last_import'] = null;
    $company['mapping']     = $company['mapping'] ?? [
        'sellout_start' => 0, 'sellout_end' => 1,
        'insegna' => 2, 'product' => 3,
        'extra_info' => 4, 'extra_info_label' => 'Extra',
        'header_row' => 0,
    ];
    $data['companies'][] = $company;
    writeJson('companies.json', $data);
    jsonResponse(true, $company);
}

jsonResponse(false, null, 'Method not allowed');
```

**Step 2: Verify syntax**

```bash
php -l promogest/api/companies.php
```

---

### Task 7: PHP Aliases API

**Files:**
- Create: `promogest/api/aliases.php`

**Step 1: Write aliases.php**

`promogest/api/aliases.php`:
```php
<?php
require_once __DIR__ . '/utils.php';
requireAuth();

header('Content-Type: application/json; charset=utf-8');
$method = $_SERVER['REQUEST_METHOD'];

if ($method === 'GET') {
    $data = readJson('aliases.json');
    jsonResponse(true, $data['aliases'] ?? []);
}

if ($method === 'POST') {
    $body  = getBody();
    $alias = $body['alias'] ?? null;
    if (!$alias || empty($alias['canonical_name'])) jsonResponse(false, null, 'canonical_name mancante');

    $data = readJson('aliases.json');
    $alias['id']       = generateId('a_');
    $alias['variants'] = array_map('trim', $alias['variants'] ?? []);
    $data['aliases'][] = $alias;
    writeJson('aliases.json', $data);
    jsonResponse(true, $alias);
}

if ($method === 'PUT') {
    $body    = getBody();
    $updated = $body['alias'] ?? null;
    if (!$updated || empty($updated['id'])) jsonResponse(false, null, 'id mancante');

    $data  = readJson('aliases.json');
    $found = false;
    foreach ($data['aliases'] as &$a) {
        if ($a['id'] === $updated['id']) {
            $a['canonical_name'] = $updated['canonical_name'] ?? $a['canonical_name'];
            $a['variants']       = array_map('trim', $updated['variants'] ?? $a['variants']);
            $found = true;
            break;
        }
    }
    if (!$found) jsonResponse(false, null, 'Alias non trovato');
    writeJson('aliases.json', $data);
    jsonResponse(true, null);
}

if ($method === 'DELETE') {
    $id = $_GET['id'] ?? '';
    if (empty($id)) jsonResponse(false, null, 'id mancante');

    $data  = readJson('aliases.json');
    $before = count($data['aliases']);
    $data['aliases'] = array_values(array_filter(
        $data['aliases'], fn($a) => $a['id'] !== $id
    ));
    if (count($data['aliases']) === $before) jsonResponse(false, null, 'Alias non trovato');
    writeJson('aliases.json', $data);
    jsonResponse(true, null);
}

jsonResponse(false, null, 'Method not allowed');
```

**Step 2: Verify syntax**

```bash
php -l promogest/api/aliases.php
```

---

### Task 8: PHP Export/Import Backup API

**Files:**
- Create: `promogest/api/export.php`
- Create: `promogest/api/import-backup.php`

**Step 1: Write export.php**

`promogest/api/export.php`:
```php
<?php
require_once __DIR__ . '/utils.php';
requireAuth();

$backup = [
    'exported_at' => date('c'),
    'version'     => '1.0',
    'companies'   => readJson('companies.json'),
    'aliases'     => readJson('aliases.json'),
    'events'      => readJson('events.json'),
];

header('Content-Type: application/json; charset=utf-8');
header('Content-Disposition: attachment; filename="promogest-backup-' . date('Y-m-d') . '.json"');
echo json_encode($backup, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
exit;
```

**Step 2: Write import-backup.php**

`promogest/api/import-backup.php`:
```php
<?php
require_once __DIR__ . '/utils.php';
requireAuth();

header('Content-Type: application/json; charset=utf-8');
if ($_SERVER['REQUEST_METHOD'] !== 'POST') jsonResponse(false, null, 'POST only');

$body = getBody();
$data = $body['data'] ?? null;
if (!$data) jsonResponse(false, null, 'Dati mancanti');

if (!empty($data['companies'])) writeJson('companies.json', $data['companies']);
if (!empty($data['aliases']))   writeJson('aliases.json',   $data['aliases']);
if (!empty($data['events']))    writeJson('events.json',    $data['events']);

jsonResponse(true, null);
```

**Step 3: Verify syntax**

```bash
php -l promogest/api/export.php
php -l promogest/api/import-backup.php
```

---

### Task 9: CSS Custom Styles

**Files:**
- Create: `promogest/css/app.css`

**Step 1: Write app.css**

`promogest/css/app.css`:
```css
:root {
    --primary: #1976D2;
    --primary-dark: #1565C0;
    --bg: #f8f9fa;
}

body {
    background: var(--bg);
    padding-bottom: 80px; /* space for bottom nav */
    font-size: 15px;
}

/* ── TOP BAR ── */
#topbar {
    background: var(--primary);
    color: #fff;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
#topbar .app-name { font-weight: 700; font-size: 1.1rem; letter-spacing: .5px; }
#topbar .offline-badge { background: #f44336; border-radius: 4px; padding: 2px 8px; font-size: .75rem; }
#topbar .online-badge  { background: #4CAF50; border-radius: 4px; padding: 2px 8px; font-size: .75rem; display: none; }

/* ── BOTTOM NAV ── */
#bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
}
#bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px 6px;
    cursor: pointer;
    color: #757575;
    font-size: .7rem;
    border: none;
    background: none;
    transition: color .2s;
}
#bottom-nav .nav-item.active { color: var(--primary); }
#bottom-nav .nav-item svg, #bottom-nav .nav-item i { font-size: 1.4rem; margin-bottom: 2px; }

/* ── CALENDAR ── */
#calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e0e0e0;
}
.cal-day {
    background: #fff;
    min-height: 64px;
    padding: 4px;
    cursor: pointer;
    position: relative;
    transition: background .15s;
}
.cal-day:hover { background: #e3f2fd; }
.cal-day.today { background: #e8f5e9; }
.cal-day.other-month { background: #fafafa; color: #bbb; }
.cal-day .day-num { font-size: .8rem; font-weight: 600; margin-bottom: 2px; }
.cal-day .dot-row { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
.cal-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.cal-day .more-badge {
    font-size: .65rem;
    color: #757575;
    margin-top: 1px;
}
.cal-header-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    color: #555;
    padding: 4px 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}

/* ── EVENT CARDS ── */
.event-card {
    border-left: 4px solid;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.event-card .card-body { padding: 10px 12px; }
.event-card .insegna { font-weight: 700; font-size: 1rem; }
.event-card .date-range { color: #555; font-size: .85rem; }
.company-badge {
    display: inline-block;
    border-radius: 12px;
    padding: 2px 10px;
    font-size: .75rem;
    color: #fff;
    font-weight: 600;
}
.product-list { font-size: .85rem; color: #444; margin-top: 4px; }

/* ── IMPORT MODAL ── */
.import-step { display: none; }
.import-step.active { display: block; }
#dropzone {
    border: 2px dashed #90CAF9;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    color: #1976D2;
}
#dropzone.dragover { background: #e3f2fd; border-color: var(--primary); }
#dropzone input[type=file] { display: none; }

/* ── SETTINGS ── */
.mapping-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mapping-row label { width: 140px; font-size: .85rem; color: #555; flex-shrink: 0; }
.mapping-row input { width: 70px; }

/* ── ANALYTICS ── */
.stat-card {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.stat-card .stat-num { font-size: 2rem; font-weight: 700; color: var(--primary); }
.stat-card .stat-label { color: #555; font-size: .85rem; }

/* ── LOGIN ── */
#login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
}
#login-card {
    background: #fff;
    border-radius: 12px;
    padding: 36px 32px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
#login-card .logo { text-align: center; margin-bottom: 24px; }
#login-card .logo-text { font-size: 1.8rem; font-weight: 700; color: var(--primary); }

/* ── UTILITIES ── */
.spinner-overlay {
    position: fixed; inset: 0;
    background: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.page { display: none; }
.page.active { display: block; }

@media (min-width: 768px) {
    body { padding-bottom: 0; padding-top: 0; }
    #bottom-nav { display: none; }
    .desktop-nav { display: flex !important; }
    #calendar-grid { gap: 2px; }
    .cal-day { min-height: 90px; }
}
```

---

### Task 10: JS API Wrapper

**Files:**
- Create: `promogest/js/api.js`

**Step 1: Write api.js**

`promogest/js/api.js`:
```javascript
// Wrapper for all PHP API calls
const API = {
    _base: 'api/',

    async _fetch(url, opts = {}) {
        const res = await fetch(this._base + url, {
            headers: { 'Content-Type': 'application/json' },
            credentials: 'same-origin',
            ...opts,
        });
        const json = await res.json();
        if (!json.success) throw new Error(json.error || 'Errore API');
        return json.data;
    },

    // Auth
    login: (username, password, remember) =>
        API._fetch('auth.php?action=login', {
            method: 'POST',
            body: JSON.stringify({ username, password, remember }),
        }),

    logout: () => API._fetch('auth.php?action=logout', { method: 'POST' }),

    checkAuth: () => API._fetch('auth.php?action=check'),

    changePassword: (old_password, new_password) =>
        API._fetch('auth.php?action=change_password', {
            method: 'POST',
            body: JSON.stringify({ old_password, new_password }),
        }),

    // Events
    getEvents: () => API._fetch('events.php'),

    importEvents: (company_id, events) =>
        API._fetch('events.php?action=import', {
            method: 'POST',
            body: JSON.stringify({ company_id, events }),
        }),

    clearEvents: (company_id) =>
        API._fetch('events.php?action=clear', {
            method: 'DELETE',
            body: JSON.stringify({ company_id }),
        }),

    // Companies
    getCompanies: () => API._fetch('companies.php'),

    updateCompany: (company) =>
        API._fetch('companies.php', {
            method: 'PUT',
            body: JSON.stringify({ company }),
        }),

    addCompany: (company) =>
        API._fetch('companies.php', {
            method: 'POST',
            body: JSON.stringify({ company }),
        }),

    // Aliases
    getAliases: () => API._fetch('aliases.php'),

    addAlias: (alias) =>
        API._fetch('aliases.php', {
            method: 'POST',
            body: JSON.stringify({ alias }),
        }),

    updateAlias: (alias) =>
        API._fetch('aliases.php', {
            method: 'PUT',
            body: JSON.stringify({ alias }),
        }),

    deleteAlias: (id) =>
        API._fetch(`aliases.php?id=${encodeURIComponent(id)}`, { method: 'DELETE' }),

    // Backup
    exportBackup: () => {
        window.location.href = 'api/export.php';
    },

    importBackup: (data) =>
        API._fetch('import-backup.php', {
            method: 'POST',
            body: JSON.stringify({ data }),
        }),
};
```

---

### Task 11: JS Auth Module

**Files:**
- Create: `promogest/js/auth.js`

**Step 1: Write auth.js**

`promogest/js/auth.js`:
```javascript
const Auth = {
    async login(username, password, remember) {
        const data = await API.login(username, password, remember);
        App.user = data;
        return data;
    },

    async logout() {
        await API.logout();
        App.user = null;
        App.showLogin();
    },

    async check() {
        try {
            const data = await API.checkAuth();
            App.user = data;
            return true;
        } catch {
            return false;
        }
    },
};
```

---

### Task 12: JS Import Module

**Files:**
- Create: `promogest/js/import.js`

**Step 1: Write import.js**

`promogest/js/import.js`:
```javascript
const Import = {
    state: {
        company: null,
        parsedRows: [],
        validRows: [],
        discardedRows: [],
        groupedEvents: [],
        unmappedInsegne: [],
    },

    // ── ALIAS RESOLUTION ──────────────────────────────────────────
    resolveInsegna(raw) {
        const key = raw.trim().toUpperCase();
        for (const alias of App.aliases) {
            for (const v of alias.variants) {
                if (v.trim().toUpperCase() === key) return alias.canonical_name;
            }
        }
        return raw.trim();
    },

    // ── DATE PARSING ──────────────────────────────────────────────
    parseDate(val) {
        if (!val && val !== 0) return null;
        // JS Date object (SheetJS cellDates:true)
        if (val instanceof Date) {
            if (isNaN(val)) return null;
            return val.toISOString().slice(0, 10);
        }
        // Excel serial number
        if (typeof val === 'number') {
            const d = new Date(Math.round((val - 25569) * 86400 * 1000));
            if (isNaN(d)) return null;
            return d.toISOString().slice(0, 10);
        }
        // String
        if (typeof val === 'string') {
            // Try ISO or d/m/yyyy
            const s = val.trim();
            if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
            const m = s.match(/^(\d{1,2})[\/\-](\d{1,2})[\/\-](\d{4})$/);
            if (m) return `${m[3]}-${m[2].padStart(2,'0')}-${m[1].padStart(2,'0')}`;
        }
        return null;
    },

    // ── PARSE EXCEL FILE ─────────────────────────────────────────
    async parseFile(file, company) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                try {
                    const wb = XLSX.read(e.target.result, { type: 'array', cellDates: true });
                    const ws = wb.Sheets[wb.SheetNames[0]];
                    const allRows = XLSX.utils.sheet_to_json(ws, { header: 1, defval: '' });
                    const m = company.mapping;
                    const dataRows = allRows.slice((m.header_row ?? 0) + 1);

                    const valid = [], discarded = [];
                    for (let i = 0; i < dataRows.length; i++) {
                        const row = dataRows[i];
                        const startDate = this.parseDate(row[m.sellout_start]);
                        const endDate   = this.parseDate(row[m.sellout_end]);
                        const insegna   = String(row[m.insegna] ?? '').trim();
                        const product   = String(row[m.product]  ?? '').trim();

                        if (!startDate) { discarded.push({ row: i+2, reason: 'Data inizio mancante/invalida', raw: row }); continue; }
                        if (!endDate)   { discarded.push({ row: i+2, reason: 'Data fine mancante/invalida', raw: row }); continue; }
                        if (!insegna)   { discarded.push({ row: i+2, reason: 'Insegna vuota', raw: row }); continue; }
                        if (!product)   { discarded.push({ row: i+2, reason: 'Prodotto vuoto', raw: row }); continue; }

                        valid.push({
                            insegna_raw:   insegna,
                            insegna:       this.resolveInsegna(insegna),
                            sellout_start: startDate,
                            sellout_end:   endDate,
                            product,
                            extra_info: String(row[m.extra_info] ?? '').trim(),
                        });
                    }
                    resolve({ valid, discarded, total: dataRows.length });
                } catch (err) {
                    reject(err);
                }
            };
            reader.onerror = reject;
            reader.readAsArrayBuffer(file);
        });
    },

    // ── GROUP ROWS INTO EVENTS ────────────────────────────────────
    groupRows(validRows) {
        const groups = {};
        for (const row of validRows) {
            const key = `${row.insegna}|${row.sellout_start}|${row.sellout_end}`;
            if (!groups[key]) {
                groups[key] = {
                    insegna_raw:   row.insegna_raw,
                    insegna:       row.insegna,
                    sellout_start: row.sellout_start,
                    sellout_end:   row.sellout_end,
                    products: [],
                };
            }
            groups[key].products.push({ name: row.product, extra_info: row.extra_info });
        }
        return Object.values(groups);
    },

    // ── FIND UNMAPPED INSEGNE ─────────────────────────────────────
    findUnmapped(validRows) {
        const seen = new Set();
        const unmapped = [];
        for (const row of validRows) {
            if (row.insegna === row.insegna_raw.trim() && !seen.has(row.insegna)) {
                // Not resolved by alias
                let isAliasCanonical = App.aliases.some(a => a.canonical_name === row.insegna);
                if (!isAliasCanonical) { seen.add(row.insegna); unmapped.push(row.insegna); }
            }
        }
        return unmapped;
    },
};
```

---

### Task 13: JS Calendar Module

**Files:**
- Create: `promogest/js/calendar.js`

**Step 1: Write calendar.js**

`promogest/js/calendar.js`:
```javascript
const Calendar = {
    currentYear:  new Date().getFullYear(),
    currentMonth: new Date().getMonth(), // 0-based

    render() {
        this._renderHeader();
        this._renderGrid();
    },

    _renderHeader() {
        const months = ['Gennaio','Febbraio','Marzo','Aprile','Maggio','Giugno',
                        'Luglio','Agosto','Settembre','Ottobre','Novembre','Dicembre'];
        document.getElementById('cal-month-label').textContent =
            `${months[this.currentMonth]} ${this.currentYear}`;
    },

    _renderGrid() {
        const grid = document.getElementById('calendar-grid');
        grid.innerHTML = '';

        const y = this.currentYear, m = this.currentMonth;
        const firstDay = new Date(y, m, 1).getDay(); // 0=Sun
        const startOffset = (firstDay + 6) % 7; // Mon-first
        const daysInMonth = new Date(y, m + 1, 0).getDate();
        const today = new Date().toISOString().slice(0, 10);

        // Pre-index events by date
        const byDate = this._indexEventsByDate(y, m);

        // Blanks before month start
        for (let i = 0; i < startOffset; i++) {
            const blank = document.createElement('div');
            blank.className = 'cal-day other-month';
            // prev month days
            const prevLast = new Date(y, m, 0).getDate();
            blank.innerHTML = `<div class="day-num">${prevLast - startOffset + i + 1}</div>`;
            grid.appendChild(blank);
        }

        for (let d = 1; d <= daysInMonth; d++) {
            const dateStr = `${y}-${String(m+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
            const events  = byDate[dateStr] || [];
            const cell = document.createElement('div');
            cell.className = 'cal-day' + (dateStr === today ? ' today' : '');
            cell.dataset.date = dateStr;

            const dots = events.slice(0, 6).map(e => {
                const co = App.companies.find(c => c.id === e.company_id);
                return `<span class="cal-dot" style="background:${co?.color || '#999'}" title="${e.insegna}"></span>`;
            }).join('');
            const more = events.length > 6 ? `<div class="more-badge">+${events.length - 6}</div>` : '';

            cell.innerHTML = `<div class="day-num">${d}</div><div class="dot-row">${dots}</div>${more}`;
            cell.addEventListener('click', () => this.openDayModal(dateStr, events));
            grid.appendChild(cell);
        }
    },

    _indexEventsByDate(y, m) {
        const idx = {};
        const firstOfMonth = new Date(y, m, 1);
        const lastOfMonth  = new Date(y, m + 1, 0);

        for (const evt of App.events) {
            const start = new Date(evt.sellout_start);
            const end   = new Date(evt.sellout_end);
            if (end < firstOfMonth || start > lastOfMonth) continue;

            const cursor = new Date(Math.max(start, firstOfMonth));
            const until  = new Date(Math.min(end, lastOfMonth));
            while (cursor <= until) {
                const key = cursor.toISOString().slice(0, 10);
                if (!idx[key]) idx[key] = [];
                idx[key].push(evt);
                cursor.setDate(cursor.getDate() + 1);
            }
        }
        return idx;
    },

    openDayModal(dateStr, events) {
        const fmt = (s) => new Date(s + 'T00:00:00').toLocaleDateString('it-IT');
        const grouped = {};
        for (const e of events) {
            if (!grouped[e.insegna]) grouped[e.insegna] = [];
            grouped[e.insegna].push(e);
        }

        let html = `<h6 class="text-muted mb-3">${fmt(dateStr)}</h6>`;
        if (events.length === 0) { html += '<p class="text-muted">Nessun evento.</p>'; }

        for (const [insegna, evts] of Object.entries(grouped)) {
            html += `<div class="event-card mb-2" style="border-left-color:#1976D2">
                <div class="card-body">
                    <div class="insegna">${insegna}</div>`;
            for (const e of evts) {
                const co = App.companies.find(c => c.id === e.company_id);
                html += `<span class="company-badge mt-1" style="background:${co?.color||'#999'}">${co?.name||e.company_id}</span>
                    <div class="date-range">${fmt(e.sellout_start)} — ${fmt(e.sellout_end)}</div>
                    <div class="product-list">${e.products.slice(0,3).map(p=>
                        `<div>• ${p.name}${p.extra_info ? ` <small class="text-muted">[${p.extra_info}]</small>` : ''}</div>`
                    ).join('')}${e.products.length > 3 ? `<div class="text-muted">+${e.products.length - 3} altri prodotti</div>` : ''}</div>`;
            }
            html += `</div></div>`;
        }

        document.getElementById('day-modal-body').innerHTML = html;
        const modal = new bootstrap.Modal(document.getElementById('dayModal'));
        modal.show();
    },

    prevMonth() {
        this.currentMonth--;
        if (this.currentMonth < 0) { this.currentMonth = 11; this.currentYear--; }
        this.render();
    },

    nextMonth() {
        this.currentMonth++;
        if (this.currentMonth > 11) { this.currentMonth = 0; this.currentYear++; }
        this.render();
    },

    goToday() {
        this.currentYear  = new Date().getFullYear();
        this.currentMonth = new Date().getMonth();
        this.render();
    },
};
```

---

### Task 14: JS List Module

**Files:**
- Create: `promogest/js/list.js`

**Step 1: Write list.js**

`promogest/js/list.js`:
```javascript
const List = {
    filters: { companies: [], insegna: '', dateFrom: '', dateTo: '', product: '' },

    render() {
        this._renderFilters();
        this._renderList();
    },

    _renderFilters() {
        // Company checkboxes
        const container = document.getElementById('list-company-filters');
        if (!container) return;
        if (container.dataset.built) return; // build once
        container.dataset.built = '1';
        container.innerHTML = App.companies.map(c =>
            `<div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" id="lc_${c.id}"
                value="${c.id}" checked onchange="List._onFilterChange()">
              <label class="form-check-label" for="lc_${c.id}">
                <span class="company-badge" style="background:${c.color}">${c.name}</span>
              </label>
            </div>`
        ).join('');
        this.filters.companies = App.companies.map(c => c.id);
    },

    _onFilterChange() {
        const boxes = document.querySelectorAll('#list-company-filters input[type=checkbox]');
        this.filters.companies = [...boxes].filter(b => b.checked).map(b => b.value);
        this.filters.insegna   = document.getElementById('list-filter-insegna')?.value.trim() ?? '';
        this.filters.dateFrom  = document.getElementById('list-filter-from')?.value ?? '';
        this.filters.dateTo    = document.getElementById('list-filter-to')?.value ?? '';
        this.filters.product   = document.getElementById('list-filter-product')?.value.trim() ?? '';
        this._renderList();
    },

    _filtered() {
        return App.events.filter(e => {
            if (!this.filters.companies.includes(e.company_id)) return false;
            if (this.filters.insegna && !e.insegna.toLowerCase().includes(this.filters.insegna.toLowerCase())) return false;
            if (this.filters.dateFrom && e.sellout_end < this.filters.dateFrom) return false;
            if (this.filters.dateTo   && e.sellout_start > this.filters.dateTo) return false;
            if (this.filters.product) {
                const q = this.filters.product.toLowerCase();
                if (!e.products.some(p => p.name.toLowerCase().includes(q))) return false;
            }
            return true;
        }).sort((a, b) => a.sellout_start.localeCompare(b.sellout_start));
    },

    _renderList() {
        const container = document.getElementById('list-events');
        const events = this._filtered();
        if (!events.length) {
            container.innerHTML = '<p class="text-muted text-center mt-4">Nessun evento trovato.</p>';
            return;
        }
        const fmt = s => new Date(s + 'T00:00:00').toLocaleDateString('it-IT');
        container.innerHTML = events.map(e => {
            const co = App.companies.find(c => c.id === e.company_id);
            const productsHtml = e.products.map(p =>
                `<li>${p.name}${p.extra_info ? ` <small class="text-muted">[${p.extra_info}]</small>` : ''}</li>`
            ).join('');
            return `<div class="event-card" style="border-left-color:${co?.color||'#999'}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="insegna">${e.insegna}</div>
                        <span class="company-badge" style="background:${co?.color||'#999'}">${co?.name||e.company_id}</span>
                    </div>
                    <div class="date-range">${fmt(e.sellout_start)} — ${fmt(e.sellout_end)}</div>
                    <details class="mt-1">
                        <summary class="text-muted" style="cursor:pointer;font-size:.85rem">${e.products.length} prodotti</summary>
                        <ul class="product-list mt-1 mb-0">${productsHtml}</ul>
                    </details>
                </div>
            </div>`;
        }).join('');
    },
};
```

---

### Task 15: JS Analytics Module

**Files:**
- Create: `promogest/js/analytics.js`

**Step 1: Write analytics.js**

`promogest/js/analytics.js`:
```javascript
const Analytics = {
    _charts: {},

    render() {
        this._renderCounters();
        this._renderMonthlyChart();
        this._renderTopInsegne();
        this._renderNextEvents();
        this._renderExtraInfoDist();
    },

    _renderCounters() {
        const insegne = new Set(App.events.map(e => e.insegna));
        const products = App.events.reduce((s, e) => s + e.products.length, 0);
        document.getElementById('stat-events').textContent   = App.events.length;
        document.getElementById('stat-products').textContent = products;
        document.getElementById('stat-insegne').textContent  = insegne.size;
    },

    _renderMonthlyChart() {
        const months = Array.from({length:12}, (_,i) => i);
        const labels = ['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic'];

        const datasets = App.companies.map(co => ({
            label: co.name,
            backgroundColor: co.color + 'CC',
            data: months.map(m => App.events.filter(e =>
                e.company_id === co.id &&
                new Date(e.sellout_start).getMonth() === m
            ).length),
        }));

        const ctx = document.getElementById('chart-monthly')?.getContext('2d');
        if (!ctx) return;
        if (this._charts.monthly) this._charts.monthly.destroy();
        this._charts.monthly = new Chart(ctx, {
            type: 'bar',
            data: { labels, datasets },
            options: { responsive: true, plugins: { legend: { position: 'top' } } },
        });
    },

    _renderTopInsegne() {
        const counts = {};
        for (const e of App.events) counts[e.insegna] = (counts[e.insegna] || 0) + 1;
        const top = Object.entries(counts).sort((a,b) => b[1]-a[1]).slice(0,10);
        const el = document.getElementById('top-insegne');
        if (!el) return;
        el.innerHTML = top.map(([name, count], i) =>
            `<div class="d-flex justify-content-between align-items-center py-1 border-bottom">
                <span><strong>${i+1}.</strong> ${name}</span>
                <span class="badge bg-primary">${count}</span>
            </div>`
        ).join('');
    },

    _renderNextEvents() {
        const today = new Date().toISOString().slice(0,10);
        const next = App.events
            .filter(e => e.sellout_end >= today)
            .sort((a,b) => a.sellout_start.localeCompare(b.sellout_start))
            .slice(0,5);
        const fmt = s => new Date(s + 'T00:00:00').toLocaleDateString('it-IT');
        const el = document.getElementById('next-events');
        if (!el) return;
        el.innerHTML = next.map(e => {
            const co = App.companies.find(c => c.id === e.company_id);
            return `<div class="d-flex justify-content-between align-items-center py-1 border-bottom">
                <div>
                    <strong>${e.insegna}</strong>
                    <span class="company-badge ms-1" style="background:${co?.color||'#999'};font-size:.7rem">${co?.name||''}</span>
                </div>
                <small class="text-muted">${fmt(e.sellout_start)}</small>
            </div>`;
        }).join('') || '<p class="text-muted">Nessun evento imminente.</p>';
    },

    _renderExtraInfoDist() {
        const el = document.getElementById('extra-info-dist');
        if (!el) return;
        let html = '';
        for (const co of App.companies) {
            const evts = App.events.filter(e => e.company_id === co.id);
            const counts = {};
            for (const e of evts) {
                for (const p of e.products) {
                    const val = p.extra_info || '(vuoto)';
                    counts[val] = (counts[val] || 0) + 1;
                }
            }
            const sorted = Object.entries(counts).sort((a,b) => b[1]-a[1]);
            html += `<div class="mb-3">
                <h6><span class="company-badge" style="background:${co.color}">${co.name}</span>
                    <small class="text-muted ms-2">${co.mapping?.extra_info_label || 'Extra'}</small>
                </h6>
                ${sorted.map(([k,v]) => `<div class="d-flex gap-2 align-items-center mb-1">
                    <span class="badge bg-secondary">${k}</span>
                    <div class="progress flex-grow-1" style="height:12px">
                        <div class="progress-bar" style="width:${Math.round(v/sorted[0][1]*100)}%;background:${co.color}"></div>
                    </div>
                    <small>${v}</small>
                </div>`).join('')}
            </div>`;
        }
        el.innerHTML = html || '<p class="text-muted">Nessun dato.</p>';
    },
};
```

---

### Task 16: JS Settings Module

**Files:**
- Create: `promogest/js/settings.js`

**Step 1: Write settings.js**

`promogest/js/settings.js`:
```javascript
const Settings = {
    render() {
        this._renderAliases();
        this._renderCompanies();
        this._renderUnmapped();
        this._renderImportHistory();
    },

    // ── PASSWORD ──────────────────────────────────────────────────
    async changePassword() {
        const old = document.getElementById('pwd-old').value;
        const n1  = document.getElementById('pwd-new').value;
        const n2  = document.getElementById('pwd-confirm').value;
        if (n1 !== n2) return App.toast('Le password non coincidono', 'danger');
        if (n1.length < 6) return App.toast('Password troppo corta', 'danger');
        try {
            await API.changePassword(old, n1);
            App.toast('Password cambiata!', 'success');
            document.getElementById('pwd-old').value = '';
            document.getElementById('pwd-new').value = '';
            document.getElementById('pwd-confirm').value = '';
        } catch (e) { App.toast(e.message, 'danger'); }
    },

    // ── ALIASES ───────────────────────────────────────────────────
    _renderAliases() {
        const el = document.getElementById('aliases-list');
        if (!el) return;
        el.innerHTML = App.aliases.map(a => `
            <div class="card mb-2" id="alias-card-${a.id}">
                <div class="card-body py-2 px-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <strong>${a.canonical_name}</strong>
                        <div>
                            <button class="btn btn-sm btn-outline-primary me-1" onclick="Settings._editAlias('${a.id}')">Modifica</button>
                            <button class="btn btn-sm btn-outline-danger" onclick="Settings._deleteAlias('${a.id}')">Elimina</button>
                        </div>
                    </div>
                    <div class="text-muted small">${a.variants.join(', ')}</div>
                </div>
            </div>`
        ).join('') || '<p class="text-muted">Nessun alias configurato.</p>';
    },

    async _deleteAlias(id) {
        if (!confirm('Eliminare questo alias?')) return;
        try {
            await API.deleteAlias(id);
            App.aliases = App.aliases.filter(a => a.id !== id);
            this._renderAliases();
            App.toast('Alias eliminato', 'success');
        } catch(e) { App.toast(e.message, 'danger'); }
    },

    _editAlias(id) {
        const alias = App.aliases.find(a => a.id === id);
        if (!alias) return;
        document.getElementById('alias-edit-id').value = id;
        document.getElementById('alias-edit-canonical').value = alias.canonical_name;
        document.getElementById('alias-edit-variants').value = alias.variants.join('\n');
        new bootstrap.Modal(document.getElementById('aliasModal')).show();
    },

    async saveAlias() {
        const id        = document.getElementById('alias-edit-id').value;
        const canonical = document.getElementById('alias-edit-canonical').value.trim();
        const variants  = document.getElementById('alias-edit-variants').value
                            .split('\n').map(s => s.trim()).filter(Boolean);
        if (!canonical) return App.toast('Nome canonico obbligatorio', 'danger');
        try {
            if (id) {
                await API.updateAlias({ id, canonical_name: canonical, variants });
                const i = App.aliases.findIndex(a => a.id === id);
                if (i >= 0) App.aliases[i] = { id, canonical_name: canonical, variants };
            } else {
                const newAlias = await API.addAlias({ canonical_name: canonical, variants });
                App.aliases.push(newAlias);
            }
            this._renderAliases();
            bootstrap.Modal.getInstance(document.getElementById('aliasModal'))?.hide();
            App.toast('Alias salvato', 'success');
        } catch(e) { App.toast(e.message, 'danger'); }
    },

    newAlias() {
        document.getElementById('alias-edit-id').value = '';
        document.getElementById('alias-edit-canonical').value = '';
        document.getElementById('alias-edit-variants').value = '';
        new bootstrap.Modal(document.getElementById('aliasModal')).show();
    },

    // ── COMPANIES ─────────────────────────────────────────────────
    _renderCompanies() {
        const el = document.getElementById('companies-list');
        if (!el) return;
        el.innerHTML = App.companies.map(c => {
            const m = c.mapping || {};
            return `<div class="card mb-3">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <span><span style="display:inline-block;width:14px;height:14px;border-radius:50%;background:${c.color};margin-right:6px"></span>
                    <strong>${c.name}</strong></span>
                    <button class="btn btn-sm btn-outline-danger" onclick="Settings._clearCompany('${c.id}','${c.name}')">Svuota eventi</button>
                </div>
                <div class="card-body">
                    <div class="row g-2">
                        ${['insegna','product','sellout_start','sellout_end','extra_info','header_row'].map(field =>
                            `<div class="col-6 col-md-4">
                                <label class="form-label small mb-0">${field}</label>
                                <input class="form-control form-control-sm" type="number"
                                    id="mapping_${c.id}_${field}" value="${m[field] ?? 0}"
                                    onchange="Settings._saveMappingField('${c.id}','${field}',this.value)">
                            </div>`
                        ).join('')}
                        <div class="col-6 col-md-4">
                            <label class="form-label small mb-0">extra_info_label</label>
                            <input class="form-control form-control-sm" type="text"
                                id="mapping_${c.id}_extra_info_label" value="${m.extra_info_label || ''}"
                                onchange="Settings._saveMappingField('${c.id}','extra_info_label',this.value)">
                        </div>
                        <div class="col-6 col-md-4">
                            <label class="form-label small mb-0">Colore</label>
                            <input class="form-control form-control-sm form-control-color" type="color"
                                value="${c.color}" onchange="Settings._saveColor('${c.id}',this.value)">
                        </div>
                    </div>
                </div>
            </div>`;
        }).join('');
    },

    async _saveMappingField(companyId, field, value) {
        const co = App.companies.find(c => c.id === companyId);
        if (!co) return;
        co.mapping[field] = field === 'extra_info_label' ? value : parseInt(value, 10);
        try {
            await API.updateCompany(co);
        } catch(e) { App.toast(e.message, 'danger'); }
    },

    async _saveColor(companyId, color) {
        const co = App.companies.find(c => c.id === companyId);
        if (!co) return;
        co.color = color;
        try { await API.updateCompany(co); } catch(e) { App.toast(e.message, 'danger'); }
    },

    async _clearCompany(id, name) {
        if (!confirm(`Eliminare TUTTI gli eventi di "${name}"?`)) return;
        try {
            await API.clearEvents(id);
            App.events = App.events.filter(e => e.company_id !== id);
            App.toast(`Eventi di ${name} eliminati`, 'success');
        } catch(e) { App.toast(e.message, 'danger'); }
    },

    // ── UNMAPPED INSEGNE ──────────────────────────────────────────
    _renderUnmapped() {
        const el = document.getElementById('unmapped-insegne');
        if (!el) return;
        const aliasVariants = new Set(App.aliases.flatMap(a =>
            [a.canonical_name.toUpperCase(), ...a.variants.map(v => v.toUpperCase())]
        ));
        const unmapped = [...new Set(App.events.map(e => e.insegna_raw.trim()))]
            .filter(raw => !aliasVariants.has(raw.toUpperCase()));
        el.innerHTML = unmapped.length
            ? unmapped.map(n => `<span class="badge bg-warning text-dark me-1 mb-1">${n}</span>`).join('')
            : '<span class="text-success">Tutte le insegne sono mappate!</span>';
    },

    // ── IMPORT HISTORY ────────────────────────────────────────────
    _renderImportHistory() {
        const el = document.getElementById('import-history');
        if (!el) return;
        const fmt = s => s ? new Date(s).toLocaleString('it-IT') : 'Mai';
        el.innerHTML = App.companies.map(c =>
            `<div class="d-flex justify-content-between py-1 border-bottom">
                <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${c.color};margin-right:6px"></span>${c.name}</span>
                <small class="text-muted">${fmt(c.last_import)}</small>
            </div>`
        ).join('');
    },

    // ── BACKUP ────────────────────────────────────────────────────
    exportBackup() { API.exportBackup(); },

    importBackup() {
        const input = document.createElement('input');
        input.type = 'file'; input.accept = '.json';
        input.onchange = async (e) => {
            const file = e.target.files[0];
            if (!file) return;
            try {
                const text = await file.text();
                const data = JSON.parse(text);
                if (!confirm('Sovrascrivere tutti i dati con il backup? OPERAZIONE IRREVERSIBILE')) return;
                await API.importBackup(data);
                App.toast('Backup ripristinato! Ricarico...', 'success');
                setTimeout(() => location.reload(), 1500);
            } catch(e) { App.toast('Errore nel file di backup', 'danger'); }
        };
        input.click();
    },

    resetData() {
        const answer = prompt('Scrivi RESET per confermare la cancellazione di tutti i dati:');
        if (answer !== 'RESET') return;
        if (!confirm('Sei ASSOLUTAMENTE sicuro? Questa operazione è irreversibile!')) return;
        // Reset to empty
        Promise.all([
            API.importBackup({
                companies: { companies: App.companies },
                aliases:   { aliases: [] },
                events:    { events: [] },
            })
        ]).then(() => {
            App.toast('Dati azzerati! Ricarico...', 'success');
            setTimeout(() => location.reload(), 1500);
        }).catch(e => App.toast(e.message, 'danger'));
    },
};
```

---

### Task 17: JS Main App Module

**Files:**
- Create: `promogest/js/app.js`

**Step 1: Write app.js**

`promogest/js/app.js`:
```javascript
// Global app state
const App = {
    user:      null,
    events:    [],
    companies: [],
    aliases:   [],
    currentPage: null,

    // ── INIT ──────────────────────────────────────────────────────
    async init() {
        // Check auth
        const authed = await Auth.check();
        if (!authed) { this.showLogin(); return; }
        await this.loadData();
        this.showPage('calendar');
        this._initNav();
        this._initImportModal();
        this._updateOnlineStatus();
        window.addEventListener('online',  () => this._updateOnlineStatus());
        window.addEventListener('offline', () => this._updateOnlineStatus());
    },

    async loadData() {
        const [events, companies, aliases] = await Promise.all([
            API.getEvents(),
            API.getCompanies(),
            API.getAliases(),
        ]);
        this.events    = events    || [];
        this.companies = companies || [];
        this.aliases   = aliases   || [];
    },

    // ── AUTH ──────────────────────────────────────────────────────
    showLogin() {
        document.getElementById('app').style.display = 'none';
        document.getElementById('login-page').style.display = 'flex';
    },

    hideLogin() {
        document.getElementById('login-page').style.display = 'none';
        document.getElementById('app').style.display = 'block';
    },

    // ── NAVIGATION ────────────────────────────────────────────────
    _initNav() {
        document.querySelectorAll('[data-page]').forEach(el => {
            el.addEventListener('click', () => this.showPage(el.dataset.page));
        });
        document.getElementById('btn-logout')?.addEventListener('click', () => Auth.logout());
    },

    showPage(name) {
        this.currentPage = name;
        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
        document.getElementById(`page-${name}`)?.classList.add('active');
        document.querySelectorAll('[data-page]').forEach(el => {
            el.classList.toggle('active', el.dataset.page === name);
        });

        // Render page content
        switch(name) {
            case 'calendar':  Calendar.render();  break;
            case 'list':      List.render();      break;
            case 'analytics': Analytics.render(); break;
            case 'settings':  Settings.render();  break;
        }
    },

    // ── IMPORT MODAL ──────────────────────────────────────────────
    _initImportModal() {
        // Company dropdown
        const sel = document.getElementById('import-company');
        if (!sel) return;
        sel.innerHTML = '<option value="">-- Seleziona azienda --</option>' +
            this.companies.map(c => `<option value="${c.id}">${c.name}</option>`).join('');

        // Dropzone
        const dz = document.getElementById('dropzone');
        const fi = document.getElementById('file-input');
        dz?.addEventListener('click', () => fi?.click());
        dz?.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('dragover'); });
        dz?.addEventListener('dragleave', () => dz.classList.remove('dragover'));
        dz?.addEventListener('drop', e => {
            e.preventDefault(); dz.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            if (file) this._onFileSelected(file);
        });
        fi?.addEventListener('change', e => {
            if (e.target.files[0]) this._onFileSelected(e.target.files[0]);
        });
    },

    async _onFileSelected(file) {
        const companyId = document.getElementById('import-company')?.value;
        if (!companyId) return this.toast('Seleziona prima un\'azienda', 'warning');

        const company = this.companies.find(c => c.id === companyId);
        this._showImportStep(2);
        document.getElementById('import-preview-loading').style.display = 'block';
        document.getElementById('import-preview-content').style.display = 'none';

        try {
            const { valid, discarded, total } = await Import.parseFile(file, company);
            const grouped  = Import.groupRows(valid);
            const unmapped = Import.findUnmapped(valid);

            // Store for confirm step
            Import.state = { company, parsedRows: valid, validRows: valid, discardedRows: discarded, groupedEvents: grouped, unmappedInsegne: unmapped };

            this._renderImportPreview(total, valid, discarded, grouped, unmapped, company);
            document.getElementById('import-preview-loading').style.display = 'none';
            document.getElementById('import-preview-content').style.display = 'block';
        } catch(err) {
            this.toast('Errore nel parsing del file: ' + err.message, 'danger');
            this._showImportStep(1);
        }
    },

    _renderImportPreview(total, valid, discarded, grouped, unmapped, company) {
        const fmt = s => new Date(s + 'T00:00:00').toLocaleDateString('it-IT');
        // Summary
        document.getElementById('preview-total').textContent    = total;
        document.getElementById('preview-valid').textContent    = valid.length;
        document.getElementById('preview-discarded').textContent = discarded.length;
        document.getElementById('preview-events').textContent   = grouped.length;

        // Overwrite warning
        const existing = this.events.filter(e => e.company_id === company.id).length;
        const warn = document.getElementById('preview-overwrite-warn');
        if (warn) {
            warn.style.display = existing > 0 ? 'block' : 'none';
            warn.innerHTML = `<i class="bi bi-exclamation-triangle"></i> Attenzione: l'import sostituirà i <strong>${existing}</strong> eventi attualmente presenti per <strong>${company.name}</strong>`;
        }

        // Preview table (first 20)
        const m = company.mapping;
        const tbody = document.getElementById('preview-table-body');
        if (tbody) {
            tbody.innerHTML = valid.slice(0, 20).map(r =>
                `<tr>
                    <td>${r.insegna}</td>
                    <td>${r.product}</td>
                    <td>${fmt(r.sellout_start)}</td>
                    <td>${fmt(r.sellout_end)}</td>
                    <td>${r.extra_info || '-'}</td>
                </tr>`
            ).join('');
        }

        // Discarded rows
        const discEl = document.getElementById('preview-discarded-list');
        if (discEl) {
            discEl.innerHTML = discarded.slice(0, 50).map(d =>
                `<li>Riga ${d.row}: ${d.reason}</li>`
            ).join('') || '<li>Nessuna riga scartata</li>';
        }

        // Unmapped insegne
        const unmEl = document.getElementById('preview-unmapped');
        if (unmEl) {
            unmEl.innerHTML = unmapped.length
                ? unmapped.map(n => `<span class="badge bg-warning text-dark me-1">${n}</span>`).join('')
                : '<span class="text-success">Tutte le insegne sono già mappate</span>';
        }
    },

    async _confirmImport() {
        const { company, groupedEvents } = Import.state;
        const btn = document.getElementById('btn-confirm-import');
        btn.disabled = true;
        this._showImportStep(3);
        document.getElementById('import-result-loading').style.display = 'block';
        document.getElementById('import-result-content').style.display = 'none';

        try {
            await API.importEvents(company.id, groupedEvents);
            // Refresh events
            this.events = await API.getEvents();
            const co = this.companies.find(c => c.id === company.id);
            if (co) co.last_import = new Date().toISOString();

            document.getElementById('import-result-loading').style.display = 'none';
            document.getElementById('import-result-content').style.display = 'block';
            document.getElementById('result-events-count').textContent   = groupedEvents.length;
            document.getElementById('result-products-count').textContent = groupedEvents.reduce((s,e) => s + e.products.length, 0);
            document.getElementById('result-insegne-count').textContent  = new Set(groupedEvents.map(e => e.insegna)).size;
        } catch(err) {
            this.toast('Errore durante il salvataggio: ' + err.message, 'danger');
            this._showImportStep(2);
        } finally {
            btn.disabled = false;
        }
    },

    _showImportStep(n) {
        document.querySelectorAll('.import-step').forEach((el, i) => {
            el.classList.toggle('active', i + 1 === n);
        });
    },

    openImportModal() {
        this._showImportStep(1);
        document.getElementById('import-company').value = '';
        new bootstrap.Modal(document.getElementById('importModal')).show();
    },

    // ── TOAST ─────────────────────────────────────────────────────
    toast(message, type = 'info') {
        const container = document.getElementById('toast-container');
        const id = 'toast-' + Date.now();
        const el = document.createElement('div');
        el.id = id;
        el.className = `toast align-items-center text-white bg-${type} border-0`;
        el.setAttribute('role', 'alert');
        el.innerHTML = `<div class="d-flex"><div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button></div>`;
        container.appendChild(el);
        const t = new bootstrap.Toast(el, { delay: 4000 });
        t.show();
        el.addEventListener('hidden.bs.toast', () => el.remove());
    },

    // ── ONLINE STATUS ─────────────────────────────────────────────
    _updateOnlineStatus() {
        const online  = document.getElementById('status-online');
        const offline = document.getElementById('status-offline');
        if (navigator.onLine) {
            online?.style.setProperty('display', 'inline-block');
            offline?.style.setProperty('display', 'none');
        } else {
            online?.style.setProperty('display', 'none');
            offline?.style.setProperty('display', 'inline-block');
        }
    },
};

// Login form handler
document.getElementById('login-form')?.addEventListener('submit', async (e) => {
    e.preventDefault();
    const btn = document.getElementById('login-btn');
    btn.disabled = true;
    try {
        await Auth.login(
            document.getElementById('login-username').value,
            document.getElementById('login-password').value,
            document.getElementById('login-remember').checked,
        );
        App.hideLogin();
        await App.loadData();
        App.showPage('calendar');
        App._initNav();
        App._initImportModal();
    } catch(err) {
        document.getElementById('login-error').textContent = err.message;
        document.getElementById('login-error').style.display = 'block';
    } finally {
        btn.disabled = false;
    }
});

// Boot
document.addEventListener('DOMContentLoaded', () => App.init());
```

---

### Task 18: Main HTML Entry Point

**Files:**
- Create: `promogest/index.html`

**Step 1: Write index.html**

`promogest/index.html` — full SPA with login, topbar, bottom nav, all modals, and all page sections.

See the complete HTML in Task 18 implementation (it's the largest file, ~450 lines combining all UI).

Key structure:
```html
<!DOCTYPE html>
<html lang="it">
<head>
  <!-- Bootstrap 5.3 CSS CDN + Bootstrap Icons CDN + Chart.js CDN -->
  <!-- manifest.json link -->
  <!-- custom app.css -->
</head>
<body>
  <!-- LOGIN PAGE (full screen, shown when not authed) -->
  <div id="login-page">...</div>

  <!-- MAIN APP -->
  <div id="app" style="display:none">
    <!-- TOP BAR -->
    <div id="topbar">...</div>

    <!-- PAGE CONTENT -->
    <div id="page-calendar" class="page container-fluid py-3">
      <!-- calendar header with month nav -->
      <!-- calendar-grid -->
    </div>
    <div id="page-list" class="page container-fluid py-3">
      <!-- filters + list-events -->
    </div>
    <div id="page-analytics" class="page container-fluid py-3">
      <!-- stat cards + charts -->
    </div>
    <div id="page-settings" class="page container-fluid py-3">
      <!-- accordion: password, companies, aliases, import, backup -->
    </div>

    <!-- BOTTOM NAV -->
    <nav id="bottom-nav">...</nav>
  </div>

  <!-- MODALS: dayModal, importModal, aliasModal -->
  <!-- TOAST CONTAINER -->

  <!-- SCRIPTS: SheetJS, Bootstrap JS, api.js, auth.js, import.js,
       calendar.js, list.js, analytics.js, settings.js, app.js -->
</body>
</html>
```

(Full HTML written in implementation step — not repeated here to keep plan concise.)

---

### Task 19: PWA Manifest + Service Worker

**Files:**
- Create: `promogest/manifest.json`
- Create: `promogest/sw.js`

**Step 1: Write manifest.json**

`promogest/manifest.json`:
```json
{
  "name": "PromoGest",
  "short_name": "PromoGest",
  "description": "Gestionale Promozioni & Volantini",
  "start_url": "./",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1976D2",
  "orientation": "portrait-primary",
  "icons": [
    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}
```

**Step 2: Write sw.js**

`promogest/sw.js`:
```javascript
const CACHE_NAME = 'promogest-v1';
const STATIC_ASSETS = [
    './',
    './index.html',
    './css/app.css',
    './js/api.js',
    './js/auth.js',
    './js/import.js',
    './js/calendar.js',
    './js/list.js',
    './js/analytics.js',
    './js/settings.js',
    './js/app.js',
    './lib/xlsx.full.min.js',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css',
    'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css',
    'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js',
    'https://cdn.jsdelivr.net/npm/chart.js',
];

self.addEventListener('install', e => {
    e.waitUntil(
        caches.open(CACHE_NAME).then(c => c.addAll(STATIC_ASSETS)).then(() => self.skipWaiting())
    );
});

self.addEventListener('activate', e => {
    e.waitUntil(
        caches.keys().then(keys =>
            Promise.all(keys.filter(k => k !== CACHE_NAME).map(k => caches.delete(k)))
        ).then(() => self.clients.claim())
    );
});

self.addEventListener('fetch', e => {
    const url = new URL(e.request.url);

    // API calls: Network First, cache response
    if (url.pathname.includes('/api/') && e.request.method === 'GET') {
        e.respondWith(
            fetch(e.request)
                .then(res => {
                    const clone = res.clone();
                    caches.open(CACHE_NAME).then(c => c.put(e.request, clone));
                    return res;
                })
                .catch(() => caches.match(e.request))
        );
        return;
    }

    // Static assets: Cache First
    e.respondWith(
        caches.match(e.request).then(cached => cached || fetch(e.request))
    );
});
```

---

### Task 20: Generate PWA Icons

**Step 1: Generate icon-512.png using PHP GD**

```bash
php -r "
\$size = 512;
\$img = imagecreatetruecolor(\$size, \$size);
\$bg = imagecolorallocate(\$img, 25, 118, 210);
\$white = imagecolorallocate(\$img, 255, 255, 255);
imagefill(\$img, 0, 0, \$bg);
// Circle background
imagefilledellipse(\$img, \$size/2, \$size/2, \$size-20, \$size-20, \$bg);
// Big 'P' letter
\$font_size = 280;
\$font = '/System/Library/Fonts/Helvetica.ttc';
if (file_exists(\$font)) {
    \$bbox = imagettfbbox(\$font_size, 0, \$font, 'P');
    \$x = \$size/2 - (\$bbox[2]-\$bbox[0])/2;
    \$y = \$size/2 - (\$bbox[5]-\$bbox[3])/2;
    imagettftext(\$img, \$font_size, 0, \$x, \$y, \$white, \$font, 'P');
}
imagepng(\$img, 'promogest/icons/icon-512.png');
imagedestroy(\$img);
echo 'icon-512.png created';
"
```

**Step 2: Create icon-192 from icon-512**

```bash
php -r "
\$src = imagecreatefrompng('promogest/icons/icon-512.png');
\$dst = imagecreatetruecolor(192, 192);
imagecopyresampled(\$dst, \$src, 0, 0, 0, 0, 192, 192, 512, 512);
imagepng(\$dst, 'promogest/icons/icon-192.png');
imagedestroy(\$src); imagedestroy(\$dst);
echo 'icon-192.png created';
"
```

---

### Task 21: Write Full index.html

**Files:**
- Write: `promogest/index.html` (full implementation)

This is the complete 450+ line HTML file integrating all pages, modals, and scripts. Written in full during implementation.

---

### Task 22: Verify and Test

**Step 1: PHP syntax check all API files**

```bash
for f in promogest/api/*.php; do php -l "$f"; done
```
Expected: all `No syntax errors detected`

**Step 2: Check file structure**

```bash
find promogest/ -type f | sort
```
Expected: all files present including icons, data JSONs, lib, css, js, api, sw.js, manifest.json, index.html

**Step 3: Check data JSON validity**

```bash
for f in promogest/data/*.json; do php -r "json_decode(file_get_contents('$f')); echo (json_last_error()===0?'OK':'ERR').' $f\n';"; done
```
Expected: `OK` for all files

**Step 4: Verify SheetJS downloaded**

```bash
wc -c promogest/lib/xlsx.full.min.js
```
Expected: > 1MB

**Step 5: Open in browser**

Navigate to `http://localhost/valentina/promogest/` (or local server path).
- Login with `valentina` / `valentina`
- Should see calendar page
- Test import with one of the 3 Excel files provided

---

## Riepilogo finale

| Fase | Task | Contenuto |
|------|------|-----------|
| Setup | 1-2 | Struttura directory, dati seed |
| PHP Backend | 3-8 | utils, auth, events, companies, aliases, export/import |
| JS Frontend | 9-17 | CSS, api, auth, import, calendar, list, analytics, settings, app |
| HTML | 18, 21 | index.html completo SPA |
| PWA | 19-20 | manifest, service worker, icone |
| Verifica | 22 | Syntax check, struttura, test browser |