сделай сайт для учета сделок по продажам, додумай сам как сделать лучше, реализуй с помощью веб-технологий вроде HTML, CSS, JavaScript, PHPи базой данный SQL на первой странице должны быть представлены общая сумма на затраты на закупки, общая сумма продаж, маржинальность сделок, информация по сделками краткий список последних сделок, график статистики по продажам, сделки должны иметь собственный номер которые начинаются с MT сделки должны иметь статусы активные, в ожидании, завершены, отменены. В системе должен быть реализован поиск по сделками клиентам и поставщикам. В системе должна быть возможность учитывать клиентов поставщиков и сделки продаж по ним. при создании сделок должно открываться новое окно в котором будет табличная форма с редактируемыми полями "порядковый номер", "наименование товара", "количество", "цена за единицу с ндс 5%", "общая стоимость с ндс 5%", "накрутка в процентах", "наименование товара закупки", "цена закупки за шт.", "общая цена закупки за шт.", "поставщик товара", Столбец цена за единицу с ндс 5% должна зависеть от цена закупки за шт. и увеличиваться на процент указанный в столбике накрутка в процентах, при этом должна быть возможность менять цены в столбике "цена за единицу с ндс 5%" вручную если необходимо, должна быть возможность массовой работы с товарами на пример все проставить накрутку 30%, должна быть возможность указать что товар доставлен поставив галочку, должна быть возможность массовой загрузки товаров в таблицу с помощью excel, должен быть доступен импорт товаров путем скачивания таблицы excel на компьютер, должна быть возможность указывать поставщиков для каждой сделки, должна быть возможность добавлять множество сделок клиенту, у каждого клиента должна быть карточка в которой будет указаны какие сделки с ним совершались и какие товары он покупал, должна быть взаимосвязь между сделками клиентами и поставщиками, должна быть возможность хранить и заполнять данные о клиенте и поставщике такие как контактные данные почта телефон лицо для связи, должно быть место куда можно записать какие то комментарии, все расчеты должны быть в рублях, язык интерфейса русский

components/deal-modal.js

