113 lines
3.9 KiB
HTML
113 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="tr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Numex Depo Yönetim Sistemi</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>🏭 Numex Depo Yönetim Sistemi</h1>
|
||
<p class="alt">Çok lokasyonlu stok takibi, transferler ve düşük stok uyarıları</p>
|
||
</header>
|
||
|
||
<nav class="sekmeler">
|
||
<button class="sekm secili" data-sekme="lokasyonlar">Lokasyonlar</button>
|
||
<button class="sekm" data-sekme="urunler">Ürünler</button>
|
||
<button class="sekm" data-sekme="stok">Stok</button>
|
||
<button class="sekm" data-sekme="transfer">Transfer</button>
|
||
<button class="sekm" data-sekme="gecmis">Transfer Geçmişi</button>
|
||
<button class="sekm" data-sekme="uyari">Düşük Stok Uyarıları</button>
|
||
</nav>
|
||
|
||
<main>
|
||
<!-- LOKASYONLAR -->
|
||
<section id="sekme-lokasyonlar" class="panel aktif">
|
||
<div class="kart">
|
||
<h2>Yeni Lokasyon</h2>
|
||
<form id="lokasyon-form">
|
||
<input type="text" id="lokasyon-ad" placeholder="Lokasyon adı" required>
|
||
<input type="text" id="lokasyon-sehir" placeholder="Şehir (opsiyonel)">
|
||
<button class="btn btn-ekle" type="submit">Ekle</button>
|
||
</form>
|
||
</div>
|
||
<div class="kart">
|
||
<h2>Lokasyonlar</h2>
|
||
<table>
|
||
<thead><tr><th>ID</th><th>Ad</th><th>Şehir</th><th>Oluşturuldu</th><th></th></tr></thead>
|
||
<tbody id="lokasyon-tablo"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ÜRÜNLER -->
|
||
<section id="sekme-urunler" class="panel">
|
||
<div class="kart">
|
||
<h2>Yeni Ürün</h2>
|
||
<form id="urun-form">
|
||
<input type="text" id="urun-ad" placeholder="Ürün adı" required>
|
||
<input type="text" id="urun-birim" placeholder="Birim (adet/kg)" value="adet">
|
||
<input type="number" id="urun-esik" placeholder="Düşük stok eşiği" min="0" value="0">
|
||
<button class="btn btn-ekle" type="submit">Ekle</button>
|
||
</form>
|
||
</div>
|
||
<div class="kart">
|
||
<h2>Ürünler</h2>
|
||
<table>
|
||
<thead><tr><th>ID</th><th>Ad</th><th>Birim</th><th>Düşük Stok Eşiği</th><th></th></tr></thead>
|
||
<tbody id="urun-tablo"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- STOK -->
|
||
<section id="sekme-stok" class="panel">
|
||
<div class="kart">
|
||
<h2>Lokasyon Bazlı Stok Seviyeleri</h2>
|
||
<div id="stok-gorunum"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TRANSFER -->
|
||
<section id="sekme-transfer" class="panel">
|
||
<div class="kart">
|
||
<h2>Depolar Arası Transfer</h2>
|
||
<form id="transfer-form">
|
||
<select id="transfer-kaynak" required></select>
|
||
<select id="transfer-hedef" required></select>
|
||
<select id="transfer-urun" required></select>
|
||
<input type="number" id="transfer-miktar" placeholder="Miktar" min="1" required>
|
||
<button class="btn btn-transfer" type="submit">Transfer Yap</button>
|
||
</form>
|
||
<p class="mesaj" id="transfer-mesaj"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- TRANSFER GEÇMİŞİ -->
|
||
<section id="sekme-gecmis" class="panel">
|
||
<div class="kart">
|
||
<h2>Transfer Geçmişi</h2>
|
||
<table>
|
||
<thead><tr><th>Tarih</th><th>Ürün</th><th>Kaynak</th><th>→</th><th>Hedef</th><th>Miktar</th></tr></thead>
|
||
<tbody id="gecmis-tablo"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DÜŞÜK STOK UYARILARI -->
|
||
<section id="sekme-uyari" class="panel">
|
||
<div class="kart">
|
||
<h2>Düşük Stok Uyarıları (Lokasyon Bazlı)</h2>
|
||
<table>
|
||
<thead><tr><th>Lokasyon</th><th>Ürün</th><th>Mevcut</th><th>Eşik</th><th>Durum</th></tr></thead>
|
||
<tbody id="uyari-tablo"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|