From a3d12638d1dd4a6e05ebde13c7c81bd42f793a4c Mon Sep 17 00:00:00 2001
From: Anilkumar3494 <karapaanilkumar005@gmail.com>
Date: Mon, 16 Feb 2026 16:55:31 -0500
Subject: [PATCH 1/3] make feedback from custom and API insert to supbase

---
 src/components/Pages/Contact.tsx       | 222 +++++++++++++++++++++----
 src/components/Pages/Pages.module.scss |   4 +-
 src/services/db.ts                     |  17 +-
 src/types/ResourceEntry.ts             |   7 +
 4 files changed, 217 insertions(+), 33 deletions(-)

diff --git a/src/components/Pages/Contact.tsx b/src/components/Pages/Contact.tsx
index 98287a52..189a2f21 100644
--- a/src/components/Pages/Contact.tsx
+++ b/src/components/Pages/Contact.tsx
@@ -1,42 +1,204 @@
-import { useState } from 'react';
-import { Box, CircularProgress } from '@mui/material';
+import { useState, useEffect, useMemo } from 'react';
+import ReplayIcon from '@mui/icons-material/Replay';
+import {
+  Checkbox,
+  Stack,
+  TextField,
+  Button,
+  FormControlLabel,
+  Alert,
+  Collapse
+} from '@mui/material';
+import { addFeedback } from 'services/db';
+
+import styles from './Pages.module.scss';
+
+const PRIMARY_COLOR = '#10b6ff';
 
 const Contact = () => {
-  const [loading, setLoading] = useState(true);
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    feedback: '',
+    interest: false
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout;
+    if (status === 'success') {
+      timer = setTimeout(() => {
+        setStatus('idle');
+      }, 5000);
+    }
+    return () => clearTimeout(timer);
+  }, [status]);
+
+  const handleChange =
+    (field: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value =
+        field === 'interest' ? event.target.checked : event.target.value;
+      setForm(prev => ({ ...prev, [field]: value }));
+      if (status === 'error') setStatus('idle');
+    };
+
+  const validateEmail = (email: string) => {
+    return /\S+@\S+\.\S+/.test(email);
+  };
 
-  const handleLoading = () => {
-    setLoading(false);
+  const handleSubmit = async () => {
+    if (!form.name.trim() || !form.email.trim()) {
+      setStatus('error');
+      return;
+    }
+    if (!validateEmail(form.email)) {
+      alert('Please enter a valid email address');
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      await addFeedback({
+        name: form.name,
+        email: form.email,
+        feedback: form.feedback || null,
+        interest: form.interest
+      });
+
+      setStatus('success');
+
+      setForm({
+        name: '',
+        email: '',
+        feedback: '',
+        interest: false
+      });
+    } catch (error) {
+      console.error(error);
+      setStatus('error');
+    } finally {
+      setLoading(false);
+    }
   };
 
+  const handleReset = () => {
+    setForm({ name: '', email: '', feedback: '', interest: false });
+    setStatus('idle');
+  };
+
+  const textFieldFocusSX = useMemo(
+    () => ({
+      '& .MuiOutlinedInput-root': {
+        '&.Mui-focused fieldset': {
+          borderColor: PRIMARY_COLOR
+        }
+      },
+      '& .MuiInputLabel-root.Mui-focused': {
+        color: PRIMARY_COLOR
+      }
+    }),
+    []
+  );
+
   return (
-    <Box sx={{ height: '600px', width: '100%', position: 'relative' }}>
-      {loading && (
-        <Box
+    <Stack gap={2} sx={{ position: 'relative' }}>
+      <h2 className={styles.pageHeader}>Contact Us</h2>
+
+      <Collapse in={status !== 'idle'}>
+        {status === 'success' && (
+          <Alert severity="success" onClose={() => setStatus('idle')}>
+            Thank you! Your feedback has been received!
+          </Alert>
+        )}
+        {status === 'error' && (
+          <Alert severity="error" onClose={() => setStatus('idle')}>
+            Please check your inputs and try again.
+          </Alert>
+        )}
+      </Collapse>
+
+      <TextField
+        required
+        label="Name"
+        placeholder="Enter Your Name"
+        value={form.name}
+        onChange={handleChange('name')}
+        sx={textFieldFocusSX}
+        autoComplete="name"
+      />
+
+      <TextField
+        required
+        type="email"
+        label="Email"
+        placeholder="example@email.com"
+        value={form.email}
+        onChange={handleChange('email')}
+        sx={textFieldFocusSX}
+        autoComplete="email"
+      />
+
+      <TextField
+        label="Feedback"
+        multiline
+        rows={3}
+        placeholder="Share your feedback and thoughts"
+        value={form.feedback}
+        onChange={handleChange('feedback')}
+        sx={textFieldFocusSX}
+      />
+
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={form.interest}
+            onChange={handleChange('interest')}
+            sx={{
+              '&.Mui-checked': { color: PRIMARY_COLOR }
+            }}
+          />
+        }
+        label={
+          <span className={styles.pageText}>
+            I'm interested in helping PHLASK with future research
+          </span>
+        }
+      />
+
+      <Stack direction="row" gap={2}>
+        <Button
+          variant="text"
+          onClick={handleReset}
+          sx={{ color: PRIMARY_COLOR }}
+        >
+          <ReplayIcon sx={{ mr: 0.5 }} />
+          clear form
+        </Button>
+
+        <Button
+          variant="contained"
+          onClick={handleSubmit}
+          disabled={loading || status === 'success'}
           sx={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            fontWeight: 'bold',
+            backgroundColor: PRIMARY_COLOR,
+            '&:hover': {
+              backgroundColor: PRIMARY_COLOR,
+              boxShadow: `0 0 10px ${PRIMARY_COLOR}80`
+            }
           }}
         >
-          <CircularProgress />
-        </Box>
-      )}
-
-      <iframe
-        title="Contact Us"
-        className="airtable-embed"
-        src="https://airtable.com/embed/appyNdhZZn3gpovFh/pagDtKnlb6n3mCpgd/form"
-        width="100%"
-        height="600px"
-        style={{ background: 'transparent', border: 'none' }}
-        onLoad={handleLoading}
-      />
-    </Box>
+          {loading
+            ? 'Submitting...'
+            : status === 'success'
+            ? 'Submitted'
+            : 'Submit'}
+        </Button>
+      </Stack>
+    </Stack>
   );
 };
 
