@stacksjs/defaults 0.75.480 → 0.75.483

package/app/Actions/Dashboard/Queue/queue-stats.ts

@@ -0,0 +1,69 @@
+import { db } from '@stacksjs/database/runtime'
+
+/** One queue's jobs, as the Queue page shows them. */
+export interface QueueCounts {
+  name: string
+  /** Waiting for a worker, delayed or not. */
+  pending: number
+  /** Reserved by a worker. */
+  active: number
+  /** Rows in `failed_jobs` for this queue. */
+  failed: number
+  total: number
+}
+
+const queueName = (value: unknown): string => String(value || 'default')
+
+/**
+ * Every queue that has jobs, counted by the database (stacksjs/stacks#3200).
+ *
+ * This read every row of `jobs` and `failed_jobs`, payloads included, to count
+ * them per queue, on every visit to the Queue page. A job is active when a
+ * worker has reserved it, which is `queuedJobState`'s rule in
+ * `@stacksjs/queue`: a `reserved_at` that is set and not 0, so the filter
+ * below is `!= 0`, which NULL never matches. Queues are listed in the order of
+ * their first job, and a queue with only failures is not listed, as before.
+ */
+export async function readQueueCounts(database: typeof db = db): Promise<QueueCounts[]> {
+  const [jobRows, failedRows] = await Promise.all([
+    database.selectFrom('jobs')
+      .select([
+        'queue',
+        database.fn.count('id').as('total'),
+        database.fn.count('id').filterWhere('reserved_at', '!=', 0).as('active'),
+        database.fn.min('id').as('first_id'),
+      ])
+      .groupBy('queue')
+      .execute() as Promise<Array<{ queue: unknown, total: unknown, active: unknown, first_id: unknown }>>,
+    database.selectFrom('failed_jobs')
+      .select(['queue', database.fn.count('id').as('failed')])
+      .groupBy('queue')
+      .execute() as Promise<Array<{ queue: unknown, failed: unknown }>>,
+  ])
+
+  const failed = new Map<string, number>()
+  for (const row of failedRows)
+    failed.set(queueName(row.queue), (failed.get(queueName(row.queue)) ?? 0) + Number(row.failed))
+
+  // A NULL, an empty and a 'default' queue are all the default queue.
+  const queues = new Map<string, { total: number, active: number, firstId: number }>()
+  for (const row of jobRows) {
+    const name = queueName(row.queue)
+    const current = queues.get(name) ?? { total: 0, active: 0, firstId: Number.POSITIVE_INFINITY }
+    queues.set(name, {
+      total: current.total + Number(row.total),
+      active: current.active + Number(row.active),
+      firstId: Math.min(current.firstId, Number(row.first_id)),
+    })
+  }
+
+  return [...queues.entries()]
+    .sort(([, a], [, b]) => a.firstId - b.firstId)
+    .map(([name, counts]) => ({
+      name,
+      pending: counts.total - counts.active,
+      active: counts.active,
+      failed: failed.get(name) ?? 0,
+      total: counts.total,
+    }))
+}

package/app/Actions/Monitoring/ErrorIndexAction.ts

@@ -1,12 +1,17 @@
+import type { RequestInstance } from '@stacksjs/types'
 import { Action } from '@stacksjs/actions/runtime'
 import { response } from '@stacksjs/router'
