function StatusBadge({ status }) { const getStatusStyle = (status)=>{ const styles = { New: "bg-[#E8F5E9] text-[#2E7D32] border-[#A5D6A7]", Active: "bg-[#E3F2FD] text-[#1565C0] border-[#90CAF9]", Closed: "bg-[#FFEBEE] text-[#C62828] border-[#EF9A9A]" }; return styles[status] || "bg-gray-100 text-gray-600 border-gray-300"; }; return /*#__PURE__*/ React.createElement("div", { className: `inline-flex items-center px-3 py-1 rounded-full border ${getStatusStyle(status)}`, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full ${getStatusStyle(status).split(" ")[1]}`, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm font-roboto font-medium", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, status)); } function StatusBadgeStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StatusBadge, { status: "New", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatusBadge, { status: "Active", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatusBadge, { status: "Closed", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function TicketCard({ title, status, assignee, dueDate, priority = "medium" }) { const getStatusColor = (status)=>{ switch(status?.toLowerCase()){ case "open": return "bg-green-100 text-green-800 border-green-200"; case "in_progress": return "bg-blue-100 text-blue-800 border-blue-200"; case "completed": return "bg-gray-100 text-gray-800 border-gray-200"; default: return "bg-yellow-100 text-yellow-800 border-yellow-200"; } }; const getPriorityIcon = (priority)=>{ switch(priority?.toLowerCase()){ case "high": return "fas fa-arrow-up text-red-500"; case "low": return "fas fa-arrow-down text-green-500"; default: return "fas fa-minus text-yellow-500"; } }; return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md transition-shadow", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold text-gray-900 flex-1", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: `px-3 py-1 rounded-full text-sm font-medium border ${getStatusColor(status)}`, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, status?.replace("_", " "))), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-gray-400 mr-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, assignee)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-gray-600", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${getPriorityIcon(priority)} mr-2`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "capitalize", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, priority))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-calendar text-gray-400 mr-2", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, dueDate)))); } function TicketCardStory() { const tickets = [ { title: "Fix Navigation Bug", status: "open", assignee: "John Doe", dueDate: "Mar 15, 2024", priority: "high" }, { title: "Update User Interface", status: "in_progress", assignee: "Jane Smith", dueDate: "Mar 20, 2024", priority: "medium" }, { title: "Deploy New Features", status: "completed", assignee: "Mike Johnson", dueDate: "Mar 10, 2024", priority: "low" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 90, columnNumber: 5 }, __self: this }, tickets.map((ticket, index)=>/*#__PURE__*/ React.createElement(TicketCard, { key: index, ...ticket, __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }))); } function FramerMotion(props) { const [mounted, setMounted] = useState(false); const ref = useRef(null); useEffect(()=>{ const checkRef = setInterval(()=>{ if (window.Motion) { clearInterval(checkRef); } if (ref.current) { clearInterval(checkRef); window.React = React; const script = document.createElement("script"); script.src = "https://cdn.jsdelivr.net/npm/framer-motion@11.11.17/dist/framer-motion.min.js"; script.type = "module"; script.onload = ()=>{ setMounted(true); }; ref.current.appendChild(script); } }, 100); return ()=>{ clearInterval(checkRef); if (ref.current) { const script = ref.current.querySelector("script"); if (script) { ref.current.removeChild(script); } } delete window.motion; }; }, []); const mountElm = /*#__PURE__*/ React.createElement("div", { className: "hidden", ref: ref, __source: { fileName: "", lineNumber: 35, columnNumber: 20 }, __self: this }); return mounted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(window.Motion.motion.div, { ...props, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), mountElm) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { ...props, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), mountElm); } function FramerMotionStory() { return /*#__PURE__*/ React.createElement(FramerMotion, { __source: { fileName: "", lineNumber: 50, columnNumber: 10 }, __self: this }); } function WikiContent({ title, content, lastUpdated, author }) { const formatDate = (date)=>{ return new Date(date).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); }; return /*#__PURE__*/ React.createElement("article", { className: "max-w-[800px] rounded-lg border border-gray-200 bg-white p-6 shadow-sm", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-6 border-b border-gray-200 pb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "mt-2 flex items-center justify-between text-sm text-gray-600", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, author && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user mr-2", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, author)), lastUpdated && /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Updated ", formatDate(lastUpdated))))), /*#__PURE__*/ React.createElement("div", { className: "prose prose-slate max-w-none font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, content)), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 border-t border-gray-200 pt-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between text-sm text-gray-600", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center hover:text-blue-600", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit mr-2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Edit")), /*#__PURE__*/ React.createElement("button", { className: "flex items-center hover:text-blue-600", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-history mr-2", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "History"))), /*#__PURE__*/ React.createElement("button", { className: "flex items-center hover:text-blue-600", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share mr-2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Share"))))); } function WikiContentStory() { const sampleContent = /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, "Introduction"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 leading-7", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Key Features"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-6 mb-4 space-y-2", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Feature one with detailed explanation and implementation guidelines"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Feature two with comprehensive documentation and examples"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Feature three with best practices and usage scenarios")), /*#__PURE__*/ React.createElement("blockquote", { className: "border-l-4 border-blue-500 bg-blue-50 p-4 my-6", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "italic text-gray-800", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Important note or quote that needs to be highlighted in the wiki content. This represents a key takeaway or crucial information.")), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "Technical Details"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 leading-7", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, "Additional technical information and implementation details go here. This section provides in-depth technical specifications and guidelines for developers and technical users."), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 rounded-lg p-4 my-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Code Example"), /*#__PURE__*/ React.createElement("pre", { className: "bg-gray-800 text-gray-100 p-4 rounded-md overflow-x-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("code", { __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, `function example() { return "Hello, World!"; }`)))); return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-gray-50 min-h-screen", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WikiContent, { title: "Complete Wiki Documentation", content: sampleContent, lastUpdated: "2024-01-15", author: "John Doe", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this })); } function MainComponent() { const [tickets, setTickets] = useState([]); const [search, setSearch] = useState(""); const [status, setStatus] = useState("all"); const [loading, setLoading] = useState(true); const fetchTickets = useCallback(async ()=>{ setLoading(true); try { const response = await fetch("/api/work-items", { method: "POST" }); const data = await response.json(); if (data.workItems) { const formattedTickets = data.workItems.map((item)=>({ title: item.fields["System.Title"], status: item.fields["System.State"], assignee: item.fields["System.AssignedTo"]?.displayName || "Unassigned", dueDate: item.fields["System.DueDate"] || "No due date" })); setTickets(formattedTickets); } } catch (error) { console.error(error); } setLoading(false); }, []); useEffect(()=>{ fetchTickets(); }, [ fetchTickets ]); const filteredTickets = useMemo(()=>{ return tickets.filter((ticket)=>{ const matchesSearch = ticket.title.toLowerCase().includes(search.toLowerCase()); const matchesStatus = status === "all" || ticket.status.toLowerCase() === status; return matchesSearch && matchesStatus; }); }, [ tickets, search, status ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-sm p-6 mb-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search tickets...", className: "w-full md:w-96 px-4 py-2 border rounded-lg", value: search, onChange: (e)=>setSearch(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "w-full md:w-48 px-4 py-2 border rounded-lg", value: status, onChange: (e)=>setStatus(e.target.value), __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "all", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "All Status"), /*#__PURE__*/ React.createElement("option", { value: "open", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Open"), /*#__PURE__*/ React.createElement("option", { value: "in progress", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "In Progress"), /*#__PURE__*/ React.createElement("option", { value: "closed", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, "Closed")))), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-64", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, filteredTickets.map((ticket, index)=>/*#__PURE__*/ React.createElement(TicketCard, { key: index, ...ticket, __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }))))); }