organized the dev tools dahsboard componetns and connected them tothe backend slightly. Still working on how to display combos as a tree, then the inspector should follow.

src/app/api/dev/vor/cards/[data_id]/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server";
+import { Pool } from "pg";
+
+const db = new Pool({
+  connectionString: process.env.DB_STRING!
+})
+
+export async function GET(
+  req: NextRequest, 
+  { params }: { params: Promise<{ data_id: string }> }
+){
+  try{
+    const { data_id } = await params;
+    if(!data_id){
+      return NextResponse.json({ message: "Invalid search parameter:" + data_id }, { status: 400, statusText: "Malformed request" })
+    }
+    
+    const combosRes = await db.query(
+      `WITH RECURSIVE t AS (
+          SELECT parent_data_id, combo_data_id, result_data_id, 1 AS depth
+          FROM combos
+          WHERE parent_data_id = $1
+          UNION ALL
+          SELECT c.parent_data_id, c.combo_data_id, c.result_data_id, t.depth + 1
+          FROM combos c
+          JOIN t on c.parent_data_id = t.result_data_id
+          WHERE t.depth < 3
+        )
+        SELECT * FROM t ORDER BY depth, parent_data_id, combo_data_id;`, [data_id]
+    );
+    return NextResponse.json(combosRes.rows ?? [])
+
+  }catch(error){
+    return NextResponse.json({ message: "Could not GET combos: " + error }, { status: 500, statusText: "Serverside exception" })
+  }
+  
+
+}

src/app/api/dev/vor/cards/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server"
+import { Pool } from "pg"
+
+const db = new Pool({
+  connectionString: process.env.DB_STRING!
+})
+
+export async function GET(){
+  try{
+    const result = await db.query("SELECT * FROM cards;")
+    console.log("Got some combos")
+    return NextResponse.json(result.rows ?? [])
+  }catch(err){
+    console.error("Could not GET cards:", err)
+    return NextResponse.json( { message: "Serverside exception occurred " + err }, { status: 500 } )
+  }
+}
+