From 19169e43dea0ac0e693ffdc65c9e6ab02294a16c Mon Sep 17 00:00:00 2001
From: morteza-mortezai <mrtz.mrtzi.1989@gmail.com>
Date: Mon, 13 Jul 2026 22:43:53 +0330
Subject: [PATCH] update

---
 src/components/Td.tsx       | 23 +++++++--
 src/pages/products/List.tsx | 97 +++++++++++++++++++++++--------------
 2 files changed, 79 insertions(+), 41 deletions(-)

diff --git a/src/components/Td.tsx b/src/components/Td.tsx
index d2a995f..4f61bfc 100644
--- a/src/components/Td.tsx
+++ b/src/components/Td.tsx
@@ -1,19 +1,32 @@
 import { type FC, type ReactNode } from 'react'
+import { clx } from '../helpers/utils'
 
 interface Props {
     text: string,
     children?: ReactNode,
     dir?: string,
+    align?: 'start' | 'center' | 'end',
+    className?: string,
 }
 
 const Td: FC<Props> = (props: Props) => {
+    const alignClass = props.align === 'end'
+        ? 'text-end'
+        : props.align === 'center'
+            ? 'text-center'
+            : props.align === 'start'
+                ? 'text-start'
+                : ''
+
     return (
-        <td className='td' style={{ direction: props.dir === "ltr" ? "ltr" : "rtl" }}>
+        <td
+            className={clx('td', alignClass, props.className)}
+            style={{ direction: props.dir === 'ltr' ? 'ltr' : 'rtl' }}
+        >
             {
-                props.text ?
-                    props.text
-                    :
-                    props.children
+                props.text
+                    ? props.text
+                    : props.children
             }
         </td>
     )
diff --git a/src/pages/products/List.tsx b/src/pages/products/List.tsx
index 105c81e..bce0a25 100644
--- a/src/pages/products/List.tsx
+++ b/src/pages/products/List.tsx
@@ -13,7 +13,7 @@ import Td from '../../components/Td';
 import TrashWithConfrim from '../../components/TrashWithConfrim';
 import ModalConfrim from '../../components/ModalConfrim';
 import PageTitle from '../../components/PageTitle';
-import { Edit } from 'iconsax-react';
+import { Box1 } from 'iconsax-react';
 import Button from '@/components/Button';
 import { Link } from 'react-router-dom';
 import { Pages } from '@/config/Pages';
@@ -140,8 +140,8 @@ const List: FC = () => {
                     className='w-fit'
                 />
             </div>
-            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
-                <table className='w-full text-sm'>
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full border border-[#EAEDF5]'>
+                <table className='w-full text-sm min-w-[960px]'>
                     <thead className='thead'>
                         <tr>
                             <Td text={'تصویر'} />
@@ -150,15 +150,15 @@ const List: FC = () => {
                             <Td text={'دسته‌بندی'} />
                             <Td text='تنوع' />
                             <Td text={'وضعیت'} />
-                            <Td text={'قیمت'} />
-                            <Td text={'موجودی'} />
-                            <Td text={'عملیات'} />
+                            <Td text={'قیمت'} align='end' />
+                            <Td text={'موجودی'} align='end' />
+                            <Td text={'عملیات'} align='center' className='min-w-[120px]' />
                         </tr>
                     </thead>
                     <tbody>
                         {products.length === 0 ? (
                             <tr className='tr'>
-                                <td colSpan={9} className="text-center py-8 text-gray-500">
+                                <td colSpan={9} className="text-center py-8 text-gray-500 text-sm">
                                     هیچ محصولی یافت نشد
                                 </td>
                             </tr>
@@ -166,7 +166,7 @@ const List: FC = () => {
                             products.map((product: ProductListType) => (
                                 <tr key={product._id} className='tr'>
                                     <Td text="">
-                                        <div className="w-12 h-12 rounded-lg overflow-hidden">
+                                        <div className="w-11 h-11 rounded-lg overflow-hidden bg-gray-50 shrink-0">
                                             <img
                                                 src={product.imagesUrl?.cover || '/placeholder-image.png'}
                                                 alt={product.title_fa}
@@ -175,25 +175,35 @@ const List: FC = () => {
                                         </div>
                                     </Td>
                                     <Td text="">
-                                        <div>
-                                            <div className="font-medium text-gray-900">
+                                        <div className="max-w-[220px]">
+                                            <div className="font-medium text-gray-900 truncate" title={product.title_fa}>
                                                 {product.title_fa}
                                             </div>
-                                            <div className="text-gray-500 text-xs">
+                                            <div className="text-gray-400 text-xs truncate mt-0.5" title={product.title_en}>
                                                 {product.title_en}
                                             </div>
                                         </div>
                                     </Td>
-                                    <Td text={product.brand_title_fa} />
-                                    <Td text={product.category_title_fa} />
+                                    <Td text="">
+                                        <span className="text-gray-700 max-w-[120px] truncate inline-block" title={product.brand_title_fa}>
+                                            {product.brand_title_fa}
+                                        </span>
+                                    </Td>
+                                    <Td text="">
+                                        <span className="text-gray-700 max-w-[120px] truncate inline-block" title={product.category_title_fa}>
+                                            {product.category_title_fa}
+                                        </span>
+                                    </Td>
                                     <Td text=''>
-                                        <Link
-                                            to={`${Pages.products.variants}${product._id}`}
-                                        >
+                                        <Link to={`${Pages.products.variants}${product._id}`}>
                                             <Button
-                                                className='h-8 text-xs'
+                                                variant='outline'
+                                                size='sm'
+                                                className='w-fit px-2.5 whitespace-nowrap'
                                             >
-                                                مدیریت تنوع
+                                                <span className="flex items-center gap-1">
+                                                    مدیریت تنوع
+                                                </span>
                                             </Button>
                                         </Link>
                                     </Td>
@@ -203,26 +213,41 @@ const List: FC = () => {
                                             text={getStatusText(product.status)}
                                         />
                                     </Td>
-                                    <Td text={`${product.default_variant?.price?.selling_price?.toLocaleString('fa-IR') || 0} تومان`} />
-                                    <Td text={String(product.default_variant?.stock || 0)} />
-                                    <Td text="">
-                                        <div className="flex items-center gap-2">
-                                            {
-                                                product.status !== ProductStatus.Draft && (
-                                                    <Button
-                                                        variant='outline'
-                                                        label='پیش نویس'
-                                                        className='text-xs h-8 px-2'
-                                                        onClick={() => {
-                                                            setSelectedProductId(String(product._id));
-                                                            setIsDraftConfirmOpen(true);
-                                                        }}
-                                                    />
-                                                )
-                                            }
+                                    <Td text="" align='end'>
+                                        <span className="text-gray-800 font-medium whitespace-nowrap">
+                                            {(product.default_variant?.price?.selling_price ?? 0).toLocaleString('fa-IR')}
+                                            <span className="text-gray-400 font-normal ms-1">تومان</span>
+                                        </span>
+                                    </Td>
+                                    <Td text="" align='end'>
+                                        <span className="text-gray-700 tabular-nums">
+                                            {product.default_variant?.stock ?? 0}
+                                        </span>
+                                    </Td>
+                                    <Td text="" align='center' className='min-w-[120px]'>
+                                        <div className="flex items-center justify-center gap-1.5">
+                                            {product.status !== ProductStatus.Draft && (
+                                                <Button
+                                                    variant='outline'
+                                                    size='sm'
+                                                    className='w-fit px-2.5 shrink-0'
+                                                    onClick={() => {
+                                                        setSelectedProductId(String(product._id));
+                                                        setIsDraftConfirmOpen(true);
+                                                    }}
+                                                >
+                                                    پیش‌نویس
+                                                </Button>
+                                            )}
                                             {product.status === ProductStatus.Draft && (
                                                 <Link to={`${Pages.products.update}${product._id}`}>
-                                                    <Edit color='#8C90A3' size={16} className="cursor-pointer hover:text-blue-500" />
+                                                    <Button
+                                                        variant='outline'
+                                                        size='sm'
+                                                        className='w-fit px-2.5 shrink-0'
+                                                    >
+                                                        ویرایش
+                                                    </Button>
                                                 </Link>
                                             )}