function PortfolioCard({ logoUrl, companyName, investmentAmount, metrics = [], status = "active", performanceData = [], stage = "Series A", onViewDetails, onContactTeam, onEditClick, onChartClick, onDocumentsClick }) { const [isHovered, setIsHovered] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg border border-gray-200 p-6 bg-white shadow-sm hover:shadow-md transition-shadow duration-200", onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>setIsHovered(false), __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start justify-between mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoUrl, alt: `${companyName} logo`, className: "w-16 h-16 rounded-full object-contain bg-gray-50", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: `absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-white ${status === "active" ? "bg-green-500" : status === "warning" ? "bg-yellow-500" : "bg-gray-500"}`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-1", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, companyName), /*#__PURE__*/ React.createElement("span", { className: "text-sm bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full font-medium", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, stage)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Investment: $", investmentAmount.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onChartClick, className: "p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 transition-colors", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onDocumentsClick, className: "p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 transition-colors", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: onEditClick, className: "p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50 transition-colors", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-3 gap-4 mb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, metrics.map((metric, index)=>/*#__PURE__*/ React.createElement(MetricsCard, { key: index, title: metric.title, value: metric.value, percentChange: metric.change, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `flex gap-3 transition-opacity duration-200 ${isHovered ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onViewDetails, className: "flex-1 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-pie mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }), "View Details"), /*#__PURE__*/ React.createElement("button", { onClick: onContactTeam, className: "flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-4 rounded-lg transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments mr-2", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }), "Contact Team"))); } function PortfolioCardStory() { const handleAction = (action)=>{ console.log(`${action} clicked`); }; const sampleData = { logoUrl: "/sample-logo.png", companyName: "Tech Innovators Inc", investmentAmount: 5000000, status: "active", stage: "Series A", metrics: [ { title: "Revenue", value: "$2.4M", change: 12 }, { title: "Users", value: "85k", change: 8 }, { title: "Growth", value: "32%", change: -5 } ], onViewDetails: ()=>handleAction("View Details"), onContactTeam: ()=>handleAction("Contact Team"), onEditClick: ()=>handleAction("Edit"), onChartClick: ()=>handleAction("Chart"), onDocumentsClick: ()=>handleAction("Documents") }; const warningData = { ...sampleData, status: "warning", companyName: "Warning Corp", stage: "Seed" }; const inactiveData = { ...sampleData, status: "inactive", companyName: "Inactive Inc", stage: "Series B" }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-6 bg-gray-50", __source: { fileName: "", lineNumber: 149, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PortfolioCard, { ...sampleData, __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PortfolioCard, { ...warningData, __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PortfolioCard, { ...inactiveData, __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this })); } function MetricsCard({ title, value, percentChange, historicalData, onCardClick, tooltipContent }) { const isPositive = percentChange >= 0; const [isHovered, setIsHovered] = useState(false); const [showTooltip, setShowTooltip] = useState(false); const trendIndicator = useMemo(()=>{ if (!Array.isArray(historicalData) || historicalData.length < 2) return "neutral"; const lastTwo = historicalData.slice(-2); return lastTwo[1].value > lastTwo[0].value ? "up" : "down"; }, [ historicalData ]); const handleClick = useCallback((e)=>{ if (onCardClick) { onCardClick({ title, value, percentChange, historicalData }); } }, [ onCardClick, title, value, percentChange, historicalData ]); const handleInfoClick = useCallback((e)=>{ e.stopPropagation(); setShowTooltip(!showTooltip); }, []); const chartData = Array.isArray(historicalData) ? historicalData : []; const maxValue = chartData.length > 0 ? Math.max(...chartData.map((d)=>d.value)) : 0; return /*#__PURE__*/ React.createElement("div", { className: `relative rounded-lg bg-white p-6 shadow-lg w-full sm:max-w-[350px] cursor-pointer transition-all duration-200 ${isHovered ? "transform scale-[1.02] shadow-xl" : ""}`, onMouseEnter: ()=>setIsHovered(true), onMouseLeave: ()=>{ setIsHovered(false); setShowTooltip(false); }, onClick: handleClick, __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-gray-600 text-sm", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-info-circle ${isHovered || showTooltip ? "text-blue-500" : "text-gray-400"} hover:text-blue-600 transition-colors duration-200`, onClick: handleInfoClick, onMouseEnter: ()=>setShowTooltip(true), onMouseLeave: ()=>setShowTooltip(false), __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), showTooltip && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-6 w-48 p-2 bg-gray-800 text-white text-xs rounded shadow-lg z-10", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, tooltipContent || `Details about ${title.toLowerCase()} metrics`, /*#__PURE__*/ React.createElement("div", { className: "absolute -top-1 right-2 w-2 h-2 bg-gray-800 transform rotate-45", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline justify-between mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-2xl font-semibold", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, value), /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-end transition-transform duration-200 ${isHovered ? "transform translate-y-[-2px]" : ""}`, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `flex items-center font-roboto ${isPositive ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isPositive ? "fa-arrow-up" : "fa-arrow-down"} mr-1`, __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), Math.abs(percentChange), "%"), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "vs last period"))), chartData.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "h-[40px] flex items-end justify-between border-t pt-3", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, chartData.map((data, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `w-[8px] rounded-t transition-all duration-200 ${isHovered ? trendIndicator === "up" ? "bg-green-400" : "bg-red-400" : trendIndicator === "up" ? "bg-green-200" : "bg-red-200"}`, style: { height: `${data.value / maxValue * 100}%`, transform: isHovered ? "scaleY(1.05)" : "scaleY(1)" }, __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `mt-2 text-xs text-gray-500 flex items-center justify-end transition-all duration-200 ${isHovered ? "opacity-100 transform translate-y-0" : "opacity-0 transform translate-y-1"}`, __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line mr-1", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }), "Click for details")); } function MetricsCardStory() { const mockHistoricalData = [ { date: "2024-01", value: 40000 }, { date: "2024-02", value: 45000 }, { date: "2024-03", value: 48000 }, { date: "2024-04", value: 50000 } ]; const userHistoricalData = [ { date: "2024-01", value: 1500 }, { date: "2024-02", value: 1400 }, { date: "2024-03", value: 1300 }, { date: "2024-04", value: 1234 } ]; const conversionHistoricalData = [ { date: "2024-01", value: 20 }, { date: "2024-02", value: 22 }, { date: "2024-03", value: 24 }, { date: "2024-04", value: 25 } ]; const handleCardClick = (data)=>{ console.log("Card clicked:", data); alert(`Viewing details for ${data.title}`); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100", __source: { fileName: "", lineNumber: 158, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(MetricsCard, { title: "Revenue", value: "$50,000", percentChange: 12.5, historicalData: mockHistoricalData, onCardClick: handleCardClick, tooltipContent: "Monthly revenue metrics and growth trends", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { title: "Users", value: "1,234", percentChange: -5.2, historicalData: userHistoricalData, onCardClick: handleCardClick, tooltipContent: "Active user count and retention metrics", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(MetricsCard, { title: "Conversion Rate", value: "25%", percentChange: 3.1, historicalData: conversionHistoricalData, onCardClick: handleCardClick, tooltipContent: "User conversion rate and funnel metrics", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }))); } function SideNavigation() { const [isOpen, setIsOpen] = useState(true); const [activeLink, setActiveLink] = useState("Dashboard"); const [showQuickMenu, setShowQuickMenu] = useState(false); const [showRecents, setShowRecents] = useState(false); const [showNotifications, setShowNotifications] = useState(false); const [isSearchOpen, setIsSearchOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const links = [ { name: "Dashboard", icon: "fa-gauge", path: "/", notifications: 0 }, { name: "Portfolio", icon: "fa-briefcase", path: "/portfolio", notifications: 2 }, { name: "Pipeline", icon: "fa-stream", path: "/pipeline", notifications: 5 }, { name: "LP Management", icon: "fa-users", path: "/lp", notifications: 0 }, { name: "Analytics", icon: "fa-chart-line", path: "/analytics", notifications: 0 }, { name: "Documents", icon: "fa-folder", path: "/documents", notifications: 3 } ]; const quickActions = [ { name: "Add Deal", icon: "fa-plus-circle", path: "/pipeline?action=new" }, { name: "New Report", icon: "fa-file-alt", path: "/documents?action=new" }, { name: "Schedule Meeting", icon: "fa-calendar", path: "/analytics" } ]; const recentItems = [ { name: "TechCorp Deal", type: "Deal", icon: "fa-handshake", path: "/deal/techcorp", time: "2h ago" }, { name: "Q4 Report", type: "Document", icon: "fa-file", path: "/documents/q4-report", time: "5h ago" }, { name: "LP Meeting Notes", type: "Document", icon: "fa-file-alt", path: "/documents/lp-notes", time: "1d ago" } ]; const notifications = [ { title: "New Deal Added", message: "TechCorp deal has been added to pipeline", path: "/deal/techcorp", time: "2h ago", unread: true }, { title: "Document Updated", message: "Q4 Report has been updated", path: "/documents/q4-report", time: "5h ago", unread: true }, { title: "Meeting Reminder", message: "LP Meeting in 30 minutes", path: "/analytics", time: "1d ago", unread: false } ]; const searchResults = useMemo(()=>{ if (!searchQuery) return []; const query = searchQuery.toLowerCase(); return [ ...links.filter((link)=>link.name.toLowerCase().includes(query)).map((link)=>({ ...link, type: "Navigation" })), ...recentItems.filter((item)=>item.name.toLowerCase().includes(query)).map((item)=>({ ...item, type: "Recent" })), ...quickActions.filter((action)=>action.name.toLowerCase().includes(query)).map((action)=>({ ...action, type: "Action" })) ].slice(0, 5); }, [ searchQuery, links, recentItems, quickActions ]); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 110, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `bg-[#1a1a1a] text-white transition-all duration-300 ${isOpen ? "w-[288px]" : "w-20"} min-h-screen fixed top-0 left-0 shadow-xl flex flex-col z-[100]`, __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#2a2a2a]", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-3", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `font-roboto text-xl ${!isOpen && "hidden"}`, __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "Menu"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "text-white hover:text-gray-300 w-8 h-8 rounded-full bg-[#2a2a2a] flex items-center justify-center transition-colors", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isOpen ? "fa-chevron-left" : "fa-chevron-right"}`, __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `relative ${!isOpen && "hidden"}`, __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 132, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), onFocus: ()=>setIsSearchOpen(true), className: "w-full bg-[#2a2a2a] text-white rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute left-3 top-2.5 text-gray-400", __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }), searchQuery && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSearchQuery(""), className: "absolute right-3 top-2.5 text-gray-400 hover:text-white", __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 147, columnNumber: 19 }, __self: this }))), isSearchOpen && searchQuery && /*#__PURE__*/ React.createElement("div", { className: "absolute w-full mt-2 bg-[#2a2a2a] rounded-lg shadow-xl border border-[#3a3a3a] z-[110]", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, searchResults.length > 0 ? searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: result.path, className: "flex items-center px-4 py-3 hover:bg-[#3a3a3a] transition-colors", __source: { fileName: "", lineNumber: 156, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${result.icon} text-blue-400 w-5`, __source: { fileName: "", lineNumber: 161, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 162, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 163, columnNumber: 25 }, __self: this }, result.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 164, columnNumber: 25 }, __self: this }, result.type)))) : /*#__PURE__*/ React.createElement("div", { className: "px-4 py-3 text-sm text-gray-400", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, "No results found")))), /*#__PURE__*/ React.createElement("nav", { className: "flex-1 overflow-y-auto p-4 space-y-6", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-2", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowQuickMenu(!showQuickMenu); setShowRecents(false); setShowNotifications(false); }, className: "w-full flex items-center justify-center p-3 rounded-lg bg-[#2a2a2a] hover:bg-[#3a3a3a] transition-colors shadow-md", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-yellow-400", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }), isOpen && /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm", __source: { fileName: "", lineNumber: 192, columnNumber: 28 }, __self: this }, "Quick")), showQuickMenu && isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 right-0 mt-2 bg-[#2a2a2a] rounded-lg py-2 z-[110] shadow-xl border border-[#3a3a3a]", __source: { fileName: "", lineNumber: 195, columnNumber: 17 }, __self: this }, quickActions.map((action)=>/*#__PURE__*/ React.createElement("a", { key: action.name, href: action.path, className: "flex items-center px-4 py-2.5 hover:bg-[#3a3a3a] transition-colors", __source: { fileName: "", lineNumber: 197, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${action.icon} text-blue-400`, __source: { fileName: "", lineNumber: 202, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-3 text-sm", __source: { fileName: "", lineNumber: 203, columnNumber: 23 }, __self: this }, action.name))))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 210, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowRecents(!showRecents); setShowQuickMenu(false); setShowNotifications(false); }, className: "w-full flex items-center justify-center p-3 rounded-lg bg-[#2a2a2a] hover:bg-[#3a3a3a] transition-colors shadow-md", __source: { fileName: "", lineNumber: 211, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-green-400", __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }), isOpen && /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm", __source: { fileName: "", lineNumber: 220, columnNumber: 28 }, __self: this }, "Recent")), showRecents && isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 right-0 mt-2 bg-[#2a2a2a] rounded-lg py-2 z-[110] shadow-xl border border-[#3a3a3a]", __source: { fileName: "", lineNumber: 223, columnNumber: 17 }, __self: this }, recentItems.map((item)=>/*#__PURE__*/ React.createElement("a", { key: item.name, href: item.path, className: "flex items-center px-4 py-2.5 hover:bg-[#3a3a3a] transition-colors", __source: { fileName: "", lineNumber: 225, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${item.icon} text-purple-400`, __source: { fileName: "", lineNumber: 230, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 231, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 232, columnNumber: 25 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs", __source: { fileName: "", lineNumber: 233, columnNumber: 25 }, __self: this }, item.time)))))), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowNotifications(!showNotifications); setShowQuickMenu(false); setShowRecents(false); }, className: "w-full flex items-center justify-center p-3 rounded-lg bg-[#2a2a2a] hover:bg-[#3a3a3a] transition-colors shadow-md", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bell text-red-400", __source: { fileName: "", lineNumber: 250, columnNumber: 17 }, __self: this }), isOpen && /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-sm", __source: { fileName: "", lineNumber: 251, columnNumber: 28 }, __self: this }, "Alerts"), notifications.filter((n)=>n.unread).length > 0 && /*#__PURE__*/ React.createElement("span", { className: "absolute -top-1 -right-1 bg-red-500 text-xs rounded-full h-5 w-5 flex items-center justify-center shadow-lg", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }, notifications.filter((n)=>n.unread).length)), showNotifications && isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 right-0 mt-2 bg-[#2a2a2a] rounded-lg py-2 z-[110] shadow-xl border border-[#3a3a3a]", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, notifications.map((notification)=>/*#__PURE__*/ React.createElement("a", { key: notification.title, href: notification.path, className: "flex items-center px-4 py-2.5 hover:bg-[#3a3a3a] transition-colors", __source: { fileName: "", lineNumber: 261, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-2 h-2 rounded-full ${notification.unread ? "bg-blue-500" : "bg-gray-500"}`, __source: { fileName: "", lineNumber: 266, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 269, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 270, columnNumber: 25 }, __self: this }, notification.title), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs", __source: { fileName: "", lineNumber: 271, columnNumber: 25 }, __self: this }, notification.message), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-xs mt-1", __source: { fileName: "", lineNumber: 274, columnNumber: 25 }, __self: this }, notification.time))))))), /*#__PURE__*/ React.createElement("ul", { className: "space-y-1", __source: { fileName: "", lineNumber: 285, columnNumber: 11 }, __self: this }, links.map((link)=>/*#__PURE__*/ React.createElement("li", { key: link.name, __source: { fileName: "", lineNumber: 287, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.path, onClick: ()=>setActiveLink(link.name), className: `flex items-center p-3 rounded-lg transition-colors relative group ${activeLink === link.name ? "bg-gradient-to-r from-blue-600 to-blue-700 shadow-md" : "hover:bg-[#2a2a2a]"}`, __source: { fileName: "", lineNumber: 288, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${link.icon} ${activeLink === link.name ? "text-white" : "text-gray-400"} group-hover:text-white transition-colors`, __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }), isOpen && /*#__PURE__*/ React.createElement("span", { className: "ml-3 text-sm", __source: { fileName: "", lineNumber: 296, columnNumber: 30 }, __self: this }, link.name), link.notifications > 0 && /*#__PURE__*/ React.createElement("span", { className: `absolute ${isOpen ? "right-3" : "right-0 top-0"} bg-red-500 text-xs rounded-full h-5 w-5 flex items-center justify-center shadow-lg`, __source: { fileName: "", lineNumber: 298, columnNumber: 21 }, __self: this }, link.notifications)))))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-[#2a2a2a]", __source: { fileName: "", lineNumber: 310, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/settings", className: "flex items-center p-3 rounded-lg hover:bg-[#2a2a2a] transition-colors group mb-2", __source: { fileName: "", lineNumber: 311, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-gray-400 group-hover:text-white transition-colors", __source: { fileName: "", lineNumber: 315, columnNumber: 13 }, __self: this }), isOpen && /*#__PURE__*/ React.createElement("span", { className: "ml-3 text-sm", __source: { fileName: "", lineNumber: 316, columnNumber: 24 }, __self: this }, "Settings")), /*#__PURE__*/ React.createElement("div", { className: `flex items-center p-2 rounded-lg ${isOpen ? "" : "justify-center"}`, __source: { fileName: "", lineNumber: 318, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full flex items-center justify-center shadow-md", __source: { fileName: "", lineNumber: 321, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-sm", __source: { fileName: "", lineNumber: 322, columnNumber: 15 }, __self: this })), isOpen && /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 325, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, "John Doe"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-xs", __source: { fileName: "", lineNumber: 327, columnNumber: 17 }, __self: this }, "Admin"))))), /*#__PURE__*/ React.createElement("div", { className: `flex-1 ${isOpen ? "ml-[288px]" : "ml-20"}`, __source: { fileName: "", lineNumber: 333, columnNumber: 7 }, __self: this })); } function SideNavigationStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#f5f5f5] min-h-screen", __source: { fileName: "", lineNumber: 340, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SideNavigation, { __source: { fileName: "", lineNumber: 341, columnNumber: 7 }, __self: this })); } function MainComponent() { const features = [ { icon: "fas fa-chart-line", title: "Portfolio", description: "Track your investments" }, { icon: "fas fa-coins", title: "Fund", description: "Manage capital calls and distributions" }, { icon: "fas fa-file-contract", title: "Deals", description: "Keep your pipeline organized" }, { icon: "fas fa-users", title: "LPs", description: "Share updates and documents" } ]; const [mousePosition, setMousePosition] = React.useState({ x: 0, y: 0 }); const handleMouseMove = (e)=>{ const rect = e.currentTarget.getBoundingClientRect(); setMousePosition({ x: (e.clientX - rect.left) / rect.width * 100, y: (e.clientY - rect.top) / rect.height * 100 }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-[#1a1a1a] via-[#2a1a2a] to-[#1a1a2a] relative overflow-hidden", onMouseMove: handleMouseMove, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 opacity-20 pointer-events-none", style: { backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`, transform: `translate(${mousePosition.x / 15}%, ${mousePosition.y / 15}%)`, transition: "transform 0.1s ease-out", mixBlendMode: "overlay" }, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("header", { className: "border-b border-gray-800", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center py-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-white hover:scale-105 transition-transform", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "g0rp"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-6", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-all hover:scale-105", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Try demo"))))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "py-32 px-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center animate-float", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-6xl font-bold mb-6 text-white animate-fade-in", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Investment management simplified"), /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "bg-blue-600 text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-blue-700 transition-all hover:scale-105 animate-bounce-subtle inline-block", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Get started"))), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#2a2a2a] to-[#2a1a2a] p-8 rounded-lg", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-blue-900 rounded-full flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-blue-300 text-xl", __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, "Track"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }, "Monitor portfolio performance in real-time")), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#2a2a2a] to-[#2a1a2a] p-8 rounded-lg", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-purple-900 rounded-full flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bolt text-purple-300 text-xl", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }, "Automate"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }, "Streamline operations and reporting")), /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-br from-[#2a2a2a] to-[#2a1a2a] p-8 rounded-lg", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-green-900 rounded-full flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 101, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket text-green-300 text-xl", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "Scale"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 105, columnNumber: 17 }, __self: this }, "Grow your fund with powerful tools"))))), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4 bg-gradient-to-br from-[#222222] via-[#2a1a2a] to-[#222222]", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-4 text-white", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, "Everything you need"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-400", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "Powerful tools that just work")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, features.map((feature, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gradient-to-br from-[#2a2a2a] to-[#2a1a2a] p-6 rounded-lg shadow-lg hover:scale-105 transition-all duration-300 border border-purple-900/20", __source: { fileName: "", lineNumber: 125, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-gradient-to-br from-blue-900 to-purple-900 rounded-lg flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${feature.icon} text-blue-300 text-xl`, __source: { fileName: "", lineNumber: 130, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2 text-white", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this }, feature.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 135, columnNumber: 19 }, __self: this }, feature.description)))))), /*#__PURE__*/ React.createElement("section", { className: "py-20 px-4", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto text-center", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-white mb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 13 }, __self: this }, "Ready to get started?"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-400 mb-8", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, "Start free with your first fund"), /*#__PURE__*/ React.createElement("a", { href: "/dashboard", className: "bg-blue-600 text-white px-8 py-3 rounded-lg text-lg font-medium hover:bg-blue-700 transition-all hover:scale-105", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "Get started")))), /*#__PURE__*/ React.createElement("footer", { className: "border-t border-gray-800 py-8", __source: { fileName: "", lineNumber: 160, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 161, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 162, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold text-white", __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "g0rp"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, "© 2024")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, ` @keyframes grain { 0%, 100% { transform: translate(0, 0) } 10% { transform: translate(-1%, -1%) } 20% { transform: translate(1%, 1%) } 30% { transform: translate(-2%, -2%) } 40% { transform: translate(2%, 2%) } 50% { transform: translate(-1%, 1%) } 60% { transform: translate(1%, -1%) } 70% { transform: translate(-2%, 2%) } 80% { transform: translate(2%, -2%) } 90% { transform: translate(-1%, -1%) } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 6s ease-in-out infinite; } .bg-gradient-to-br { position: relative; transition: all 0.15s ease; } .bg-gradient-to-br:hover::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.03) 0%, transparent 35%); pointer-events: none; } `)); }