Review form popup and Saving Draft Functionality

apps/web/package.json

@@ -26,6 +26,7 @@
     "@trpc/server": "11.8.0",
     "bad-words": "^4.0.0",
     "dayjs": "^1.11.13",
+    "echarts": "^6.0.0",
     "fuse.js": "^7.0.0",
     "geist": "^1.3.0",
     "lucide-react": "^0.436.0",

apps/web/src/app/(pages)/(protected)/profile/page.tsx

@@ -13,6 +13,7 @@ import ProfileCardHeader from "~/app/_components/profile/profile-card-header";
 import ProfileTabs from "~/app/_components/profile/profile-tabs";
 import { ReviewCard } from "~/app/_components/reviews/review-card";
 import { api } from "~/trpc/react";
+import { DraftReviewCard } from "~/app/_components/reviews/draft-review-card";
 
 export default function Profile() {
   const searchParams = useSearchParams();
@@ -138,15 +139,29 @@ export default function Profile() {
               </div>
             </div>
 
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-4 pb-4">
               {reviews.length > 0 &&
-                reviews.map((review) => (
-                  <ReviewCard
-                    key={review.id}
-                    reviewObj={review}
-                    className="w-[100%]"
-                  />
-                ))}
+                reviews
+                  .sort(
+                    (a, b) =>
+                      (a.status === "DRAFT" ? -1 : 1) -
+                      (b.status === "DRAFT" ? -1 : 1),
+                  )
+                  .map((review) =>
+                    review.status === "DRAFT" ? (
+                      <DraftReviewCard
+                        key={review.id}
+                        reviewObj={review}
+                        className="w-[100%]"
+                      />
+                    ) : (
+                      <ReviewCard
+                        key={review.id}
+                        reviewObj={review}
+                        className="w-[100%]"
+                      />
+                    ),
+                  )}
             </div>
           </section>
         )}

apps/web/src/app/(pages)/(protected)/review-form/page.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { Filter } from "bad-words";
 import { useForm } from "react-hook-form";
 
 import { Button } from "@cooper/ui/button";
@@ -13,10 +14,10 @@ import {
   InterviewSection,
   ReviewSection,
 } from "~/app/_components/form/sections";
+import Popup from "~/app/_components/form/sections/popup";
 import { z } from "zod";
 import { useCustomToast } from "@cooper/ui";
-import { WorkEnvironment, WorkTerm, JobType } from "@cooper/db/schema";
-import { Filter } from "bad-words";
+import { WorkEnvironment, WorkTerm, JobType, Status } from "@cooper/db/schema";
 import dayjs from "dayjs";
 import { Form } from "node_modules/@cooper/ui/src/form";
 import { PaySection } from "~/app/_components/form/sections/pay-section";
@@ -91,14 +92,16 @@ const formSchema = z.object({
     })
     .min(1, {
       message: "You need to enter a company.",
-    }),
+    })
+    .nullable(),
   roleName: z
     .string({
       required_error: "You need to enter a company.",
     })
     .min(1, {
       message: "You need to enter a company.",
-    }),
+    })
+    .nullable(),
   locationId: z.string().min(1, {
     message: "You need to select a location.",
   }),
@@ -133,12 +136,11 @@ const formSchema = z.object({
     })
     .transform((x) => x === "true")
     .pipe(z.boolean()),
-  federalHolidays: z.boolean().default(false),
-  freeLunch: z.boolean().default(false),
-  travelBenefits: z.boolean().default(false),
-  freeMerch: z.boolean().default(false),
-  snackBar: z.boolean().default(false),
-  employeeLounge: z.boolean().default(false),
+  federalHolidays: z.boolean(),
+  freeLunch: z.boolean(),
+  travelBenefits: z.boolean(),
+  freeMerch: z.boolean(),
+  snackBar: z.boolean(),
   otherBenefits: z.string().nullable(),
 });
 
