diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/orders/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/orders/page.tsx
index 0028b4b..54936b3 100644
--- a/src/app/[lang]/(dashboard)/(private)/dashboards/orders/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/dashboards/orders/page.tsx
@@ -5,45 +5,16 @@ import Grid from '@mui/material/Grid2'
 
 // Component Imports
 import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
-import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
 
 // Server Action Imports
 import Loading from '../../../../../../components/layout/shared/Loading'
 import { useSalesAnalytics } from '../../../../../../services/queries/analytics'
+import { RecentSale } from '../../../../../../types/services/analytic'
+import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
 
 const DashboardOrder = () => {
   const { data, isLoading } = useSalesAnalytics()
 
-  const formatDate = (dateString: any) => {
-    return new Date(dateString).toLocaleDateString('id-ID', {
-      month: 'short',
-      day: 'numeric'
-    })
-  }
-
-  const transformSalesData = (data: any) => {
-    return [
-      {
-        type: 'items',
-        avatarIcon: 'tabler-shopping-cart',
-        date: data.map((d: any) => formatDate(d.date)),
-        series: [{ data: data.map((d: any) => d.items) }]
-      },
-      {
-        type: 'orders',
-        avatarIcon: 'tabler-chart-bar',
-        date: data.map((d: any) => formatDate(d.date)),
-        series: [{ data: data.map((d: any) => d.orders) }]
-      },
-      {
-        type: 'sales',
-        avatarIcon: 'tabler-currency-dollar',
-        date: data.map((d: any) => formatDate(d.date)),
-        series: [{ data: data.map((d: any) => d.sales) }]
-      }
-    ]
-  }
-
   if (isLoading) return <Loading />
 
   return (
@@ -89,26 +60,8 @@ const DashboardOrder = () => {
         />
       </Grid>
       <Grid size={{ xs: 12, lg: 12 }}>
-        <EarningReportsWithTabs data={transformSalesData(data?.data)} />
+        <OrdersReport title='Sales Report' orderData={data?.data as RecentSale[]} />
       </Grid>
-      {/* <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <RadarSalesChart />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <SalesByCountries />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <ProjectStatus />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <ActiveProjects />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <LastTransaction />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <ActivityTimeline />
-      </Grid> */}
     </Grid>
   )
 }
diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx
index c0b24a0..77e61d3 100644
--- a/src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx
@@ -3,31 +3,19 @@
 import React from 'react'
 import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
 import Loading from '../../../../../../components/layout/shared/Loading'
+import { formatCurrency, formatDate } from '../../../../../../utils/transform'
+import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
+import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
+import OrdersReport from '../../../../../../views/dashboards/orders/OrdersReport'
 
 const DashboardOverview = () => {
   // Sample data - replace with your actual data
   const { data: salesData, isLoading } = useDashboardAnalytics()
 
-  const formatCurrency = (amount: any) => {
-    return new Intl.NumberFormat('id-ID', {
-      style: 'currency',
-      currency: 'IDR',
-      minimumFractionDigits: 0
-    }).format(amount)
-  }
-
-  const formatDate = (dateString: any) => {
-    return new Date(dateString).toLocaleDateString('id-ID', {
-      day: 'numeric',
-      month: 'short',
-      year: 'numeric'
-    })
-  }
-
   if (isLoading) return <Loading />
 
   const MetricCard = ({ iconClass, title, value, subtitle, bgColor = 'bg-blue-500' }: any) => (
-    <div className='bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 p-6'>
+    <div className='bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 p-6'>
       <div className='flex items-center justify-between'>
         <div className='flex-1'>
           <h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
@@ -93,14 +81,14 @@ const DashboardOverview = () => {
 
           {/* Additional Metrics */}
           <div className='grid grid-cols-1 md:grid-cols-2 gap-6 mb-8'>
-            <div className='bg-white rounded-lg shadow-lg p-6'>
+            <div className='bg-white rounded-lg shadow-md p-6'>
               <div className='flex items-center mb-4'>
                 <i className='tabler-x text-[24px] text-red-500 mr-2'></i>
                 <h3 className='text-lg font-semibold text-gray-900'>Voided Orders</h3>
               </div>
               <p className='text-3xl font-bold text-red-600'>{salesData.overview.voided_orders}</p>
             </div>
-            <div className='bg-white rounded-lg shadow-lg p-6'>
+            <div className='bg-white rounded-lg shadow-md p-6'>
               <div className='flex items-center mb-4'>
                 <i className='tabler-refresh text-[24px] text-yellow-500 mr-2'></i>
                 <h3 className='text-lg font-semibold text-gray-900'>Refunded Orders</h3>
@@ -111,170 +99,14 @@ const DashboardOverview = () => {
 
           <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8'>
             {/* Top Products */}
-            <div className='lg:col-span-2 bg-white rounded-lg shadow-lg'>
-              <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'>Top Products</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'>
-                      {salesData.top_products.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>
+            <ProductSales title='Top Products' productData={salesData.top_products} />
 
             {/* Payment Methods */}
-            <div className='bg-white rounded-lg shadow-lg'>
-              <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'>
-                  {salesData.payment_methods.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>
+            <PaymentMethodReport payments={salesData.payment_methods} />
           </div>
 
           {/* Recent Sales */}
-          <div className='bg-white rounded-lg shadow-lg'>
-            <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'>Recent Sales</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'>
-                    {salesData.recent_sales.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>
+          <OrdersReport title='Recent Sales' orderData={salesData.recent_sales} />
         </div>
       )}
     </>
diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/payment-methods/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/payment-methods/page.tsx
index cf4c6ef..bd5a706 100644
--- a/src/app/[lang]/(dashboard)/(private)/dashboards/payment-methods/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/dashboards/payment-methods/page.tsx
@@ -5,27 +5,16 @@ import Grid from '@mui/material/Grid2'
 
 // Component Imports
 import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
-import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
 
 // Server Action Imports
 import Loading from '../../../../../../components/layout/shared/Loading'
 import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
 import { PaymentDataItem } from '../../../../../../types/services/analytic'
+import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
 
 const DashboardPayment = () => {
   const { data, isLoading } = usePaymentAnalytics()
 
-  const transformSalesData = (data: PaymentDataItem[]) => {
-    return [
-      {
-        type: 'payment',
-        avatarIcon: 'tabler-package',
-        date: data.map((d: PaymentDataItem) => d.payment_method_name),
-        series: [{ data: data.map((d: PaymentDataItem) => d.total_amount) }]
-      }
-    ]
-  }
-
   if (isLoading) return <Loading />
 
   return (
@@ -71,26 +60,8 @@ const DashboardPayment = () => {
         />
       </Grid>
       <Grid size={{ xs: 12, lg: 12 }}>
-        <EarningReportsWithTabs data={transformSalesData(data!.data)} />
+        <PaymentMethodReport payments={data?.data as PaymentDataItem[]} />
       </Grid>
-      {/* <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <RadarSalesChart />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <SalesByCountries />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <ProjectStatus />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <ActiveProjects />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <LastTransaction />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <ActivityTimeline />
-      </Grid> */}
     </Grid>
   )
 }
diff --git a/src/app/[lang]/(dashboard)/(private)/dashboards/products/page.tsx b/src/app/[lang]/(dashboard)/(private)/dashboards/products/page.tsx
index 463e39d..3575aca 100644
--- a/src/app/[lang]/(dashboard)/(private)/dashboards/products/page.tsx
+++ b/src/app/[lang]/(dashboard)/(private)/dashboards/products/page.tsx
@@ -10,6 +10,7 @@ import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs
 // Server Action Imports
 import Loading from '../../../../../../components/layout/shared/Loading'
 import { useProductSalesAnalytics } from '../../../../../../services/queries/analytics'
+import ProductSales from '../../../../../../views/dashboards/products/ProductSales'
 
 const DashboardProduct = () => {
   const { data, isLoading } = useProductSalesAnalytics()
@@ -47,67 +48,7 @@ const DashboardProduct = () => {
 
   return (
     <Grid container spacing={6}>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Total Orders'
-          value={summary.totalOrders as number}
-          avatarIcon={'tabler-shopping-cart'}
-          avatarColor='primary'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Product Sold'
-          value={summary.totalQuantitySold as number}
-          avatarIcon={'tabler-package'}
-          avatarColor='info'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Average Orders'
-          value={summary.averageOrderValue as number}
-          avatarIcon={'tabler-trending-up'}
-          avatarColor='warning'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
-        <DistributedBarChartOrder
-          isLoading={isLoading}
-          title='Total Sales'
-          value={summary.totalRevenue as number}
-          avatarIcon={'tabler-currency-dollar'}
-          avatarColor='success'
-          avatarSkin='light'
-        />
-      </Grid>
-      <Grid size={{ xs: 12, lg: 12 }}>
-        <EarningReportsWithTabs data={transformSalesData(data?.data)} />
-      </Grid>
-      {/* <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <RadarSalesChart />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <SalesByCountries />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <ProjectStatus />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
-        <ActiveProjects />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <LastTransaction />
-      </Grid>
-      <Grid size={{ xs: 12, md: 6 }}>
-        <ActivityTimeline />
-      </Grid> */}
+      <Grid size={{ xs: 12, lg: 12 }}>{data?.data && <ProductSales title='Product Sales' productData={data.data} />}</Grid>
     </Grid>
   )
 }
diff --git a/src/utils/transform.ts b/src/utils/transform.ts
index a161f9d..df861eb 100644
--- a/src/utils/transform.ts
+++ b/src/utils/transform.ts
@@ -15,13 +15,11 @@ export const formatShortCurrency = (num: number): string => {
   return num.toString()
 }
 
-export const formatDate = (dateString: string) => {
-  return new Date(dateString).toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
+export const formatDate = (dateString: any) => {
+  return new Date(dateString).toLocaleDateString('id-ID', {
     day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
+    month: 'short',
+    year: 'numeric'
   })
 }
 
diff --git a/src/views/dashboards/orders/OrdersReport.tsx b/src/views/dashboards/orders/OrdersReport.tsx
new file mode 100644
index 0000000..cbb7221
--- /dev/null
+++ b/src/views/dashboards/orders/OrdersReport.tsx
@@ -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
diff --git a/src/views/dashboards/payment-methods/PaymentMethodReport.tsx b/src/views/dashboards/payment-methods/PaymentMethodReport.tsx
new file mode 100644
index 0000000..2ddafee
--- /dev/null
+++ b/src/views/dashboards/payment-methods/PaymentMethodReport.tsx
@@ -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
diff --git a/src/views/dashboards/products/ProductSales.tsx b/src/views/dashboards/products/ProductSales.tsx
new file mode 100644
index 0000000..b3a49b8
--- /dev/null
+++ b/src/views/dashboards/products/ProductSales.tsx
@@ -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