dev

src/app/api/dashboard/devlogs/route.ts

@@ -7,13 +7,15 @@ export async function POST(req: NextRequest) {
     return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
   }
 
-  let data: unknown;
+  let data: { project_id: string; content: string; media_url?: string; description?: string | null };
   try {
     data = await req.json();
   } catch {
     return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
   }
-
+  if (data.description === "") {
+    data.description = null;
+  }
   try {
     const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/devlogs/`, {
       method: "POST",

src/app/api/hackatime/projects/route.ts

@@ -27,7 +27,7 @@ export async function GET() {
 
   // Fetch all Hackatime projects for this user
   const hackatimeRes = await fetch(
-    `https://hackatime.hackclub.com/api/v1/users/${hackatimeId}/stats?features=projects&start_date=2025-12-01T00:00:00Z`,
+    `https://hackatime.hackclub.com/api/v1/users/${hackatimeId}/stats?features=projects&start_date=2025-12-21T00:00:00Z`,
     { cache: "no-store" }
   );
 

src/app/api/projects/[projectId]/ship/route.ts

@@ -1,8 +1,8 @@
-import { NextRequest, NextResponse } from "next/server";
 import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
 
 export async function POST(
-  request: NextRequest,
+  _req: NextRequest,
   { params }: { params: Promise<{ projectId: string }> }
 ) {
   const { projectId } = await params;
@@ -19,6 +19,7 @@ export async function POST(
       {
         method: "POST",
         headers: {
+          "Content-Type": "application/json",
           Cookie: `sessionId=${sessionId}`,
         },
       }

src/app/api/shop/form-url/route.ts

@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server";
+
+// TODO: This is a placeholder implementation. Backend needs to be updated to:
+// 1. Add a ShopConfig model/table to store form URLs and other shop settings
+// 2. Create /api/v1/shop/config endpoint to fetch/update shop configuration
+// 3. This route should then proxy to the backend instead of using env vars
+
+export async function GET() {
+  const formUrl = process.env.NEXT_PUBLIC_SHOP_FORM_URL;
+
+  if (!formUrl) {
+    return NextResponse.json(
+      { error: "Shop form URL not configured" },
+      { status: 503 }
+    );
+  }
+
+  return NextResponse.json({ formUrl });
+}

src/app/dashboard/projects/[projectId]/page.tsx

@@ -81,7 +81,7 @@ export default async function ProjectPage({
 
   return (
     <div className="max-w-4xl mx-auto">
-      <ProjectDetailsClient project={project} />
+      <ProjectDetailsClient project={project} devlogCount={devlogs.length} />
 
       <div>
         <div className="flex items-center gap-3 mb-6">

src/app/dashboard/shop/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState, Suspense } from "react";
+
+function ShopRedirect() {
+  const searchParams = useSearchParams();
+  const item = searchParams.get("item");
+
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!item) {
+      setError("Missing item parameter. Please specify what you want to purchase.");
+      setLoading(false);
+      return;
+    }
+
+    async function fetchAndRedirect() {
+      try {
+        const res = await fetch("/api/shop/form-url");
+
+        if (!res.ok) {
+          const data = await res.json();
+          setError(data.error || "Failed to load shop configuration");
+          setLoading(false);
+          return;
+        }
+
+        const { formUrl } = await res.json();
+        const redirectUrl = `${formUrl}?item=${encodeURIComponent(item!)}`;
+        window.location.href = redirectUrl;
+      } catch (err) {
+        console.error("Error fetching form URL", err);
+        setError("Something went wrong. Please try again later.");
+        setLoading(false);
+      }
+    }
+
+    fetchAndRedirect();
+  }, [item]);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center">
+        <h1 className="text-4xl font-black mb-4 text-gray-900 font-[family-name:var(--font-righteous)]">
+          Oops!
+        </h1>
+        <p className="text-lg text-gray-700 mb-6">{error}</p>
+        <a
+          href="/dashboard"
+          className="px-6 py-3 bg-[#DC143C] text-white font-bold rounded-xl hover:bg-[#8B0000] transition-colors"
+        >
+          Back to Dashboard
+        </a>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh]">
+        <h1 className="text-4xl font-black mb-6 text-gray-900 font-[family-name:var(--font-righteous)]">
+          Shop
+        </h1>
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-12 h-12 border-4 border-[#DC143C] border-t-transparent rounded-full animate-spin" />
+          <p className="text-lg text-gray-700">Redirecting to shop...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+export default function ShopPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex flex-col items-center justify-center min-h-[60vh]">
+          <h1 className="text-4xl font-black mb-6 text-gray-900 font-[family-name:var(--font-righteous)]">
+            Shop
+          </h1>
+          <div className="w-12 h-12 border-4 border-[#DC143C] border-t-transparent rounded-full animate-spin" />
+        </div>
+      }
+    >
+      <ShopRedirect />
+    </Suspense>
+  );
+}

