Use Supabase views for review queues and split reviews page into new vs. existing edits

app/api/resource-edits/methods.ts

@@ -1,7 +1,8 @@
 import type { SupabaseClient } from "@supabase/supabase-js";
 import type {
-  EditReviewStatus,
+  ResourceChangeLogEntry,
   ResourceEdit,
+  ResourceEditCount,
   ResourceEditQueueRow,
 } from "~/types/ResourceEdit";
 import type { ResourceEntry } from "~/types/ResourceEntry";
@@ -38,20 +39,62 @@ export const getResourceEditAPI = (client: SupabaseClient) => {
 
       return (data ?? []) as ResourceEdit[];
     },
-    getList: async (params: { review_status?: EditReviewStatus } = {}) => {
-      let query = table.select("*").order("submitted_at", { ascending: false });
+    /** Count of PENDING edits per resource — flags resources with multiple
+     * competing proposed edits. Backed by `resource_edit_counts`. */
+    getEditCounts: async () => {
+      const { data, error } = await client
+        .from("resource_edit_counts")
+        .select("*");
 
-      if (params.review_status) {
-        query = query.eq("review_status", params.review_status);
+      if (error) {
+        throw error;
       }
 
-      const { data, error } = await query;
+      return (data ?? []) as ResourceEditCount[];
+    },
+    /** Full history of decided (APPROVED/REJECTED) edits, most recent first
+     * within each resource. Backed by `resource_change_log`. */
+    getChangeLog: async () => {
+      const { data, error } = await client
+        .from("resource_change_log")
+        .select("*");
 
       if (error) {
         throw error;
       }
 
-      return (data ?? []) as ResourceEdit[];
+      return (data ?? []) as ResourceChangeLogEntry[];
+    },
+    getChangeLogForResource: async (resourceId: number) => {
+      const { data, error } = await client
+        .from("resource_change_log")
+        .select("*")
+        .eq("resource_id", resourceId)
+        .order("reviewed_at", { ascending: false });
+
+      if (error) {
+        throw error;
+      }
+
+      return (data ?? []) as ResourceChangeLogEntry[];
+    },
+
+    getCounts: async () => {
+      const [total, pending] = await Promise.all([
+        table.select("id", { count: "exact", head: true }),
+        table
+          .select("id", { count: "exact", head: true })
+          .eq("review_status", "PENDING"),
+      ]);
+
+      if (total.error) {
+        throw total.error;
+      }
+      if (pending.error) {
+        throw pending.error;
+      }
+
+      return { total: total.count ?? 0, pending: pending.count ?? 0 };
     },
     getById: async (id: number) => {
       const { data, error } = await table

app/routes/authenticated/_layout.tsx

@@ -1,7 +1,7 @@
 import { Dashboard, Logout, RateReview } from "@mui/icons-material";
 import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { Link, NavLink, Outlet } from "react-router";
+import { Form, NavLink, Outlet } from "react-router";
 import phlasklogo from "~/assets/PHLASK_v2.svg";
 import { ThemeToggle } from "~/components/ThemeToggle";
 import { WaveDivider } from "~/components/WaveDivider";
@@ -168,30 +168,37 @@ export default function DashboardLayout() {
               </Box>
               <ThemeToggle />
             </Box>
-            <Box
-              component={Link}
-              to="/logout"
-              sx={(theme) => ({
-                display: "flex",
-                alignItems: "center",
-                gap: 1.25,
-                borderRadius: 3,
-                px: 2,
-                py: 1.25,
-                fontSize: "0.875rem",
-                fontWeight: 500,
-                textDecoration: "none",
-                color: navy[600],
-                transition: "background-color 0.2s ease",
-                "&:hover": { bgcolor: brand[50] },
-                ...theme.applyStyles("dark", {
-                  color: `${brand[100]}cc`,
-                  "&:hover": { bgcolor: navy[800] },
-                }),
-              })}
-            >
-              <Logout fontSize="small" />
-              Logout
+            <Box component={Form} method="post" action="/logout">
+              <Box
+                component="button"
+                type="submit"
+                sx={(theme) => ({
+                  display: "flex",
+                  width: "100%",
+                  alignItems: "center",
+                  gap: 1.25,
+                  borderRadius: 3,
+                  border: "none",
+                  bgcolor: "transparent",
+                  px: 2,
+                  py: 1.25,
+                  fontSize: "0.875rem",
+                  fontFamily: "inherit",
+                  fontWeight: 500,
+                  textAlign: "left",
+                  cursor: "pointer",
+                  color: navy[600],
+                  transition: "background-color 0.2s ease",
+                  "&:hover": { bgcolor: brand[50] },
+                  ...theme.applyStyles("dark", {
+                    color: `${brand[100]}cc`,
+                    "&:hover": { bgcolor: navy[800] },
+                  }),
+                })}
+              >
+                <Logout fontSize="small" />
+                Logout
+              </Box>
             </Box>
           </Box>
         </Box>

app/routes/authenticated/dashboard.tsx

@@ -29,37 +29,53 @@ const RESOURCE_TYPES: ResourceType[] = ["WATER", "FOOD", "FORAGE", "BATHROOM"];
 export const loader: LoaderFunction = async ({ request }) => {
   const { client } = getDatabaseClient(request);
   const editAPI = getResourceEditAPI(client);
-  const edits = await editAPI.getList();
+
+  const [counts, pendingEdits, newResources, changeLog] = await Promise.all([
+    editAPI.getCounts(),
+    editAPI.getEditsQueue(),
+    editAPI.getNewResourcesQueue(),
+    editAPI.getChangeLog(),
+  ]);
+
+  const pending = [...pendingEdits, ...newResources];
 
   const submitterCounts = new Map<string, number>();
   const approverCounts = new Map<string, number>();
   const outstandingByType = new Map<string, number>();
-  let pendingCount = 0;
 
-  for (const edit of edits) {
-    const creator = edit.creator || "Unknown";
-    submitterCounts.set(creator, (submitterCounts.get(creator) ?? 0) + 1);
-
-    if (edit.review_status === "PENDING") {
-      pendingCount += 1;
-      outstandingByType.set(
-        edit.resource_type,
-        (outstandingByType.get(edit.resource_type) ?? 0) + 1,
-      );
+  const countSubmitter = (submittedBy: string | null) => {
+    if (!submittedBy) {
+      return;
     }
+    submitterCounts.set(
+      submittedBy,
+      (submitterCounts.get(submittedBy) ?? 0) + 1,
+    );
+  };
+
+  for (const edit of pending) {
+    countSubmitter(edit.submitted_by);
+    outstandingByType.set(
+      edit.resource_type,
+      (outstandingByType.get(edit.resource_type) ?? 0) + 1,
+    );
+  }
+
+  for (const entry of changeLog) {
+    countSubmitter(entry.submitted_by);
 
-    if (edit.review_status === "APPROVED" && edit.reviewed_by) {
+    if (entry.review_status === "APPROVED" && entry.reviewed_by) {
       approverCounts.set(
-        edit.reviewed_by,
-        (approverCounts.get(edit.reviewed_by) ?? 0) + 1,
+        entry.reviewed_by,
+        (approverCounts.get(entry.reviewed_by) ?? 0) + 1,
       );
     }
   }
 
   const topSubmitters = [...submitterCounts.entries()]
     .sort((a, b) => b[1] - a[1])
     .slice(0, 5)
-    .map(([creator, count]) => ({ creator, count }));
+    .map(([submitter, count]) => ({ submitter, count }));
 
   const topApprovers = [...approverCounts.entries()]
     .sort((a, b) => b[1] - a[1])
@@ -72,8 +88,8 @@ export const loader: LoaderFunction = async ({ request }) => {
   }));
 
   return {
-    totalEdits: edits.length,
-    pendingCount,
+    totalEdits: counts.total,
+    pendingCount: counts.pending,
     topSubmitters,
     topApprovers,
     outstanding,
@@ -83,7 +99,7 @@ export const loader: LoaderFunction = async ({ request }) => {
 type LoaderData = {
   totalEdits: number;
   pendingCount: number;
-  topSubmitters: { creator: string; count: number }[];
+  topSubmitters: { submitter: string; count: number }[];
   topApprovers: { reviewer: string; count: number }[];
   outstanding: { type: string; count: number }[];
 };
@@ -208,15 +224,15 @@ const Dashboard = () => {
           </Typography>
           {topSubmitters.length === 0 ? (
             <Typography variant="body2" color="text.secondary">
-              No submissions yet.
+              No submitter attribution recorded yet.
             </Typography>
           ) : (
             <TableContainer>
               <Table size="small">
                 <TableBody>
-                  {topSubmitters.map(({ creator, count }) => (
-                    <TableRow key={creator}>
-                      <TableCell>{creator}</TableCell>
+                  {topSubmitters.map(({ submitter, count }) => (
+                    <TableRow key={submitter}>
+                      <TableCell>{submitter}</TableCell>
                       <TableCell align="right" sx={{ fontWeight: 600 }}>
                         {count}
                       </TableCell>

app/routes/authenticated/logout.tsx

@@ -1,10 +1,18 @@
-import { type LoaderFunction, redirect } from "react-router";
+import {
+  type ActionFunction,
+  type LoaderFunction,
+  redirect,
+} from "react-router";
 import { getDatabaseClient } from "~/api/client.server";
 
-export const loader: LoaderFunction = async ({ request }) => {
-  const { client } = getDatabaseClient(request);
+// Signing out is a mutation, so it belongs in the action (POST), not a GET
+// loader. A direct GET to this route just bounces back to the dashboard.
+export const loader: LoaderFunction = () => redirect("/");
+
+export const action: ActionFunction = async ({ request }) => {
+  const { client, headers } = getDatabaseClient(request);
 
   await client.auth.signOut();
 
-  return redirect("/auth");
+  return redirect("/auth", { headers });
 };