Add volunteer profile modal and view page

backend/src/controllers/volunteerController.ts

@@ -98,11 +98,25 @@ type CreateVolunteerBody = {
   email: string;
   phoneNumber: string;
   tags?: string[];
+  statusTags?: string[];
+  volunteerTypeTags?: string[];
+  events?: string[];
+  additionalNotes?: string;
 };
 
 export const createVolunteer: RequestHandler = async (req, res, next) => {
   const errors = validationResult(req);
-  const { firstName, lastName, email, phoneNumber, tags = [] } = req.body as CreateVolunteerBody;
+  const {
+    firstName,
+    lastName,
+    email,
+    phoneNumber,
+    tags = [],
+    statusTags = [],
+    volunteerTypeTags = [],
+    events = [],
+    additionalNotes = "",
+  } = req.body as CreateVolunteerBody;
   try {
     validationErrorParser(errors);
 
@@ -117,13 +131,77 @@ export const createVolunteer: RequestHandler = async (req, res, next) => {
       email,
       phoneNumber,
       tags,
+      statusTags,
+      volunteerTypeTags,
+      events,
+      additionalNotes,
     });
     res.status(201).json(newVolunteer);
   } catch (err) {
     next(err);
   }
 };
 
+type UpdateVolunteerBody = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  phoneNumber: string;
+  tags?: string[];
+  statusTags?: string[];
+  volunteerTypeTags?: string[];
+  events?: string[];
+  additionalNotes?: string;
+};
+
+export const updateVolunteer: RequestHandler = async (req, res, next) => {
+  const errors = validationResult(req);
+  const volunteerId = req.params.id;
+  const {
+    firstName,
+    lastName,
+    email,
+    phoneNumber,
+    tags,
+    statusTags,
+    volunteerTypeTags,
+    events,
+    additionalNotes,
+  } = req.body as UpdateVolunteerBody;
+
+  try {
+    validationErrorParser(errors);
+
+    const updatePayload: Record<string, unknown> = {
+      firstName,
+      lastName,
+      email,
+      phoneNumber,
+      statusTags,
+      volunteerTypeTags,
+      events,
+      additionalNotes,
+    };
+
+    if (Array.isArray(tags)) {
+      updatePayload.tags = tags;
+    }
+
+    const volunteer = await VolunteerModel.findByIdAndUpdate(volunteerId, updatePayload, {
+      new: true,
+      runValidators: true,
+    }).populate(defaultPopulateConfig);
+
+    if (!volunteer) {
+      return res.status(404).json({ error: "Could not find volunteer" });
+    }
+
+    res.status(200).json(volunteer);
+  } catch (err) {
+    next(err);
+  }
+};
+
 type UpdateVolunteerContactBody = {
   email: string;
   phoneNumber: string;

backend/src/models/volunteerModel.ts

@@ -13,9 +13,26 @@ const volunteerSchema = new Schema({
     default: [],
     required: true,
   },
+  statusTags: {
+    type: [String],
+    default: [],
+  },
+  volunteerTypeTags: {
+    type: [String],
+    default: [],
+  },
+  events: {
+    type: [String],
+    default: [],
+  },
+  additionalNotes: {
+    type: String,
+    default: "",
+  },
   status: {
     type: String,
     enum: ["returning", "new"],
+    default: "new",
   },
 });
 

backend/src/routes/volunteerRoutes.ts

@@ -32,6 +32,7 @@ router.get("/", volunteer.getVolunteers);
 router.delete("/:id", volunteer.deleteVolunteer);
 
 router.post("/", VolunteerValidator.createVolunteerValidator, volunteer.createVolunteer);
