function ScreenerStep({ onNextStep, onSaveAndExit, formData, onInputChange, handleScreenerChange, isTransitioning }) { const [screenerQuestions, setScreenerQuestions] = useState([ { id: 1, question: "How often do you shop online?", type: "multiple_choice", options: [ "Daily", "Weekly", "Monthly", "Rarely" ], required: true }, { id: 2, question: "What devices do you primarily use?", type: "checkbox", options: [ "Desktop", "Mobile", "Tablet" ], required: true } ]); const [customization, setCustomization] = useState({ welcomeMessage: "Welcome to our usability test!", completionMessage: "Thank you for participating!", brandColor: "#3B82F6" }); return /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-300 ${isTransitioning ? "opacity-0" : "opacity-100"}`, __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Screener Questions"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, screenerQuestions.map((question)=>/*#__PURE__*/ React.createElement("div", { key: question.id, className: "border-b pb-6", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 44, columnNumber: 21 }, __self: this }, question.question), question.required && /*#__PURE__*/ React.createElement("span", { className: "text-xs text-red-500", __source: { fileName: "", lineNumber: 48, columnNumber: 23 }, __self: this }, "Required")), /*#__PURE__*/ React.createElement("button", { className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }))), question.type === "multiple_choice" && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, question.options.map((option, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: `question_${question.id}`, className: "w-4 h-4 text-blue-600", onChange: (e)=>handleScreenerChange(question.id, e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "ml-2 text-sm text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this }, option)))), question.type === "checkbox" && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 75, columnNumber: 19 }, __self: this }, question.options.map((option, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center", __source: { fileName: "", lineNumber: 77, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: `question_${question.id}`, className: "w-4 h-4 text-blue-600", onChange: (e)=>handleScreenerChange(question.id, e.target.value), __source: { fileName: "", lineNumber: 78, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "ml-2 text-sm text-gray-700", __source: { fileName: "", lineNumber: 86, columnNumber: 25 }, __self: this }, option)))))), /*#__PURE__*/ React.createElement("button", { className: "text-blue-600 hover:text-blue-700 text-sm font-medium flex items-center", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }), "Add Question"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-6", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Test Customization"), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "Welcome Message"), /*#__PURE__*/ React.createElement("textarea", { name: "welcomeMessage", rows: "3", className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500", value: customization.welcomeMessage, onChange: onInputChange, __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, "Completion Message"), /*#__PURE__*/ React.createElement("textarea", { name: "completionMessage", rows: "3", className: "w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500", value: customization.completionMessage, onChange: onInputChange, __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 130, columnNumber: 15 }, __self: this }, "Brand Color"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", name: "brandColor", value: customization.brandColor, onChange: onInputChange, className: "w-12 h-12 rounded border border-gray-300", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: customization.brandColor, onChange: onInputChange, className: "px-3 py-2 border border-gray-300 rounded-lg w-32", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8", __source: { fileName: "", lineNumber: 153, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onSaveAndExit, className: "text-gray-500 hover:text-gray-700 font-medium", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, "Save & Exit"), /*#__PURE__*/ React.createElement("button", { onClick: onNextStep, className: "bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, "Next Step"))); } function ScreenerStepStory() { const [formData, setFormData] = useState({}); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); }; const handleScreenerChange = (questionId, value)=>{ setFormData((prev)=>({ ...prev, [`screener_${questionId}`]: value })); }; const handleNextStep = ()=>{ console.log("Moving to next step"); }; const handleSaveAndExit = ()=>{ console.log("Saving and exiting"); }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-6", __source: { fileName: "", lineNumber: 195, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ScreenerStep, { formData: formData, onInputChange: handleInputChange, handleScreenerChange: handleScreenerChange, onNextStep: handleNextStep, onSaveAndExit: handleSaveAndExit, isTransitioning: false, __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this })); } function ObjectivesStep() { const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ projectName: "", websiteUrl: "", targetAudience: "" }); const [aiSuggestions, setAiSuggestions] = useState([]); const [isTransitioning, setIsTransitioning] = useState(false); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); if (name === "projectName") { if (value.toLowerCase().includes("checkout") || value.toLowerCase().includes("payment")) { setAiSuggestions([ "Cart Abandonment Test", "Payment Flow Analysis", "Checkout Optimization Test" ]); } else if (value.toLowerCase().includes("signup") || value.toLowerCase().includes("onboarding")) { setAiSuggestions([ "User Onboarding Flow Test", "Registration Process Analysis", "First-Time User Experience Test" ]); } } else if (name === "websiteUrl") { if (value.includes("checkout") || value.includes("cart")) { setAiSuggestions([ "Cart Abandonment Test", "Purchase Completion Test", "Payment Gateway Test" ]); } else if (value.includes("blog") || value.includes("content")) { setAiSuggestions([ "Content Readability Test", "Navigation Flow Test", "User Engagement Analysis" ]); } } else if (name === "targetAudience") { if (value === "tech") { setAiSuggestions([ "Technical Feature Usability Test", "Advanced User Flow Analysis", "Power User Experience Test" ]); } else if (value === "young") { setAiSuggestions([ "Mobile-First Experience Test", "Social Integration Test", "Quick Navigation Analysis" ]); } } }; const handleNextStep = async (e)=>{ e.preventDefault(); if (formData.projectName && formData.websiteUrl && formData.targetAudience) { setIsTransitioning(true); await new Promise((resolve)=>setTimeout(resolve, 300)); setCurrentStep((prev)=>prev + 1); setIsTransitioning(false); } }; return /*#__PURE__*/ React.createElement("div", { className: `bg-white rounded-xl shadow-sm p-8 max-w-2xl mx-auto ${isTransitioning ? "opacity-50" : "opacity-100"} transition-opacity duration-300`, __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-6 font-poppins", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "Project Details"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleNextStep, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Project Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "projectName", value: formData.projectName, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter project name", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, "Website URL"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "websiteUrl", value: formData.websiteUrl, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder: "https://example.com", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, "Target Audience"), /*#__PURE__*/ React.createElement("select", { name: "targetAudience", value: formData.targetAudience, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, "Select target audience"), /*#__PURE__*/ React.createElement("option", { value: "tech", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "Technical Users"), /*#__PURE__*/ React.createElement("option", { value: "young", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "Young Adults"), /*#__PURE__*/ React.createElement("option", { value: "senior", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "Senior Citizens"), /*#__PURE__*/ React.createElement("option", { value: "business", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "Business Professionals"))), aiSuggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-sm font-medium text-blue-800 mb-3", __source: { fileName: "", lineNumber: 135, columnNumber: 15 }, __self: this }, "AI Suggestions"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 138, columnNumber: 15 }, __self: this }, aiSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-center gap-2 text-sm text-blue-700", __source: { fileName: "", lineNumber: 140, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-blue-600", __source: { fileName: "", lineNumber: 144, columnNumber: 21 }, __self: this }), suggestion)))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end pt-4", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: !formData.projectName || !formData.websiteUrl || !formData.targetAudience, className: "bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }, "Next Step"))))); } function ObjectivesStepStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-8", __source: { fileName: "", lineNumber: 173, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ObjectivesStep, { __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this })); } function TasksStep() { const [activeTab, setActiveTab] = useState("active"); const [showTour, setShowTour] = useState(true); const [completedTests, setCompletedTests] = useState([ { id: 4, name: "Homepage Redesign Validation", status: "Completed", completion: 100, participants: 15, deadline: "2024-01-15" }, { id: 5, name: "Checkout Flow Analysis", status: "Completed", completion: 100, participants: 12, deadline: "2024-01-20" }, { id: 6, name: "Mobile Responsiveness Study", status: "Completed", completion: 100, participants: 10, deadline: "2024-01-25" } ]); const [showModal, setShowModal] = useState(false); const [selectedTest, setSelectedTest] = useState(null); const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ projectName: "", websiteUrl: "", targetAudience: "", tasks: [], scenarios: [] }); const [aiSuggestions, setAiSuggestions] = useState([]); const [isSaving, setIsSaving] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [showTestDetails, setShowTestDetails] = useState(false); const [showReminders, setShowReminders] = useState(false); const [showParticipants, setShowParticipants] = useState(false); const [newTask, setNewTask] = useState(""); const [newScenario, setNewScenario] = useState(""); const handleCreateTest = ()=>{ setShowModal(true); setCurrentStep(1); }; const handleStartTour = ()=>{ setShowTour(false); }; const handleTestAction = (test)=>{ setSelectedTest(test); }; const handleAddTask = ()=>{ if (newTask.trim()) { setFormData((prev)=>({ ...prev, tasks: [ ...prev.tasks, { id: Date.now(), description: newTask.trim() } ] })); setNewTask(""); } }; const handleAddScenario = ()=>{ if (newScenario.trim()) { setFormData((prev)=>({ ...prev, scenarios: [ ...prev.scenarios, { id: Date.now(), description: newScenario.trim() } ] })); setNewScenario(""); } }; const handleRemoveTask = (taskId)=>{ setFormData((prev)=>({ ...prev, tasks: prev.tasks.filter((task)=>task.id !== taskId) })); }; const handleRemoveScenario = (scenarioId)=>{ setFormData((prev)=>({ ...prev, scenarios: prev.scenarios.filter((scenario)=>scenario.id !== scenarioId) })); }; const renderStep3Content = ()=>{ return /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 11 }, __self: this }, "Tasks"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newTask, onChange: (e)=>setNewTask(e.target.value), placeholder: "Enter a task description", className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddTask, className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Add Task")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, formData.tasks.map((task)=>/*#__PURE__*/ React.createElement("div", { key: task.id, className: "flex items-center justify-between bg-gray-50 p-3 rounded-lg", __source: { fileName: "", lineNumber: 123, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, task.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveTask(task.id), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 128, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 132, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }, "Scenarios"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newScenario, onChange: (e)=>setNewScenario(e.target.value), placeholder: "Enter a scenario description", className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddScenario, className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Add Scenario")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, formData.scenarios.map((scenario)=>/*#__PURE__*/ React.createElement("div", { key: scenario.id, className: "flex items-center justify-between bg-gray-50 p-3 rounded-lg", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }, scenario.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveScenario(scenario.id), className: "text-red-500 hover:text-red-700", __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }))))))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-50 to-gray-100", __source: { fileName: "", lineNumber: 178, columnNumber: 5 }, __self: this }, showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-2xl w-full", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 182, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 183, columnNumber: 15 }, __self: this }, "Create New Test"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowModal(false), className: "text-gray-500 hover:text-gray-700", __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `transition-opacity duration-300 ${isTransitioning ? "opacity-0" : "opacity-100"}`, __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, currentStep === 3 && renderStep3Content()), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8", __source: { fileName: "", lineNumber: 198, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep((prev)=>prev - 1), className: `px-6 py-2 rounded-lg text-gray-600 hover:bg-gray-100 ${currentStep === 1 ? "invisible" : ""}`, __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 205, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSaveAndExit, className: "px-6 py-2 rounded-lg text-gray-600 hover:bg-gray-100 mr-4", __source: { fileName: "", lineNumber: 206, columnNumber: 17 }, __self: this }, "Save & Exit", " ", isSaving && /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin ml-2", __source: { fileName: "", lineNumber: 211, columnNumber: 32 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNextStep, className: "bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 213, columnNumber: 17 }, __self: this }, currentStep === 3 ? "Next" : "Continue")))))); } function TasksStepStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 230, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TasksStep, { __source: { fileName: "", lineNumber: 231, columnNumber: 7 }, __self: this })); } function SettingsStep() { const [activeTab, setActiveTab] = useState("active"); const [showTour, setShowTour] = useState(true); const [completedTests, setCompletedTests] = useState([ { id: 4, name: "Homepage Redesign Validation", status: "Completed", completion: 100, participants: 15, deadline: "2024-01-15" }, { id: 5, name: "Checkout Flow Analysis", status: "Completed", completion: 100, participants: 12, deadline: "2024-01-20" }, { id: 6, name: "Mobile Responsiveness Study", status: "Completed", completion: 100, participants: 10, deadline: "2024-01-25" } ]); const [showModal, setShowModal] = useState(false); const [selectedTest, setSelectedTest] = useState(null); const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ projectName: "", websiteUrl: "", targetAudience: "", testDuration: "15", participantCount: "10", scheduleDate: "", autoLaunch: false, notifications: true }); const [aiSuggestions, setAiSuggestions] = useState([]); const [isSaving, setIsSaving] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [showTestDetails, setShowTestDetails] = useState(false); const [showReminders, setShowReminders] = useState(false); const [showParticipants, setShowParticipants] = useState(false); const handleTestSettings = async (e)=>{ e.preventDefault(); if (formData.testDuration && formData.participantCount) { setIsSaving(true); await new Promise((resolve)=>setTimeout(resolve, 1000)); setIsSaving(false); setShowModal(false); } }; const renderStepContent = ()=>{ switch(currentStep){ case 4: return /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-lg mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-blue-800 font-medium mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, "Test Settings"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-blue-700", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "Configure your test parameters and launch options")), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "Test Duration (minutes)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "testDuration", value: formData.testDuration, onChange: handleInputChange, className: "w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", min: "5", max: "60", __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, "Number of Participants"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "participantCount", value: formData.participantCount, onChange: handleInputChange, className: "w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", min: "5", max: "50", __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "Schedule Start Date"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "scheduleDate", value: formData.scheduleDate, onChange: handleInputChange, className: "w-full p-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 107, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 116, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 117, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "autoLaunch", checked: formData.autoLaunch, onChange: (e)=>setFormData((prev)=>({ ...prev, autoLaunch: e.target.checked })), className: "h-4 w-4 text-blue-600 rounded", __source: { fileName: "", lineNumber: 118, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "ml-2 text-sm text-gray-700", __source: { fileName: "", lineNumber: 130, columnNumber: 19 }, __self: this }, "Auto-launch test when ready"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 136, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "notifications", checked: formData.notifications, onChange: (e)=>setFormData((prev)=>({ ...prev, notifications: e.target.checked })), className: "h-4 w-4 text-blue-600 rounded", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "ml-2 text-sm text-gray-700", __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this }, "Enable email notifications")))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-8", __source: { fileName: "", lineNumber: 157, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setCurrentStep(3), className: "text-gray-600 hover:text-gray-800 flex items-center", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left mr-2", __source: { fileName: "", lineNumber: 162, columnNumber: 17 }, __self: this }), "Back"), /*#__PURE__*/ React.createElement("button", { onClick: handleTestSettings, className: "bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 flex items-center", disabled: isSaving, __source: { fileName: "", lineNumber: 165, columnNumber: 15 }, __self: this }, isSaving ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }), "Launching...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket mr-2", __source: { fileName: "", lineNumber: 177, columnNumber: 21 }, __self: this }), "Launch Test")))); default: return null; } }; } function SettingsStepStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 193, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SettingsStep, { __source: { fileName: "", lineNumber: 194, columnNumber: 7 }, __self: this })); } function StepProgress() { const [activeTab, setActiveTab] = useState("active"); const [showTour, setShowTour] = useState(true); const [completedTests, setCompletedTests] = useState([ { id: 4, name: "Homepage Redesign Validation", status: "Completed", completion: 100, participants: 15, deadline: "2024-01-15" }, { id: 5, name: "Checkout Flow Analysis", status: "Completed", completion: 100, participants: 12, deadline: "2024-01-20" }, { id: 6, name: "Mobile Responsiveness Study", status: "Completed", completion: 100, participants: 10, deadline: "2024-01-25" } ]); const [showModal, setShowModal] = useState(false); const [selectedTest, setSelectedTest] = useState(null); const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ projectName: "", websiteUrl: "", targetAudience: "" }); const [aiSuggestions, setAiSuggestions] = useState([]); const [isSaving, setIsSaving] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [showTestDetails, setShowTestDetails] = useState(false); const [showReminders, setShowReminders] = useState(false); const [showParticipants, setShowParticipants] = useState(false); const steps = [ { id: 1, name: "Test Info" }, { id: 2, name: "Targeting" }, { id: 3, name: "Preview" }, { id: 4, name: "Launch" } ]; const handleCreateTest = ()=>{ setShowModal(true); setCurrentStep(1); }; const handleStartTour = ()=>{ setShowTour(false); }; const handleTestAction = (test)=>{ setSelectedTest(test); }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); if (name === "projectName") { if (value.toLowerCase().includes("checkout") || value.toLowerCase().includes("payment")) { setAiSuggestions([ "Cart Abandonment Test", "Payment Flow Analysis", "Checkout Optimization Test" ]); } else if (value.toLowerCase().includes("signup") || value.toLowerCase().includes("onboarding")) { setAiSuggestions([ "User Onboarding Flow Test", "Registration Process Analysis", "First-Time User Experience Test" ]); } } else if (name === "websiteUrl") { if (value.includes("checkout") || value.includes("cart")) { setAiSuggestions([ "Cart Abandonment Test", "Purchase Completion Test", "Payment Gateway Test" ]); } else if (value.includes("blog") || value.includes("content")) { setAiSuggestions([ "Content Readability Test", "Navigation Flow Test", "User Engagement Analysis" ]); } } else if (name === "targetAudience") { if (value === "tech") { setAiSuggestions([ "Technical Feature Usability Test", "Advanced User Flow Analysis", "Power User Experience Test" ]); } else if (value === "young") { setAiSuggestions([ "Mobile-First Experience Test", "Social Integration Test", "Quick Navigation Analysis" ]); } } }; const handleNextStep = async (e)=>{ e.preventDefault(); if (formData.projectName && formData.websiteUrl && formData.targetAudience) { setIsTransitioning(true); await new Promise((resolve)=>setTimeout(resolve, 300)); setCurrentStep((prev)=>prev + 1); setIsTransitioning(false); } }; const handleSaveAndExit = async ()=>{ setIsSaving(true); setTimeout(()=>{ setIsSaving(false); setShowModal(false); }, 1000); }; const stats = { activeTests: 3, completedTests: 12, participantsRecruited: 45, averageCompletion: "89%" }; const activeTests = [ { id: 1, name: "E-commerce Navigation Study", status: "In Progress", completion: 65, participants: 8, deadline: "2024-02-20" }, { id: 2, name: "Mobile App Onboarding", status: "Recruiting", completion: 20, participants: 3, deadline: "2024-02-25" }, { id: 3, name: "Website First Impression", status: "Analysis", completion: 90, participants: 15, deadline: "2024-02-18" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-50 to-gray-100", __source: { fileName: "", lineNumber: 170, columnNumber: 5 }, __self: this }, !showTestDetails ? /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-poppins", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("button", { onClick: handleCreateTest, className: "bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium flex items-center", __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }), "Create New Test")), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4", __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-2xl w-full", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 189, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 190, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-0 w-full h-0.5 bg-gray-200", __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute h-0.5 bg-blue-600 transition-all duration-300", style: { width: `${(currentStep - 1) / (steps.length - 1) * 100}%` }, __source: { fileName: "", lineNumber: 192, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-between", __source: { fileName: "", lineNumber: 199, columnNumber: 21 }, __self: this }, steps.map((step)=>/*#__PURE__*/ React.createElement("div", { key: step.id, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 201, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-4 h-4 rounded-full mb-2 transition-colors duration-300 ${step.id < currentStep ? "bg-blue-600" : step.id === currentStep ? "bg-blue-600" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 205, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 214, columnNumber: 27 }, __self: this }, step.name)))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6 mb-8", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 230, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 231, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-blue-100 rounded-lg", __source: { fileName: "", lineNumber: 232, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-flask text-blue-600 text-xl", __source: { fileName: "", lineNumber: 233, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 236, columnNumber: 19 }, __self: this }, "Active Tests"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }, stats.activeTests)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 241, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-green-100 rounded-lg", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-600 text-xl", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 247, columnNumber: 19 }, __self: this }, "Completed Tests"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, stats.completedTests)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-purple-100 rounded-lg", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-purple-600 text-xl", __source: { fileName: "", lineNumber: 257, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 260, columnNumber: 19 }, __self: this }, "Participants"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }, stats.participantsRecruited)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 268, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-yellow-100 rounded-lg", __source: { fileName: "", lineNumber: 269, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-yellow-600 text-xl", __source: { fileName: "", lineNumber: 270, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 273, columnNumber: 19 }, __self: this }, "Completion Rate"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 274, columnNumber: 19 }, __self: this }, stats.averageCompletion))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 281, columnNumber: 11 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }), showReminders && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 293, columnNumber: 9 }, __self: this }), showParticipants && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 299, columnNumber: 9 }, __self: this })); } function StepProgressStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 309, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(StepProgress, { __source: { fileName: "", lineNumber: 309, columnNumber: 16 }, __self: this })); } function TestCreationWizard({ isOpen = false, onClose = ()=>{}, steps = [], currentStep = 1, onNext = ()=>{}, onPrevious = ()=>{}, onComplete = ()=>{} }) { return /*#__PURE__*/ React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-50 overflow-y-auto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 transition-opacity", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex min-h-screen items-center justify-center p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-2xl rounded-xl bg-white shadow-xl", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute right-4 top-4", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 18, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times text-xl", __source: { fileName: "", lineNumber: 22, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 28, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 top-1/2 h-0.5 w-full -translate-y-1/2 bg-gray-200", __source: { fileName: "", lineNumber: 29, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative flex justify-between", __source: { fileName: "", lineNumber: 30, columnNumber: 21 }, __self: this }, steps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 32, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 ${index + 1 < currentStep ? "bg-blue-600 border-blue-600 text-white" : index + 1 === currentStep ? "border-blue-600 bg-white text-blue-600" : "border-gray-300 bg-white text-gray-300"}`, __source: { fileName: "", lineNumber: 33, columnNumber: 27 }, __self: this }, index + 1 < currentStep ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-sm", __source: { fileName: "", lineNumber: 43, columnNumber: 31 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 45, columnNumber: 31 }, __self: this }, index + 1)), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `text-sm font-medium ${index + 1 <= currentStep ? "text-blue-600" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 49, columnNumber: 29 }, __self: this }, step.title))))))), /*#__PURE__*/ React.createElement("div", { className: "min-h-[300px] pb-20", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, steps[currentStep - 1]?.content), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 right-0 flex justify-between border-t bg-gray-50 p-6", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onPrevious, disabled: currentStep === 1, className: `px-4 py-2 rounded-lg ${currentStep === 1 ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { onClick: currentStep === steps.length ? onComplete : onNext, className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, currentStep === steps.length ? "Complete" : "Next"))))))); } function TestCreationWizardStory() { const [isOpen, setIsOpen] = useState(false); const [currentStep, setCurrentStep] = useState(1); const steps = [ { title: "Basic Info", content: /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Project Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "projectName", className: "w-full rounded-lg border border-gray-300 p-2", placeholder: "Enter project name", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "Description"), /*#__PURE__*/ React.createElement("textarea", { name: "description", rows: "3", className: "w-full rounded-lg border border-gray-300 p-2", placeholder: "Enter project description", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }))) }, { title: "Settings", content: /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this }, "Test Duration"), /*#__PURE__*/ React.createElement("select", { name: "duration", className: "w-full rounded-lg border border-gray-300 p-2", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, "15 minutes"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "30 minutes"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 145, columnNumber: 15 }, __self: this }, "1 hour"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 149, columnNumber: 13 }, __self: this }, "Participants"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "participants", className: "w-full rounded-lg border border-gray-300 p-2", placeholder: "Number of participants", __source: { fileName: "", lineNumber: 152, columnNumber: 13 }, __self: this }))) }, { title: "Confirm", content: /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-blue-50 p-4 text-blue-700", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, "Please review your test setup before confirming.")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 173, columnNumber: 15 }, __self: this }, "Project Name:"), " Sample Project"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 176, columnNumber: 15 }, __self: this }, "Duration:"), " 30 minutes"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 178, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 179, columnNumber: 15 }, __self: this }, "Participants:"), " 10"))) } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-8", __source: { fileName: "", lineNumber: 188, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(true), className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 189, columnNumber: 7 }, __self: this }, "Open Wizard"), /*#__PURE__*/ React.createElement(TestCreationWizard, { isOpen: isOpen, onClose: ()=>{ setIsOpen(false); setCurrentStep(1); }, steps: steps, currentStep: currentStep, onNext: ()=>setCurrentStep((curr)=>Math.min(curr + 1, steps.length)), onPrevious: ()=>setCurrentStep((curr)=>Math.max(curr - 1, 1)), onComplete: ()=>{ setIsOpen(false); setCurrentStep(1); }, __source: { fileName: "", lineNumber: 196, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeTab, setActiveTab] = useState("active"); const [showTour, setShowTour] = useState(true); const [completedTests, setCompletedTests] = useState([ { id: 4, name: "Homepage Redesign Validation", status: "Completed", completion: 100, participants: 15, deadline: "2024-01-15" }, { id: 5, name: "Checkout Flow Analysis", status: "Completed", completion: 100, participants: 12, deadline: "2024-01-20" }, { id: 6, name: "Mobile Responsiveness Study", status: "Completed", completion: 100, participants: 10, deadline: "2024-01-25" } ]); const [showModal, setShowModal] = useState(false); const [selectedTest, setSelectedTest] = useState(null); const [currentStep, setCurrentStep] = useState(1); const [formData, setFormData] = useState({ projectName: "", websiteUrl: "", targetAudience: "" }); const [aiSuggestions, setAiSuggestions] = useState([]); const [isSaving, setIsSaving] = useState(false); const [isTransitioning, setIsTransitioning] = useState(false); const [showTestDetails, setShowTestDetails] = useState(false); const [showReminders, setShowReminders] = useState(false); const [showParticipants, setShowParticipants] = useState(false); const handleCreateTest = ()=>{ setShowModal(true); }; const handleStartTour = ()=>{ setShowTour(false); }; const handleTestAction = (test)=>{ setSelectedTest(test); }; const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prev)=>({ ...prev, [name]: value })); if (name === "projectName") { if (value.toLowerCase().includes("checkout") || value.toLowerCase().includes("payment")) { setAiSuggestions([ "Cart Abandonment Test", "Payment Flow Analysis", "Checkout Optimization Test" ]); } else if (value.toLowerCase().includes("signup") || value.toLowerCase().includes("onboarding")) { setAiSuggestions([ "User Onboarding Flow Test", "Registration Process Analysis", "First-Time User Experience Test" ]); } } else if (name === "websiteUrl") { if (value.includes("checkout") || value.includes("cart")) { setAiSuggestions([ "Cart Abandonment Test", "Purchase Completion Test", "Payment Gateway Test" ]); } else if (value.includes("blog") || value.includes("content")) { setAiSuggestions([ "Content Readability Test", "Navigation Flow Test", "User Engagement Analysis" ]); } } else if (name === "targetAudience") { if (value === "tech") { setAiSuggestions([ "Technical Feature Usability Test", "Advanced User Flow Analysis", "Power User Experience Test" ]); } else if (value === "young") { setAiSuggestions([ "Mobile-First Experience Test", "Social Integration Test", "Quick Navigation Analysis" ]); } } }; const handleNextStep = async (e)=>{ e.preventDefault(); if (formData.projectName && formData.websiteUrl && formData.targetAudience) { setIsTransitioning(true); await new Promise((resolve)=>setTimeout(resolve, 300)); setCurrentStep((prev)=>prev + 1); setIsTransitioning(false); } }; const handleSaveAndExit = async ()=>{ setIsSaving(true); setTimeout(()=>{ setIsSaving(false); setShowModal(false); }, 1000); }; const stats = { activeTests: 3, completedTests: 12, participantsRecruited: 45, averageCompletion: "89%" }; const activeTests = [ { id: 1, name: "E-commerce Navigation Study", status: "In Progress", completion: 65, participants: 8, deadline: "2024-02-20" }, { id: 2, name: "Mobile App Onboarding", status: "Recruiting", completion: 20, participants: 3, deadline: "2024-02-25" }, { id: 3, name: "Website First Impression", status: "Analysis", completion: 90, participants: 15, deadline: "2024-02-18" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-gray-50 to-gray-100", __source: { fileName: "", lineNumber: 169, columnNumber: 5 }, __self: this }, !showTestDetails ? /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent font-poppins", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("button", { onClick: handleCreateTest, className: "bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium flex items-center", __source: { fileName: "", lineNumber: 176, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }), "Create New Test")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-6 mb-8", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 186, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-blue-100 rounded-lg", __source: { fileName: "", lineNumber: 187, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-flask text-blue-600 text-xl", __source: { fileName: "", lineNumber: 188, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 190, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 191, columnNumber: 19 }, __self: this }, "Active Tests"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, stats.activeTests)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 196, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 197, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-green-100 rounded-lg", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-green-600 text-xl", __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 201, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 202, columnNumber: 19 }, __self: this }, "Completed Tests"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 203, columnNumber: 19 }, __self: this }, stats.completedTests)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-purple-100 rounded-lg", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users text-purple-600 text-xl", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 214, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }, "Participants"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }, stats.participantsRecruited)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-xl shadow-sm", __source: { fileName: "", lineNumber: 222, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-3 bg-yellow-100 rounded-lg", __source: { fileName: "", lineNumber: 224, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-yellow-600 text-xl", __source: { fileName: "", lineNumber: 225, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }, "Completion Rate"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-semibold", __source: { fileName: "", lineNumber: 229, columnNumber: 19 }, __self: this }, stats.averageCompletion))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6", __source: { fileName: "", lineNumber: 236, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 mb-6", __source: { fileName: "", lineNumber: 237, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("active"), className: `px-4 py-2 rounded-lg ${activeTab === "active" ? "bg-gray-100 text-gray-900" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, "Active Tests"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("completed"), className: `px-4 py-2 rounded-lg ${activeTab === "completed" ? "bg-gray-100 text-gray-900" : "text-gray-500"}`, __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, "Completed Tests")), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 261, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 262, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { className: "text-left text-sm text-gray-500 border-b", __source: { fileName: "", lineNumber: 263, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 264, columnNumber: 21 }, __self: this }, "Test Name"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 265, columnNumber: 21 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 266, columnNumber: 21 }, __self: this }, "Completion"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 267, columnNumber: 21 }, __self: this }, "Participants"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 268, columnNumber: 21 }, __self: this }, "Deadline"), /*#__PURE__*/ React.createElement("th", { className: "pb-4", __source: { fileName: "", lineNumber: 269, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 272, columnNumber: 17 }, __self: this }, (activeTab === "active" ? activeTests : completedTests).map((test, index)=>/*#__PURE__*/ React.createElement("tr", { key: test.id, className: `border-b last:border-0 ${index % 2 === 0 ? "bg-gray-50" : ""}`, __source: { fileName: "", lineNumber: 275, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4", __source: { fileName: "", lineNumber: 279, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setSelectedTest(test); setShowTestDetails(true); }, className: "text-blue-600 hover:text-blue-800 font-medium", __source: { fileName: "", lineNumber: 280, columnNumber: 27 }, __self: this }, test.name)), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 290, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-3 py-1 rounded-full text-sm ${test.status === "In Progress" ? "bg-blue-100 text-blue-700" : test.status === "Recruiting" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`, __source: { fileName: "", lineNumber: 291, columnNumber: 27 }, __self: this }, test.status)), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 303, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-32 bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 304, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-500 to-purple-500 rounded-full h-2", style: { width: `${test.completion}%` }, __source: { fileName: "", lineNumber: 305, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 311, columnNumber: 25 }, __self: this }, test.participants, " / 15"), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 312, columnNumber: 25 }, __self: this }, test.deadline), /*#__PURE__*/ React.createElement("td", { __source: { fileName: "", lineNumber: 313, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTestAction(test), className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 314, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-ellipsis-h", __source: { fileName: "", lineNumber: 318, columnNumber: 29 }, __self: this })))))))))) : /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10", __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-8", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTestDetails(false), className: "mr-4 text-gray-600 hover:text-gray-800", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-xl", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900 font-poppins", __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, selectedTest?.name)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 343, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 344, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6 mb-8", __source: { fileName: "", lineNumber: 345, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-6", __source: { fileName: "", lineNumber: 346, columnNumber: 17 }, __self: this }, "Test Overview"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this }, "Status"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold mt-1", __source: { fileName: "", lineNumber: 350, columnNumber: 21 }, __self: this }, selectedTest?.status)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 352, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 353, columnNumber: 21 }, __self: this }, "Completion"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold mt-1", __source: { fileName: "", lineNumber: 354, columnNumber: 21 }, __self: this }, selectedTest?.completion, "%")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 358, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 359, columnNumber: 21 }, __self: this }, "Participants"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold mt-1", __source: { fileName: "", lineNumber: 360, columnNumber: 21 }, __self: this }, selectedTest?.participants, "/15")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 364, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 365, columnNumber: 21 }, __self: this }, "Deadline"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold mt-1", __source: { fileName: "", lineNumber: 366, columnNumber: 21 }, __self: this }, selectedTest?.deadline)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6 mb-8", __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-6", __source: { fileName: "", lineNumber: 373, columnNumber: 17 }, __self: this }, "Participant Management"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 376, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700", __source: { fileName: "", lineNumber: 377, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus mr-2", __source: { fileName: "", lineNumber: 378, columnNumber: 21 }, __self: this }), "Add Participants"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowReminders(true), className: "bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200", __source: { fileName: "", lineNumber: 380, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-envelope mr-2", __source: { fileName: "", lineNumber: 384, columnNumber: 21 }, __self: this }), "Send Reminders"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowParticipants(true), className: "bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-users mr-2", __source: { fileName: "", lineNumber: 390, columnNumber: 21 }, __self: this }), "View All Participants"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-sm p-6 mb-8", __source: { fileName: "", lineNumber: 395, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-6", __source: { fileName: "", lineNumber: 396, columnNumber: 17 }, __self: this }, "Test Analytics"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 397, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 398, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-4", __source: { fileName: "", lineNumber: 399, columnNumber: 21 }, __self: this }, "Executive Summary"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 text-sm", __source: { fileName: "", lineNumber: 400, columnNumber: 21 }, __self: this }, "This usability test focused on the checkout process, with 15 participants completing key tasks. Overall success rate was 85%, with notable improvements in cart completion compared to previous tests.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 407, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-4", __source: { fileName: "", lineNumber: 408, columnNumber: 21 }, __self: this }, "Task Completion Rates"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 409, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 410, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 411, columnNumber: 25 }, __self: this }, "Success Rate"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-green-600", __source: { fileName: "", lineNumber: 412, columnNumber: 25 }, __self: this }, "85%"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 413, columnNumber: 25 }, __self: this }, "↑ 12% from last test")), /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 417, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 418, columnNumber: 25 }, __self: this }, "Avg. Time on Task"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-yellow-600", __source: { fileName: "", lineNumber: 421, columnNumber: 25 }, __self: this }, "2m 30s"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 424, columnNumber: 25 }, __self: this }, "↓ 45s from last test")), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 428, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 429, columnNumber: 25 }, __self: this }, "Error Rate"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-blue-600", __source: { fileName: "", lineNumber: 430, columnNumber: 25 }, __self: this }, "12%"), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-500 mt-1", __source: { fileName: "", lineNumber: 431, columnNumber: 25 }, __self: this }, "↓ 5% from last test")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 437, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-4", __source: { fileName: "", lineNumber: 438, columnNumber: 21 }, __self: this }, "User Sentiment Analysis"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 441, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 442, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 443, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 444, columnNumber: 27 }, __self: this }, "Positive"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-green-600", __source: { fileName: "", lineNumber: 447, columnNumber: 27 }, __self: this }, "65%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 451, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-green-500 rounded-full h-2", style: { width: "65%" }, __source: { fileName: "", lineNumber: 452, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 458, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 459, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 460, columnNumber: 27 }, __self: this }, "Neutral"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-yellow-600", __source: { fileName: "", lineNumber: 461, columnNumber: 27 }, __self: this }, "25%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 465, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-500 rounded-full h-2", style: { width: "25%" }, __source: { fileName: "", lineNumber: 466, columnNumber: 27 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 472, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 473, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 474, columnNumber: 27 }, __self: this }, "Negative"), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium text-red-600", __source: { fileName: "", lineNumber: 477, columnNumber: 27 }, __self: this }, "10%")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 481, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-500 rounded-full h-2", style: { width: "10%" }, __source: { fileName: "", lineNumber: 482, columnNumber: 27 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 490, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-4", __source: { fileName: "", lineNumber: 491, columnNumber: 21 }, __self: this }, "User Path Analysis"), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 492, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 493, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 494, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 rounded-full bg-green-500", __source: { fileName: "", lineNumber: 495, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 496, columnNumber: 27 }, __self: this }, "Homepage → Product List (92%)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 500, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 rounded-full bg-yellow-500", __source: { fileName: "", lineNumber: 501, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 502, columnNumber: 27 }, __self: this }, "Product List → Cart (78%)")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 506, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-3 h-3 rounded-full bg-red-500", __source: { fileName: "", lineNumber: 507, columnNumber: 27 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-sm", __source: { fileName: "", lineNumber: 508, columnNumber: 27 }, __self: this }, "Cart → Checkout (45%)"))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 514, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium mb-4", __source: { fileName: "", lineNumber: 515, columnNumber: 21 }, __self: this }, "AI-Generated Insights"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 516, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 517, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium text-blue-800 mb-2", __source: { fileName: "", lineNumber: 518, columnNumber: 25 }, __self: this }, "Key Issues Identified"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm text-blue-700", __source: { fileName: "", lineNumber: 521, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-start gap-2", __source: { fileName: "", lineNumber: 522, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mt-1", __source: { fileName: "", lineNumber: 523, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 524, columnNumber: 29 }, __self: this }, "Checkout form validation errors causing 60% of cart abandonment")), /*#__PURE__*/ React.createElement("li", { className: "flex items-start gap-2", __source: { fileName: "", lineNumber: 529, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mt-1", __source: { fileName: "", lineNumber: 530, columnNumber: 29 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "

Status	Participants	Deadline
In Progress	8 / 15	2024-02-20
Recruiting	3 / 15	2024-02-25
Analysis	15 / 15	2024-02-18