Add leads (liidit) tab for tracking potential customers
- New Liidit tab with table, search, add/edit/delete - Lead fields: company, contact, phone, email, address, city, status, notes - Status workflow: Uusi → Kontaktoitu → Kiinnostunut → Odottaa toimitusta - Color-coded status badges - Detail view with notes display - "Muuta asiakkaaksi" converts lead to customer with pre-filled data - Lead CRUD endpoints in api.php with changelog logging - leads.json added to .gitignore Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
111
index.html
111
index.html
@@ -72,6 +72,7 @@
|
||||
<!-- Tabs -->
|
||||
<div class="tab-bar">
|
||||
<button class="tab active" data-tab="customers">Asiakkaat</button>
|
||||
<button class="tab" data-tab="leads">Liidit</button>
|
||||
<button class="tab" data-tab="archive">Arkisto</button>
|
||||
<button class="tab" data-tab="changelog">Muutosloki</button>
|
||||
<button class="tab" data-tab="users" id="tab-users" style="display:none">Käyttäjät</button>
|
||||
@@ -149,6 +150,42 @@
|
||||
</div>
|
||||
</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">🔍</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">🎯</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: Arkisto -->
|
||||
<div class="tab-content" id="tab-content-archive">
|
||||
<div class="main-container">
|
||||
@@ -370,6 +407,80 @@
|
||||
</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">×</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">×</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>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user