Improve CarPass product UX and service flows

web/index.html

@@ -22,7 +22,7 @@
           <button id="telegramRetryBtn" class="telegram-secondary-btn" type="button">Проверить вход</button>
         </div>
         <div id="telegramLoginSlot" class="telegram-login-slot"></div>
-        <p class="auth-note" id="authNote">Если Telegram уже открыт, нажмите «Открыть гараж» в боте.</p>
+        <p class="auth-note" id="authNote">Mini App открывается кнопкой «Открыть CarPass» внутри бота.</p>
       </div>
     </div>
     <main class="shell">
@@ -39,21 +39,22 @@
 
       <section class="hero-grid">
         <div class="summary-card">
-          <span>Автомобиль</span>
+          <span>Стоимость в месяц</span>
           <strong id="selectedCarTitle">Не выбран</strong>
           <small id="selectedCarMeta">Добавь авто или выбери из списка</small>
         </div>
         <div class="summary-card accent">
-          <span>Расходы</span>
+          <span>Стоимость 1 км</span>
           <strong id="summaryTotal">0</strong>
-          <small>топливо, сервис и ремонты</small>
+          <small>по пробегу и расходам периода</small>
         </div>
         <div class="summary-card blue">
-          <span>Средний расход</span>
+          <span>Прогноз расходов</span>
           <strong id="summaryConsumption">-</strong>
-          <small>л/100 км по полным данным</small>
+          <small>на ближайший месяц</small>
         </div>
       </section>
+      <button class="primary-add-btn" id="addRecordPrimaryBtn" type="button">Добавить запись</button>
 
       <section class="layout">
         <aside class="panel reveal">
@@ -104,11 +105,12 @@
             </div>
             <div class="period-controls">
               <select id="periodPreset" aria-label="Период отчета">
-                <option value="all">Весь срок</option>
-                <option value="month">Месяц</option>
-                <option value="day">День</option>
-                <option value="quarter">Квартал</option>
-                <option value="year">Год</option>
+                <option value="7d">7 дней</option>
+                <option value="30d">30 дней</option>
+                <option value="3m">3 месяца</option>
+                <option value="6m">6 месяцев</option>
+                <option value="12m">12 месяцев</option>
+                <option value="all">Весь период</option>
                 <option value="custom">Свой период</option>
               </select>
               <input id="periodFrom" type="date" aria-label="Дата начала" />
@@ -118,7 +120,7 @@
 
           <div class="stats" id="stats"></div>
 
-          <section class="quick-actions">
+          <section class="quick-actions hidden">
             <button class="action-card active" data-action="fuel">
               <span>Заправка</span>
               <strong>30 сек</strong>
@@ -148,7 +150,7 @@
             </div>
           </section>
 
-          <form id="fuelForm" class="entry-form quick-form">
+          <form id="fuelForm" class="entry-form quick-form hidden">
             <label>
               Дата
               <input name="entry_date" type="date" required />
@@ -242,14 +244,135 @@
           <h2>Меню</h2>
           <button class="icon-btn" id="closeMenuBtn" aria-label="Закрыть">×</button>
         </div>
