create-nextjs-stack 0.1.0

package/templates/admin/components/admin/AdminLayoutClient.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Sidebar from "./Sidebar";
+import ToastProvider from "./ToastProvider";
+
+export default function AdminLayoutClient({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex min-h-screen bg-gray-100">
+      <Sidebar />
+      <main className="flex-1 p-8 overflow-y-auto h-screen">
+        <div className="max-w-7xl mx-auto">
+          {children}
+        </div>
+      </main>
+      <ToastProvider />
+    </div>
+  );
+}

package/templates/admin/components/admin/DeleteModal.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { AlertTriangle, X } from "lucide-react";
+
+interface DeleteModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title?: string;
+  description?: string;
+  isLoading?: boolean;
+}
+
+export default function DeleteModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title = "Delete Resource",
+  description = "Are you sure you want to delete this resource? This action cannot be undone.",
+  isLoading = false,
+}: DeleteModalProps) {
+  const [show, setShow] = useState(isOpen);
+
+  useEffect(() => {
+    setShow(isOpen);
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-0">
+      {/* Backdrop */}
+      <div 
+        className="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity" 
+        onClick={!isLoading ? onClose : undefined}
+      />
+
+      {/* Modal Panel */}
+      <div className="relative bg-white rounded-lg shadow-xl w-full max-w-md overflow-hidden transform transition-all animate-in fade-in zoom-in-95 duration-200">
+        <div className="p-6">
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
+              <AlertTriangle className="w-5 h-5 text-red-600" />
+            </div>
+            <div className="flex-1">
+              <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                {title}
+              </h3>
+              <p className="text-sm text-gray-500 leading-relaxed">
+                {description}
+              </p>
+            </div>
+            <button
+              onClick={onClose}
+              disabled={isLoading}
+              className="text-gray-400 hover:text-gray-500 transition-colors"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-gray-50 px-6 py-4 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200 transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors disabled:opacity-50 flex items-center gap-2"
+          >
+            {isLoading ? (
+              <>
+                <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                Deleting...
+              </>
+            ) : (
+              "Delete"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/admin/components/admin/FormLayout.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useFormContext } from "react-hook-form";
+import SubmitButton from "./SubmitButton";
+import { getRelationOptions } from "@/app/actions/resources";
+import { useEffect, useState } from "react";
+import ImageUpload from "./ImageUpload";
+
+interface FormLayoutProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fields: any[];
+  title: string;
+  isSubmitting: boolean;
+}
+
+export default function FormLayout({ fields, title, isSubmitting }: FormLayoutProps) {
+  const { register, formState: { errors }, control, watch } = useFormContext();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [relationOptions, setRelationOptions] = useState<Record<string, any[]>>({});
+
+  useEffect(() => {
+    // Fetch relation options
+    fields.forEach(async (field) => {
+      if (field.type === 'select' && field.relation) {
+        try {
+          const data = await getRelationOptions(
+            field.relation.table,
+            field.relation.display
+          );
+          setRelationOptions(prev => ({ ...prev, [field.name]: data }));
+        } catch (error) {
+          console.error('Failed to fetch options', error);
+        }
+      }
+    });
+  }, [fields]);
+
+  return (
+    <div className="bg-white rounded-lg shadow p-6">
+      <h2 className="text-xl font-semibold mb-6">{title}</h2>
+      <div className="space-y-6">
+        {fields.map((field) => (
+          <div key={field.name}>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {field.label}
+              {field.required && <span className="text-red-500 ml-1">*</span>}
+            </label>
+
+            {field.type === 'textarea' ? (
+              <textarea
+                {...register(field.name)}
+                rows={4}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
+              />
+            ) : field.type === 'boolean' ? (
+              <input
+                type="checkbox"
+                {...register(field.name)}
+                className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+              />
+            ) : field.type === 'select' ? (
+                <select
+                {...register(field.name)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
+                >
+                <option value="">Select...</option>
+                {field.options ? (
+                    field.options.map((opt: { value: string; label: string }) => (
+                    <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </option>
+                    ))
+                ) : (
+                    relationOptions[field.name]?.map((opt: { id: string; [key: string]: string }) => (
+                    <option key={opt.id} value={opt.id}>
+                        {opt[field.relation!.display]}
+                    </option>
+                    ))
+                )}
+                </select>
+            ) : field.type === 'image' ? (
+                <ImageUpload 
+                    name={field.name}
+                    control={control}
+                    defaultValue={watch(field.name)}
+                />
+            ) : (
+              <input
+                type={field.type}
+                {...register(field.name)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"
+              />
+            )}
+            
+            {errors[field.name] && (
+              <p className="text-red-500 text-sm mt-1">
+                {errors[field.name]?.message as string}
+              </p>
+            )}
+          </div>
+        ))}
+
+        <div className="pt-4">
+          <SubmitButton
+            isSubmitting={isSubmitting}
+            label="Save"
+            submittingLabel="Saving..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/admin/components/admin/ImageUpload.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Control, Controller } from "react-hook-form";
+import { Image as ImageIcon, Upload, X, Loader2 } from "lucide-react";
+import Image from "next/image";
+import { uploadImage } from "@/app/actions/upload";
+import { useState, useRef, useEffect } from "react";
+import { toast } from "react-toastify";
+
+interface ImageUploadProps {
+  name: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  control: Control<any>;
+  defaultValue?: string;
+}
+
+export default function ImageUpload({ name, control, defaultValue }: ImageUploadProps) {
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  const handleUpload = async (file: File, onChange: (value: string) => void) => {
+    setIsUploading(true);
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const result = await uploadImage(formData);
+      
+      // Check if mounted before updating state
+      if (!isMounted.current) return;
+
+      if (result.error) {
+        toast.error(result.error);
+      } else if (result.url) {
+        onChange(result.url);
+        toast.success("Image uploaded successfully");
+      }
+    } catch (error) {
+       console.error(error);
+       if (isMounted.current) toast.error("Upload failed");
+    } finally {
+      if (isMounted.current) setIsUploading(false);
+    }
+  };
+
+  const onFileInputChange = (e: React.ChangeEvent<HTMLInputElement>, onChange: (value: string) => void) => {
+    if (e.target.files && e.target.files[0]) {
+      handleUpload(e.target.files[0], onChange);
+    }
+  };
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field: { onChange, value } }) => {
+        const currentImage = value || defaultValue;
+
+        return (
+          <div className="space-y-4">
+            {!currentImage ? (
+                <div 
+                  onClick={() => fileInputRef.current?.click()}
+                  className="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center cursor-pointer hover:border-blue-500 transition-colors bg-gray-50 hover:bg-white"
+                >
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    className="hidden"
+                    onChange={(e) => onFileInputChange(e, onChange)}
+                  />
+                  
+                  {isUploading ? (
+                    <div className="flex flex-col items-center">
+                        <Loader2 className="w-8 h-8 text-blue-500 animate-spin mb-2" />
+                        <p className="text-sm text-gray-500">Uploading...</p>
+                    </div>
+                  ) : (
+                    <>
+                        <Upload className="w-8 h-8 text-gray-400 mb-2" />
+                        <p className="text-sm text-gray-500 font-medium">
+                            Click to upload image
+                        </p>
+                        <p className="text-xs text-gray-400 mt-1">
+                            SVG, PNG, JPG or GIF (max 5MB)
+                        </p>
+                    </>
+                  )}
+                </div>
+            ) : (
+                <div className="relative w-full h-64 rounded-lg overflow-hidden border border-gray-200 bg-gray-100 group">
+                    <Image
+                        src={currentImage}
+                        alt="Upload preview"
+                        fill
+                        className="object-contain"
+                    />
+                    <div className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                            type="button"
+                            onClick={() => onChange("")}
+                            className="bg-red-500 text-white p-1 rounded-full hover:bg-red-600 transition-colors shadow-lg"
+                        >
+                            <X className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+            )}
+            
+            {/* Fallback Input for manual URL entry (optional, hidden by default but good for debugging or external URLs) */}
+            <div className="mt-2 text-xs text-gray-400 flex justify-end">
+                <button 
+                    type="button" 
+                    onClick={() => {
+                        const url = prompt("Enter image URL manually:", currentImage);
+                        if (url !== null) onChange(url);
+                    }}
+                    className="hover:underline"
+                >
+                    Enter URL manually
+                </button>
+            </div>
+          </div>
+        );
+      }}
+    />
+  );
+}

package/templates/admin/components/admin/ResourceFormClient.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useForm, FormProvider } from "react-hook-form";
+import FormLayout from "./FormLayout";
+import { ResourceConfig } from "@/config/resources";
+import { Trash2 } from "lucide-react";
+import { useResource } from "@/hooks/useResource";
+
+interface ResourceFormClientProps {
+  config: ResourceConfig;
+  mode: "create" | "update";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialData?: any;
+  id?: string;
+}
+
+export default function ResourceFormClient({
+  config,
+  mode,
+  initialData,
+  id,
+}: ResourceFormClientProps) {
+  const { create, update, remove, isSubmitting, isDeleting } = useResource(config);
+  
+  const methods = useForm({
+    defaultValues: initialData || {},
+  });
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const onSubmit = async (data: any) => {
+    if (mode === "create") {
+      await create(data);
+    } else {
+      await update(id!, data);
+    }
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        {mode === 'update' && (
+             <div className="flex justify-end mb-4">
+                 <button 
+                    type="button"
+                    onClick={() => remove(id!)}
+                    disabled={isDeleting}
+                    className="flex items-center text-red-600 hover:text-red-800 px-3 py-2 rounded bg-red-50 hover:bg-red-100 transition-colors"
+                 >
+                    <Trash2 className="w-4 h-4 mr-2" />
+                    {isDeleting ? "Deleting..." : "Delete Record"}
+                 </button>
+             </div>
+        )}
+        <FormLayout
+          fields={config.fields}
+          title={`${mode === "create" ? "New" : "Edit"} ${config.singular}`}
+          isSubmitting={isSubmitting}
+        />
+      </form>
+    </FormProvider>
+  );
+}

package/templates/admin/components/admin/Sidebar.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { resources } from "@/config/resources";
+import * as Icons from "lucide-react";
+import { LogOut } from "lucide-react";
+import { createBrowserClient } from "@supabase/ssr";
+import { useRouter } from "next/navigation";
+
+export default function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleLogout = async () => {
+    const supabase = createBrowserClient(
+      process.env.NEXT_PUBLIC_SUPABASE_URL!,
+      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+    );
+    await supabase.auth.signOut();
+    router.push("/login");
+    router.refresh();
+  };
+
+  return (
+    <div className="flex flex-col w-64 bg-gray-900 h-screen text-white sticky top-0">
+      <div className="p-6 border-b border-gray-800">
+        <h1 className="text-2xl font-bold">Admin Panel</h1>
+      </div>
+      <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
+        <Link
+          href="/dashboard"
+          className={`flex items-center px-4 py-3 rounded-lg transition-colors ${
+            pathname === "/dashboard"
+              ? "bg-blue-600 text-white"
+              : "text-gray-400 hover:bg-gray-800 hover:text-white"
+          }`}
+        >
+          <Icons.LayoutDashboard className="w-5 h-5 mr-3" />
+          Dashboard
+        </Link>
+
+        {resources.map((resource) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const Icon = (Icons as any)[resource.icon] || Icons.Box;
+          const isActive = pathname.startsWith(resource.path);
+          return (
+            <Link
+              key={resource.name}
+              href={resource.path}
+              className={`flex items-center px-4 py-3 rounded-lg transition-colors ${
+                isActive
+                  ? "bg-blue-600 text-white"
+                  : "text-gray-400 hover:bg-gray-800 hover:text-white"
+              }`}
+            >
+              <Icon className="w-5 h-5 mr-3" />
+              {resource.plural}
+            </Link>
+          );
+        })}
+      </nav>
+      <div className="p-4 border-t border-gray-800">
+        <button 
+          onClick={handleLogout}
+          className="w-full flex items-center px-4 py-2 text-sm text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
+        >
+          <LogOut className="w-4 h-4 mr-2" />
+          Logout
+        </button>
+      </div>
+    </div>
+  );
+}

