feat(admin): support marking paid

Author: godd9170

app/components/LeaderBoard/index.tsx

@@ -22,14 +22,15 @@ export default function LeaderBoard({
           {leaders.map((leader) => (
             <tr key={leader.submissionId}>
               <th>{leader.ranking}</th>
+              <td>{leader.username}</td>
               <td>
                 <Link
+                  className="underline"
                   to={`/sheets/${sheet.id}/submissions/${leader.submissionId}`}
                 >
-                  {leader.username}
+                  {leader.correct}
                 </Link>
               </td>
-              <td>{leader.correct}</td>
             </tr>
           ))}
         </tbody>

app/components/SubmissionTable/index.tsx

@@ -4,9 +4,13 @@ import {
 } from "~/models/submission.server";
 
 function Mark({ selection }: { selection: SelectionWithPropositionOption }) {
-  if (!selection.option.proposition.answerId) return null;
-  if (selection.option.proposition.answerId === selection.optionId) return "✅";
-  return "❌";
+  let color = "text-base";
+  if (!selection.option.proposition.answerId) color = "text-base";
+  else if (selection.option.proposition.answerId === selection.optionId)
+    color = "text-success";
+  else color = "text-error";
+
+  return <span className={color}>{selection.option.shortTitle}</span>;
 }
 
 export default function SubmissionTable({
@@ -29,7 +33,6 @@ export default function SubmissionTable({
             <tr>
               <td>{selection.option.proposition.shortTitle}</td>
               <td>
-                {selection.option.shortTitle}
                 <Mark selection={selection} />
               </td>
             </tr>

app/routes/sheets.$sheetId._index.tsx

@@ -28,5 +28,10 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 export default function Sheet() {
   const { sheet, leaders } = useLoaderData<typeof loader>();
   if (sheet.status === "DRAFT") return <p>Sheets not ready</p>;
-  return <LeaderBoard sheet={sheet} leaders={leaders} />;
+
+  return (
+    <>
+      <LeaderBoard sheet={sheet} leaders={leaders} />
+    </>
+  );
 }

app/routes/sheets.$sheetId.admin/components/SheetStats/SubmissionRow.tsx app/routes/sheets.$sheetId.admin/components/Submissions/SubmissionRow.tsx

@@ -7,7 +7,7 @@ import StatusSelector from "./components/StatusSelector";
 import EditSheet from "./components/EditSheet";
 import MarkSheet from "./components/MarkSheet";
 import { readSailor } from "~/models/sailor.server";
-import SheetStats from "./components/SheetStats";
+import Submissions from "./components/Submissions";
 import { readSheetSubmissions } from "~/models/submission.server";
 
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
@@ -29,8 +29,13 @@ export default function SheetEdit() {
     <>
       <StatusSelector sheet={sheet} />
       {sheet.status === "DRAFT" && <EditSheet sheet={sheet} />}
-      {sheet.status === "OPEN" && <SheetStats submissions={submissions} />}
-      {sheet.status === "CLOSED" && <MarkSheet sheet={sheet} />}
+      {sheet.status === "OPEN" && <Submissions submissions={submissions} />}
+      {sheet.status === "CLOSED" && (
+        <>
+          <MarkSheet sheet={sheet} />
+          <Submissions submissions={submissions} />
+        </>
+      )}
     </>
   );
 }

app/routes/sheets.$sheetId.admin/components/SheetStats/index.tsx app/routes/sheets.$sheetId.admin/components/Submissions/index.tsx

@@ -18,26 +18,30 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   invariant(!!submissionId, `params.submissionId is required`);
 
   const submission = await readSubmission(submissionId);
-  return json({ submission });
+  return json({ sailorId, submission });
 };
 
 export default function Submission() {
-  const { submission } = useLoaderData<typeof loader>();
+  const { sailorId, submission } = useLoaderData<typeof loader>();
+  const showPaymentRequired =
+    submission?.sailorId === sailorId && !submission?.isPaid;
   return (
     <>
       <h1 className="text-center font-bold pb-2">
         {submission?.sailor.username}
       </h1>
-      <div role="alert" className="alert alert-info">
-        <span>
-          Please e-transfer $10 to [email protected] or your submission will
-          not be counted!
-        </span>
-      </div>
+      {showPaymentRequired && (
+        <div role="alert" className="alert alert-info">
+          <span>
+            Please e-transfer $10 to [email protected] or your submission
+            will not be counted!
+          </span>
+        </div>
+      )}
+      <SubmissionTable submission={submission} />
       <h2 className="text-center font-bold pt-3">
         Tie Breaker: {submission?.tieBreaker}
       </h2>
-      <SubmissionTable submission={submission} />
     </>
   );
 }