-        <button class="menu-row" id="openCarFormBtn">Добавить автомобиль</button>
-        <button class="menu-row" id="openCarProfileBtn">Параметры автомобиля</button>
-        <button class="menu-row" id="openSettingsBtn">Локаль и валюта</button>
-        <button class="menu-row" id="openNotificationsBtn">Уведомления</button>
-        <button class="menu-row" id="openConfirmationsBtn">Запросы на подтверждение</button>
-        <button class="menu-row" id="openConnectedServicesBtn">Подключенные автосервисы</button>
-        <button class="menu-row" id="openServicePanelBtn">Панель СТО</button>
-        <button class="menu-row" id="openScanBtn">Разобрать чек</button>
+        <button class="menu-row" data-menu-section="carsSection">Автомобили</button>
+        <button class="menu-row" data-menu-section="carFormSection">Добавить авто</button>
+        <button class="menu-row" data-menu-section="carProfileSection">Параметры авто</button>
+        <button class="menu-row" data-menu-section="expensesSection">Расходы</button>
+        <button class="menu-row" data-menu-section="fuelSection">Заправки</button>
+        <button class="menu-row" data-menu-section="serviceSection">ТО и ремонт</button>
+        <button class="menu-row" data-menu-section="insuranceSection">Страховка</button>
+        <button class="menu-row" data-menu-section="taxSection">Налоги</button>
+        <button class="menu-row" data-menu-section="fineSection">Штрафы</button>
+        <button class="menu-row" data-menu-section="publicServicesSection">СТО</button>
+        <button class="menu-row" data-menu-section="reviewsSection">Отзывы</button>
+        <button class="menu-row" data-menu-section="settingsSection">Настройки</button>
+
+        <section class="drawer-section hidden" id="carsSection">
+          <h2>Автомобили</h2>
+          <div id="drawerCars" class="cars drawer-cars"></div>
+        </section>
+
+        <section class="drawer-section hidden" id="expensesSection">
+          <h2>Добавить расход</h2>
+          <form id="expenseForm" class="grid-form drawer-form">
+            <label>
+              Дата
+              <input name="entry_date" type="date" required />
+            </label>
+            <label>
+              Категория
+              <select name="category" id="expenseCategorySelect">
+                <option value="insurance">Страховка</option>
+                <option value="tax">Налог</option>
+                <option value="fine">Штраф</option>
+                <option value="parking">Парковка</option>
+                <option value="car_wash">Мойка</option>
+                <option value="toll">Платная дорога</option>
+                <option value="tires">Шины</option>
+                <option value="wheels">Диски</option>
+                <option value="battery">Аккумулятор</option>
+                <option value="parts">Запчасти</option>
+                <option value="repair">Ремонт</option>
+                <option value="maintenance">Плановое ТО</option>
+                <option value="diagnostics">Диагностика</option>
+                <option value="towing">Эвакуатор</option>
+                <option value="loan_payment">Кредит / лизинг</option>
+                <option value="loan_interest">Проценты по кредиту</option>
+                <option value="state_fee">Госпошлина</option>
+                <option value="registration">Регистрация</option>
+                <option value="inspection">Техосмотр</option>
+                <option value="other">Прочее</option>
+              </select>
+            </label>
+            <label>
+              Название
+              <input name="title" placeholder="ОСАГО / парковка / налог" required />
+            </label>
+            <label>
+              Стоимость
+              <input name="total_cost" type="number" min="0" step="0.01" required />
+            </label>
+            <label>
+              Валюта
+              <select name="currency">
+                <option value="RUB">RUB</option>
+                <option value="KRW">KRW</option>
+                <option value="USD">USD</option>
+                <option value="EUR">EUR</option>
+              </select>
+            </label>
+            <label>
+              Поставщик / место
+              <input name="vendor" />
+            </label>
+            <label>
+              Одометр
+              <input name="odometer" type="number" min="0" />
+            </label>
+            <label>
+              Начало периода
+              <input name="period_start" type="date" />
+            </label>
+            <label>
+              Конец периода
+              <input name="period_end" type="date" />
+            </label>
+            <label class="check">
+              <input name="is_recurring" type="checkbox" />
+              Регулярный расход
+            </label>
+            <button type="submit">Сохранить расход</button>
+          </form>
+        </section>
+
+        <section class="drawer-section hidden" id="fuelSection">
+          <h2>Заправка</h2>
+          <div id="fuelFormMount"></div>
+          <button type="button" class="wide-btn ghost-btn" id="fuelScanBtn">Скан чека</button>
+        </section>
+
+        <section class="drawer-section hidden" id="serviceSection">
+          <h2>ТО и ремонт</h2>
+          <div id="serviceFormMount"></div>
+        </section>
+
+        <section class="drawer-section hidden" id="insuranceSection">
+          <h2>Страховка</h2>
+          <div class="tip-card">Укажите период действия полиса, и CarPass распределит стоимость по месяцам.</div>
+          <button class="wide-btn" type="button" data-expense-preset="insurance">Добавить страховку</button>
+        </section>
+
+        <section class="drawer-section hidden" id="taxSection">
+          <h2>Налоги</h2>
+          <button class="wide-btn" type="button" data-expense-preset="tax">Добавить налог</button>
+        </section>
+
+        <section class="drawer-section hidden" id="fineSection">
+          <h2>Штрафы</h2>
+          <button class="wide-btn" type="button" data-expense-preset="fine">Добавить штраф</button>
+        </section>
+
+        <section class="drawer-section hidden" id="publicServicesSection">
+          <h2>СТО</h2>
+          <div class="tip-card">Обычный профиль не показывает панель СТО. Для бизнеса отправьте заявку на проверку.</div>
+          <button class="wide-btn" type="button" data-menu-section="servicePanelSection">Зарегистрировать СТО</button>
+          <div id="publicServiceCenters" class="stack-list"></div>
+        </section>
+
+        <section class="drawer-section hidden" id="reviewsSection">
+          <h2>Отзывы</h2>
+          <div id="serviceReviews" class="stack-list"></div>
+        </section>
 
         <section class="drawer-section hidden" id="settingsSection">
           <h2>Настройки</h2>
@@ -321,16 +444,32 @@
               Телефон
               <input name="phone" />
             </label>
+            <label>
+              Контактное лицо
+              <input name="contact_person" />
+            </label>
+            <label>
+              Специализация
+              <input name="specializations" placeholder="BMW, электрика, шиномонтаж" />
+            </label>
+            <label>
+              График работы
+              <input name="working_hours" placeholder="Пн-Сб 09:00-19:00" />
+            </label>
+            <label>
+              Описание
+              <input name="description" placeholder="Коротко о сервисе" />
+            </label>
             <label>
               Регистрационный номер
               <input name="business_registration_number" />
             </label>
-            <button type="submit">Создать СТО</button>
+            <button type="submit">Отправить заявку</button>
           </form>
           <div id="serviceCentersList" class="stack-list"></div>
         </section>
 
-        <section class="drawer-section" id="carFormSection">
+        <section class="drawer-section hidden" id="carFormSection">
           <h2>Новое авто</h2>
           <form id="carForm" class="grid-form drawer-form">
             <label>
@@ -447,7 +586,7 @@
           <div id="receiptFileName" class="file-hint">Файл не выбран</div>
           <button type="submit">Разобрать текст</button>
         </form>
-        <div id="ocrResult" class="tip-card">Сейчас разбираем текстовые чеки. OCR по фото будет подключен отдельно.</div>
+        <div id="ocrResult" class="tip-card">Загрузите фото или файл чека. CarPass распознает данные и предложит проверить их перед сохранением.</div>
       </div>
     </div>