Flatten transparent product images to white and allow cropper unzoom.

PNG/WebP uploads no longer bake to black on JPEG; product croppers can zoom out with white padding, and SEO tools move into the product overflow menu.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/MyProductsPage.tsx

@@ -8,6 +8,8 @@ import { Pagination } from '../components/Pagination'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { ProductVariantsModal } from '../components/ProductVariantsModal'
 import { ProductTechnicalInfoModal } from '../components/ProductTechnicalInfoModal'
+import { ProductCommentsModal } from '../components/ProductCommentsModal'
+import { ProductSeoModal } from '../components/ProductSeoModal'
 import { TranslationModal } from '../components/TranslationModal'
 import { TranslateAllLanguageModal } from '../components/TranslateAllLanguageModal'
 import { Breadcrumbs } from '../components/Breadcrumbs'
@@ -52,12 +54,15 @@ export function MyProductsPage() {
   const [isDeleting, setIsDeleting] = useState(false)
   const [error, setError] = useState('')
   const [variantCounts, setVariantCounts] = useState<Record<string, number>>({})
+  const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; name: string } | null>(null)
   const [variantsTarget, setVariantsTarget] = useState<{
     id: string
     name: string
     categoryId: string
   } | null>(null)
+  const [commentsTarget, setCommentsTarget] = useState<{ id: string; name: string } | null>(null)
+  const [seoTarget, setSeoTarget] = useState<{ id: string; name: string } | null>(null)
   const [technicalTarget, setTechnicalTarget] = useState<{
     id: string
     name: string
@@ -205,6 +210,24 @@ export function MyProductsPage() {
     }
   }
 
+  function handleComments(id: string) {
+    const product = products.find((p) => p.id === id)
+    if (product) {
+      setCommentsTarget({ id, name: product.nameFa || product.nameEn })
+    }
+  }
+
+  function handleSeo(id: string) {
+    const product = products.find((p) => p.id === id)
+    if (product) {
+      setSeoTarget({ id, name: product.nameFa || product.nameEn })
+    }
+  }
+
+  function handleQuickInfo(id: string) {
+    navigate(`/products/detail/${id}`)
+  }
+
   function handleVariations(id: string) {
     const product = products.find((p) => p.id === id)
     if (product) {
@@ -273,6 +296,14 @@ export function MyProductsPage() {
     writeListQuery('', 1)
   }
 
+  function handleCommentCountChange(count: number) {
+    if (!commentsTarget) return
+    setCommentCounts((prev) => ({
+      ...prev,
+      [commentsTarget.id]: count,
+    }))
+  }
+
   return (
     <main className={pageStyles.content}>
       <Breadcrumbs
@@ -356,9 +387,13 @@ export function MyProductsPage() {
               <ProductCard
                 key={product.id}
                 product={product}
+                commentCount={commentCounts[product.id] ?? product.commentCount}
                 variantCount={variantCounts[product.id] ?? product.variantCount ?? 0}
                 onEdit={handleEdit}
                 onTranslate={handleTranslate}
+                onQuickInfo={handleQuickInfo}
+                onComments={handleComments}
+                onSeo={handleSeo}
                 onTechnicalInfo={handleTechnicalInfo}
                 onVariations={handleVariations}
                 onRemove={handleRemoveRequest}
@@ -414,6 +449,25 @@ export function MyProductsPage() {
         />
       )}
 
+      {commentsTarget && (
+        <ProductCommentsModal
+          open={!!commentsTarget}
+          productId={commentsTarget.id}
+          productName={commentsTarget.name}
+          onClose={() => setCommentsTarget(null)}
+          onCountChange={handleCommentCountChange}
+        />
+      )}
+
+      {seoTarget && (
+        <ProductSeoModal
+          open={!!seoTarget}
+          productId={seoTarget.id}
+          productName={seoTarget.name}
+          onClose={() => setSeoTarget(null)}
+        />
+      )}
+
       {technicalTarget && (
         <ProductTechnicalInfoModal
           open={!!technicalTarget}