added in admin pages to add models and parts
This commit is contained in:
Vendored
+1
-1
@@ -11,7 +11,7 @@
|
||||
"command": "npm run dev"
|
||||
},
|
||||
{"name": "Launch Chrome against localhost",
|
||||
"type": "pwa-chrome",
|
||||
"type": "chrome",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:3000",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
#!/bin/zsh
|
||||
|
||||
echo "🛠 Setting up Compatibility Explorer (Option A)..."
|
||||
|
||||
COMPAT_DIR="src/app/compatibility"
|
||||
mkdir -p "$COMPAT_DIR"
|
||||
|
||||
cat > "$COMPAT_DIR/page.js" << 'EOF'
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CATEGORIES } from "@/lib/data/categories";
|
||||
|
||||
function ModeCard({ title, emoji, description, children }) {
|
||||
return (
|
||||
<div className="border rounded-xl p-6 shadow-sm bg-white flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-2xl">{emoji}</div>
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg">{title}</h2>
|
||||
<p className="text-sm text-gray-500">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col gap-3">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CompatibilityPage() {
|
||||
const [models, setModels] = useState([]);
|
||||
const [parts, setParts] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [modelForParts, setModelForParts] = useState("");
|
||||
const [partForModels, setPartForModels] = useState("");
|
||||
const [modelA, setModelA] = useState("");
|
||||
const [modelB, setModelB] = useState("");
|
||||
const [categoryModel, setCategoryModel] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const [modelsRes, partsRes] = await Promise.all([
|
||||
fetch("/api/models"),
|
||||
fetch("/api/parts"),
|
||||
]);
|
||||
|
||||
const modelsJson = modelsRes.ok ? await modelsRes.json() : [];
|
||||
const partsJson = partsRes.ok ? await partsRes.json() : [];
|
||||
|
||||
setModels(modelsJson || []);
|
||||
setParts(partsJson || []);
|
||||
} catch (e) {
|
||||
console.error("Failed to load models/parts", e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
load();
|
||||
}, []);
|
||||
|
||||
function handleGoToModelCompatibility() {
|
||||
if (!modelForParts) return;
|
||||
router.push(`/model/${modelForParts}`);
|
||||
}
|
||||
|
||||
function handleGoToPartCompatibility() {
|
||||
if (!partForModels) return;
|
||||
router.push(`/part/${partForModels}`);
|
||||
}
|
||||
|
||||
function handleExploreCategory() {
|
||||
if (!categoryModel || !category) return;
|
||||
router.push(`/category/${categoryModel}/${category}`);
|
||||
}
|
||||
|
||||
function handleCompareModels() {
|
||||
if (!modelA || !modelB) return;
|
||||
// Stubbed for now to avoid broken routes
|
||||
alert("Model comparison view coming soon! (Hotshot vs Supershot, etc.)");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
{/* Breadcrumb-ish header */}
|
||||
<nav className="text-sm text-gray-500">
|
||||
<Link href="/" className="hover:underline text-blue-600">
|
||||
Home
|
||||
</Link>{" "}
|
||||
<span>›</span>{" "}
|
||||
<span className="font-semibold text-gray-700">Compatibility Explorer</span>
|
||||
</nav>
|
||||
|
||||
{/* Page Title */}
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">Compatibility Explorer</h1>
|
||||
<p className="text-gray-600 max-w-2xl">
|
||||
Discover cross-compatibility between RC models and parts. Use one of the
|
||||
tools below to explore fitment, upgrades, and shared components.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<p className="text-gray-500">Loading models and parts…</p>
|
||||
)}
|
||||
|
||||
{/* Mode Selector Grid */}
|
||||
{!loading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Mode 1: Model → Compatible Parts */}
|
||||
<ModeCard
|
||||
title="Model → Compatible Parts"
|
||||
emoji="🔧"
|
||||
description="Find every part that fits a specific RC model."
|
||||
>
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={modelForParts}
|
||||
onChange={(e) => setModelForParts(e.target.value)}
|
||||
>
|
||||
<option value="">Select a model…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={handleGoToModelCompatibility}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
||||
disabled={!modelForParts}
|
||||
>
|
||||
Show Compatible Parts
|
||||
</button>
|
||||
</ModeCard>
|
||||
|
||||
{/* Mode 2: Part → Compatible Models */}
|
||||
<ModeCard
|
||||
title="Part → Compatible Models"
|
||||
emoji="🧩"
|
||||
description="See all RC models that this part works with."
|
||||
>
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={partForModels}
|
||||
onChange={(e) => setPartForModels(e.target.value)}
|
||||
>
|
||||
<option value="">Select a part…</option>
|
||||
{parts.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.name} ({p.id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={handleGoToPartCompatibility}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
||||
disabled={!partForModels}
|
||||
>
|
||||
Show Compatible Models
|
||||
</button>
|
||||
</ModeCard>
|
||||
|
||||
{/* Mode 3: Compare Two Models (stubbed) */}
|
||||
<ModeCard
|
||||
title="Compare Two Models"
|
||||
emoji="🔍"
|
||||
description="See shared and unique parts between two models. (Coming soon)"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={modelA}
|
||||
onChange={(e) => setModelA(e.target.value)}
|
||||
>
|
||||
<option value="">Select Model A…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={modelB}
|
||||
onChange={(e) => setModelB(e.target.value)}
|
||||
>
|
||||
<option value="">Select Model B…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCompareModels}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg cursor-not-allowed"
|
||||
disabled
|
||||
>
|
||||
Compare (Coming Soon)
|
||||
</button>
|
||||
</ModeCard>
|
||||
|
||||
{/* Mode 4: Explore Categories */}
|
||||
<ModeCard
|
||||
title="Explore by Category"
|
||||
emoji="📂"
|
||||
description="Browse shocks, drivetrain, chassis, and more for a model."
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={categoryModel}
|
||||
onChange={(e) => setCategoryModel(e.target.value)}
|
||||
>
|
||||
<option value="">Select a model…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
>
|
||||
<option value="">Select a category…</option>
|
||||
{CATEGORIES.map((cat) => (
|
||||
<option key={cat} value={cat}>
|
||||
{cat}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleExploreCategory}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
||||
disabled={!categoryModel || !category}
|
||||
>
|
||||
Explore Category
|
||||
</button>
|
||||
</ModeCard>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
echo "🎉 Compatibility Explorer (Option A) page created at src/app/compatibility/page.js"
|
||||
Executable
+289
@@ -0,0 +1,289 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
echo "🚀 Generating Admin UI (Next.js App Router, JS, Tailwind)..."
|
||||
|
||||
### Root paths
|
||||
APP_DIR="src/app/admin"
|
||||
COMP_DIR="src/components/admin"
|
||||
LIB_DIR="lib"
|
||||
|
||||
# Create directories
|
||||
mkdir -p "$APP_DIR"
|
||||
mkdir -p "$APP_DIR/models/new"
|
||||
mkdir -p "$APP_DIR/models/[id]"
|
||||
mkdir -p "$APP_DIR/parts/new"
|
||||
mkdir -p "$APP_DIR/parts/[id]"
|
||||
mkdir -p "$COMP_DIR"
|
||||
mkdir -p "$LIB_DIR"
|
||||
|
||||
############################################
|
||||
# 1. ADMIN LAYOUT
|
||||
############################################
|
||||
cat <<'EOF' > "$APP_DIR/layout.js"
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "../globals.css";
|
||||
|
||||
export default function AdminLayout({ children }) {
|
||||
return (
|
||||
<div className="min-h-screen flex bg-gray-100">
|
||||
<aside className="w-64 bg-white shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold mb-6">Admin</h2>
|
||||
|
||||
<nav className="space-y-4">
|
||||
<Link href="/admin" className="block hover:text-black">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link href="/admin/models" className="block hover:text-black">
|
||||
Models
|
||||
</Link>
|
||||
<Link href="/admin/parts" className="block hover:text-black">
|
||||
Parts
|
||||
</Link>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 p-10">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
############################################
|
||||
# 2. ADMIN HOME PAGE
|
||||
############################################
|
||||
cat <<'EOF' > "$APP_DIR/page.js"
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function AdminHome() {
|
||||
const { data: models } = await supabaseServer.from("models").select("*");
|
||||
const { data: parts } = await supabaseServer.from("parts").select("*");
|
||||
const { data: compat } = await supabaseServer.from("parts_compatible_models").select("*");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="p-6 bg-white shadow rounded-lg">
|
||||
<h2 className="text-xl font-semibold">Models</h2>
|
||||
<p className="text-3xl mt-2">{models?.length ?? 0}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white shadow rounded-lg">
|
||||
<h2 className="text-xl font-semibold">Parts</h2>
|
||||
<p className="text-3xl mt-2">{parts?.length ?? 0}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white shadow rounded-lg">
|
||||
<h2 className="text-xl font-semibold">Compatibility</h2>
|
||||
<p className="text-3xl mt-2">{compat?.length ?? 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
############################################
|
||||
# 3. MODELS LIST PAGE
|
||||
############################################
|
||||
cat <<'EOF' > "$APP_DIR/models/page.js"
|
||||
import Link from "next/link";
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function ModelsPage() {
|
||||
const { data: models } = await supabaseServer
|
||||
.from("models")
|
||||
.select("*")
|
||||
.order("name");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between mb-6">
|
||||
<h1 className="text-3xl font-bold">Models</h1>
|
||||
<Link href="/admin/models/new" className="px-4 py-2 bg-black text-white rounded">
|
||||
+ Add Model
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-white shadow rounded-lg divide-y">
|
||||
{models?.map((m) => (
|
||||
<Link
|
||||
key={m.id}
|
||||
href={`/admin/models/${m.id}`}
|
||||
className="block p-4 hover:bg-gray-50"
|
||||
>
|
||||
<div className="font-semibold">{m.name}</div>
|
||||
<div className="text-sm text-gray-500">{m.brand}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
############################################
|
||||
# 4. NEW MODEL PAGE
|
||||
############################################
|
||||
cat <<'EOF' > "$APP_DIR/models/new/page.js"
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { supabaseBrowser } from "@/lib/supabaseClient";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function NewModelPage() {
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
brand: "",
|
||||
scale: "",
|
||||
chassis_type: "",
|
||||
notes: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
async function save() {
|
||||
const { error } = await supabaseBrowser.from("models").insert(form);
|
||||
if (!error) router.push("/admin/models");
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">Add New Model</h1>
|
||||
|
||||
<div className="space-y-4 max-w-lg">
|
||||
{Object.entries(form).map(([key, value]) => (
|
||||
<div key={key}>
|
||||
<label className="block mb-1 capitalize">{key.replace("_", " ")}</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={value}
|
||||
onChange={(e) => setForm({ ...form, [key]: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={save}
|
||||
className="px-4 py-2 bg-black text-white rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
############################################
|
||||
# 5. MODEL DETAIL PAGE
|
||||
############################################
|
||||
cat <<'EOF' > "$APP_DIR/models/[id]/page.js"
|
||||
import Link from "next/link";
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function ModelDetail({ params }) {
|
||||
const { id } = params;
|
||||
|
||||
const { data: model } = await supabaseServer
|
||||
.from("models")
|
||||
.select("*")
|
||||
.eq("id", id)
|
||||
.single();
|
||||
|
||||
const { data: compat } = await supabaseServer
|
||||
.from("parts_compatible_models")
|
||||
.select("*, parts(*)")
|
||||
.eq("model_id", id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-4">{model?.name}</h1>
|
||||
|
||||
<div className="bg-white p-4 shadow rounded mb-6">
|
||||
<div className="text-gray-700">Brand: {model?.brand}</div>
|
||||
<div className="text-gray-700">Scale: {model?.scale}</div>
|
||||
<div className="text-gray-700">Chassis: {model?.chassis_type}</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold mb-2">Compatible Parts</h2>
|
||||
|
||||
<Link
|
||||
href={`/admin/models/${id}/add-part`}
|
||||
className="inline-block mb-4 px-4 py-2 bg-black text-white rounded"
|
||||
>
|
||||
+ Add Compatible Part
|
||||
</Link>
|
||||
|
||||
<div className="bg-white shadow rounded divide-y">
|
||||
{compat?.map((c) => (
|
||||
<div key={c.id} className="p-4 flex justify-between">
|
||||
<div>
|
||||
<div className="font-semibold">{c.parts.name}</div>
|
||||
<div className="text-sm text-gray-500">{c.fit_type}</div>
|
||||
</div>
|
||||
<Link
|
||||
href={`/admin/parts/${c.parts.id}`}
|
||||
className="text-blue-600 underline"
|
||||
>
|
||||
View Part
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
############################################
|
||||
# PARTS PAGES (STUBS)
|
||||
############################################
|
||||
|
||||
cat <<'EOF' > "$APP_DIR/parts/page.js"
|
||||
export default function PartsPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Parts (UI Coming Next)</h1>
|
||||
<p className="text-gray-600 mt-2">List, edit, and link parts here.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
cat <<'EOF' > "$APP_DIR/parts/new/page.js"
|
||||
export default function NewPartPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Add Part (UI Coming Next)</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
EOF
|
||||
|
||||
############################################
|
||||
# SUPABASE CLIENTS
|
||||
############################################
|
||||
|
||||
cat <<'EOF' > "$LIB_DIR/supabaseClient.js"
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
|
||||
export const supabaseBrowser = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
|
||||
);
|
||||
EOF
|
||||
|
||||
cat <<'EOF' > "$LIB_DIR/supabaseServer.js"
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
|
||||
export const supabaseServer = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY
|
||||
);
|
||||
EOF
|
||||
|
||||
echo "🎉 Admin UI scaffolding complete!"
|
||||
Generated
+120
@@ -9,6 +9,7 @@
|
||||
"version": "0.1.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@supabase/supabase-js": "^2.84.0",
|
||||
"fs": "^0.0.1-security",
|
||||
"next": "16.0.3",
|
||||
"path": "^0.12.7",
|
||||
@@ -1464,6 +1465,79 @@
|
||||
"integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@supabase/auth-js": {
|
||||
"version": "2.84.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.84.0.tgz",
|
||||
"integrity": "sha512-J6XKbqqg1HQPMfYkAT9BrC8anPpAiifl7qoVLsYhQq5B/dnu/lxab1pabnxtJEsvYG5rwI5HEVEGXMjoQ6Wz2Q==",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/functions-js": {
|
||||
"version": "2.84.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.84.0.tgz",
|
||||
"integrity": "sha512-2oY5QBV4py/s64zMlhPEz+4RTdlwxzmfhM1k2xftD2v1DruRZKfoe7Yn9DCz1VondxX8evcvpc2udEIGzHI+VA==",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/postgrest-js": {
|
||||
"version": "2.84.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.84.0.tgz",
|
||||
"integrity": "sha512-oplc/3jfJeVW4F0J8wqywHkjIZvOVHtqzF0RESijepDAv5Dn/LThlGW1ftysoP4+PXVIrnghAbzPHo88fNomPQ==",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/realtime-js": {
|
||||
"version": "2.84.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.84.0.tgz",
|
||||
"integrity": "sha512-ThqjxiCwWiZAroHnYPmnNl6tZk6jxGcG2a7Hp/3kcolPcMj89kWjUTA3cHmhdIWYsP84fHp8MAQjYWMLf7HEUg==",
|
||||
"dependencies": {
|
||||
"@types/phoenix": "^1.6.6",
|
||||
"@types/ws": "^8.18.1",
|
||||
"tslib": "2.8.1",
|
||||
"ws": "^8.18.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/storage-js": {
|
||||
"version": "2.84.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.84.0.tgz",
|
||||
"integrity": "sha512-vXvAJ1euCuhryOhC6j60dG8ky+lk0V06ubNo+CbhuoUv+sl39PyY0lc+k+qpQhTk/VcI6SiM0OECLN83+nyJ5A==",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/supabase-js": {
|
||||
"version": "2.84.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.84.0.tgz",
|
||||
"integrity": "sha512-byMqYBvb91sx2jcZsdp0qLpmd4Dioe80e4OU/UexXftCkpTcgrkoENXHf5dO8FCSai8SgNeq16BKg10QiDI6xg==",
|
||||
"dependencies": {
|
||||
"@supabase/auth-js": "2.84.0",
|
||||
"@supabase/functions-js": "2.84.0",
|
||||
"@supabase/postgrest-js": "2.84.0",
|
||||
"@supabase/realtime-js": "2.84.0",
|
||||
"@supabase/storage-js": "2.84.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
||||
@@ -1756,6 +1830,27 @@
|
||||
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "24.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
|
||||
"integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==",
|
||||
"dependencies": {
|
||||
"undici-types": "~7.16.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/phoenix": {
|
||||
"version": "1.6.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
|
||||
"integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
"integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.47.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.47.0.tgz",
|
||||
@@ -6350,6 +6445,11 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/undici-types": {
|
||||
"version": "7.16.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
|
||||
"integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
|
||||
},
|
||||
"node_modules/unrs-resolver": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
|
||||
@@ -6540,6 +6640,26 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.18.3",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
|
||||
"integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@supabase/supabase-js": "^2.84.0",
|
||||
"fs": "^0.0.1-security",
|
||||
"next": "16.0.3",
|
||||
"path": "^0.12.7",
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
|
||||
const PARTS_PATH = path.join(process.cwd(), "src/lib/data/parts.js");
|
||||
|
||||
let content = fs.readFileSync(PARTS_PATH, "utf8");
|
||||
|
||||
content = content.replace(/fitsModels/g, "compatibleModels");
|
||||
|
||||
fs.writeFileSync(PARTS_PATH, content);
|
||||
|
||||
console.log("✔ Migration complete: fitsModels → compatibleModels");
|
||||
@@ -0,0 +1,33 @@
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import "../globals.css";
|
||||
|
||||
export default function AdminLayout({ children }) {
|
||||
return (
|
||||
<div className="min-h-screen flex bg-gray-100">
|
||||
<aside className="w-64 bg-white shadow-md p-6">
|
||||
<h2 className="text-2xl font-bold mb-6 text-gray-900">Admin</h2>
|
||||
|
||||
<nav className="space-y-4">
|
||||
<Link href="/admin" className="block hover:text-black text-gray-900">
|
||||
Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/models"
|
||||
className="block hover:text-gray-300 text-gray-900"
|
||||
>
|
||||
Models
|
||||
</Link>
|
||||
<Link
|
||||
href="/admin/parts"
|
||||
className="block hover:text-gray-300 text-gray-900"
|
||||
>
|
||||
Parts
|
||||
</Link>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 p-10 admin-text text-gray-900">{children}</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import Link from "next/link";
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function ModelDetail({ params }) {
|
||||
const { id } = params;
|
||||
|
||||
const { data: model } = await supabaseServer
|
||||
.from("models")
|
||||
.select("*")
|
||||
.eq("id", id)
|
||||
.single();
|
||||
|
||||
const { data: compat } = await supabaseServer
|
||||
.from("parts_compatible_models")
|
||||
.select("*, parts(*)")
|
||||
.eq("model_id", id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-4">{model?.name}</h1>
|
||||
|
||||
<div className="bg-white p-4 shadow rounded mb-6">
|
||||
<div className="text-gray-700">Brand: {model?.brand}</div>
|
||||
<div className="text-gray-700">Scale: {model?.scale}</div>
|
||||
<div className="text-gray-700">Chassis: {model?.chassis_type}</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-2xl font-bold mb-2">Compatible Parts</h2>
|
||||
|
||||
<Link
|
||||
href={`/admin/models/${id}/add-part`}
|
||||
className="inline-block mb-4 px-4 py-2 bg-black text-white rounded"
|
||||
>
|
||||
+ Add Compatible Part
|
||||
</Link>
|
||||
|
||||
<div className="bg-white shadow rounded divide-y">
|
||||
{compat?.map((c) => (
|
||||
<div key={c.id} className="p-4 flex justify-between">
|
||||
<div>
|
||||
<div className="font-semibold">{c.parts.name}</div>
|
||||
<div className="text-sm text-gray-500">{c.fit_type}</div>
|
||||
</div>
|
||||
<Link
|
||||
href={`/admin/parts/${c.parts.id}`}
|
||||
className="text-blue-600 underline"
|
||||
>
|
||||
View Part
|
||||
</Link>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { supabaseBrowser } from "@/lib/supabaseClient";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function NewModelPage() {
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
brand: "",
|
||||
scale: "",
|
||||
chassis_type: "",
|
||||
notes: "",
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
async function save() {
|
||||
const { error } = await supabaseBrowser.from("models").insert(form);
|
||||
if (!error) router.push("/admin/models");
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">Add New Model</h1>
|
||||
|
||||
<div className="space-y-4 max-w-lg">
|
||||
{Object.entries(form).map(([key, value]) => (
|
||||
<div key={key}>
|
||||
<label className="block mb-1 capitalize">{key.replace("_", " ")}</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={value}
|
||||
onChange={(e) => setForm({ ...form, [key]: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button
|
||||
onClick={save}
|
||||
className="px-4 py-2 bg-black text-white rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import Link from "next/link";
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function ModelsPage() {
|
||||
const { data: models } = await supabaseServer
|
||||
.from("models")
|
||||
.select("*")
|
||||
.order("name");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between mb-6">
|
||||
<h1 className="text-3xl font-bold">Models</h1>
|
||||
<Link
|
||||
href="/admin/models/new"
|
||||
className="px-4 py-2 bg-black text-white rounded"
|
||||
>
|
||||
+ Add Model
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{(!models || models.length === 0) && (
|
||||
<p className="text-gray-700">
|
||||
No models found yet. Click “Add Model” to create your
|
||||
first one.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="bg-white shadow rounded-lg divide-y">
|
||||
{models?.map((m) => (
|
||||
<Link
|
||||
key={m.id}
|
||||
href={`/admin/models/${m.id}`}
|
||||
className="block p-4 hover:bg-gray-50"
|
||||
>
|
||||
<div className="font-semibold">{m.name}</div>
|
||||
<div className="text-sm text-gray-500">{m.brand}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function AdminHome() {
|
||||
const { data: models } = await supabaseServer.from("models").select("*");
|
||||
const { data: parts } = await supabaseServer.from("parts").select("*");
|
||||
const { data: compat } = await supabaseServer
|
||||
.from("parts_compatible_models")
|
||||
.select("*");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold mb-6">Admin Dashboard</h1>
|
||||
|
||||
<div className="grid grid-cols-3 gap-6">
|
||||
<div className="p-6 bg-white shadow rounded-lg">
|
||||
<h2 className="text-xl font-semibold">Models</h2>
|
||||
<p className="text-3xl mt-2">{models?.length ?? 0}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white shadow rounded-lg">
|
||||
<h2 className="text-xl font-semibold">Parts</h2>
|
||||
<p className="text-3xl mt-2">{parts?.length ?? 0}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-white shadow rounded-lg">
|
||||
<h2 className="text-xl font-semibold">Compatibility</h2>
|
||||
<p className="text-3xl mt-2">{compat?.length ?? 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { supabaseBrowser } from "@/lib/supabaseClient";
|
||||
|
||||
export default function PartDetailPage({ params }) {
|
||||
const { id } = params;
|
||||
const router = useRouter();
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
manufacturer: "",
|
||||
sku: "",
|
||||
category: "",
|
||||
description: "",
|
||||
metadata: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchPart() {
|
||||
setLoading(true);
|
||||
setErrorMsg("");
|
||||
|
||||
const { data, error } = await supabaseBrowser
|
||||
.from("parts")
|
||||
.select("*")
|
||||
.eq("id", id)
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
setErrorMsg("Failed to load part.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setForm({
|
||||
name: data.name || "",
|
||||
manufacturer: data.manufacturer || "",
|
||||
sku: data.sku || "",
|
||||
category: data.category || "",
|
||||
description: data.description || "",
|
||||
metadata: data.metadata ? JSON.stringify(data.metadata, null, 2) : "",
|
||||
});
|
||||
|
||||
setLoading(false);
|
||||
}
|
||||
|
||||
fetchPart();
|
||||
}, [id]);
|
||||
|
||||
function updateField(field, value) {
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
setSaving(true);
|
||||
setErrorMsg("");
|
||||
|
||||
let metadata = null;
|
||||
if (form.metadata.trim()) {
|
||||
try {
|
||||
metadata = JSON.parse(form.metadata);
|
||||
} catch (err) {
|
||||
setSaving(false);
|
||||
setErrorMsg("Metadata must be valid JSON.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
manufacturer: form.manufacturer || null,
|
||||
sku: form.sku || null,
|
||||
category: form.category || null,
|
||||
description: form.description || null,
|
||||
metadata,
|
||||
};
|
||||
|
||||
const { error } = await supabaseBrowser
|
||||
.from("parts")
|
||||
.update(payload)
|
||||
.eq("id", id);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
setErrorMsg(error.message || "Failed to save changes.");
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(false);
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
const ok = window.confirm(
|
||||
"Are you sure you want to delete this part? This cannot be undone."
|
||||
);
|
||||
if (!ok) return;
|
||||
|
||||
setDeleting(true);
|
||||
setErrorMsg("");
|
||||
|
||||
const { error } = await supabaseBrowser.from("parts").delete().eq("id", id);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
setErrorMsg(error.message || "Failed to delete part.");
|
||||
setDeleting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/admin/parts");
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <p>Loading part...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">Edit Part</h1>
|
||||
|
||||
<div className="space-y-4 max-w-2xl bg-white p-6 rounded shadow">
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Name *</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.name}
|
||||
onChange={(e) => updateField("name", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Manufacturer</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.manufacturer}
|
||||
onChange={(e) => updateField("manufacturer", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">SKU</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.sku}
|
||||
onChange={(e) => updateField("sku", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Category</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.category}
|
||||
onChange={(e) => updateField("category", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Description</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded min-h-[80px]"
|
||||
value={form.description}
|
||||
onChange={(e) => updateField("description", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">
|
||||
Metadata (JSON){" "}
|
||||
<span className="text-xs text-gray-500">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded font-mono text-sm min-h-[120px]"
|
||||
value={form.metadata}
|
||||
onChange={(e) => updateField("metadata", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMsg && <p className="text-red-600 text-sm">{errorMsg}</p>}
|
||||
|
||||
<div className="flex gap-3 items-center">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || !form.name.trim()}
|
||||
className="px-4 py-2 bg-black text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{saving ? "Saving..." : "Save Changes"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/admin/parts")}
|
||||
className="px-4 py-2 border rounded"
|
||||
>
|
||||
Back to Parts
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
className="ml-auto px-4 py-2 bg-red-600 text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{deleting ? "Deleting..." : "Delete Part"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { supabaseBrowser } from "@/lib/supabaseClient";
|
||||
|
||||
export default function NewPartPage() {
|
||||
const [form, setForm] = useState({
|
||||
name: "",
|
||||
manufacturer: "",
|
||||
sku: "",
|
||||
category: "",
|
||||
description: "",
|
||||
metadata: "", // JSON as text
|
||||
});
|
||||
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const router = useRouter();
|
||||
|
||||
function updateField(field, value) {
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
setSaving(true);
|
||||
setErrorMsg("");
|
||||
|
||||
let metadata = null;
|
||||
if (form.metadata.trim()) {
|
||||
try {
|
||||
metadata = JSON.parse(form.metadata);
|
||||
} catch (err) {
|
||||
setSaving(false);
|
||||
setErrorMsg("Metadata must be valid JSON.");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
manufacturer: form.manufacturer || null,
|
||||
sku: form.sku || null,
|
||||
category: form.category || null,
|
||||
description: form.description || null,
|
||||
metadata,
|
||||
};
|
||||
|
||||
const { error } = await supabaseBrowser.from("parts").insert(payload);
|
||||
|
||||
if (error) {
|
||||
console.error(error);
|
||||
setErrorMsg(error.message || "Failed to save part.");
|
||||
setSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
router.push("/admin/parts");
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold mb-6">Add New Part</h1>
|
||||
|
||||
<div className="space-y-4 max-w-2xl bg-white p-6 rounded shadow">
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Name *</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.name}
|
||||
onChange={(e) => updateField("name", e.target.value)}
|
||||
placeholder="e.g. Alloy Suspension Arm Set"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Manufacturer</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.manufacturer}
|
||||
onChange={(e) => updateField("manufacturer", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">SKU</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.sku}
|
||||
onChange={(e) => updateField("sku", e.target.value)}
|
||||
placeholder="e.g. 53620"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Category</label>
|
||||
<input
|
||||
className="w-full p-2 border rounded"
|
||||
value={form.category}
|
||||
onChange={(e) => updateField("category", e.target.value)}
|
||||
placeholder="e.g. suspension, drivetrain"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">Description</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded min-h-[80px]"
|
||||
value={form.description}
|
||||
onChange={(e) => updateField("description", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block mb-1 font-medium">
|
||||
Metadata (JSON){" "}
|
||||
<span className="text-xs text-gray-500">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
className="w-full p-2 border rounded font-mono text-sm min-h-[100px]"
|
||||
placeholder='e.g. { "material": "aluminium", "color": "blue" }'
|
||||
value={form.metadata}
|
||||
onChange={(e) => updateField("metadata", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errorMsg && <p className="text-red-600 text-sm">{errorMsg}</p>}
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={saving || !form.name.trim()}
|
||||
className="px-4 py-2 bg-black text-white rounded disabled:opacity-50"
|
||||
>
|
||||
{saving ? "Saving..." : "Save Part"}
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push("/admin/parts")}
|
||||
className="px-4 py-2 border rounded"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import Link from "next/link";
|
||||
import { supabaseServer } from "@/lib/supabaseServer";
|
||||
|
||||
export default async function PartsPage() {
|
||||
const { data: parts, error } = await supabaseServer
|
||||
.from("parts")
|
||||
.select("*")
|
||||
.order("name", { ascending: true });
|
||||
|
||||
console.log("here");
|
||||
|
||||
if (error) {
|
||||
console.error("Error loading parts:", error);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between mb-6 items-center">
|
||||
<h1 className="text-3xl font-bold">Parts</h1>
|
||||
<Link
|
||||
href="/admin/parts/new"
|
||||
className="px-4 py-2 bg-black text-white rounded hover:bg-gray-800"
|
||||
>
|
||||
+ Add Part
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{(!parts || parts.length === 0) && (
|
||||
<p className="text-gray-700">
|
||||
No parts found yet. Click “Add Part” to create your first
|
||||
one.
|
||||
</p>
|
||||
)}
|
||||
|
||||
{parts && parts.length > 0 && (
|
||||
<div className="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div className="grid grid-cols-4 gap-4 px-4 py-2 border-b bg-gray-50 text-sm font-semibold">
|
||||
<div>Name</div>
|
||||
<div>Manufacturer</div>
|
||||
<div>SKU</div>
|
||||
<div>Category</div>
|
||||
</div>
|
||||
|
||||
{parts.map((p) => (
|
||||
<Link
|
||||
key={p.id}
|
||||
href={`/admin/parts/${p.id}`}
|
||||
className="grid grid-cols-4 gap-4 px-4 py-3 border-b hover:bg-gray-50 text-sm text-gray-900"
|
||||
>
|
||||
<div className="font-semibold">{p.name}</div>
|
||||
<div>{p.manufacturer || "-"}</div>
|
||||
<div>{p.sku || "-"}</div>
|
||||
<div>{p.category || "-"}</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+240
-43
@@ -1,51 +1,248 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { fetchJSON } from "@/lib/ui/fetch";
|
||||
import ModelCard from "../components/ModelCard";
|
||||
import PartCard from "../components/PartCard";
|
||||
|
||||
export default function CompatibilityPage() {
|
||||
const [query, setQuery] = useState("");
|
||||
const [result, setResult] = useState([]);
|
||||
|
||||
async function compare() {
|
||||
const modelData = await fetchJSON(`/api/compatibility/model/${query}`);
|
||||
const partData = await fetchJSON(`/api/compatibility/part/${query}`);
|
||||
|
||||
setResult(modelData || partData || []);
|
||||
}
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { CATEGORIES } from "@/lib/data/categories";
|
||||
|
||||
function ModeCard({ title, emoji, description, children }) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-3xl font-bold">Compatibility Explorer</h1>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
className="border p-2 rounded w-full"
|
||||
placeholder="Enter modelId or partId"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 text-white rounded"
|
||||
style={{ backgroundColor: "var(--color-primary, #0070f3)" }}
|
||||
onClick={compare}
|
||||
>
|
||||
Compare
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
||||
{result.map((item) =>
|
||||
item.model ? (
|
||||
<ModelCard key={item.model.id} model={item.model} />
|
||||
) : (
|
||||
<PartCard key={item.part.id} part={item.part} />
|
||||
)
|
||||
)}
|
||||
<div className="border rounded-xl p-6 shadow-sm bg-white flex flex-col gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-2xl">{emoji}</div>
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg">{title}</h2>
|
||||
<p className="text-sm text-gray-500">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 flex flex-col gap-3">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CompatibilityPage() {
|
||||
const [models, setModels] = useState([]);
|
||||
const [parts, setParts] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [modelForParts, setModelForParts] = useState("");
|
||||
const [partForModels, setPartForModels] = useState("");
|
||||
const [modelA, setModelA] = useState("");
|
||||
const [modelB, setModelB] = useState("");
|
||||
const [categoryModel, setCategoryModel] = useState("");
|
||||
const [category, setCategory] = useState("");
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
async function load() {
|
||||
try {
|
||||
const [modelsRes, partsRes] = await Promise.all([
|
||||
fetch("/api/models"),
|
||||
fetch("/api/parts"),
|
||||
]);
|
||||
|
||||
const modelsJson = modelsRes.ok ? await modelsRes.json() : [];
|
||||
const partsJson = partsRes.ok ? await partsRes.json() : [];
|
||||
|
||||
setModels(modelsJson || []);
|
||||
setParts(partsJson || []);
|
||||
} catch (e) {
|
||||
console.error("Failed to load models/parts", e);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
load();
|
||||
}, []);
|
||||
|
||||
function handleGoToModelCompatibility() {
|
||||
if (!modelForParts) return;
|
||||
router.push(`/model/${modelForParts}`);
|
||||
}
|
||||
|
||||
function handleGoToPartCompatibility() {
|
||||
if (!partForModels) return;
|
||||
router.push(`/part/${partForModels}`);
|
||||
}
|
||||
|
||||
function handleExploreCategory() {
|
||||
if (!categoryModel || !category) return;
|
||||
router.push(`/category/${categoryModel}/${category}`);
|
||||
}
|
||||
|
||||
function handleCompareModels() {
|
||||
if (!modelA || !modelB) return;
|
||||
// Stubbed for now to avoid broken routes
|
||||
alert("Model comparison view coming soon! (Hotshot vs Supershot, etc.)");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-10">
|
||||
{/* Breadcrumb-ish header */}
|
||||
<nav className="text-sm text-gray-500">
|
||||
<Link href="/" className="hover:underline text-blue-600">
|
||||
Home
|
||||
</Link>{" "}
|
||||
<span>›</span>{" "}
|
||||
<span className="font-semibold text-gray-700">Compatibility Explorer</span>
|
||||
</nav>
|
||||
|
||||
{/* Page Title */}
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">Compatibility Explorer</h1>
|
||||
<p className="text-gray-600 max-w-2xl">
|
||||
Discover cross-compatibility between RC models and parts. Use one of the
|
||||
tools below to explore fitment, upgrades, and shared components.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{loading && (
|
||||
<p className="text-gray-500">Loading models and parts…</p>
|
||||
)}
|
||||
|
||||
{/* Mode Selector Grid */}
|
||||
{!loading && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Mode 1: Model → Compatible Parts */}
|
||||
<ModeCard
|
||||
title="Model → Compatible Parts"
|
||||
emoji="🔧"
|
||||
description="Find every part that fits a specific RC model."
|
||||
>
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={modelForParts}
|
||||
onChange={(e) => setModelForParts(e.target.value)}
|
||||
>
|
||||
<option value="">Select a model…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={handleGoToModelCompatibility}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
||||
disabled={!modelForParts}
|
||||
>
|
||||
Show Compatible Parts
|
||||
</button>
|
||||
</ModeCard>
|
||||
|
||||
{/* Mode 2: Part → Compatible Models */}
|
||||
<ModeCard
|
||||
title="Part → Compatible Models"
|
||||
emoji="🧩"
|
||||
description="See all RC models that this part works with."
|
||||
>
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={partForModels}
|
||||
onChange={(e) => setPartForModels(e.target.value)}
|
||||
>
|
||||
<option value="">Select a part…</option>
|
||||
{parts.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.name} ({p.id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
onClick={handleGoToPartCompatibility}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
||||
disabled={!partForModels}
|
||||
>
|
||||
Show Compatible Models
|
||||
</button>
|
||||
</ModeCard>
|
||||
|
||||
{/* Mode 3: Compare Two Models (stubbed) */}
|
||||
<ModeCard
|
||||
title="Compare Two Models"
|
||||
emoji="🔍"
|
||||
description="See shared and unique parts between two models. (Coming soon)"
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={modelA}
|
||||
onChange={(e) => setModelA(e.target.value)}
|
||||
>
|
||||
<option value="">Select Model A…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={modelB}
|
||||
onChange={(e) => setModelB(e.target.value)}
|
||||
>
|
||||
<option value="">Select Model B…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleCompareModels}
|
||||
className="px-4 py-2 bg-gray-300 text-gray-700 rounded-lg cursor-not-allowed"
|
||||
disabled
|
||||
>
|
||||
Compare (Coming Soon)
|
||||
</button>
|
||||
</ModeCard>
|
||||
|
||||
{/* Mode 4: Explore Categories */}
|
||||
<ModeCard
|
||||
title="Explore by Category"
|
||||
emoji="📂"
|
||||
description="Browse shocks, drivetrain, chassis, and more for a model."
|
||||
>
|
||||
<div className="flex flex-col gap-2">
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={categoryModel}
|
||||
onChange={(e) => setCategoryModel(e.target.value)}
|
||||
>
|
||||
<option value="">Select a model…</option>
|
||||
{models.map((m) => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.name} ({m.brand})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
className="border rounded-lg px-3 py-2"
|
||||
value={category}
|
||||
onChange={(e) => setCategory(e.target.value)}
|
||||
>
|
||||
<option value="">Select a category…</option>
|
||||
{CATEGORIES.map((cat) => (
|
||||
<option key={cat} value={cat}>
|
||||
{cat}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleExploreCategory}
|
||||
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
|
||||
disabled={!categoryModel || !category}
|
||||
>
|
||||
Explore Category
|
||||
</button>
|
||||
</ModeCard>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,3 +5,4 @@ body {
|
||||
padding: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
$background: #ffffff;
|
||||
$text-color: #111111;
|
||||
|
||||
$foreground: #111111;
|
||||
|
||||
$primary: #0070f3;
|
||||
$secondary: #7928ca;
|
||||
|
||||
@@ -10,4 +12,4 @@ $nav-bg: #fafafa;
|
||||
:root {
|
||||
--color-primary: #0070f3;
|
||||
--color-secondary: #7928ca;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
|
||||
export const supabaseBrowser = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
|
||||
);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
|
||||
export const supabaseServer = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL,
|
||||
process.env.SUPABASE_SERVICE_ROLE_KEY
|
||||
);
|
||||
Reference in New Issue
Block a user