Add product AI fill, Enter-to-filter, and URL-persisted product filters.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-11 22:30:58 +04:30 · 2026-08-08 16:35:14 +03:30
parent ad83fc1099
commit 4d480799b0
16 changed files with 524 additions and 65 deletions
@@ -75,6 +75,36 @@

 .summaryField textarea {
  min-height: calc((var(--field-height) + 8px) * 2);
+  padding-inline-end: 12px;
+  padding-bottom: 40px;
+}
+
+.fieldWithAi {
+  position: relative;
+  min-width: 0;
+}
+
+.aiFillAnchor {
+  position: absolute;
+  bottom: 8px;
+  inset-inline-end: 8px;
+  z-index: 2;
+}
+
+.aiFillBtn {
+  width: 30px;
+  height: 30px;
+  min-height: 30px;
+  padding: 0;
+  gap: 0;
+  border-radius: 50%;
+  box-shadow:
+    0 4px 12px rgba(67, 56, 202, 0.28),
+    0 0 16px rgba(236, 72, 153, 0.14);
+}
+
+.aiFillBtn:disabled {
+  opacity: 0.45;
 }

 .rowSpan3 { grid-row: span 3; }
@@ -1,11 +1,15 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Link, useParams, useNavigate } from 'react-router-dom'
+import { Sparkles } from 'lucide-react'
 import { SearchableSelect } from '../components/SearchableSelect'
 import { ImageCropper } from '../components/ImageCropper'
 import { ImageUploader } from '../components/ImageUploader'
 import { TagInput } from '../components/TagInput'
 import { RichTextEditor } from '../components/RichTextEditor'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { ProductFieldAiPromptModal } from '../components/ProductFieldAiPromptModal'
+import { Tooltip } from '../components/Tooltip'
+import { useToast } from '../context/ToastContext'
 import { ApiError } from '../lib/api'
 import { listProductCategories, mapProductCategoryToUi } from '../services/productCategoryService'
 import { listAllBrands, mapBrandToSelectOption } from '../services/brandService'
@@ -19,9 +23,14 @@ import {
  mapProductApiToFormState,
  updateProduct,
 } from '../services/productService'
+import {
+  fillProductFieldByAi,
+  type ProductAiFillField,
+} from '../services/productAiService'
 import type { Category, FlatCategory } from '../types/category'
 import { flattenCategories } from '../utils/categories'
 import pageStyles from '../components/PageContent.module.css'
+import aiStyles from '../styles/ai.module.css'
 import styles from './AddNewProductPage.module.css'
 import { useT } from '../i18n/useT'

