Jukka Lampikoski
297ba39c4f
Password-protected intranet for managing fiber internet customers: - Customer table (company, address, speed, price) - Click row to view full details (contact & billing info) - Add, edit, delete customers - Search and sortable columns - Total billing summary - PHP + vanilla JS + JSON storage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
161 lines
6.5 KiB
HTML
161 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fi">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CuituNet Intra - Asiakashallinta</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- Login -->
|
|
<div id="login-screen" class="login-screen">
|
|
<div class="login-box">
|
|
<h1>🔒 CuituNet Intra</h1>
|
|
<p>Kirjaudu sisään</p>
|
|
<form id="login-form">
|
|
<input type="password" id="login-password" placeholder="Salasana" required autofocus>
|
|
<button type="submit">Kirjaudu</button>
|
|
</form>
|
|
<div id="login-error" class="error" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard -->
|
|
<div id="dashboard" style="display:none">
|
|
<header>
|
|
<div class="header-left">
|
|
<h1>CuituNet Intra</h1>
|
|
<span class="subtitle">Asiakashallinta</span>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="btn-add" class="btn-primary">+ Lisää asiakas</button>
|
|
<button id="btn-logout" class="btn-secondary">Kirjaudu ulos</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Haku -->
|
|
<div class="search-bar">
|
|
<input type="text" id="search-input" placeholder="Hae yrityksen nimellä tai osoitteella...">
|
|
</div>
|
|
|
|
<!-- Taulukko -->
|
|
<div class="table-container">
|
|
<table id="customer-table">
|
|
<thead>
|
|
<tr>
|
|
<th data-sort="yritys">Yritys ↕</th>
|
|
<th data-sort="asennusosoite">Asennusosoite ↕</th>
|
|
<th data-sort="liittymanopeus">Nopeus ↕</th>
|
|
<th data-sort="hinta">Hinta/kk ↕</th>
|
|
<th>Toiminnot</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="customer-tbody"></tbody>
|
|
</table>
|
|
<div id="no-customers" class="empty-state" style="display:none">
|
|
<p>Ei asiakkaita vielä. Lisää ensimmäinen asiakas!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Yhteenveto -->
|
|
<div class="summary-bar">
|
|
<span id="customer-count">0 asiakasta</span>
|
|
<span id="total-billing">Laskutus yhteensä: 0,00 €/kk</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Asiakas-modal -->
|
|
<div id="customer-modal" class="modal" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title">Lisää asiakas</h2>
|
|
<button class="modal-close" id="modal-close">×</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 class="form-group">
|
|
<label for="form-asennusosoite">Asennusosoite</label>
|
|
<input type="text" id="form-asennusosoite">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-liittymanopeus">Liittymänopeus</label>
|
|
<input type="text" id="form-liittymanopeus" placeholder="esim. 100/100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="form-hinta">Hinta €/kk</label>
|
|
<input type="number" id="form-hinta" step="0.01" min="0">
|
|
</div>
|
|
</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-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-laskutussahkoposti">Laskutussähköposti</label>
|
|
<input type="email" id="form-laskutussahkoposti">
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Lisätiedot</h3>
|
|
<div class="form-group full-width">
|
|
<textarea id="form-lisatiedot" rows="3" placeholder="Vapaamuotoiset muistiinpanot..."></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 (klikkaa riviä) -->
|
|
<div id="detail-modal" class="modal" style="display:none">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="detail-title">Asiakkaan tiedot</h2>
|
|
<button class="modal-close" id="detail-close">×</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">Poista</button>
|
|
<button class="btn-secondary" id="detail-cancel">Sulje</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|