Upload folder using huggingface_hub

index.html

@@ -36,246 +36,8 @@
       color: var(--dark);
     }
 
-    /* Login Container */
-    .login-container {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      padding: 20px;
-    }
-
-    .login-card {
-      background: var(--white);
-      border-radius: var(--radius);
-      box-shadow: var(--shadow);
-      width: 100%;
-      max-width: 480px;
-      padding: 40px;
-      animation: slideUp 0.5s;
-    }
-
-    @keyframes slideUp {
-      from {
-        transform: translateY(50px);
-        opacity: 0;
-      }
-
-      to {
-        transform: translateY(0);
-        opacity: 1;
-      }
-    }
-
-    .login-header {
-      text-align: center;
-      margin-bottom: 30px;
-    }
-
-    .login-logo {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 15px;
-      font-size: 32px;
-      font-weight: bold;
-      color: var(--primary);
-      margin-bottom: 10px;
-    }
-
-    .login-logo i {
-      font-size: 48px;
-      background: linear-gradient(135deg, var(--primary), var(--secondary));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-
-    .login-subtitle {
-      color: var(--gray);
-      font-size: 14px;
-    }
-
-    .form-group {
-      margin-bottom: 20px;
-    }
-
-    .form-group label {
-      display: block;
-      margin-bottom: 8px;
-      font-weight: 500;
-      color: var(--dark);
-    }
-
-    .input-group {
-      position: relative;
-    }
-
-    .input-group i {
-      position: absolute;
-      left: 15px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--gray);
-    }
-
-    .input-group .toggle-password {
-      position: absolute;
-      right: 15px;
-      top: 50%;
-      transform: translateY(-50%);
-      color: var(--gray);
-      cursor: pointer;
-      transition: var(--transition);
-    }
-
-    .input-group .toggle-password:hover {
-      color: var(--primary);
-    }
-
-    .form-control {
-      width: 100%;
-      padding: 12px 45px 12px 45px;
-      border: 2px solid var(--light);
-      border-radius: 8px;
-      font-size: 14px;
-      transition: var(--transition);
-    }
-
-    .form-control:focus {
-      outline: none;
-      border-color: var(--primary);
-      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-    }
-
-    .btn {
-      width: 100%;
-      padding: 12px 24px;
-      border: none;
-      border-radius: 8px;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: var(--transition);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-    }
-
-    .btn-primary {
-      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-      color: var(--white);
-    }
-
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
-    }
-
-    .btn-secondary {
-      background: var(--light);
-      color: var(--dark);
-    }
-
-    .btn-secondary:hover {
-      background: #e5e7eb;
-    }
-
-    .login-footer {
-      text-align: center;
-      margin-top: 30px;
-      padding-top: 20px;
-      border-top: 1px solid var(--light);
-    }
-
-    .login-footer a {
-      color: var(--primary);
-      text-decoration: none;
-      font-weight: 500;
-    }
-
-    .login-footer a:hover {
-      text-decoration: underline;
-    }
-
-    .auth-tabs {
-      display: flex;
-      margin-bottom: 25px;
-      background: var(--light);
-      border-radius: 8px;
-      padding: 4px;
-    }
-
-    .auth-tab {
-      flex: 1;
-      padding: 10px;
-      background: transparent;
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      font-weight: 500;
-      color: var(--gray);
-      transition: var(--transition);
-    }
-
-    .auth-tab.active {
-      background: var(--white);
-      color: var(--primary);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .subscription-info {
-      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-      color: var(--white);
-      padding: 20px;
-      border-radius: 8px;
-      margin-bottom: 25px;
-      text-align: center;
-    }
-
-    .subscription-info h3 {
-      margin-bottom: 10px;
-    }
-
-    .subscription-info p {
-      font-size: 14px;
-      opacity: 0.9;
-    }
-
-    .demo-credentials {
-      background: #dbeafe;
-      border: 1px solid #60a5fa;
-      color: #1e40af;
-      padding: 12px;
-      border-radius: 8px;
-      margin-bottom: 20px;
-      font-size: 13px;
-    }
-
-    .demo-credentials .credential-item {
-      display: flex;
-      justify-content: space-between;
-      margin: 5px 0;
-    }
-
-    .demo-credentials .copy-btn {
-      background: var(--primary);
-      color: var(--white);
-      border: none;
-      padding: 2px 8px;
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 11px;
-      transition: var(--transition);
-    }
-
-    .demo-credentials .copy-btn:hover {
-      background: var(--primary-dark);
-    }
-
-    /* Main App Styles */
     .app-container {
-      display: none;
+      display: block;
     }
 
     .container {
@@ -350,21 +112,6 @@
       color: var(--gray);
     }
 
-    .btn-logout {
-      padding: 8px 16px;
-      background: var(--danger);
-      color: var(--white);
-      border: none;
-      border-radius: 6px;
-      cursor: pointer;
-      transition: var(--transition);
-      font-size: 14px;
-    }
-
-    .btn-logout:hover {
-      background: #dc2626;
-    }
-
     .stats-bar {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -517,6 +264,30 @@
       font-size: 12px;
     }
 
+    .btn {
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: var(--transition);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+    }
+
+    .btn-primary {
+      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+      color: var(--white);
+    }
+
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
+    }
+
     .table-container {
       overflow-x: auto;
       margin-top: 20px;
@@ -649,6 +420,150 @@
       opacity: 0.8;
     }
 
