FIX - logged hours bug and imgs not showing up

Author: MeMMa137

AGENTS.md

@@ -0,0 +1,27 @@
+# Agent guidance (Stack)
+
+## Security & privacy
+
+### Secrets & env
+
+- Never commit `.env`, API keys, `DATABASE_URL`, session secrets, Hackatime/Airtable/CDN credentials, or OAuth tokens.
+- Keep secrets in server `process.env` only; never expose them in client bundles, logs, or JSON responses.
+- `.env.example` may list variable **names** only, not real values.
+
+### API exposure
+
+- **Admin / staff routes** (`/api/admin/*`, review approve/reject, user PII, journal CSV) must use `requireFullAdmin`, `requireStaffReview`, or `requireSuperAdmin` — never public.
+- **User routes** must use `requireUser` and scope data to `req.session.userId`.
+- Prefer whitelisted DTOs (`toPublicProject`, `toPublicUser`) over spreading DB rows to JSON.
+- Gate dev/debug endpoints behind production checks or admin auth.
+- Third-party calls (Hackatime, Airtable, CDN) stay **server-side**; tokens must not be sent to the browser.
+
+### Errors & logging
+
+- Production 500 responses: generic message only (`clientErrorMessage` in `server/security.js`).
+- Do not log access tokens, refresh tokens, sync secrets, or full OAuth responses.
+
+### Client
+
+- Admin `fetch` calls must use `credentials: "include"`.
+- Do not embed private API keys in `client/` code.

client/src/components/AdminReviewPage.css

@@ -156,6 +156,13 @@
   object-fit: cover;
 }
 
