Merge branch 'develop' into implement_checksum

Author: IvanA673

README.md

@@ -17,21 +17,20 @@ The Paso Robles Food Co-op is a non-profit organization dedicated to building a
 
 ### Team
 
-The PRFC team consists of 13 Cal Poly students. Over the course of about 9 months, we worked as a team to deploy this web application. The team members are listed below:
+The PRFC team consists of 12 Cal Poly students. Over the course of about 9 months, we worked as a team to deploy this web application. The team members are listed below:
 
+- [Ivan Alvarez](https://www.linkedin.com/in/ivanalvarez04/) - Tech Lead
+- [Amanda Chan](https://www.linkedin.com/in/achan04/) - Tech Lead
 - [Alexios Sideris](https://www.linkedin.com/in/alexios-sideris/) - Project Manager
 - [Naomi Tan](https://www.linkedin.com/) - Designer
-- [Kayle Le](https://www.linkedin.com/in/kayla-le-2227a61b0?trk=contact-info) - Designer
+- [Kayla Le](https://www.linkedin.com/in/kayla-le-2227a61b0?trk=contact-info) - Designer
 - [Anagha Kulkami](https://www.linkedin.com/in/anagha-kul/) - Designer
-- [Ivan Alvarez](https://www.linkedin.com/in/ivanalvarez04/) - Tech Lead
-- [Amanda Chan](https://www.linkedin.com/in/achan04/) - Tech Lead
 - [Vinayak Kohli](https://www.linkedin.com/) - Software Developer
 - [Karthik Balaji](https://www.linkedin.com/in/karthik-balaji-6529011ab/) - Software Developer
 - [Min Hset Hlaing](https://www.linkedin.com/in/min-hset-hlaing-37013b224/) - Software Developer
 - [Sue Sue](https://www.linkedin.com/in/sue-sue/) - Software Developer
 - [Camila Yeremin](https://www.linkedin.com/) - Software Developer
 - [Winnie Trinh](https://www.linkedin.com/in/winnie-trinh/) - Software Developer
-- [Charles Moreno](https://www.linkedin.com/) - Software Developer
 
 ## Getting Started And Contributing
 

package-lock.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "prisma generate && next build",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
@@ -25,6 +25,7 @@
     "@prisma/client": "^6.4.1",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
+    "dayjs": "^1.11.13",
     "mongoose": "^8",
     "next": "^15.2.1",
     "nodemailer": "^6.10.0",

package.json

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/database/db";
 
-export async function PUT(req: NextRequest, context: { params: { id?: string } }) {
+export async function PUT(req: NextRequest, context: { params: Promise<{ id?: string }> }) {
   try {
     const resolvedParams = await context.params; // Await the params
     if (!resolvedParams?.id) {

src/app/api/example/route.ts

@@ -9,6 +9,7 @@ export async function POST(req: NextRequest) {
 
     // Destructure required parameters from the request body
     const { member_name, member_email, prospects, referral_code } = body;
+    console.log(body);
     // Validate required fields with specific error messages
     if (!member_name) {
       return NextResponse.json({ message: "Member name is required." }, { status: 400 });
@@ -36,7 +37,7 @@ export async function POST(req: NextRequest) {
       }
     }
 
-    const emailSent = await sendEmail(prospects, referral_code);
+    const emailSent = await sendEmail(prospects, referral_code, member_name);
     if (!emailSent) {
       return NextResponse.json({ message: "Failed to send email." }, { status: 500 });
     }
@@ -74,79 +75,80 @@ const transport = nodemailer.createTransport({
   },
 });
 
-async function sendEmail(prospects: any, ref: any) {
-  const mail = {
-    from: process.env.FROM_EMAIL,
-    to: prospects.map((prospect: { prospect_email: any }) => prospect.prospect_email).join(", "),
-    subject: "You've Been Referred!",
-    text: `Hello! -nodemailer\n`,
-    html: `<div style="width: 100%; max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
-   
-  
-  <!--Header with logo image-->
-  <div style="text-align: center;">
-    <img src="cid:pasoLogo" alt="THE PASO FOOD CO-OP" style="max-width: 100%;">
-  </div>
+async function sendEmail(prospects: any, ref: any, member: any) {
+  let emailsSent = true;
+  for (const prospect of prospects) {
+    // console.log(prospect.prospect_email);
+    const mail = {
+      from: process.env.FROM_EMAIL,
+      to: prospect.prospect_email,
+      subject: "You've Been Invited!",
+      text: `Hello! -nodemailer\n`,
+      html: `<div style="width: 100%; max-width: 600px; margin: 0 auto; font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
     
-  <! Main content >
-  <div style="padding: 20px;">
-    <p>Hello ${prospects.prospect_name},</p>
     
-    <p>We're excited to let you know that your friend, <strong>${prospects.referrer_name}</strong>, thinks you'd love being a part of the Paso Robles Food Co-op!</p>
-    
-    <p>At the Co-op, we're all about building a stronger community by connecting members to fresh, healthy, and locally-sourced food. As a member, you'll enjoy:</p>
-    
-    <ul style="list-style-type: none; padding-left: 10px;">
-      <li style="margin-bottom: 8px;">• Supporting local farmers and food producers 🌱</li>
-      <li style="margin-bottom: 8px;">• A say in how the Co-op operates (yes, you're an owner!) 🗳️</li>
-      <li style="margin-bottom: 8px;">• Exclusive discounts and special events 🎉</li>
-    </ul>
-    
-    <p>It's easy to join the Co-op and start making an impact in our community! Just click the link below to complete your membership registration:</p>
-    
-   <p>
-      <span style="font-weight: bold;">👉 <a href="https://www.pasoroblescoop.com" style="color: black; text-decoration: none;">Join Now</a></span>
-    </p>
-    <p>Your unique referral code is <strong>${ref}</strong>—be sure to enter it during registration.</p>
-    
-    <p>Feel free to reach out if you have any questions or want to learn more about what makes the Paso Robles Food Co-op special.</p>
-    
-    <p>Looking forward to welcoming you into our growing Co-op family!</p>
-    
-    <p>Warm regards,<br>
-    The Paso Robles Food Co-op Team</p>
-    
-    <! Contact Info >
-    <div style="margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px;">
-      <p style="margin: 5px 0;">
-        📧 <a href="mailto:info@pasoroblescoop.com" style="color: #333; text-decoration: none;">info@pasoroblescoop.com</a>
-      </p>
-      <p style="margin: 5px 0;">
-        📞 <span>[555-555-5555]</span>
-      </p>
-      <p style="margin: 5px 0;">
-        🌐 <a href="https://www.pasoroblescoop.com" style="color: #333; text-decoration: none;">www.pasoroblescoop.com</a>
+    <!--Header with logo image-->
+    <div style="text-align: center;">
+      <img src="cid:pasoLogo" alt="THE PASO FOOD CO-OP" style="max-width: 100%;">
+    </div>
+      
+    <! Main content >
+    <div style="padding: 20px;">
+      <p>Hello ${prospect.prospect_name},</p>
+      
+      <p>We're excited to let you know that <strong>${member}</strong>, thinks you'd love being a part of the Paso Robles Food Co-op!</p>
+      
+      <p>At the Co-op, we're all about building a stronger community by connecting members to fresh, healthy, and locally-sourced food. As a member owner, you'll enjoy:</p>
+      
+      <ul style="padding-left: 10px;">
+        <li style="margin-bottom: 8px;">Supporting local farmers and food producers 🌱</li>
+        <li style="margin-bottom: 8px;">A say in how the Co-op operates (yes, you're an owner!) 🗳️</li>
+        <li style="margin-bottom: 8px;">Exclusive discounts and special events 🎉</li>
+      </ul>
+      
+      <p>It's easy to join the Co-op and start making an impact in our community! Just click the link below to complete your membership registration:</p>
+      
+    <p>
+        <span style="font-weight: bold;">👉 <a href="https://www.pasoroblescoop.com" style="color: black; text-decoration: none;">Join Now</a></span>
       </p>
+      <p>Your unique referral code is <strong>${ref}</strong>—be sure to confirm/enter it during registration.</p>
+      
+      <p>Feel free to reach out if you have any questions or want to learn more about what makes the Paso Robles Food Co-op special. Our monthly meeting is every 4<sup>th</sup> Wednesday at 6pm. All details and info at our website: <a href="www.pasofoodcooperative.com" style="color: #333; text-decoration: underline;">www.pasofoodcooperative.com</a></p>
+      
+      <p>Looking forward to welcoming you into our growing Co-op family!</p>
+      
+      <p>Warm regards,<br>
+      ${member} and The Paso Robles Food Co-op Member Owners</p>
+      
+      <! Contact Info >
+      <div style="margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px;">
+        <p style="margin: 5px 0;">
+          📧 <a href="mailto:info@pasofoodcooperative.com" style="color: #333; text-decoration: none;">info@pasofoodcooperative.com</a>
+        </p>
+        <p style="margin: 5px 0;">
+          🌐 <a href="www.pasofoodcooperative.com" style="color: #333; text-decoration: none;">www.pasofoodcooperative.com</a>
+        </p>
+      </div>
     </div>
-  </div>
-</div>`,
-    attachments: [
-      {
-        filename: "paso-coop.jpeg", // Name of the file as it will appear in the email
-        path: "public/assets/paso-coop.jpeg", // Path relative to your project root
-        cid: "pasoLogo", // Content ID referenced in the HTML img src
-      },
-    ],
-  };
+    </div>`,
+      attachments: [
+        {
+          filename: "paso-coop.jpeg", // Name of the file as it will appear in the email
+          path: "public/assets/paso-coop.jpeg", // Path relative to your project root
+          cid: "pasoLogo", // Content ID referenced in the HTML img src
+        },
+      ],
+    };
 
-  try {
-    const sendAttempt = await transport.sendMail(mail);
-    console.log("Email sent successfully: ", sendAttempt.response);
-    return true;
-  } catch (error) {
-    console.error("Error sending email: ", error);
-    return false;
+    try {
+      const sendAttempt = await transport.sendMail(mail);
+      console.log("Email sent successfully: ", sendAttempt.response);
+    } catch (error) {
+      console.error("Error sending email: ", error);
+      return false;
+    }
   }
+  return emailsSent;
 }
 
 // To use whenever you fetch something from the db and want to return it

src/app/api/referral/[id]/route.ts

@@ -2,6 +2,7 @@ import Header from "@/components/Header/Header";
 import ReferralForm from "@/components/ReferralForm/ReferralForm";
 import styles from "@/styles/page.module.css";
 import Image from "next/image";
+import { Suspense } from "react";
 
 export default function Home() {
   return (
@@ -16,7 +17,9 @@ export default function Home() {
             <h2>Refer a Family Member or Friend</h2>
           </div>
           {/* Referral Form */}
-          <ReferralForm />
+          <Suspense fallback={<div>Loading...</div>}>
+            <ReferralForm />
+          </Suspense>
         </div>
         <div className={styles.heroImage}>
           <Image src="/produce.jpg" alt="Fresh Produce" width={600} height={600} layout="intrinsic" />

src/app/api/referral/route.ts

@@ -1,7 +1,7 @@
 /* Header.module.css */
 .header {
   width: 100%;
-  height: 80px; /* Adjust height as needed */
+  height: 8vw; /* Adjust height as needed */
   background-color: white;
   display: flex;
   align-items: center;
@@ -18,6 +18,7 @@
 }
 
 .logo {
-  height: 60px; /* Adjust logo size as needed */
+  height: 4vw;
+  min-height: 60px; /* Adjust logo size as needed */
   width: auto;
 }

src/app/page.tsx

@@ -1,11 +1,20 @@
 import React from "react";
 import styles from "./Header.module.css"; // Ensure this is the correct path
+import Image from "next/image";
 
 const Header: React.FC = () => {
   return (
     <header className={styles.header}>
       <div className={styles.logoContainer}>
-        <img src="/logo.jpg" alt="Logo" className={styles.logo} />
+        {/* <img src="/logo.jpg" alt="Logo" className={styles.logo} /> */}
+        <Image
+          src="/logo.jpg"
+          alt="Logo"
+          className={styles.logo}
+          width={120} // Adjust based on your needs
+          height={60}
+          priority // Optional: load early for better LCP
+        />
       </div>
     </header>
   );

src/components/Header/Header.module.css

@@ -13,6 +13,7 @@ import { useState, useEffect } from "react";
 import Switch from "@mui/material/Switch";
 import jsPDF from "jspdf";
 import autoTable from "jspdf-autotable";
+import dayjs from "dayjs"; // For date
 
 const CustomToolbar = ({ onExport }: { onExport: () => void }) => {
   return (
@@ -212,7 +213,13 @@ export default function ReferralDataGrid() {
   };
 
   return (
-    <div style={{ height: 572, width: "100%" }}>
+    <div
+      style={{
+        height: "calc(100vh - 12rem", // Subtract the header height from the full screen height
+        width: "100%",
+        margin: "0 auto", //Center horizontally
+      }}
+    >
       <DataGrid
         rows={rows}
         columns={columns}
@@ -224,6 +231,7 @@ export default function ReferralDataGrid() {
             showQuickFilter: true,
           },
         }}
+        getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? "even-row" : "odd-row")}
         sx={{
           border: "2px solid #968676",
           borderRadius: "12px",
@@ -239,13 +247,14 @@ export default function ReferralDataGrid() {
             fontWeight: "bold",
             textDecoration: "underline",
           },
+          "& .even-row": {
+            backgroundColor: "#ffffff",
+          },
+          "& .odd-row": {
+            backgroundColor: "#D9D9D9",
+          },
           "& .MuiDataGrid-row": {
-            "&:nth-of-type(odd)": {
-              backgroundColor: "#D9D9D9", // Odd row background color
-            },
-            "&:nth-of-type(even)": {
-              backgroundColor: "#ffffff", // Even row background color
-            },
+            transition: "none !important",
           },
         }}
       />