From a851fc4a50888cc334313476b50701f20633220a Mon Sep 17 00:00:00 2001
From: hossein taromi <hosseintaromii@gmail.com>
Date: Wed, 30 Jul 2025 17:11:07 +0330
Subject: [PATCH] refactor: streamline image and variant handling in
 ProductDetailPage and ProductsListPage

---
 .../product-detail/ProductDetailPage.tsx      | 21 ++++++++++++-------
 .../products/product-form/ProductFormPage.tsx |  4 ++--
 .../products-list/ProductsListPage.tsx        | 14 +++++++++----
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/pages/products/product-detail/ProductDetailPage.tsx b/src/pages/products/product-detail/ProductDetailPage.tsx
index 1f457f7..02781ce 100644
--- a/src/pages/products/product-detail/ProductDetailPage.tsx
+++ b/src/pages/products/product-detail/ProductDetailPage.tsx
@@ -24,6 +24,11 @@ const ProductDetailPage = () => {
         return new Intl.NumberFormat('fa-IR').format(num);
     };
 
+    // تصاویر محصول (حاصل تجمیع دو فیلد مختلف از API)
+    const images = (product.file_ids && product.file_ids.length > 0) ? product.file_ids : ((product as any).files || []);
+
+    const variants = (product.variants && product.variants.length > 0) ? product.variants : ((product as any).product_variants || []);
+
     return (
         <PageContainer>
             <div className="flex items-center justify-between mb-6">
@@ -184,14 +189,14 @@ const ProductDetailPage = () => {
                     )}
 
                     {/* تصاویر محصول */}
-                    {product.file_ids && product.file_ids.length > 0 && (
+                    {images.length > 0 && (
                         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                             <SectionTitle className="flex items-center gap-2 mb-4">
                                 <Image className="h-5 w-5" />
                                 تصاویر محصول
                             </SectionTitle>
                             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                                {product.file_ids.map((image, index) => (
+                                {images.map((image: any, index: number) => (
                                     <div key={image.id || index} className="relative group">
                                         <img
                                             src={image.url}
@@ -208,14 +213,14 @@ const ProductDetailPage = () => {
                     )}
 
                     {/* نسخه‌های محصول */}
-                    {product.variants && product.variants.length > 0 && (
+                    {(variants.length > 0) && (
                         <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                             <SectionTitle className="flex items-center gap-2 mb-4">
                                 <Layers className="h-5 w-5" />
                                 نسخه‌های محصول
                             </SectionTitle>
                             <div className="space-y-6">
-                                {product.variants.map((variant, index) => (
+                                {variants.map((variant, index) => (
                                     <div key={variant.id || index} className="border border-gray-200 dark:border-gray-600 rounded-lg p-4">
                                         <div className="flex items-center justify-between mb-4">
                                             <h4 className="font-medium text-gray-900 dark:text-gray-100">
@@ -378,7 +383,7 @@ const ProductDetailPage = () => {
                                 </span>
                             </div>
 
-                            {product.variants && (
+                            {variants.length > 0 && (
                                 <div className="flex items-center justify-between">
                                     <div className="flex items-center gap-2">
                                         <Layers className="h-4 w-4 text-blue-500" />
@@ -387,12 +392,12 @@ const ProductDetailPage = () => {
                                         </span>
                                     </div>
                                     <span className="font-semibold text-gray-900 dark:text-gray-100">
-                                        {formatNumber(product.variants.length)}
+                                        {formatNumber(variants.length)}
                                     </span>
                                 </div>
                             )}
 
-                            {product.file_ids && (
+                            {images.length > 0 && (
                                 <div className="flex items-center justify-between">
                                     <div className="flex items-center gap-2">
                                         <Image className="h-4 w-4 text-purple-500" />
@@ -401,7 +406,7 @@ const ProductDetailPage = () => {
                                         </span>
                                     </div>
                                     <span className="font-semibold text-gray-900 dark:text-gray-100">
-                                        {formatNumber(product.file_ids.length)}
+                                        {formatNumber(images.length)}
                                     </span>
                                 </div>
                             )}
diff --git a/src/pages/products/product-form/ProductFormPage.tsx b/src/pages/products/product-form/ProductFormPage.tsx
index 83c177b..62f62aa 100644
--- a/src/pages/products/product-form/ProductFormPage.tsx
+++ b/src/pages/products/product-form/ProductFormPage.tsx
@@ -223,7 +223,7 @@ const ProductFormPage = () => {
                 stock_number: variant.stock_number,
                 weight: variant.weight,
                 product_option_id: variant.product_option_id || null,
-                file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.filter((id: any) => typeof id === 'number' && !isNaN(id)) : [],
+                file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.map((file: any) => Number(typeof file === 'object' ? file.id : file)).filter((id: number) => !isNaN(id)) : [],
                 attributes: variant.attributes && Object.keys(variant.attributes).length > 0 ? variant.attributes : {},
                 meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {}
             })) || [];
@@ -248,7 +248,7 @@ const ProductFormPage = () => {
                 stock_number: variant.stock_number,
                 weight: variant.weight,
                 product_option_id: variant.product_option_id || null,
-                file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.filter((id: any) => typeof id === 'number' && !isNaN(id)) : [],
+                file_ids: Array.isArray(variant.file_ids) ? variant.file_ids.map((file: any) => Number(typeof file === 'object' ? file.id : file)).filter((id: number) => !isNaN(id)) : [],
                 attributes: variant.attributes && Object.keys(variant.attributes).length > 0 ? variant.attributes : {},
                 meta: variant.meta && Object.keys(variant.meta).length > 0 ? variant.meta : {}
             })) || [];
diff --git a/src/pages/products/products-list/ProductsListPage.tsx b/src/pages/products/products-list/ProductsListPage.tsx
index 1b51339..a9518a6 100644
--- a/src/pages/products/products-list/ProductsListPage.tsx
+++ b/src/pages/products/products-list/ProductsListPage.tsx
@@ -123,6 +123,12 @@ const ProductsListPage = () => {
         return new Intl.NumberFormat('fa-IR').format(price) + ' تومان';
     };
 
+    const getFirstImageUrl = (p: any): string | null => {
+        if (p.file_ids && p.file_ids.length > 0) return p.file_ids[0].url;
+        if (p.files && p.files.length > 0) return p.files[0].url;
+        return null;
+    };
+
     const getStatusBadge = (status: string) => {
         switch (status) {
             case 'active':
@@ -281,9 +287,9 @@ const ProductsListPage = () => {
                                             <td className="px-6 py-4 whitespace-nowrap">
                                                 <div className="flex items-center gap-3">
                                                     <div className="flex-shrink-0">
-                                                        {product.file_ids && product.file_ids.length > 0 ? (
+                                                        {getFirstImageUrl(product) ? (
                                                             <img
-                                                                src={product.file_ids[0].url}
+                                                                src={getFirstImageUrl(product) as string}
                                                                 alt={product.name}
                                                                 className="w-10 h-10 object-cover rounded"
                                                             />
@@ -352,9 +358,9 @@ const ProductsListPage = () => {
                             <div key={product.id} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                                 <div className="flex gap-3 mb-3">
                                     <div className="flex-shrink-0">
-                                        {product.file_ids && product.file_ids.length > 0 ? (
+                                        {getFirstImageUrl(product) ? (
                                             <img
-                                                src={product.file_ids[0].url}
+                                                src={getFirstImageUrl(product) as string}
                                                 alt={product.name}
                                                 className="w-12 h-12 object-cover rounded"
                                             />