rc-compat/bash-setup-scripts/generate_admin_ui.sh

#!/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!"