react/components/SalesOverview.tsx - claude-react - ivaninvv/dashboard

react/components/SalesOverview.tsx
106 строк3 KB
VladimirIvanin
react
30 ноя 2025, 03:20
30 ноя 2025, 03:20030fe15
'use client'

import { useState } from 'react'
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
import { List, ChevronDown } from 'lucide-react'

const salesData = [
  { month: 'Feb', previousMonth: 600, currentMonth: 450 },
  { month: 'Mar', previousMonth: 650, currentMonth: 700 },
  { month: 'Apr', previousMonth: 700, currentMonth: 500 },
  { month: 'May', previousMonth: 750, currentMonth: 800 },
  { month: 'Jun', previousMonth: 800, currentMonth: 600 },
  { month: 'Jul', previousMonth: 850, currentMonth: 950 },
  { month: 'Aug', previousMonth: 900, currentMonth: 750 },
  { month: 'Sep', previousMonth: 950, currentMonth: 1000 },
]

const SalesOverview = () => {
  const [period, setPeriod] = useState('Last 8 Months')

  const handlePeriodClick = () => {
    console.log('Period selector clicked')
  }

  const handlePeriodKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault()
      handlePeriodClick()
    }
  }

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <div className="flex items-center justify-between mb-6">
        <h3 className="text-lg font-semibold text-gray-900">Sales Overview</h3>
        <div className="flex items-center gap-4">
          <div
            onClick={handlePeriodClick}
            onKeyDown={handlePeriodKeyDown}
            tabIndex={0}
            role="button"
            aria-label="Select period"
            className="flex items-center gap-2 px-3 py-1.5 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
          >
            <span className="text-sm text-gray-700">{period}</span>
            <ChevronDown className="w-4 h-4 text-gray-500" />
          </div>
          <button
            aria-label="View list"
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <List className="w-5 h-5 text-gray-600" />
          </button>
        </div>
      </div>

      <ResponsiveContainer width="100%" height={300}>
        <BarChart data={salesData} barGap={4}>
          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
          <XAxis 
            dataKey="month" 
            axisLine={false}
            tickLine={false}
            tick={{ fill: '#6b7280', fontSize: 12 }}
          />
          <YAxis 
            axisLine={false}
            tickLine={false}
            tick={{ fill: '#6b7280', fontSize: 12 }}
            ticks={[0, 200, 400, 600, 800, 1000]}
          />
          <Tooltip 
            contentStyle={{ 
              backgroundColor: '#fff',
              border: '1px solid #e5e7eb',
              borderRadius: '8px',
              fontSize: '12px'
            }}
          />
          <Legend 
            verticalAlign="bottom"
            height={36}
            iconType="circle"
            wrapperStyle={{ fontSize: '12px', paddingTop: '20px' }}
          />
          <Bar 
            dataKey="previousMonth" 
            fill="#3B82F6" 
            radius={[4, 4, 0, 0]}
            name="Previous Month"
            barSize={16}
          />
          <Bar 
            dataKey="currentMonth" 
            fill="#3ED9EB" 
            radius={[4, 4, 0, 0]}
            name="Current Month"
            barSize={16}
          />
        </BarChart>
      </ResponsiveContainer>
    </div>
  )
}

export default SalesOverview