package/templates/admin/components/admin/SubmitButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+
+interface SubmitButtonProps {
+  isSubmitting: boolean;
+  label: string;
+  submittingLabel: string;
+  className?: string;
+}
+
+export default function SubmitButton({
+  isSubmitting,
+  label,
+  submittingLabel,
+  className = "",
+}: SubmitButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={isSubmitting}
+      className={`flex items-center justify-center w-full sm:w-auto px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${className}`}
+    >
+      {isSubmitting ? (
+        <>
+          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+          {submittingLabel}
+        </>
+      ) : (
+        label
+      )}
+    </button>
+  );
+}

package/templates/admin/components/admin/ToastProvider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+export default function ToastProvider() {
+  return <ToastContainer position="bottom-right" theme="colored" />;
+}

package/templates/admin/components/categories/CategoryForm.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import ResourceFormClient from "@/components/admin/ResourceFormClient";
+import { resources } from "@/config/resources";
+
+interface CategoryFormProps {
+  mode: "create" | "update";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialData?: any;
+  id?: string;
+}
+
+export default function CategoryForm({ mode, initialData, id }: CategoryFormProps) {
+  const config = resources.find((r) => r.name === "categories")!;
+
+  return (
+    <ResourceFormClient
+      config={config}
+      mode={mode}
+      initialData={initialData}
+      id={id}
+    />
+  );
+}

