Add Bible Questions inbox from contact submissions

src/AdminPage.tsx

@@ -53,6 +53,19 @@ interface AdminStats {
     visitorStats: { ok: boolean; at: string | null; error: string | null }
     backups: { ok: boolean; at: string | null; error: string | null; file: string | null }
   }
+  bibleQuestions: Array<{
+    id: string
+    submittedAt: string
+    name: string
+    email: string
+    message: string
+    messageType: 'question' | 'testimony' | 'topic' | 'general'
+    subscribe: boolean
+  }>
+  contactTotals: {
+    totalSubmissions: number
+    totalQuestions: number
+  }
 }
 
 type StringField = Exclude<keyof SiteContent, 'customLinks' | 'customBlocks'>
@@ -550,6 +563,52 @@ export default function AdminPage({ content, onSave }: Props) {
                 )}
               </div>
 
+              <div className="admin-stats-head admin-stats-head--visitors">
+                <h2>Bible Questions Inbox</h2>
+                <p>Questions submitted from the contact form emails.</p>
+              </div>
+
+              <div className="admin-stats-grid">
+                <article>
+                  <h3>Total Contact Messages</h3>
+                  <p>{stats.contactTotals.totalSubmissions.toLocaleString()}</p>
+                </article>
+                <article>
+                  <h3>Total Bible Questions</h3>
+                  <p>{stats.contactTotals.totalQuestions.toLocaleString()}</p>
+                </article>
+              </div>
+
+              <div className="admin-visits-table-wrap">
+                <h3>Recent Bible Questions</h3>
+                {stats.bibleQuestions.length === 0 ? (
+                  <p className="admin-stats-note">No Bible questions yet.</p>
+                ) : (
+                  <div className="admin-visits-table-scroll">
+                    <table className="admin-visits-table">
+                      <thead>
+                        <tr>
+                          <th>Submitted</th>
+                          <th>Name</th>
+                          <th>Email</th>
+                          <th>Question</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {stats.bibleQuestions.map(item => (
+                          <tr key={item.id}>
+                            <td>{formatDate(item.submittedAt)}</td>
+                            <td>{item.name}</td>
+                            <td>{item.email}</td>
+                            <td>{item.message}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+              </div>
+
               <div className="admin-stats-head admin-stats-head--visitors">
                 <h2>Data Management</h2>
                 <p>Export, backup, or retain only recent analytics data.</p>

src/App.css

@@ -553,7 +553,8 @@
 }
 
 .contact-form input,
-.contact-form textarea {
+.contact-form textarea,
+.contact-form select {
   background: #0c0c0c;
   border: 1px solid rgba(200, 134, 10, 0.25);
   border-radius: 8px;

src/App.tsx

@@ -105,7 +105,7 @@ function AmazonMusicIcon() {
 
 function ContactForm() {
   const navigate = useNavigate()
-  const [fields, setFields] = useState({ name: '', email: '', message: '' })
+  const [fields, setFields] = useState({ name: '', email: '', message: '', messageType: 'question' })
   const [subscribe, setSubscribe] = useState(false)
   const [honey, setHoney] = useState('')
   const [status, setStatus] = useState<'idle' | 'submitting' | 'error'>('idle')
@@ -115,6 +115,10 @@ function ContactForm() {
     setFields(f => ({ ...f, [e.target.name]: e.target.value }))
   }
 
+  function handleSelectChange(e: React.ChangeEvent<HTMLSelectElement>) {
+    setFields(f => ({ ...f, [e.target.name]: e.target.value }))
+  }
+
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
     setStatus('submitting')
@@ -157,6 +161,15 @@ function ContactForm() {
         Email
         <input type="email" name="email" required autoComplete="email" value={fields.email} onChange={handleChange} />
       </label>
+      <label>
+        Message Type
+        <select name="messageType" value={fields.messageType} onChange={handleSelectChange}>
+          <option value="question">Bible Question</option>
+          <option value="testimony">Testimony</option>
+          <option value="topic">Topic Request</option>
+          <option value="general">General Message</option>
+        </select>
+      </label>
       <label>
         Message
         <textarea name="message" rows={6} required value={fields.message} onChange={handleChange} />