function ProjectProgress({ percentage = 0, label = "Project Progress" }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full group", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#666666] group-hover:text-[#333333] transition-colors duration-300", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, label), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-[#666666] group-hover:text-[#333333] transition-colors duration-300", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, percentage, "%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#eaeaea] rounded-sm h-1 overflow-hidden group-hover:bg-[#d1d1d1] transition-colors duration-300", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#000000] h-1 rounded-sm transform origin-left transition-transform duration-1000 ease-out group-hover:bg-[#333333]", style: { transform: `scaleX(${percentage / 100})` }, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, ` @keyframes progress-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } `)); } function ProjectProgressStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: 0, label: "New Project", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: 25, label: "Design Phase", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: 50, label: "Development", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: 75, label: "Testing", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: 100, label: "Completed", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this })); } function Navbar({ activeLink = "Panel" }) { const links = [ { name: "Panel", icon: "fa-solid fa-chart-line", href: "/" }, { name: "Müşteriler", icon: "fa-solid fa-users", href: "/customers" }, { name: "Projeler", icon: "fa-solid fa-folder", href: "/projects" }, { name: "Raporlar", icon: "fa-solid fa-file-lines", href: "/reports" } ]; return /*#__PURE__*/ React.createElement("nav", { className: "bg-black border-b border-[#333] py-3", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, links.map((link)=>/*#__PURE__*/ React.createElement("li", { key: link.name, __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: link.href, className: `flex items-center space-x-2 px-3 py-2 rounded-md transition-all duration-300 ease-in-out transform hover:scale-105 ${activeLink === link.name ? "text-white bg-[#111] shadow-lg shadow-[#222]" : "text-[#888] hover:text-white hover:bg-[#111] hover:shadow-lg hover:shadow-[#222]"}`, __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${link.icon} w-4 h-4 transition-transform duration-300 ease-in-out group-hover:rotate-12`, __source: { fileName: "", lineNumber: 23, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-normal text-sm transition-all duration-300 ease-in-out", __source: { fileName: "", lineNumber: 26, columnNumber: 17 }, __self: this }, link.name)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, ` @keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } nav { animation: slideIn 0.5s ease-out; } `)); } function NavbarStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-black min-h-screen", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navbar, { activeLink: "Panel", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Navbar, { activeLink: "Müşteriler", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Navbar, { activeLink: "Projeler", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(Navbar, { activeLink: "Raporlar", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }))); } function RiskIndicator({ risk = "medium" }) { const riskStyles = { high: "bg-[#ff4d4f] text-[#ffffff]", medium: "bg-[#faad14] text-[#000000]", low: "bg-[#52c41a] text-[#ffffff]" }; const riskLabels = { high: "High", medium: "Medium", low: "Low" }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: `inline-flex items-center px-3 py-1 rounded-full font-semibold ${riskStyles[risk]}`, style: { animation: `pulse-${risk} 2s infinite` }, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, riskLabels[risk]), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, ` @keyframes pulse-high { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(255, 77, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); } } @keyframes pulse-medium { 0% { box-shadow: 0 0 0 0 rgba(250, 173, 20, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(250, 173, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 173, 20, 0); } } @keyframes pulse-low { 0% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(82, 196, 26, 0); } 100% { box-shadow: 0 0 0 0 rgba(82, 196, 26, 0); } } `)); } function RiskIndicatorStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RiskIndicator, { risk: "high", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RiskIndicator, { risk: "medium", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(RiskIndicator, { risk: "low", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this })); } function StatusBadge({ status = "default", label }) { const styles = { success: "bg-[#0c221714] text-[#17c964] border-[#17c964]", error: "bg-[#31131414] text-[#f31260] border-[#f31260]", warning: "bg-[#2b1f0314] text-[#f5a524] border-[#f5a524]", default: "bg-[#0c1f2914] text-[#0070f3] border-[#0070f3]" }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { className: `inline-block px-2 py-1 text-xs font-medium rounded-md border opacity-0 animate-fadeIn ${styles[status]}`, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, label), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fadeIn { animation: fadeIn 0.3s ease-in forwards; } `)); } function StatusBadgeStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-x-2", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StatusBadge, { status: "success", label: "Active", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatusBadge, { status: "error", label: "Failed", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatusBadge, { status: "warning", label: "Pending", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(StatusBadge, { status: "default", label: "Draft", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedTime, setSelectedTime] = useState("week"); const metrics = { conversionRate: 67, responseTime: 2.4, projectCompletion: 78, customerSatisfaction: 85, revenueGrowth: 23, activeUsers: 1234, totalProjects: 89, averageTicketValue: 499, monthlyRecurringRevenue: 45000, churnRate: 5.2 }; const marketingPackages = [ { name: "Basic", price: "$199", features: [ "Social Media", "Email", "SEO" ] }, { name: "Growth", price: "$499", features: [ "Basic +", "PPC", "Content" ] }, { name: "Enterprise", price: "$999", features: [ "Growth +", "PR", "Events" ] } ]; const [chartData] = useState({ revenue: [ 12000, 15000, 18000, 21000, 24000, 27000 ], users: [ 100, 150, 200, 250, 300, 350 ], satisfaction: [ 75, 78, 82, 85, 87, 90 ], months: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun" ] }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#000000] p-6", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-8", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#ffffff]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Performans Gösterge Paneli"), /*#__PURE__*/ React.createElement("select", { value: selectedTime, onChange: (e)=>setSelectedTime(e.target.value), className: "bg-[#111111] text-white border border-[#333333] rounded-md px-3 py-1.5 text-sm", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "week", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Son Hafta"), /*#__PURE__*/ React.createElement("option", { value: "month", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Son Ay"), /*#__PURE__*/ React.createElement("option", { value: "year", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, "Son Yıl"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", style: { animation: "float 3s ease-in-out infinite" }, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Aylık Gelir"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-medium text-white", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, "$", metrics.monthlyRecurringRevenue.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", style: { animation: "float 3s ease-in-out infinite", animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-2", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Aktif Kullanıcılar"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-medium text-white", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, metrics.activeUsers.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", style: { animation: "float 3s ease-in-out infinite", animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-2", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Kayıp Oranı"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-medium text-white", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, metrics.churnRate, "%")))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "Gelir Büyümesi"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(RiskIndicator, { risk: "low", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Müşteri Memnuniyeti"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: 85, label: "Genel Puan", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-6", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Performans Metrikleri"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: metrics.conversionRate, label: "Dönüşüm Oranı", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: metrics.projectCompletion, label: "Proje Tamamlama", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectProgress, { percentage: metrics.customerSatisfaction, label: "Müşteri Memnuniyeti", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4 text-[#888888] text-sm", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 140, columnNumber: 17 }, __self: this }, "Ortalama Yanıt Süresi"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, metrics.responseTime, "s")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }, "Ortalama Bilet Değeri"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 145, columnNumber: 17 }, __self: this }, "$", metrics.averageTicketValue)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 150, columnNumber: 17 }, __self: this }, "Toplam Projeler"), /*#__PURE__*/ React.createElement("span", { className: "text-white", __source: { fileName: "", lineNumber: 151, columnNumber: 17 }, __self: this }, metrics.totalProjects))))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#111111] rounded-lg p-6 border border-[#333333]", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-sm font-medium text-[#888888] mb-6", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, "Önerilen Pazarlama Paketleri"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, marketingPackages.map((pkg, index)=>/*#__PURE__*/ React.createElement("div", { key: pkg.name, className: "border border-[#333333] rounded-lg p-6 text-center", style: { animation: "float 3s ease-in-out infinite", animationDelay: `${index * 0.2}s` }, __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium text-white mb-2", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }, pkg.name), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-medium text-white mb-4", __source: { fileName: "", lineNumber: 174, columnNumber: 17 }, __self: this }, pkg.price), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-[#888888] text-sm mb-6", __source: { fileName: "", lineNumber: 177, columnNumber: 17 }, __self: this }, pkg.features.map((feature)=>/*#__PURE__*/ React.createElement("li", { key: feature, className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 179, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-white mr-2", __source: { fileName: "", lineNumber: 183, columnNumber: 23 }, __self: this }), feature))), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-white text-black px-4 py-2 rounded-md hover:bg-[#888888] transition-colors", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, "Planı Seç")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } `)); }