package/templates/admin/components/categories/CategoryList.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import Link from "next/link";
+import { ResourceConfig } from "@/config/resources";
+import { useResource } from "@/hooks/useResource";
+import { Pencil, Trash2 } from "lucide-react";
+
+interface CategoryListProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  items: any[];
+  config: ResourceConfig;
+}
+
+import { useState } from "react";
+import DeleteModal from "@/components/admin/DeleteModal";
+
+export default function CategoryList({ items, config }: CategoryListProps) {
+  const { remove, isDeleting } = useResource(config);
+  const [deleteId, setDeleteId] = useState<string | null>(null);
+
+  const handleDelete = async () => {
+    if (deleteId) {
+      const success = await remove(deleteId);
+      if (success) {
+        setDeleteId(null);
+      }
+    }
+  };
+
+  return (
+    <>
+      <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>
+              <th className="px-6 py-3">Title</th>
+              <th className="px-6 py-3">Slug</th>
+              <th className="px-6 py-3">Featured</th>
+              <th className="px-6 py-3">Published</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">
+                <td className="px-6 py-4 text-gray-900 font-medium">{item.title}</td>
+                <td className="px-6 py-4 text-gray-500">{item.slug}</td>
+                <td className="px-6 py-4">
+                  <span
+                    className={`px-2 py-1 text-xs rounded-full ${
+                      item.featured
+                        ? "bg-yellow-100 text-yellow-700"
+                        : "bg-gray-100 text-gray-600"
+                    }`}
+                  >
+                    {item.featured ? "Yes" : "No"}
+                  </span>
+                </td>
+                <td className="px-6 py-4">
+                  <span
+                    className={`px-2 py-1 text-xs rounded-full ${
+                      item.published
+                        ? "bg-green-100 text-green-700"
+                        : "bg-gray-100 text-gray-600"
+                    }`}
+                  >
+                    {item.published ? "Published" : "Draft"}
+                  </span>
+                </td>
+                <td className="px-6 py-4 text-right">
+                  <div className="flex justify-end gap-2">
+                    <Link
+                        href={`/categories/${item.id}`}
+                        className="flex items-center text-indigo-600 hover:text-indigo-900 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-md transition-colors duration-200"
+                        title="Edit"
+                    >
+                        <Pencil className="w-4 h-4" />
+                    </Link>
+                    <button
+                        onClick={() => setDeleteId(item.id)}
+                        className="flex items-center text-red-600 hover:text-red-900 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-md transition-colors duration-200"
+                        title="Delete"
+                    >
+                        <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {items?.length === 0 && (
+              <tr>
+                <td colSpan={5} className="px-6 py-8 text-center text-gray-500">
+                  No categories found.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      </div>
+
+      <DeleteModal
+        isOpen={!!deleteId}
+        onClose={() => setDeleteId(null)}
+        onConfirm={handleDelete}
+        isLoading={isDeleting}
+        title="Delete Category"
+        description="Are you sure you want to delete this category? This action cannot be undone."
+      />
+    </>
+  );
+}