@@ -38,7 +38,7 @@ class CustomDealModal extends HTMLElement {
                                     </svg>
                                 </button>
                             </div>
-<div class="modal-body">
+                            <div class="modal-body">
                                 <div class="grid grid-cols-1 gap-4 mb-6">
                                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                         <div>
@@ -50,11 +50,11 @@ class CustomDealModal extends HTMLElement {
                                                 <option>Wayne Enterprises</option>
                                                 <option>Stark Industries</option>
                                             </select>
-</div>
+                                        </div>
                                         <div>
                                             <label for="dealDate" class="block text-sm font-medium text-gray-700">Дата сделки</label>
                                             <input type="date" id="dealDate" class="form-input mt-1" required>
-</div>
+                                        </div>
                                     </div>
                                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                         <div>
@@ -66,7 +66,7 @@ class CustomDealModal extends HTMLElement {
                                                 <option>Hardware World</option>
                                                 <option>Component King</option>
                                             </select>
-</div>
+                                        </div>
                                         <div>
                                             <label for="status" class="block text-sm font-medium text-gray-700">Статус</label>
                                             <select id="status" class="form-input mt-1" required>
@@ -76,34 +76,39 @@ class CustomDealModal extends HTMLElement {
                                                 <option>Завершена</option>
                                                 <option>Отменена</option>
                                             </select>
-</div>
+                                        </div>
                                     </div>
                                     <div>
                                         <label for="notes" class="block text-sm font-medium text-gray-700">Примечания</label>
                                         <textarea id="notes" rows="3" class="form-input mt-1" placeholder="Дополнительная информация"></textarea>
-</div>
+                                    </div>
                                 </div>
                                 
                                 <div class="border-t border-b border-gray-200 py-4 mb-4">
                                     <div class="flex justify-between items-center">
-                                        <h4 class="text-lg font-medium text-gray-900">Items</h4>
+                                        <h4 class="text-lg font-medium text-gray-900">Товары</h4>
                                         <div class="flex space-x-2">
-                <button onclick="importExcel()" class="btn-secondary">
-                    <i data-feather="upload" class="w-4 h-4 mr-2"></i> Импорт
-                </button>
-                <button onclick="exportExcel()" class="btn-secondary">
-                    <i data-feather="download" class="w-4 h-4 mr-2"></i> Экспорт
-                </button>
-                <button onclick="createNewDeal()" class="btn-primary">
-                    <i data-feather="save" class="w-4 h-4 mr-2"></i> Сохранить сделку
-                </button>
-</div>
+                                            <button onclick="importExcel()" class="btn-secondary">
+                                                <i data-feather="upload" class="w-4 h-4 mr-2"></i> Импорт
+                                            </button>
+                                            <button onclick="exportExcel()" class="btn-secondary">
+                                                <i data-feather="download" class="w-4 h-4 mr-2"></i> Экспорт
+                                            </button>
+                                            <button onclick="createNewDeal()" class="btn-primary">
+                                                <i data-feather="save" class="w-4 h-4 mr-2"></i> Сохранить сделку
+                                            </button>
+                                        </div>
                                     </div>
                                 </div>
                                 
-                                <div class="overflow-x-auto">
-                                    <table class="min-w-full divide-y divide-gray-200">
-                                        <thead class="bg-gray-50">
-                                            <tr>
-                                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                                                <th scope="col" class="px-6 py-3 text
+                                <slot></slot>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-deal-modal', CustomDealModal);

components/deal-table.js

@@ -23,12 +23,12 @@ class CustomDealTable extends HTMLElement {
                 <table class="table">
                     <thead>
                         <tr>
-                            <th>Deal ID</th>
-                            <th>Client</th>
-                            <th>Date</th>
-                            <th>Total</th>
-                            <th>Status</th>
-                            <th>Actions</th>
+                            <th>ID Сделки</th>
+                            <th>Клиент</th>
+                            <th>Дата</th>
+                            <th>Сумма</th>
+                            <th>Статус</th>
+                            <th>Действия</th>
                         </tr>
                     </thead>
                     <tbody class="bg-white divide-y divide-gray-200">
@@ -37,21 +37,21 @@ class CustomDealTable extends HTMLElement {
                                 <div class="text-sm font-medium text-gray-900">MT-2023-0425</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">Acme Corporation</div>
-                                <div class="text-sm text-gray-500">John Doe</div>
+                                <div class="text-sm text-gray-900">Компания Acme</div>
+                                <div class="text-sm text-gray-500">Иван Иванов</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">2023-04-25</div>
+                                <div class="text-sm text-gray-900">25.04.2023</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">€2,480</div>
+                                <div class="text-sm font-medium text-gray-900">24 800 ₽</div>
                             </td>
                             <td class="px-6 py-4">
-                                <span class="status-badge status-active">Active</span>
+                                <span class="status-badge status-active">Активна</span>
                             </td>
                             <td class="px-6 py-4 text-right text-sm font-medium">
-                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">Просмотр</a>
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Редакт.</a>
                             </td>
                         </tr>
                         <tr>
@@ -60,20 +60,20 @@ class CustomDealTable extends HTMLElement {
                             </td>
                             <td class="px-6 py-4">
                                 <div class="text-sm text-gray-900">Globex Inc</div>
-                                <div class="text-sm text-gray-500">Jane Smith</div>
+                                <div class="text-sm text-gray-500">Мария Петрова</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">2023-04-24</div>
+                                <div class="text-sm text-gray-900">24.04.2023</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">€3,750</div>
+                                <div class="text-sm font-medium text-gray-900">37 500 ₽</div>
                             </td>
                             <td class="px-6 py-4">
-                                <span class="status-badge status-completed">Completed</span>
+                                <span class="status-badge status-completed">Завершена</span>
                             </td>
                             <td class="px-6 py-4 text-right text-sm font-medium">
-                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">Просмотр</a>
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Редакт.</a>
                             </td>
                         </tr>
                         <tr>
@@ -82,64 +82,20 @@ class CustomDealTable extends HTMLElement {
                             </td>
                             <td class="px-6 py-4">
                                 <div class="text-sm text-gray-900">Wayne Enterprises</div>
-                                <div class="text-sm text-gray-500">Bruce Wayne</div>
+                                <div class="text-sm text-gray-500">Алексей Смирнов</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">2023-04-23</div>
+                                <div class="text-sm text-gray-900">23.04.2023</div>
                             </td>
                             <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">€1,920</div>
+                                <div class="text-sm font-medium text-gray-900">19 200 ₽</div>
                             </td>
                             <td class="px-6 py-4">
-                                <span class="status-badge status-pending">Pending</span>
+                                <span class="status-badge status-pending">В ожидании</span>
                             </td>
                             <td class="px-6 py-4 text-right text-sm font-medium">
-                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">MT-2023-0422</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">Stark Industries</div>
-                                <div class="text-sm text-gray-500">Tony Stark</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">2023-04-22</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">€5,600</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="status-badge status-cancelled">Cancelled</span>
-                            </td>
-                            <td class="px-6 py-4 text-right text-sm font-medium">
-                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">MT-2023-0421</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">Umbrella Corp</div>
-                                <div class="text-sm text-gray-500">Albert Wesker</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm text-gray-900">2023-04-21</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <div class="text-sm font-medium text-gray-900">€4,250</div>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="status-badge status-completed">Completed</span>
-                            </td>
-                            <td class="px-6 py-4 text-right text-sm font-medium">
-                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">View</a>
-                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Edit</a>
+                                <a href="deal-detail.html" class="text-blue-600 hover:text-blue-900 mr-3">Просмотр</a>
+                                <a href="#" class="text-indigo-600 hover:text-indigo-900">Редакт.</a>
                             </td>
                         </tr>
                     </tbody>

components/navbar.js

@@ -4,13 +4,32 @@ class CustomNavbar extends HTMLElement {
         this.shadowRoot.innerHTML = `
             <style>
                 nav {
-                    background: white;
-                    padding: 1rem;
-                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                    @apply bg-white shadow-sm fixed w-full z-10;
+                    height: 60px;
+                }
+                .navbar-container {
+                    @apply flex items-center justify-between h-full px-4;
+                }
+                .logo {
+                    @apply text-xl font-bold text-gray-800;
+                }
+                .user-menu {
+                    @apply flex items-center space-x-4;
+                }
+                .user-avatar {
+                    @apply h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center;
                 }
             </style>
             <nav>
-                <h2 class="text-xl font-bold">DealFlow Tracker</h2>
+                <div class="navbar-container">
+                    <div class="logo">DealFlow Tracker</div>
+                    <div class="user-menu">
+                        <div class="text-sm font-medium">Администратор</div>
+                        <div class="user-avatar">
+                            <i data-feather="user"></i>
+                        </div>
+                    </div>
+                </div>
             </nav>
         `;
     }

components/product-table.js

@@ -1,92 +1,11 @@
+```javascript
 class CustomProductTable extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: 'open' });
-    this.shadowRoot.innerHTML = `
-      <style>
-        .table-container {
-          @apply overflow-x-auto mb-4;
-        }
-        .table {
-          @apply min-w-full divide-y divide-gray-200;
-        }
-        .table th {
-          @apply px-4 py-2 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
-        }
-        .table td {
-          @apply px-4 py-2 whitespace-nowrap text-sm text-gray-500;
-        }
-        .table input, .table select {
-          @apply w-full border border-gray-300 rounded px-2 py-1 text-sm;
-        }
-        .table tr:hover {
-          @apply bg-gray-50;
-        }
-        .actions-toolbar {
-          @apply flex justify-between items-center mb-4;
-        }
-      </style>
-      <div>
-        <div class="actions-toolbar">
-          <div class="space-x-2">
-            <button class="btn-secondary" id="addRow">
-              <i data-feather="plus" class="w-4 h-4 mr-2"></i> Добавить строку
-            </button>
-            <button class="btn-secondary" id="applyMargin">
-              <i data-feather="percent" class="w-4 h-4 mr-2"></i> Применить наценку
-            </button>
-          </div>
-          <div class="space-x-2">
-            <button class="btn-secondary" id="importExcel">
-              <i data-feather="upload" class="w-4 h-4 mr-2"></i> Импорт
-            </button>
-            <button class="btn-secondary" id="exportExcel">
-              <i data-feather="download" class="w-4 h-4 mr-2"></i> Экспорт
-            </button>
-          </div>
-        </div>
-
-        <div class="table-container">
-          <table class="table" id="productTable">
-            <thead>
-              <tr>
-                <th>№</th>
-                <th>Наименование товара</th>
-                <th>Кол-во</th>
-                <th>Цена закупки (₽)</th>
-                <th>Сумма закупки (₽)</th>
-                <th>Накрутка %</th>
-                <th>Цена с НДС 5% (₽)</th>
-                <th>Сумма с НДС 5% (₽)</th>
-                <th>Поставщик</th>
-                <th>Доставлено</th>
-                <th>Действия</th>
-              </tr>
-            </thead>
-            <tbody class="bg-white divide-y divide-gray-200">
-              <tr>
-                <td>1</td>
-                <td><input type="text" value="Ноутбук Lenovo IdeaPad 3"></td>
-                <td><input type="number" value="5" class="qty"></td>
-                <td><input type="number" value="45000" class="purchase-price"></td>
-                <td>225 000 ₽</td>
-                <td><input type="number" value="20" class="margin"></td>
-                <td><input type="number" value="56700" class="sale-price"></td>
-                <td>283 500 ₽</td>
-                <td>
-                  <select>
-                    <option>ООО "Техносила"</option>
-                    <option>ИП Петров</option>
-                    <option>Компьютерный мир</option>
-                  </select>
-                </td>
-                <td><input type="checkbox"></td>
-                <td><button class="text-red-500 hover:text-red-700"><i data-feather="trash-2" class="w-4 h-4"></i></button></td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    `;
-  }
-}
-customElements.define('custom-product-table', CustomProductTable);
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .table-container {
+                    @apply overflow-x-auto mb-4;
+                }
+                .table {
+                    @apply min-w

components/quick-stats.js

@@ -24,43 +24,43 @@ class CustomQuickStats extends HTMLElement {
             </style>
             <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
                 <div class="stat-card">
-                    <h3 class="stat-title">Total Purchases</h3>
-                    <p class="stat-value">€24,780</p>
+                    <h3 class="stat-title">Общие затраты на закупки</h3>
+                    <p class="stat-value">1 245 000 ₽</p>
                     <p class="mt-2 flex items-baseline">
                         <span class="stat-change negative">
-                            <i data-feather="arrow-down" class="w-3 h-3 mr-1"></i> 2.5%
+                            <i data-feather="arrow-down" class="w-3 h-3 mr-1"></i> 5.2%
                         </span>
-                        <span class="ml-2 text-sm text-gray-500">vs last month</span>
+                        <span class="ml-2 text-sm text-gray-500">за прошлый месяц</span>
                     </p>
                 </div>
                 <div class="stat-card">
-                    <h3 class="stat-title">Total Sales</h3>
-                    <p class="stat-value">€38,450</p>
+                    <h3 class="stat-title">Общий объем продаж</h3>
+                    <p class="stat-value">1 856 000 ₽</p>
                     <p class="mt-2 flex items-baseline">
                         <span class="stat-change positive">
                             <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 12.8%
                         </span>
-                        <span class="ml-2 text-sm text-gray-500">vs last month</span>
+                        <span class="ml-2 text-sm text-gray-500">за прошлый месяц</span>
                     </p>
                 </div>
                 <div class="stat-card">
-                    <h3 class="stat-title">Gross Margin</h3>
-                    <p class="stat-value">35.2%</p>
+                    <h3 class="stat-title">Маржинальность</h3>
+                    <p class="stat-value">32.8%</p>
                     <p class="mt-2 flex items-baseline">
                         <span class="stat-change positive">
-                            <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 1.6%
+                            <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 2.1%
                         </span>
-                        <span class="ml-2 text-sm text-gray-500">vs last month</span>
+                        <span class="ml-2 text-sm text-gray-500">за прошлый месяц</span>
                     </p>
                 </div>
                 <div class="stat-card">
-                    <h3 class="stat-title">Active Deals</h3>
+                    <h3 class="stat-title">Активные сделки</h3>
                     <p class="stat-value">18</p>
                     <p class="mt-2 flex items-baseline">
                         <span class="stat-change positive">
                             <i data-feather="arrow-up" class="w-3 h-3 mr-1"></i> 3
                         </span>
-                        <span class="ml-2 text-sm text-gray-500">since last week</span>
+                        <span class="ml-2 text-sm text-gray-500">за прошлую неделю</span>
                     </p>
                 </div>
             </div>

components/recent-deals.js

@@ -15,11 +15,11 @@ class CustomRecentDeals extends HTMLElement {
                     <div class="flex items-center justify-between">
                         <div>
                             <p class="text-sm font-medium text-gray-900">MT-2023-0425</p>
-                            <p class="text-sm text-gray-500">Acme Corporation</p>
+                            <p class="text-sm text-gray-500">Компания Acme</p>
                         </div>
                         <div class="flex items-center">
-                            <span class="status-badge status-active mr-4">Active</span>
-                            <span class="text-sm font-medium text-gray-900">€2,480</span>
+                            <span class="status-badge status-active mr-4">Активна</span>
+                            <span class="text-sm font-medium text-gray-900">24 800 ₽</span>
                         </div>
                     </div>
                 </div>
@@ -30,8 +30,8 @@ class CustomRecentDeals extends HTMLElement {
                             <p class="text-sm text-gray-500">Globex Inc</p>
                         </div>
                         <div class="flex items-center">
-                            <span class="status-badge status-completed mr-4">Completed</span>
-                            <span class="text-sm font-medium text-gray-900">€3,750</span>
+                            <span class="status-badge status-completed mr-4">Завершена</span>
+                            <span class="text-sm font-medium text-gray-900">37 500 ₽</span>
                         </div>
                     </div>
                 </div>
@@ -42,8 +42,8 @@ class CustomRecentDeals extends HTMLElement {
                             <p class="text-sm text-gray-500">Wayne Enterprises</p>
                         </div>
                         <div class="flex items-center">
-                            <span class="status-badge status-pending mr-4">Pending</span>
-                            <span class="text-sm font-medium text-gray-900">€1,920</span>
+                            <span class="status-badge status-pending mr-4">В ожидании</span>
+                            <span class="text-sm font-medium text-gray-900">19 200 ₽</span>
                         </div>
                     </div>
                 </div>
@@ -54,20 +54,8 @@ class CustomRecentDeals extends HTMLElement {
                             <p class="text-sm text-gray-500">Stark Industries</p>
                         </div>
                         <div class="flex items-center">
-                            <span class="status-badge status-cancelled mr-4">Cancelled</span>
-                            <span class="text-sm font-medium text-gray-900">€5,600</span>
-                        </div>
-                    </div>
-                </div>
-                <div class="deal-item">
-                    <div class="flex items-center justify-between">
-                        <div>
-                            <p class="text-sm font-medium text-gray-900">MT-2023-0421</p>
-                            <p class="text-sm text-gray-500">Umbrella Corp</p>
-                        </div>
-                        <div class="flex items-center">
-                            <span class="status-badge status-completed mr-4">Completed</span>
-                            <span class="text-sm font-medium text-gray-900">€4,250</span>
+                            <span class="status-badge status-cancelled mr-4">Отменена</span>
+                            <span class="text-sm font-medium text-gray-900">56 000 ₽</span>
                         </div>
                     </div>
                 </div>

components/sidebar.js

@@ -23,25 +23,25 @@ class CustomSidebar extends HTMLElement {
             <div class="sidebar" id="sidebar">
                 <nav class="px-2 py-4">
                     <a href="index.html" class="nav-link active">
-                        <i data-feather="home"></i> Dashboard
+                        <i data-feather="home"></i> Главная
                     </a>
                     <a href="deals.html" class="nav-link">
-                        <i data-feather="dollar-sign"></i> Deals
+                        <i data-feather="dollar-sign"></i> Сделки
                     </a>
                     <a href="clients.html" class="nav-link">
-                        <i data-feather="users"></i> Clients
+                        <i data-feather="users"></i> Клиенты
                     </a>
                     <a href="suppliers.html" class="nav-link">
-                        <i data-feather="truck"></i> Suppliers
+                        <i data-feather="truck"></i> Поставщики
                     </a>
                     <a href="reports.html" class="nav-link">
-                        <i data-feather="pie-chart"></i> Reports
+                        <i data-feather="pie-chart"></i> Отчеты
                     </a>
                     <div class="px-4 py-2 mt-6">
-                        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Settings</h3>
+                        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Настройки</h3>
                     </div>
                     <a href="settings.html" class="nav-link">
-                        <i data-feather="settings"></i> System Settings
+                        <i data-feather="settings"></i> Настройки системы
                     </a>
                 </nav>
             </div>

deals.html

@@ -1,18 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Deals - DealFlow Tracker</title>
+    <title>Сделки - DealFlow Tracker</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src="components/navbar.js"></script>
     <script src="components/sidebar.js"></script>
     <script src="components/deal-table.js"></script>
     <script src="components/deal-modal.js"></script>
+    <script src="components/product-table.js"></script>
 </head>
 <body class="bg-gray-50">
     <custom-navbar></custom-navbar>
@@ -21,21 +20,11 @@
         
         <main class="flex-1 p-8" style="margin-top: 60px;">
             <div class="flex justify-between items-center mb-6">
-                <h1 class="text-3xl font-bold text-gray-800">Deals</h1>
+                <h1 class="text-2xl font-bold text-gray-800">Сделки</h1>
                 <button onclick="openDealModal()" class="btn-primary">
                     <i data-feather="plus" class="w-4 h-4 mr-2"></i> Новая сделка
                 </button>
-                <script>
-                    document.addEventListener('DOMContentLoaded', function() {
-                        // Initialize modal close button
-                        const closeButton = document.querySelector('custom-deal-modal')
-                            .shadowRoot.querySelector('.modal-close');
-                        if (closeButton) {
-                            closeButton.addEventListener('click', closeDealModal);
-                        }
-                    });
-                </script>
-</div>
+            </div>
             
             <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
                 <div class="px-6 py-4 border-b border-gray-200">
@@ -46,42 +35,42 @@
                                     <i data-feather="search" class="h-4 w-4 text-gray-400"></i>
                                 </div>
                                 <input type="text" class="form-input pl-10" placeholder="Поиск сделок...">
-</div>
+                            </div>
                         </div>
                         <div class="flex space-x-2">
-                            <select class="form-input">
+                            <select class="form-select">
                                 <option>Все статусы</option>
                                 <option>Активна</option>
                                 <option>В ожидании</option>
                                 <option>Завершена</option>
                                 <option>Отменена</option>
-</select>
-                            <select class="form-input">
+                            </select>
+                            <select class="form-select">
                                 <option>Все клиенты</option>
                                 <option>Компания Acme</option>
                                 <option>Globex Inc</option>
                                 <option>Wayne Enterprises</option>
                                 <option>Stark Industries</option>
-</select>
-                                <button class="btn-secondary">
-                                    <i data-feather="filter" class="w-4 h-4 mr-2"></i> Фильтр
-</button>
+                            </select>
+                            <button class="btn-secondary">
+                                <i data-feather="filter" class="w-4 h-4 mr-2"></i> Фильтр
+                            </button>
                         </div>
                     </div>
                 </div>
-                <custom-translated-deal-table class="compact-table"></custom-translated-deal-table>
-<div class="px-6 py-4 border-t border-gray-200">
+                <custom-translated-deal-table></custom-translated-deal-table>
+                <div class="px-6 py-4 border-t border-gray-200">
                     <div class="flex items-center justify-between">
                         <div class="text-sm text-gray-500">
                             Показано <span class="font-medium">1</span> - <span class="font-medium">10</span> из <span class="font-medium">24</span>
-</div>
+                        </div>
                         <div class="flex space-x-2">
                             <button class="btn-secondary">
                                 Назад
                             </button>
                             <button class="btn-secondary">
                                 Вперед
-</button>
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -89,7 +78,9 @@
         </main>
     </div>
 
-    <custom-deal-modal></custom-deal-modal>
+    <custom-deal-modal>
+        <custom-product-table></custom-product-table>
+    </custom-deal-modal>
 
     <script>
         feather.replace();

index.html

@@ -1,19 +1,113 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DealFlow Tracker</title>
+    <title>DealFlow Tracker - Главная</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/quick-stats.js"></script>
+    <script src="components/sales-chart.js"></script>
+    <script src="components/recent-deals.js"></script>
 </head>
-<body class="bg-gray-100">
-    <div class="container mx-auto p-4">
-        <h1 class="text-3xl font-bold text-center mb-8">Welcome to DealFlow Tracker</h1>
-        <div class="bg-white rounded-lg shadow p-6 max-w-md mx-auto">
-            <p class="text-center">A fresh start for your sales management system</p>
-        </div>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <div class="flex">
+        <custom-sidebar></custom-sidebar>
+        
+        <main class="flex-1 p-8" style="margin-top: 60px;">
+            <h1 class="text-2xl font-bold text-gray-800 mb-6">Панель управления</h1>
+            
+            <custom-quick-stats></custom-quick-stats>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
+                <div class="lg:col-span-2">
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <div class="flex justify-between items-center mb-4">
+                            <h2 class="text-lg font-semibold">Статистика продаж</h2>
+                            <select class="form-select text-sm" id="chartPeriod">
+                                <option value="week">За неделю</option>
+                                <option value="month" selected>За месяц</option>
+                                <option value="quarter">За квартал</option>
+                                <option value="year">За год</option>
+                            </select>
+                        </div>
+                        <custom-sales-chart></custom-sales-chart>
+                    </div>
+                </div>
+                
+                <div>
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <h2 class="text-lg font-semibold mb-4">Последние сделки</h2>
+                        <custom-recent-deals></custom-recent-deals>
+                        <div class="mt-4 text-center">
+                            <a href="deals.html" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Все сделки →</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
     </div>
+
+    <script>
+        feather.replace();
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize sales chart
+            const ctx = document.querySelector('custom-sales-chart').shadowRoot.querySelector('#salesChart');
+            new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл'],
+                    datasets: [
+                        {
+                            label: 'Продажи',
+                            data: [450000, 520000, 380000, 610000, 590000, 720000, 680000],
+                            borderColor: '#4F46E5',
+                            backgroundColor: 'rgba(79, 70, 229, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        },
+                        {
+                            label: 'Закупки',
+                            data: [320000, 400000, 280000, 450000, 420000, 510000, 470000],
+                            borderColor: '#10B981',
+                            backgroundColor: 'rgba(16, 185, 129, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    plugins: {
+                        legend: {
+                            position: 'top',
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return context.dataset.label + ': ' + context.raw.toLocaleString('ru-RU') + ' ₽';
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            ticks: {
+                                callback: function(value) {
+                                    return value.toLocaleString('ru-RU') + ' ₽';
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    </script>
     <script src="script.js"></script>
 </body>
 </html>

script.js

@@ -1,3 +1,106 @@
+// Global functions for deal management
+function openDealModal() {
+    const modal = document.querySelector('custom-deal-modal').shadowRoot.getElementById('dealModal');
+    modal.classList.remove('hidden');
+    document.body.classList.add('overflow-hidden');
+    feather.replace();
+}
+
+function closeDealModal() {
+    const modal = document.querySelector('custom-deal-modal').shadowRoot.getElementById('dealModal');
+    modal.classList.add('hidden');
+    document.body.classList.remove('overflow-hidden');
+}
+
+function createNewDeal() {
+    // Get all form data
+    const client = document.querySelector('custom-deal-modal').shadowRoot.getElementById('client').value;
+    const dealDate = document.querySelector('custom-deal-modal').shadowRoot.getElementById('dealDate').value;
+    const supplier = document.querySelector('custom-deal-modal').shadowRoot.getElementById('supplier').value;
+    const status = document.querySelector('custom-deal-modal').shadowRoot.getElementById('status').value;
+    const notes = document.querySelector('custom-deal-modal').shadowRoot.getElementById('notes').value;
+    
+    // Get product table data
+    const productTable = document.querySelector('custom-product-table').shadowRoot.querySelector('#productTable');
+    const rows = productTable.querySelectorAll('tbody tr');
+    const items = [];
+    
+    rows.forEach((row, index) => {
+        items.push({
+            item_number: index + 1,
+            product_name: row.querySelector('input[type="text"]').value,
+            quantity: parseInt(row.querySelector('.qty').value),
+            purchase_price: parseFloat(row.querySelector('.purchase-price').value),
+            margin: parseFloat(row.querySelector('.margin').value),
+            sale_price: parseFloat(row.querySelector('.sale-price').value),
+            supplier_id: row.querySelector('select').value,
+            delivered: row.querySelector('input[type="checkbox"]').checked
+        });
+    });
+    
+    // Create deal object
+    const deal = {
+        client_id: client,
+        deal_date: dealDate,
+        supplier_id: supplier,
+        status: status,
+        notes: notes,
+        items: items
+    };
+    
+    // Send to API
+    fetch('/api/deals.php', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(deal)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if(data.success) {
+            alert(`Сделка ${data.deal_number} успешно создана!`);
+            closeDealModal();
+            window.location.reload();
+        } else {
+            alert('Ошибка при создании сделки: ' + data.error);
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Произошла ошибка при создании сделки');
+    });
+}
+
+function applyMarginToAll() {
+    const margin = prompt('Введите наценку в процентах:', '30');
+    if (margin && !isNaN(margin)) {
+        const productTable = document.querySelector('custom-product-table').shadowRoot.querySelector('#productTable');
+        const rows = productTable.querySelectorAll('tbody tr');
+        
+        rows.forEach(row => {
+            const purchasePrice = parseFloat(row.querySelector('.purchase-price').value);
+            const salePriceCell = row.querySelector('.sale-price');
+            const marginCell = row.querySelector('.margin');
+            
+            if (purchasePrice && !isNaN(purchasePrice)) {
+                const newSalePrice = purchasePrice * (1 + (parseFloat(margin)/100));
+                salePriceCell.value = newSalePrice.toFixed(2);
+                marginCell.value = margin;
+            }
+        });
+    }
+}
+
+// Initialize app when DOM is loaded
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('DealFlow Tracker initialized');
+    feather.replace();
+    
+    // Close modal when clicking outside
+    document.addEventListener('click', function(event) {
+        const modal = document.querySelector('custom-deal-modal');
+        if (modal && !modal.contains(event.target) && event.target.closest('custom-deal-modal') === null) {
+            closeDealModal();
+        }
+    });
 });

style.css

@@ -1,7 +1,46 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 body {
     font-family: 'Inter', sans-serif;
 }
 
 .container {
     max-width: 1200px;
+    margin: 0 auto;
+}
+
+.form-input {
+    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm;
+}
+
+.form-select {
+    @apply block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm;
+}
+
+.btn-primary {
+    @apply inline-flex items-center rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+}
+
+.btn-secondary {
+    @apply inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
+}
+
+.status-badge {
+    @apply px-2 py-1 text-xs font-medium rounded-full;
+}
+
+.status-active {
+    @apply bg-blue-100 text-blue-800;
+}
+
+.status-pending {
+    @apply bg-yellow-100 text-yellow-800;
+}
+
+.status-completed {
+    @apply bg-green-100 text-green-800;
+}
+
+.status-cancelled {
+    @apply bg-red-100 text-red-800;
 }