48 Limit referrals to a maximum of 5 per submission

package.json

@@ -23,9 +23,9 @@
     "@mui/material": "^6.4.3",
     "@mui/x-data-grid": "^7.26.0",
     "@prisma/client": "^6.4.1",
+    "dayjs": "^1.11.13",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
-    "dayjs": "^1.11.13",
     "mongoose": "^8",
     "next": "^15.2.1",
     "nodemailer": "^6.10.0",
@@ -50,6 +50,7 @@
     "prettier": "^3.4.2",
     "prisma": "^6.4.1",
     "ts-jest": "^29.3.2",
-    "typescript": "^5"
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.3"
   }
 }

src/app/api/referral/route.ts

@@ -26,6 +26,11 @@ export async function POST(req: NextRequest) {
     if (!Array.isArray(prospects) || prospects.length === 0) {
       return NextResponse.json({ message: "At least one prospect is required." }, { status: 400 });
     }
+
+    if (prospects.length > 5) {
+      return NextResponse.json({ message: "You can only refer up to 5 prospects at a time." }, { status: 400 });
+    }
+
     // Loop through prospects to validate each entry
     for (let i = 0; i < prospects.length; i++) {
       const prospect = prospects[i];

src/app/page.tsx

@@ -23,7 +23,7 @@ export default function Home() {
         </div>
         <div className={styles.heroImageWrapper}>
           <Image
-            src="/produce.jpg"
+            src="/assets/produce.jpg"
             alt="Fresh Produce"
             fill
             className={styles.heroImage}
@@ -32,12 +32,12 @@ export default function Home() {
         </div>
       </section>
 
-      {/* Why Refer & Referral History */}
+      {/* Why Refer & Referral History Section */}
       <section className={styles.referralSection}>
         <div className={styles.leftSection}>
           <div className={styles.produceImageWrapper}>
             <Image
-              src="/produce_2.jpg"
+              src="/assets/produce_2.jpg"
               alt="Fresh Produce"
               fill
               className={styles.produceImage}

src/components/ReferralDatabase/ReferralDataGrid.tsx

@@ -14,6 +14,7 @@ import Switch from "@mui/material/Switch";
 import jsPDF from "jspdf";
 import autoTable from "jspdf-autotable";
 
+// Custom Toolbar
 const CustomToolbar = ({ onExport }: { onExport: () => void }) => {
   return (
     <div style={{ padding: "8px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>

src/components/ReferralForm/ReferralForm.module.css

@@ -56,26 +56,26 @@
   box-sizing: border-box;
 }
 
-/* Button styling */
 .button {
   display: flex;
-  width: 80px;
-  height: 36px;
-  padding: 12px 18px;
   align-items: center;
+  justify-content: center;
+  width: auto;
+  height: auto;
+  padding: 0.5rem 1.5rem;
   gap: 10px;
-  border-radius: 8px;
-  background: var(--red, #831002);
-  color: #ffffff;
   border: none;
+  border-radius: 8px;
+  background-color: var(--red, #831002);
+  color: #fff;
   font-size: 1.125rem;
   font-weight: 200;
+  text-align: center;
   cursor: pointer;
+  align-self: flex-end;
   transition:
     background-color 0.2s,
     transform 0.1s;
-  text-align: center;
-  align-self: flex-end;
 }
 
 /* Button hover and active effects */
@@ -139,7 +139,8 @@
 .error {
   color: red;
   font-weight: bold;
-  margin-top: 10px;
+  align-self: flex-end;
+  margin-top: -1.5rem;
 }
 
 .inputFields {
@@ -156,13 +157,11 @@
   flex-wrap: wrap;
 }
 
-/* .nameRow input {
-  flex: 1;
-  min-width: 120px; 
-} */
-
 .emailRow {
   display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
   width: 100%;
 }
 
@@ -205,25 +204,26 @@
 @media (min-width: 768px) {
   .inputFields {
     flex-direction: row;
-    /* gap: 15px; */
   }
 
   .nameRow {
-    width: 60%;
+    flex: 1;
   }
 
   .emailRow {
-    width: 40%;
+    flex: 1;
   }
-
-  /* .crossButton {
-    margin-bottom: 0;
-    align-self: center;
-  } */
 }
 
 @media (max-width: 480px) {
   .nameRow {
     flex-direction: column;
   }
 }
+
+.limitMessage {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #7b3f00;
+  margin: 0;
+}