108 lines
4.8 KiB
TypeScript
108 lines
4.8 KiB
TypeScript
|
|
import React from 'react';
|
|
import { CheckCircle, AlertCircle, Info, User, FileText } from 'lucide-react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { UniversignType } from '@/types/sageTypes';
|
|
import { getAlluniversign } from '@/store/features/universign/selectors';
|
|
import { useAppSelector } from '@/store/hooks';
|
|
import { formatDateFRCourt } from '@/lib/utils';
|
|
|
|
const notifications = [
|
|
{ id: 1, type: 'success', icon: CheckCircle, title: 'Devis signé', message: 'Le devis DEV-00015 a été signé par ACME Corp', time: '5 min' },
|
|
{ id: 2, type: 'info', icon: FileText, title: 'Commande validée', message: 'CMD-00023 validée pour 15 450€', time: '12 min' },
|
|
{ id: 3, type: 'warning', icon: AlertCircle, title: 'Nouveau ticket', message: 'Ticket #TK-00042 créé par Sophie Martin', time: '25 min' },
|
|
{ id: 4, type: 'info', icon: User, title: 'Nouvel utilisateur', message: 'Marie Dubois a été ajoutée', time: '1h' },
|
|
{ id: 5, type: 'success', icon: FileText, title: 'Nouvelle opportunité', message: 'Opportunité "Projet Digital" créée', time: '2h' },
|
|
];
|
|
|
|
const NotificationCenter = ({ onClose }: { onClose: () => void }) => {
|
|
|
|
const universign = useAppSelector(getAlluniversign) as UniversignType[];
|
|
|
|
const devisSigned = universign.filter(
|
|
(item) => item.local_status === "SIGNE"
|
|
);
|
|
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: -10 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: -10 }}
|
|
className="absolute right-0 top-12 w-80 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-2xl shadow-xl overflow-hidden"
|
|
>
|
|
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
|
|
<h3 className="text-sm font-semibold text-gray-900 dark:text-white">Notifications</h3>
|
|
</div>
|
|
<div className="max-h-96 overflow-y-auto">
|
|
{devisSigned.length > 0 ? (
|
|
devisSigned.map((notif) => (
|
|
<div
|
|
key={notif.id}
|
|
className="p-4 border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer transition-colors"
|
|
>
|
|
<div className="flex gap-3">
|
|
<div
|
|
className={`shrink-0 w-8 h-8 rounded-lg flex items-center justify-center bg-green-100 dark:bg-green-900/20
|
|
// notif.type === 'success'
|
|
// ? 'bg-green-100 dark:bg-green-900/20'
|
|
// : notif.type === 'warning'
|
|
// ? 'bg-orange-100 dark:bg-orange-900/20'
|
|
// : 'bg-blue-100 dark:bg-blue-900/20'
|
|
`}
|
|
>
|
|
<i><CheckCircle></CheckCircle></i>
|
|
{/* <notif.icon
|
|
className={`w-4 h-4 ${
|
|
notif.type === 'success'
|
|
? 'text-green-600 dark:text-green-400'
|
|
: notif.type === 'warning'
|
|
? 'text-orange-600 dark:text-orange-400'
|
|
: 'text-blue-600 dark:text-blue-400'
|
|
}`}
|
|
/> */}
|
|
{/* <notif.icon
|
|
className={`w-4 h-4 ${
|
|
notif.type === 'success'
|
|
? 'text-green-600 dark:text-green-400'
|
|
: notif.type === 'warning'
|
|
? 'text-orange-600 dark:text-orange-400'
|
|
: 'text-blue-600 dark:text-blue-400'
|
|
}`}
|
|
/> */}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0 text-left">
|
|
<p className="text-sm font-medium text-gray-900 dark:text-white">
|
|
Devis signé
|
|
</p>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400 mt-0.5">
|
|
{/* {notif.message} */}
|
|
{`Le devis ${notif.sage_document_id} a été signé`}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
|
{formatDateFRCourt(notif.signed_at)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="px-6 py-8 text-center text-sm text-gray-500">
|
|
Aucune notification
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
{/* <div className="p-3 border-t border-gray-200 dark:border-gray-800">
|
|
<button className="w-full text-sm font-medium text-[#941403] hover:text-[#7a1002] transition-colors">
|
|
Voir toutes les notifications
|
|
</button>
|
|
</div> */}
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default NotificationCenter;
|