227 lines
8.1 KiB
TypeScript
227 lines
8.1 KiB
TypeScript
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { X, Percent } from "lucide-react";
|
||
|
|
|
||
|
|
interface DiscountOrderModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
onConfirm: (discountValue: number, discountPercent: number) => void;
|
||
|
|
orderValue: number;
|
||
|
|
profit?: number;
|
||
|
|
netProfit?: number;
|
||
|
|
isManager?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
const DiscountOrderModal: React.FC<DiscountOrderModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
onConfirm,
|
||
|
|
orderValue,
|
||
|
|
profit = 0,
|
||
|
|
netProfit = 0,
|
||
|
|
isManager = false,
|
||
|
|
}) => {
|
||
|
|
const [discountPercent, setDiscountPercent] = useState<string>("0");
|
||
|
|
const [discountValue, setDiscountValue] = useState<string>("0");
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isOpen) {
|
||
|
|
setDiscountPercent("0");
|
||
|
|
setDiscountValue("0");
|
||
|
|
}
|
||
|
|
}, [isOpen]);
|
||
|
|
|
||
|
|
const formatCurrency = (value: number) => {
|
||
|
|
return new Intl.NumberFormat("pt-BR", {
|
||
|
|
style: "currency",
|
||
|
|
currency: "BRL",
|
||
|
|
}).format(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const formatPercent = (value: number) => {
|
||
|
|
return new Intl.NumberFormat("pt-BR", {
|
||
|
|
minimumFractionDigits: 2,
|
||
|
|
maximumFractionDigits: 2,
|
||
|
|
}).format(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handlePercentChange = (value: string) => {
|
||
|
|
const numValue = parseFloat(value.replace(/[^\d,.-]/g, "").replace(",", ".")) || 0;
|
||
|
|
setDiscountPercent(formatPercent(numValue));
|
||
|
|
|
||
|
|
if (orderValue > 0) {
|
||
|
|
const discount = (orderValue * numValue) / 100;
|
||
|
|
setDiscountValue(formatCurrency(discount));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleValueChange = (value: string) => {
|
||
|
|
const numValue = parseFloat(value.replace(/[^\d,.-]/g, "").replace(",", ".")) || 0;
|
||
|
|
setDiscountValue(formatCurrency(numValue));
|
||
|
|
|
||
|
|
if (orderValue > 0) {
|
||
|
|
const percent = (numValue / orderValue) * 100;
|
||
|
|
setDiscountPercent(formatPercent(percent));
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleConfirm = () => {
|
||
|
|
const discountValueNum = parseFloat(
|
||
|
|
discountValue.replace(/[^\d,.-]/g, "").replace(",", ".")
|
||
|
|
) || 0;
|
||
|
|
const discountPercentNum = parseFloat(
|
||
|
|
discountPercent.replace(/[^\d,.-]/g, "").replace(",", ".")
|
||
|
|
) || 0;
|
||
|
|
|
||
|
|
onConfirm(discountValueNum, discountPercentNum);
|
||
|
|
onClose();
|
||
|
|
};
|
||
|
|
|
||
|
|
const netValue = orderValue - (parseFloat(discountValue.replace(/[^\d,.-]/g, "").replace(",", ".")) || 0);
|
||
|
|
const calculatedNetProfit = orderValue > 0 && netValue > 0
|
||
|
|
? (((netValue - profit) / netValue) * 100).toFixed(2)
|
||
|
|
: "0.00";
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||
|
|
<div className="bg-white rounded-3xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col overflow-hidden">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="p-6 bg-[#002147] text-white rounded-t-3xl relative overflow-hidden flex-shrink-0">
|
||
|
|
<div className="relative z-10 flex items-center justify-between">
|
||
|
|
<div className="flex items-center gap-3">
|
||
|
|
<div className="w-12 h-12 bg-orange-500/20 rounded-2xl flex items-center justify-center">
|
||
|
|
<Percent className="w-6 h-6 text-orange-400" />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h3 className="text-xl font-black">Pedido de venda</h3>
|
||
|
|
<p className="text-xs text-orange-400 font-bold uppercase tracking-wider mt-0.5">
|
||
|
|
Conceder desconto sobre o pedido
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-white/10 transition-colors"
|
||
|
|
>
|
||
|
|
<X className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div className="absolute right-[-10%] top-[-10%] w-32 h-32 bg-orange-400/10 rounded-full blur-2xl"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="flex-1 overflow-auto p-6">
|
||
|
|
<form className="space-y-4">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
|
|
{/* Valor do pedido */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-black uppercase text-slate-600 tracking-wider mb-2">
|
||
|
|
Valor do pedido
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={formatCurrency(orderValue)}
|
||
|
|
disabled
|
||
|
|
className="w-full bg-slate-50 border-2 border-slate-200 rounded-xl px-4 py-3 font-black text-slate-700 outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* % Margem (apenas para gerente) */}
|
||
|
|
{isManager && (
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-black uppercase text-slate-600 tracking-wider mb-2">
|
||
|
|
% Margem
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={formatPercent(profit)}
|
||
|
|
disabled
|
||
|
|
className="w-full bg-slate-50 border-2 border-slate-200 rounded-xl px-4 py-3 font-black text-slate-700 outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Percentual de desconto */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-black uppercase text-slate-600 tracking-wider mb-2">
|
||
|
|
Percentual de desconto
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={discountPercent}
|
||
|
|
onChange={(e) => handlePercentChange(e.target.value)}
|
||
|
|
className="w-full bg-white border-2 border-slate-200 rounded-xl px-4 py-3 font-black text-slate-700 outline-none focus:border-orange-500 transition-all"
|
||
|
|
placeholder="0,00"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Valor de desconto */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-black uppercase text-slate-600 tracking-wider mb-2">
|
||
|
|
Valor de desconto
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={discountValue}
|
||
|
|
onChange={(e) => handleValueChange(e.target.value)}
|
||
|
|
className="w-full bg-white border-2 border-slate-200 rounded-xl px-4 py-3 font-black text-slate-700 outline-none focus:border-orange-500 transition-all"
|
||
|
|
placeholder="R$ 0,00"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Valor líquido */}
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-black uppercase text-slate-600 tracking-wider mb-2">
|
||
|
|
Valor líquido
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={formatCurrency(netValue)}
|
||
|
|
disabled
|
||
|
|
className="w-full bg-slate-50 border-2 border-slate-200 rounded-xl px-4 py-3 font-black text-slate-700 outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* % Margem Líquida (apenas para gerente) */}
|
||
|
|
{isManager && (
|
||
|
|
<div>
|
||
|
|
<label className="block text-xs font-black uppercase text-slate-600 tracking-wider mb-2">
|
||
|
|
% Margem Líquida
|
||
|
|
</label>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={`${calculatedNetProfit}%`}
|
||
|
|
disabled
|
||
|
|
className="w-full bg-slate-50 border-2 border-slate-200 rounded-xl px-4 py-3 font-black text-slate-700 outline-none"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<div className="p-6 border-t border-slate-200 flex-shrink-0 flex items-center justify-end gap-3">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="px-6 py-3 rounded-xl font-bold text-slate-700 hover:bg-slate-100 transition-colors"
|
||
|
|
>
|
||
|
|
Cancelar
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={handleConfirm}
|
||
|
|
className="px-6 py-3 rounded-xl font-black bg-[#002147] text-white hover:bg-[#001a36] transition-all shadow-lg shadow-[#002147]/20 active:scale-95"
|
||
|
|
>
|
||
|
|
Aplicar
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DiscountOrderModal;
|
||
|
|
|
||
|
|
|