+router.put("/:id", VolunteerValidator.updateVolunteerValidator, volunteer.updateVolunteer);
 router.put(
   "/contact/:id",
   VolunteerValidator.updateVolunteerContactValidator,

backend/src/scripts/seedVolunteers.ts

@@ -1,87 +1,97 @@
 import "dotenv/config";
 
 import { connectToDatabase } from "../database/connect";
+import Tag from "../models/tagModel";
 import Volunteer from "../models/volunteerModel";
 
 async function seedVolunteers() {
   await connectToDatabase();
 
-  await Volunteer.deleteMany({}); // Clear existing volunteers
+  await Volunteer.deleteMany({});
+  await Tag.deleteMany({});
+
+  const seededTags = await Tag.insertMany([
+    { name: "Intern", color: "#3B82F6", type: "Volunteer Type" },
+    { name: "Outside Volunteer", color: "#F59E0B", type: "Volunteer Type" },
+    { name: "2+ More", color: "#10B981", type: "Event" },
+  ]);
+
+  const tagIds = seededTags.map((tag) => tag._id);
 
   await Volunteer.insertMany([
     {
       firstName: "Jane",
       lastName: "Doe",
       email: "jane@example.com",
       phoneNumber: "555-123-4567",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "John",
       lastName: "Smith",
       email: "john@example.com",
       phoneNumber: "555-987-6543",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Alice",
       lastName: "Johnson",
       email: "alice@example.com",
       phoneNumber: "555-222-3344",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Michael",
       lastName: "Brown",
       email: "michael@example.com",
       phoneNumber: "555-333-7788",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Sarah",
       lastName: "Lee",
       email: "sarah@example.com",
       phoneNumber: "555-444-9911",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "David",
       lastName: "Kim",
       email: "david@example.com",
       phoneNumber: "555-555-1212",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Emily",
       lastName: "Martinez",
       email: "emily@example.com",
       phoneNumber: "555-666-3434",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Chris",
       lastName: "Wilson",
       email: "chris@example.com",
       phoneNumber: "555-777-5656",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Olivia",
       lastName: "Nguyen",
       email: "olivia@example.com",
       phoneNumber: "555-888-7878",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
     {
       firstName: "Daniel",
       lastName: "Anderson",
       email: "daniel@example.com",
       phoneNumber: "555-999-9090",
-      tags: ["Intern", "Outside Volunteer", "2+ More"],
+      tags: tagIds,
     },
   ]);
 
-  console.log("Volunteers seeded");
+  console.info("Volunteers seeded");
   process.exit(0);
 }
 

backend/src/validators/volunteerValidator.ts

@@ -44,12 +44,21 @@ const makePhoneValidator = (path = "phoneNumber") =>
   body(path)
     .exists()
     .withMessage("phone is required")
-    .bail() // What kind of phone number do we want to enforce?
-    .isMobilePhone("any")
-    .withMessage("phoneNumber must be a valid mobile phone number")
+    .bail()
+    .custom((value: string) => {
+      const digitsOnly = value.replace(/\D/g, "");
+      if (digitsOnly.length !== 10) {
+        throw new Error("phoneNumber must be a valid phone number");
+      }
+      return true;
+    })
     .customSanitizer((value: string) => value.replace(/\D/g, ""));
 
 const tagsValidator = () => body("tags").optional().isArray();
+const statusTagsValidator = () => body("statusTags").optional().isArray();
+const volunteerTypeTagsValidator = () => body("volunteerTypeTags").optional().isArray();
+const eventsValidator = () => body("events").optional().isArray();
+const additionalNotesValidator = () => body("additionalNotes").optional().isString();
 
 const batchUploadVolunteersValidator = () =>
   body("volunteers")
@@ -74,6 +83,23 @@ export const createVolunteerValidator = [
   makeEmailValidator(),
   makePhoneValidator(),
   tagsValidator(),
+  statusTagsValidator(),
+  volunteerTypeTagsValidator(),
+  eventsValidator(),
+  additionalNotesValidator(),
+];
+
+export const updateVolunteerValidator = [
+  makeParamIDValidator(),
+  makeFirstNameValidator(),
+  makeLastNameValidator(),
+  makeEmailValidator(),
+  makePhoneValidator(),
+  tagsValidator(),
+  statusTagsValidator(),
+  volunteerTypeTagsValidator(),
+  eventsValidator(),
+  additionalNotesValidator(),
 ];
 
 export const updateVolunteerContactValidator = [

frontend/src/app/volunteers/page.tsx

@@ -3,6 +3,7 @@
 import { Volunteer } from "@/types/volunteer";
 import { fetchVolunteers } from "@/app/api/volunteer";
 import VolunteerTable from "@/components/VolunteerTable";
+import VolunteerProfileModal from "@/components/VolunteerProfileModal";
 import TitleBar from "@/components/TitleBar";
 import SearchBar from "@/components/SearchBar";
 import PageBar from "@/components/PageBar";
@@ -22,8 +23,9 @@ export default function Page() {
 
   // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
-  const [totalItems, setTotalItems] = useState(0);
   const [showImportSuccess, setShowImportSuccess] = useState(false);
+  const [selectedVolunteer, setSelectedVolunteer] = useState<Volunteer | null>(null);
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
   const itemsPerPage = 6;
 
   // Fetch volunteers once on mount
@@ -75,6 +77,10 @@ export default function Page() {
     setShowImportSuccess(true);
   };
 
+  const handleSheetClose = () => {
+    setIsSheetOpen(false);
+  };
+
   return (
     <Sidebar>
       <div className={styles.page}>
@@ -107,14 +113,33 @@ export default function Page() {
             selectedVolunteerType={selectedVolunteerType}
             setSelectedVolunteerType={setSelectedVolunteerType}
           />
-          <VolunteerTable volunteers={displayedVolunteers} />
+          <VolunteerTable
+            volunteers={displayedVolunteers}
+            onVolunteerSelect={(volunteer) => {
+              setSelectedVolunteer(volunteer);
+              setIsSheetOpen(true);
+            }}
+          />
           <PageBar
             totalItems={filteredVolunteers.length}
             currentPage={currentPage}
             itemsPerPage={itemsPerPage}
             onPageChange={setCurrentPage}
           />
         </main>
+        <VolunteerProfileModal
+          volunteer={selectedVolunteer}
+          isOpen={isSheetOpen}
+          onClose={handleSheetClose}
+          onVolunteerUpdated={(updatedVolunteer) => {
+            setSelectedVolunteer(updatedVolunteer);
+            setVolunteers((prev) =>
+              prev.map((volunteer) =>
+                volunteer._id === updatedVolunteer._id ? updatedVolunteer : volunteer,
+              ),
+            );
+          }}
+        />
       </div>
     </Sidebar>
   );