107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
type Status =
|
|
| 'actif'
|
|
| 'inactif'
|
|
| 'Saisi'
|
|
| 'Brouillon'
|
|
| 'Envoyé'
|
|
| 'Vu'
|
|
| 'Signé'
|
|
| 'Transformé en commande'
|
|
| 'Annulé'
|
|
| 'Refusé'
|
|
| 'Enregistrée'
|
|
| 'Préparée'
|
|
| 'Livrée'
|
|
| 'Facturée'
|
|
| 'Validée'
|
|
| 'Payée'
|
|
| 'Partiellement payée'
|
|
| 'En retard'
|
|
| 'draft'
|
|
| 'sent'
|
|
| 'accepted'
|
|
| 'paid'
|
|
| 'overdue'
|
|
| 'prospect'
|
|
| 'vip'
|
|
|
|
const statusStyles: Record<Status, string> = {
|
|
// Global Active/Inactive
|
|
actif:
|
|
'bg-green-100 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-400 dark:border-green-800',
|
|
inactif:
|
|
'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700',
|
|
|
|
// Sage 100 / Quote Statuses
|
|
Saisi:
|
|
'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400',
|
|
Brouillon:
|
|
'bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400',
|
|
Envoyé:
|
|
'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800',
|
|
Vu:
|
|
'bg-purple-100 text-purple-700 border-purple-200 dark:bg-purple-900/30 dark:text-purple-400 dark:border-purple-800',
|
|
Signé:
|
|
'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400 dark:border-[#338660]/30',
|
|
'Transformé en commande':
|
|
'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400',
|
|
Annulé:
|
|
'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400 dark:border-red-800',
|
|
Refusé:
|
|
'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400',
|
|
|
|
// Order Statuses
|
|
Enregistrée:
|
|
'bg-blue-50 text-blue-700 border-blue-100 dark:bg-blue-900/20 dark:text-blue-300',
|
|
Préparée:
|
|
'bg-indigo-50 text-indigo-700 border-indigo-100 dark:bg-indigo-900/20 dark:text-indigo-300',
|
|
Livrée:
|
|
'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400',
|
|
Facturée:
|
|
'bg-teal-50 text-teal-700 border-teal-100 dark:bg-teal-900/20 dark:text-teal-300',
|
|
|
|
// Payment Statuses
|
|
Validée: 'bg-blue-50 text-blue-700 border-blue-100',
|
|
Payée:
|
|
'bg-[#338660]/10 text-[#338660] border-[#338660]/20 dark:bg-[#338660]/20 dark:text-green-400',
|
|
'Partiellement payée':
|
|
'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-400',
|
|
'En retard':
|
|
'bg-red-100 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-400',
|
|
|
|
// Legacy
|
|
draft: 'bg-gray-100 text-gray-600',
|
|
sent: 'bg-blue-100 text-blue-700',
|
|
accepted: 'bg-[#338660]/10 text-[#338660]',
|
|
paid: 'bg-[#338660]/10 text-[#338660]',
|
|
overdue: 'bg-red-100 text-red-700',
|
|
prospect: 'bg-blue-50 text-blue-700',
|
|
vip: 'bg-purple-50 text-purple-700',
|
|
}
|
|
|
|
interface StatusBadgetLettreProps {
|
|
status: Status
|
|
className?: string
|
|
}
|
|
|
|
const StatusBadgetLettre: React.FC<StatusBadgetLettreProps> = ({
|
|
status,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-semibold border whitespace-nowrap transition-colors',
|
|
statusStyles[status],
|
|
className
|
|
)}
|
|
>
|
|
{status}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export default StatusBadgetLettre
|