-import { readGroupedErrors } from './error-provider'
+import { parseErrorGroupQuery, readGroupedErrors } from './error-provider'
 
 export default new Action({
   name: 'Error Index',
-  description: 'Fetch all grouped errors (Sentry-like aggregation)',
+  description: 'Fetch one page of grouped errors (Sentry-like aggregation)',
   method: 'GET',
-  async handle() {
-    return response.json(await readGroupedErrors())
+  async handle(request: RequestInstance) {
+    const query = parseErrorGroupQuery(key => request.get<unknown>(key, ''))
+    if ('error' in query)
+      return response.json({ message: query.error }, 422)
+
+    return response.json(await readGroupedErrors(query))
   },
 })

package/app/Actions/Monitoring/error-provider.ts

@@ -1,5 +1,7 @@
 import type { DashboardProviderUnavailable } from '../Dashboard/dashboard-provider'
 import { errors } from '@stacksjs/commerce'
+import type { QueryReader } from '../Dashboard/Content/content-list'
+import { LIST_PAGE_SIZES, queryText } from '../Dashboard/Content/content-list'
 import { HQ_READ_UNAVAILABLE, readThroughProvider, resolveDashboardDriver } from '../Dashboard/dashboard-provider'
 
 /**
@@ -81,7 +83,39 @@ export interface DashboardGroupedError {
   count: number
   first_seen: string
   last_seen: string
-  error_ids: number[]
+}
+
+/**
+ * What a page of error groups asks for. A group's state is its newest
+ * occurrence's, so `status` filters groups, not rows.
+ */
+export interface DashboardErrorGroupQuery {
+  page: number
+  perPage: number
+  search: string
+  status: DashboardErrorStatus | 'all'
+  type: string
+  sort: typeof ERROR_GROUP_SORTS[number]
+  direction: 'asc' | 'desc'
+}
+
+export const ERROR_GROUP_SORTS = ['last_seen', 'count', 'type', 'status'] as const
+
+/**
+ * One page of error groups, most recently seen first (stacksjs/stacks#3195).
+ *
+ * The section used to take every group, each with the id of every one of its
+ * occurrences, to show ten. Nothing read those ids, and a busy group has
+ * thousands, so a page carries the groups' counts instead.
+ */
+export interface DashboardGroupedErrorPage {
+  groups: DashboardGroupedError[]
+  /** Groups matching the query, which the pager counts. */
+  total: number
+  /** The page the groups are, moved back to the last one when it ran past it. */
+  page: number
+  /** Every recorded error type, for the type filter. */
+  types: string[]
 }
 
 export interface DashboardErrorStats {
@@ -99,7 +133,7 @@ export interface DashboardErrorTimelinePoint {
 }
 
 export interface DashboardErrorsProvider {
-  grouped: () => Promise<DashboardGroupedError[]>
+  grouped: (query: DashboardErrorGroupQuery) => Promise<DashboardGroupedErrorPage>
   stats: () => Promise<DashboardErrorStats>
   timeline: () => Promise<DashboardErrorTimelinePoint[]>
   byGroup: (type: string, message: string) => Promise<DashboardErrorRecord[]>
@@ -141,7 +175,7 @@ function toErrorStatus(value: string): DashboardErrorStatus {
  * next moves, this file stops compiling instead of quietly changing what a
  * remote provider is required to match.
  */
-function toGroupedError(row: Awaited<ReturnType<typeof errors.fetchGrouped>>[number]): DashboardGroupedError {
+function toGroupedError(row: Awaited<ReturnType<typeof errors.fetchGroupedPage>>['groups'][number]): DashboardGroupedError {
   return {
     id: row.id,
     type: row.type,
@@ -151,7 +185,6 @@ function toGroupedError(row: Awaited<ReturnType<typeof errors.fetchGrouped>>[num
     count: row.count,
     first_seen: row.first_seen,
     last_seen: row.last_seen,
-    error_ids: row.error_ids,
   }
 }
 
@@ -169,7 +202,10 @@ export function localErrorId(id: string | number): number | undefined {
 }
 
 export const localErrorsProvider: DashboardErrorsProvider = {
-  grouped: async () => (await errors.fetchGrouped()).map(toGroupedError),
+  grouped: async (query) => {
+    const page = await errors.fetchGroupedPage(query)
+    return { ...page, groups: page.groups.map(toGroupedError) }
+  },
   stats: () => errors.fetchStats(),
   timeline: () => errors.fetchTimeline(),
   byGroup: (type, message) => errors.fetchByGroup(type, message),
@@ -226,8 +262,50 @@ async function readErrors<T>(
   return payload
 }
 
-export function readGroupedErrors(): Promise<DashboardErrorsEnvelope<DashboardGroupedError[]>> {
-  return readErrors([], provider => provider.grouped(), Array.isArray)
+const EMPTY_GROUP_PAGE: DashboardGroupedErrorPage = { groups: [], total: 0, page: 1, types: [] }
+
+export function readGroupedErrors(query: DashboardErrorGroupQuery): Promise<DashboardErrorsEnvelope<DashboardGroupedErrorPage>> {
+  return readErrors(
+    EMPTY_GROUP_PAGE,
+    provider => provider.grouped(query),
+    payload => Boolean(payload) && Array.isArray((payload as DashboardGroupedErrorPage).groups),
+  )
+}
+
+/** The page query, or the reason it is invalid. Absent values: page 1 of 25, every group. */
+export function parseErrorGroupQuery(read: QueryReader): DashboardErrorGroupQuery | { error: string } {
+  const pageText = queryText(read, 'page')
+  const page = pageText === '' ? 1 : Number(pageText)
+  if (!Number.isInteger(page) || page < 1)
+    return { error: 'page must be a whole number of 1 or more.' }
+
+  const sizeText = queryText(read, 'per_page')
+  const perPage = sizeText === '' ? 25 : Number(sizeText)
+  if (!(LIST_PAGE_SIZES as readonly number[]).includes(perPage))
+    return { error: `per_page must be one of ${LIST_PAGE_SIZES.join(', ')}.` }
+
+  const status = queryText(read, 'status') || 'all'
+  if (status !== 'all' && !ERROR_STATUSES.includes(status as DashboardErrorStatus))
+    return { error: `status must be all or one of ${ERROR_STATUSES.join(', ')}.` }
+
+  const search = queryText(read, 'search')
+  if (search.length > 200)
+    return { error: 'search must be 200 characters or fewer.' }
+
+  const type = queryText(read, 'type')
+  if (type.length > 255)
+    return { error: 'type must be 255 characters or fewer.' }
+
+  const sort = queryText(read, 'sort') || 'last_seen'
+  if (!(ERROR_GROUP_SORTS as readonly string[]).includes(sort))
+    return { error: `sort must be one of ${ERROR_GROUP_SORTS.join(', ')}.` }
+
+  const directionText = queryText(read, 'direction').toLowerCase()
+  const direction = directionText === '' ? (sort === 'last_seen' || sort === 'count' ? 'desc' : 'asc') : directionText
+  if (direction !== 'asc' && direction !== 'desc')
+    return { error: 'direction must be asc or desc.' }
+
+  return { page, perPage, search, status: status as DashboardErrorGroupQuery['status'], type, sort: sort as DashboardErrorGroupQuery['sort'], direction }
 }
 
 export function readErrorStats(): Promise<DashboardErrorsEnvelope<DashboardErrorStats>> {

package/functions/api.ts

@@ -5,6 +5,7 @@ import { resolveApiBaseUrl } from './api-url'
  * Provides a simple fetch wrapper with authentication and error handling.
  */
 
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useAuth } from './auth'
 
 const baseUrl = resolveApiBaseUrl()
@@ -69,14 +70,17 @@ export interface ApiError {
 }
 
 /**
- * Create headers with authentication
+ * Create headers with authentication.
+ *
+ * A write also carries the CSRF token: the server checks it on every write
+ * that rides the session cookie rather than a Bearer token, so without it
+ * each post, put, patch and del from a signed-in browser answered 403
+ * (stacksjs/stacks#3197), as `dashboardApi` already knew.
  */
-function createHeaders(contentType = 'application/json'): Headers {
+function createHeaders(contentType = 'application/json', write = false): Headers {
   const { getToken } = useAuth()
-  const headers = new Headers({
-    'Accept': 'application/json',
-    'Content-Type': contentType,
-  })
+  const base = { 'Accept': 'application/json', 'Content-Type': contentType }
+  const headers = new Headers(write ? withCsrfHeader(base) : base)
 
   const token = getToken()
   if (token) {
@@ -118,7 +122,7 @@ export async function get<T>(endpoint: string): Promise<T> {
 export async function post<T>(endpoint: string, body?: unknown): Promise<T> {
   const response = await fetch(requestUrl(endpoint), {
     method: 'POST',
-    headers: createHeaders(),
+    headers: createHeaders('application/json', true),
     body: body ? JSON.stringify(body) : undefined,
   })
 
@@ -131,7 +135,7 @@ export async function post<T>(endpoint: string, body?: unknown): Promise<T> {
 export async function put<T>(endpoint: string, body?: unknown): Promise<T> {
   const response = await fetch(requestUrl(endpoint), {
     method: 'PUT',
-    headers: createHeaders(),
+    headers: createHeaders('application/json', true),
     body: body ? JSON.stringify(body) : undefined,
   })
 
@@ -144,7 +148,7 @@ export async function put<T>(endpoint: string, body?: unknown): Promise<T> {
 export async function patch<T>(endpoint: string, body?: unknown): Promise<T> {
   const response = await fetch(requestUrl(endpoint), {
     method: 'PATCH',
-    headers: createHeaders(),
+    headers: createHeaders('application/json', true),
     body: body ? JSON.stringify(body) : undefined,
   })
 
@@ -157,7 +161,7 @@ export async function patch<T>(endpoint: string, body?: unknown): Promise<T> {
 export async function del<T>(endpoint: string): Promise<T> {
   const response = await fetch(requestUrl(endpoint), {
     method: 'DELETE',
-    headers: createHeaders(),
+    headers: createHeaders('application/json', true),
   })
 
   return handleResponse<T>(response)

package/functions/commerce/coupons.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../api-url'
 import type { Coupons, NewCoupon } from '../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../toasts'
 
@@ -38,9 +39,7 @@ async function createCoupon(coupon: Omit<Coupons, 'id'>) {
   try {
     const response = await fetch(`${baseURL}/commerce/coupons`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(coupon),
     })
 
@@ -66,9 +65,7 @@ async function updateCoupon(id: number, coupon: NewCoupon) {
   try {
     const response = await fetch(`${baseURL}/commerce/coupons/${id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(coupon),
     })
 
@@ -101,6 +98,7 @@ async function deleteCoupon(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/coupons/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/customers.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../api-url'
 import type { Customers } from '../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../toasts'
 
@@ -38,9 +39,7 @@ async function createCustomer(customer: Omit<Customers, 'id'>) {
   try {
     const response = await fetch(`${baseURL}/commerce/customers`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(customer),
     })
 
@@ -66,9 +65,7 @@ async function updateCustomer(customer: Customers) {
   try {
     const response = await fetch(`${baseURL}/commerce/customers/${customer.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(customer),
     })
 
@@ -101,6 +98,7 @@ async function deleteCustomer(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/customers/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/gift-cards.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../api-url'
 import type { GiftCards } from '../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../toasts'
 
@@ -35,7 +36,7 @@ async function createGiftCard(giftCard: GiftCards): Promise<GiftCards | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/gift-cards`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(giftCard),
     })
 
@@ -61,7 +62,7 @@ async function updateGiftCard(giftCard: GiftCards): Promise<GiftCards | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/gift-cards/${giftCard.id}`, {
       method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(giftCard),
     })
 
@@ -90,6 +91,7 @@ async function deleteGiftCard(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/gift-cards/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/orders.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../api-url'
 import type { Orders } from '../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../toasts'
 
@@ -28,7 +29,7 @@ async function createOrder(order: Orders) {
   try {
     const response = await fetch(`${baseURL}/commerce/orders`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(order),
     })
 
@@ -54,7 +55,7 @@ async function updateOrder(order: Orders) {
   try {
     const response = await fetch(`${baseURL}/commerce/orders/${order.id}`, {
       method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(order),
     })
 
@@ -83,6 +84,7 @@ async function deleteOrder(id: number) {
   try {
     const response = await fetch(`${baseURL}/commerce/orders/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/payments.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../api-url'
 import type { Payments } from '../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../toasts'
 
@@ -35,7 +36,7 @@ async function createPayment(payment: Payments): Promise<Payments | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/payments`, {
       method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(payment),
     })
 
@@ -61,7 +62,7 @@ async function updatePayment(payment: Payments): Promise<Payments | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/payments/${payment.id}`, {
       method: 'PATCH',
-      headers: { 'Content-Type': 'application/json' },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(payment),
     })
 
@@ -90,6 +91,7 @@ async function deletePayment(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/payments/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/products/categories.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { Categories } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createCategory(category: Categories): Promise<Categories | null>
   try {
     const response = await fetch(`${baseURL}/commerce/product-categories`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(category),
     })
 
@@ -63,9 +62,7 @@ async function updateCategory(category: Categories): Promise<Categories | null>
   try {
     const response = await fetch(`${baseURL}/commerce/product-categories/${category.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(category),
     })
 
@@ -93,6 +90,7 @@ async function deleteCategory(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/product-categories/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/products/manufacturers.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { Manufacturers } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createManufacturer(manufacturer: Manufacturers): Promise<Manufact
   try {
     const response = await fetch(`${baseURL}/commerce/product-manufacturers`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(manufacturer),
     })
 
@@ -63,9 +62,7 @@ async function updateManufacturer(manufacturer: Manufacturers): Promise<Manufact
   try {
     const response = await fetch(`${baseURL}/commerce/product-manufacturers/${manufacturer.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(manufacturer),
     })
 
@@ -93,6 +90,7 @@ async function deleteManufacturer(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/product-manufacturers/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/products/products.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { Products } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createProduct(product: Products): Promise<Products | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/products`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(product),
     })
 
@@ -63,9 +62,7 @@ async function updateProduct(product: Products): Promise<Products | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/${product.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(product),
     })
 
@@ -93,6 +90,7 @@ async function deleteProduct(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/products/reviews.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { Reviews } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createReview(review: Reviews): Promise<Reviews | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/reviews`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(review),
     })
 
@@ -63,9 +62,7 @@ async function updateReview(review: Reviews): Promise<Reviews | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/reviews/${review.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(review),
     })
 
@@ -93,6 +90,7 @@ async function deleteReview(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/reviews/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {

package/functions/commerce/products/units.ts

@@ -1,5 +1,6 @@
 import { resolveApiBaseUrl } from '../../api-url'
 import type { Units } from '../../../types/defaults'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
 import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { pushToast } from '../../toasts'
 
@@ -36,9 +37,7 @@ async function createUnit(unit: Units): Promise<Units | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/units`, {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(unit),
     })
 
@@ -63,9 +62,7 @@ async function updateUnit(unit: Units): Promise<Units | null> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/units/${unit.id}`, {
       method: 'PATCH',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: withCsrfHeader({ 'Content-Type': 'application/json' }),
       body: JSON.stringify(unit),
     })
 
@@ -93,6 +90,7 @@ async function deleteUnit(id: number): Promise<boolean> {
   try {
     const response = await fetch(`${baseURL}/commerce/products/units/${id}`, {
       method: 'DELETE',
+      headers: withCsrfHeader(),
     })
 
     if (!response.ok) {