@@ -160,6 +162,7 @@ export default function ReviewForm() {
   const { toast } = useCustomToast();
   const [roleId, setRoleId] = useState<string>("");
   const [companyId, setCompanyId] = useState<string>("");
+  const [showModal, setShowModal] = useState(false);
 
   const form = useForm<z.infer<ReviewFormType>>({
     resolver: zodResolver(formSchema),
@@ -181,17 +184,31 @@ export default function ReviewForm() {
       pto: undefined,
       federalHolidays: false,
       freeLunch: false,
+      travelBenefits: false,
       freeMerch: false,
+      snackBar: false,
       otherBenefits: "",
       roleName: "",
       companyName: "",
     },
   });
-
   // Watch form values and update roleId and companyId
   const roleName = form.watch("roleName");
   const companyName = form.watch("companyName");
 
+  const isDirty = form.formState.isDirty;
+  const isDirtyRef = useRef(isDirty);
+
+  useEffect(() => {
+    isDirtyRef.current = isDirty;
+  }, [isDirty]);
+
+  useEffect(() => {
+    form.reset();
+    setShowModal(false);
+    isDirtyRef.current = false;
+  }, [form]);
+
   useEffect(() => {
     if (roleName) {
       setRoleId(roleName);
@@ -208,6 +225,21 @@ export default function ReviewForm() {
     }
   }, [companyName]);
 
+  useEffect(() => {
+    const handleLeave: EventListener = () => {
+      if (isDirtyRef.current) {
+        setShowModal(true);
+      } else {
+        router.push("/roles");
+      }
+    };
+    window.addEventListener("review-form:leave-attempt", handleLeave);
+
+    return () => {
+      window.removeEventListener("review-form:leave-attempt", handleLeave);
+    };
+  }, [router]);
+
   const profileId = profile?.id;
 
   const reviews = api.review.getByProfile.useQuery(
@@ -225,6 +257,7 @@ export default function ReviewForm() {
 
     const reviewsForCurrentTerm = reviews.data.filter(
       (review) =>
+        review.status === Status.PUBLISHED &&
         String(review.workTerm) === currentTerm &&
         review.workYear === Number(currentYear),
     );
@@ -241,6 +274,16 @@ export default function ReviewForm() {
     },
   });
 
+  const draftMutation = api.review.saveDraft.useMutation({
+    onSuccess: () => {
+      router.push("/roles");
+      setShowModal(false);
+    },
+    onError: (error) => {
+      toast.error(error.message || "Failed to save draft. Please try again.");
+    },
+  });
+
   async function onSubmit(values: z.infer<ReviewFormType>) {
     try {
       await mutation.mutateAsync({
@@ -250,6 +293,7 @@ export default function ReviewForm() {
         ...values,
         interviewRating: 1,
         reviewHeadline: "",
+        status: Status.PUBLISHED,
       });
     } catch (error) {
       // Error is already handled by onError callback
@@ -258,13 +302,65 @@ export default function ReviewForm() {
   }
 
   if (!sessionLoading && !profileLoading && (!session || !profile)) {
-    router.push("/");
+    router.push("/roles");
   }
 
   if (!session || !profile) {
     return null;
   }
 
+  const discardDraft = () => {
+    router.push("/roles");
+  };
+
+  const normalizeRadios = (v: unknown) =>
+    v === true || v === "yes" ? true : v === false || v === "no" ? false : null;
+
+  async function onSaveDraft() {
+    try {
+      const values = form.getValues();
+
+      const draftPayload: Record<string, unknown> = {
+        roleId: roleId,
+        profileId: profileId,
+        companyId: companyId,
+        workTerm: values.workTerm,
+        workYear: values.workYear,
+        overallRating: values.overallRating,
+        cultureRating: values.cultureRating,
+        supervisorRating: values.supervisorRating,
+        interviewRating: 1,
+        interviewDifficulty: +values.interviewDifficulty || null,
+        interviewReview: values.interviewReview ?? null,
+        reviewHeadline: "",
+        textReview: values.textReview || null,
+        locationId: values.locationId || null,
+        jobType: values.jobType,
+        hourlyPay: values.hourlyPay === "" ? null : values.hourlyPay,
+        workEnvironment: values.workEnvironment,
+        drugTest: normalizeRadios(values.drugTest),
+        pto: normalizeRadios(values.pto),
+        overtimeNormal: normalizeRadios(values.overtimeNormal),
+        federalHolidays: values.federalHolidays || null,
+        freeLunch: values.freeLunch || null,
+        travelBenefits: values.travelBenefits || null,
+        freeMerch: values.freeMerch || null,
+        snackBar: values.snackBar || null,
+        otherBenefits: values.otherBenefits ?? null,
+        status: Status.DRAFT,
+      };
+
+      await draftMutation.mutateAsync(
+        draftPayload as Parameters<typeof draftMutation.mutateAsync>[0],
+      );
+
+      form.reset(values);
+      isDirtyRef.current = false;
+      toast.success("This draft has been saved.");
+    } catch (error) {
+      console.error("Draft save failed:", error);
+    }
+  }
   if (
     session.user.role &&
     session.user.role !== UserRole.STUDENT &&
@@ -283,7 +379,9 @@ export default function ReviewForm() {
 
   return (
     <Form {...form}>
-      <div className="flex h-screen w-full flex-col items-center justify-center overflow-auto bg-white md:flex-row">
+      <div
+        className={`${showModal ? "pointer-events-none" : ""} flex h-screen w-full flex-col items-center justify-center overflow-auto bg-white md:flex-row`}
+      >
         <div className="justify-left mt-4 flex h-full w-[65%] flex-col pr-3.5 pt-10">
           <div className="text-cooper-gray-550 text-lg">Basic information</div>
           <div className="flex w-full flex-wrap gap-10 pb-12 xl:flex-nowrap">
@@ -317,30 +415,56 @@ export default function ReviewForm() {
               <div className="flex flex-wrap gap-10 overflow-auto pb-10 xl:flex-nowrap">
                 <ReviewSection />
               </div>
-
-              {/* Submit Button */}
-              <div className="flex justify-end pb-12 pt-6">
-                <Button
-                  type="button"
-                  onClick={async () => {
-                    const isValid = await form.trigger();
-                    if (!isValid) {
-                      toast.error("Please fill in all required fields.");
-                      return;
-                    }
-                    await form.handleSubmit(onSubmit)();
-                  }}
-                  disabled={mutation.isPending}
-                  className="bg-cooper-gray-550 hover:bg-cooper-gray-600 rounded-lg border-none px-8 py-3 text-lg font-semibold text-white"
-                >
-                  {mutation.isPending ? "Submitting..." : "Submit review"}
-                </Button>
+              <div className="flex gap-2 justify-end">
+                {/* Save Draft Button */}
+                <div className="pb-12 pt-6">
+                  <Button
+                    type="button"
+                    onClick={onSaveDraft}
+                    disabled={mutation.isPending || draftMutation.isPending}
+                    className="bg-white hover:bg-cooper-gray-600
+                  rounded-lg border border-cooper-gray-150 2-253 px-8 py-3 text-lg font-semibold
+                  text-[#151515]"
+                  >
+                    {draftMutation.isPending ? "Saving draft..." : "Save draft"}
+                  </Button>
+                </div>
+                {/* Submit Button */}
+                <div className="pb-12 pt-6">
+                  <Button
+                    type="button"
+                    onClick={async () => {
+                      const isValid = await form.trigger();
+                      if (!isValid) {
+                        toast.error("Please fill in all required fields.");
+                        return;
+                      }
+                      await form.handleSubmit(onSubmit)();
+                    }}
+                    disabled={mutation.isPending || draftMutation.isPending}
+                    className="bg-cooper-gray-550 hover:bg-cooper-gray-600 rounded-lg border-none px-8 py-3 text-lg font-semibold text-white"
+                  >
+                    {mutation.isPending ? "Submitting..." : "Submit review"}
+                  </Button>
+                </div>
               </div>
             </div>
           ) : (
             <div>You already submitted too many reviews for this term</div>
           )}
         </div>
+        {isDirty && showModal && (
+          <div className="pointer-events-none fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-xs">
+            <div className="pointer-events-auto">
+              <Popup
+                showModal={showModal}
+                onCancel={() => setShowModal(false)}
+                onDiscard={discardDraft}
+                onSave={onSaveDraft}
+              />
+            </div>
+          </div>
+        )}
       </div>
     </Form>
   );

apps/web/src/app/_components/admin/dashboard-table.tsx

@@ -22,7 +22,7 @@
   category: DashboardCategory;
   title: string;
   subtitle?: string;
-  description?: string;
+  description?: string | null;
   company?: string;
   location?: string | null;
   createdAt: Date;
@@ -603,7 +603,7 @@
 
       return result;
     },
     [activeTab, searchQuery],
   );
 
   const recent = useProcessedItems({

apps/web/src/app/_components/companies/company-reviews.tsx

@@ -35,8 +35,8 @@ export function CompanyReview({ companyObj }: CompanyReviewProps) {
 
   const averages = api.review.list
     .useQuery({})
-    .data?.filter((r) => r.overallRating != 0)
-    .map((review) => review.overallRating);
+    .data?.map((review) => review.overallRating)
+    .filter((rating): rating is number => rating != null && rating !== 0);
   const cooperAvg: number =
     Math.round(
       ((averages ?? []).reduce((accumulator, currentValue) => {