create-nextjs-stack 0.1.1 → 0.1.4

package/templates/web/src/lib/services/projects.service.ts

@@ -1,10 +1,10 @@
-import { getServerClient } from "@/lib/supabase/server";
+import { getAdminClient } from "@/lib/supabase/server";
 
 export class ProjectService {
   private static table = "projects";
 
   static async getAll() {
-    const supabase = await getServerClient();
+    const supabase = await getAdminClient();
     const { data, error } = await supabase
       .from(this.table)
       .select("*, clients(name, logo_url)")
@@ -20,7 +20,7 @@ export class ProjectService {
   }
 
   static async getBySlug(slug: string) {
-    const supabase = await getServerClient();
+    const supabase = await getAdminClient();
     const { data, error } = await supabase
       .from(this.table)
       .select("*, clients(name, logo_url)")

package/templates/web/src/lib/services/users.service.ts

@@ -1,10 +1,10 @@
-import { getServerClient } from "@/lib/supabase/server";
+import { getAdminClient } from "@/lib/supabase/server";
 
 export class UserService {
   private static table = "users";
 
   static async getAll() {
-    const supabase = await getServerClient();
+    const supabase = await getAdminClient();
     const { data, error } = await supabase
       .from(this.table)
       .select("*")

package/templates/web/src/lib/supabase/client.ts

@@ -6,7 +6,7 @@ import type { Database } from './types';
  * Get Supabase client for server-side operations
  * Uses SERVICE_ROLE_KEY for full database access
  */
-export function getServerClient() {
+export function getAdminClient() {
   const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
   const supabaseKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
 

package/templates/web/src/lib/supabase/server.ts

@@ -1,7 +1,7 @@
 import { createServerClient } from "@supabase/ssr";
 import { cookies } from "next/headers";
 
-export async function getServerClient() {
+export async function getAdminClient() {
   const cookieStore = await cookies();
 
   return createServerClient(

package/templates/web/src/store/hooks.ts

@@ -0,0 +1,11 @@
+import { useDispatch, useSelector } from 'react-redux';
+import type { AppDispatch, RootState } from '.';
+
+/**
+ * Typed hook wrappers — use these instead of plain useDispatch/useSelector.
+ * @example const dispatch = useAppDispatch();
+ * @example const value = useAppSelector((state) => state.someSlice.value);
+ */
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector = <T>(selector: (state: RootState) => T): T =>
+  useSelector(selector);

package/templates/web/src/store/index.ts

@@ -1,13 +1,17 @@
-import { createStore, applyMiddleware } from 'redux';
-import { thunk } from 'redux-thunk';
+import { configureStore } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
 import rootReducer from './reducers';
 
-const middleware = [thunk, logger];
+const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    process.env.NODE_ENV !== 'production'
+      ? getDefaultMiddleware().concat(logger)
+      : getDefaultMiddleware(),
+});
 
-const store = createStore(
-  rootReducer,
-  applyMiddleware(...middleware)
-);
+// Inferred types — export and use via store/hooks.ts
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
 
 export default store;

package/templates/web/src/store/reducers/index.ts

@@ -1,4 +1,4 @@
-import { combineReducers } from 'redux';
+import { combineReducers } from '@reduxjs/toolkit';
 // Import your reducers here
 // import exampleReducer from './exampleReducer';
 
@@ -8,6 +8,4 @@ const rootReducer = combineReducers({
   _placeholder: (state = {}) => state
 });
 
-export type RootState = ReturnType<typeof rootReducer>;
-
 export default rootReducer;

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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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)/products/[id]/page.tsx

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

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

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

@@ -1,33 +0,0 @@
-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/components/categories/CategoryForm.tsx

@@ -1,24 +0,0 @@
-"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

@@ -1,113 +0,0 @@
-"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."
-      />
-    </>
-  );
-}

package/templates/admin/components/clients/ClientForm.tsx

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