Kikomiko/kikomiko/admin/static/index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="robots" content="noindex, nofollow" />
  <title>پنل مدیریت کیکومیکو</title>
  <link rel="stylesheet" href="/admin.css" />
</head>
<body>
  <div id="loginView" class="login-wrap hidden">
    <form class="login-card" id="loginForm">
      <h1>کیکومیکو</h1>
      <p class="sub">ورود به پنل مدیریت محتوا</p>
      <div class="field">
        <label for="username">نام کاربری</label>
        <input id="username" name="username" autocomplete="username" required />
      </div>
      <div class="field">
        <label for="password">رمز عبور</label>
        <input id="password" name="password" type="password" autocomplete="current-password" required />
      </div>
      <button class="btn" type="submit" style="width:100%">ورود</button>
      <p id="loginMsg" class="msg error hidden"></p>
    </form>
  </div>

  <div id="appView" class="app hidden">
    <aside class="sidebar">
      <div class="brand">Kikomiko Admin</div>
      <button type="button" class="nav-btn active" data-panel="dashboard">داشبورد</button>
      <button type="button" class="nav-btn" data-panel="products">محصولات</button>
      <button type="button" class="nav-btn" data-panel="categories">دسته‌ها</button>
      <button type="button" class="nav-btn" data-panel="import">ورود / همگام‌سازی</button>
      <button type="button" class="nav-btn" data-panel="settings">تنظیمات</button>
      <button type="button" class="nav-btn" id="logoutBtn">خروج</button>
      <div class="sidebar-foot">
        کاربر: <span id="whoami"></span>
      </div>
    </aside>

    <main class="main">
      <section id="panel-dashboard" class="panel">
        <div class="panel-head">
          <div>
            <h2>داشبورد</h2>
            <p>خلاصه وضعیت کاتالوگ</p>
          </div>
          <button type="button" class="btn" id="exportBtn">خروجی به catalog.json</button>
          <button type="button" class="btn btn-ghost" id="downloadCatalogBtn">دانلود JSON کامل با واریانت‌ها</button>
        </div>
        <div class="stats">
          <div class="stat"><span>محصولات</span><strong id="statProducts">—</strong></div>
          <div class="stat"><span>دسته‌ها</span><strong id="statCategories">—</strong></div>
          <div class="stat"><span>موجودی کل</span><strong id="statStock">—</strong></div>
        </div>
        <div class="card">
          <p class="msg info" style="margin:0">
            بعد از ویرایش محصولات، «خروجی به catalog.json» را بزنید تا
            <span class="mono">dist/data/catalog.dedupe2.json</span> برای فروشگاه به‌روز شود.
          </p>
          <pre class="out hidden" id="dashOut"></pre>
        </div>
      </section>

      <section id="panel-products" class="panel hidden">
        <div class="panel-head">
          <div>
            <h2>محصولات</h2>
            <p>افزودن و ویرایش محصولات</p>
          </div>
          <button type="button" class="btn" id="newProductBtn">محصول جدید</button>
        </div>
        <div class="card">
          <div class="toolbar">
            <input type="search" id="productSearch" placeholder="جستجو: نام، اسلاگ، SKU…" />
          </div>
          <table>
            <thead>
              <tr>
                <th>نام</th>
                <th>دسته</th>
                <th>واریانت</th>
                <th>قیمت</th>
                <th>موجودی</th>
                <th>وضعیت</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="productRows"></tbody>
          </table>
        </div>
      </section>

      <section id="panel-categories" class="panel hidden">
        <div class="panel-head">
          <div>
            <h2>دسته‌ها</h2>
            <p>ساختار دسته‌بندی فروشگاه</p>
          </div>
          <div class="btn-row">
            <button type="button" class="btn-ghost btn" id="seedCatsBtn">ورود دسته‌های سایت</button>
            <button type="button" class="btn" id="newCategoryBtn">دسته جدید</button>
          </div>
        </div>
        <div class="card">
          <table>
            <thead>
              <tr>
                <th>عنوان</th>
                <th>اسلاگ</th>
                <th>والد</th>
                <th>ترتیب</th>
                <th>وضعیت</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="categoryRows"></tbody>
          </table>
        </div>
      </section>

      <section id="panel-import" class="panel hidden">
        <div class="panel-head">
          <div>
            <h2>ورود داده و همگام‌سازی</h2>
            <p>کاتالوگ قدیمی، اسکریپت واکشی، همگام‌سازی موجودی</p>
          </div>
        </div>

        <div class="card">
          <h3 style="margin-top:0">ورود کاتالوگ قدیمی</h3>
          <p style="color:var(--muted);margin-top:0">از فایل فعلی فروشگاه یا JSON آپلود‌شده.</p>
          <div class="btn-row">
            <button type="button" class="btn" id="importDistBtn">ورود از dist/catalog.dedupe2.json</button>
            <label class="btn btn-ghost" style="cursor:pointer">
              آپلود JSON
              <input type="file" id="importFile" accept="application/json,.json" hidden />
            </label>
          </div>
        </div>

        <div class="card">
          <h3 style="margin-top:0">پشتیبان دیتابیس (SQLite)</h3>
          <p style="color:var(--muted);margin-top:0">
            دیتابیس را در Git نگه ندارید. از اینجا دانلود کنید و روی سرور دیگر بازیابی کنید.
            فایل‌های خیلی بزرگ کاتالوگ JSON را همچنان با
            <span class="mono">import_catalog.py</span> وارد کنید.
          </p>
          <div class="btn-row">
            <button type="button" class="btn" id="downloadDbBtn">دانلود kikomiko.db</button>
            <label class="btn btn-ghost" style="cursor:pointer">
              بازیابی از فایل .db
              <input type="file" id="importDbFile" accept=".db,application/octet-stream,application/x-sqlite3" hidden />
            </label>
          </div>
        </div>

        <div class="card">
          <h3 style="margin-top:0">ورود دسته‌ای از KIKO (پیشنهادی)</h3>
          <p style="color:var(--muted);margin-top:0;line-height:1.75">
            لینک‌ها را دستی بچسبانید، یا از نقشهٔ سایت اصلی همهٔ خانواده‌های محصول را کشف و وارد کنید.
            محصولات تکراری رد می‌شوند. بعد از اتمام، از داشبورد <strong>خروجی به catalog.json</strong> را بزنید.
          </p>
          <div class="field">
            <label for="kikoBulkUrls">لینک‌های محصول KIKO (هر خط یکی)</label>
            <textarea id="kikoBulkUrls" class="mono" dir="ltr" style="text-align:left;min-height:140px" placeholder="https://www.kikocosmetics.com/en-gb/p/product-a-123/&#10;https://www.kikocosmetics.com/en-gb/p/product-b-456/"></textarea>
          </div>
          <div class="grid-2">
            <div class="field">
              <label for="kikoBulkLimit">حداکثر در هر دسته</label>
              <input id="kikoBulkLimit" type="number" min="1" max="80" value="15" />
            </div>
            <div class="field">
              <label for="kikoBulkMarket">مارکت</label>
              <input id="kikoBulkMarket" type="text" value="en-gb" dir="ltr" />
            </div>
          </div>
          <label style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.5rem;font-size:0.9rem">
            <input id="kikoBulkOverwrite" type="checkbox" />
            اگر توضیح فارسی از قبل هست، با متن انگلیسی KIKO جایگزین شود
          </label>
          <label style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.75rem;font-size:0.9rem">
            <input id="kikoBulkSkipExisting" type="checkbox" checked />
            محصولاتی که از قبل در ادمین هستند دوباره گرفته نشوند
          </label>
          <div class="btn-row">
            <button type="button" class="btn" id="kikoDiscoverBtn">کشف همه از نقشه سایت</button>
            <button type="button" class="btn" id="kikoCatalogAllBtn">ورود همه محصولات جدید (خودکار)</button>
          </div>
          <div class="btn-row" style="margin-top:0.5rem">
            <button type="button" class="btn btn-ghost" id="kikoBulkUrlsBtn">ورود دسته‌ای از این لینک‌ها</button>
            <button type="button" class="btn btn-ghost" id="kikoBulkExistingBtn">تکمیل محصولات موجودِ ناقص از KIKO</button>
          </div>
          <p id="kikoBulkMsg" class="msg hidden"></p>
        </div>

        <div class="card">
          <h3 style="margin-top:0">Fetcher / Sync</h3>
          <p style="color:var(--muted);margin-top:0">
            اسکریپت‌های خودمیزبان در پوشه <span class="mono">admin/fetchers/</span>
          </p>
          <div class="grid-2">
            <div class="field">
              <label for="fetcherSelect">اسکریپت</label>
              <select id="fetcherSelect"></select>
            </div>
            <div class="field">
              <label for="fetcherAction">عملیات</label>
              <select id="fetcherAction">
                <option value="fetch">ورود محصولات (fetch)</option>
                <option value="sync">همگام‌سازی موجودی (sync)</option>
              </select>
            </div>
          </div>
          <div class="field">
            <label for="fetcherConfig">پیکربندی JSON</label>
            <textarea id="fetcherConfig" class="mono" dir="ltr" style="text-align:left;min-height:120px">{
{
  "path": "./sample-remote-products.json"
}
</textarea>
          </div>
          <button type="button" class="btn" id="runFetcherBtn">اجرا</button>
          <p id="fetcherDesc" class="msg info" style="margin-top:0.8rem"></p>
        </div>

        <pre class="out" id="importOut">آماده.</pre>
      </section>

      <section id="panel-settings" class="panel hidden">
        <div class="panel-head">
          <div>
            <h2>تنظیمات</h2>
            <p>رمز عبور، کلید هوش مصنوعی و ترجمه توضیحات</p>
          </div>
        </div>
        <div class="card" style="max-width:560px;margin-bottom:1.25rem">
          <h3 style="margin:0 0 0.75rem;font-weight:600">ترجمه با هوش مصنوعی</h3>
          <p class="muted" style="margin:0 0 1rem;font-size:0.9rem;line-height:1.7">
            کلید API سازگار با OpenAI را ذخیره کنید، سپس توضیحات انگلیسی محصولات را به فارسی ترجمه کنید.
            کلید فقط روی سرور ادمین نگه داشته می‌شود و در خروجی کاتالوگ نیست.
          </p>
          <form id="aiSettingsForm">
            <div class="field">
              <label for="aiApiKey">کلید OpenAI / Chat API</label>
              <input id="aiApiKey" type="password" autocomplete="off" placeholder="sk-..." />
              <p id="aiKeyHint" class="muted" style="margin:0.35rem 0 0;font-size:0.8rem"></p>
            </div>
            <div class="field">
              <label for="aiBaseUrl">آدرس پایه API</label>
              <input id="aiBaseUrl" type="url" placeholder="https://api.openai.com/v1" />
            </div>
            <div class="field">
              <label for="aiModel">مدل</label>
              <input id="aiModel" type="text" placeholder="gpt-4o-mini" />
            </div>
            <div class="field">
              <label for="serpApiKey">کلید SerpAPI <span class="muted">(اختیاری)</span></label>
              <input id="serpApiKey" type="password" autocomplete="off" placeholder="serpapi key" />
              <p id="serpKeyHint" class="muted" style="margin:0.35rem 0 0;font-size:0.8rem"></p>
            </div>
            <div class="field">
              <label for="categoryApiKey">کلید ترجمه دسته‌ها به فارسی <span class="muted">(اختیاری — در غیر این صورت از کلید OpenAI استفاده می‌شود)</span></label>
              <input id="categoryApiKey" type="password" autocomplete="off" placeholder="sk-... یا همان کلید OpenAI" />
              <p id="categoryKeyHint" class="muted" style="margin:0.35rem 0 0;font-size:0.8rem"></p>
            </div>
            <div class="btn-row">
              <button class="btn" type="submit">ذخیره تنظیمات AI</button>
            </div>
            <p id="aiSettingsMsg" class="msg hidden"></p>
          </form>
          <hr style="border:0;border-top:1px solid rgba(0,0,0,0.08);margin:1.25rem 0" />
          <h4 style="margin:0 0 0.5rem;font-weight:600">ترجمه دسته‌ها به فارسی</h4>
          <p class="muted" style="margin:0 0 0.85rem;font-size:0.88rem;line-height:1.7">
            عنوان انگلیسی دسته (`name`) را به `nameFa` ترجمه می‌کند تا منو و فیلترها فارسی شوند.
          </p>
          <div class="field">
            <label for="catTranslateLimit">حداکثر دسته در هر اجرا</label>
            <input id="catTranslateLimit" type="number" min="1" max="200" value="50" />
          </div>
          <label style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.75rem;font-size:0.9rem">
            <input id="catOverwrite" type="checkbox" />
            بازنویسی نام فارسی موجود (اگر هنوز انگلیسی باشد)
          </label>
          <div class="btn-row">
            <button class="btn btn-ghost" type="button" id="catTranslateDryRunBtn">پیش‌نمایش دسته‌های نیازمند ترجمه</button>
            <button class="btn" type="button" id="catTranslateBtn">ترجمه دسته‌ها به فارسی</button>
          </div>
          <p id="catTranslateMsg" class="msg hidden"></p>
          <hr style="border:0;border-top:1px solid rgba(0,0,0,0.08);margin:1.25rem 0" />
          <h4 style="margin:0 0 0.5rem;font-weight:600">ترجمه توضیحات (OpenAI)</h4>
          <div class="field">
            <label for="aiTranslateLimit">حداکثر محصول در هر اجرا</label>
            <input id="aiTranslateLimit" type="number" min="1" max="100" value="25" />
          </div>
          <label style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.75rem;font-size:0.9rem">
            <input id="aiOverwrite" type="checkbox" />
            بازنویسی توضیحات فارسی موجود (فقط اگر هنوز انگلیسی باشد)
          </label>
          <div class="btn-row">
            <button class="btn btn-ghost" type="button" id="aiTranslateDryRunBtn">پیش‌نمایش موارد نیازمند ترجمه</button>
            <button class="btn" type="button" id="aiTranslateBtn">ترجمه توضیحات به فارسی</button>
          </div>
          <p id="aiTranslateMsg" class="msg hidden"></p>
          <hr style="border:0;border-top:1px solid rgba(0,0,0,0.08);margin:1.25rem 0" />
          <h4 style="margin:0 0 0.5rem;font-weight:600">پر کردن مشخصات با SerpAPI</h4>
          <p class="muted" style="margin:0 0 0.85rem;font-size:0.88rem;line-height:1.7">
            برای هر محصول، کوئری‌های استاندارد مشخصات (`detailQueries`) در ایمپورت/اکسپورت ذخیره می‌شود
            (مثل howToUse، labTests، size، …). SerpAPI همان کوئری‌ها را برای فیلدهای خالی اجرا می‌کند.
          </p>
          <div class="field">
            <label for="serpFillLimit">حداکثر محصول در هر اجرا</label>
            <input id="serpFillLimit" type="number" min="1" max="50" value="10" />
          </div>
          <label style="display:flex;gap:0.5rem;align-items:center;margin-bottom:0.75rem;font-size:0.9rem">
            <input id="serpOverwrite" type="checkbox" />
            بازنویسی مشخصات موجود
          </label>
          <div class="btn-row">
            <button class="btn btn-ghost" type="button" id="serpDryRunBtn">پیش‌نمایش کوئری‌های ناقص</button>
            <button class="btn" type="button" id="serpFillBtn">پر کردن مشخصات با SerpAPI</button>
          </div>
          <p id="serpFillMsg" class="msg hidden"></p>
          <pre id="aiTranslateOut" class="muted" style="margin-top:0.75rem;white-space:pre-wrap;font-size:0.8rem;max-height:220px;overflow:auto"></pre>
        </div>
        <div class="card" style="max-width:560px">
          <h3 style="margin:0 0 0.75rem;font-weight:600">تغییر رمز عبور</h3>
          <form id="passwordForm">
            <div class="field">
              <label for="currentPass">رمز فعلی</label>
              <input id="currentPass" type="password" required autocomplete="current-password" />
            </div>
            <div class="field">
              <label for="newPass">رمز جدید (حداقل ۱۰ کاراکتر)</label>
              <input id="newPass" type="password" required minlength="10" autocomplete="new-password" />
            </div>
            <button class="btn" type="submit">ذخیره رمز</button>
            <p id="passMsg" class="msg hidden"></p>
          </form>
        </div>
      </section>
    </main>
  </div>

  <div id="modalRoot" class="modal-backdrop hidden"></div>
  <script src="/admin.js"></script>
</body>
</html>