+.admin-review-image-fallback {
+  padding: 0.75rem;
+  text-align: center;
+  color: rgba(232, 244, 255, 0.55);
+  font-size: 0.9rem;
+}
+
 .admin-review-card-content {
   display: flex;
   flex: 1;

client/src/components/AdminReviewPage.jsx

@@ -1,39 +1,27 @@
 import { useAuth } from "../auth/AuthContext.jsx";
 import { useEffect, useMemo, useState } from "react";
+import { JournalDescription } from "./JournalDescription.jsx";
+import { resolveStackAssetUrl } from "../utils/mediaUrls.js";
+import "./AdminReviewPage.css";
 
-function isVideoUrl(url) {
-  const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
-  return ["mp4", "webm", "ogg", "mov"].includes(ext);
-}
+function ReviewImage({ src, className, alt = "" }) {
+  const resolved = resolveStackAssetUrl(src);
+  const [failed, setFailed] = useState(false);
 
-function JournalDescriptionRenderer({ text }) {
-  if (!text) return null;
-  const parts = [];
-  const imgRe = /!\[([^\]]*)\]\((https:\/\/cdn\.hackclub\.com\/[^\s)]+)\)/g;
-  let last = 0;
-  let match;
-  while ((match = imgRe.exec(text)) !== null) {
-    if (match.index > last) parts.push({ type: "text", value: text.slice(last, match.index) });
-    parts.push({ type: "media", alt: match[1], url: match[2] });
-    last = match.index + match[0].length;
+  if (!resolved || failed) {
+    return <span className="admin-review-image-fallback">{alt || "Image could not be loaded"}</span>;
   }
-  if (last < text.length) parts.push({ type: "text", value: text.slice(last) });
 
   return (
-    <div className="admin-review-journal-description">
-      {parts.map((part, i) =>
-        part.type === "text" ? (
-          <span key={i} style={{ whiteSpace: "pre-wrap" }}>{part.value}</span>
-        ) : isVideoUrl(part.url) ? (
-          <video key={i} className="admin-review-media-item" src={part.url} controls preload="metadata" />
-        ) : (
-          <img key={i} className="admin-review-media-item" src={part.url} alt={part.alt} />
-        )
-      )}
-    </div>
+    <img
+      className={className}
+      src={resolved}
+      alt={alt}
+      loading="lazy"
+      onError={() => setFailed(true)}
+    />
   );
 }
-import "./AdminReviewPage.css";
 
 function formatHours(value) {
   return Number(value ?? 0).toFixed(2);
@@ -179,7 +167,11 @@ function AdminReviewIndex() {
           {filteredProjects.map((project) => (
             <a className="admin-review-card" href={`/admin/review/project/${project.id}`} key={project.id}>
               <div className="admin-review-thumb">
-                {project.imageUrl ? <img src={project.imageUrl} alt="" /> : <span>Image could not be loaded</span>}
+                {project.imageUrl ? (
+                  <ReviewImage src={project.imageUrl} className="" alt="" />
+                ) : (
+                  <span className="admin-review-image-fallback">Image could not be loaded</span>
+                )}
               </div>
               <div className="admin-review-card-content">
                 <div className="admin-review-card-header">
@@ -199,7 +191,7 @@ function AdminReviewIndex() {
                     {slackDisplay(project.user)}
                   </div>
                   <div className="admin-review-stats">
-                    <strong>{formatHours(project.totalHours)}h</strong>
+                    <strong>{formatHours(project.combinedHours ?? 0)}h</strong>
                     <small>{formatDate(project.shippedAt)}</small>
                   </div>
                 </footer>
@@ -380,7 +372,7 @@ function AdminReviewDetail({ projectId }) {
         </header>
 
         {project.imageUrl ? (
-          <img className="admin-review-banner" src={project.imageUrl} alt="" />
+          <ReviewImage src={project.imageUrl} className="admin-review-banner" alt="" />
         ) : (
           <div className="admin-review-banner admin-review-banner--empty">Screenshot unavailable</div>
         )}
@@ -438,7 +430,7 @@ function AdminReviewDetail({ projectId }) {
             </div>
             <div>
               <span>Raw Hours</span>
-              <strong>{formatHours((Number(project.totalHours || 0) + Number(project.hackatimeHours || 0)).toFixed(2))}</strong>
+              <strong>{formatHours(project.combinedHours ?? 0)}</strong>
             </div>
             <div>
               <span>Previously banked</span>
@@ -486,7 +478,11 @@ function AdminReviewDetail({ projectId }) {
             journalEntries.map((entry) => (
               <article className="admin-review-journal-entry" key={entry.id}>
                 <strong>{entry.timeDone ? new Date(entry.timeDone).toLocaleString() : "N/A"} · {entry.hoursWorked}h</strong>
-                <JournalDescriptionRenderer text={entry.description} />
+                <JournalDescription
+                  text={entry.description}
+                  className="admin-review-journal-description"
+                  mediaClassName="admin-review-media-item"
+                />
                 {entry.toolsUsed?.length ? <small>Tools: {entry.toolsUsed.join(", ")}</small> : null}
               </article>
             ))

client/src/components/AdminShopOrdersPage.jsx

@@ -40,7 +40,7 @@ export function AdminShopOrdersPage() {
   useEffect(() => {
     async function loadOrders() {
       try {
-        const response = await fetch("/api/admin/shop/orders");
+        const response = await fetch("/api/admin/shop/orders", { credentials: "include" });
         const data = await response.json();
         if (!response.ok) throw new Error(data.error || "Failed to load orders.");
         setOrders(data.orders || []);

client/src/components/JournalDescription.jsx

@@ -0,0 +1,22 @@
+import { isVideoUrl, parseJournalDescription } from "../utils/mediaUrls.js";
+
+export function JournalDescription({ text, className = "journal-description", mediaClassName = "journal-media-item" }) {
+  const parts = parseJournalDescription(text);
+  if (parts.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {parts.map((part, i) =>
+        part.type === "text" ? (
+          <span key={i} style={{ whiteSpace: "pre-wrap" }}>
+            {part.value}
+          </span>
+        ) : isVideoUrl(part.url) ? (
+          <video key={i} className={mediaClassName} src={part.url} controls preload="metadata" />
+        ) : (
+          <img key={i} className={mediaClassName} src={part.url} alt={part.alt || "Journal attachment"} loading="lazy" />
+        )
+      )}
+    </div>
+  );
+}

client/src/components/ProjectsPage.jsx

@@ -1,7 +1,9 @@
 const platformBackground = "https://cdn.hackclub.com/019e3e5a-908f-707d-9790-91f9ec414045/bkg.png";
 import { useEffect, useRef, useState } from "react";
 import { useAuth } from "../auth/AuthContext.jsx";
+import { JournalDescription } from "./JournalDescription.jsx";
 import { PlatformStatusBar } from "./PlatformStatusBar.jsx";
+import { resolveStackAssetUrl } from "../utils/mediaUrls.js";
 const sideBrick = "https://cdn.hackclub.com/019e3e5a-9d8a-7fcb-ad80-d6166cfd97f8/side_brick.png";
 const statusBtn = "https://cdn.hackclub.com/019e3e5a-9f39-7875-aec6-cf24a58b87d4/status_btn.png";
 const hoursBtn = "https://cdn.hackclub.com/019e3e5a-9b72-709a-8224-a87f14fd5e78/hours_btn.png";
@@ -112,39 +114,6 @@ const ALLOWED_UPLOAD_TYPES = new Set([
 const PROJECT_IMAGE_UPLOAD_TYPES = new Set(["image/jpeg", "image/png", "image/gif", "image/webp", "image/avif"]);
 const PROJECT_IMAGE_MAX_BYTES = 3 * 1024 * 1024;
 
-function isVideoUrl(url) {
-  const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
-  return ["mp4", "webm", "ogg", "mov"].includes(ext);
-}
-
-function JournalDescriptionRenderer({ text }) {
-  if (!text) return null;
-  const parts = [];
-  const imgRe = /!\[([^\]]*)\]\((https:\/\/cdn\.hackclub\.com\/[^\s)]+)\)/g;
-  let last = 0;
-  let match;
-  while ((match = imgRe.exec(text)) !== null) {
-    if (match.index > last) parts.push({ type: "text", value: text.slice(last, match.index) });
-    parts.push({ type: "media", alt: match[1], url: match[2] });
-    last = match.index + match[0].length;
-  }
-  if (last < text.length) parts.push({ type: "text", value: text.slice(last) });
-
-  return (
-    <div className="journal-description">
-      {parts.map((part, i) =>
-        part.type === "text" ? (
-          <span key={i} style={{ whiteSpace: "pre-wrap" }}>{part.value}</span>
-        ) : isVideoUrl(part.url) ? (
-          <video key={i} className="journal-media-item" src={part.url} controls preload="metadata" />
-        ) : (
-          <img key={i} className="journal-media-item" src={part.url} alt={part.alt} />
-        )
-      )}
-    </div>
-  );
-}
-
 function displayStatus(project) {
   if (project.status === "approved") return "Approved";
   if (project.status === "rejected") return "Rejected";
@@ -593,7 +562,13 @@ function ProjectDetailsModal({ project, onClose, onEdit, onJournal, onShip, onDe
 
         <h2 className="projects-page__modal-title">{project.name}</h2>
         <p className="projects-page__modal-description">{project.description || "No description yet."}</p>
-        {project.imageUrl ? <img className="projects-page__project-image" src={project.imageUrl} alt="" /> : null}
+        {project.imageUrl ? (
+          <img
+            className="projects-page__project-image"
+            src={resolveStackAssetUrl(project.imageUrl) || project.imageUrl}
+            alt=""
+          />
+        ) : null}
 
         <div className="projects-page__modal-row">
           <span>Type</span>
@@ -793,7 +768,7 @@ function JournalModal({ project, entries, form, onChange, onClose, onSubmit }) {
                 <strong>
                   {entry.timeDone ? new Date(entry.timeDone).toLocaleDateString() : "N/A"} - {entry.hoursWorked || 0} hrs
                 </strong>
-                <JournalDescriptionRenderer text={entry.description} />
+                <JournalDescription text={entry.description} />
                 {entry.toolsUsed?.length ? <small>Tools: {entry.toolsUsed.join(", ")}</small> : null}
               </article>
             ))
@@ -943,7 +918,11 @@ function ProjectFormModal({
                 }}
               />
               {project.imageUrl ? (
-                <img className="projects-page__image-preview" src={project.imageUrl} alt="" />
+                <img
+                  className="projects-page__image-preview"
+                  src={resolveStackAssetUrl(project.imageUrl) || project.imageUrl}
+                  alt=""
+                />
               ) : (
                 <p>Drag &amp; drop an image here</p>
               )}

client/src/utils/mediaUrls.js

@@ -0,0 +1,92 @@
+/**
+ * Resolve project/journal asset URLs for the current app origin.
+ * Rewrites dev upload hosts (127.0.0.1:3000) and relative /uploads paths
+ * so images work on the Vite dev server and in production.
+ */
+export function resolveStackAssetUrl(url) {
+  if (!url || typeof url !== "string") return null;
+  const trimmed = url.trim();
+  if (!trimmed) return null;
+
+  try {
+    const parsed = new URL(trimmed, window.location.origin);
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+      return null;
+    }
+
+    if (parsed.pathname.startsWith("/uploads/")) {
+      return `${window.location.origin}${parsed.pathname}${parsed.search}`;
+    }
+
+    const isLocalUploadHost =
+      (parsed.hostname === "127.0.0.1" || parsed.hostname === "localhost") &&
+      parsed.pathname.startsWith("/uploads/");
+    if (isLocalUploadHost) {
+      return `${window.location.origin}${parsed.pathname}${parsed.search}`;
+    }
+
+    return parsed.href;
+  } catch {
+    return trimmed.startsWith("/uploads/") ? `${window.location.origin}${trimmed}` : trimmed;
+  }
+}
+
+/** @param {string} url */
+export function isAllowedJournalMediaUrl(url) {
+  if (!url || typeof url !== "string") return false;
+  try {
+    const parsed = new URL(url.trim(), window.location.origin);
+    if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return false;
+    if (parsed.hostname === "cdn.hackclub.com") return true;
+    if (parsed.pathname.startsWith("/uploads/")) return true;
+    if (parsed.hostname === window.location.hostname) return true;
+    return parsed.hostname === "127.0.0.1" || parsed.hostname === "localhost";
+  } catch {
+    return false;
+  }
+}
+
+const MARKDOWN_MEDIA_RE = /!\[([^\]]*)\]\(([^)]+)\)/g;
+
+/**
+ * @param {string | null | undefined} text
+ * @returns {Array<{ type: "text", value: string } | { type: "media", alt: string, url: string }>}
+ */
+export function parseJournalDescription(text) {
+  if (!text) return [];
+
+  const parts = [];
+  let last = 0;
+  let match;
+
+  while ((match = MARKDOWN_MEDIA_RE.exec(text)) !== null) {
+    if (match.index > last) {
+      parts.push({ type: "text", value: text.slice(last, match.index) });
+    }
+
+    const rawUrl = match[2].trim();
+    if (isAllowedJournalMediaUrl(rawUrl)) {
+      const resolved = resolveStackAssetUrl(rawUrl);
+      if (resolved) {
+        parts.push({ type: "media", alt: match[1], url: resolved });
+      } else {
+        parts.push({ type: "text", value: match[0] });
+      }
+    } else {
+      parts.push({ type: "text", value: match[0] });
+    }
+
+    last = match.index + match[0].length;
+  }
+
+  if (last < text.length) {
+    parts.push({ type: "text", value: text.slice(last) });
+  }
+
+  return parts;
+}
+
+export function isVideoUrl(url) {
+  const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
+  return ["mp4", "webm", "ogg", "mov"].includes(ext);
+}

client/vite.config.js

@@ -22,6 +22,10 @@ export default defineConfig({
         target: "http://127.0.0.1:3000",
         changeOrigin: true,
       },
+      "/uploads": {
+        target: "http://127.0.0.1:3000",
+        changeOrigin: true,
+      },
     },
   },
 });

server/airtablePeriodic.js

@@ -1,4 +1,7 @@
 import { pool } from "./db.js";
+import { STACK_LAUNCH_UTC } from "./hackatimeAuth.js";
+
+const STACK_LAUNCH_TIMESTAMPTZ = STACK_LAUNCH_UTC.toISOString();
 import { hasAirtableProjectsConfig, syncProjectToAirtable, persistProjectAirtableRecordId } from "./airtableProjects.js";
 import { hasAirtableUsersConfig, syncPostgresUserToAirtable } from "./airtableUsers.js";
 
@@ -87,6 +90,7 @@ export async function syncAllUsersAndProjectsToAirtable() {
         LEFT JOIN journal_entries
           ON journal_entries.project_id = projects.id
           AND journal_entries.user_id = projects.user_id
+          AND COALESCE(journal_entries.time_done, journal_entries.created_at) >= '${STACK_LAUNCH_TIMESTAMPTZ}'::timestamptz
         GROUP BY projects.id, users.id
         ORDER BY projects.id ASC
       `);