Admin Panel

Updated 8 July 2026

The admin panel provides a complete interface for managing products, categories, and tags. All admin routes are protected and require authentication.

Admin Routes

All admin routes are under /admin:

Admin Layout

Admin pages use a sidebar layout with navigation:

import AdminSidebar from "@/components/AdminSidebar"; // Import Admin sidebar component

export default function AdminLayout({ children }) { // Admin layout to wrap pages and persist across navigation
  return (
     // Display flex container
      
       // Display flex container with 100% width and padding 8
        {children}
       // Display children pages
    
  ); // Return wrapped pages
}

Product Management

List Products

const response = await fetch("/api/admin/products?page=1&per_page=50"); // Get products with pagination
const { products, totalPages } = await response.json(); // Get products and total pages from response

Create Product

await fetch("/api/admin/products", { // Create product with the given name, regular price and description
  method: "POST",
  body: JSON.stringify({
    name: "Product", // Product name
    regular_price: "29.99", // Product regular price
    description: "Description" // Product description
  })
}); // Create product with the given name, regular price and description

Update/Delete Product

// Update
await fetch(`/api/admin/products/${id}`, { // Update product with the given id and name
  method: "PUT",
  body: JSON.stringify({ name: "Updated" }) // Product name with the given name
});

// Delete
await fetch(`/api/admin/products/${id}`, { method: "DELETE" }); // Delete product with the given id

Category Management

// List
await fetch("/api/admin/categories"); // List categories

// Create
await fetch("/api/admin/categories", { // Create category with the given name and slug
  method: "POST",
  body: JSON.stringify({ name: "Category", slug: "category" }) // Category name and slug
});

// Update/Delete - same pattern as products

Tag Management

// List, Create, Update, Delete
await fetch("/api/admin/tags"); // List tags
await fetch("/api/admin/tags", { method: "POST", body: JSON.stringify({ name: "Tag" }) }); // Create tag with the given name
await fetch(`/api/admin/tags/${id}`, { method: "PUT", body: JSON.stringify({ name: "Updated" }) }); // Update tag with the given id and name
await fetch(`/api/admin/tags/${id}`, { method: "DELETE" }); // Delete tag with the given id

Product Variations

// Get variations
await fetch(`/api/admin/products/${productId}/variations`); // Get variations with the given product id

// Create/Update/Delete
await fetch(`/api/admin/products/${productId}/variations`, { // Create variation with the given product id and attributes and regular price
  method: "POST",
  body: JSON.stringify({ attributes: [{ id: 1, option: "Red" }], regular_price: "29.99" })
});

Image Upload & Search

// Upload image
const formData = new FormData(); // Create form data with the given file
formData.append("file", file); // Append file to form data          
await fetch("/api/admin/upload", { method: "POST", body: formData }); // Upload image with the given form data

// Search
await fetch(`/api/admin/products?search=${term}`); // Search products with the given search term

Best Practices