File size: 4,092 Bytes
0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 160531a 0a5bd33 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 'use client';
import React from 'react';
import { ComparisonItem } from '@/types';
import { Zap, CheckCircle2, TrendingDown } from 'lucide-react';
interface BreakEvenChartProps {
currentQty: number;
chosenTech: 'offset' | 'digital';
comparisonTable?: ComparisonItem[];
breakEvenQty?: number;
reason?: string;
}
export const BreakEvenChart: React.FC<BreakEvenChartProps> = ({
currentQty,
chosenTech,
comparisonTable = [],
breakEvenQty = 300,
reason,
}) => {
if (!comparisonTable || comparisonTable.length === 0) return null;
const maxPrice = Math.max(...comparisonTable.map((c) => Math.max(c.digitalTotal, c.offsetTotal)));
return (
<div className="space-y-3">
{/* Khuyến nghị ngắn gọn */}
{reason && (
<div className="p-3 bg-blue-50 border border-blue-200/80 rounded-xl text-xs text-blue-900 flex items-start gap-2">
<Zap className="w-4 h-4 text-blue-600 shrink-0 mt-0.5" />
<div className="leading-relaxed font-medium">
{reason}
</div>
</div>
)}
{/* Biểu đồ cột tinh giản */}
<div className="bg-slate-50 border border-slate-200/80 rounded-xl p-3.5">
<div className="flex items-center justify-between text-[11px] text-slate-500 mb-2 pb-1.5 border-b border-slate-200/60">
<span className="font-semibold text-slate-700">So sánh chi phí theo số lượng</span>
<div className="flex items-center gap-3 font-medium">
<span className="flex items-center gap-1 text-sky-600">
<span className="w-2 h-2 rounded-full bg-sky-500 inline-block" /> In Nhanh KTS
</span>
<span className="flex items-center gap-1 text-indigo-600">
<span className="w-2 h-2 rounded-full bg-indigo-600 inline-block" /> In Offset
</span>
</div>
</div>
<div className="grid grid-cols-4 sm:grid-cols-8 gap-1.5 items-end h-[120px] pt-2 pb-1">
{comparisonTable.map((item) => {
const digHeight = Math.max(8, Math.round((item.digitalTotal / maxPrice) * 95));
const offHeight = Math.max(8, Math.round((item.offsetTotal / maxPrice) * 95));
const isCurrent = item.quantity === currentQty;
return (
<div key={item.quantity} className="flex flex-col items-center gap-1 group relative">
{/* Tooltip */}
<div className="opacity-0 group-hover:opacity-100 transition-opacity absolute -top-10 z-20 bg-slate-900 text-white text-[10px] rounded py-0.5 px-1.5 pointer-events-none whitespace-nowrap shadow">
KTS: {item.digitalTotal.toLocaleString('vi-VN')}đ | Offset: {item.offsetTotal.toLocaleString('vi-VN')}đ
</div>
<div className="flex items-end gap-1 w-full justify-center">
<div
style={{ height: `${digHeight}px` }}
className={`w-3 sm:w-3.5 rounded-t transition-all ${
item.recommended === 'digital' ? 'bg-sky-500' : 'bg-sky-200'
}`}
/>
<div
style={{ height: `${offHeight}px` }}
className={`w-3 sm:w-3.5 rounded-t transition-all ${
item.recommended === 'offset' ? 'bg-indigo-600' : 'bg-indigo-200'
}`}
/>
</div>
<span className={`text-[10px] ${isCurrent ? 'font-black text-blue-700' : 'text-slate-400 font-medium'}`}>
{item.quantity >= 1000 ? `${item.quantity / 1000}k` : item.quantity}
</span>
</div>
);
})}
</div>
<div className="mt-2 pt-2 border-t border-slate-200/60 flex items-center justify-between text-[11px] text-slate-500">
<span>Điểm chuyển giao hòa vốn:</span>
<strong className="text-slate-800 font-semibold">~{breakEvenQty.toLocaleString('vi-VN')} chiếc</strong>
</div>
</div>
</div>
);
};
|