update admin pages for models and parts
This commit is contained in:
Executable
+36
@@ -0,0 +1,36 @@
|
||||
#!/bin/zsh
|
||||
|
||||
echo "🔧 Fixing incorrect '@/src/...' imports..."
|
||||
|
||||
# Search for JS, JSX, TS, TSX files under src/ only
|
||||
FILES=$(find src -type f \( -name "*.js" -o -name "*.jsx" -o -name "*.ts" -o -name "*.tsx" \))
|
||||
|
||||
for FILE in $FILES; do
|
||||
echo "📄 Checking $FILE"
|
||||
|
||||
# Fix @/src/lib → @/lib
|
||||
if grep -q '@/src/lib' "$FILE"; then
|
||||
echo " ➜ Fixing '@/src/lib' → '@/lib'"
|
||||
sed -i '' 's#@/src/lib#@/lib#g' "$FILE"
|
||||
fi
|
||||
|
||||
# Fix @/src/app → @/app
|
||||
if grep -q '@/src/app' "$FILE"; then
|
||||
echo " ➜ Fixing '@/src/app' → '@/app'"
|
||||
sed -i '' 's#@/src/app#@/app#g' "$FILE"
|
||||
fi
|
||||
|
||||
# Fix @/src/components → @/components
|
||||
if grep -q '@/src/components' "$FILE"; then
|
||||
echo " ➜ Fixing '@/src/components' → '@/components'"
|
||||
sed -i '' 's#@/src/components#@/components#g' "$FILE"
|
||||
fi
|
||||
|
||||
# Fix @/src/styles → @/styles
|
||||
if grep -q '@/src/styles' "$FILE"; then
|
||||
echo " ➜ Fixing '@/src/styles' → '@/styles'"
|
||||
sed -i '' 's#@/src/styles#@/styles#g' "$FILE"
|
||||
fi
|
||||
done
|
||||
|
||||
echo "🎉 Import alias fixes complete!"
|
||||
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!"
|
||||
Reference in New Issue
Block a user