create-nextjs-stack 0.1.0

package/templates/admin/app/(dashboard)/[resource]/page.tsx

@@ -0,0 +1,131 @@
+import { resources } from "@/config/resources";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import * as Icons from "lucide-react";
+import Image from "next/image";
+import { getService } from "@/lib/services";
+
+interface PageProps {
+  params: {
+    resource: string;
+  };
+}
+
+export default async function ResourceListPage({ params }: PageProps) {
+  const resourceName = params.resource;
+  const config = resources.find((r) => r.name === resourceName);
+
+  if (!config) {
+    return notFound();
+  }
+
+  const service = getService(config.table);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let items: any[] = [];
+  try {
+    items = await service.getAll();
+  } catch (error) {
+    console.error(error);
+  }
+
+  // Helper to resolve related data (basic implementation)
+  // For production, you might want to join tables in the query
+  // or fetch relations separately.
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">{config.plural}</h1>
+        <Link
+          href={`/${resourceName}/new`}
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+        >
+          Add {config.singular}
+        </Link>
+      </div>
+
+      <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+            <thead className="bg-gray-50 text-gray-500 uppercase text-xs font-semibold">
+              <tr>
+                {config.fields
+                  .filter((f) => f.type !== "textarea") // Skip long text in table
+                  .slice(0, 5) // Limit columns
+                  .map((field) => (
+                    <th key={field.name} className="px-6 py-3">
+                      {field.label}
+                    </th>
+                  ))}
+                <th className="px-6 py-3 text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200">
+              {items?.map((item) => (
+                <tr
+                  key={item.id}
+                  className="hover:bg-gray-50 transition"
+                >
+                  {config.fields
+                    .filter((f) => f.type !== "textarea")
+                    .slice(0, 5)
+                    .map((field) => (
+                      <td
+                        key={field.name}
+                        className="px-6 py-4 text-gray-900"
+                      >
+                        {field.type === "image" ? (
+                          <div className="relative w-10 h-10 bg-gray-100 rounded overflow-hidden">
+                            {item[field.name] ? (
+                              <Image
+                                src={item[field.name]}
+                                alt="Thumbnail"
+                                fill
+                                className="object-cover"
+                              />
+                            ) : (
+                                <span className="text-xs text-gray-400 flex items-center justify-center h-full">No Img</span>
+                            )}
+                          </div>
+                        ) : field.type === "boolean" ? (
+                          <span
+                            className={`px-2 py-1 text-xs rounded-full ${
+                              item[field.name]
+                                ? "bg-green-100 text-green-700"
+                                : "bg-gray-100 text-gray-600"
+                            }`}
+                          >
+                            {item[field.name] ? "Yes" : "No"}
+                          </span>
+                        ) : (
+                          <span className="text-sm">
+                            {/* Handle objects/arrays if needed */}
+                            {String(item[field.name] || "-")}
+                          </span>
+                        )}
+                      </td>
+                    ))}
+                  <td className="px-6 py-4 text-right">
+                    <Link
+                      href={`/${resourceName}/${item.id}`}
+                      className="text-blue-600 hover:text-blue-800 font-medium text-sm"
+                    >
+                      Edit
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+              {items?.length === 0 && (
+                <tr>
+                  <td colSpan={10} className="px-6 py-8 text-center text-gray-500">
+                    No records found.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/categories/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { getService } from "@/lib/services";
+import { notFound } from "next/navigation";
+import CategoryForm from "@/components/categories/CategoryForm";
+
+export default async function EditCategoryPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const service = getService("categories");
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let item: any = null;
+  try {
+    item = await service.getById(id);
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!item) {
+    return notFound();
+  }
+
+  return <CategoryForm mode="update" initialData={item} id={id} />;
+}

package/templates/admin/app/(dashboard)/categories/new/page.tsx

@@ -0,0 +1,5 @@
+import CategoryForm from "@/components/categories/CategoryForm";
+
+export default function NewCategoryPage() {
+  return <CategoryForm mode="create" />;
+}

package/templates/admin/app/(dashboard)/categories/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { getService } from "@/lib/services";
+import CategoryList from "@/components/categories/CategoryList";
+import { resources } from "@/config/resources";
+
+export default async function CategoriesPage() {
+  const service = getService("categories");
+  const config = resources.find((r) => r.name === "categories")!;
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let items: any[] = [];
+  try {
+    items = await service.getAll();
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Categories</h1>
+        <Link
+          href="/categories/new"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+        >
+          Add Category
+        </Link>
+      </div>
+
+      <CategoryList items={items} config={config} />
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/clients/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { getService } from "@/lib/services";
+import { notFound } from "next/navigation";
+import ClientForm from "@/components/clients/ClientForm";
+
+export default async function EditClientPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const service = getService("clients");
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let item: any = null;
+  try {
+    item = await service.getById(id);
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!item) {
+    return notFound();
+  }
+
+  return <ClientForm mode="update" initialData={item} id={id} />;
+}

package/templates/admin/app/(dashboard)/clients/new/page.tsx

@@ -0,0 +1,5 @@
+import ClientForm from "@/components/clients/ClientForm";
+
+export default function NewClientPage() {
+  return <ClientForm mode="create" />;
+}

package/templates/admin/app/(dashboard)/clients/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { getService } from "@/lib/services";
+import ClientList from "@/components/clients/ClientList";
+import { resources } from "@/config/resources";
+
+export default async function ClientsPage() {
+  const service = getService("clients");
+  const config = resources.find((r) => r.name === "clients")!;
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let items: any[] = [];
+  try {
+    items = await service.getAll();
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Clients</h1>
+        <Link
+          href="/clients/new"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+        >
+          Add Client
+        </Link>
+      </div>
+
+      <ClientList items={items} config={config} />
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,45 @@
+import { resources } from "@/config/resources";
+import { getServerClient } from "@/lib/supabase/server";
+import * as Icons from "lucide-react";
+
+export default async function DashboardPage() {
+  const supabase = await getServerClient();
+  
+  const stats = await Promise.all(
+    resources.map(async (resource) => {
+      const { count } = await supabase
+        .from(resource.table)
+        .select("*", { count: "exact", head: true });
+      return {
+        label: resource.plural,
+        count: count || 0,
+        icon: resource.icon,
+      };
+    })
+  );
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-6">Dashboard</h1>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {stats.map((stat) => {
+           // eslint-disable-next-line @typescript-eslint/no-explicit-any
+           const Icon = (Icons as any)[stat.icon] || Icons.Box;
+           return (
+            <div key={stat.label} className="bg-white p-6 rounded-lg shadow">
+              <div className="flex items-center justify-between">
+                <div>
+                    <h3 className="text-gray-500 text-sm font-medium">{stat.label}</h3>
+                    <p className="text-3xl font-bold text-gray-900 mt-1">{stat.count}</p>
+                </div>
+                <div className="p-3 bg-blue-100 rounded-full">
+                    <Icon className="w-6 h-6 text-blue-600" />
+                </div>
+              </div>
+            </div>
+           );
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/layout.tsx

@@ -0,0 +1,13 @@
+import AdminLayoutClient from "@/components/admin/AdminLayoutClient";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AdminLayoutClient>
+      {children}
+    </AdminLayoutClient>
+  );
+}

package/templates/admin/app/(dashboard)/products/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { getService } from "@/lib/services";
+import { notFound } from "next/navigation";
+import ProductForm from "@/components/products/ProductForm";
+
+export default async function EditProductPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const service = getService("products");
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let item: any = null;
+  try {
+    item = await service.getById(id);
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!item) {
+    return notFound();
+  }
+
+  return <ProductForm mode="update" initialData={item} id={id} />;
+}

package/templates/admin/app/(dashboard)/products/new/page.tsx

@@ -0,0 +1,5 @@
+import ProductForm from "@/components/products/ProductForm";
+
+export default function NewProductPage() {
+  return <ProductForm mode="create" />;
+}

package/templates/admin/app/(dashboard)/products/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { getService } from "@/lib/services";
+import ProductList from "@/components/products/ProductList";
+import { resources } from "@/config/resources";
+
+export default async function ProductsPage() {
+  const service = getService("products");
+  const config = resources.find((r) => r.name === "products")!;
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let items: any[] = [];
+  try {
+    items = await service.getAll();
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Products</h1>
+        <Link
+          href="/products/new"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+        >
+          Add Product
+        </Link>
+      </div>
+
+      <ProductList items={items} config={config} />
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/projects/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { getService } from "@/lib/services";
+import { notFound } from "next/navigation";
+import ProjectForm from "@/components/projects/ProjectForm";
+
+export default async function EditProjectPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const service = getService("projects");
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let item: any = null;
+  try {
+    item = await service.getById(id);
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!item) {
+    return notFound();
+  }
+
+  return <ProjectForm mode="update" initialData={item} id={id} />;
+}

package/templates/admin/app/(dashboard)/projects/new/page.tsx

@@ -0,0 +1,5 @@
+import ProjectForm from "@/components/projects/ProjectForm";
+
+export default function NewProjectPage() {
+  return <ProjectForm mode="create" />;
+}

package/templates/admin/app/(dashboard)/projects/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { getService } from "@/lib/services";
+import ProjectList from "@/components/projects/ProjectList";
+import { resources } from "@/config/resources";
+
+export default async function ProjectsPage() {
+  const service = getService("projects");
+  const config = resources.find((r) => r.name === "projects")!;
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let items: any[] = [];
+  try {
+    items = await service.getAll();
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Projects</h1>
+        <Link
+          href="/projects/new"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+        >
+          Add Project
+        </Link>
+      </div>
+
+      <ProjectList items={items} config={config} />
+    </div>
+  );
+}

package/templates/admin/app/(dashboard)/users/[id]/page.tsx

@@ -0,0 +1,22 @@
+import { getService } from "@/lib/services";
+import { notFound } from "next/navigation";
+import UserForm from "@/components/users/UserForm";
+
+export default async function EditUserPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params;
+  const service = getService("users");
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let item: any = null;
+  try {
+    item = await service.getById(id);
+  } catch (error) {
+    console.error(error);
+  }
+
+  if (!item) {
+    return notFound();
+  }
+
+  return <UserForm mode="update" initialData={item} id={id} />;
+}

package/templates/admin/app/(dashboard)/users/new/page.tsx

@@ -0,0 +1,5 @@
+import UserForm from "@/components/users/UserForm";
+
+export default function NewUserPage() {
+  return <UserForm mode="create" />;
+}

package/templates/admin/app/(dashboard)/users/page.tsx

@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { getService } from "@/lib/services";
+import UserList from "@/components/users/UserList";
+import { resources } from "@/config/resources";
+
+export default async function UsersPage() {
+  const service = getService("users");
+  const config = resources.find((r) => r.name === "users")!;
+  
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let items: any[] = [];
+  try {
+    items = await service.getAll();
+  } catch (error) {
+    console.error(error);
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Users</h1>
+        <Link
+          href="/users/new"
+          className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+        >
+          Add User
+        </Link>
+      </div>
+
+      <UserList items={items} config={config} />
+    </div>
+  );
+}

package/templates/admin/app/actions/resources.ts

@@ -0,0 +1,46 @@
+"use server";
+
+import { getService } from "@/lib/services";
+import { revalidatePath } from "next/cache";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getRelationOptions(table: string, displayField: string): Promise<any[]> {
+  const service = getService(table);
+  return await service.getOptions(displayField);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function createResource(table: string, data: any) {
+    try {
+        const service = getService(table);
+        const result = await service.create(data);
+        revalidatePath(`/${table}`);
+        return { data: result };
+    } catch (error: any) {
+        return { error: error.message || "Failed to create resource" };
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function updateResource(table: string, id: string, data: any) {
+    try {
+        const service = getService(table);
+        const result = await service.update(id, data);
+        revalidatePath(`/${table}`);
+        revalidatePath(`/${table}/${id}`);
+        return { data: result };
+    } catch (error: any) {
+        return { error: error.message || "Failed to update resource" };
+    }
+}
+
+export async function deleteResource(table: string, id: string) {
+    try {
+        const service = getService(table);
+        await service.delete(id);
+        revalidatePath(`/${table}`);
+        return { success: true };
+    } catch (error: any) {
+        return { error: error.message || "Failed to delete resource" };
+    }
+}

package/templates/admin/app/actions/upload.ts

@@ -0,0 +1,58 @@
+"use server";
+
+import { v2 as cloudinary } from "cloudinary";
+
+// Parse CLOUDINARY_URL manually to ensure config is correct
+// This runs when the module is loaded
+if (process.env.CLOUDINARY_URL) {
+  const matcher = /cloudinary:\/\/([^:]+):([^@]+)@(.+)/;
+  const match = process.env.CLOUDINARY_URL.match(matcher);
+  if (match) {
+    const [, apiKey, apiSecret, cloudName] = match;
+    cloudinary.config({
+      cloud_name: cloudName,
+      api_key: apiKey,
+      api_secret: apiSecret,
+    });
+  }
+} else {
+  cloudinary.config({
+    cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
+    api_key: process.env.CLOUDINARY_API_KEY,
+    api_secret: process.env.CLOUDINARY_API_SECRET,
+  });
+}
+
+export async function uploadImage(formData: FormData) {
+  const file = formData.get("file") as File;
+
+  if (!file) {
+    return { error: "No file provided" };
+  }
+
+  // Debug: Log config state (safe)
+  const config = cloudinary.config();
+  console.log("Active Cloudinary Config:", {
+    cloud_name: config.cloud_name,
+    api_key: config.api_key ? "HIDDEN (Set)" : "MISSING",
+    api_secret: config.api_secret ? "HIDDEN (Set)" : "MISSING",
+  });
+
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    // Try using upload instead of upload_stream for better error handling
+    const base64 = `data:${file.type};base64,${buffer.toString('base64')}`;
+    
+    const result = await cloudinary.uploader.upload(base64, {
+      folder: "admin_uploads",
+      resource_type: "auto"
+    });
+
+    return { url: result.secure_url };
+  } catch (error) {
+    console.error("Upload error:", error);
+    return { error: "Failed to upload image" };
+  }
+}

package/templates/admin/app/globals.css

@@ -0,0 +1,23 @@
+@import "tailwindcss";
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

package/templates/admin/app/layout.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import "react-toastify/dist/ReactToastify.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Admin Panel",
+  description: "Supabase Admin Template",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

package/templates/admin/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/dashboard");
+}