create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/core/notifications/notification-center.tsx

@@ -0,0 +1,251 @@
+import { useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router'
+import { Bell, BellOff, CheckCheck, CircleAlert, CircleCheck, Info, Settings, TriangleAlert, type LucideIcon } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from '@/components/ui/popover'
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { ButtonLink } from '@/core/components/button-link'
+import { EmptyState, ErrorState } from '@/core/components/states'
+import { useFormat } from '@/core/i18n/use-format'
+import type { Formatters } from '@/core/lib/format'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+import { isUnread, useMarkAllNotificationsRead, useMarkNotificationRead, useNotifications } from './hooks'
+import type { AppNotification, NotificationType } from './types'
+
+const typeIcons: Record<NotificationType, { icon: LucideIcon; className: string }> = {
+  info: { icon: Info, className: 'text-info' },
+  success: { icon: CircleCheck, className: 'text-success' },
+  warning: { icon: TriangleAlert, className: 'text-warning' },
+  error: { icon: CircleAlert, className: 'text-danger' },
+}
+
+type Tab = 'all' | 'unread'
+
+/**
+ * Top-bar bell with an unread badge. Opens a popover on desktop and a bottom
+ * sheet on mobile; both render the same `NotificationPanel`.
+ */
+export function NotificationBell() {
+  const { t } = useTranslation('notifications')
+  const isMobile = useIsMobile()
+  const [open, setOpen] = useState(false)
+  const unread = useNotifications().data?.filter(isUnread).length ?? 0
+
+  const trigger = (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label={unread > 0 ? t('bellUnread', { count: unread }) : t('bell')}
+      className="relative"
+    >
+      <Bell />
+      {unread > 0 && (
+        <span
+          aria-hidden
+          className="absolute -top-0.5 -right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] leading-none font-semibold text-primary-foreground tabular-nums ring-2 ring-background"
+        >
+          {unread > 9 ? '9+' : unread}
+        </span>
+      )}
+    </Button>
+  )
+  const close = () => setOpen(false)
+
+  if (isMobile) {
+    return (
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger render={trigger} />
+        <SheetContent
+          side="bottom"
+          showCloseButton={false}
+          className="max-h-[85svh] gap-0 rounded-t-(--radius-panel)"
+        >
+          <NotificationPanel title={<SheetTitle className="text-sm font-semibold">{t('title')}</SheetTitle>} onDone={close} />
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger render={trigger} />
+      <PopoverContent align="end" sideOffset={8} className="w-96 gap-0 overflow-hidden p-0">
+        <NotificationPanel title={<PopoverTitle className="text-sm font-semibold">{t('title')}</PopoverTitle>} onDone={close} />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+function NotificationPanel({ title, onDone }: { title: ReactNode; onDone: () => void }) {
+  const { t } = useTranslation('notifications')
+  const [tab, setTab] = useState<Tab>('all')
+  const query = useNotifications()
+  const markAll = useMarkAllNotificationsRead()
+  const unread = query.data?.filter(isUnread).length ?? 0
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="flex items-center justify-between gap-2 px-4 pt-3 pb-2">
+        {title}
+        <Button
+          variant="ghost"
+          size="sm"
+          className="-mr-2 text-muted-foreground"
+          disabled={unread === 0}
+          onClick={() => markAll.mutate()}
+        >
+          <CheckCheck data-icon="inline-start" />
+          {t('markAllRead')}
+        </Button>
+      </div>
+      <div className="border-b px-4 pb-3">
+        <Tabs value={tab} onValueChange={(v) => setTab(v as Tab)}>
+          <TabsList className="w-full">
+            <TabsTrigger value="all" className="flex-1">{t('tabs.all')}</TabsTrigger>
+            <TabsTrigger value="unread" className="flex-1">
+              {t('tabs.unread')}
+              {unread > 0 && <span className="text-muted-foreground tabular-nums">{unread}</span>}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain md:max-h-[min(28rem,60svh)]">
+        {query.isPending ? (
+          <NotificationSkeleton />
+        ) : query.error ? (
+          <ErrorState title={t('loadFailed')} error={query.error} onRetry={() => query.refetch()} className="py-10" />
+        ) : (
+          <NotificationList items={tab === 'unread' ? query.data.filter(isUnread) : query.data} tab={tab} onDone={onDone} />
+        )}
+      </div>
+
+      <div className="border-t p-1.5">
+        <ButtonLink to="/app/settings/notifications" variant="ghost" size="sm" className="w-full text-muted-foreground" onClick={onDone}>
+          <Settings data-icon="inline-start" />
+          {t('settings')}
+        </ButtonLink>
+      </div>
+    </div>
+  )
+}
+
+function NotificationList({ items, tab, onDone }: { items: AppNotification[]; tab: Tab; onDone: () => void }) {
+  const { t } = useTranslation('notifications')
+  const fmt = useFormat()
+  // The panel mounts when opened, so "today" is fresh each time it opens.
+  const [now] = useState(() => new Date())
+
+  if (items.length === 0) {
+    return (
+      <EmptyState
+        icon={tab === 'unread' ? <CheckCheck /> : <BellOff />}
+        title={t(`empty.${tab}.title`)}
+        description={t(`empty.${tab}.description`)}
+        className="py-10"
+      />
+    )
+  }
+
+  const today = fmt.date(now)
+  const groups = [
+    { id: 'today', items: items.filter((n) => fmt.date(n.createdAt) === today) },
+    { id: 'earlier', items: items.filter((n) => fmt.date(n.createdAt) !== today) },
+  ] as const
+
+  return groups.map(
+    (group) =>
+      group.items.length > 0 && (
+        <section key={group.id} aria-labelledby={`notifications-${group.id}`} className="pb-1">
+          <h3 id={`notifications-${group.id}`} className="label-caps px-4 pt-3 pb-1">
+            {t(`groups.${group.id}`)}
+          </h3>
+          <ul className="px-1.5">
+            {group.items.map((n) => (
+              <li key={n.id}>
+                <NotificationItem notification={n} fmt={fmt} onDone={onDone} />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ),
+  )
+}
+
+function NotificationItem({ notification: n, fmt, onDone }: { notification: AppNotification; fmt: Formatters; onDone: () => void }) {
+  const { t } = useTranslation(['notifications', 'common'])
+  const markRead = useMarkNotificationRead()
+  const unread = isUnread(n)
+  const { icon: Icon, className: iconClass } = typeIcons[n.type]
+
+  // Params are raw values from the API; localize the ones that need it.
+  const values: Record<string, string | number> = { ...n.params }
+  if (typeof n.params.role === 'string') values.role = t(`common:roles.${n.params.role as 'owner'}`)
+  if (typeof n.params.revenue === 'number') values.revenue = fmt.currencyWhole(n.params.revenue)
+  if (typeof n.params.orders === 'number') values.orders = fmt.number(n.params.orders)
+
+  const onClick = () => {
+    if (unread) markRead.mutate(n.id)
+    if (n.link) onDone()
+  }
+
+  const content = (
+    <>
+      <span className={cn('mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-fill-1', iconClass)}>
+        <Icon className="size-4" />
+        <span className="sr-only">{t(`types.${n.type}`)}</span>
+      </span>
+      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <span className={cn('text-sm', unread ? 'font-medium text-foreground' : 'text-foreground/80')}>
+          {t(`templates.${n.template}.title`)}
+        </span>
+        <span className="line-clamp-2 text-xs text-muted-foreground">{t(`templates.${n.template}.body`, values)}</span>
+        <time dateTime={n.createdAt} title={fmt.dateTime(n.createdAt)} className="text-2xs text-muted-foreground tabular-nums">
+          {fmt.relative(n.createdAt)}
+        </time>
+      </span>
+      <span className="flex w-2 shrink-0 justify-center pt-2">
+        {unread && (
+          <>
+            <span aria-hidden className="size-2 rounded-full bg-primary" />
+            <span className="sr-only">{t('unread')}</span>
+          </>
+        )}
+      </span>
+    </>
+  )
+
+  const className =
+    'flex w-full items-start gap-3 rounded-lg px-2.5 py-2.5 text-left outline-none hover:bg-fill-1 focus-visible:bg-fill-1 focus-visible:ring-2 focus-visible:ring-ring'
+
+  return n.link ? (
+    <Link to={n.link} onClick={onClick} className={className}>
+      {content}
+    </Link>
+  ) : (
+    <button type="button" onClick={onClick} className={className}>
+      {content}
+    </button>
+  )
+}
+
+function NotificationSkeleton() {
+  return (
+    <div role="status" className="flex flex-col gap-1 p-3">
+      {Array.from({ length: 4 }, (_, i) => (
+        <div key={i} className="flex items-start gap-3 px-1 py-2">
+          <Skeleton className="size-8 rounded-lg" />
+          <div className="flex flex-1 flex-col gap-1.5">
+            <Skeleton className="h-3.5 w-2/5" />
+            <Skeleton className="h-3 w-4/5" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/template/src/core/notifications/notifications.service.ts

@@ -0,0 +1,132 @@
+import { ApiError } from '@/core/api/http'
+import { demoSeed } from '@/core/api/demo'
+import { createMockDocument, delay } from '@/core/api/mock'
+import { authStore } from '@/core/auth/auth-store'
+import type { Role } from '@/core/auth/roles'
+import {
+  defaultNotificationSettings,
+  type AppNotification,
+  type NotificationSettings,
+} from './types'
+
+/**
+ * The signed-in user's notifications and notification settings. A real
+ * backend implements this with `http`, e.g.
+ *
+ *   list:         GET  /me/notifications          (server drops events the user turned off)
+ *   markRead:     POST /me/notifications/{id}/read
+ *   markAllRead:  POST /me/notifications/read-all
+ *   settings:     GET  /me/notification-settings
+ *   updateSettings: PUT /me/notification-settings
+ *
+ * and may add `subscribe` for push (SSE / WebSocket): the hooks then refetch
+ * on every pushed event instead of relying on polling alone.
+ */
+export interface NotificationsService {
+  list(): Promise<AppNotification[]>
+  markRead(id: string): Promise<void>
+  markAllRead(): Promise<void>
+  settings(): Promise<NotificationSettings>
+  updateSettings(settings: NotificationSettings): Promise<NotificationSettings>
+  /** Optional push channel. Calls `onChange` when the feed changes; returns an unsubscribe. */
+  subscribe?(onChange: () => void): () => void
+}
+
+type NotificationsDoc = {
+  items: AppNotification[]
+  settings: NotificationSettings
+  /** When the mock last "received" a notification; drives the occasional new one. */
+  lastArrivalAt: number
+}
+
+export type Draft = Omit<AppNotification, 'id' | 'createdAt' | 'readAt'>
+
+const minute = 60_000
+
+/** Sample feed; without it the list starts empty and only a real backend adds to it. */
+const demo = demoSeed<{
+  seedFor(role: Role): [Draft, number, boolean][]
+  arrivalsFor(role: Role): (() => Draft)[]
+}>('notifications')
+function createMockNotificationsService(): NotificationsService {
+  const docs = new Map<string, ReturnType<typeof createMockDocument<NotificationsDoc>>>()
+
+  const current = () => {
+    const user = authStore.getSession()?.user
+    if (!user) throw new ApiError(401, 'unauthorized')
+    if (!docs.has(user.id)) {
+      docs.set(
+        user.id,
+        createMockDocument(`notifications:${user.id}`, () => {
+          const now = Date.now()
+          const items = (demo?.seedFor(user.role) ?? []).map(([draft, ago, read], i): AppNotification => {
+              const createdAt = new Date(now - ago * minute).toISOString()
+              return { ...draft, id: `n_${user.id}_${i + 1}`, createdAt, readAt: read ? createdAt : undefined }
+            })
+          return { items, settings: defaultNotificationSettings(), lastArrivalAt: now }
+        }),
+      )
+    }
+    return { doc: docs.get(user.id)!, role: user.role }
+  }
+
+  const save = (patch: Partial<NotificationsDoc>) => {
+    const { doc } = current()
+    return doc.save({ ...doc.get(), ...patch })
+  }
+
+  // Settings saved before an event type existed still get its default.
+  const settingsOf = (doc: NotificationsDoc): NotificationSettings => ({ ...defaultNotificationSettings(), ...doc.settings })
+
+  /** Every ~minute or two a new notification "arrives", so polling has something to pick up. */
+  function maybeArrive() {
+    const { doc, role } = current()
+    const data = doc.get()
+    if (Date.now() - data.lastArrivalAt < 45_000 || Math.random() > 0.4) return
+    const settings = settingsOf(data)
+    const pool = (demo?.arrivalsFor(role) ?? [])
+      .map((make) => make())
+      .filter((d) => settings[d.event].inApp)
+    const draft = pool[Math.floor(Math.random() * pool.length)]
+    const now = Date.now()
+    if (!draft) return save({ lastArrivalAt: now })
+    const item: AppNotification = { ...draft, id: `n_${now.toString(36)}`, createdAt: new Date(now).toISOString() }
+    save({ items: [item, ...data.items].slice(0, 50), lastArrivalAt: now })
+  }
+
+  return {
+    async list() {
+      await delay(150, 300)
+      maybeArrive()
+      const data = current().doc.get()
+      const settings = settingsOf(data)
+      return data.items
+        .filter((n) => settings[n.event]?.inApp !== false)
+        .sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+    },
+
+    async markRead(id) {
+      await delay(100, 200)
+      const now = new Date().toISOString()
+      save({ items: current().doc.get().items.map((n) => (n.id === id && !n.readAt ? { ...n, readAt: now } : n)) })
+    },
+
+    async markAllRead() {
+      await delay(150, 300)
+      const now = new Date().toISOString()
+      save({ items: current().doc.get().items.map((n) => (n.readAt ? n : { ...n, readAt: now })) })
+    },
+
+    async settings() {
+      await delay(150, 300)
+      return settingsOf(current().doc.get())
+    },
+
+    async updateSettings(settings) {
+      await delay()
+      return save({ settings }).settings
+    },
+  }
+}
+
+export const notificationsService: NotificationsService = createMockNotificationsService()

package/template/src/core/notifications/types.ts

@@ -0,0 +1,70 @@
+import { isDemo } from '@/core/config/runtime'
+
+/**
+ * Notification event types. One catalog drives both the Settings → Notifications
+ * toggles (email / in-app per event) and the in-app notification feed: a
+ * notification always belongs to one event, so turning the event off hides it.
+ */
+export const notificationEvents = [
+  { id: 'newSignIn', group: 'account' },
+  { id: 'passwordChanged', group: 'account' },
+  { id: 'userJoined', group: 'team' },
+  { id: 'roleChanged', group: 'team' },
+  { id: 'settingsChanged', group: 'company' },
+  { id: 'lowStock', group: 'catalog' },
+  { id: 'productChanged', group: 'catalog' },
+  { id: 'weeklySummary', group: 'updates' },
+  { id: 'announcements', group: 'updates' },
+] as const
+
+/** What Settings → Notifications lists; catalog events belong to the demo's sample module. */
+export const visibleNotificationEvents = notificationEvents.filter((e) => isDemo || e.group !== 'catalog')
+
+export type NotificationEventId = (typeof notificationEvents)[number]['id']
+export type NotificationGroup = (typeof notificationEvents)[number]['group']
+export type NotificationChannels = { email: boolean; inApp: boolean }
+export type NotificationSettings = Record<NotificationEventId, NotificationChannels>
+
+export function defaultNotificationSettings(): NotificationSettings {
+  return Object.fromEntries(
+    notificationEvents.map((e) => [e.id, { email: e.group === 'account', inApp: e.id !== 'announcements' }]),
+  ) as NotificationSettings
+}
+
+/** Visual tone of a notification: picks the icon and its semantic color. */
+export const notificationTypes = ['info', 'success', 'warning', 'error'] as const
+export type NotificationType = (typeof notificationTypes)[number]
+
+/**
+ * Message templates. The API sends a template id plus params (never
+ * pre-rendered text), so the client renders it in the active language from
+ * `notifications:templates.<template>.title|body`.
+ */
+export const notificationTemplates = [
+  'userInvited',
+  'userJoined',
+  'roleChangedOther',
+  'roleChangedYou',
+  'lowStock',
+  'productUpdated',
+  'settingsChanged',
+  'brandingChanged',
+  'securityAlert',
+  'passwordChanged',
+  'weeklySummary',
+  'announcement',
+] as const
+export type NotificationTemplate = (typeof notificationTemplates)[number]
+
+export type AppNotification = {
+  id: string
+  event: NotificationEventId
+  type: NotificationType
+  template: NotificationTemplate
+  /** Interpolation values for the template (names, counts, roles…). */
+  params: Record<string, string | number>
+  /** In-app path opened when the notification is clicked. */
+  link?: string
+  createdAt: string
+  readAt?: string
+}

package/template/src/core/preferences/preferences-store.ts

@@ -0,0 +1,70 @@
+import { useSyncExternalStore } from 'react'
+
+import { storage } from '@/core/lib/storage'
+
+/**
+ * Per-user display preferences (Settings → Preferences). Theme and language
+ * have their own stores (theme-context, i18n); these are the rest.
+ * Stored in this browser (`fp:preferences`); a backend would keep them on
+ * the user record and return them with the session.
+ */
+export const dateFormats = ['auto', 'dd.MM.yyyy', 'MM/dd/yyyy', 'yyyy-MM-dd'] as const
+export type DateFormat = (typeof dateFormats)[number]
+
+export const sidebarDefaults = ['remember', 'expanded', 'collapsed'] as const
+export type SidebarDefault = (typeof sidebarDefaults)[number]
+
+export type Preferences = {
+  /** IANA zone or 'auto' (the browser's). */
+  timeZone: string
+  dateFormat: DateFormat
+  sidebarDefault: SidebarDefault
+}
+
+const KEY = 'preferences'
+const defaults: Preferences = { timeZone: 'auto', dateFormat: 'auto', sidebarDefault: 'remember' }
+const listeners = new Set<() => void>()
+let current: Preferences = { ...defaults, ...storage.get<Partial<Preferences>>(KEY) }
+
+export const preferencesStore = {
+  get: () => current,
+  set(patch: Partial<Preferences>) {
+    current = { ...current, ...patch }
+    storage.set(KEY, current)
+    for (const l of listeners) l()
+  },
+  subscribe(listener: () => void) {
+    listeners.add(listener)
+    return () => listeners.delete(listener)
+  },
+}
+
+export function usePreferences() {
+  return useSyncExternalStore(preferencesStore.subscribe, preferencesStore.get)
+}
+
+/** Curated IANA zones for pickers (labels come from Intl). */
+export const timeZones = [
+  'Europe/Istanbul',
+  'Europe/London',
+  'Europe/Berlin',
+  'Europe/Paris',
+  'Europe/Madrid',
+  'Europe/Amsterdam',
+  'Europe/Moscow',
+  'Asia/Dubai',
+  'Asia/Riyadh',
+  'Asia/Kolkata',
+  'Asia/Singapore',
+  'Asia/Shanghai',
+  'Asia/Tokyo',
+  'Australia/Sydney',
+  'America/New_York',
+  'America/Chicago',
+  'America/Denver',
+  'America/Los_Angeles',
+  'America/Sao_Paulo',
+  'UTC',
+] as const
+
+export const browserTimeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone

package/template/src/core/setup/setup-gate.tsx

@@ -0,0 +1,20 @@
+import { useQuery } from '@tanstack/react-query'
+import { Navigate, Outlet, useLocation } from 'react-router'
+
+import { setupService } from './setup.service'
+
+/** Sends a brand-new install to the setup wizard, and keeps finished installs out of it. */
+export function SetupGate() {
+  const { pathname } = useLocation()
+  const { data: needsSetup, isPending } = useQuery({
+    queryKey: ['setup', 'status'],
+    queryFn: () => setupService.needsSetup(),
+    staleTime: Infinity,
+    retry: false,
+  })
+
+  if (isPending) return <div className="min-h-svh bg-canvas" />
+  if (needsSetup && pathname !== '/setup') return <Navigate to="/setup" replace />
+  if (!needsSetup && pathname === '/setup') return <Navigate to="/app" replace />
+  return <Outlet />
+}

package/template/src/core/setup/setup.service.ts

@@ -0,0 +1,101 @@
+import { ApiError, http } from '@/core/api/http'
+import { delay } from '@/core/api/mock'
+import { authStore } from '@/core/auth/auth-store'
+import { fetchCsrfCookie, startLocalSession, type AuthResponse } from '@/core/auth/auth.service'
+import { localCredentials } from '@/core/auth/local-credentials'
+import { createCompanySettings } from '@/core/company/company.service'
+import type { CompanyGeneral, Currency } from '@/core/company/types'
+import { authMode, isDemo } from '@/core/config/runtime'
+import { storage } from '@/core/lib/storage'
+import type { Language } from '@/core/i18n/types'
+import type { BrandSetting } from '@/core/theme/brand'
+import type { User } from '@/core/users/types'
+
+export type SetupInput = {
+  company: { name: string; language: Language; timeZone: string; currency: Currency }
+  admin: { firstName: string; lastName: string; email: string; password: string }
+  branding: { brand: BrandSetting; logo?: string }
+}
+
+/**
+ * First run: create the company and its Owner. With a backend these are
+ * GET /setup/status and POST /setup (see BACKEND.md), and the server must
+ * refuse POST /setup once an Owner exists.
+ */
+export interface SetupService {
+  needsSetup(): Promise<boolean>
+  complete(input: SetupInput): Promise<void>
+}
+
+/** Company name, logo and brand stay in the company service until it is connected to a backend too. */
+function saveCompany({ company, admin, branding }: SetupInput) {
+  const general: Partial<CompanyGeneral> = {
+    name: company.name,
+    contactEmail: admin.email,
+    defaultLanguage: company.language,
+    timeZone: company.timeZone,
+    currency: company.currency,
+  }
+  storage.set('mock:company', createCompanySettings(general, { brand: branding.brand, logoLight: branding.logo, logoDark: branding.logo }))
+}
+
+/** Clears anything left in this browser, such as data from another project on the same address. */
+function clearLocalData() {
+  for (const key of Object.keys(localStorage)) {
+    if (key.startsWith('fp:mock:')) storage.remove(key.slice(3))
+  }
+  authStore.clear()
+}
+
+const localSetupService: SetupService = {
+  async needsSetup() {
+    return !localCredentials.any()
+  },
+
+  async complete(input) {
+    await delay(300, 500)
+    if (localCredentials.any()) throw new ApiError(409, 'already_set_up')
+    clearLocalData()
+    const { firstName, lastName, email, password } = input.admin
+    const now = new Date().toISOString()
+    const owner: User = {
+      id: 'u_owner',
+      firstName,
+      lastName,
+      email: email.trim().toLowerCase(),
+      role: 'owner',
+      status: 'active',
+      createdAt: now,
+      lastActiveAt: now,
+    }
+    storage.set('mock:users', [owner])
+    saveCompany(input)
+    await localCredentials.set(owner.id, password)
+    startLocalSession(owner)
+  },
+}
+
+const restSetupService: SetupService = {
+  async needsSetup() {
+    // A backend that creates its admin another way (seeder, CLI) simply doesn't have this endpoint.
+    try {
+      return (await http.get<{ needsSetup: boolean }>('/setup/status')).needsSetup
+    } catch {
+      return false
+    }
+  },
+
+  async complete(input) {
+    await fetchCsrfCookie()
+    const { user, token, expiresAt } = await http.post<AuthResponse>('/setup', input)
+    saveCompany(input)
+    authStore.set({ user, token, expiresAt: expiresAt ?? Date.now() + 7 * 86_400_000 })
+  },
+}
+
+const demoSetupService: SetupService = {
+  needsSetup: async () => false,
+  complete: async () => {},
+}
+
+export const setupService: SetupService = isDemo ? demoSetupService : authMode === 'mock' ? localSetupService : restSetupService