src/components/Meta.tsx

@@ -27,26 +27,26 @@ const Meta = () => (
     <link
       key="safari_icon"
       rel="mask-icon"
-      href="favicons/safari-pinned-tab.svg"
+      href="/favicons/safari-pinned-tab.svg"
       color="#cc0000"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="16x16"
-      href="favicons/favicon-16x16.png"
+      href="/favicons/favicon-16x16.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="32x32"
-      href="favicons/favicon-32x32.png"
+      href="/favicons/favicon-32x32.png"
     />
     <link
       rel="icon"
       type="image/png"
       sizes="48x48"
-      href="favicons/favicon-48x48.png"
+      href="/favicons/favicon-48x48.png"
     />
     <link
       rel="icon"

src/components/dashboard/EditProject.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 
 type HackatimeProject = {
@@ -20,11 +20,11 @@ type ProjectData = {
 export default function EditProject({
   projectId,
   initialData,
-  onCancel,
+  onCancelAction,
 }: {
   projectId: number;
   initialData: ProjectData;
-  onCancel: () => void;
+  onCancelAction: () => void;
 }) {
   const router = useRouter();
   const [formData, setFormData] = useState(initialData);
@@ -73,7 +73,7 @@ export default function EditProject({
       }
 
       router.refresh();
-      onCancel();
+      onCancelAction();
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
     } finally {
@@ -97,7 +97,7 @@ export default function EditProject({
           <h2 className="text-2xl font-bold text-gray-900">Edit Project</h2>
           <button
             type="button"
-            onClick={onCancel}
+            onClick={onCancelAction}
             className="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400"
             aria-label="Close"
           >
@@ -228,7 +228,7 @@ export default function EditProject({
           <div className="flex gap-3 pt-4 border-t-2 border-gray-100">
             <button
               type="button"
-              onClick={onCancel}
+              onClick={onCancelAction}
               className="flex-1 px-6 py-3 border-2 border-gray-300 text-gray-700 rounded-lg font-bold hover:bg-gray-50 transition-all focus:outline-none focus:ring-2 focus:ring-gray-400"
               disabled={loading}
             >

src/components/dashboard/ProjectDetailsClient.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 import EditProject from "./EditProject";
 
@@ -17,8 +18,41 @@ type Project = {
   shipped: boolean;
 };
 
-export default function ProjectDetailsClient({ project }: { project: Project }) {
+type Props = {
+  project: Project;
+  devlogCount: number;
+};
+
+export default function ProjectDetailsClient({ project, devlogCount }: Props) {
+  const router = useRouter();
   const [isEditing, setIsEditing] = useState(false);
+  const [isShipping, setIsShipping] = useState(false);
+  const [shipError, setShipError] = useState<string | null>(null);
+
+  const canShip = !project.shipped && devlogCount > 0;
+
+  async function handleShip() {
+    setIsShipping(true);
+    setShipError(null);
+
+    try {
+      const res = await fetch(`/api/projects/${project.project_id}/ship`, {
+        method: "POST",
+        credentials: "include",
+      });
+
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.detail || data.error || "Failed to ship project");
+      }
+
+      router.refresh();
+    } catch (err) {
+      setShipError(err instanceof Error ? err.message : "Something went wrong");
+    } finally {
+      setIsShipping(false);
+    }
+  }
 
   return (
     <>
@@ -52,13 +86,25 @@ export default function ProjectDetailsClient({ project }: { project: Project })
                   Shipped
                 </span>
               )}
+              {canShip && (
+                <button
+                  onClick={handleShip}
+                  disabled={isShipping}
+                  className="px-4 py-2 bg-rose-700 hover:bg-rose-800 text-white rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {isShipping ? "Shipping..." : "Ship Project"}
+                </button>
+              )}
               <button
                 onClick={() => setIsEditing(true)}
                 className="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg font-semibold transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 shadow-sm hover:shadow-md"
               >
                 Edit
               </button>
             </div>
+            {shipError && (
+              <p className="text-red-600 text-sm mt-2">{shipError}</p>
+            )}
           </div>
 
           {(project.repo || project.demo_url) && (
@@ -126,7 +172,7 @@ export default function ProjectDetailsClient({ project }: { project: Project })
             description: project.description || "",
             hackatime_projects: project.hackatime_projects,
           }}
-          onCancel={() => setIsEditing(false)}
+          onCancelAction={() => setIsEditing(false)}
         />
       )}
     </>