function AnnouncementBanner() { const [announcements, setAnnouncements] = useState([]); const [showAddForm, setShowAddForm] = useState(false); const [newMessage, setNewMessage] = useState(""); const [priority, setPriority] = useState("normal"); const [currentAgent, setCurrentAgent] = useState(""); useEffect(()=>{ const loggedInAgent = localStorage.getItem("currentAgent"); if (loggedInAgent) { setCurrentAgent(loggedInAgent); } }, []); const loadAnnouncements = async ()=>{ try { const response = await fetch("/api/announcements/active", { method: "POST" }); const data = await response.json(); setAnnouncements(data); } catch (error) { console.error("Fout bij ophalen aankondigingen:", error); } }; useEffect(()=>{ loadAnnouncements(); const interval = setInterval(loadAnnouncements, 60000); return ()=>clearInterval(interval); }, []); const handleSubmit = async (e)=>{ e.preventDefault(); try { await fetch("/api/announcements/create", { method: "POST", body: JSON.stringify({ message: newMessage, priority, created_by: currentAgent, expires_at: new Date(Date.now() + 4 * 60 * 60 * 1000).toISOString() }) }); setNewMessage(""); setPriority("normal"); setShowAddForm(false); loadAnnouncements(); } catch (error) { console.error("Fout bij maken aankondiging:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white border-b shadow-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-2", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-800", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, announcements.length > 0 ? "Aankondigingen" : "Geen actieve aankondigingen"), currentAgent && !showAddForm && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAddForm(true), className: "bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }), "Nieuwe aankondiging")), showAddForm && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 mb-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, "Bericht"), /*#__PURE__*/ React.createElement("textarea", { value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Typ je aankondiging...", className: "w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", rows: "3", required: true, __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "Prioriteit"), /*#__PURE__*/ React.createElement("select", { value: priority, onChange: (e)=>setPriority(e.target.value), className: "w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 95, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "normal", __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, "Normaal"), /*#__PURE__*/ React.createElement("option", { value: "important", __source: { fileName: "", lineNumber: 101, columnNumber: 21 }, __self: this }, "Belangrijk"), /*#__PURE__*/ React.createElement("option", { value: "urgent", __source: { fileName: "", lineNumber: 102, columnNumber: 21 }, __self: this }, "Urgent"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-end gap-2", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 106, columnNumber: 19 }, __self: this }, "Plaatsen"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowAddForm(false), className: "bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, "Annuleren"))))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, announcements.map((announcement)=>{ const announcementAgentColors = AgentColors({ agentName: announcement.created_by }); return /*#__PURE__*/ React.createElement("div", { key: announcement.id, className: `p-4 rounded-lg ${announcement.priority === "urgent" ? "bg-red-50 border-red-200" : announcement.priority === "important" ? "bg-yellow-50 border-yellow-200" : `${announcementAgentColors.lightBg} border ${announcementAgentColors.border}`}`, __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 142, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-lg font-medium ${announcementAgentColors.text}`, __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }, announcement.message), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3 mt-2", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `${announcementAgentColors.bg} ${announcementAgentColors.text} px-3 py-1 rounded-full text-sm inline-flex items-center`, __source: { fileName: "", lineNumber: 149, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-tie mr-2", __source: { fileName: "", lineNumber: 152, columnNumber: 25 }, __self: this }), announcement.created_by), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 155, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-2", __source: { fileName: "", lineNumber: 156, columnNumber: 25 }, __self: this }), new Date(announcement.created_at).toLocaleString("nl-NL")), announcement.priority !== "normal" && /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${announcement.priority === "urgent" ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 162, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 169, columnNumber: 27 }, __self: this }), announcement.priority === "urgent" ? "Urgent" : "Belangrijk"))))); })), announcements.length === 0 && !showAddForm && /*#__PURE__*/ React.createElement("p", { className: "text-gray-500 text-center py-4", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "Er zijn momenteel geen actieve aankondigingen"))); } function AnnouncementBannerStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 195, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 197, columnNumber: 9 }, __self: this }, "Aankondigingsbanner"), /*#__PURE__*/ React.createElement(AnnouncementBanner, { __source: { fileName: "", lineNumber: 198, columnNumber: 9 }, __self: this }))); } function ChatFooter() { const [isChatOpen, setIsChatOpen] = useState(false); const [selectedAgent, setSelectedAgent] = useState(""); const [isGroupChat, setIsGroupChat] = useState(false); const [message, setMessage] = useState(""); const [messages, setMessages] = useState([]); const [currentAgent, setCurrentAgent] = useState(""); const chatEndRef = useRef(null); const agentList = [ "Philip", "Floris", "Ties", "Michael", "Aranka" ]; useEffect(()=>{ const loggedInAgent = localStorage.getItem("currentAgent"); if (loggedInAgent) { setCurrentAgent(loggedInAgent); loadChatMessages(); } }, []); useEffect(()=>{ loadChatMessages(); }, [ isGroupChat, selectedAgent ]); useEffect(()=>{ if (chatEndRef.current) { chatEndRef.current.scrollIntoView({ behavior: "smooth" }); } }, [ messages ]); const loadChatMessages = async ()=>{ try { const query = isGroupChat ? "SELECT * FROM chat_messages WHERE receiver = 'group' ORDER BY created_at DESC LIMIT 100" : selectedAgent ? "SELECT * FROM chat_messages WHERE (sender = ? AND receiver = ?) OR (sender = ? AND receiver = ?) ORDER BY created_at DESC LIMIT 100" : "SELECT * FROM chat_messages WHERE receiver = 'group' ORDER BY created_at DESC LIMIT 100"; const values = selectedAgent ? [ currentAgent, selectedAgent, selectedAgent, currentAgent ] : []; const response = await fetch("/api/db/nieuwe-contacten", { method: "POST", body: JSON.stringify({ query, values }) }); const data = await response.json(); setMessages(data.reverse()); } catch (error) { console.error("Fout bij laden berichten:", error); } }; const sendMessage = async ()=>{ if (!message.trim() || !selectedAgent && !isGroupChat) return; try { await fetch("/api/db/nieuwe-contacten", { method: "POST", body: JSON.stringify({ query: "INSERT INTO chat_messages (sender, receiver, message, created_at) VALUES (?, ?, ?, NOW())", values: [ currentAgent, isGroupChat ? "group" : selectedAgent, message ] }) }); setMessage(""); loadChatMessages(); } catch (error) { console.error("Fout bij versturen bericht:", error); } }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsChatOpen(!isChatOpen), className: "fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg z-50", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isChatOpen ? "fa-times" : "fa-comments"} text-xl`, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this })), isChatOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-20 right-4 w-80 bg-white rounded-lg shadow-xl z-50", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Chat met collega's"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex gap-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsGroupChat(false); setSelectedAgent(""); }, className: `px-3 py-1 rounded-lg ${!isGroupChat ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Privé"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsGroupChat(true); setSelectedAgent(""); }, className: `px-3 py-1 rounded-lg ${isGroupChat ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Groep"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, !isGroupChat && /*#__PURE__*/ React.createElement("select", { value: selectedAgent, onChange: (e)=>setSelectedAgent(e.target.value), className: "w-full p-2 mb-4 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, "Selecteer een collega"), agentList.filter((agent)=>agent !== currentAgent).map((agent)=>/*#__PURE__*/ React.createElement("option", { key: agent, value: agent, __source: { fileName: "", lineNumber: 131, columnNumber: 21 }, __self: this }, agent))), /*#__PURE__*/ React.createElement("div", { className: "h-60 overflow-y-auto mb-4 space-y-2", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg max-w-[80%] ${msg.sender === currentAgent ? "ml-auto bg-blue-500 text-white" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, isGroupChat && msg.sender !== currentAgent && /*#__PURE__*/ React.createElement("p", { className: "text-xs font-medium mb-1", __source: { fileName: "", lineNumber: 149, columnNumber: 21 }, __self: this }, msg.sender), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 151, columnNumber: 19 }, __self: this }, msg.message), /*#__PURE__*/ React.createElement("span", { className: "text-xs opacity-75", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, new Date(msg.created_at).toLocaleTimeString()))), /*#__PURE__*/ React.createElement("div", { ref: chatEndRef, __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: message, onChange: (e)=>setMessage(e.target.value), placeholder: `Typ een bericht${isGroupChat ? " aan iedereen" : ""}...`, className: "flex-1 p-2 border border-gray-300 rounded-lg", onKeyPress: (e)=>{ if (e.key === "Enter") { sendMessage(); } }, __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: !selectedAgent && !isGroupChat || !message.trim(), className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this })))))); } function ChatFooterStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 190, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 191, columnNumber: 7 }, __self: this }, "Chat Footer Component"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-lg", __source: { fileName: "", lineNumber: 192, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 193, columnNumber: 9 }, __self: this }, "De chat knop verschijnt rechtsonder in het scherm"), /*#__PURE__*/ React.createElement(ChatFooter, { __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }))); } function AnnouncementBanner1() { return /*#__PURE__*/ React.createElement(AnnouncementBanner, { __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }); } function AnnouncementBanner() { const [announcements, setAnnouncements] = useState([]); const [showAddForm, setShowAddForm] = useState(false); const [newMessage, setNewMessage] = useState(""); const [priority, setPriority] = useState("normal"); const [currentAgent, setCurrentAgent] = useState(""); const [dismissedAnnouncements, setDismissedAnnouncements] = useState([]); const [currentAnnouncementIndex, setCurrentAnnouncementIndex] = useState(0); const [error, setError] = useState(null); const scrollContainerRef = useRef(null); useEffect(()=>{ const loggedInAgent = localStorage.getItem("currentAgent"); if (loggedInAgent) { setCurrentAgent(loggedInAgent); } const dismissed = JSON.parse(localStorage.getItem("dismissedAnnouncements") || "[]"); setDismissedAnnouncements(dismissed); }, []); const loadAnnouncements = async ()=>{ try { const response = await fetch("/api/announcements/active", { method: "POST" }); if (!response.ok) { throw new Error("Kon aankondigingen niet ophalen"); } const data = await response.json(); setAnnouncements(data); } catch (error) { console.error("Fout bij ophalen aankondigingen:", error); setError("Kon aankondigingen niet laden"); } }; useEffect(()=>{ loadAnnouncements(); const interval = setInterval(loadAnnouncements, 60000); return ()=>clearInterval(interval); }, []); useEffect(()=>{ const visibleAnnouncements = announcements.filter((announcement)=>!dismissedAnnouncements.includes(announcement.id)); if (visibleAnnouncements.length <= 1) return; const interval = setInterval(()=>{ setCurrentAnnouncementIndex((current)=>current === visibleAnnouncements.length - 1 ? 0 : current + 1); }, 5000); return ()=>clearInterval(interval); }, [ announcements, dismissedAnnouncements ]); const handleSubmit = async (e)=>{ e.preventDefault(); try { const response = await fetch("/api/announcements/create", { method: "POST", body: JSON.stringify({ message: newMessage, priority, created_by: currentAgent, expires_at: new Date(Date.now() + 4 * 60 * 60 * 1000).toISOString() }) }); if (!response.ok) { throw new Error("Kon aankondiging niet maken"); } setNewMessage(""); setPriority("normal"); setShowAddForm(false); loadAnnouncements(); } catch (error) { console.error("Fout bij maken aankondiging:", error); setError("Kon aankondiging niet maken"); } }; const handleDismiss = (id)=>{ const newDismissed = [ ...dismissedAnnouncements, id ]; setDismissedAnnouncements(newDismissed); localStorage.setItem("dismissedAnnouncements", JSON.stringify(newDismissed)); }; const visibleAnnouncements = announcements.filter((announcement)=>!dismissedAnnouncements.includes(announcement.id)); if (error) { return /*#__PURE__*/ React.createElement("div", { className: "text-red-500 p-4 text-center", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }), error); } if (visibleAnnouncements.length === 0 && !showAddForm) { return null; } return /*#__PURE__*/ React.createElement("div", { className: "bg-white border-b shadow-sm", __source: { fileName: "", lineNumber: 120, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-2", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-2", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-800 min-w-[200px]", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Aankondigingen"), currentAgent && !showAddForm && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowAddForm(true), className: "bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 ml-4", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }), "Nieuwe aankondiging")), showAddForm ? /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-4 mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, "Bericht"), /*#__PURE__*/ React.createElement("textarea", { value: newMessage, onChange: (e)=>setNewMessage(e.target.value), placeholder: "Typ je aankondiging...", className: "w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", rows: "3", required: true, __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 154, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 155, columnNumber: 19 }, __self: this }, "Prioriteit"), /*#__PURE__*/ React.createElement("select", { value: priority, onChange: (e)=>setPriority(e.target.value), className: "w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "normal", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }, "Normaal"), /*#__PURE__*/ React.createElement("option", { value: "important", __source: { fileName: "", lineNumber: 164, columnNumber: 21 }, __self: this }, "Belangrijk"), /*#__PURE__*/ React.createElement("option", { value: "urgent", __source: { fileName: "", lineNumber: 165, columnNumber: 21 }, __self: this }, "Urgent"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-end gap-2", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600", __source: { fileName: "", lineNumber: 169, columnNumber: 19 }, __self: this }, "Plaatsen"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowAddForm(false), className: "bg-gray-300 text-gray-700 px-6 py-2 rounded-lg hover:bg-gray-400", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, "Annuleren"))))) : /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden", style: { height: "60px" }, __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: scrollContainerRef, className: "flex transition-transform duration-1000 ease-in-out", style: { transform: `translateX(-${currentAnnouncementIndex * 100}%)`, width: `${visibleAnnouncements.length * 100}%` }, __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, visibleAnnouncements.map((announcement, index)=>{ const announcementAgentColors = AgentColors({ agentName: announcement.created_by }); return /*#__PURE__*/ React.createElement("div", { key: announcement.id, className: `flex-shrink-0 w-full px-4 ${announcement.priority === "urgent" ? "text-red-800" : announcement.priority === "important" ? "text-yellow-800" : announcementAgentColors.text}`, __source: { fileName: "", lineNumber: 201, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-[60px]", __source: { fileName: "", lineNumber: 211, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4 flex-1", __source: { fileName: "", lineNumber: 212, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium whitespace-nowrap", __source: { fileName: "", lineNumber: 213, columnNumber: 25 }, __self: this }, announcement.message), /*#__PURE__*/ React.createElement("span", { className: `${announcementAgentColors.bg} ${announcementAgentColors.text} px-3 py-1 rounded-full text-sm whitespace-nowrap`, __source: { fileName: "", lineNumber: 216, columnNumber: 25 }, __self: this }, announcement.created_by), announcement.priority !== "normal" && /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm whitespace-nowrap ${announcement.priority === "urgent" ? "bg-red-100 text-red-800" : "bg-yellow-100 text-yellow-800"}`, __source: { fileName: "", lineNumber: 222, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 229, columnNumber: 29 }, __self: this }), announcement.priority === "urgent" ? "Urgent" : "Belangrijk")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDismiss(announcement.id), className: "text-gray-500 hover:text-gray-700 ml-4", __source: { fileName: "", lineNumber: 236, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 240, columnNumber: 25 }, __self: this })))); })), visibleAnnouncements.length > 1 && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-1 left-1/2 transform -translate-x-1/2 flex space-x-1", __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, visibleAnnouncements.map((_, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `w-2 h-2 rounded-full transition-colors ${index === currentAnnouncementIndex ? "bg-blue-500" : "bg-gray-300"}`, onClick: ()=>setCurrentAnnouncementIndex(index), __source: { fileName: "", lineNumber: 250, columnNumber: 19 }, __self: this })))))); } function AnnouncementBanner1Story() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 271, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 272, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 273, columnNumber: 9 }, __self: this }, "Standaard Banner"), /*#__PURE__*/ React.createElement(AnnouncementBanner1, { __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }))); } function MainHeader({ currentPage }) { const [currentAgent, setCurrentAgent] = useState(""); useEffect(()=>{ const loggedInAgent = localStorage.getItem("currentAgent"); if (loggedInAgent) { setCurrentAgent(loggedInAgent); } }, []); const handleLogout = ()=>{ localStorage.removeItem("currentAgent"); window.location.href = "/"; }; const agentColors = AgentColors({ agentName: currentAgent }); return /*#__PURE__*/ React.createElement("header", { className: "bg-white shadow", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4 py-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-gray-800", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, "Sales Dashboard")), /*#__PURE__*/ React.createElement("nav", { className: "hidden md:flex space-x-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: `${currentPage === "dashboard" ? "text-blue-500 font-medium" : "text-gray-600"} hover:text-blue-500`, __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "/contacten", className: `${currentPage === "contacten" ? "text-blue-500 font-medium" : "text-gray-600"} hover:text-blue-500`, __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Contacten"), /*#__PURE__*/ React.createElement("a", { href: "/taken", className: `${currentPage === "taken" ? "text-blue-500 font-medium" : "text-gray-600"} hover:text-blue-500`, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Taken"), /*#__PURE__*/ React.createElement("a", { href: "/call-agent-script-dakdekkers", className: `${currentPage === "call-script" ? "text-blue-500 font-medium" : "text-gray-600"} hover:text-blue-500`, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Call Script"), /*#__PURE__*/ React.createElement("a", { href: "/dakdekkersbedrijf-onderzoekstools", className: `${currentPage === "onderzoek" ? "text-blue-500 font-medium" : "text-gray-600"} hover:text-blue-500`, __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Onderzoek"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${agentColors.bg} ${agentColors.text} px-3 py-1 rounded-full flex items-center`, __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-tie mr-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }), currentAgent), /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: "text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-out-alt mr-2", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }), "Uitloggen"))))); } function MainHeaderStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, "Dashboard Actief"), /*#__PURE__*/ React.createElement(MainHeader, { currentPage: "dashboard", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Contacten Actief"), /*#__PURE__*/ React.createElement(MainHeader, { currentPage: "contacten", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, "Taken Actief"), /*#__PURE__*/ React.createElement(MainHeader, { currentPage: "taken", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Call Script Actief"), /*#__PURE__*/ React.createElement(MainHeader, { currentPage: "call-script", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, "Onderzoek Actief"), /*#__PURE__*/ React.createElement(MainHeader, { currentPage: "onderzoek", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-medium mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, "Geen Actieve Pagina"), /*#__PURE__*/ React.createElement(MainHeader, { __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }))); } function ChatFooter2() { const [isChatOpen, setIsChatOpen] = useState(false); const [selectedAgent, setSelectedAgent] = useState(""); const [isGroupChat, setIsGroupChat] = useState(true); const [message, setMessage] = useState(""); const [messages, setMessages] = useState([]); const [currentAgent, setCurrentAgent] = useState(""); const chatEndRef = useRef(null); const agentList = [ "Philip", "Floris", "Ties", "Michael", "Aranka" ]; useEffect(()=>{ const loggedInAgent = localStorage.getItem("currentAgent"); if (loggedInAgent) { setCurrentAgent(loggedInAgent); } }, []); useEffect(()=>{ if (chatEndRef.current) { chatEndRef.current.scrollIntoView({ behavior: "smooth" }); } }, [ messages ]); const loadChatMessages = async ()=>{ try { const query = isGroupChat ? "SELECT * FROM chat_messages WHERE receiver = 'group' ORDER BY created_at DESC LIMIT 100" : `SELECT * FROM chat_messages WHERE (sender = ? AND receiver = ?) OR (sender = ? AND receiver = ?) ORDER BY created_at DESC LIMIT 100`; const values = isGroupChat ? [] : [ currentAgent, selectedAgent, selectedAgent, currentAgent ]; const response = await fetch("/api/db/nieuwe-contacten", { method: "POST", body: JSON.stringify({ query, values }) }); const data = await response.json(); setMessages(data.reverse()); } catch (error) { console.error("Fout bij laden berichten:", error); } }; useEffect(()=>{ if (isChatOpen) { loadChatMessages(); } }, [ isChatOpen, isGroupChat, selectedAgent, currentAgent ]); const sendMessage = async ()=>{ if (!message.trim() || !selectedAgent && !isGroupChat) return; try { await fetch("/api/db/nieuwe-contacten", { method: "POST", body: JSON.stringify({ query: "INSERT INTO chat_messages (sender, receiver, message, created_at) VALUES (?, ?, ?, NOW())", values: [ currentAgent, isGroupChat ? "group" : selectedAgent, message ] }) }); setMessage(""); loadChatMessages(); } catch (error) { console.error("Fout bij versturen bericht:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 right-0 z-50", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsChatOpen(!isChatOpen), className: "fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-600 text-white rounded-full w-14 h-14 flex items-center justify-center shadow-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isChatOpen ? "fa-times" : "fa-comments"} text-xl`, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this })), isChatOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-20 right-4 w-80 bg-white rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Chat met collega's"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex gap-2", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsGroupChat(true); setSelectedAgent(""); }, className: `px-3 py-1 rounded-lg ${isGroupChat ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Groep"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsGroupChat(false); setSelectedAgent(""); }, className: `px-3 py-1 rounded-lg ${!isGroupChat ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Privé"))), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, !isGroupChat && /*#__PURE__*/ React.createElement("select", { value: selectedAgent, onChange: (e)=>setSelectedAgent(e.target.value), className: "w-full p-2 mb-4 border border-gray-300 rounded-lg", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, "Selecteer een collega"), agentList.filter((agent)=>agent !== currentAgent).map((agent)=>/*#__PURE__*/ React.createElement("option", { key: agent, value: agent, __source: { fileName: "", lineNumber: 127, columnNumber: 21 }, __self: this }, agent))), /*#__PURE__*/ React.createElement("div", { className: "h-60 overflow-y-auto mb-4 space-y-2", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg max-w-[80%] ${msg.sender === currentAgent ? "ml-auto bg-blue-500 text-white" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 136, columnNumber: 17 }, __self: this }, isGroupChat && msg.sender !== currentAgent && /*#__PURE__*/ React.createElement("p", { className: "text-xs font-medium mb-1", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, msg.sender), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }, msg.message), /*#__PURE__*/ React.createElement("span", { className: "text-xs opacity-75", __source: { fileName: "", lineNumber: 148, columnNumber: 19 }, __self: this }, new Date(msg.created_at).toLocaleTimeString()))), /*#__PURE__*/ React.createElement("div", { ref: chatEndRef, __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 156, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: message, onChange: (e)=>setMessage(e.target.value), placeholder: `Typ een bericht${isGroupChat ? " aan iedereen" : ""}...`, className: "flex-1 p-2 border border-gray-300 rounded-lg", onKeyPress: (e)=>{ if (e.key === "Enter") { sendMessage(); } }, __source: { fileName: "", lineNumber: 157, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: !selectedAgent && !isGroupChat || !message.trim(), className: "bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg disabled:opacity-50", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this })))))); } function ChatFooter2Story() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 186, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, "Chat Footer Component"), /*#__PURE__*/ React.createElement("div", { className: "border rounded p-4 h-[600px] relative", __source: { fileName: "", lineNumber: 188, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, "De chat footer wordt onderaan rechts weergegeven"), /*#__PURE__*/ React.createElement(ChatFooter2, { __source: { fileName: "", lineNumber: 192, columnNumber: 9 }, __self: this }))); } function AgentColors({ agentName }) { const agentColors = { Philip: { bg: "bg-blue-100", text: "text-blue-800", border: "border-blue-500", highlight: "bg-blue-500", lightBg: "bg-blue-50" }, Floris: { bg: "bg-green-100", text: "text-green-800", border: "border-green-500", highlight: "bg-green-500", lightBg: "bg-green-50" }, Ties: { bg: "bg-purple-100", text: "text-purple-800", border: "border-purple-500", highlight: "bg-purple-500", lightBg: "bg-purple-50" }, Michael: { bg: "bg-orange-100", text: "text-orange-800", border: "border-orange-500", highlight: "bg-orange-500", lightBg: "bg-orange-50" }, Aranka: { bg: "bg-pink-100", text: "text-pink-800", border: "border-pink-500", highlight: "bg-pink-500", lightBg: "bg-pink-50" } }; return agentColors[agentName] || { bg: "bg-gray-100", text: "text-gray-800", border: "border-gray-500", highlight: "bg-gray-500", lightBg: "bg-gray-50" }; } function AgentColorsStory() { const agents = [ "Philip", "Floris", "Ties", "Michael", "Aranka", "Onbekend" ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Agent Kleuren Demo"), agents.map((agent)=>{ const colors = AgentColors({ agentName: agent }); return /*#__PURE__*/ React.createElement("div", { key: agent, className: "flex gap-4 items-center", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "w-24", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, agent, ":"), /*#__PURE__*/ React.createElement("div", { className: `${colors.bg} ${colors.text} p-2 rounded`, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Achtergrond"), /*#__PURE__*/ React.createElement("div", { className: `${colors.text} p-2`, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Tekst"), /*#__PURE__*/ React.createElement("div", { className: `${colors.border} border-2 p-2 rounded`, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "Rand"), /*#__PURE__*/ React.createElement("div", { className: `${colors.highlight} text-white p-2 rounded`, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Accent"), /*#__PURE__*/ React.createElement("div", { className: `${colors.lightBg} p-2 rounded`, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Lichte achtergrond")); })); } function MainComponent() { const { data: user, loading, refetch } = useUser(); const getAgentColors = (agentName)=>{ const colors = { Philip: { bg: "bg-blue-100", text: "text-blue-800", border: "border-blue-500", highlight: "bg-blue-500", lightBg: "bg-blue-50" }, Floris: { bg: "bg-green-100", text: "text-green-800", border: "border-green-500", highlight: "bg-green-500", lightBg: "bg-green-50" }, Ties: { bg: "bg-purple-100", text: "text-purple-800", border: "border-purple-500", highlight: "bg-purple-500", lightBg: "bg-purple-50" }, Michael: { bg: "bg-orange-100", text: "text-orange-800", border: "border-orange-500", highlight: "bg-orange-500", lightBg: "bg-orange-50" }, Aranka: { bg: "bg-pink-100", text: "text-pink-800", border: "border-pink-500", highlight: "bg-pink-500", lightBg: "bg-pink-50" } }; return colors[agentName] || { bg: "bg-gray-100", text: "text-gray-800", border: "border-gray-500", highlight: "bg-gray-500", lightBg: "bg-gray-50" }; }; const [isLoggedIn, setIsLoggedIn] = useState(false); const [currentAgent, setCurrentAgent] = useState(""); const [isLoading, setIsLoading] = useState(true); const [announcements, setAnnouncements] = useState([]); const [dashboardData, setDashboardData] = useState({ contactCount: 0, taskCount: 0 }); const agentList = [ "Philip", "Floris", "Ties", "Michael", "Aranka" ]; const [recentActivities, setRecentActivities] = useState([]); const [performanceMetrics, setPerformanceMetrics] = useState({ callsThisWeek: 0, conversionRate: 0, newLeads: 0, openTasks: 0 }); const [todayAgenda, setTodayAgenda] = useState([]); const [showFollowUpModal, setShowFollowUpModal] = useState(false); const [selectedTaskForFollowUp, setSelectedTaskForFollowUp] = useState(null); const [showTaskModal, setShowTaskModal] = useState(false); const [showCallModal, setShowCallModal] = useState(false); const [showContactModal, setShowContactModal] = useState(false); const [showNoteModal, setShowNoteModal] = useState(false); const [taskForm, setTaskForm] = useState({ title: "", description: "", due_date: new Date().toISOString().split("T")[0] }); const [callForm, setCallForm] = useState({ contact_id: "", contact_name: "" }); const [contactForm, setContactForm] = useState({ company: "", email: "" }); const [noteForm, setNoteForm] = useState({ content: "" }); const [formData, setFormData] = useState({ title: "", description: "", deadline: "", priority: "medium", status: "open", assignedTo: "", contact_id: "", task_id: Math.floor(100000 + Math.random() * 900000).toString(), probability: "50", potential_revenue: "", created_by: currentAgent }); const formatDateForInput = (date)=>{ if (!date) return ""; const d = new Date(date); d.setMinutes(d.getMinutes() - d.getTimezoneOffset()); return d.toISOString().slice(0, 16); }; const calculateWeekDates = (weekOffset)=>{ const today = new Date(); const monday = new Date(today); const diff = monday.getDate() - monday.getDay() + (monday.getDay() === 0 ? -6 : 1); monday.setDate(diff); monday.setDate(monday.getDate() + weekOffset * 7); const dates = []; for(let i = 0; i < 5; i++){ const date = new Date(monday); date.setDate(monday.getDate() + i); date.setHours(0, 0, 0, 0); dates.push(date); } return dates; }; const handleFollowUp = (task)=>{ setSelectedTaskForFollowUp(task); setFormData({ title: `Follow-up: ${task.title}`, description: `Eerdere notities:\n${task.description || ""}`, contact_id: task.contact_id || "", assignedTo: task.assignedTo || "", priority: "medium", status: "open", task_id: Math.floor(100000 + Math.random() * 900000).toString(), deadline: "", probability: "50", potential_revenue: "", created_by: currentAgent }); setShowFollowUpModal(true); }; const loadAnnouncements = async ()=>{ try { const response = await fetch("/api/announcements/active", { method: "POST" }); if (!response.ok) { throw new Error("Kon aankondigingen niet ophalen"); } const data = await response.json(); setAnnouncements(data || []); } catch (error) { console.error("Fout bij ophalen aankondigingen:", error); setAnnouncements([]); } }; const loadDashboardData = async ()=>{ try { const response = await fetch("/api/db/nieuwe-contacten", { method: "POST", body: JSON.stringify({ query: ` SELECT (SELECT COUNT(*) FROM contacts WHERE status = 'nieuw') as contactCount, (SELECT COUNT(*) FROM tasks WHERE status = 'open') as taskCount ` }) }); if (!response.ok) { throw new Error("Kon dashboard data niet ophalen"); } const data = await response.json(); setDashboardData({ contactCount: data[0]?.contactCount || 0, taskCount: data[0]?.taskCount || 0 }); } catch (error) { console.error("Fout bij het laden van dashboard data:", error); setDashboardData({ contactCount: 0, taskCount: 0 }); } }; const loadDashboardExtras = async ()=>{ try { const weekDates = calculateWeekDates(0); setRecentActivities([ { type: "call", title: "Call met Dakdekker Jansen", timestamp: new Date() }, { type: "task", title: "Nieuwe taak aangemaakt", timestamp: new Date(Date.now() - 86400000) } ]); setPerformanceMetrics({ callsThisWeek: 24, conversionRate: 32, newLeads: 12, openTasks: 8 }); setTodayAgenda([ { title: "Follow-up Dakspecialist", startTime: "15:00", endTime: "15:30", status: "upcoming", deadline: formatDateForInput(new Date()) } ]); } catch (error) { console.error("Fout bij laden dashboard extras:", error); } }; useEffect(()=>{ const loggedInAgent = localStorage.getItem("currentAgent"); if (loggedInAgent) { setIsLoggedIn(true); setCurrentAgent(loggedInAgent); loadDashboardData(); loadDashboardExtras(); loadAnnouncements(); } setIsLoading(false); }, []); const handleLogin = (e)=>{ e.preventDefault(); if (currentAgent) { localStorage.setItem("currentAgent", currentAgent); setIsLoggedIn(true); loadDashboardData(); } }; const handleLogout = ()=>{ localStorage.removeItem("currentAgent"); setIsLoggedIn(false); setCurrentAgent(""); }; if (!isLoggedIn) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 255, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 256, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-gray-800 text-center mb-6", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, "Sales Dashboard Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "space-y-4", __source: { fileName: "", lineNumber: 260, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 261, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, "Selecteer Agent"), /*#__PURE__*/ React.createElement("select", { value: currentAgent, onChange: (e)=>setCurrentAgent(e.target.value), className: "w-full p-2 border border-gray-300 rounded-lg", required: true, __source: { fileName: "", lineNumber: 265, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this }, "Kies een agent"), agentList.map((agent)=>/*#__PURE__*/ React.createElement("option", { key: agent, value: agent, __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, agent)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 279, columnNumber: 13 }, __self: this }, "Inloggen")))); } return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 292, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainHeader, { currentPage: "dashboard", __source: { fileName: "", lineNumber: 293, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AnnouncementBanner1, { __source: { fileName: "", lineNumber: 294, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("main", { className: "max-w-6xl mx-auto p-4", __source: { fileName: "", lineNumber: 295, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 297, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-blue-500 text-3xl", __source: { fileName: "", lineNumber: 298, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 302, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/contacten", className: "bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow hover:bg-gray-50", __source: { fileName: "", lineNumber: 303, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 307, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-800", __source: { fileName: "", lineNumber: 308, columnNumber: 19 }, __self: this }, "Contacten"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-address-book text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 311, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, dashboardData.contactCount), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 317, columnNumber: 19 }, __self: this }, "totaal")), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 319, columnNumber: 17 }, __self: this }, "Bekijk en beheer al je contacten")), /*#__PURE__*/ React.createElement("a", { href: "/takenplanner", className: "bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow hover:bg-gray-50", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-800", __source: { fileName: "", lineNumber: 328, columnNumber: 19 }, __self: this }, "Taken"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-tasks text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 329, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 331, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, dashboardData.taskCount), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 335, columnNumber: 19 }, __self: this }, "totaal")), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 337, columnNumber: 17 }, __self: this }, "Plan en volg je taken en afspraken")), /*#__PURE__*/ React.createElement("a", { href: "/call-agent-script-dakdekkers", target: "_blank", rel: "noopener noreferrer", className: "bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow hover:bg-gray-50", __source: { fileName: "", lineNumber: 341, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-800", __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, "Call Script"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 351, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 354, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-headset", __source: { fileName: "", lineNumber: 355, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 357, columnNumber: 19 }, __self: this }, "assist")), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, "Open call script hulp in nieuw venster")), /*#__PURE__*/ React.createElement("a", { href: "/dakdekkersbedrijf-onderzoekstools", className: "bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow hover:bg-gray-50", __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 367, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-800", __source: { fileName: "", lineNumber: 368, columnNumber: 19 }, __self: this }, "Onderzoek"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-blue-500 text-2xl", __source: { fileName: "", lineNumber: 371, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 374, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-map-marker-alt", __source: { fileName: "", lineNumber: 375, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-gray-600", __source: { fileName: "", lineNumber: 377, columnNumber: 19 }, __self: this }, "tools")), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-sm text-gray-600", __source: { fileName: "", lineNumber: 379, columnNumber: 17 }, __self: this }, "Open onderzoeks tools in nieuw venster"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 384, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-medium text-gray-800 mb-4", __source: { fileName: "", lineNumber: 385, columnNumber: 15 }, __self: this }, "Prestatie Overzicht"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 388, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 389, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 390, columnNumber: 19 }, __self: this }, "Calls deze week"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }, performanceMetrics.callsThisWeek)), /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 395, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 396, columnNumber: 19 }, __self: this }, "Conversie Ratio"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-green-600", __source: { fileName: "", lineNumber: 397, columnNumber: 19 }, __self: this }, performanceMetrics.conversionRate, "%")), /*#__PURE__*/ React.createElement("div", { className: "bg-purple-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 401, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 402, columnNumber: 19 }, __self: this }, "Nieuwe Leads"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-purple-600", __source: { fileName: "", lineNumber: 403, columnNumber: 19 }, __self: this }, performanceMetrics.newLeads)), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 407, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, "Open Taken"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-yellow-600", __source: { fileName: "", lineNumber: 409, columnNumber: 19 }, __self: this }, performanceMetrics.openTasks)))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 416, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 417, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-800 mb-4", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, "Recente Activiteiten"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 421, columnNumber: 17 }, __self: this }, recentActivities.map((activity, index)=>{ const colors = getAgentColors(currentAgent); return /*#__PURE__*/ React.createElement("div", { key: index, className: `${colors.lightBg} rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200 p-6`, __source: { fileName: "", lineNumber: 425, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 429, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-xl font-roboto ${colors.text}`, __source: { fileName: "", lineNumber: 430, columnNumber: 27 }, __self: this }, activity.title), /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${colors.bg} ${colors.text}`, __source: { fileName: "", lineNumber: 433, columnNumber: 27 }, __self: this }, activity.type)), /*#__PURE__*/ React.createElement("div", { className: `flex items-center mb-4 ${colors.bg} p-2 rounded-lg`, __source: { fileName: "", lineNumber: 440, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-user-tie ${colors.text} mr-2`, __source: { fileName: "", lineNumber: 443, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `font-medium ${colors.text}`, __source: { fileName: "", lineNumber: 446, columnNumber: 27 }, __self: this }, currentAgent)), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 451, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 452, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "far fa-clock mr-2", __source: { fileName: "", lineNumber: 453, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 454, columnNumber: 29 }, __self: this }, activity.timestamp.toLocaleString("nl-NL", { hour: "2-digit", minute: "2-digit", day: "2-digit", month: "2-digit" })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4 space-x-2", __source: { fileName: "", lineNumber: 465, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: colors.text, __source: { fileName: "", lineNumber: 466, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 467, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: colors.text, __source: { fileName: "", lineNumber: 469, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 470, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: colors.text, __source: { fileName: "", lineNumber: 472, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 473, columnNumber: 29 }, __self: this })))); }))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 482, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-800 mb-4", __source: { fileName: "", lineNumber: 483, columnNumber: 17 }, __self: this }, "Snelle Acties"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 486, columnNumber: 17 }, __self: this }, (()=>{ const colors = getAgentColors(currentAgent); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTaskModal(true), className: `flex items-center justify-center space-x-2 ${colors.highlight} text-white p-4 rounded-lg hover:opacity-90`, __source: { fileName: "", lineNumber: 491, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 495, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 496, columnNumber: 27 }, __self: this }, "Nieuwe Taak")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowCallModal(true), className: `flex items-center justify-center space-x-2 ${colors.highlight} text-white p-4 rounded-lg hover:opacity-90`, __source: { fileName: "", lineNumber: 498, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-phone", __source: { fileName: "", lineNumber: 502, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 503, columnNumber: 27 }, __self: this }, "Start Call")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowContactModal(true), className: `flex items-center justify-center space-x-2 ${colors.highlight} text-white p-4 rounded-lg hover:opacity-90`, __source: { fileName: "", lineNumber: 505, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus", __source: { fileName: "", lineNumber: 509, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 510, columnNumber: 27 }, __self: this }, "Nieuw Contact")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNoteModal(true), className: `flex items-center justify-center space-x-2 ${colors.highlight} text-white p-4 rounded-lg hover:opacity-90`, __source: { fileName: "", lineNumber: 512, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sticky-note", __source: { fileName: "", lineNumber: 516, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 517, columnNumber: 27 }, __self: this }, "Notitie"))); })()), showTaskModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 525, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 526, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 527, columnNumber: 23 }, __self: this }, "Nieuwe Taak"), /*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); await fetch("/api/tasks/create", { method: "POST", body: JSON.stringify({ ...taskForm, agent_name: currentAgent }) }); setShowTaskModal(false); setTaskForm({ title: "", description: "", due_date: new Date().toISOString().split("T")[0] }); loadDashboardData(); }, __source: { fileName: "", lineNumber: 528, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 547, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 548, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 549, columnNumber: 29 }, __self: this }, "Titel"), /*#__PURE__*/ React.createElement("input", { type: "text", value: taskForm.title, onChange: (e)=>setTaskForm({ ...taskForm, title: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 552, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 565, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 566, columnNumber: 29 }, __self: this }, "Beschrijving"), /*#__PURE__*/ React.createElement("textarea", { value: taskForm.description, onChange: (e)=>setTaskForm({ ...taskForm, description: e.target.value }), className: "w-full p-2 border rounded", rows: "3", __source: { fileName: "", lineNumber: 569, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 581, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 582, columnNumber: 29 }, __self: this }, "Deadline"), /*#__PURE__*/ React.createElement("input", { type: "date", value: taskForm.due_date, onChange: (e)=>setTaskForm({ ...taskForm, due_date: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 585, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2 mt-4", __source: { fileName: "", lineNumber: 599, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowTaskModal(false), className: "px-4 py-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 600, columnNumber: 27 }, __self: this }, "Annuleren"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 607, columnNumber: 27 }, __self: this }, "Opslaan"))))), showCallModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 620, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 621, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 622, columnNumber: 23 }, __self: this }, "Start Call"), /*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); await fetch("/api/calls/start", { method: "POST", body: JSON.stringify({ ...callForm, agent_name: currentAgent }) }); setShowCallModal(false); setCallForm({ contact_id: "", contact_name: "" }); loadDashboardData(); }, __source: { fileName: "", lineNumber: 623, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 638, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 639, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 640, columnNumber: 29 }, __self: this }, "Contact Naam"), /*#__PURE__*/ React.createElement("input", { type: "text", value: callForm.contact_name, onChange: (e)=>setCallForm({ ...callForm, contact_name: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 643, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2 mt-4", __source: { fileName: "", lineNumber: 657, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowCallModal(false), className: "px-4 py-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 658, columnNumber: 27 }, __self: this }, "Annuleren"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 665, columnNumber: 27 }, __self: this }, "Start Call"))))), showContactModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 678, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 679, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 680, columnNumber: 23 }, __self: this }, "Nieuw Contact"), /*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); await fetch("/api/contacts/create", { method: "POST", body: JSON.stringify({ ...contactForm, agent_name: currentAgent }) }); setShowContactModal(false); setContactForm({ company: "", email: "" }); loadDashboardData(); }, __source: { fileName: "", lineNumber: 683, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 698, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 699, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 700, columnNumber: 29 }, __self: this }, "Bedrijfsnaam"), /*#__PURE__*/ React.createElement("input", { type: "text", value: contactForm.company, onChange: (e)=>setContactForm({ ...contactForm, company: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 703, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 716, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 717, columnNumber: 29 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", value: contactForm.email, onChange: (e)=>setContactForm({ ...contactForm, email: e.target.value }), className: "w-full p-2 border rounded", required: true, __source: { fileName: "", lineNumber: 720, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2 mt-4", __source: { fileName: "", lineNumber: 734, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowContactModal(false), className: "px-4 py-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 735, columnNumber: 27 }, __self: this }, "Annuleren"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 742, columnNumber: 27 }, __self: this }, "Opslaan"))))), showNoteModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 755, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg p-6 max-w-md w-full", __source: { fileName: "", lineNumber: 756, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-medium mb-4", __source: { fileName: "", lineNumber: 757, columnNumber: 23 }, __self: this }, "Nieuwe Notitie"), /*#__PURE__*/ React.createElement("form", { onSubmit: async (e)=>{ e.preventDefault(); await fetch("/api/notes/create", { method: "POST", body: JSON.stringify({ content: noteForm.content, agent_name: currentAgent, related_entity_type: "general", related_entity_id: null }) }); setShowNoteModal(false); setNoteForm({ content: "" }); loadDashboardData(); }, __source: { fileName: "", lineNumber: 760, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 777, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 778, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 779, columnNumber: 29 }, __self: this }, "Notitie"), /*#__PURE__*/ React.createElement("textarea", { value: noteForm.content, onChange: (e)=>setNoteForm({ ...noteForm, content: e.target.value }), className: "w-full p-2 border rounded", rows: "4", required: true, __source: { fileName: "", lineNumber: 782, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-2 mt-4", __source: { fileName: "", lineNumber: 796, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setShowNoteModal(false), className: "px-4 py-2 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 797, columnNumber: 27 }, __self: this }, "Annuleren"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 804, columnNumber: 27 }, __self: this }, "Opslaan"))))))))), /*#__PURE__*/ React.createElement(ChatFooter, { __source: { fileName: "", lineNumber: 820, columnNumber: 7 }, __self: this })); }