jukka/intra.noxus.fi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c0b003c2f9da8fe6295a2e97c6409ac0dedf5ae1
intra.noxus.fi/index.html
Jukka Lampikoski c0b003c2f9 Dokumentit: drag & drop -tiedostolataus useille tiedostoille 
- Drop zone dokumenttilistan alaosaan (raahaa tai klikkaa)
- Multi-file upload: luo dokumentit ja lataa tiedostot automaattisesti
- Edistymispalkki näyttää latauksen tilanteen
- Kansioiden raahaus: luo automaattisesti alikansio + tiedostot
- Kategoria-tunnistus tiedostopäätteen mukaan (kuva/muu)
- Multi-file input fallback perinteiselle tiedostovalinnalle

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-12 11:24:04 +02:00

2165 lines
141 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Noxus Intra</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Login -->
<div id="login-screen" class="login-screen" style="display:none">
<div class="login-box">
<img id="login-logo" src="" alt="Logo" style="height:48px;margin-bottom:0.75rem;display:none;">
<h1 id="login-title">Noxus Intra</h1>
<p id="login-subtitle">Kirjaudu sisään</p>
<form id="login-form">
<input type="text" id="login-username" placeholder="Käyttäjätunnus" required autofocus>
<input type="password" id="login-password" placeholder="Salasana" required>
<div class="captcha-row">
<span id="captcha-question" class="captcha-question">Ladataan...</span>
<input type="number" id="login-captcha" placeholder="Vastaus" required>
</div>
<button type="submit">Kirjaudu</button>
</form>
<div id="login-error" class="error" style="display:none"></div>
<a href="#" id="forgot-link" class="forgot-link">Unohdin salasanan</a>
</div>
<!-- Salasanan palautuspyyntö -->
<div class="login-box" id="forgot-box" style="display:none">
<h1 class="login-brand-title">Noxus Intra</h1>
<p>Salasanan palautus</p>
<form id="forgot-form">
<input type="text" id="forgot-username" placeholder="Käyttäjätunnus" required autofocus>
<button type="submit">Lähetä palautuslinkki</button>
</form>
<div id="forgot-msg" class="success-msg" style="display:none"></div>
<div id="forgot-error" class="error" style="display:none"></div>
<a href="#" id="forgot-back" class="forgot-link">Takaisin kirjautumiseen</a>
</div>
<!-- Uusi salasana (reset token) -->
<div class="login-box" id="reset-box" style="display:none">
<h1 class="login-brand-title">Noxus Intra</h1>
<p>Aseta uusi salasana</p>
<form id="reset-form">
<input type="password" id="reset-password" placeholder="Uusi salasana" required>
<input type="password" id="reset-password2" placeholder="Salasana uudelleen" required>
<button type="submit">Vaihda salasana</button>
</form>
<div id="reset-msg" class="success-msg" style="display:none"></div>
<div id="reset-error" class="error" style="display:none"></div>
</div>
</div>
<!-- Dashboard -->
<div id="dashboard" style="display:none">
<header>
<div class="header-left">
<div class="header-brand" id="brand-home" style="cursor:pointer;">
<img id="header-logo" src="" alt="Logo" style="height:32px;display:none;">
<span class="brand-icon" id="header-brand-icon">&#9889;</span>
<div>
<h1 id="header-title">Noxus Intra</h1>
<span class="subtitle" id="header-subtitle">Hallintapaneeli</span>
</div>
</div>
</div>
<div class="header-right">
<span id="user-info" class="user-info" style="cursor:pointer;" title="Oma profiili"></span>
<button id="btn-profile" class="btn-secondary btn-profile-icon" title="Oma profiili">&#9881;</button>
<select id="company-selector" class="company-selector" style="display:none;"></select>
<button id="btn-users" class="btn-secondary" style="display:none">Käyttäjät</button>
<button id="btn-companies" class="btn-secondary" style="display:none">Yritykset</button>
<button id="btn-add" class="btn-primary">+ Lisää asiakas</button>
<button id="btn-logout" class="btn-secondary">Kirjaudu ulos</button>
</div>
</header>
<!-- Tabs -->
<div class="tab-bar">
<button class="tab" data-tab="support">Asiakaspalvelu</button>
<button class="tab" data-tab="todo">Tehtävät</button>
<button class="tab active" data-tab="customers">Asiakkaat</button>
<button class="tab" data-tab="leads">Liidit</button>
<button class="tab" data-tab="tekniikka">Tekniikka</button>
<button class="tab" data-tab="documents">Dokumentit</button>
<button class="tab" data-tab="netadmin">NetAdmin</button>
<button class="tab" data-tab="changelog">Muutosloki</button>
<button class="tab" data-tab="settings" id="tab-settings" style="display:none">API</button>
</div>
<!-- Tab: Asiakkaat -->
<div class="tab-content active" id="tab-content-customers">
<div class="sub-tab-bar" id="customers-sub-tab-bar">
<button class="sub-tab active" data-cust-subtab="customers-list">Asiakkaat</button>
<button class="sub-tab" data-cust-subtab="customers-archive">Arkisto</button>
</div>
<div id="subtab-customers-list" class="sub-tab-content active">
<div class="main-container">
<div class="content-layout">
<div class="content-main">
<div class="toolbar">
<div class="search-bar">
<span class="search-icon">&#128269;</span>
<input type="text" id="search-input" placeholder="Hae yrityksen nimellä, osoitteella tai yhteyshenkilöllä...">
</div>
</div>
<div class="table-card">
<table id="customer-table">
<thead>
<tr>
<th data-sort="yritys">Yritys &#8597;</th>
<th data-sort="asennusosoite">Osoite &#8597;</th>
<th data-sort="kaupunki">Kaupunki &#8597;</th>
<th data-sort="liittymanopeus">Nopeus &#8597;</th>
<th data-sort="hinta">Hinta/kk &#8597; <label title="Näytä/piilota hinnat" style="cursor:pointer;font-weight:normal;font-size:0.75rem;margin-left:0.3rem;"><input type="checkbox" id="toggle-prices" style="vertical-align:middle;"> 👁</label></th>
<th data-sort="sopimuskausi">Sopimus &#8597;</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="customer-tbody"></tbody>
</table>
<div id="no-customers" class="empty-state" style="display:none">
<div class="empty-icon">&#128203;</div>
<p>Ei asiakkaita vielä.</p>
<p class="empty-hint">Klikkaa "+ Lisää asiakas" lisätäksesi ensimmäisen asiakkaan.</p>
</div>
</div>
<div class="summary-bar">
<span id="customer-count">0 asiakasta</span>
<span id="total-billing">Laskutus yhteensä: 0,00 €/kk</span>
</div>
</div>
<aside class="sidebar-stats">
<div class="stat-card">
<div class="stat-label">Asiakkaita</div>
<div class="stat-value" id="stat-count">0</div>
</div>
<div class="stat-card">
<div class="stat-label">Liittymiä</div>
<div class="stat-value" id="stat-connections">0</div>
</div>
<div class="stat-card highlight">
<div class="stat-label">Laskutus / kk</div>
<div class="stat-value stat-highlight" id="stat-billing">0,00 €</div>
</div>
<div class="stat-card">
<div class="stat-label">Laskutus / vuosi</div>
<div class="stat-value" id="stat-yearly">0,00 €</div>
</div>
<div class="stat-card trivia">
<div class="stat-label">Keskihinta / kk</div>
<div class="stat-value" id="stat-avg-price">-</div>
</div>
<div class="stat-card trivia">
<div class="stat-label">Suosituin postinumero</div>
<div class="stat-value" id="stat-top-zip">-</div>
<div class="stat-sub" id="stat-top-zip-detail"></div>
</div>
<div class="stat-card trivia">
<div class="stat-label">Nopeudet</div>
<div id="stat-speed-table" class="speed-table"></div>
</div>
</aside>
</div>
</div>
</div><!-- /subtab-customers-list -->
<!-- Sub-tab: Arkisto -->
<div id="subtab-customers-archive" class="sub-tab-content">
<div class="main-container">
<div class="table-card">
<table id="archive-table">
<thead>
<tr>
<th>Yritys</th>
<th>Liittymiä</th>
<th>Arkistoitu</th>
<th>Arkistoija</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="archive-tbody"></tbody>
</table>
<div id="no-archive" class="empty-state" style="display:none">
<div class="empty-icon">&#128451;</div>
<p>Arkisto on tyhjä.</p>
</div>
</div>
</div>
</div><!-- /subtab-customers-archive -->
</div>
<!-- Tab: Liidit -->
<div class="tab-content" id="tab-content-leads">
<div class="main-container">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-primary" id="btn-add-lead">+ Lisää liidi</button>
<div class="search-bar" style="flex:1;max-width:400px;margin-left:1rem;">
<span class="search-icon">&#128269;</span>
<input type="text" id="lead-search-input" placeholder="Hae liidejä...">
</div>
</div>
<div class="table-card">
<table id="leads-table">
<thead>
<tr>
<th>Yritys</th>
<th>Yhteyshenkilö</th>
<th>Kaupunki</th>
<th>Tila</th>
<th>Lisätty</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="leads-tbody"></tbody>
</table>
<div id="no-leads" class="empty-state" style="display:none">
<div class="empty-icon">&#127919;</div>
<p>Ei liidejä vielä.</p>
<p class="empty-hint">Klikkaa "+ Lisää liidi" lisätäksesi ensimmäisen.</p>
</div>
</div>
<div class="summary-bar">
<span id="lead-count">0 liidiä</span>
</div>
</div>
</div>
<!-- Tab: Laitteet -->
<div class="tab-content" id="tab-content-tekniikka">
<div class="sub-tab-bar">
<button class="sub-tab active" data-subtab="devices">Laitteet</button>
<button class="sub-tab" data-subtab="ipam">IPAM</button>
<button class="sub-tab" data-subtab="laitetilat">Laitetilat</button>
</div>
<!-- Sub-tab: Laitteet -->
<div class="sub-tab-content active" id="subtab-devices">
<div class="main-container">
<div class="search-bar" style="display:flex;gap:0.5rem;align-items:center;">
<input type="text" id="device-search-input" placeholder="Hae laitteita..." style="flex:1;">
<button class="btn-primary" id="btn-add-device" style="white-space:nowrap;">+ Lisää laite</button>
</div>
<div class="table-card">
<table id="device-table">
<thead>
<tr>
<th data-sort="nimi">Nimi &#8597;</th>
<th>Hallintaosoite</th>
<th>Serial</th>
<th>Sijainti</th>
<th>Tyyppi</th>
<th>Funktio</th>
<th>Malli</th>
<th>Ping</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="device-tbody"></tbody>
</table>
<div id="no-devices" class="empty-state" style="display:none;">
<p>Ei laitteita vielä. Lisää ensimmäinen laite.</p>
</div>
</div>
<div class="summary-bar">
<span id="device-count">0 laitetta</span>
</div>
</div>
</div>
<!-- Sub-tab: IPAM -->
<div class="sub-tab-content" id="subtab-ipam">
<div class="main-container">
<div class="search-bar" style="display:flex;gap:0.5rem;align-items:center;">
<input type="text" id="ipam-search-input" placeholder="Hae IP, verkko, VLAN..." style="flex:1;">
<button class="btn-primary" id="btn-add-ipam" style="white-space:nowrap;">+ Lisää verkko / IP</button>
</div>
<div id="ipam-breadcrumb" class="ipam-breadcrumb" style="display:none;"></div>
<div class="table-card">
<table id="ipam-table" class="ipam-tree-table">
<thead>
<tr>
<th style="width:120px;">Tyyppi</th>
<th>Verkko / IP</th>
<th>Nimi / Kuvaus</th>
<th>VLAN</th>
<th>Sijainti</th>
<th>Tila</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="ipam-tbody"></tbody>
</table>
<div id="no-ipam" class="empty-state" style="display:none;">
<p>Ei verkkoja tai IP-osoitteita vielä.</p>
</div>
</div>
<div class="summary-bar">
<span id="ipam-count">0 verkkoa</span>
</div>
<!-- VLAN-luettelo -->
<div id="ipam-vlan-section" style="margin-top:1.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;">
<h4 style="margin:0;color:#0f3460;">VLANit</h4>
<button class="btn-primary" id="btn-add-vlan" style="white-space:nowrap;font-size:0.82rem;">+ Lisää VLAN</button>
</div>
<div class="table-card">
<table>
<thead>
<tr>
<th style="width:80px;">VLAN</th>
<th>Verkko</th>
<th>Nimi / Kuvaus</th>
<th>Sijainti</th>
<th>Tila</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="ipam-vlan-tbody"></tbody>
</table>
</div>
<div class="summary-bar">
<span id="ipam-vlan-count">0 VLANia</span>
</div>
</div>
</div>
</div>
<!-- Sub-tab: Laitetilat -->
<div class="sub-tab-content" id="subtab-laitetilat">
<div class="main-container">
<!-- Listanäkymä -->
<div id="laitetilat-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<h3 style="color:var(--primary-dark);margin:0;">🏢 Laitetilat</h3>
<button class="btn-primary" id="btn-new-laitetila">+ Uusi laitetila</button>
</div>
<div id="laitetilat-grid" class="laitetilat-grid"></div>
<div id="no-laitetilat" class="empty-state" style="display:none;">
<div class="empty-icon">🏢</div>
<p>Ei laitetiloja vielä.</p>
<p class="empty-hint">Klikkaa "+ Uusi laitetila" aloittaaksesi.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="laitetila-read-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<button class="btn-secondary" id="btn-laitetila-back">← Takaisin</button>
<div style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-laitetila-edit">✏️ Muokkaa</button>
<button class="btn-danger" id="btn-laitetila-delete" style="display:none;">🗑 Poista</button>
</div>
</div>
<div class="table-card" style="padding:1.5rem;">
<h2 id="laitetila-read-nimi" style="margin:0 0 0.25rem;color:var(--primary-dark);"></h2>
<p id="laitetila-read-osoite" style="color:#888;font-size:0.9rem;margin-bottom:1rem;"></p>
<p id="laitetila-read-kuvaus" style="color:#555;margin-bottom:1.5rem;white-space:pre-wrap;"></p>
<div style="background:#f8f9fb;padding:1rem;border-radius:10px;margin-bottom:1.5rem;">
<h4 style="margin:0 0 0.75rem;color:var(--primary-dark);">Lisää tiedosto</h4>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
<input type="file" id="laitetila-file-input" multiple style="flex:1;min-width:200px;">
<input type="text" id="laitetila-file-desc" placeholder="Kuvaus (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-laitetila-upload">Lataa</button>
</div>
</div>
<div id="laitetila-gallery" style="display:none;margin-bottom:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Kuvat</h4>
<div id="laitetila-gallery-grid" class="gallery-grid"></div>
</div>
<div id="laitetila-files-section" style="display:none;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Tiedostot</h4>
<div id="laitetila-files-list"></div>
</div>
<div id="laitetila-devices-section" style="margin-top:1.5rem;">
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">🖥 Laitteet</h4>
<div id="laitetila-devices-list"></div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="laitetila-edit-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-secondary" id="btn-laitetila-edit-back">← Takaisin</button>
</div>
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:var(--primary-dark);margin:0 0 1rem;" id="laitetila-edit-title">Uusi laitetila</h3>
<form id="laitetila-edit-form">
<input type="hidden" id="laitetila-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Nimi *</label>
<input type="text" id="laitetila-edit-nimi" required placeholder="Esim. Keskuskatu 5 - Kellari">
</div>
<div class="form-group">
<label>Osoite</label>
<input type="text" id="laitetila-edit-osoite" placeholder="Katuosoite">
</div>
<div class="form-group full-width">
<label>Kuvaus</label>
<textarea id="laitetila-edit-kuvaus" rows="4" placeholder="Laitetilan kuvaus..."></textarea>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="btn-laitetila-edit-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Tab: Tehtävät / TODO -->
<div class="tab-content" id="tab-content-todo">
<div class="main-container">
<!-- Sub-tab bar (vain tehtävät, kehitysehdotukset omana moduulina) -->
<div style="display:none;">
<button class="sub-tab active" data-todotab="tasks" onclick="switchTodoSubTab('tasks')">Tehtävät</button>
<button class="sub-tab" data-todotab="features" onclick="switchTodoSubTab('features')">Kehitysehdotukset</button>
</div>
<!-- ===== TEHTÄVÄT ===== -->
<div id="todo-subtab-tasks">
<!-- Listanäkymä -->
<div id="tasks-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem;">
<div class="search-bar" style="flex:1;min-width:200px;max-width:400px;">
<input type="text" id="todo-search-input" placeholder="Hae tehtävistä..." style="width:100%;">
</div>
<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;">
<select id="todo-status-filter" style="padding:0.4rem 0.6rem;border-radius:6px;border:1px solid #ddd;font-size:0.85rem;">
<option value="">Kaikki statukset</option>
<option value="avoin">Avoin</option>
<option value="kaynnissa">Käynnissä</option>
<option value="odottaa">Odottaa</option>
<option value="valmis">Valmis</option>
</select>
<select id="todo-category-filter" style="padding:0.4rem 0.6rem;border-radius:6px;border:1px solid #ddd;font-size:0.85rem;">
<option value="">Kaikki tyypit</option>
<option value="tekniikka">Tekniikka</option>
<option value="laskutus">Laskutus</option>
<option value="myynti">Myynti</option>
<option value="asennus">Asennus</option>
<option value="muu">Muu</option>
</select>
<select id="todo-assigned-filter" style="padding:0.4rem 0.6rem;border-radius:6px;border:1px solid #ddd;font-size:0.85rem;">
<option value="">Kaikki vastuuhenkilöt</option>
</select>
<button class="btn-primary" id="btn-add-task" style="display:none;">+ Uusi tehtävä</button>
</div>
</div>
<div class="table-card" style="overflow-x:auto;">
<table class="data-table" id="tasks-table" style="display:none;">
<thead>
<tr>
<th>Päivämäärä</th>
<th>Status</th>
<th>Prioriteetti</th>
<th>Tyyppi</th>
<th>Tehtävä</th>
<th>Vastuuhenkilö</th>
<th>Tunnit</th>
<th>&#128172;</th>
</tr>
</thead>
<tbody id="tasks-tbody"></tbody>
</table>
</div>
<p id="no-tasks" style="display:none;text-align:center;color:#aaa;padding:3rem 0;">Ei tehtäviä.</p>
</div>
<!-- Lukunäkymä -->
<div id="task-read-view" style="display:none;">
<button class="btn-secondary" id="btn-task-back">&larr; Takaisin</button>
<div class="table-card" style="padding:1.5rem 2rem;margin-top:1rem;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;">
<div>
<h2 id="task-read-title" style="color:var(--primary-color);margin:0;"></h2>
<div id="task-read-meta" style="font-size:0.85rem;color:#888;margin-top:0.3rem;"></div>
</div>
<div style="display:flex;gap:0.5rem;align-items:center;" id="task-read-actions"></div>
</div>
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;" id="task-read-badges"></div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0.75rem;margin-bottom:1rem;padding:1rem;background:#fafbfc;border-radius:8px;" id="task-read-fields"></div>
<div id="task-read-description" style="margin-bottom:1.5rem;line-height:1.7;white-space:pre-wrap;"></div>
<!-- Osatehtävät -->
<div id="task-subtasks-section" style="margin-bottom:1.5rem;">
<h3 style="font-size:1rem;margin-bottom:0.75rem;">&#9745; Osatehtävät <span id="task-subtask-count" style="font-weight:400;color:#888;"></span></h3>
<div id="task-subtasks-list"></div>
<div style="display:flex;gap:0.5rem;margin-top:0.5rem;">
<input type="text" id="subtask-input" placeholder="Lisää osatehtävä..." style="flex:1;padding:0.4rem 0.6rem;border:1px solid #ddd;border-radius:6px;font-size:0.88rem;">
<button type="button" class="btn-secondary" id="btn-add-subtask" style="padding:0.4rem 0.8rem;font-size:0.85rem;">Lisää</button>
</div>
</div>
<!-- Aikakirjaukset -->
<div id="task-time-section" style="margin-bottom:1.5rem;">
<h3 style="font-size:1rem;margin-bottom:0.75rem;">&#9201; Aikakirjaukset <span id="task-time-total" style="font-weight:400;color:#888;"></span></h3>
<table class="time-entries-table" id="task-time-table">
<thead><tr><th>Päivämäärä</th><th>Käyttäjä</th><th>Tunnit</th><th>Kuvaus</th><th></th></tr></thead>
<tbody id="task-time-tbody"></tbody>
</table>
<div id="task-time-form-wrap" style="margin-top:0.75rem;">
<button class="btn-secondary" id="btn-add-time" style="font-size:0.85rem;">+ Kirjaa tunteja</button>
<div id="task-time-form" style="display:none;margin-top:0.5rem;display:none;gap:0.5rem;align-items:flex-end;flex-wrap:wrap;">
<div class="form-group" style="margin:0;"><label style="font-size:0.78rem;">Päivämäärä</label><input type="date" id="time-form-date" style="font-size:0.85rem;"></div>
<div class="form-group" style="margin:0;"><label style="font-size:0.78rem;">Tunnit</label><input type="number" id="time-form-hours" step="0.25" min="0.25" placeholder="1.5" style="width:80px;font-size:0.85rem;"></div>
<div class="form-group" style="margin:0;flex:1;min-width:150px;"><label style="font-size:0.78rem;">Kuvaus</label><input type="text" id="time-form-desc" placeholder="Mitä teit" style="font-size:0.85rem;"></div>
<button class="btn-primary" id="btn-time-save" style="font-size:0.85rem;padding:0.4rem 1rem;">Tallenna</button>
<button class="btn-secondary" id="btn-time-cancel" style="font-size:0.85rem;">Peru</button>
</div>
</div>
</div>
<!-- Kommentit -->
<div id="task-comments-section">
<h3 style="font-size:1rem;margin-bottom:0.75rem;">&#128172; Kommentit <span id="task-comment-count" style="font-weight:400;color:#888;"></span></h3>
<div id="task-comments-list"></div>
<div style="margin-top:0.75rem;display:flex;gap:0.5rem;">
<textarea id="task-comment-input" rows="2" placeholder="Kirjoita kommentti..." style="flex:1;font-size:0.88rem;resize:vertical;min-height:50px;"></textarea>
<button class="btn-primary" id="btn-task-comment-send" style="align-self:flex-end;font-size:0.85rem;">Lähetä</button>
</div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="task-edit-view" style="display:none;">
<button class="btn-secondary" id="btn-task-edit-cancel">&larr; Peruuta</button>
<div class="table-card" style="padding:1.5rem 2rem;margin-top:1rem;">
<h2 id="task-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi tehtävä</h2>
<form id="task-form">
<input type="hidden" id="task-form-id">
<input type="hidden" id="task-form-type" value="task">
<div class="form-group" style="margin-bottom:1rem;">
<label for="task-form-title">Otsikko *</label>
<input type="text" id="task-form-title" required placeholder="Tehtävän otsikko">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem;margin-bottom:1rem;">
<div class="form-group">
<label for="task-form-priority">Prioriteetti</label>
<select id="task-form-priority">
<option value="normaali">Normaali</option>
<option value="tarkea">Tärkeä</option>
<option value="kiireellinen">Kiireellinen</option>
</select>
</div>
<div class="form-group">
<label for="task-form-status">Status</label>
<select id="task-form-status">
<option value="avoin">Avoin</option>
<option value="kaynnissa">Käynnissä</option>
<option value="odottaa">Odottaa</option>
<option value="valmis">Valmis</option>
</select>
</div>
<div class="form-group">
<label for="task-form-category">Tyyppi</label>
<select id="task-form-category">
<option value="">— Ei valittu —</option>
<option value="tekniikka">Tekniikka</option>
<option value="laskutus">Laskutus</option>
<option value="myynti">Myynti</option>
<option value="asennus">Asennus</option>
<option value="muu">Muu</option>
</select>
</div>
<div class="form-group">
<label for="task-form-deadline">Deadline</label>
<input type="date" id="task-form-deadline">
</div>
</div>
<div class="form-group" style="margin-bottom:1rem;">
<label for="task-form-assigned">Vastuuhenkilö</label>
<select id="task-form-assigned">
<option value="">— Ei vastuuhenkilöä —</option>
</select>
</div>
<div class="form-group" style="margin-bottom:1rem;">
<label for="task-form-desc">Kuvaus</label>
<textarea id="task-form-desc" rows="6" style="resize:vertical;" placeholder="Kuvaa tehtävä tarkemmin..."></textarea>
</div>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="task-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
<!-- ===== KEHITYSEHDOTUKSET ===== -->
<div id="todo-subtab-features" style="display:none;">
<!-- Listanäkymä -->
<div id="features-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem;">
<div class="search-bar" style="flex:1;min-width:200px;max-width:400px;">
<input type="text" id="feature-search-input" placeholder="Hae ehdotuksista..." style="width:100%;">
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<select id="feature-status-filter" style="padding:0.4rem 0.6rem;border-radius:6px;border:1px solid #ddd;font-size:0.85rem;">
<option value="">Kaikki statukset</option>
<option value="ehdotettu">Ehdotettu</option>
<option value="harkinnassa">Harkinnassa</option>
<option value="toteutettu">Toteutettu</option>
<option value="hylatty">Hylätty</option>
</select>
<button class="btn-primary" id="btn-add-feature">+ Uusi ehdotus</button>
</div>
</div>
<div class="table-card" style="overflow-x:auto;">
<table class="data-table" id="features-table" style="display:none;">
<thead>
<tr>
<th>Päivämäärä</th>
<th>Status</th>
<th>Ehdotus</th>
<th>Ehdottaja</th>
<th>&#128172;</th>
</tr>
</thead>
<tbody id="features-tbody"></tbody>
</table>
</div>
<p id="no-features" style="display:none;text-align:center;color:#aaa;padding:3rem 0;">Ei kehitysehdotuksia.</p>
</div>
<!-- Lukunäkymä -->
<div id="feature-read-view" style="display:none;">
<button class="btn-secondary" id="btn-feature-back">&larr; Takaisin</button>
<div class="table-card" style="padding:1.5rem 2rem;margin-top:1rem;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:1rem;margin-bottom:1rem;">
<div>
<h2 id="feature-read-title" style="color:var(--primary-color);margin:0;"></h2>
<div id="feature-read-meta" style="font-size:0.85rem;color:#888;margin-top:0.3rem;"></div>
</div>
<div style="display:flex;gap:0.5rem;align-items:center;" id="feature-read-actions"></div>
</div>
<div style="margin-bottom:1rem;" id="feature-read-badges"></div>
<div id="feature-read-description" style="margin-bottom:1.5rem;line-height:1.7;white-space:pre-wrap;"></div>
<!-- Kommentit -->
<div id="feature-comments-section">
<h3 style="font-size:1rem;margin-bottom:0.75rem;">&#128172; Kommentit <span id="feature-comment-count" style="font-weight:400;color:#888;"></span></h3>
<div id="feature-comments-list"></div>
<div style="margin-top:0.75rem;display:flex;gap:0.5rem;">
<textarea id="feature-comment-input" rows="2" placeholder="Kirjoita kommentti..." style="flex:1;font-size:0.88rem;resize:vertical;min-height:50px;"></textarea>
<button class="btn-primary" id="btn-feature-comment-send" style="align-self:flex-end;font-size:0.85rem;">Lähetä</button>
</div>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="feature-edit-view" style="display:none;">
<button class="btn-secondary" id="btn-feature-edit-cancel">&larr; Peruuta</button>
<div class="table-card" style="padding:1.5rem 2rem;margin-top:1rem;">
<h2 id="feature-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi kehitysehdotus</h2>
<form id="feature-form">
<input type="hidden" id="feature-form-id">
<input type="hidden" id="feature-form-type" value="feature_request">
<div class="form-group" style="margin-bottom:1rem;">
<label for="feature-form-title">Otsikko *</label>
<input type="text" id="feature-form-title" required placeholder="Parannusehdotuksen otsikko">
</div>
<div class="form-group" style="margin-bottom:1rem;">
<label for="feature-form-desc">Kuvaus</label>
<textarea id="feature-form-desc" rows="8" style="resize:vertical;" placeholder="Kuvaa ehdotuksesi tarkemmin: miksi tämä olisi hyödyllinen, miten sen pitäisi toimia..."></textarea>
</div>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Lähetä ehdotus</button>
<button type="button" class="btn-secondary" id="feature-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Tab: Dokumentit -->
<div class="tab-content" id="tab-content-documents">
<div class="main-container">
<!-- Asiakaskansionäkymä -->
<div id="docs-customer-folders-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<h3 style="color:var(--primary-dark);margin:0;">📁 Dokumentit — Asiakaskansiot</h3>
<input type="text" id="doc-folder-search" placeholder="Hae asiakasta..." style="max-width:250px;">
</div>
<div id="doc-customer-folders-grid" class="laitetilat-grid"></div>
<div id="no-doc-folders" class="empty-state" style="display:none;">
<div class="empty-icon">📁</div>
<p>Ei asiakkaita joilla on dokumentteja.</p>
</div>
</div>
<!-- Asiakkaan dokumenttilista -->
<div id="docs-list-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<div style="display:flex;align-items:center;gap:0.75rem;">
<button class="btn-secondary" id="btn-docs-back-to-folders">← Takaisin</button>
<h3 style="color:var(--primary-dark);margin:0;" id="docs-list-title">📄 Dokumentit</h3>
</div>
<div style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-new-document">+ Uusi dokumentti</button>
<button class="btn-primary" id="btn-new-meeting-note" style="display:none;">+ Uusi kokousmuistio</button>
</div>
</div>
<!-- Sub-tabit asiakkaan sisällä -->
<div class="sub-tab-bar" id="doc-sub-tab-bar">
<button class="sub-tab active" data-doc-subtab="docs-all">Kaikki</button>
<button class="sub-tab" data-doc-subtab="docs-kokoukset">Kokoukset</button>
</div>
<!-- Kansionavigointi -->
<div id="doc-folder-bar" style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;">
<span id="doc-breadcrumbs" style="font-size:0.9rem;color:#555;"></span>
<button class="btn-secondary" id="btn-new-folder" style="font-size:0.8rem;padding:0.25rem 0.6rem;">+ Kansio</button>
</div>
<div id="doc-folders-grid" style="display:flex;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap;"></div>
<div style="display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;">
<input type="text" id="doc-search" placeholder="Hae dokumentteja..." style="flex:1;min-width:150px;">
</div>
<div class="table-card">
<table id="docs-table">
<thead>
<tr>
<th>Otsikko</th>
<th>Versio</th>
<th>Päivitetty</th>
<th>Lataaja</th>
</tr>
</thead>
<tbody id="docs-tbody"></tbody>
</table>
<div id="no-docs" class="empty-state" style="display:none;">
<div class="empty-icon">📄</div>
<p>Ei dokumentteja vielä.</p>
<p class="empty-hint">Klikkaa "+ Uusi dokumentti" tai raahaa tiedostoja alle.</p>
</div>
</div>
<!-- Drag & Drop -tiedostolataus -->
<div id="doc-dropzone" class="doc-dropzone">
<div class="doc-dropzone-icon">📁</div>
<p>Raahaa tiedostoja tähän ladataksesi</p>
<p class="doc-dropzone-hint">tai <label for="doc-multi-file" class="doc-dropzone-link">valitse tiedostot</label></p>
<input type="file" id="doc-multi-file" multiple style="display:none;">
</div>
<div id="doc-upload-progress" class="doc-upload-progress" style="display:none;">
<div class="doc-upload-progress-bar">
<div class="doc-upload-progress-fill" id="doc-upload-fill"></div>
</div>
<span class="doc-upload-status" id="doc-upload-status">Ladataan...</span>
</div>
</div>
<!-- Lukunäkymä -->
<div id="doc-read-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<button class="btn-secondary" id="btn-doc-back">← Takaisin</button>
<div style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-doc-edit">✏️ Muokkaa</button>
<button class="btn-danger" id="btn-doc-delete" style="display:none;">🗑 Poista</button>
</div>
</div>
<div class="table-card" style="padding:1.5rem;">
<h2 id="doc-read-title" style="margin:0 0 0.5rem;color:var(--primary-dark);"></h2>
<div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;font-size:0.85rem;color:#666;">
<span id="doc-read-customer"></span>
<span id="doc-read-category"></span>
<span id="doc-read-version"></span>
<span id="doc-read-date"></span>
</div>
<p id="doc-read-description" style="color:#555;margin-bottom:1.5rem;"></p>
<!-- Kokousmuistion sisältö -->
<div id="doc-read-content-section" style="display:none;margin-bottom:1.5rem;">
<div id="doc-read-content" style="white-space:pre-wrap;background:#fefefe;border:1px solid #e5e7eb;padding:1rem;border-radius:8px;min-height:100px;line-height:1.6;font-size:0.95rem;"></div>
<div style="margin-top:0.75rem;">
<button class="btn-primary" id="btn-doc-edit-content">✏️ Muokkaa muistiota</button>
</div>
</div>
<!-- Kokousmuistion inline-editori -->
<div id="doc-inline-editor" style="display:none;margin-bottom:1.5rem;">
<textarea id="doc-inline-content" rows="15" placeholder="Kirjoita kokousmuistio tähän..."></textarea>
<div style="margin-top:0.5rem;display:flex;gap:0.5rem;flex-wrap:wrap;">
<input type="text" id="doc-inline-notes" placeholder="Muistiinpanot versiosta (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-doc-save-content">Tallenna</button>
<button class="btn-secondary" id="btn-doc-cancel-content">Peruuta</button>
</div>
</div>
<!-- Nykyisen version lataus (tiedostopohjaisille) -->
<div id="doc-file-section" style="margin-bottom:1.5rem;">
<button class="btn-primary" id="btn-doc-download" style="font-size:1rem;padding:0.7rem 1.5rem;">⬇️ Lataa tiedosto</button>
</div>
<!-- Uusi versio (tiedostopohjaisille) -->
<div id="doc-upload-section" style="background:#f8f9fb;padding:1rem;border-radius:10px;margin-bottom:1.5rem;">
<h4 style="margin:0 0 0.75rem;color:var(--primary-dark);">Lataa uusi versio</h4>
<div style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:end;">
<input type="file" id="doc-version-file" style="flex:1;min-width:200px;">
<input type="text" id="doc-version-notes" placeholder="Muistiinpanot (valinnainen)" style="flex:1;min-width:200px;">
<button class="btn-primary" id="btn-doc-upload-version">Lataa</button>
</div>
</div>
<!-- Versiohistoria -->
<h4 style="color:var(--primary-dark);margin-bottom:0.5rem;">Versiohistoria</h4>
<div class="table-card" style="margin:0;">
<table id="doc-versions-table">
<thead>
<tr>
<th>Versio</th>
<th>Päivämäärä</th>
<th>Lataaja</th>
<th>Muistiinpanot</th>
<th>Koko</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="doc-versions-tbody"></tbody>
</table>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="doc-edit-view" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<button class="btn-secondary" id="btn-doc-edit-back">← Takaisin</button>
</div>
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:var(--primary-dark);margin:0 0 1rem;" id="doc-edit-title">Uusi dokumentti</h3>
<form id="doc-edit-form">
<input type="hidden" id="doc-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Otsikko *</label>
<input type="text" id="doc-edit-name" required placeholder="Esim. Palvelusopimus">
</div>
<div class="form-group">
<label>Kategoria</label>
<select id="doc-edit-category">
<option value="sopimus">Sopimus</option>
<option value="lasku">Lasku</option>
<option value="ohje">Ohje</option>
<option value="raportti">Raportti</option>
<option value="kuva">Kuva</option>
<option value="muu">Muu</option>
</select>
</div>
<div class="form-group">
<label>Asiakas (valinnainen)</label>
<select id="doc-edit-customer">
<option value="">Ei asiakasta (yleinen)</option>
</select>
</div>
<div class="form-group">
<label>Tiedosto</label>
<input type="file" id="doc-edit-file">
</div>
<div class="form-group">
<label>Versioita säilytetään</label>
<select id="doc-edit-max-versions">
<option value="5">5 versiota</option>
<option value="10" selected>10 versiota</option>
<option value="20">20 versiota</option>
<option value="50">50 versiota</option>
<option value="0">Rajaton</option>
</select>
</div>
<div class="form-group full-width" id="doc-edit-desc-group">
<label>Kuvaus</label>
<textarea id="doc-edit-description" rows="3" placeholder="Dokumentin kuvaus..."></textarea>
</div>
</div>
<!-- Kokousmuistion kentät -->
<div id="doc-edit-meeting-fields" style="display:none;margin-top:1rem;">
<div class="form-group" style="margin-bottom:0.75rem;">
<label>Osallistujat</label>
<input type="text" id="doc-edit-participants" placeholder="Nimi1, Nimi2, Nimi3">
</div>
<div class="form-group">
<label>Muistion sisältö</label>
<textarea id="doc-edit-content" rows="15" placeholder="Kirjoita kokousmuistio tähän..." style="font-family:inherit;line-height:1.6;"></textarea>
</div>
</div>
<input type="hidden" id="doc-edit-folder-id">
<div style="margin-top:1rem;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="btn-doc-edit-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Tab: NetAdmin -->
<div class="tab-content" id="tab-content-netadmin">
<div class="main-container">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;flex-wrap:wrap;gap:0.5rem;">
<h3 style="color:var(--primary-dark);margin:0;">🌐 NetAdmin — Liittymät</h3>
<div style="display:flex;gap:0.5rem;align-items:center;">
<span id="netadmin-count" style="font-size:0.85rem;color:#888;"></span>
</div>
</div>
<div style="display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;">
<input type="text" id="netadmin-search" placeholder="Hae osoite, asiakas, IP, VLAN, laite, portti..." style="flex:1;min-width:200px;">
<select id="netadmin-filter-city" style="min-width:130px;">
<option value="">Kaikki kaupungit</option>
</select>
<select id="netadmin-filter-speed" style="min-width:130px;">
<option value="">Kaikki nopeudet</option>
</select>
<select id="netadmin-filter-device" style="min-width:130px;">
<option value="">Kaikki laitteet</option>
</select>
</div>
<div class="table-card">
<table id="netadmin-table">
<thead>
<tr>
<th>Asiakas</th>
<th>Osoite</th>
<th>Kaupunki</th>
<th>Nopeus</th>
<th>VLAN</th>
<th>Laite</th>
<th>Portti</th>
<th>IP</th>
<th>Gateway</th>
</tr>
</thead>
<tbody id="netadmin-tbody"></tbody>
</table>
<div id="no-netadmin" class="empty-state" style="display:none;">
<div class="empty-icon">🌐</div>
<p>Ei liittymiä.</p>
</div>
</div>
<!-- Liittymän detaljinäkymä -->
<div id="netadmin-detail-modal" class="modal" style="display:none;">
<div class="modal-content" style="max-width:550px;">
<div style="padding:1.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<h3 style="margin:0;color:var(--primary-dark);" id="netadmin-detail-title">Liittymän tiedot</h3>
<button onclick="closeNetadminDetail()" style="background:none;border:none;font-size:1.3rem;cursor:pointer;">✕</button>
</div>
<div id="netadmin-detail-customer" style="color:#888;font-size:0.85rem;margin-bottom:1rem;"></div>
<form id="netadmin-detail-form">
<input type="hidden" id="na-edit-id">
<div class="form-grid" style="grid-template-columns:1fr 1fr;">
<div class="form-group">
<label>Osoite</label>
<input type="text" id="na-edit-osoite">
</div>
<div class="form-group">
<label>Postinumero</label>
<input type="text" id="na-edit-postinumero">
</div>
<div class="form-group">
<label>Kaupunki</label>
<input type="text" id="na-edit-kaupunki">
</div>
<div class="form-group">
<label>Nopeus</label>
<select id="na-edit-nopeus">
<option value="">-</option>
<option value="10/10">10/10</option>
<option value="50/10">50/10</option>
<option value="50/50">50/50</option>
<option value="100/10">100/10</option>
<option value="100/100">100/100</option>
<option value="200/200">200/200</option>
<option value="300/300">300/300</option>
<option value="500/500">500/500</option>
<option value="1000/1000">1000/1000</option>
<option value="2000/2000">2000/2000</option>
<option value="10000/10000">10000/10000</option>
</select>
</div>
<div class="form-group">
<label>VLAN</label>
<div class="combo-wrap" id="na-combo-vlan">
<input type="text" placeholder="Hae VLANia..." autocomplete="off">
<input type="hidden" id="na-edit-vlan">
<div class="combo-list"></div>
</div>
</div>
<div class="form-group">
<label>Laite</label>
<div class="combo-wrap" id="na-combo-laite">
<input type="text" placeholder="Hae laitetta..." autocomplete="off">
<input type="hidden" id="na-edit-laite">
<div class="combo-list"></div>
</div>
</div>
<div class="form-group">
<label>Portti</label>
<input type="text" id="na-edit-portti">
</div>
<div class="form-group">
<label>IP / Verkko</label>
<div class="combo-wrap" id="na-combo-ip">
<input type="text" placeholder="Hae IP:tä tai verkkoa..." autocomplete="off">
<input type="hidden" id="na-edit-ip">
<div class="combo-list"></div>
</div>
</div>
<div class="form-group">
<label>Gateway</label>
<div class="combo-wrap" id="na-combo-gateway">
<input type="text" placeholder="Hae gateway-laitetta..." autocomplete="off">
<input type="hidden" id="na-edit-gateway">
<div class="combo-list"></div>
</div>
</div>
</div>
<div style="margin-top:1rem;display:flex;gap:0.5rem;justify-content:flex-end;">
<button type="button" class="btn-secondary" onclick="closeNetadminDetail()">Sulje</button>
<button type="submit" class="btn-primary">Tallenna</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Tab: Muutosloki -->
<div class="tab-content" id="tab-content-changelog">
<div class="main-container">
<div class="table-card">
<table id="changelog-table">
<thead>
<tr>
<th>Aika</th>
<th>Käyttäjä</th>
<th>Toiminto</th>
<th>Asiakas</th>
<th>Lisätiedot</th>
</tr>
</thead>
<tbody id="changelog-tbody"></tbody>
</table>
<div id="no-changelog" class="empty-state" style="display:none">
<div class="empty-icon">&#128220;</div>
<p>Ei lokimerkintöjä.</p>
</div>
</div>
</div>
</div>
<!-- Tab: Asiakaspalvelu -->
<div class="tab-content" id="tab-content-support">
<div class="sub-tab-bar" id="support-sub-tab-bar">
<button class="sub-tab active" data-support-subtab="support-tickets">Tiketit</button>
<button class="sub-tab" data-support-subtab="support-ohjeet">Ohjeet</button>
</div>
<div id="subtab-support-tickets" class="sub-tab-content active">
<div class="main-container">
<!-- Listanäkymä -->
<div id="ticket-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
<button class="btn-primary" id="btn-fetch-emails">&#128231; Hae postit</button>
<div class="search-bar" style="flex:1;max-width:400px;">
<span class="search-icon">&#128269;</span>
<input type="text" id="ticket-search-input" placeholder="Hae tiketeistä...">
</div>
<select id="ticket-type-filter" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="">Kaikki tyypit</option>
<option value="laskutus">Laskutus</option>
<option value="tekniikka">Tekniikka</option>
<option value="vika">Vika</option>
<option value="muu">Muu</option>
</select>
<select id="ticket-status-filter" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="">Kaikki avoimet</option>
<option value="uusi">Uusi</option>
<option value="kasittelyssa">Käsittelyssä</option>
<option value="odottaa">Odottaa vastausta</option>
<option value="ratkaistu">Ratkaistu</option>
</select>
<select id="ticket-sort" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="status">Tila → uusin</option>
<option value="updated">Päivitetty</option>
<option value="created">Luotu</option>
</select>
<input type="text" id="ticket-tag-filter" placeholder="#tagi" style="padding:9px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;max-width:120px;">
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.85rem;color:#777;cursor:pointer;white-space:nowrap;">
<input type="checkbox" id="ticket-show-closed"> Suljetut
</label>
<button class="btn-secondary" id="btn-ticket-templates" style="padding:7px 14px;font-size:0.82rem;">&#128221; Vastauspohjat</button>
<button class="btn-secondary" id="btn-ticket-rules" style="padding:7px 14px;font-size:0.82rem;">&#9881; Säännöt</button>
<button class="btn-secondary" id="btn-ticket-settings" style="padding:7px 14px;font-size:0.82rem;">&#9881; Omat asetukset</button>
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:#777;cursor:pointer;white-space:nowrap;margin-left:auto;">
<input type="checkbox" id="ticket-auto-refresh" checked> Autopäivitys
<select id="ticket-refresh-interval" style="padding:3px 6px;border:1px solid #ddd;border-radius:5px;font-size:0.8rem;">
<option value="30">30s</option>
<option value="60" selected>1 min</option>
<option value="120">2 min</option>
<option value="300">5 min</option>
</select>
</label>
</div>
<div id="ticket-fetch-status" style="display:none;padding:0.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:0.9rem;"></div>
<div id="bulk-actions-toolbar" style="display:none;align-items:center;gap:0.75rem;padding:0.6rem 1rem;background:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin-bottom:0.75rem;font-size:0.85rem;">
<span id="bulk-count" style="font-weight:600;">0 valittu</span>
<button class="btn-secondary" onclick="bulkCloseSelected()" style="padding:5px 14px;font-size:0.82rem;color:#555;border-color:#ddd;">Sulje valitut</button>
<button class="btn-danger" onclick="bulkDeleteSelected()" style="padding:5px 14px;font-size:0.82rem;">Poista valitut</button>
<button style="background:none;border:none;cursor:pointer;font-size:0.82rem;color:#888;margin-left:auto;" onclick="bulkSelectedIds.clear();document.querySelectorAll('.ticket-checkbox,#bulk-select-all').forEach(c=>c.checked=false);updateBulkToolbar();">Tyhjennä valinta</button>
</div>
<div class="table-card">
<table id="tickets-table">
<thead>
<tr>
<th style="width:30px;"><input type="checkbox" id="bulk-select-all" title="Valitse kaikki"></th>
<th>Tila</th>
<th>Asiakas</th>
<th>Tyyppi</th>
<th>Aihe</th>
<th>Postilaatikko</th>
<th>Viestejä</th>
<th>Päivitetty</th>
<th>Agentti</th>
</tr>
</thead>
<tbody id="tickets-tbody"></tbody>
</table>
<div id="no-tickets" class="empty-state" style="display:none">
<div class="empty-icon">&#128231;</div>
<p>Ei tikettejä.</p>
<p class="empty-hint">Klikkaa "Hae postit" hakeaksesi sähköpostit.</p>
</div>
</div>
<div class="summary-bar">
<span id="ticket-count">0 tikettiä</span>
<span id="ticket-status-summary"></span>
</div>
</div>
<!-- Yksittäisen tiketin näkymä -->
<div id="ticket-detail-view" style="display:none;">
<button class="btn-secondary" id="btn-ticket-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">&#8592; Takaisin listaan</button>
<div class="table-card" style="padding:1.5rem;">
<div id="ticket-detail-header"></div>
<div id="ticket-thread" class="ticket-thread"></div>
<!-- Vastauslomake -->
<div class="ticket-reply-form">
<div style="display:flex;gap:0.5rem;margin-bottom:0.75rem;align-items:center;">
<button class="btn-reply-tab active" data-reply-type="reply">&#9993; Vastaa</button>
<button class="btn-reply-tab" data-reply-type="note">&#128221; Muistiinpano</button>
<div id="reply-template-select-wrap" style="margin-left:auto;">
<select id="reply-template-select" style="padding:5px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.82rem;color:#555;">
<option value="">📝 Vastauspohjat...</option>
</select>
</div>
</div>
<div id="reply-meta-fields" style="display:flex;flex-direction:column;gap:0.4rem;margin-bottom:0.5rem;">
<div style="display:flex;align-items:center;gap:0.5rem;">
<label style="font-size:0.8rem;color:#888;min-width:60px;">Lähettäjä:</label>
<select id="reply-mailbox-select" style="flex:1;padding:5px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.85rem;"></select>
</div>
<div style="display:flex;align-items:center;gap:0.5rem;">
<label style="font-size:0.8rem;color:#888;min-width:60px;">Vast.ott.:</label>
<input type="text" id="reply-to" style="flex:1;padding:5px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.85rem;">
</div>
<div style="display:flex;align-items:center;gap:0.5rem;">
<label style="font-size:0.8rem;color:#888;min-width:60px;">CC:</label>
<input type="text" id="reply-cc" placeholder="email1@example.com, email2@example.com" style="flex:1;padding:5px 10px;border:1px solid #ddd;border-radius:6px;font-size:0.85rem;">
</div>
</div>
<textarea id="ticket-reply-body" rows="5" placeholder="Kirjoita vastaus..."></textarea>
<div style="display:flex;justify-content:space-between;align-items:center;gap:0.5rem;margin-top:0.5rem;">
<label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;color:#888;cursor:pointer;white-space:nowrap;">
<input type="checkbox" id="reply-use-signature" checked> Käytä allekirjoitusta
</label>
<button class="btn-primary" id="btn-send-reply">Lähetä vastaus</button>
</div>
<div id="signature-preview" style="display:none;padding:0.5rem 0.75rem;margin-top:0.25rem;border-left:3px solid #d0d5dd;color:#888;font-size:0.82rem;white-space:pre-line;"></div>
</div>
</div>
</div>
<!-- Sääntönäkymä -->
<div id="ticket-rules-view" style="display:none;">
<button class="btn-secondary" id="btn-rules-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">&#8592; Takaisin tiketteihin</button>
<div class="table-card" style="padding:1.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<h3 style="color:#0f3460;margin:0;">Automaattisäännöt</h3>
<button class="btn-primary" id="btn-add-rule" style="font-size:0.85rem;">+ Lisää sääntö</button>
</div>
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Säännöt soveltuvat automaattisesti uusiin tiketteihin haettaessa sähköposteja. Ensimmäinen täsmäävä sääntö voittaa.</p>
<div id="rules-list"></div>
</div>
<!-- Sääntölomake -->
<div id="rule-form-container" class="table-card" style="padding:1.5rem;margin-top:1rem;display:none;">
<h4 style="color:#0f3460;margin-bottom:1rem;" id="rule-form-title">Uusi sääntö</h4>
<input type="hidden" id="rule-form-id">
<div class="form-grid" style="max-width:600px;">
<div class="form-group full-width">
<label>Säännön nimi *</label>
<input type="text" id="rule-form-name" placeholder="esim. Sulje notifikaatiot">
</div>
<div class="form-group full-width" style="margin-top:0.5rem;">
<label style="font-weight:600;color:#0f3460;">Ehdot (molemmat pitää täsmätä jos täytetty)</label>
</div>
<div class="form-group">
<label>Lähettäjä sisältää</label>
<input type="text" id="rule-form-from" placeholder="esim. noreply@">
</div>
<div class="form-group">
<label>Otsikko sisältää</label>
<input type="text" id="rule-form-subject" placeholder="esim. saatavuuskysely">
</div>
<div class="form-group full-width" style="margin-top:0.5rem;">
<label style="font-weight:600;color:#0f3460;">Toimenpiteet</label>
</div>
<div class="form-group">
<label>Aseta tila</label>
<select id="rule-form-status">
<option value="">Ei muuteta</option>
<option value="suljettu">Suljettu</option>
<option value="kasittelyssa">Käsittelyssä</option>
<option value="ratkaistu">Ratkaistu</option>
</select>
</div>
<div class="form-group">
<label>Aseta tyyppi</label>
<select id="rule-form-type">
<option value="">Ei muuteta</option>
<option value="laskutus">Laskutus</option>
<option value="tekniikka">Tekniikka</option>
<option value="vika">Vika</option>
<option value="muu">Muu</option>
</select>
</div>
<div class="form-group">
<label>Aseta tagit (pilkulla eroteltuna)</label>
<input type="text" id="rule-form-tags" placeholder="esim. notification, automaatti">
</div>
<div class="form-group">
<label>Auto-close (päivää)</label>
<input type="number" id="rule-form-autoclose" min="0" max="365" placeholder="esim. 7" style="max-width:120px;">
</div>
</div>
<div style="display:flex;gap:0.5rem;margin-top:1rem;">
<button class="btn-primary" id="btn-save-rule">Tallenna</button>
<button class="btn-secondary" id="btn-cancel-rule">Peruuta</button>
</div>
</div>
</div>
<!-- Vastauspohjien hallinta -->
<div id="ticket-templates-view" style="display:none;">
<button class="btn-secondary" id="btn-templates-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">&#8592; Takaisin tiketteihin</button>
<div class="table-card" style="padding:1.5rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<h3 style="color:#0f3460;margin:0;">Vastauspohjat</h3>
<button class="btn-primary" id="btn-add-tpl" style="font-size:0.85rem;">+ Lisää pohja</button>
</div>
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Yrityksen yhteiset vastauspohjat tiketteihin. Valittavissa vastauslomakkeen valikosta kaikille käyttäjille.</p>
<div id="tpl-list"></div>
</div>
<!-- Pohjanlomake -->
<div id="tpl-form-container" class="table-card" style="padding:1.5rem;margin-top:1rem;display:none;">
<h4 style="color:#0f3460;margin-bottom:1rem;" id="tpl-form-title">Uusi vastauspohja</h4>
<input type="hidden" id="tpl-form-id">
<div class="form-grid" style="max-width:600px;">
<div class="form-group full-width">
<label>Nimi *</label>
<input type="text" id="tpl-form-name" placeholder="esim. Kuittaus vastaanotettu">
</div>
<div class="form-group full-width">
<label>Sisältö *</label>
<textarea id="tpl-form-body" rows="6" placeholder="Kiitos viestistäsi! Olemme vastaanottaneet asiasi ja palaamme siihen mahdollisimman pian."></textarea>
</div>
</div>
<div style="display:flex;gap:0.5rem;margin-top:1rem;">
<button class="btn-primary" id="btn-save-tpl">Tallenna</button>
<button class="btn-secondary" id="btn-cancel-tpl">Peruuta</button>
</div>
</div>
</div>
<!-- Omat asetukset -näkymä -->
<div id="ticket-settings-view" style="display:none;">
<div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
<button class="btn-secondary" onclick="closeTicketSettings()">&#8592; Takaisin</button>
<h2 style="color:#0f3460;font-size:1.15rem;margin:0;">Omat asetukset</h2>
</div>
<div class="table-card" style="padding:1.5rem;margin-bottom:1.5rem;">
<h3 style="color:#0f3460;font-size:1rem;margin-bottom:0.75rem;">Sähköpostiallekirjoitukset</h3>
<p style="color:#888;font-size:0.82rem;margin-bottom:1rem;">Allekirjoitus liitetään automaattisesti sähköpostivastausten loppuun.</p>
<div id="ticket-settings-signatures"></div>
</div>
<div class="table-card" style="padding:1.5rem;margin-bottom:1.5rem;">
<h3 style="color:#0f3460;font-size:1rem;margin-bottom:0.75rem;">Postilaatikoiden näkyvyys</h3>
<p style="color:#888;font-size:0.82rem;margin-bottom:1rem;">Poista rasti postilaatikoista joiden tikettejä et halua nähdä.</p>
<div id="ticket-settings-mailbox-visibility"></div>
</div>
<div style="display:flex;gap:0.75rem;">
<button class="btn-primary" id="btn-save-ticket-settings">Tallenna asetukset</button>
<button class="btn-secondary" onclick="closeTicketSettings()">Peruuta</button>
</div>
</div>
</div>
</div><!-- /subtab-support-tickets -->
<!-- Sub-tab: Ohjeet -->
<div id="subtab-support-ohjeet" class="sub-tab-content">
<div class="main-container">
<!-- Listanäkymä -->
<div id="guides-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;gap:0.75rem;flex-wrap:wrap;">
<div class="search-bar" style="flex:1;max-width:400px;">
<input type="text" id="guide-search-input" placeholder="Hae ohjeista...">
</div>
<div style="display:flex;gap:0.5rem;align-items:center;">
<select id="guide-category-filter" style="padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.88rem;">
<option value="">Kaikki kategoriat</option>
</select>
<button class="btn-primary" id="btn-add-guide" style="display:none;">+ Uusi ohje</button>
<button class="btn-secondary" id="btn-manage-guide-cats" style="display:none;" title="Hallinnoi kategorioita">&#9881; Kategoriat</button>
</div>
</div>
<div id="guides-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;"></div>
<div id="no-guides" class="empty-state" style="display:none;">
<p>Ei ohjeita vielä.</p>
<p class="empty-hint">Ylläpitäjä voi lisätä ohjeita "+ Uusi ohje" -napista.</p>
</div>
</div>
<!-- Lukunäkymä -->
<div id="guide-read-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-back">&larr; Takaisin</button>
</div>
<div class="table-card" style="padding:2rem 2.5rem;">
<div style="margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid #f0f2f5;">
<h1 id="guide-read-title" style="font-size:1.6rem;color:var(--primary-color);margin-bottom:0.5rem;"></h1>
<div id="guide-read-meta" style="font-size:0.82rem;color:#888;display:flex;gap:1rem;flex-wrap:wrap;"></div>
</div>
<div id="guide-read-content" class="guide-content" style="line-height:1.7;font-size:0.95rem;"></div>
<div id="guide-read-tags" style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #f0f2f5;"></div>
<div id="guide-read-actions" style="margin-top:1rem;display:none;">
<button class="btn-secondary" id="btn-edit-guide">&#9998; Muokkaa</button>
<button class="btn-link" style="color:#dc2626;margin-left:0.5rem;" id="btn-delete-guide">&#128465; Poista</button>
</div>
</div>
</div>
<!-- Muokkausnäkymä -->
<div id="guide-edit-view" style="display:none;">
<div style="margin-bottom:1rem;">
<button class="btn-secondary" id="btn-guide-edit-cancel">&larr; Peruuta</button>
</div>
<div class="table-card" style="padding:1.5rem 2rem;">
<h2 id="guide-edit-title" style="color:var(--primary-color);margin-bottom:1rem;">Uusi ohje</h2>
<form id="guide-form">
<input type="hidden" id="guide-form-id">
<div class="form-group" style="margin-bottom:1rem;">
<label for="guide-form-title">Otsikko *</label>
<input type="text" id="guide-form-title" required placeholder="Ohjeen otsikko">
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
<div class="form-group">
<label for="guide-form-category">Kategoria</label>
<select id="guide-form-category">
<option value="">Ei kategoriaa</option>
</select>
</div>
<div class="form-group">
<label for="guide-form-tags">Tagit (pilkulla erotettuna)</label>
<input type="text" id="guide-form-tags" placeholder="vpn, asennus, ohje">
</div>
</div>
<div class="form-group" style="margin-bottom:0.5rem;">
<label>Sisältö (Markdown)</label>
<div id="guide-editor-toolbar" style="display:flex;gap:0.25rem;margin-bottom:0.5rem;flex-wrap:wrap;">
<button type="button" class="guide-tb-btn" data-md="bold" title="Lihavointi"><strong>B</strong></button>
<button type="button" class="guide-tb-btn" data-md="italic" title="Kursiivi"><em>I</em></button>
<button type="button" class="guide-tb-btn" data-md="h2" title="Otsikko">H2</button>
<button type="button" class="guide-tb-btn" data-md="h3" title="Alaotsikko">H3</button>
<button type="button" class="guide-tb-btn" data-md="ul" title="Lista">&#8226; Lista</button>
<button type="button" class="guide-tb-btn" data-md="ol" title="Numeroitu lista">1. Lista</button>
<button type="button" class="guide-tb-btn" data-md="link" title="Linkki">&#128279;</button>
<button type="button" class="guide-tb-btn" data-md="code" title="Koodi">&lt;/&gt;</button>
<button type="button" class="guide-tb-btn" data-md="quote" title="Lainaus">&#10077;</button>
<button type="button" class="guide-tb-btn" id="btn-guide-image" title="Lisää kuva">&#128247; Kuva</button>
<input type="file" id="guide-image-input" accept="image/*" style="display:none;">
<span style="flex:1;"></span>
<button type="button" class="guide-tb-btn" id="btn-guide-preview-toggle">Esikatselu</button>
</div>
<textarea id="guide-form-content" rows="20" style="font-family:'SF Mono',Monaco,Consolas,monospace;font-size:0.88rem;line-height:1.6;resize:vertical;min-height:300px;" placeholder="Kirjoita Markdown-muodossa...&#10;&#10;Vinkki: Liitä kuvakaappaus suoraan Ctrl+V / ⌘V tai raahaa kuvatiedosto tähän"></textarea>
<div id="guide-preview-pane" class="guide-content" style="display:none;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;min-height:300px;background:#fafbfc;"></div>
<div style="font-size:0.78rem;color:#999;margin-top:4px;">📋 Liitä screenshot: Ctrl+V &nbsp;|&nbsp; 📁 Raahaa kuva editoriin &nbsp;|&nbsp; 📷 Tai käytä Kuva-nappia</div>
</div>
<label style="display:flex;align-items:center;gap:0.5rem;margin:0.75rem 0;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" id="guide-form-pinned"> Kiinnitetty (näkyy aina listauksen alussa)
</label>
<div style="padding:1rem 0 0 0;border-top:1px solid #eee;display:flex;gap:0.5rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="guide-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
</div>
</div><!-- /subtab-support-ohjeet -->
</div>
<!-- Tab: Käyttäjät (vain admin) -->
<div class="tab-content" id="tab-content-users">
<div class="main-container">
<div style="margin-bottom:1rem;">
<button class="btn-primary" id="btn-add-user">+ Lisää käyttäjä</button>
</div>
<div class="table-card">
<table id="users-table">
<thead>
<tr>
<th>Käyttäjätunnus</th>
<th>Nimi</th>
<th>Sähköposti</th>
<th>Rooli</th>
<th>Luotu</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="users-tbody"></tbody>
</table>
</div>
</div>
</div>
<!-- Tab: Asetukset (vain admin) -->
<div class="tab-content" id="tab-content-settings">
<div class="main-container">
<div class="table-card" style="padding:1.5rem;">
<h3 style="color:#0f3460;margin-bottom:1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;"><span id="api-company-name"></span>Saatavuus-API</h3>
<p style="color:#666;font-size:0.85rem;margin-bottom:1rem;">Julkinen API jolla verkkosivusto voi tarkistaa palvelun saatavuuden osoitteessa. Palauttaa vain osoite + nopeus - ei asiakastietoja.</p>
<div class="form-grid" style="max-width:600px;">
<div class="form-group full-width">
<label>API-avain</label>
<div style="display:flex;gap:0.5rem;">
<input type="text" id="settings-api-key" readonly style="flex:1;font-family:monospace;background:#f8f9fb;">
<button class="btn-primary" id="btn-generate-key" style="white-space:nowrap;">Generoi uusi</button>
</div>
</div>
<div class="form-group full-width">
<label>Sallitut originit (CORS) - yksi per rivi</label>
<textarea id="settings-cors" rows="3" style="font-family:monospace;font-size:0.85rem;" placeholder="https://www.yritys.fi&#10;https://yritys.fi"></textarea>
</div>
<div class="form-group full-width">
<button class="btn-primary" id="btn-save-settings">Tallenna asetukset</button>
</div>
</div>
<p style="color:#888;font-size:0.85rem;margin-top:1rem;">Sähköpostiasetukset (IMAP/postilaatikot) hallitaan Yritykset-välilehdellä.</p>
<h3 style="color:#0f3460;margin:1.5rem 0 1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">API-ohjeet</h3>
<div style="background:#f8f9fb;padding:1rem;border-radius:8px;font-size:0.85rem;font-family:monospace;overflow-x:auto;">
<div style="margin-bottom:0.75rem;"><strong>Endpoint:</strong><br>GET https://&lt;domain&gt;/api.php?action=saatavuus</div>
<div style="margin-bottom:0.75rem;"><strong>Parametrit:</strong><br>
&bull; <code>key</code> = API-avain (pakollinen)<br>
&bull; <code>osoite</code> = Katuosoite ja numero (esim. "Esimerkkikatu 1")<br>
&bull; <code>postinumero</code> = Postinumero (esim. "20100")<br>
&bull; <code>kaupunki</code> = Kaupunki (esim. "Turku")<br>
Kaikki kolme pakollisia.</div>
<div style="margin-bottom:0.75rem;"><strong>Esimerkki:</strong><br>
<code id="api-example-url">api.php?action=saatavuus&key=AVAIN&osoite=Esimerkkikatu+1&postinumero=00100&kaupunki=Helsinki</code></div>
<div><strong>Vastaus:</strong><br>
<code>{"saatavilla":true}</code> tai <code>{"saatavilla":false}</code></div>
</div>
<h3 style="color:#0f3460;margin:1.5rem 0 1rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">Testaa API</h3>
<div style="display:grid;grid-template-columns:1fr;gap:0.5rem;max-width:500px;">
<input type="text" id="test-api-address" placeholder="Osoite (esim. Esimerkkikatu 1)">
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
<input type="text" id="test-api-zip" placeholder="Postinumero" maxlength="5">
<input type="text" id="test-api-city" placeholder="Kaupunki">
</div>
<button class="btn-primary" id="btn-test-api">Testaa</button>
</div>
<pre id="test-api-result" style="margin-top:0.75rem;background:#f8f9fb;padding:1rem;border-radius:8px;font-size:0.85rem;display:none;overflow-x:auto;"></pre>
</div>
<!-- Telegram-asetukset -->
<div class="table-card" style="padding:1.5rem;margin-top:1rem;">
<h3 style="color:#0f3460;margin-bottom:0.5rem;border-bottom:2px solid #f0f2f5;padding-bottom:0.5rem;">Telegram-hälytykset</h3>
<p style="color:#666;font-size:0.85rem;margin-bottom:1rem;">URGENT-prioriteetin tiketit lähettävät hälytyksen Telegram-bottiin.</p>
<div class="form-grid" style="max-width:500px;">
<div class="form-group full-width">
<label>Bot Token</label>
<input type="text" id="settings-telegram-token" placeholder="123456:ABC-DEF..." style="font-family:monospace;">
</div>
<div class="form-group full-width">
<label>Chat ID</label>
<input type="text" id="settings-telegram-chat" placeholder="-1001234567890" style="font-family:monospace;">
</div>
<div class="form-group full-width" style="display:flex;gap:0.5rem;">
<button class="btn-primary" id="btn-save-telegram">Tallenna</button>
<button class="btn-secondary" id="btn-test-telegram">Testaa</button>
</div>
</div>
</div>
</div>
</div>
<!-- Tab: Yritykset (vain admin) -->
<div class="tab-content" id="tab-content-companies">
<div class="main-container">
<!-- Yrityslistanäkymä -->
<div id="companies-list-view">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<h3 style="color:#0f3460;margin:0;">Yritykset</h3>
<button class="btn-primary" id="btn-add-company">+ Lisää yritys</button>
</div>
<div class="table-card">
<table id="companies-table">
<thead>
<tr>
<th>ID</th>
<th>Nimi</th>
<th>Postilaatikot</th>
<th>Luotu</th>
<th>Tila</th>
<th>Toiminnot</th>
</tr>
</thead>
<tbody id="companies-tbody"></tbody>
</table>
</div>
</div>
<!-- Yrityksen asetukset -->
<div id="company-detail-view" style="display:none;">
<button class="btn-secondary" id="btn-company-back" style="color:#555;border-color:#ddd;margin-bottom:1rem;">&#8592; Takaisin yrityslistaan</button>
<div class="table-card" style="padding:1.5rem;">
<h3 style="margin-bottom:0.5rem;" id="company-detail-title">Yrityksen asetukset</h3>
<div class="form-grid" style="max-width:600px;margin-bottom:1.5rem;">
<div class="form-group">
<label>Yrityksen nimi</label>
<input type="text" id="company-edit-nimi">
</div>
<div class="form-group">
<label>Alaotsikko</label>
<input type="text" id="company-edit-subtitle" placeholder="esim. Asiakashallinta">
</div>
<div class="form-group">
<label>Pääväri</label>
<div style="display:flex;align-items:center;gap:0.5rem;">
<input type="color" id="company-edit-color" value="#0f3460" style="width:50px;height:36px;border:none;cursor:pointer;">
<input type="text" id="company-edit-color-text" placeholder="#0f3460" style="width:100px;font-family:monospace;font-size:0.85rem;">
</div>
</div>
<div class="form-group">
<label>Logo</label>
<div style="display:flex;align-items:center;gap:0.75rem;">
<img id="company-logo-preview" src="" style="height:36px;display:none;border-radius:4px;">
<input type="file" id="company-logo-upload" accept="image/png,image/jpeg,image/svg+xml,image/webp" style="font-size:0.82rem;">
</div>
</div>
<div class="form-group full-width">
<label>Domainit (yksi per rivi)</label>
<textarea id="company-edit-domains" rows="3" placeholder="intra.yritys.fi&#10;intra.toinen.fi" style="font-family:monospace;font-size:0.85rem;"></textarea>
</div>
</div>
<!-- Moduulit -->
<div style="margin-bottom:1.5rem;">
<h4 style="color:#0f3460;margin-bottom:0.5rem;font-size:0.95rem;">Käytössä olevat moduulit</h4>
<p style="color:#888;font-size:0.82rem;margin-bottom:0.75rem;">Valitse mitkä välilehdet ovat käytössä tässä yrityksessä.</p>
<div id="modules-checkboxes" style="display:flex;flex-direction:column;gap:0.4rem;">
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="customers" checked> Asiakkaat
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="support" checked> Asiakaspalvelu
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="leads"> Liidit
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="tekniikka"> Tekniikka
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="archive" checked> Arkisto
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="changelog" checked> Muutosloki
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="ohjeet"> Ohjeet
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="todo"> Tehtävät
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="documents"> Dokumentit
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="laitetilat"> Laitetilat
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="netadmin"> NetAdmin
</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;cursor:pointer;">
<input type="checkbox" data-module="settings" checked> Asetukset / API
</label>
</div>
</div>
<div class="form-group" style="margin-top:1rem;">
<label style="font-weight:600;font-size:0.9rem;">Sallitut IP-osoitteet</label>
<textarea id="company-edit-allowed-ips" rows="3" style="font-family:monospace;font-size:0.85rem;" placeholder="192.168.1.100&#10;10.0.0.0/8"></textarea>
<small style="color:#888;">Yksi IP tai CIDR per rivi. "kaikki" = ei rajoitusta.</small>
</div>
<button class="btn-primary" id="btn-save-company-settings" style="font-size:0.85rem;">Tallenna asetukset</button>
</div>
<!-- Postilaatikot -->
<div class="table-card" style="padding:1.5rem;margin-top:1rem;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
<h3 style="color:#0f3460;margin:0;">Postilaatikot (IMAP)</h3>
<button class="btn-primary" id="btn-add-mailbox" style="font-size:0.85rem;">+ Lisää postilaatikko</button>
</div>
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Sähköpostilaatikot joista asiakaspalvelutiketit haetaan.</p>
<div id="mailboxes-list"></div>
<!-- Postilaatikkolom -->
<div id="mailbox-form-container" style="display:none;margin-top:1rem;padding:1rem;background:#f8f9fb;border-radius:8px;">
<h4 style="color:#0f3460;margin-bottom:0.75rem;" id="mailbox-form-title">Uusi postilaatikko</h4>
<input type="hidden" id="mailbox-form-id">
<div style="max-width:700px;">
<div class="form-grid">
<div class="form-group full-width">
<label>Nimi (näkyy tikettilistassa) *</label>
<input type="text" id="mailbox-form-nimi" placeholder="esim. Asiakaspalvelu">
</div>
</div>
<!-- Saapuva + Lähtevä vierekkäin -->
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:0.5rem;">
<!-- Saapuva posti (IMAP) -->
<div>
<h4 style="color:#0f3460;font-size:0.9rem;margin:0 0 0.5rem;">Saapuva posti (IMAP)</h4>
<div class="form-group"><label>Palvelin</label><input type="text" id="mailbox-form-host" placeholder="mail.example.com"></div>
<div class="form-group"><label>Portti</label><input type="number" id="mailbox-form-port" value="993" placeholder="993"></div>
<div class="form-group"><label>Käyttäjätunnus</label><input type="text" id="mailbox-form-user" placeholder="asiakaspalvelu@yritys.fi"></div>
<div class="form-group"><label>Salasana</label><input type="password" id="mailbox-form-password" placeholder="••••••••"></div>
<div class="form-group"><label>Salaus</label>
<select id="mailbox-form-encryption">
<option value="ssl">SSL</option>
<option value="tls">TLS</option>
<option value="notls">Ei salausta</option>
</select>
</div>
</div>
<!-- Lähtevä posti (SMTP) -->
<div>
<h4 style="color:#0f3460;font-size:0.9rem;margin:0 0 0.5rem;">Lähtevä posti (SMTP)</h4>
<div class="form-group">
<label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;">
<input type="checkbox" id="mailbox-form-smtp-same" checked> Käytä samoja tunnuksia kuin saapuvassa
</label>
</div>
<div class="form-group"><label>Palvelin</label><input type="text" id="mailbox-form-smtp-host" placeholder="smtp.yritys.fi"></div>
<div class="form-group"><label>Portti</label><input type="number" id="mailbox-form-smtp-port" value="587" placeholder="587"></div>
<div id="smtp-custom-fields">
<div class="form-group"><label>Käyttäjätunnus</label><input type="text" id="mailbox-form-smtp-user" placeholder="asiakaspalvelu@yritys.fi"></div>
<div class="form-group"><label>Salasana</label><input type="password" id="mailbox-form-smtp-pass" placeholder="••••••••"></div>
</div>
<div class="form-group"><label>Salaus</label>
<select id="mailbox-form-smtp-encryption">
<option value="tls">STARTTLS</option>
<option value="ssl">SSL</option>
<option value="none">Ei salausta</option>
</select>
</div>
</div>
</div>
<!-- Lähettäjätiedot -->
<div class="form-grid" style="margin-top:0.75rem;">
<div class="form-group">
<label>Lähettäjän sähköposti</label>
<input type="text" id="mailbox-form-smtp-email" placeholder="asiakaspalvelu@yritys.fi">
</div>
<div class="form-group">
<label>Lähettäjän nimi</label>
<input type="text" id="mailbox-form-smtp-name" placeholder="Yritys Asiakaspalvelu">
</div>
</div>
<!-- Automaattinen vastaus -->
<div style="margin-top:0.75rem;padding:0.75rem;background:#f8f9ff;border-radius:6px;border:1px solid #e0e4f0;">
<label style="display:flex;align-items:center;gap:0.4rem;cursor:pointer;font-weight:600;font-size:0.9rem;">
<input type="checkbox" id="mailbox-form-auto-reply"> Lähetä automaattinen vastaus uusille tiketeille
</label>
<div id="auto-reply-fields" style="display:none;margin-top:0.5rem;">
<div class="form-group">
<label>Vastausviesti</label>
<textarea id="mailbox-form-auto-reply-body" rows="4" placeholder="Kiitos viestistäsi! Olemme vastaanottaneet tikettisi ja palaamme asiaan mahdollisimman pian." style="width:100%;resize:vertical;"></textarea>
</div>
</div>
</div>
</div>
<div style="display:flex;gap:0.5rem;margin-top:0.75rem;">
<button class="btn-primary" id="btn-save-mailbox">Tallenna</button>
<button class="btn-secondary" id="btn-test-smtp" style="background:#2196F3;color:#fff;border:none;">🔌 Testaa SMTP</button>
<button class="btn-secondary" id="btn-cancel-mailbox">Peruuta</button>
</div>
<pre id="smtp-test-result" style="display:none;background:#1a1a2e;color:#0f0;padding:0.75rem;border-radius:6px;font-size:0.8rem;max-height:300px;overflow:auto;margin-top:0.5rem;white-space:pre-wrap;"></pre>
</div>
</div>
<!-- Käyttäjäoikeudet -->
<div class="table-card" style="padding:1.5rem;margin-top:1rem;">
<h3 style="color:#0f3460;margin-bottom:0.5rem;">Käyttäjäoikeudet</h3>
<p style="color:#888;font-size:0.85rem;margin-bottom:1rem;">Käyttäjät joilla on pääsy tähän yritykseen.</p>
<div id="company-users-list"></div>
</div>
</div>
</div>
</div>
<footer>
<p id="footer-text">Noxus Intra &copy; 2026</p>
<button class="footer-idea-btn" onclick="openFeatureSuggestion()" title="Ehdota kehitysideaa">💡 Kehitysehdotus?</button>
</footer>
</div>
<!-- Asiakas-modal -->
<!-- Laite-modaali -->
<div id="device-modal" class="modal" style="display:none">
<div class="modal-content modal-wide">
<div class="modal-header">
<h2 id="device-modal-title">Lisää laite</h2>
<button class="modal-close" id="device-modal-close">&times;</button>
</div>
<form id="device-form">
<input type="hidden" id="device-form-id">
<div class="form-grid">
<div class="form-group">
<label for="device-form-nimi">Nimi *</label>
<input type="text" id="device-form-nimi" required>
</div>
<div class="form-group">
<label for="device-form-hallintaosoite">Hallintaosoite</label>
<input type="text" id="device-form-hallintaosoite" placeholder="10.0.0.1 tai https://...">
</div>
<div class="form-group">
<label for="device-form-serial">Serial</label>
<input type="text" id="device-form-serial">
</div>
<div class="form-group">
<label for="device-form-laitetila">Sijainti / Laitetila</label>
<select id="device-form-laitetila">
<option value="">— Ei sijaintia —</option>
</select>
</div>
<div class="form-group">
<label for="device-form-tyyppi">Tyyppi</label>
<select id="device-form-tyyppi">
<option value="">— Valitse tyyppi —</option>
<option value="Reititin">Reititin</option>
<option value="Kytkin">Kytkin</option>
<option value="Palomuuri">Palomuuri</option>
<option value="Tukiasema">Tukiasema</option>
<option value="Palvelin">Palvelin</option>
<option value="OLT">OLT</option>
<option value="ONT">ONT</option>
<option value="Mediamuunnin">Mediamuunnin</option>
<option value="Muu">Muu</option>
</select>
</div>
<div class="form-group">
<label for="device-form-funktio">Funktio</label>
<select id="device-form-funktio">
<option value="">— Valitse funktio —</option>
<option value="PE Reititin">PE Reititin</option>
<option value="EDGE Reititin">EDGE Reititin</option>
<option value="CPE Reititin">CPE Reititin</option>
<option value="Core-kytkin">Core-kytkin</option>
<option value="Aggregaatiokytkin">Aggregaatiokytkin</option>
<option value="Accesskytkin">Accesskytkin</option>
<option value="WAN Gateway">WAN Gateway</option>
<option value="WLAN Controller">WLAN Controller</option>
<option value="Asiakaslaite">Asiakaslaite</option>
<option value="Muu">Muu</option>
</select>
</div>
<div class="form-group">
<label for="device-form-malli">Malli</label>
<input type="text" id="device-form-malli" placeholder="esim. Cisco C9300">
</div>
<div class="form-group">
<label>Ping-check</label>
<label style="display:flex;align-items:center;gap:0.5rem;font-weight:normal;cursor:pointer;margin-top:0.25rem;">
<input type="checkbox" id="device-form-ping-check">
<span>Päällä</span>
</label>
</div>
<div class="form-group full-width">
<label for="device-form-lisatiedot">Lisätiedot</label>
<textarea id="device-form-lisatiedot" rows="3"></textarea>
</div>
</div>
<div class="form-actions" style="display:flex;gap:0.5rem;margin-top:1rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="device-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
<!-- IPAM Modal -->
<div id="ipam-modal" class="modal" style="display:none">
<div class="modal-content" style="max-width:560px;">
<div class="modal-header">
<h2 id="ipam-modal-title">Lisää IPAM-merkintä</h2>
<button class="modal-close" id="ipam-modal-close">&times;</button>
</div>
<form id="ipam-form">
<input type="hidden" id="ipam-form-id">
<div class="form-grid">
<div class="form-group">
<label for="ipam-form-tyyppi">Tyyppi *</label>
<select id="ipam-form-tyyppi">
<option value="subnet">Subnet</option>
<option value="vlan">VLAN</option>
<option value="ip">IP-osoite</option>
</select>
</div>
<div class="form-group">
<label for="ipam-form-verkko">Verkko / IP</label>
<input type="text" id="ipam-form-verkko" placeholder="esim. 10.0.0.0/24 tai 192.168.1.5">
</div>
<div class="form-group">
<label for="ipam-form-vlan">VLAN</label>
<input type="number" id="ipam-form-vlan" min="1" max="4094" placeholder="esim. 100">
</div>
<div class="form-group">
<label for="ipam-form-nimi">Nimi / Kuvaus</label>
<input type="text" id="ipam-form-nimi" placeholder="esim. Asiakasverkko">
</div>
<div class="form-group">
<label for="ipam-form-site">Sijainti / Laitetila</label>
<select id="ipam-form-site">
<option value="">— Ei sijaintia —</option>
</select>
</div>
<div class="form-group">
<label for="ipam-form-tila">Tila</label>
<select id="ipam-form-tila">
<option value="vapaa">Vapaa</option>
<option value="varattu">Varattu</option>
</select>
</div>
<div class="form-group full-width">
<label for="ipam-form-lisatiedot">Lisätiedot</label>
<textarea id="ipam-form-lisatiedot" rows="2"></textarea>
</div>
</div>
<div class="form-actions" style="display:flex;gap:0.5rem;margin-top:1rem;">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="ipam-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
<div id="customer-modal" class="modal" style="display:none">
<div class="modal-content modal-wide">
<div class="modal-header">
<h2 id="modal-title">Lisää asiakas</h2>
<button class="modal-close" id="modal-close">&times;</button>
</div>
<form id="customer-form">
<input type="hidden" id="form-id">
<h3>Perustiedot</h3>
<div class="form-grid">
<div class="form-group">
<label for="form-yritys">Yritys *</label>
<input type="text" id="form-yritys" required>
</div>
<div class="form-group">
<label for="form-ytunnus">Y-tunnus</label>
<input type="text" id="form-ytunnus" placeholder="1234567-8">
</div>
</div>
<h3>Liittymät <button type="button" class="btn-add-row" id="btn-add-liittyma">+ Lisää liittymä</button></h3>
<div id="liittymat-container"></div>
<h3>Yhteystiedot</h3>
<div class="form-grid">
<div class="form-group">
<label for="form-yhteyshenkilo">Yhteyshenkilö</label>
<input type="text" id="form-yhteyshenkilo">
</div>
<div class="form-group">
<label for="form-puhelin">Puhelin</label>
<input type="text" id="form-puhelin">
</div>
<div class="form-group">
<label for="form-sahkoposti">Sähköposti</label>
<input type="email" id="form-sahkoposti">
</div>
</div>
<h3>Laskutustiedot</h3>
<div class="form-group" style="margin-bottom:0.75rem;">
<label class="checkbox-label">
<input type="checkbox" id="form-billing-same">
Käytä samoja kuin ensimmäisen liittymän asennusosoite
</label>
</div>
<div id="billing-fields">
<div class="form-grid">
<div class="form-group full-width">
<label for="form-laskutusosoite">Laskutusosoite</label>
<input type="text" id="form-laskutusosoite">
</div>
<div class="form-group">
<label for="form-laskutuspostinumero">Postinumero</label>
<input type="text" id="form-laskutuspostinumero" placeholder="00100">
</div>
<div class="form-group">
<label for="form-laskutuskaupunki">Kaupunki</label>
<input type="text" id="form-laskutuskaupunki">
</div>
</div>
</div>
<div class="form-grid" style="margin-top:0.75rem;">
<div class="form-group">
<label for="form-laskutussahkoposti">Laskutussähköposti</label>
<input type="email" id="form-laskutussahkoposti">
</div>
<div class="form-group">
<label for="form-elaskuosoite">E-laskuosoite</label>
<input type="text" id="form-elaskuosoite" placeholder="esim. 003712345678">
</div>
<div class="form-group">
<label for="form-elaskuvalittaja">E-laskuvälittäjä</label>
<input type="text" id="form-elaskuvalittaja" placeholder="esim. DABAFIHH">
</div>
</div>
<h3>Lisätiedot</h3>
<div class="form-group full-width">
<textarea id="form-lisatiedot" rows="3" placeholder="Vapaamuotoiset muistiinpanot..."></textarea>
</div>
<h3>Priority-sähköpostit</h3>
<div class="form-group full-width">
<p style="color:#888;font-size:0.82rem;margin-bottom:0.3rem;">Näiltä osoitteilta saapuvat tiketit saavat automaattisesti ⚠️ Tärkeä -prioriteetin. Yksi per rivi.</p>
<textarea id="form-priority-emails" rows="3" placeholder="vip@yritys.fi&#10;toimitusjohtaja@firma.fi" style="font-family:monospace;font-size:0.85rem;"></textarea>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary" id="form-submit">Tallenna</button>
<button type="button" class="btn-secondary" id="form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
<!-- Tiedot-modal -->
<div id="detail-modal" class="modal" style="display:none">
<div class="modal-content modal-wide">
<div class="modal-header">
<h2 id="detail-title">Asiakkaan tiedot</h2>
<button class="modal-close" id="detail-close">&times;</button>
</div>
<div id="detail-body"></div>
<div class="form-actions">
<button class="btn-primary" id="detail-edit">Muokkaa</button>
<button class="btn-danger" id="detail-delete">Arkistoi</button>
<button class="btn-secondary" id="detail-cancel">Sulje</button>
</div>
</div>
</div>
<!-- Käyttäjä-modal -->
<div id="user-modal" class="modal" style="display:none">
<div class="modal-content">
<div class="modal-header">
<h2 id="user-modal-title">Lisää käyttäjä</h2>
<button class="modal-close" id="user-modal-close">&times;</button>
</div>
<form id="user-form">
<input type="hidden" id="user-form-id">
<div class="form-grid">
<div class="form-group">
<label for="user-form-username">Käyttäjätunnus *</label>
<input type="text" id="user-form-username" required>
</div>
<div class="form-group">
<label for="user-form-nimi">Nimi</label>
<input type="text" id="user-form-nimi">
</div>
<div class="form-group">
<label for="user-form-email">Sähköposti</label>
<input type="email" id="user-form-email" placeholder="nimi@esimerkki.fi">
</div>
<div class="form-group">
<label for="user-form-password">Salasana <span id="user-pw-hint"></span></label>
<input type="password" id="user-form-password">
</div>
<div class="form-group" id="user-role-group">
<label for="user-form-role">Pääkäyttäjä</label>
<select id="user-form-role">
<option value="user">Ei</option>
<option value="superadmin">Kyllä (Superadmin)</option>
</select>
</div>
<div class="form-group full-width">
<label>Yritykset ja roolit</label>
<div id="user-company-checkboxes" style="display:flex;flex-direction:column;gap:0.5rem;margin-top:0.25rem;"></div>
</div>
</div>
<div id="user-signatures-section" style="display:none;margin-top:1rem;border-top:1px solid #e5e7eb;padding-top:1rem;">
<h3 style="color:#0f3460;font-size:1rem;margin-bottom:0.75rem;">Sähköpostiallekirjoitukset</h3>
<p style="color:#888;font-size:0.82rem;margin-bottom:0.75rem;">Allekirjoitus liitetään automaattisesti sähköpostivastausten loppuun.</p>
<div id="user-signatures-list"></div>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="user-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
<!-- Oma profiili -modal -->
<div id="profile-modal" class="modal" style="display:none">
<div class="modal-content">
<div class="modal-header">
<h2>Oma profiili</h2>
<button class="modal-close" id="profile-modal-close">&times;</button>
</div>
<form id="profile-form">
<div class="form-grid">
<div class="form-group">
<label>Käyttäjätunnus</label>
<input type="text" id="profile-username" disabled style="background:#f0f2f5;">
</div>
<div class="form-group">
<label for="profile-nimi">Nimi</label>
<input type="text" id="profile-nimi">
</div>
<div class="form-group">
<label for="profile-email">Sähköposti</label>
<input type="email" id="profile-email">
</div>
<div class="form-group">
<label for="profile-password">Uusi salasana <span style="color:#999;font-size:0.82rem;">(jätä tyhjäksi jos ei muuteta)</span></label>
<input type="password" id="profile-password">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary">Tallenna</button>
<button type="button" class="btn-secondary" id="profile-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
<!-- Liidi-modal -->
<div id="lead-modal" class="modal" style="display:none">
<div class="modal-content">
<div class="modal-header">
<h2 id="lead-modal-title">Lisää liidi</h2>
<button class="modal-close" id="lead-modal-close">&times;</button>
</div>
<form id="lead-form">
<input type="hidden" id="lead-form-id">
<div class="form-grid">
<div class="form-group full-width">
<label for="lead-form-yritys">Yritys *</label>
<input type="text" id="lead-form-yritys" required>
</div>
<div class="form-group">
<label for="lead-form-yhteyshenkilo">Yhteyshenkilö</label>
<input type="text" id="lead-form-yhteyshenkilo">
</div>
<div class="form-group">
<label for="lead-form-puhelin">Puhelin</label>
<input type="text" id="lead-form-puhelin">
</div>
<div class="form-group">
<label for="lead-form-sahkoposti">Sähköposti</label>
<input type="email" id="lead-form-sahkoposti">
</div>
<div class="form-group">
<label for="lead-form-osoite">Osoite</label>
<input type="text" id="lead-form-osoite">
</div>
<div class="form-group">
<label for="lead-form-kaupunki">Kaupunki</label>
<input type="text" id="lead-form-kaupunki">
</div>
<div class="form-group">
<label for="lead-form-tila">Tila</label>
<select id="lead-form-tila">
<option value="uusi">Uusi</option>
<option value="kontaktoitu">Kontaktoitu</option>
<option value="kiinnostunut">Kiinnostunut</option>
<option value="odottaa">Odottaa toimitusta</option>
<option value="ei_kiinnosta">Ei kiinnosta</option>
</select>
</div>
<div class="form-group full-width">
<label for="lead-form-muistiinpanot">Muistiinpanot</label>
<textarea id="lead-form-muistiinpanot" rows="5" placeholder="Mitä on puhuttu, milloin otettu yhteyttä, jne..."></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn-primary" id="lead-form-submit">Tallenna</button>
<button type="button" class="btn-secondary" id="lead-form-cancel">Peruuta</button>
</div>
</form>
</div>
</div>
<!-- Liidi-tiedot-modal -->
<div id="lead-detail-modal" class="modal" style="display:none">
<div class="modal-content">
<div class="modal-header">
<h2 id="lead-detail-title">Liidin tiedot</h2>
<button class="modal-close" id="lead-detail-close">&times;</button>
</div>
<div id="lead-detail-body"></div>
<div class="form-actions">
<button class="btn-primary" id="lead-detail-edit">Muokkaa</button>
<button class="btn-add-row" id="lead-detail-convert" style="padding:8px 16px;font-size:0.85rem;">Muuta asiakkaaksi</button>
<button class="btn-danger" id="lead-detail-delete">Poista</button>
<button class="btn-secondary" id="lead-detail-cancel">Sulje</button>
</div>
</div>
</div>
<!-- Ohjeet: Kategorianhallinta-modal -->
<div id="guide-cat-modal" class="modal" style="display:none">
<div class="modal-content" style="max-width:500px;">
<div class="modal-header">
<h2>Ohjekategoriat</h2>
<button class="modal-close" id="guide-cat-modal-close">&times;</button>
</div>
<div style="padding:1.5rem;">
<div id="guide-cat-list" style="margin-bottom:1rem;"></div>
<div style="display:flex;gap:0.5rem;">
<input type="text" id="guide-cat-new-name" placeholder="Uusi kategoria..." style="flex:1;padding:8px 12px;border:2px solid #e0e0e0;border-radius:8px;font-size:0.9rem;">
<button class="btn-primary" id="btn-guide-cat-add">Lisää</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink