110 lines
4.2 KiB
TypeScript
110 lines
4.2 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { ChevronUp, Info } from 'lucide-react';
|
|
import { useDisplayMode } from '@/context/DisplayModeContext';
|
|
|
|
interface StickyTotalsProps {
|
|
total_ht_calcule: number;
|
|
total_taxes_calcule: number;
|
|
total_ttc_calcule: number;
|
|
}
|
|
|
|
const formatCurrency = (amount: number): string => {
|
|
return new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR',
|
|
}).format(amount || 0);
|
|
};
|
|
|
|
const StickyTotals: React.FC<StickyTotalsProps> = ({
|
|
total_ht_calcule,
|
|
total_taxes_calcule,
|
|
total_ttc_calcule,
|
|
}) => {
|
|
const { displayMode } = useDisplayMode();
|
|
const isCompact = displayMode === 'compact';
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'sticky bottom-0 z-40 bg-white/95 backdrop-blur-sm dark:bg-gray-950/95 border-t border-gray-200 dark:border-gray-800 shadow-[0_-4px_20px_-5px_rgba(0,0,0,0.1)] transition-all duration-300',
|
|
'shrink-0',
|
|
isCompact ? 'py-2' : 'py-4'
|
|
)}
|
|
>
|
|
<div className="max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
|
|
{/* Left: Conditions & Notes */}
|
|
<div className="hidden md:flex items-center gap-6 flex-1">
|
|
<div className="flex flex-col gap-1 w-[200px]">
|
|
<label className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">
|
|
Conditions de paiement
|
|
</label>
|
|
<select className="bg-transparent border-b border-gray-200 dark:border-gray-700 text-sm py-1 focus:outline-none focus:border-[#2A6F4F] transition-colors text-gray-700 dark:text-gray-300">
|
|
<option>30 jours fin de mois</option>
|
|
<option>45 jours fin de mois</option>
|
|
<option>Comptant à la commande</option>
|
|
<option>A réception de facture</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-1 flex-1 max-w-[300px]">
|
|
<label className="text-[10px] uppercase font-bold text-gray-400 tracking-wider">
|
|
Note rapide
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Ajouter une mention sur la facture..."
|
|
className="bg-transparent border-b border-gray-200 dark:border-gray-700 text-sm py-1 focus:outline-none focus:border-[#2A6F4F] transition-colors w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right: Totals */}
|
|
<div className="flex items-center gap-8 ml-auto">
|
|
|
|
{/* Breakdown */}
|
|
<div className="flex items-center gap-6 text-gray-500 dark:text-gray-400 border-r border-gray-200 dark:border-gray-800 pr-6 mr-2">
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-[10px] uppercase font-bold tracking-wider text-gray-400">
|
|
Total HT
|
|
</span>
|
|
<span className="font-mono font-medium text-gray-900 dark:text-gray-200 text-base">
|
|
{formatCurrency(total_ht_calcule)}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-[10px] uppercase font-bold tracking-wider text-gray-400">
|
|
TVA (20%)
|
|
</span>
|
|
<span className="font-mono font-medium text-gray-900 dark:text-gray-200 text-base">
|
|
{formatCurrency(total_taxes_calcule)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Grand Total */}
|
|
<div className="flex flex-col items-end">
|
|
<span className="text-[10px] uppercase font-bold tracking-wider text-[#2A6F4F]">
|
|
Net à Payer TTC
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
'font-mono font-bold text-[#1F2937] dark:text-white leading-none mt-1',
|
|
isCompact ? 'text-xl' : 'text-2xl'
|
|
)}
|
|
>
|
|
{formatCurrency(total_ttc_calcule)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StickyTotals;
|