@stacksjs/defaults 0.70.229 → 0.70.231

package/functions/analytics.ts

@@ -2,16 +2,15 @@
  * Analytics Composable
  */
 import { ref } from '@stacksjs/stx'
-
-const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+import { dashboardApi } from './dashboard-api'
 
 export interface AnalyticsOverview {
-  realtime: number
-  people: number
-  views: number
-  avgTimeOnSite: string
-  bounceRate: string
-  eventCompletions: number
+  realtimeVisitors: number
+  uniqueVisitors: number
+  pageViews: number
+  averageResponseTime: string
+  errorRate: string
+  successfulRequests: number
 }
 
 export interface TrafficDataPoint {
@@ -54,8 +53,231 @@ export interface CountryData {
   flag: string
 }
 
+export type AnalyticsRange = 'day' | 'week' | 'month' | 'year'
+export type AnalyticsScope = 'all' | 'blog' | 'commerce'
+
+export interface WebAnalyticsResponse {
+  source: 'requests'
+  range: AnalyticsRange
+  scope: AnalyticsScope
+  dateRange: {
+    start: string
+    end: string
+  }
+  overview: AnalyticsOverview
+  traffic: TrafficDataPoint[]
+  pages: PageData[]
+  referrers: ReferrerData[]
+  devices: DeviceData[]
+  browsers: BrowserData[]
+  countries: CountryData[]
+}
+
+export interface SalesAnalyticsResponse {
+  source: 'models'
+  range: AnalyticsRange
+  dateRange: {
+    start: string
+    end: string
+  }
+  overview: {
+    orders: number
+    payments: number
+    refunds: number
+    currencies: number
+  }
+  currencyTotals: Array<{
+    currency: string
+    orders: number
+    gross: number
+    cancelled: number
+    net: number
+    average: number
+  }>
+  paymentMethods: Array<{
+    method: string
+    currency: string
+    amount: number
+    refunds: number
+    net: number
+    transactions: number
+    percentage: number
+  }>
+  dailyOrders: Array<{
+    date: string
+    currency: string
+    value: number
+    orders: number
+  }>
+  topProducts: Array<{
+    id: string
+    productId: string
+    name: string
+    categoryId: string
+    quantity: number
+    revenue: number
+    currency: string
+  }>
+  categories: Array<{
+    id: string
+    categoryId: string
+    name: string
+    quantity: number
+    revenue: number
+    currency: string
+  }>
+}
+
+export interface CampaignAnalyticsResponse {
+  source: 'campaigns'
+  range: AnalyticsRange
+  dateRange: {
+    start: string
+    end: string
+  }
+  overview: {
+    campaigns: number
+    audience: number | null
+    sent: number | null
+    opens: number | null
+    clicks: number | null
+    conversions: number | null
+    openRate: number | null
+    clickRate: number | null
+    conversionRate: number | null
+  }
+  spendByCurrency: Array<{
+    currency: string
+    budget: number | null
+    spent: number | null
+    campaigns: number
+  }>
+  campaigns: Array<{
+    id: string
+    name: string
+    type: string
+    status: string
+    audienceSize: number | null
+    sentCount: number | null
+    openRate: number | null
+    clickRate: number | null
+    conversionRate: number | null
+    budget: number | null
+    spent: number | null
+    currency: string
+    createdAt: string
+    opens: number | null
+    clicks: number | null
+    conversions: number | null
+  }>
+  channels: Array<{
+    type: string
+    name: string
+    currency: string
+    campaigns: number
+    audience: number | null
+    sent: number | null
+    spent: number | null
+    openRate: number | null
+    clickRate: number | null
+    conversionRate: number | null
+  }>
+  statuses: Array<{
+    status: string
+    label: string
+    count: number
+  }>
+}
+
+export interface EventAnalyticsResponse {
+  source: 'analytics-events'
+  range: AnalyticsRange
+  dateRange: {
+    start: string
+    end: string
+  }
+  overview: {
+    occurrences: number
+    eventNames: number
+    categories: number
+    valuedEvents: number
+  }
+  events: Array<{
+    name: string
+    category: string
+    currency: string
+    count: number
+    value: number
+    lastSeen: string
+  }>
+  categories: Array<{
+    name: string
+    label: string
+    count: number
+    percentage: number
+  }>
+  valueByCurrency: Array<{
+    currency: string
+    value: number
+    events: number
+  }>
+  timeline: Array<{
+    date: string
+    count: number
+  }>
+  recent: Array<{
+    id: string
+    name: string
+    category: string
+    path: string
+    value: number
+    currency: string
+    createdAt: string
+  }>
+}
+
+export interface RecordAnalyticsEventInput {
+  name: string
+  category?: string
+  path?: string
+  value?: number
+  currency?: string
+  properties?: unknown
+}
+
+export async function fetchWebAnalytics(range: AnalyticsRange = 'month', scope: AnalyticsScope = 'all'): Promise<WebAnalyticsResponse> {
+  const query = new URLSearchParams({ range, scope })
+  return await dashboardApi<WebAnalyticsResponse>(`/api/dashboard/analytics/web?${query.toString()}`)
+}
+
+export async function fetchSalesAnalytics(range: AnalyticsRange = 'month'): Promise<SalesAnalyticsResponse> {
+  return await dashboardApi<SalesAnalyticsResponse>(`/api/dashboard/analytics/sales?range=${encodeURIComponent(range)}`)
+}
+
+export async function fetchCampaignAnalytics(range: AnalyticsRange = 'month'): Promise<CampaignAnalyticsResponse> {
+  return await dashboardApi<CampaignAnalyticsResponse>(`/api/dashboard/analytics/marketing?range=${encodeURIComponent(range)}`)
+}
+
+export async function fetchEventAnalytics(range: AnalyticsRange = 'month'): Promise<EventAnalyticsResponse> {
+  return await dashboardApi<EventAnalyticsResponse>(`/api/dashboard/event-metrics?range=${encodeURIComponent(range)}`)
+}
+
+export async function recordAnalyticsEvent(input: RecordAnalyticsEventInput): Promise<{ success: true }> {
+  return await dashboardApi<{ success: true }>('/api/dashboard/event-metrics', {
+    method: 'POST',
+    body: input,
+  })
+}
+
 export function useAnalytics() {
-  const overview = ref<AnalyticsOverview>({ realtime: 0, people: 0, views: 0, avgTimeOnSite: '0s', bounceRate: '0%', eventCompletions: 0 })
+  const overview = ref<AnalyticsOverview>({
+    realtimeVisitors: 0,
+    uniqueVisitors: 0,
+    pageViews: 0,
+    averageResponseTime: '-',
+    errorRate: 'N/A',
+    successfulRequests: 0,
+  })
   const trafficData = ref<TrafficDataPoint[]>([])
   const pagesData = ref<PageData[]>([])
   const referrersData = ref<ReferrerData[]>([])
@@ -69,23 +291,26 @@ export function useAnalytics() {
     isLoading.value = true
     error.value = null
     try {
-      const response = await fetch(`${baseUrl}/analytics/web?range=${dateRange}`, {
-        headers: { 'Accept': 'application/json' },
-      })
-      if (response.ok) {
-        const data = await response.json()
-        overview.value = data.overview || overview.value
-        trafficData.value = data.traffic || []
-        pagesData.value = data.pages || []
-        referrersData.value = data.referrers || []
-        devicesData.value = data.devices || []
-        browsersData.value = data.browsers || []
-        countriesData.value = data.countries || []
-      }
-    } catch (e) {
+      const range: AnalyticsRange = dateRange === '1d'
+        ? 'day'
+        : dateRange === '7d'
+          ? 'week'
+          : dateRange === '1y'
+            ? 'year'
+            : 'month'
+      const data = await fetchWebAnalytics(range)
+      overview.value = data.overview
+      trafficData.value = data.traffic
+      pagesData.value = data.pages
+      referrersData.value = data.referrers
+      devicesData.value = data.devices
+      browsersData.value = data.browsers
+      countriesData.value = data.countries
+    }
+    catch {
       error.value = 'Failed to load analytics data.'
-      console.error('Failed to fetch analytics:', e)
-    } finally {
+    }
+    finally {
       isLoading.value = false
     }
   }

package/functions/api-url.ts

@@ -0,0 +1,22 @@
+type StacksBrowserGlobal = typeof globalThis & {
+  __STACKS_API_URL__?: string
+}
+
+/**
+ * Resolve the public API root without exposing server environment state to
+ * browser bundles.
+ *
+ * The framework may inject a custom URL for split-origin deployments.
+ * Otherwise browser clients use the same-origin `/api` router, which is also
+ * how the dashboard dev server delegates application API requests.
+ */
+export function resolveApiBaseUrl(defaultPath = '/api'): string {
+  const configured = (globalThis as StacksBrowserGlobal).__STACKS_API_URL__
+  if (configured)
+    return configured.replace(/\/+$/, '')
+
+  if (typeof window !== 'undefined')
+    return `${window.location.origin}${defaultPath}`
+
+  return defaultPath
+}

package/functions/api.ts

@@ -1,3 +1,4 @@
+import { resolveApiBaseUrl } from './api-url'
 /**
  * API Client for Dashboard
  *
@@ -6,7 +7,7 @@
 
 import { useAuth } from './auth'
 
-const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+const baseUrl = resolveApiBaseUrl()
 
 export interface ApiResponse<T> {
   data: T

package/functions/auth.ts

@@ -1,6 +1,8 @@
+import { resolveApiBaseUrl } from './api-url'
 import type { Ref } from '@stacksjs/stx'
-import type { AuthUser, ErrorResponse, LoginError, LoginResponse, MeResponse, RegisterError, RegisterResponse, UserData } from '../types/dashboard'
-import { useStorage } from '@stacksjs/browser'
+import type { AuthUser, LoginError, LoginResponse, MeResponse, RegisterCredentials, RegisterError, RegisterResponse, ResponseError, UserData } from '../types/dashboard'
+import { withCsrfHeader } from '@stacksjs/browser/composables/csrf'
+import { useStorage } from '@stacksjs/browser/composables/useStorage'
 import { ref } from '@stacksjs/stx'
 
 const token = useStorage('token', '')
@@ -19,7 +21,9 @@ const user = useStorage<UserData | null>('user', null, undefined, {
   },
 })
 
-const baseUrl = process.env.VITE_API_URL || `http://localhost:${process.env.PORT_API || '3008'}`
+// The framework's auth routes are intentionally mounted at /login,
+// /register, /me, and /logout rather than under the generated /api surface.
+const baseUrl = resolveApiBaseUrl('')
 
 // Create singleton state
 const isAuthenticated = ref(false)
@@ -28,7 +32,7 @@ export interface AuthComposable {
   isAuthenticated: Ref<boolean>
   user: { value: UserData | null }
   login: (user: AuthUser) => Promise<LoginResponse | LoginError>
-  register: (user: AuthUser) => Promise<RegisterResponse | RegisterError>
+  register: (user: RegisterCredentials) => Promise<RegisterResponse | RegisterError>
   fetchAuthUser: () => Promise<UserData | null>
   checkAuthentication: () => Promise<boolean>
   logout: () => void
@@ -84,29 +88,26 @@ export function useAuth(): AuthComposable {
     }
   }
 
-  async function register(user: AuthUser): Promise<RegisterResponse | RegisterError> {
+  async function register(credentials: RegisterCredentials): Promise<RegisterResponse | RegisterError> {
     const url = `${baseUrl}/register`
     const response = await fetch(url, {
       method: 'POST',
-      headers: {
+      credentials: 'same-origin',
+      headers: withCsrfHeader({
         'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(user),
+      }),
+      body: JSON.stringify(credentials),
     })
 
-    if (!response.ok) {
-      const errorData = await response.json() as RegisterError
-      return errorData
-    }
-
     const data = await response.json() as RegisterResponse | RegisterError
 
-    if (isRegisterError(data)) {
+    if (!response.ok || isRegisterError(data))
       return data
-    }
 
     if (isRegisterResponse(data)) {
       token.value = data.token
+      user.value = data.user
+      isAuthenticated.value = true
       return data
     }
 
@@ -114,38 +115,32 @@ export function useAuth(): AuthComposable {
   }
 
   function isRegisterError(data: RegisterResponse | RegisterError): data is RegisterError {
-    return 'errors' in data
+    return !('token' in data && 'user' in data)
   }
 
   function isRegisterResponse(data: RegisterResponse | RegisterError): data is RegisterResponse {
     return 'token' in data && 'user' in data
   }
 
-  async function login(user: AuthUser): Promise<LoginResponse | LoginError> {
-    try {
-      const url = `${baseUrl}/login`
-      const response = await fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(user),
-      })
-
-      if (!response.ok) {
-        const errorData = await response.json() as ErrorResponse
-        throw new Error(errorData.message || `HTTP error! status: ${response.status}`)
-      }
-
-      const data = await response.json() as LoginResponse
-
-      token.value = data.token
+  async function login(credentials: AuthUser): Promise<LoginResponse | LoginError> {
+    const url = `${baseUrl}/login`
+    const response = await fetch(url, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: withCsrfHeader({
+        'Content-Type': 'application/json',
+      }),
+      body: JSON.stringify(credentials),
+    })
+    const data = await response.json() as LoginResponse | LoginError
 
+    if (!response.ok || !('token' in data && 'user' in data))
       return data
-    }
-    catch (error) {
-      return error as LoginError
-    }
+
+    token.value = data.token
+    user.value = data.user
+    isAuthenticated.value = true
+    return data
   }
 
   async function logout() {
@@ -183,6 +178,33 @@ export function useAuth(): AuthComposable {
   }
 }
 
+export function describeAuthError(error: RegisterError | undefined, fallback: string): string {
+  if (!error)
+    return fallback
+  if (error.message)
+    return error.message
+  if (error.error)
+    return error.error
+  return responseErrorMessage(error.errors) || fallback
+}
+
+function responseErrorMessage(error: ResponseError | undefined): string {
+  if (!error)
+    return ''
+  if ('error' in error && typeof error.error === 'string')
+    return error.error
+
+  for (const messages of Object.values(error)) {
+    if (!Array.isArray(messages))
+      continue
+    const first = messages[0]
+    if (first?.message)
+      return first.message
+  }
+
+  return ''
+}
+
 // Strict auth guard middleware
 // Usage: call in setup() of page/component, or in router beforeEach
 // Pass { guest: true } for guest-only pages

package/functions/billing/dashboard.ts

@@ -0,0 +1,140 @@
+import { dashboardApi } from '../dashboard-api'
+
+export interface BillingSubscription {
+  id: string
+  plan: string
+  type: string
+  status: string
+  amount: number | null
+  currency: string
+  periodEnd: string
+  cancelAtPeriodEnd: boolean
+}
+
+export interface BillingPaymentMethod {
+  id: string
+  brand: string
+  lastFour: string
+  expMonth: number | null
+  expYear: number | null
+  isDefault: boolean
+}
+
+export interface BillingTransaction {
+  id: string
+  name: string
+  description: string
+  amount: number | null
+  type: string
+  providerId: string
+}
+
+export interface BillingOverview {
+  subscription: BillingSubscription | null
+  paymentMethods: BillingPaymentMethod[]
+  transactions: BillingTransaction[]
+  unavailable: string[]
+}
+
+type UnknownRecord = Record<string, any>
+
+function record(value: unknown): UnknownRecord {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? value as UnknownRecord
+    : {}
+}
+
+function records(value: unknown): UnknownRecord[] {
+  if (Array.isArray(value))
+    return value.map(record)
+
+  const data = record(value).data
+  return Array.isArray(data) ? data.map(record) : []
+}
+
+function text(...values: unknown[]): string {
+  const value = values.find(item => typeof item === 'string' && item.trim())
+  return typeof value === 'string' ? value.trim() : ''
+}
+
+function number(value: unknown): number | null {
+  if (value === null || value === undefined || value === '')
+    return null
+  const parsed = Number(value)
+  return Number.isFinite(parsed) ? parsed : null
+}
+
+function timestamp(value: unknown): string {
+  if (typeof value === 'number') {
+    const milliseconds = value < 10_000_000_000 ? value * 1000 : value
+    return new Date(milliseconds).toISOString()
+  }
+  return typeof value === 'string' ? value : ''
+}
+
+function normalizeSubscription(value: unknown): BillingSubscription | null {
+  const result = record(value)
+  const stored = record(result.subscription || result)
+  const provider = record(result.providerSubscription || result.provider_subscription)
+  if (Object.keys(stored).length === 0)
+    return null
+
+  const price = record(records(record(provider.items).data)[0]?.price)
+
+  return {
+    id: text(stored.id, stored.uuid, stored.provider_id, stored.providerId),
+    plan: text(stored.plan, stored.type, price.nickname, price.lookup_key),
+    type: text(stored.type, stored.plan),
+    status: text(stored.provider_status, stored.providerStatus, provider.status),
+    amount: number(stored.unit_price ?? stored.unitPrice ?? price.unit_amount),
+    currency: text(price.currency, provider.currency),
+    periodEnd: timestamp(provider.current_period_end ?? stored.ends_at ?? stored.endsAt),
+    cancelAtPeriodEnd: Boolean(provider.cancel_at_period_end),
+  }
+}
+
+function normalizePaymentMethod(value: unknown, defaultId: string): BillingPaymentMethod {
+  const method = record(value)
+  const card = record(method.card)
+  const id = text(method.id, method.provider_id, method.providerId, method.uuid)
+
+  return {
+    id,
+    brand: text(card.brand, method.brand, method.type),
+    lastFour: text(card.last4, method.last_four, method.lastFour),
+    expMonth: number(card.exp_month ?? method.exp_month ?? method.expMonth),
+    expYear: number(card.exp_year ?? method.exp_year ?? method.expYear),
+    isDefault: Boolean(method.is_default ?? method.isDefault) || Boolean(id && id === defaultId),
+  }
+}
+
+function normalizeTransaction(value: unknown): BillingTransaction {
+  const transaction = record(value)
+  return {
+    id: text(transaction.id, transaction.uuid, transaction.provider_id, transaction.providerId),
+    name: text(transaction.name),
+    description: text(transaction.description),
+    amount: number(transaction.amount),
+    type: text(transaction.type),
+    providerId: text(transaction.provider_id, transaction.providerId),
+  }
+}
+
+export async function fetchBillingOverview(): Promise<BillingOverview> {
+  const payload = record(await dashboardApi('/api/dashboard/billing'))
+  const defaultMethod = record(payload.defaultPaymentMethod)
+  const defaultId = text(defaultMethod.id, defaultMethod.provider_id, defaultMethod.providerId, defaultMethod.uuid)
+  const paymentMethods = records(payload.paymentMethods).map(method => normalizePaymentMethod(method, defaultId))
+
+  if (defaultId && !paymentMethods.some(method => method.id === defaultId))
+    paymentMethods.unshift(normalizePaymentMethod(defaultMethod, defaultId))
+
+  return {
+    subscription: normalizeSubscription(payload.subscription),
+    paymentMethods,
+    transactions: records(payload.transactions).map(normalizeTransaction),
+    unavailable: Array.isArray(payload.unavailable)
+      ? payload.unavailable.map(item => String(item)).filter(Boolean)
+      : [],
+  }
+}

package/functions/billing/payments.ts

@@ -1,10 +1,10 @@
-import { confirmCardSetup, confirmPayment, loadCardElement, loadPaymentElement } from '@stacksjs/browser'
+import { confirmCardSetup, confirmPayment, loadCardElement, loadPaymentElement } from '@stacksjs/browser/utils/billable'
+import { usePaymentStore } from '../../stores/payment'
 
 export function useBillable() {
-  // Resolved per call, not at module scope: `usePaymentStore` is a browser
-  // auto-import, so calling it while the module is being evaluated throws
-  // "usePaymentStore is not defined" the moment anything imports this file
-  // server-side, which the generated auto-import manifest does.
+  // Imported modules own their dependencies. STX browser auto-imports are
+  // injected into the template script entry, not into every module the entry
+  // bundles.
   const paymentStore = usePaymentStore()
 
   function convertUnixTimestampToDate(timestamp: number): string {

package/functions/blog.ts

@@ -48,8 +48,9 @@ function writeHeaders(): Record<string, string> {
   const headers: Record<string, string> = { 'Content-Type': 'application/json' }
   const match = document.cookie.match(/(?:^|;\s*)X-CSRF-Token=([^;]*)/)
 
-  if (match)
-    headers['X-CSRF-Token'] = decodeURIComponent(match[1])
+  const csrfToken = match?.[1]
+  if (csrfToken)
+    headers['X-CSRF-Token'] = decodeURIComponent(csrfToken)
 
   return headers
 }