feat: ability to change status based on scores

src/components/ApplicationsTable.tsx

@@ -143,6 +143,31 @@ const columns: ColumnDef<ApplicationForReview>[] = [
     enableColumnFilter: true,
     enableSorting: true,
   },
+  {
+    accessorKey: "avgScore",
+    filterFn: (row, columnId, value) => {
+      const rowValue = row.getValue(columnId);
+      return rowValue === Number(value);
+    },
+    header: ({ column }) => {
+      return (
+        <Button
+          className="text-left"
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Average Score
+          <ArrowUpDown className="pl-2 h-4 w-6" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => {
+      const score = row.getValue<number>("avgScore");
+      return <div className="pl-4 py-2">{score.toFixed(2)}</div>;
+    },
+    enableColumnFilter: true,
+    enableSorting: true,
+  },
   {
     accessorKey: "DH11ApplicationId",
     header: () => <div className="float-right">DH XI Application</div>,

src/components/MultiRangeSlider.tsx

@@ -0,0 +1,69 @@
+import React, { useState, useCallback, useEffect } from "react";
+
+interface MultiRangeSliderProps {
+  min: number;
+  max: number;
+  onChange: (min: number, max: number) => void;
+}
+
+const MultiRangeSlider: React.FC<MultiRangeSliderProps> = ({
+  min,
+  max,
+  onChange,
+}) => {
+  const [minVal, setMinVal] = useState(min);
+  const [maxVal, setMaxVal] = useState(max);
+
+  // Convert to percentage
+  const getPercent = useCallback(
+    (value: number) => Math.round(((value - min) / (max - min)) * 100),
+    [min, max]
+  );
+
+  // Update min and max values
+  useEffect(() => {
+    onChange(minVal, maxVal);
+  }, [minVal, maxVal, onChange]);
+
+  return (
+    <div className="relative w-full">
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={0.1}
+        value={minVal}
+        onChange={(event) => {
+          const value = Math.min(Number(event.target.value), maxVal - 1);
+          setMinVal(value);
+        }}
+        className=" w-full h-1 bg-purple-400 appearance-none"
+        style={{ zIndex: minVal > max - 100 ? "5" : undefined }}
+      />
+      <input
+        type="range"
+        min={min}
+        step={0.1}
+        max={max}
+        value={maxVal}
+        onChange={(event) => {
+          const value = Math.max(Number(event.target.value), minVal + 1);
+          setMaxVal(value);
+        }}
+        className="w-full h-1 bg-purple-400 appearance-none"
+      />
+
+      <div className="relative w-full h-1 bg-gray-300">
+        <div
+          className="absolute h-1 bg-blue-500"
+          style={{
+            left: `${getPercent(minVal)}%`,
+            width: `${getPercent(maxVal) - getPercent(minVal)}%`,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MultiRangeSlider;

src/pages/admin/grade.tsx

@@ -1,10 +1,21 @@
 import type { GetServerSidePropsContext, NextPage } from "next";
 import { getServerAuthSession } from "../../server/common/get-server-auth-session";
 import Head from "next/head";
-import { Role, Status } from "@prisma/client";
+import { Prisma, Role, Status } from "@prisma/client";
 import { trpc } from "../../utils/trpc";
 import { ApplicationsTable } from "../../components/ApplicationsTable";
 import Drawer from "../../components/Drawer";
+import { useState } from "react";
+
+import MultiRangeSlider from "../../components/MultiRangeSlider";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../../components/DropdownMenu";
+import { Button } from "../../components/Button";
+import { ChevronDown } from "lucide-react";
 
 const GradingPortal: NextPage = () => {
   const { data: applications } = trpc.reviewer.getApplications.useQuery();
@@ -19,6 +30,37 @@ const GradingPortal: NextPage = () => {
     return val.status != Status.IN_REVIEW ? acc + val.count : acc;
   }, 0);
 
+  const [startRange, setStartRange] = useState(0);
+  const [endRange, setEndRange] = useState(17);
+  const statusTypes = [
+    Status.ACCEPTED,
+    Status.REJECTED,
+    Status.WAITLISTED,
+    Status.IN_REVIEW,
+  ];
+  const [selectedStatus, setSelectedStatus] = useState<
+    (typeof statusTypes)[number] | null
+  >(null);
+
+  // based on the ranges, find all applications that fall avgScore within the range
+  const filteredApplications = applications?.filter((application) => {
+    return (
+      application.avgScore >= startRange && application.avgScore <= endRange
+    );
+  });
+
+  const utils = trpc.useUtils();
+
+  const {
+    mutate: updateApplicationStatusByScoreRange,
+    isLoading,
+    isSuccess,
+  } = trpc.reviewer.updateApplicationStatusByScoreRange.useMutation({
+    onSettled(data, error, variables, context) {
+      utils.invalidate();
+    },
+  });
+
   return (
     <>
       <Head>
@@ -34,22 +76,85 @@ const GradingPortal: NextPage = () => {
           <h1 className="text-2xl font-semibold leading-tight text-black dark:text-white sm:text-3xl lg:text-5xl 2xl:text-6xl">
             Applications
           </h1>
-          <div className="py-4">
-            <div className="font-bold">
-              Applications Decisioned: {numberDecisioned} /{" "}
-              {applications?.length} <br />
+          <div className="flex justify-between">
+            <div className="py-4">
+              <div className="font-bold">
+                Applications Decisioned: {numberDecisioned} /{" "}
+                {applications?.length} <br />
+              </div>
+              <div className="font-bold">
+                Total Grades Given: {numberGrades}
+                <br />
+              </div>
+              {statusCount?.map(({ status, count }, i) => {
+                return (
+                  <div key={i}>
+                    {status}: {count} <br />
+                  </div>
+                );
+              })}
             </div>
-            <div className="font-bold">
-              Total Grades Given: {numberGrades}
-              <br />
-            </div>
-            {statusCount?.map(({ status, count }, i) => {
-              return (
-                <div key={i}>
-                  {status}: {count} <br />
+            <div>
+              <h2>Mass Status Updator</h2>
+              <div className="w-64 mt-4">
+                <MultiRangeSlider
+                  min={0}
+                  max={17}
+                  onChange={(min, max) => {
+                    setStartRange(min);
+                    setEndRange(max);
+                  }}
+                />
+                <div>
+                  Selected Range: {startRange.toFixed(1)} -{" "}
+                  {endRange.toFixed(1)}
+                </div>
+                This applies to {filteredApplications?.length} applications
+                <div className="flex flex-col gap-2 mt-2">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        className="justify-between w-36"
+                        variant="outline"
+                      >
+                        <span className="sr-only">Select status</span>
+                        <div>{selectedStatus || "Select Status"}</div>
+                        <ChevronDown className="pl-2 h-4 w-6 float-right" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {statusTypes.map((status) => (
+                        <DropdownMenuItem
+                          key={status}
+                          className="capitalize"
+                          onClick={() => setSelectedStatus(status)}
+                        >
+                          {status}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+
+                  <Button
+                    onClick={() => {
+                      console.log(
+                        `Applying status ${selectedStatus} to applications between ${startRange} and ${endRange}`
+                      );
+                      if (selectedStatus) {
+                        updateApplicationStatusByScoreRange({
+                          minRange: startRange,
+                          maxRange: endRange,
+                          status: selectedStatus,
+                        });
+                      }
+                    }}
+                    disabled={!selectedStatus || isLoading}
+                  >
+                    {isLoading ? "Applying..." : "Apply Status Change"}
+                  </Button>
                 </div>
-              );
-            })}
+              </div>
+            </div>
           </div>
           <ApplicationsTable applications={applications ?? []} />
         </main>

src/pages/dashboard.tsx

@@ -452,7 +452,12 @@ const WalkIns: React.FC = () => {
 const Dashboard: NextPage<
   InferGetServerSidePropsType<typeof getServerSideProps>
 > = (props) => {
-  const { data: status, isSuccess } = trpc.application.status.useQuery();
+  // const { data: status, isSuccess } = trpc.application.status.useQuery();
+  // FIXME: After RSVP is implemented, uncomment this and use the correct stauts
+
+  const status = Status.IN_REVIEW;
+
+  // console.log(isSuccess, status);
 
   const { data: session } = useSession();
 
@@ -465,7 +470,9 @@ const Dashboard: NextPage<
     [Status.CHECKED_IN]: <CheckedIn />,
   };
 
-  const statusToUse = isSuccess ? status : props.status;
+  // FIXME: After RSVP is implemented, uncomment this and use the correct stauts
+  // const statusToUse = isSuccess ? status : props.status;
+  const statusToUse = status;
 
   return (
     <>

src/server/router/application.ts

@@ -172,7 +172,8 @@ export const applicationRouter = router({
         throw new TRPCError({ code: "NOT_FOUND" });
       }
 
-      return user.status;
+      // return user.DH11Application.status; // TODO: Enable this after RSVP consent is implemented
+      return Status.IN_REVIEW;
     }),
   qr: protectedProcedure.query(async ({ ctx }) => {
     const user = await ctx.prisma.user.findFirst({