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,65 @@
+import { RecentSale } from '../../../types/services/analytic'
+import { formatCurrency, formatDate } from '../../../utils/transform'
+
+const OrdersReport = ({ orderData, title }: { orderData: RecentSale[]; title: string }) => {
+  return (
+    <div className='bg-white rounded-lg shadow-md'>
+      <div className='p-6'>
+        <div className='flex items-center mb-6'>
+          <i className='tabler-calendar-stats text-[24px] text-purple-500 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'>Date</th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Sales
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Orders
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Items
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>Tax</th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Discount
+                </th>
+                <th className='px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider'>
+                  Net Sales
+                </th>
+              </tr>
+            </thead>
+            <tbody className='bg-white divide-y divide-gray-200'>
+              {orderData.map((sale, index) => (
+                <tr key={index} className='hover:bg-gray-50'>
+                  <td className='px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-900'>
+                    {formatDate(sale.date)}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-gray-900'>
+                    {formatCurrency(sale.sales)}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{sale.orders}</td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>{sale.items}</td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                    {formatCurrency(sale.tax)}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm text-gray-900'>
+                    {formatCurrency(sale.discount)}
+                  </td>
+                  <td className='px-4 py-4 whitespace-nowrap text-right text-sm font-medium text-green-600'>
+                    {formatCurrency(sale.net_sales)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OrdersReport
@@ -0,0 +1,44 @@
+import { PaymentDataItem } from '../../../types/services/analytic'
+import { formatCurrency } from '../../../utils/transform'
+
+const PaymentMethodReport = ({ payments }: { payments: PaymentDataItem[] }) => {
+  const ProgressBar = ({ percentage, color = 'bg-blue-500' }: any) => (
+    <div className='w-full bg-gray-200 rounded-full h-2'>
+      <div
+        className={`${color} h-2 rounded-full transition-all duration-300`}
+        style={{ width: `${percentage}%` }}
+      ></div>
+    </div>
+  )
+
+  return (
+    <div className='bg-white rounded-lg shadow-md'>
+      <div className='p-6'>
+        <div className='flex items-center mb-6'>
+          <i className='tabler-credit-card text-[24px] text-blue-500 mr-2'></i>
+          <h2 className='text-xl font-semibold text-gray-900'>Payment Methods</h2>
+        </div>
+        <div className='space-y-6'>
+          {payments.map(method => (
+            <div key={method.payment_method_id} className='border-b border-gray-200 pb-4 last:border-b-0'>
+              <div className='flex justify-between items-center mb-2'>
+                <span className='text-sm font-medium text-gray-900'>{method.payment_method_name}</span>
+                <span className='text-sm text-gray-600'>{method.percentage.toFixed(1)}%</span>
+              </div>
+              <ProgressBar
+                percentage={method.percentage}
+                color={method.payment_method_type === 'cash' ? 'bg-green-500' : 'bg-blue-500'}
+              />
+              <div className='flex justify-between items-center mt-2 text-xs text-gray-600'>
+                <span>{formatCurrency(method.total_amount)}</span>
+                <span>{method.order_count} orders</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PaymentMethodReport
@@ -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