pos-dashboard-v2/src/app/[lang]/(dashboard)/(private)/dashboards/overview/page.tsx

'use client'

import React from 'react'
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
import Loading from '../../../../../../components/layout/shared/Loading'

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='flex items-center justify-between'>
        <div className='flex-1'>
          <h3 className='text-sm font-medium text-gray-600 mb-2'>{title}</h3>
          <p className='text-2xl font-bold text-gray-900 mb-1'>{value}</p>
          {subtitle && <p className='text-sm text-gray-500'>{subtitle}</p>}
        </div>
        <div className={`p-3 rounded-full ${bgColor} bg-opacity-10`}>
          <i className={`${iconClass} text-[32px] ${bgColor.replace('bg-', 'text-')}`}></i>
        </div>
      </div>
    </div>
  )

  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 (
    <>
      {salesData && (
        <div>
          {/* Header */}
          {/* <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Sales Dashboard</h1>
          <p className="text-gray-600">
            {formatDate(salesData.date_from)} - {formatDate(salesData.date_to)}
          </p>
        </div> */}

          {/* Overview Metrics */}
          <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8'>
            <MetricCard
              iconClass='tabler-cash'
              title='Total Sales'
              value={formatCurrency(salesData.overview.total_sales)}
              bgColor='bg-green-500'
            />
            <MetricCard
              iconClass='tabler-shopping-cart'
              title='Total Orders'
              value={salesData.overview.total_orders.toLocaleString()}
              subtitle={`${salesData.overview.voided_orders} voided, ${salesData.overview.refunded_orders} refunded`}
              bgColor='bg-blue-500'
            />
            <MetricCard
              iconClass='tabler-trending-up'
              title='Average Order Value'
              value={formatCurrency(salesData.overview.average_order_value)}
              bgColor='bg-purple-500'
            />
            <MetricCard
              iconClass='tabler-users'
              title='Total Customers'
              value={salesData.overview.total_customers || 'N/A'}
              bgColor='bg-orange-500'
            />
          </div>

          {/* 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='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='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>
              </div>
              <p className='text-3xl font-bold text-yellow-600'>{salesData.overview.refunded_orders}</p>
            </div>
          </div>

          <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>

            {/* 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>
          </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>
        </div>
      )}
    </>
  )
}

export default DashboardOverview