+    /* Enhanced Dashboard Styles */
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+      margin-top: 30px;
+    }
+
+    .dashboard-card {
+      background: rgba(255, 255, 255, 0.5);
+      backdrop-filter: blur(10px);
+      border-radius: var(--radius);
+      padding: 25px;
+      transition: var(--transition);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+    }
+
+    .dashboard-card:hover {
+      transform: translateY(-5px);
+      box-shadow: var(--shadow);
+      background: rgba(255, 255, 255, 0.7);
+    }
+
+    .dashboard-card h3 {
+      color: var(--primary);
+      margin-bottom: 15px;
+      font-size: 18px;
+    }
+
+    .dashboard-card p {
+      color: var(--gray);
+      line-height: 1.6;
+    }
+
+    .quick-actions {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+      gap: 15px;
+      margin-top: 20px;
+    }
+
+    .quick-action-btn {
+      background: rgba(255, 255, 255, 0.8);
+      border: 2px solid var(--primary);
+      color: var(--primary);
+      padding: 20px;
+      border-radius: var(--radius);
+      text-align: center;
+      cursor: pointer;
+      transition: var(--transition);
+      text-decoration: none;
+    }
+
+    .quick-action-btn:hover {
+      background: var(--primary);
+      color: var(--white);
+      transform: translateY(-3px);
+      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
+    }
+
+    .quick-action-btn i {
+      font-size: 32px;
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    .quick-action-btn span {
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    /* New Order Form Styles */
+    .form-group {
+      margin-bottom: 20px;
+    }
+
+    .form-group label {
+      display: block;
+      margin-bottom: 8px;
+      font-weight: 500;
+      color: var(--dark);
+    }
+
+    .form-control {
+      width: 100%;
+      padding: 12px;
+      border: 2px solid var(--light);
+      border-radius: 8px;
+      font-size: 14px;
+      transition: var(--transition);
+    }
+
+    .form-control:focus {
+      outline: none;
+      border-color: var(--primary);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+
+    .form-row {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+    }
+
+    /* Calculator Styles */
+    .calculator-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+      margin-top: 30px;
+    }
+
+    .calculator-inputs {
+      background: rgba(255, 255, 255, 0.5);
+      padding: 25px;
+      border-radius: var(--radius);
+    }
+
+    .calculator-result {
+      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+      color: var(--white);
+      padding: 25px;
+      border-radius: var(--radius);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .calculator-result h3 {
+      margin-bottom: 20px;
+      font-size: 20px;
+    }
+
+    .price-display {
+      font-size: 48px;
+      font-weight: bold;
+      margin-bottom: 10px;
+    }
+
+    .price-details {
+      font-size: 14px;
+      opacity: 0.9;
+    }
+
     @media (max-width: 768px) {
       .main-content {
         grid-template-columns: 1fr;
@@ -678,121 +593,19 @@
         width: 100%;
         justify-content: space-between;
       }
+
+      .calculator-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .dashboard-grid {
+        grid-template-columns: 1fr;
+      }
     }
   </style>
 </head>
 
 <body>
-  <!-- Login Container -->
-  <div id="loginContainer" class="login-container">
-    <div class="login-card">
-      <div class="login-header">
-        <div class="login-logo">
-          <i class="fas fa-window-maximize"></i>
-          <span>PencerePro</span>
-        </div>
-        <p class="login-subtitle">Pencere Üretim Yönetim Sistemi</p>
-      </div>
-
-      <div class="subscription-info">
-        <h3><i class="fas fa-crown"></i> Premium Lisans</h3>
-        <p>Bu sistem kiralık bir yazılımdır. Lütfen giriş bilgilerinizi kullanın.</p>
-      </div>
-
-      <div class="demo-credentials">
-        <h4><i class="fas fa-key"></i> Demo Giriş Bilgileri:</h4>
-        <div class="credential-item">
-          <span><strong>Yönetici:</strong> admin / admin123</span>
-          <button class="copy-btn" onclick="copyCredentials('admin', 'admin123')">Kopyala</button>
-        </div>
-        <div class="credential-item">
-          <span><strong>Test Kullanıcı:</strong> test / test123</span>
-          <button class="copy-btn" onclick="copyCredentials('test', 'test123')">Kopyala</button>
-        </div>
-      </div>
-
-      <div class="auth-tabs">
-        <button class="auth-tab active" onclick="switchTab('login')">Giriş Yap</button>
-        <button class="auth-tab" onclick="switchTab('register')">Kayıt Ol</button>
-      </div>
-
-      <!-- Login Form -->
-      <form id="loginForm" onsubmit="handleLogin(event)">
-        <div class="form-group">
-          <label>E-posta / Kullanıcı Adı</label>
-          <div class="input-group">
-            <i class="fas fa-user"></i>
-            <input type="text" class="form-control" id="loginUsername" required placeholder="E-posta veya kullanıcı adı">
-          </div>
-        </div>
-        <div class="form-group">
-          <label>Şifre</label>
-          <div class="input-group">
-            <i class="fas fa-lock"></i>
-            <input type="password" class="form-control" id="loginPassword" required placeholder="Şifreniz">
-            <i class="fas fa-eye toggle-password" onclick="togglePassword('loginPassword')"></i>
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">
-          <i class="fas fa-sign-in-alt"></i> Giriş Yap
-        </button>
-      </form>
-
-      <!-- Register Form -->
-      <form id="registerForm" style="display: none;" onsubmit="handleRegister(event)">
-        <div class="form-group">
-          <label>Ad Soyad</label>
-          <div class="input-group">
-            <i class="fas fa-user"></i>
-            <input type="text" class="form-control" id="registerName" required placeholder="Adınız ve soyadınız">
-          </div>
-        </div>
-        <div class="form-group">
-          <label>Kullanıcı Adı</label>
-          <div class="input-group">
-            <i class="fas fa-id-badge"></i>
-            <input type="text" class="form-control" id="registerUsername" required placeholder="Kullanıcı adı">
-          </div>
-        </div>
-        <div class="form-group">
-          <label>E-posta</label>
-          <div class="input-group">
-            <i class="fas fa-envelope"></i>
-            <input type="email" class="form-control" id="registerEmail" required placeholder="E-posta adresiniz">
-          </div>
-        </div>
-        <div class="form-group">
-          <label>Şifre</label>
-          <div class="input-group">
-            <i class="fas fa-lock"></i>
-            <input type="password" class="form-control" id="registerPassword" required placeholder="Şifreniz">
-            <i class="fas fa-eye toggle-password" onclick="togglePassword('registerPassword')"></i>
-          </div>
-        </div>
-        <div class="form-group">
-          <label>Şifre Tekrar</label>
-          <div class="input-group">
-            <i class="fas fa-lock"></i>
-            <input type="password" class="form-control" id="registerPasswordConfirm" required placeholder="Şifrenizi tekrar girin">
-            <i class="fas fa-eye toggle-password" onclick="togglePassword('registerPasswordConfirm')"></i>
-          </div>
-        </div>
-        <button type="submit" class="btn btn-primary">
-          <i class="fas fa-user-plus"></i> Kayıt Ol
-        </button>
-      </form>
-
-      <div class="login-footer">
-        <p>© 2024 PencerePro - Tüm hakları saklıdır</p>
-        <p style="margin-top: 10px;">
-          <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
-            Built with anycoder <i class="fas fa-external-link-alt"></i>
-          </a>
-        </p>
-      </div>
-    </div>
-  </div>
-
   <!-- Main Application -->
   <div id="appContainer" class="app-container">
     <header>
@@ -802,14 +615,11 @@
           <span>PencerePro</span>
         </div>
         <div class="user-info">
-          <div class="user-avatar" id="userAvatar">A</div>
+          <div class="user-avatar">A</div>
           <div class="user-details">
-            <span class="user-name" id="userName">Admin User</span>
-            <span class="user-role" id="userRole">Yönetici</span>
+            <span class="user-name">Admin User</span>
+            <span class="user-role">Yönetici</span>
           </div>
-          <button class="btn-logout" onclick="logout()">
-            <i class="fas fa-sign-out-alt"></i> Çıkış
-          </button>
         </div>
       </div>
     </header>
@@ -877,10 +687,6 @@
               <i class="fas fa-chart-bar"></i>
               <span>Raporlar</span>
             </div>
-            <div class="nav-item" onclick="showSection('users')" id="usersNavItem" style="display: none;">
-              <i class="fas fa-users"></i>
-              <span>Kullanıcılar</span>
-            </div>
           </nav>
         </aside>
 
@@ -890,10 +696,42 @@
             <div class="section-header">
               <h2 class="section-title">Hoş Geldiniz!</h2>
             </div>
-            <div style="text-align: center; padding: 40px;">
-              <i class="fas fa-chart-line" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
-              <h3>PencerePro Yönetim Paneli</h3>
-              <p style="color: var(--gray); margin-top: 10px;">Sol menüden işlem seçebilirsiniz.</p>
+            
+            <div class="dashboard-grid">
+              <div class="dashboard-card">
+                <h3><i class="fas fa-chart-line"></i> İstatistikler</h3>
+                <p>Bu ay 24 yeni sipariş alındı. 18 sipariş başarıyla tamamlandı. Üretim verimliliği %75 arttı.</p>
+              </div>
+              
+              <div class="dashboard-card">
+                <h3><i class="fas fa-tasks"></i> Yapılacaklar</h3>
+                <p>• 3 sipariş üretimde bekliyor<br>• Malzeme stoğu kontrol edilmeli<br>• Haftalık rapor hazırlanmalı</p>
+              </div>
+              
+              <div class="dashboard-card">
+                <h3><i class="fas fa-bell"></i> Duyurular</h3>
+                <p>• Yeni malzeme tedarikçisi eklendi<br>• Sistem bakımı 25.01.2024'te<br>• Kampanya: %10 indirim</p>
+              </div>
+            </div>
+
+            <h3 style="margin-top: 40px; margin-bottom: 20px; color: var(--dark);">Hızlı İşlemler</h3>
+            <div class="quick-actions">
+              <div class="quick-action-btn" onclick="showSection('newOrder')">
+                <i class="fas fa-plus"></i>
+                <span>Yeni Sipariş</span>
+              </div>
+              <div class="quick-action-btn" onclick="showSection('calculator')">
+                <i class="fas fa-calculator"></i>
+                <span>Fiyat Hesapla</span>
+              </div>
+              <div class="quick-action-btn" onclick="showSection('production')">
+                <i class="fas fa-industry"></i>
+                <span>Üretim Gör</span>
+              </div>
+              <div class="quick-action-btn" onclick="showSection('reports')">
+                <i class="fas fa-file-alt"></i>
+                <span>Rapor Al</span>
+              </div>
             </div>
           </section>
 
@@ -912,6 +750,7 @@
                     <th>Ölçüler</th>
                     <th>Tarih</th>
                     <th>Durum</th>
+                    <th>İşlemler</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -922,6 +761,10 @@
                     <td>120x150 cm</td>
                     <td>15.01.2024</td>
                     <td><span class="status-badge status-completed">Tamamlandı</span></td>
+                    <td>
+                      <button class="action-btn edit" onclick="editOrder('2024001')"><i class="fas fa-edit"></i></button>
+                      <button class="action-btn delete" onclick="deleteOrder('2024001')"><i class="fas fa-trash"></i></button>
+                    </td>
                   </tr>
                   <tr>
                     <td>#2024002</td>
@@ -930,6 +773,10 @@
                     <td>100x120 cm</td>
                     <td>16.01.2024</td>
                     <td><span class="status-badge status-processing">Üretimde</span></td>
+                    <td>
+                      <button class="action-btn edit" onclick="editOrder('2024002')"><i class="fas fa-edit"></i></button>
+                      <button class="action-btn delete" onclick="deleteOrder('2024002')"><i class="fas fa-trash"></i></button>
+                    </td>
                   </tr>
                   <tr>
                     <td>#2024003</td>
@@ -938,6 +785,34 @@
                     <td>90x110 cm</td>
                     <td>17.01.2024</td>
                     <td><span class="status-badge status-pending">Beklemede</span></td>
+                    <td>
+                      <button class="action-btn edit" onclick="editOrder('2024003')"><i class="fas fa-edit"></i></button>
+                      <button class="action-btn delete" onclick="deleteOrder('2024003')"><i class="fas fa-trash"></i></button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>#2024004</td>
+                    <td>Zeynep Ak</td>
+                    <td>Çift Kanatlı</td>
+                    <td>140x180 cm</td>
+                    <td>18.01.2024</td>
+                    <td><span class="status-badge status-processing">Üretimde</span></td>
+                    <td>
+                      <button class="action-btn edit" onclick="editOrder('2024004')"><i class="fas fa-edit"></i></button>
+                      <button class="action-btn delete" onclick="deleteOrder('2024004')"><i class="fas fa-trash"></i></button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>#2024005</td>
+                    <td>Mustafa Çelik</td>
+                    <td>Sabit</td>
+                    <td>80x100 cm</td>
+                    <td>19.01.2024</td>
+                    <td><span class="status-badge status-pending">Beklemede</span></td>
+                    <td>
+                      <button class="action-btn edit" onclick="editOrder('2024005')"><i class="fas fa-edit"></i></button>
+                      <button class="action-btn delete" onclick="deleteOrder('2024005')"><i class="fas fa-trash"></i></button>
+                    </td>
                   </tr>
                 </tbody>
               </table>
@@ -949,22 +824,130 @@
             <div class="section-header">
               <h2 class="section-title">Yeni Sipariş</h2>
             </div>
-            <div style="text-align: center; padding: 40px;">
-              <i class="fas fa-plus-circle" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
-              <h3>Yeni Sipariş Formu</h3>
-              <p style="color: var(--gray); margin-top: 10px;">Sipariş formu burada gösterilecektir.</p>
-            </div>
+            <form onsubmit="saveOrder(event)">
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Müşteri Adı</label>
+                  <input type="text" class="form-control" placeholder="Müşteri adı soyadı" required>
+                </div>
+                <div class="form-group">
+                  <label>Telefon</label>
+                  <input type="tel" class="form-control" placeholder="Telefon numarası" required>
+                </div>
+              </div>
+              
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Pencere Tipi</label>
+                  <select class="form-control" required>
+                    <option value="">Seçiniz...</option>
+                    <option value="sabit">Sabit</option>
+                    <option value="tek-kanat">Tek Kanatlı</option>
+                    <option value="cift-kanat">Çift Kanatlı</option>
+                    <option value="panjur">Panjur</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>Malzeme</label>
+                  <select class="form-control" required>
+                    <option value="">Seçiniz...</option>
+                    <option value="pvc">PVC</option>
+                    <option value="aluminyum">Alüminyum</option>
+                    <option value="ahsap">Ahşap</option>
+                  </select>
+                </div>
+              </div>
+              
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Genişlik (cm)</label>
+                  <input type="number" class="form-control" placeholder="Genişlik" min="10" required>
+                </div>
+                <div class="form-group">
+                  <label>Yükseklik (cm)</label>
+                  <input type="number" class="form-control" placeholder="Yükseklik" min="10" required>
+                </div>
+              </div>
+              
+              <div class="form-group">
+                <label>Notlar</label>
+                <textarea class="form-control" rows="3" placeholder="Ek notlar..."></textarea>
+              </div>
+              
+              <button type="submit" class="btn btn-primary">
+                <i class="fas fa-save"></i> Siparişi Kaydet
+              </button>
+            </form>
           </section>
 
           <!-- Calculator Section -->
           <section id="calculator" class="section">
             <div class="section-header">
-              <h2 class="section-title">Hesaplama</h2>
+              <h2 class="section-title">Fiyat Hesaplama</h2>
             </div>
-            <div style="text-align: center; padding: 40px;">
-              <i class="fas fa-calculator" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
-              <h3>Fiyat Hesaplama</h3>
-              <p style="color: var(--gray); margin-top: 10px;">Hesaplama aracı burada gösterilecektir.</p>
+            
+            <div class="calculator-grid">
+              <div class="calculator-inputs">
+                <form onsubmit="calculatePrice(event)">
+                  <div class="form-group">
+                    <label>Pencere Tipi</label>
+                    <select class="form-control" id="calcType" onchange="updatePrice()" required>
+                      <option value="">Seçiniz...</option>
+                      <option value="sabit">Sabit - +0%</option>
+                      <option value="tek-kanat">Tek Kanatlı - +10%</option>
+                      <option value="cift-kanat">Çift Kanatlı - +20%</option>
+                      <option value="panjur">Panjur - +30%</option>
+                    </select>
+                  </div>
+                  
+                  <div class="form-group">
+                    <label>Malzeme</label>
+                    <select class="form-control" id="calcMaterial" onchange="updatePrice()" required>
+                      <option value="">Seçiniz...</option>
+                      <option value="pvc">PVC - 500₺/m²</option>
+                      <option value="aluminyum">Alüminyum - 750₺/m²</option>
+                      <option value="ahsap">Ahşap - 1000₺/m²</option>
+                    </select>
+                  </div>
+                  
+                  <div class="form-row">
+                    <div class="form-group">
+                      <label>Genişlik (cm)</label>
+                      <input type="number" class="form-control" id="calcWidth" placeholder="Genişlik" min="10" onchange="updatePrice()" required>
+                    </div>
+                    <div class="form-group">
+                      <label>Yükseklik (cm)</label>
+                      <input type="number" class="form-control" id="calcHeight" placeholder="Yükseklik" min="10" onchange="updatePrice()" required>
+                    </div>
+                  </div>
+                  
+                  <div class="form-group">
+                    <label>Ekstralar</label>
+                    <div style="display: flex; gap: 15px; margin-top: 10px;">
+                      <label>
+                        <input type="checkbox" value="cam" onchange="updatePrice()"> 
+                        Cam Film (+50₺)
+                      </label>
+                      <label>
+                        <input type="checkbox" value="sineklik" onchange="updatePrice()"> 
+                        Sineklik (+100₺)
+                      </label>
+                      <label>
+                        <input type="checkbox" value="izolasyon" onchange="updatePrice()"> 
+                        İzolasyon (+150₺)
+                      </label>
+                    </div>
+                  </div>
+                </form>
+              </div>
+              
+              <div class="calculator-result">
+                <h3>Hesaplanan Fiyat</h3>
+                <div class="price-display" id="totalPrice">0 ₺</div>
+                <div class="price-details" id="priceDetails">
+                  Lütfen ölçüleri ve seçenekleri girin
+                </div>
+              </div>
             </div>
           </section>
 
@@ -973,10 +956,49 @@
             <div class="section-header">
               <h2 class="section-title">Üretim Takibi</h2>
             </div>
-            <div style="text-align: center; padding: 40px;">
-              <i class="fas fa-industry" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
-              <h3>Üretim Yönetimi</h3>
-              <p style="color: var(--gray); margin-top: 10px;">Üretim takip arayüzü burada gösterilecektir.</p>
+            <div class="table-container">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Sipariş No</th>
+                    <th>Müşteri</th>
+                    <th>Operasyon</th>
+                    <th>Başlangıç</th>
+                    <th>Bitiş</th>
+                    <th>Durum</th>
+                    <th>İlerleme</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>#2024002</td>
+                    <td>Ayşe Demir</td>
+                    <td>Kesim</td>
+                    <td>08:00</td>
+                    <td>10:30</td>
+                    <td><span class="status-badge status-completed">Tamamlandı</span></td>
+                    <td>100%</td>
+                  </tr>
+                  <tr>
+                    <td>#2024004</td>
+                    <td>Zeynep Ak</td>
+                    <td>Montaj</td>
+                    <td>11:00</td>
+                    <td>Devamıyor</td>
+                    <td><span class="status-badge status-processing">İşlemde</span></td>
+                    <td>65%</td>
+                  </tr>
+                  <tr>
+                    <td>#2024003</td>
+                    <td>Mehmet Kaya</td>
+                    <td>Bekliyor</td>
+                    <td>-</td>
+                    <td>-</td>
+                    <td><span class="status-badge status-pending">Beklemede</span></td>
+                    <td>0%</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </section>
 
@@ -985,130 +1007,56 @@
             <div class="section-header">
               <h2 class="section-title">Malzeme Stok</h2>
             </div>
-            <div style="text-align: center; padding: 40px;">
-              <i class="fas fa-boxes" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
-              <h3>Stok Yönetimi</h3>
-              <p style="color: var(--gray); margin-top: 10px;">Malzeme stok arayüzü burada gösterilecektir.</p>
-            </div>
-          </section>
-
-          <!-- Reports Section -->
-          <section id="reports" class="section">
-            <div class="section-header">
-              <h2 class="section-title">Raporlar</h2>
-            </div>
-            <div style="text-align: center; padding: 40px;">
-              <i class="fas fa-chart-bar" style="font-size: 64px; color: var(--primary); margin-bottom: 20px;"></i>
-              <h3>Raporlama</h3>
-              <p style="color: var(--gray); margin-top: 10px;">Raporlama arayüzü burada gösterilecektir.</p>
-            </div>
-          </section>
-
-          <!-- Users Section -->
-          <section id="users" class="section">
-            <div class="section-header">
-              <h2 class="section-title">Kullanıcı Yönetimi</h2>
-              <button class="btn btn-primary btn-sm" onclick="showAddUserModal()">
-                <i class="fas fa-plus"></i> Yeni Kullanıcı
-              </button>
-            </div>
             <div class="table-container">
               <table>
                 <thead>
                   <tr>
-                    <th>Kullanıcı Adı</th>
-                    <th>Ad Soyad</th>
-                    <th>E-posta</th>
-                    <th>Rol</th>
+                    <th>Malzeme</th>
+                    <th>Tür</th>
+                    <th>Stok Miktarı</th>
+                    <th>Birim</th>
+                    <th>Kritik Seviye</th>
+                    <th>Son Güncelleme</th>
                     <th>Durum</th>
-                    <th>İşlemler</th>
                   </tr>
                 </thead>
-                <tbody id="usersTableBody">
-                  <!-- Users will be loaded here -->
+                <tbody>
+                  <tr>
+                    <td>PVC Profil</td>
+                    <td>Çerçeve</td>
+                    <td>450</td>
+                    <td>Metre</td>
+                    <td>200</td>
+                    <td>20.01.2024</td>
+                    <td><span class="status-badge status-active">Stokta</span></td>
+                  </tr>
+                  <tr>
+                    <td>Cam</td>
+                    <td>4mm</td>
+                    <td>120</td>
+                    <td>m²</td>
+                    <td>50</td>
+                    <td>19.01.2024</td>
+                    <td><span class="status-badge status-active">Stokta</span></td>
+                  </tr>
+                  <tr>
+                    <td>Kilit Mekanizma</td>
+                    <td>Standart</td>
+                    <td>35</td>
+                    <td>Adet</td>
+                    <td>30</td>
+                    <td>18.01.2024</td>
+                    <td><span class="status-badge status-pending">Düşük Stok</span></td>
+                  </tr>
+                  <tr>
+                    <td>Conta</td>
+                    <td>Siyah</td>
+                    <td>850</td>
+                    <td>Metre</td>
+                    <td>100</td>
+                    <td>20.01.2024</td>
+                    <td><span class="status-badge status-active">Stokta</span></td>
+                  </tr>
                 </tbody>
               </table>
-            </div>
-          </section>
-        </main>
-      </div>
-    </div>
-  </div>
-
-  <!-- Toast Notification -->
-  <div id="toast" class="toast">
-    <i class="fas fa-check-circle"></i>
-    <span id="toastMessage">İşlem başarılı!</span>
-  </div>
-
-  <script>
-    // User Management System
-    let currentUser = null;
-    let users = [];
-
-    // Initialize users with default accounts
-    function initializeUsers() {
-      const savedUsers = localStorage.getItem('pencereProUsers');
-      
-      if (savedUsers) {
-        users = JSON.parse(savedUsers);
-      } else {
-        // Create default users
-        users = [
-          {
-            id: 1,
-            username: 'admin',
-            email: 'admin@pencerepro.com',
-            name: 'Administrator',
-            password: 'admin123',
-            role: 'admin',
-            status: 'active',
-            createdAt: new Date().toISOString()
-          },
-          {
-            id: 2,
-            username: 'test',
-            email: 'test@pencerepro.com',
-            name: 'Test User',
-            password: 'test123',
-            role: 'user',
-            status: 'active',
-            createdAt: new Date().toISOString()
-          }
-        ];
-        localStorage.setItem('pencereProUsers', JSON.stringify(users));
-        console.log('Default users created:', users);
-      }
-    }
-
-    // Initialize on page load
-    window.onload = function() {
-      initializeUsers();
-      
-      const savedUser = localStorage.getItem('pencereProCurrentUser');
-      if (savedUser) {
-        currentUser = JSON.parse(savedUser);
-        showApp();
-      }
-    };
-
-    function switchTab(tab) {
-      const tabs = document.querySelectorAll('.auth-tab');
-      tabs.forEach(t => t.classList.remove('active'));
-      
-      if (tab === 'login') {
-        tabs[0].classList.add('active');
-        document.getElementById('loginForm').style.display = 'block';
-        document.getElementById('registerForm').style.display = 'none';
-      } else {
-        tabs[1].classList.add('active');
-        document.getElementById('loginForm').style.display = 'none';
-        document.getElementById('registerForm').style.display = 'block';
-      }
-    }
-
-    function togglePassword(fieldId) {
-      const field = document.getElementById(fieldId);
-      const icon = field.nextElementSibling;
-      
-      if (field
+            </