Your Forms

\n \n Create New Form\n \n

\n\n

\n {forms.length === 0 ? (\n

📝

No forms yet

Create your first form to get started

\n \n Create Form\n \n

\n ) : (\n forms.map((form) => (\n onFormSelect(form)}\n >\n

{form.title}

\n {form.description && (\n

{form.description}

\n )}\n

\n {form.fields.length} fields\n Created {new Date(form.createdAt).toLocaleDateString()}\n

\n {\n e.stopPropagation();\n setShowShareModal(true);\n onFormSelect(form);\n }}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n >\n Share\n \n {\n e.stopPropagation();\n handleDeleteForm(form.id);\n }}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n >\n Delete\n \n

\n ))\n )}\n

\n \n );\n\n const renderFormDetails = () => {\n if (!selectedForm) {\n return (\n

👈

Select a form from the list to view details

\n );\n }\n\n return (\n

\n {/* Form Header */}\n

{selectedForm.title}

\n {selectedForm.description && (\n

{selectedForm.description}

\n )}\n

\n setShowShareModal(true)}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700\"\n >\n Share Form\n \n \n Preview\n \n

\n\n {/* Tabs */}\n

\n {[\n { id: 'overview', label: 'Overview' },\n { id: 'responses', label: 'Responses' },\n { id: 'settings', label: 'Settings' }\n ].map((tab) => (\n setActiveTab(tab.id as any)}\n className={`py-4 px-1 border-b-2 font-medium text-sm ${\n activeTab === tab.id\n ? 'border-blue-500 text-blue-600'\n : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'\n }`}\n >\n {tab.label}\n \n ))}\n

\n\n

\n {activeTab === 'overview' && (\n

\n {/* Stats */}\n

\n {stats?.totalResponses || 0}\n

Total Responses

\n {selectedForm.fields.length}\n

Form Fields

Last Submission

\n {stats?.lastSubmission \n ? new Date(stats.lastSubmission).toLocaleDateString()\n : 'No submissions yet'\n }\n

\n\n {/* Form Fields Preview */}\n

Form Fields

\n {selectedForm.fields.map((field, index) => (\n

\n #{index + 1}\n

{field.label}

\n {field.type} {field.required && '(Required)'}\n

\n {field.type === 'dropdown' || field.type === 'checkbox' || field.type === 'radio'\n ? `${field.options?.length || 0} options`\n : ''\n }\n

\n ))}\n

\n )}\n\n {activeTab === 'responses' && (\n

\n Responses ({responses.length})\n

\n {responses.length > 0 && (\n \n Export CSV\n \n )}\n

\n\n {loading ? (\n

\n Loading responses...\n

\n ) : responses.length === 0 ? (\n

📭

No responses yet

\n ) : (\n

\n {responses.map((response) => (\n

\n Submitted: {new Date(response.submittedAt).toLocaleString()}\n

\n ID: {response.id.slice(0, 8)}...\n

\n {selectedForm.fields.map((field) => (\n

\n {field.label}:\n

\n {Array.isArray(response.data[field.id])\n ? response.data[field.id].join(', ')\n : response.data[field.id] || '-'\n }\n

\n ))}\n

\n )}\n

\n )}\n\n {activeTab === 'settings' && (\n

Form Settings

Email Notifications

\n {selectedForm.settings.emailNotifications \n ? `Enabled (${selectedForm.settings.notificationEmail})`\n : 'Disabled'\n }\n

Multiple Submissions

\n {selectedForm.settings.allowMultipleSubmissions ? 'Allowed' : 'Not allowed'}\n

Success Message

\n \"{selectedForm.settings.responseMessage}\"\n

\n )}\n

\n );\n };\n\n const renderShareModal = () => {\n if (!showShareModal || !selectedForm) return null;\n\n return (\n

Share Form

\n setShowShareModal(false)}\n className=\"text-gray-400 hover:text-gray-600\"\n >\n ✕\n \n

\n\n

\n \n Form URL\n \n

\n \n copyToClipboard(getFormUrl(selectedForm))}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700\"\n >\n Copy\n \n

\n\n

\n \n Embed Code\n \n

\n \n copyToClipboard(getEmbedCode(selectedForm))}\n className=\"px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700 self-start\"\n >\n Copy\n \n

\n\n

\n setShowShareModal(false)}\n className=\"px-4 py-2 text-gray-600 hover:text-gray-800\"\n >\n Close\n \n \n Open Form\n \n

\n );\n };\n\n return (\n

\n {renderFormsList()}\n

\n {renderFormDetails()}\n

\n {renderShareModal()}\n

\n );\n}","deleted","label",[169,170,152],"frontend","components","permalink","https://www.val.town/x/kyumz/Forms/code/frontend/components/Dashboard.tsx","extension","actionData","errors"]