fix: analytic view

2025-08-10 22:56:04 +07:00
parent 0c95dd5f42
commit b648349ebd
8 changed files with 212 additions and 326 deletions
@@ -0,0 +1,82 @@
+import { ProductData } from '../../../types/services/analytic'
+import { formatCurrency } from '../../../utils/transform'
+
+const ProductSales = ({ productData, title }: { productData: ProductData[], title: string }) => {
+  return (
+    <div className='lg:col-span-2 bg-white rounded-lg shadow-md'>
+      <div className='p-6'>
+        <div className='flex items-center mb-6'>
+          <i className='tabler-coffee text-[24px] text-amber-600 mr-2'></i>
+          <h2 className='text-xl font-semibold text-gray-900'>{title}</h2>
+        </div>
+        <div className='overflow-x-auto'>
+          <table className='min-w-full'>
+            <thead>
+              <tr className='bg-gray-50'>
+                <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Product
+                </th>
+                <th className='px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Category
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Qty Sold
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Revenue
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Avg Price
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Orders
+                </th>
+              </tr>
+            </thead>
+            <tbody className='bg-white divide-y divide-gray-200'>
+              {productData.map((product, index) => (
+                <tr key={product.product_id} className='hover:bg-gray-50'>
+                  <td className='px-4 py-4 whitespace-nowrap'>
+                    <div className='flex items-center'>
+                      <span
+                        className={`w-2 h-2 rounded-full mr-3 ${
+                          index === 0
+                            ? 'bg-green-500'
+                            : index === 1
+                              ? 'bg-blue-500'
+                              : index === 2
+                                ? 'bg-purple-500'
+                                : 'bg-gray-400'
+                        }`}
+                      ></span>
+                      <span className='text-sm font-medium text-gray-900'>{product.product_name}</span>
+                    </div>
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap'>
+                    <span className='inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800'>
+                      {product.category_name}
+                    </span>
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900'>
+                    {product.quantity_sold}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600'>
+                    {formatCurrency(product.revenue)}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                    {formatCurrency(product.average_price)}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                    {product.order_count}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ProductSales