@@ -29,6 +38,7 @@ export function AddNewProductPage() {
  const { id } = useParams()
  const navigate = useNavigate()
  const t = useT()
+  const { showToast } = useToast()
  const isEdit = Boolean(id)

  const [categories, setCategories] = useState<Category[]>([])
@@ -47,8 +57,50 @@ export function AddNewProductPage() {
  const [loaded, setLoaded] = useState(!isEdit)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [error, setError] = useState('')
+  const [aiField, setAiField] = useState<ProductAiFillField | null>(null)
+  const [isAiRunning, setIsAiRunning] = useState(false)

  const categoryOptions = flattenCategories(categories)
+  const selectedCategoryName = useMemo(() => {
+    const match = categoryOptions.find((item) => item.id === categoryId)
+    if (!match) return ''
+    return match.nameFa?.trim() || match.nameEn || ''
+  }, [categoryOptions, categoryId])
+
+  const canUseAiFill = Boolean(nameFa.trim() || nameEn.trim()) && !isSubmitting
+
+  function openAiFill(field: ProductAiFillField) {
+    if (!nameFa.trim() && !nameEn.trim()) {
+      setError(t('products.form.aiFillNeedName'))
+      return
+    }
+    setError('')
+    setAiField(field)
+  }
+
+  async function runAiFill(prompt: string) {
+    if (!aiField) return
+    setIsAiRunning(true)
+    try {
+      const result = await fillProductFieldByAi({
+        field: aiField,
+        prompt,
+        title: nameEn.trim() || undefined,
+        nameFa: nameFa.trim() || undefined,
+        categoryId: categoryId || undefined,
+      })
+      if (result.field === 'summary') {
+        setSummary(result.text)
+        showToast(t('products.form.aiSummaryFilled'), 'success')
+      } else {
+        setDescription(result.html)
+        showToast(t('products.form.aiDescriptionFilled'), 'success')
+      }
+      setAiField(null)
+    } finally {
+      setIsAiRunning(false)
+    }
+  }

  useEffect(() => {
    const controller = new AbortController()
@@ -264,27 +316,57 @@ export function AddNewProductPage() {

              <div className={`${styles.field} ${styles.fieldFull} ${styles.summaryField}`}>
                <label htmlFor="summary">{t('products.form.summary')}</label>
-                <textarea
-                  id="summary"
-                  name="summary"
-                  rows={4}
-                  placeholder={t('products.form.summaryPlaceholder')}
-                  value={summary}
-                  onChange={(e) => setSummary(e.target.value)}
-                  required
-                  disabled={isSubmitting}
-                />
+                <div className={styles.fieldWithAi}>
+                  <textarea
+                    id="summary"
+                    name="summary"
+                    rows={4}
+                    placeholder={t('products.form.summaryPlaceholder')}
+                    value={summary}
+                    onChange={(e) => setSummary(e.target.value)}
+                    required
+                    disabled={isSubmitting}
+                  />
+                  <span className={styles.aiFillAnchor}>
+                    <Tooltip label={t('products.form.aiFill')}>
+                      <button
+                        type="button"
+                        className={`${aiStyles.aiBtn} ${styles.aiFillBtn}`}
+                        onClick={() => openAiFill('summary')}
+                        disabled={!canUseAiFill || isAiRunning}
+                        aria-label={t('products.form.aiFill')}
+                      >
+                        <Sparkles size={14} />
+                      </button>
+                    </Tooltip>
+                  </span>
+                </div>
              </div>
            </div>
          </div>

          <div className={`${styles.field} ${styles.col12}`}>
            <label>{t('products.form.description')}</label>
-            <RichTextEditor
-              value={description}
-              onChange={setDescription}
-              placeholder={t('products.form.descriptionPlaceholder')}
-            />
+            <div className={styles.fieldWithAi}>
+              <RichTextEditor
+                value={description}
+                onChange={setDescription}
+                placeholder={t('products.form.descriptionPlaceholder')}
+              />
+              <span className={styles.aiFillAnchor}>
+                <Tooltip label={t('products.form.aiFill')}>
+                  <button
+                    type="button"
+                    className={`${aiStyles.aiBtn} ${styles.aiFillBtn}`}
+                    onClick={() => openAiFill('description')}
+                    disabled={!canUseAiFill || isAiRunning}
+                    aria-label={t('products.form.aiFill')}
+                  >
+                    <Sparkles size={14} />
+                  </button>
+                </Tooltip>
+              </span>
+            </div>
          </div>

          <div className={`${styles.field} ${styles.col12}`}>
@@ -315,6 +397,19 @@ export function AddNewProductPage() {
          </button>
        </div>
      </form>
+
+      <ProductFieldAiPromptModal
+        open={aiField !== null}
+        field={aiField ?? 'summary'}
+        nameFa={nameFa}
+        nameEn={nameEn}
+        categoryName={selectedCategoryName}
+        isRunning={isAiRunning}
+        onClose={() => {
+          if (!isAiRunning) setAiField(null)
+        }}
+        onRun={runAiFill}
+      />
    </main>
  )
 }
@@ -243,7 +243,7 @@ export function CustomersPage() {

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('customers.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={filterStyles.filtersInputs}>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
              <input
@@ -267,9 +267,8 @@ export function CustomersPage() {
          </div>
          <div className={filterStyles.filterActions}>
            <button
-              type="button"
+              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
              disabled={loading}
              aria-label={t('customers.search')}
              title={t('customers.search')}
@@ -287,7 +286,7 @@ export function CustomersPage() {
              <RotateCcw size={18} />
            </button>
          </div>
-        </div>
+        </form>
      </div>

      <div className={styles.tablePanel}>
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 import { Plus, RotateCcw, Search, Sparkles } from 'lucide-react'
 import { ProductCard } from '../components/ProductCard'
 import { AddProductByAiModal } from '../components/AddProductByAiModal'
@@ -22,9 +22,19 @@ import filterStyles from '../components/ListFiltersPanel.module.css'
 import styles from './MyProductsPage.module.css'
 import aiStyles from '../styles/ai.module.css'

+function readListQuery(searchParams: URLSearchParams) {
+  const name = searchParams.get('q')?.trim() ?? ''
+  const pageRaw = Number(searchParams.get('page'))
+  const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? Math.floor(pageRaw) : 1
+  return { name, page }
+}
+
 export function MyProductsPage() {
  const t = useT()
  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { name: appliedName, page: currentPage } = readListQuery(searchParams)
+
  const [products, setProducts] = useState<Product[]>([])
  const [totalProducts, setTotalProducts] = useState(0)
  const [isLoading, setIsLoading] = useState(true)
@@ -32,7 +42,6 @@ export function MyProductsPage() {
  const [error, setError] = useState('')
  const [variantCounts, setVariantCounts] = useState<Record<string, number>>({})
  const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
-  const [currentPage, setCurrentPage] = useState(1)
  const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null)
  const [variantsTarget, setVariantsTarget] = useState<{
    id: string
@@ -46,17 +55,27 @@ export function MyProductsPage() {
    categoryId: string
  } | null>(null)
  const [aiModalOpen, setAiModalOpen] = useState(false)
-  const [draftName, setDraftName] = useState('')
-  const [appliedName, setAppliedName] = useState('')
+  const [draftName, setDraftName] = useState(appliedName)

  const totalPages = Math.max(1, Math.ceil(totalProducts / PRODUCTS_PER_PAGE))

+  useEffect(() => {
+    setDraftName(appliedName)
+  }, [appliedName])
+
  useEffect(() => {
    const controller = new AbortController()
    void loadProducts(currentPage, controller.signal)
    return () => controller.abort()
  }, [currentPage, appliedName])

+  function writeListQuery(name: string, page: number) {
+    const next = new URLSearchParams()
+    if (name) next.set('q', name)
+    if (page > 1) next.set('page', String(page))
+    setSearchParams(next, { replace: true })
+  }
+
  async function loadProducts(page: number, signal?: AbortSignal) {
    setIsLoading(true)
    setError('')
@@ -136,7 +155,7 @@ export function MyProductsPage() {
      const nextTotalPages = Math.max(1, Math.ceil(nextTotal / PRODUCTS_PER_PAGE))
      const nextPage = currentPage > nextTotalPages ? nextTotalPages : currentPage
      setDeleteTarget(null)
-      setCurrentPage(nextPage)
+      writeListQuery(appliedName, nextPage)
      await loadProducts(nextPage)
    } catch (err) {
      if (err instanceof ApiError) {
@@ -150,19 +169,17 @@ export function MyProductsPage() {
  }

  function handlePageChange(page: number) {
-    setCurrentPage(page)
+    writeListQuery(appliedName, page)
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  function applyFilters() {
-    setAppliedName(draftName.trim())
-    setCurrentPage(1)
+    writeListQuery(draftName.trim(), 1)
  }

  function clearFilters() {
    setDraftName('')
-    setAppliedName('')
-    setCurrentPage(1)
+    writeListQuery('', 1)
  }

  function handleCommentCountChange(count: number) {
@@ -193,7 +210,7 @@ export function MyProductsPage() {

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('products.list.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={filterStyles.filtersInputs}>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
              <input
@@ -208,9 +225,8 @@ export function MyProductsPage() {
          </div>
          <div className={filterStyles.filterActions}>
            <button
-              type="button"
+              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
              disabled={isLoading}
              aria-label={t('products.list.search')}
              title={t('products.list.search')}
@@ -228,7 +244,7 @@ export function MyProductsPage() {
              <RotateCcw size={18} />
            </button>
          </div>
-        </div>
+        </form>
      </div>

      {error && (
@@ -321,7 +321,7 @@ export function OrdersPage() {

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('orders.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={styles.ordersFiltersRow}>
            <div className={`${filterStyles.field} ${styles.filterOrderId}`}>
              <input
@@ -389,9 +389,8 @@ export function OrdersPage() {
          </div>
          <div className={filterStyles.filterActions}>
            <button
-              type="button"
+              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
              disabled={loading}
              aria-label={t('orders.search')}
              title={t('orders.search')}
@@ -409,7 +408,7 @@ export function OrdersPage() {
              <RotateCcw size={18} />
            </button>
          </div>
-        </div>
+        </form>
      </div>

      <div className={styles.tablePanel}>
@@ -209,7 +209,7 @@ export function ShoppingCardsPage() {

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('orders.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={styles.filtersRow}>
            <div className={`${filterStyles.field} ${styles.filterCustomer}`}>
              <input
@@ -268,9 +268,8 @@ export function ShoppingCardsPage() {
          </div>
          <div className={filterStyles.filterActions}>
            <button
-              type="button"
+              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
              disabled={loading}
              aria-label={t('orders.search')}
              title={t('orders.search')}
@@ -288,7 +287,7 @@ export function ShoppingCardsPage() {
              <RotateCcw size={18} />
            </button>
          </div>
-        </div>
+        </form>
      </div>

      <div className={tableStyles.tablePanel}>
@@ -245,7 +245,7 @@ function StoreItemsPageContent() {

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('storeItems.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={filterStyles.filtersInputs}>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol3}`}>
              <input
@@ -298,9 +298,8 @@ function StoreItemsPageContent() {
          </div>
          <div className={filterStyles.filterActions}>
            <button
-              type="button"
+              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
              disabled={isLoading}
              aria-label={t('storeItems.search')}
              title={t('storeItems.search')}
@@ -318,7 +317,7 @@ function StoreItemsPageContent() {
              <RotateCcw size={18} />
            </button>
          </div>
-        </div>
+        </form>
      </div>

      {error && <p className={styles.error}>{error}</p>}
@@ -119,7 +119,7 @@ export function WebsiteContactPage() {

      <div className={filterStyles.filtersPanel}>
        <div className={filterStyles.filtersTitle}>{t('website.contact.filters')}</div>
-        <div className={filterStyles.filtersGrid}>
+        <form className={filterStyles.filtersGrid} onSubmit={(e) => { e.preventDefault(); applyFilters() }}>
          <div className={filterStyles.filtersInputs}>
            <div className={`${filterStyles.field} ${filterStyles.fieldCol4}`}>
              <input
@@ -128,17 +128,13 @@ export function WebsiteContactPage() {
                onChange={(e) => setDraftQuery(e.target.value)}
                placeholder={t('website.contact.searchPlaceholder')}
                aria-label={t('website.contact.search')}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') applyFilters()
-                }}
              />
            </div>
          </div>
          <div className={filterStyles.filterActions}>
            <button
-              type="button"
+              type="submit"
              className={`${filterStyles.iconActionBtn} ${filterStyles.iconActionBtnPrimary}`}
-              onClick={applyFilters}
              disabled={loading}
              aria-label={t('website.contact.search')}
              title={t('website.contact.search')}
@@ -156,7 +152,7 @@ export function WebsiteContactPage() {
              <RotateCcw size={18} />
            </button>
          </div>
-        </div>
+        </form>
      </div>

      <div className={styles.tablePanel}>