diff --git a/src/components/Pages/Pages.module.scss b/src/components/Pages/Pages.module.scss
index 2d9aa490..c57582aa 100644
--- a/src/components/Pages/Pages.module.scss
+++ b/src/components/Pages/Pages.module.scss
@@ -9,12 +9,12 @@ $extra-space: 25px; // Extra vertical space for the contact form
   overflow-y: auto;
   padding-right: 10px;
   flex: 1;
-  max-height: 55vh;
+  max-height: 55dvh;
 }
 
 .pageHeader {
   margin: 0;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
   color: #60718c;
   font-family: 'Inter', sans-serif;
   font-weight: 600;
diff --git a/src/services/db.ts b/src/services/db.ts
index 138120db..50f319a5 100644
--- a/src/services/db.ts
+++ b/src/services/db.ts
@@ -1,5 +1,5 @@
 import { createClient } from '@supabase/supabase-js';
-import type { ResourceEntry } from 'types/ResourceEntry';
+import type { FeedbackForm, ResourceEntry } from 'types/ResourceEntry';
 import type { ResourceTypeOption } from 'hooks/useResourceType';
 import type { Contributor } from 'types/Contributor';
 
@@ -11,6 +11,7 @@ const databaseApiKey =
   import.meta.env.VITE_DB_API_KEY ||
   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndhbnR5Y2Zibnp6b2NzYnRocXpzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzcwNDY2OTgsImV4cCI6MjA1MjYyMjY5OH0.yczsMOx3Y-zsWu-GjYEajIb0yw9fYWEIUglmmfM1zCY';
 const contributorDatabaseName = 'contributors';
+const feedbackDatabaseName = 'airtable_feedback';
 
 const supabase = createClient(databaseUrl, databaseApiKey);
 
@@ -116,6 +117,18 @@ export const addResource = async (resource: ResourceEntry) => {
   return data;
 };
 
+export const addFeedback = async (feedback: FeedbackForm) => {
+  const { data, error } = await supabase
+    .from(feedbackDatabaseName)
+    .insert(feedback)
+    .select();
+
+  if (error) {
+    throw error;
+  }
+  return data;
+};
+
 export const getContributors = async (): Promise<Contributor[]> => {
   const { data, error } = await supabase
     .from(contributorDatabaseName)
@@ -123,6 +136,8 @@ export const getContributors = async (): Promise<Contributor[]> => {
   if (error) {
     throw error;
   }
+
+  console.table(data);
   return data;
 };
 
diff --git a/src/types/ResourceEntry.ts b/src/types/ResourceEntry.ts
index f25bdb0d..2ab31c46 100644
--- a/src/types/ResourceEntry.ts
+++ b/src/types/ResourceEntry.ts
@@ -178,3 +178,10 @@ export type ResourceEntry = {
   /**  If the resource_type is BATHROOM, the information about the bathroom resource. */
   bathroom?: BathroomInfo | null;
 };
+
+export type FeedbackForm = {
+  name: string | null;
+  email: string | null;
+  feedback?: string | null;
+  interest?: boolean | null;
+};

From 5e4eb3db13bf8998ff8057816423fb0b7ebce6de Mon Sep 17 00:00:00 2001
From: Anilkumar3494 <karapaanilkumar005@gmail.com>
Date: Mon, 16 Feb 2026 17:17:55 -0500
Subject: [PATCH 2/3] fix error states

---
 src/components/Pages/Contact.tsx | 45 ++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/components/Pages/Contact.tsx b/src/components/Pages/Contact.tsx
index 189a2f21..92464141 100644
--- a/src/components/Pages/Contact.tsx
+++ b/src/components/Pages/Contact.tsx
@@ -14,6 +14,12 @@ import { addFeedback } from 'services/db';
 import styles from './Pages.module.scss';
 
 const PRIMARY_COLOR = '#10b6ff';
+type FormStatus =
+  | 'idle'
+  | 'success'
+  | 'input_error'
+  | 'email_error'
+  | 'submission_error';
 
 const Contact = () => {
   const [form, setForm] = useState({
@@ -24,7 +30,7 @@ const Contact = () => {
   });
 
   const [loading, setLoading] = useState(false);
-  const [status, setStatus] = useState<'idle' | 'success' | 'error'>('idle');
+  const [status, setStatus] = useState<FormStatus>('idle');
 
   useEffect(() => {
     let timer: NodeJS.Timeout;
@@ -41,7 +47,9 @@ const Contact = () => {
       const value =
         field === 'interest' ? event.target.checked : event.target.value;
       setForm(prev => ({ ...prev, [field]: value }));
-      if (status === 'error') setStatus('idle');
+      if (status === 'input_error' || status === 'submission_error') {
+        setStatus('idle');
+      }
     };
 
   const validateEmail = (email: string) => {
@@ -50,11 +58,11 @@ const Contact = () => {
 
   const handleSubmit = async () => {
     if (!form.name.trim() || !form.email.trim()) {
-      setStatus('error');
+      setStatus('input_error');
       return;
     }
     if (!validateEmail(form.email)) {
-      alert('Please enter a valid email address');
+      setStatus('email_error');
       return;
     }
 
@@ -78,7 +86,7 @@ const Contact = () => {
       });
     } catch (error) {
       console.error(error);
-      setStatus('error');
+      setStatus('submission_error');
     } finally {
       setLoading(false);
     }
@@ -113,9 +121,19 @@ const Contact = () => {
             Thank you! Your feedback has been received!
           </Alert>
         )}
-        {status === 'error' && (
+        {status === 'input_error' && (
+          <Alert severity="error" onClose={() => setStatus('idle')}>
+            Please fill the required (*) fields and try again.
+          </Alert>
+        )}
+        {status === 'email_error' && (
           <Alert severity="error" onClose={() => setStatus('idle')}>
-            Please check your inputs and try again.
+            Please enter a valid email.
+          </Alert>
+        )}
+        {status === 'submission_error' && (
+          <Alert severity="error" onClose={() => setStatus('idle')}>
+            Something went wrong please try again after sometime.
           </Alert>
         )}
       </Collapse>
@@ -149,6 +167,17 @@ const Contact = () => {
         value={form.feedback}
         onChange={handleChange('feedback')}
         sx={textFieldFocusSX}
+        helperText="Please do not include any sensitive personal information."
+        slotProps={{
+          formHelperText: {
+            sx: {
+              color: 'gray',
+              fontSize: '0.75rem',
+              fontStyle: 'italic',
+              marginLeft: '1px'
+            }
+          }
+        }}
       />
 
       <FormControlLabel
@@ -168,7 +197,7 @@ const Contact = () => {
         }
       />
 
-      <Stack direction="row" gap={2}>
+      <Stack direction="row" gap={5}>
         <Button
           variant="text"
           onClick={handleReset}

From 74be625e07b0a5a58d7c001cf0b11bffacdcdea1 Mon Sep 17 00:00:00 2001
From: Anilkumar3494 <karapaanilkumar005@gmail.com>
Date: Thu, 19 Feb 2026 16:01:17 -0500
Subject: [PATCH 3/3] quick fixes,

---
 src/components/Pages/Contact.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Pages/Contact.tsx b/src/components/Pages/Contact.tsx
index e3b103ab..37667487 100644
--- a/src/components/Pages/Contact.tsx
+++ b/src/components/Pages/Contact.tsx
@@ -8,15 +8,15 @@ import {
   Collapse,
   Typography
 } from '@mui/material';
-import ReplayIcon from '@mui/icons-material/Replay';
+import { FormProvider, useForm, Controller } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
 import { addFeedback } from 'services/db';
 import Page from 'components/Page/Page';
 import feedbackFormSchema, {
   type FeedbackFormValues
 } from 'schemas/feedbackFormSchema';
-import { FormProvider, useForm, Controller } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
 import FormTextField from 'components/forms/FormTextField/FormTextField';
+import ClearFormIcon from 'icons/ClearFormIcon';
 
 type FormValues = FeedbackFormValues;
 
@@ -74,7 +74,7 @@ const Contact = () => {
   return (
     <Page title={TITLE} data-cy="contact-us">
       <FormProvider {...methods}>
-        <form onSubmit={handleSubmit(onSubmit)} style={{ width: '100%' }}>
+        <form onSubmit={handleSubmit(onSubmit)} style={{ width: '75%' }}>
           <Stack gap={2}>
             <Collapse in={status !== 'idle'}>
               {status === 'success' && (
@@ -158,7 +158,7 @@ const Contact = () => {
                 variant="text"
                 onClick={handleClear}
                 sx={{ color: PRIMARY_COLOR }}
-                startIcon={<ReplayIcon />}
+                startIcon={<ClearFormIcon />}
               >
                 clear form
               </Button>