function Navigation({ companyName }) { return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-64 bg-[#1a2f4e] text-white p-6 flex flex-col", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-10", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold font-montserrat text-[#4ad8c5]", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, companyName || "Company")), /*#__PURE__*/ React.createElement("ul", { className: "space-y-4 font-roboto", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a4060]", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line w-5", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, "Dashboard"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a4060]", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bullseye w-5", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 27, columnNumber: 15 }, __self: this }, "Target Accounts"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a4060]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket w-5", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "Campaign Builder"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a4060]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb w-5", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Insights"))), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "flex items-center space-x-3 p-2 rounded hover:bg-[#2a4060]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog w-5", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Settings"))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#f5f7f9] p-8", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg text-[#1a2f4e]", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Select a menu item to begin"))); } function NavigationStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { companyName: "Acme Corp", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this })); } function SearchBar({ onSearch, suggestions = [], loading = false, onSelect }) { const [query, setQuery] = useState(""); const [showSuggestions, setShowSuggestions] = useState(false); const handleInputChange = (e)=>{ const value = e.target.value; setQuery(value); onSearch?.(value); setShowSuggestions(true); }; const handleSelect = (suggestion)=>{ setQuery(suggestion); setShowSuggestions(false); onSelect?.(suggestion); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: query, onChange: handleInputChange, placeholder: "Search accounts...", className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm text-lg", onBlur: ()=>setTimeout(()=>setShowSuggestions(false), 200), __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-4 top-1/2 -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this })), showSuggestions && suggestions.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "absolute z-10 w-full bg-white mt-1 rounded-lg shadow-lg border border-gray-200", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("li", { className: "px-4 py-3 text-gray-600", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), "Loading...") : suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "px-4 py-3 hover:bg-gray-50 cursor-pointer", onClick: ()=>handleSelect(suggestion), __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, suggestion)))); } function SearchBarStory() { const [suggestions, setSuggestions] = useState([]); const [loading, setLoading] = useState(false); const mockSearch = (query)=>{ setLoading(true); setTimeout(()=>{ const mockData = [ "Account #1234", "John Doe Account", "Business Account XYZ", "Savings Account 5678" ].filter((item)=>item.toLowerCase().includes(query.toLowerCase())); setSuggestions(mockData); setLoading(false); }, 500); }; return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchBar, { onSearch: mockSearch, suggestions: suggestions, loading: loading, onSelect: (selected)=>console.log("Selected:", selected), __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this })); } function MetricCard({ title, value, type = "number", data = [], color = "#3B82F6", percentage, icon }) { const [useState] = React.useState; const renderChart = ()=>{ if (type === "line") { return /*#__PURE__*/ React.createElement("div", { className: "h-[60px] w-full", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 20", className: "w-full h-full", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("polyline", { fill: "none", stroke: color, strokeWidth: "2", points: data.map((val, i)=>`${i * 100 / (data.length - 1)},${20 - val * 20 / 100}`).join(" "), __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }))); } if (type === "progress") { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-2.5 rounded-full", style: { width: `${percentage}%`, backgroundColor: color }, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })); } return null; }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white rounded-lg shadow-sm border border-gray-100", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-gray-600 text-sm font-medium", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, title), icon && /*#__PURE__*/ React.createElement("i", { className: `${icon} text-gray-400`, __source: { fileName: "", lineNumber: 48, columnNumber: 18 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, value), percentage && /*#__PURE__*/ React.createElement("span", { className: `ml-2 text-sm ${percentage >= 0 ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, percentage > 0 ? "+" : "", percentage, "%")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, renderChart())); } function MetricCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-50 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MetricCard, { title: "Total Revenue", value: "$54,234", type: "line", data: [ 20, 45, 32, 67, 89, 63, 75 ], percentage: 12.5, icon: "fas fa-dollar-sign", color: "#10B981", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MetricCard, { title: "Active Users", value: "1,234", type: "progress", percentage: 78, icon: "fas fa-users", color: "#6366F1", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(MetricCard, { title: "Conversion Rate", value: "2.4%", percentage: -4.3, icon: "fas fa-chart-pie", color: "#F59E0B", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this })); } function MainComponent() { const [metrics] = useState([ { title: "Total Revenue", value: "$54,350", change: "+14%", icon: "fa-solid fa-money-bill" }, { title: "Active Users", value: "2,345", change: "+7.5%", icon: "fa-solid fa-users" }, { title: "Conversion Rate", value: "3.42%", change: "-2.4%", icon: "fa-solid fa-chart-line" }, { title: "Avg. Session", value: "4m 30s", change: "+12%", icon: "fa-solid fa-clock" } ]); const [recentActivity] = useState([ { title: "New Sign-ups", value: "245", change: "+18%", icon: "fa-solid fa-user-plus" }, { title: "Active Sessions", value: "890", change: "+23%", icon: "fa-solid fa-bolt" }, { title: "Support Tickets", value: "12", change: "-5%", icon: "fa-solid fa-ticket" } ]); const [hotAccounts] = useState([ { title: "Enterprise Plus", value: "$12,400", change: "+28%", icon: "fa-solid fa-star" }, { title: "Pro Teams", value: "$8,200", change: "+17%", icon: "fa-solid fa-building" }, { title: "Startup Basic", value: "$4,800", change: "+21%", icon: "fa-solid fa-rocket" } ]); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-100", __source: { fileName: "", lineNumber: 72, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-white shadow-sm", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null)), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-6 space-y-6", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Key Metrics"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, metrics.map((metric, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Recent Activity"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, recentActivity.map((activity, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, "Hot Accounts"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, hotAccounts.map((account, index)=>/*#__PURE__*/ React.createElement(React.Fragment, null))))))); }