create-freakpunch 0.1.0 → 0.2.0

package/template/src/pages/dashboard/dashboard-page.tsx

@@ -1,35 +1,22 @@
-import { useState } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { Link } from 'react-router'
-import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts'
-import { ArrowDownRight, ArrowRight, ArrowUpRight } from 'lucide-react'
+import { lazy, Suspense } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Blocks } from 'lucide-react'
 
-import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from '@/components/ui/chart'
-import { Skeleton } from '@/components/ui/skeleton'
-import { usePermissions } from '@/core/auth/can'
 import { useAuth } from '@/core/auth/use-auth'
-import { isFeatureOn } from '@/core/config/runtime'
-import { Page, Panel } from '@/core/components/page'
-import { Segmented } from '@/core/components/segmented'
-import { ErrorState } from '@/core/components/states'
-import { StatusDot } from '@/core/components/status-badge'
-import { useAnyT } from '@/core/i18n/keys'
-import { useFormat } from '@/core/i18n/use-format'
-import type { Formatters } from '@/core/lib/format'
-import { quickActions } from '@/core/modules/navigation'
-import { cn } from '@/lib/utils'
+import { isDemo } from '@/core/config/runtime'
+import { Page } from '@/core/components/page'
+import { EmptyState, LoadingState } from '@/core/components/states'
 import { enabledModules } from '@/modules/registry'
-import { rangeDays, useActivity, useKpis, useRevenue, type Activity, type Kpi, type Range } from './dashboard.service'
+import { QuickActionsCard } from './quick-actions'
 
-const ranges = ['7d', '30d', '90d'] as const
-const moduleWidgets = enabledModules.flatMap((m) => m.dashboardWidgets ?? [])
-const demoCards = isFeatureOn('demoDashboard')
+// A glob, not an import: the public demo's sample dashboard isn't part of installed copies.
+const demoLoader = Object.values(
+  import.meta.glob<{ DemoDashboardPage: React.ComponentType }>('/src/demo/dashboard-page.tsx'),
+)[0]
+const DemoDashboardPage =
+  isDemo && demoLoader ? lazy(async () => ({ default: (await demoLoader()).DemoDashboardPage })) : null
 
-function formatKpi(kpi: Kpi, fmt: Formatters) {
-  if (kpi.format === 'currency') return fmt.currencyWhole(kpi.value)
-  if (kpi.format === 'percent') return fmt.percent(kpi.value)
-  return fmt.number(kpi.value)
-}
+const moduleWidgets = enabledModules.flatMap((m) => m.dashboardWidgets ?? [])
 
 function greetingKey() {
   const h = new Date().getHours()
@@ -37,234 +24,32 @@ function greetingKey() {
 }
 
 export default function DashboardPage() {
-  const [range, setRange] = useState<Range>('30d')
   const { user } = useAuth()
   const { t } = useTranslation(['dashboard', 'common'])
 
+  if (DemoDashboardPage) {
+    return (
+      <Suspense fallback={<LoadingState />}>
+        <DemoDashboardPage />
+      </Suspense>
+    )
+  }
+
   return (
     <Page
       title={t(greetingKey(), { name: user?.firstName || t('greeting.fallbackName') })}
       documentTitle={t('common:nav.dashboard')}
-      description={t('description')}
-      actions={
-        demoCards && (
-          <Segmented
-            label={t('range.label')}
-            value={range}
-            onChange={setRange}
-            options={ranges.map((r) => ({ value: r, label: t(`range.${r}`) }))}
-          />
-        )
-      }
+      description={t('readyDescription')}
     >
-      {demoCards && <KpiGrid range={range} />}
       {moduleWidgets.map((Widget, i) => (
         <Widget key={i} />
       ))}
-      {demoCards ? (
-        <>
-          <div className="grid gap-4 xl:grid-cols-3">
-            <RevenueCard range={range} className="xl:col-span-2" />
-            <QuickActionsCard />
-          </div>
-          <ActivityCard />
-        </>
-      ) : (
-        <QuickActionsCard />
-      )}
-    </Page>
-  )
-}
-
-function KpiGrid({ range }: { range: Range }) {
-  const { data, isPending, error, refetch } = useKpis(range)
-  if (error) return <ErrorState error={error} onRetry={() => refetch()} />
-
-  return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-      {isPending
-        ? Array.from({ length: 4 }, (_, i) => <Skeleton key={i} className="h-[7.5rem] rounded-xl" />)
-        : data.map((kpi) => <KpiCard key={kpi.id} kpi={kpi} />)}
-    </div>
-  )
-}
-
-function KpiCard({ kpi }: { kpi: Kpi }) {
-  const { t } = useTranslation(['dashboard', 'common'])
-  const fmt = useFormat()
-  const up = kpi.change >= 0
-  const spark = kpi.spark.map((v, i) => ({ i, v }))
-  return (
-    <div className="flex flex-col gap-3 rounded-xl border bg-card p-4 shadow-(--shadow-card)">
-      <div className="flex items-center justify-between">
-        <span className="label-caps">{t(`kpis.${kpi.id}`)}</span>
-        <span
-          className={cn(
-            'inline-flex items-center gap-0.5 text-[11px] tabular-nums',
-            up ? 'text-success' : 'text-danger',
-          )}
-        >
-          {up ? <ArrowUpRight className="size-3" /> : <ArrowDownRight className="size-3" />}
-          {fmt.delta(kpi.change)}
-        </span>
-      </div>
-      <div className="flex items-end justify-between gap-3">
-        <span className="text-2xl font-semibold tracking-tight tabular-nums">{formatKpi(kpi, fmt)}</span>
-        <div className="h-8 w-20" aria-hidden>
-          <ChartContainer config={{ v: { color: 'var(--muted-foreground)' } }} className="aspect-auto h-8 w-20">
-            <LineChart data={spark}>
-              <Line dataKey="v" type="monotone" stroke="var(--color-v)" strokeWidth={1.5} dot={false} isAnimationActive={false} />
-            </LineChart>
-          </ChartContainer>
+      {enabledModules.length === 0 && (
+        <div className="rounded-xl border bg-card shadow-(--shadow-card)">
+          <EmptyState icon={<Blocks />} title={t('noModules.title')} description={t('noModules.description')} />
         </div>
-      </div>
-    </div>
-  )
-}
-
-function RevenueCard({ range, className }: { range: Range; className?: string }) {
-  const { data, isPending, error, refetch } = useRevenue(range)
-  const { t } = useTranslation(['dashboard', 'common'])
-  const fmt = useFormat()
-  const total = data?.reduce((s, p) => s + p.revenue, 0) ?? 0
-  const chartConfig = { revenue: { label: t('kpis.revenue'), color: 'var(--chart-1)' } } satisfies ChartConfig
-
-  return (
-    <Panel label={t('panels.revenue')} className={className} bodyClassName="p-4">
-      {error ? (
-        <ErrorState error={error} onRetry={() => refetch()} />
-      ) : (
-        <>
-          <div className="mb-4 flex items-baseline gap-2">
-            {isPending ? (
-              <Skeleton className="h-8 w-32" />
-            ) : (
-              <span className="text-2xl font-semibold tracking-tight tabular-nums">{fmt.currency(total)}</span>
-            )}
-            <span className="text-xs text-muted-foreground">{t('range.last', { count: rangeDays[range] })}</span>
-          </div>
-          {isPending ? (
-            <Skeleton className="h-64 w-full rounded-lg" />
-          ) : (
-            <ChartContainer config={chartConfig} className="aspect-auto h-64 w-full">
-              <AreaChart data={data} margin={{ left: 0, right: 4, top: 4 }}>
-                <defs>
-                  <linearGradient id="fill-revenue" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="0%" stopColor="var(--color-revenue)" stopOpacity={0.22} />
-                    <stop offset="100%" stopColor="var(--color-revenue)" stopOpacity={0} />
-                  </linearGradient>
-                </defs>
-                <CartesianGrid vertical={false} strokeDasharray="3 3" />
-                <XAxis
-                  dataKey="date"
-                  tickLine={false}
-                  axisLine={false}
-                  tickMargin={8}
-                  minTickGap={28}
-                  tickFormatter={(d: string) => fmt.dayMonth(d)}
-                />
-                <YAxis tickLine={false} axisLine={false} width={52} tickFormatter={(v: number) => fmt.compactCurrency(v)} />
-                <ChartTooltip
-                  cursor={{ stroke: 'var(--border)' }}
-                  content={
-                    <ChartTooltipContent
-                      labelFormatter={(d) => fmt.weekdayDayMonth(String(d))}
-                      formatter={(v) => (
-                        <span className="font-medium tabular-nums">{fmt.currency(Number(v))}</span>
-                      )}
-                    />
-                  }
-                />
-                <Area
-                  dataKey="revenue"
-                  type="monotone"
-                  stroke="var(--color-revenue)"
-                  strokeWidth={2}
-                  fill="url(#fill-revenue)"
-                />
-              </AreaChart>
-            </ChartContainer>
-          )}
-        </>
-      )}
-    </Panel>
-  )
-}
-
-function QuickActionsCard() {
-  const t = useAnyT()
-  const { can } = usePermissions()
-  return (
-    <Panel label={t('dashboard:panels.quickActions')} bodyClassName="p-2">
-      <ul className="flex flex-col gap-0.5">
-        {quickActions
-          .filter((a) => !a.permission || can(a.permission))
-          .map(({ path, label, description, icon: Icon }) => (
-          <li key={path}>
-            <Link
-              to={path}
-              className="group flex items-center gap-3 rounded-lg p-2 outline-none hover:bg-fill-1 focus-visible:ring-2 focus-visible:ring-ring/40"
-            >
-              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-raised text-muted-foreground shadow-(--shadow-raised) group-hover:text-primary">
-                <Icon className="size-4" />
-              </span>
-              <span className="min-w-0 flex-1">
-                <span className="block text-sm font-medium">{t(label)}</span>
-                {description && <span className="block truncate text-xs text-muted-foreground">{t(description)}</span>}
-              </span>
-              <ArrowRight className="size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" />
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </Panel>
-  )
-}
-
-function ActivityCard() {
-  const { data, isPending, error, refetch } = useActivity()
-  const { t } = useTranslation(['dashboard', 'common'])
-
-  return (
-    <Panel label={t('panels.activity')}>
-      {error ? (
-        <ErrorState error={error} onRetry={() => refetch()} />
-      ) : (
-        <ul className="divide-y">
-          {isPending
-            ? Array.from({ length: 5 }, (_, i) => (
-                <li key={i} className="flex items-center gap-3 px-4 py-3">
-                  <Skeleton className="size-1.5 rounded-full" />
-                  <Skeleton className="h-4 flex-1" />
-                </li>
-              ))
-            : data.map((a) => <ActivityRow key={a.id} activity={a} />)}
-        </ul>
       )}
-    </Panel>
-  )
-}
-
-function ActivityRow({ activity: a }: { activity: Activity }) {
-  const { t } = useTranslation(['dashboard', 'common'])
-  const fmt = useFormat()
-  const actor = a.actor === 'system' ? t('activity.system') : a.actor === 'payments' ? t('activity.payments') : a.actor
-  const target = a.amount === undefined ? a.target : `${a.target} · ${fmt.currency(a.amount)}`
-
-  return (
-    <li className="flex items-center gap-3 px-4 py-3 text-sm">
-      <StatusDot tone={a.tone} />
-      <p className="min-w-0 flex-1 truncate text-muted-foreground">
-        <Trans
-          t={t}
-          i18nKey={`activity.${a.kind}`}
-          values={{ actor, target }}
-          components={{ b: <span className="font-medium text-foreground" /> }}
-        />
-      </p>
-      <time dateTime={a.at} className="shrink-0 tabular-nums text-[11px] text-muted-foreground">
-        {fmt.relative(a.at)}
-      </time>
-    </li>
+      <QuickActionsCard />
+    </Page>
   )
 }

package/template/src/pages/dashboard/quick-actions.tsx

@@ -0,0 +1,37 @@
+import { Link } from 'react-router'
+import { ArrowRight } from 'lucide-react'
+
+import { usePermissions } from '@/core/auth/can'
+import { Panel } from '@/core/components/page'
+import { useAnyT } from '@/core/i18n/keys'
+import { quickActions } from '@/core/modules/navigation'
+
+export function QuickActionsCard() {
+  const t = useAnyT()
+  const { can } = usePermissions()
+  return (
+    <Panel label={t('dashboard:panels.quickActions')} bodyClassName="p-2">
+      <ul className="flex flex-col gap-0.5">
+        {quickActions
+          .filter((a) => !a.permission || can(a.permission))
+          .map(({ path, label, description, icon: Icon }) => (
+          <li key={path}>
+            <Link
+              to={path}
+              className="group flex items-center gap-3 rounded-lg p-2 outline-none hover:bg-fill-1 focus-visible:ring-2 focus-visible:ring-ring/40"
+            >
+              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-raised text-muted-foreground shadow-(--shadow-raised) group-hover:text-primary">
+                <Icon className="size-4" />
+              </span>
+              <span className="min-w-0 flex-1">
+                <span className="block text-sm font-medium">{t(label)}</span>
+                {description && <span className="block truncate text-xs text-muted-foreground">{t(description)}</span>}
+              </span>
+              <ArrowRight className="size-4 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </Panel>
+  )
+}

package/template/src/pages/login-page.tsx

@@ -11,10 +11,12 @@ import { Card, CardContent } from '@/components/ui/card'
 import { Field, FieldDescription, FieldGroup, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { Spinner } from '@/components/ui/spinner'
-import { appConfig } from '@/app.config'
+import { demoSeed } from '@/core/api/demo'
 import { ApiError } from '@/core/api/http'
 import { useAuth } from '@/core/auth/use-auth'
-import { authMode } from '@/core/config/runtime'
+import { useCompanySettings } from '@/core/company/hooks'
+import { useAppName } from '@/core/company/use-app-name'
+import { isDemo } from '@/core/config/runtime'
 import { FormFieldError } from '@/core/components/form-error'
 import { LanguageSwitcher } from '@/core/i18n/language-switcher'
 import { vmsg } from '@/core/i18n/keys'
@@ -40,14 +42,15 @@ export default function LoginPage() {
 
   const { register, handleSubmit, formState } = useForm<Values>({
     resolver: zodResolver(schema),
-    defaultValues: { email: 'owner@freakpunch.site', password: '' },
+    defaultValues: { email: demoSeed<string>('loginEmail') ?? '', password: '' },
   })
   const { errors, isSubmitting } = formState
 
+  const appName = useAppName()
   const title = t('signIn.title')
   useEffect(() => {
-    document.title = `${title} · ${appConfig.name}`
-  }, [title])
+    document.title = `${title} · ${appName}`
+  }, [title, appName])
 
   if (isAuthenticated && !isSubmitting) return <Navigate to={redirect} replace />
 
@@ -57,8 +60,10 @@ export default function LoginPage() {
       toast.success(t('signIn.welcome', { name: session.user.firstName }))
       navigate(redirect, { replace: true })
     } catch (e) {
-      const inactive = e instanceof ApiError && e.status === 403
-      toast.error(t('signIn.failed'), { description: inactive ? t('signIn.inactive') : e instanceof Error ? e.message : undefined })
+      const status = e instanceof ApiError ? e.status : undefined
+      const description =
+        status === 401 ? t('signIn.invalid') : status === 403 ? t('signIn.inactive') : e instanceof Error ? e.message : undefined
+      toast.error(t('signIn.failed'), { description })
     }
   })
 
@@ -77,7 +82,7 @@ export default function LoginPage() {
               <div className="mb-2 flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-semibold tracking-tight">{t('signIn.heading')}</h1>
                 <p className="text-sm text-balance text-muted-foreground">
-                  {t('signIn.description', { name: appConfig.name })}
+                  {t('signIn.description', { name: appName })}
                 </p>
               </div>
               <Field data-invalid={!!errors.email}>
@@ -86,6 +91,7 @@ export default function LoginPage() {
                   id="email"
                   type="email"
                   autoComplete="email"
+                  autoFocus={!isDemo}
                   size="lg"
                   aria-invalid={!!errors.email}
                   {...register('email')}
@@ -98,7 +104,7 @@ export default function LoginPage() {
                   id="password"
                   type="password"
                   autoComplete="current-password"
-                  autoFocus
+                  autoFocus={isDemo}
                   size="lg"
                   aria-invalid={!!errors.password}
                   {...register('password')}
@@ -116,9 +122,9 @@ export default function LoginPage() {
         </CardContent>
       </Card>
 
-      {authMode === 'mock' && (
+      {isDemo && (
         <p className="row-start-3 max-w-sm self-end pt-4 text-center text-xs text-balance text-muted-foreground md:max-w-md">
-          {t('signIn.demo')}
+          {t('signIn.demo', { domain: demoSeed<string>('loginDomain') })}
         </p>
       )}
     </div>
@@ -127,13 +133,19 @@ export default function LoginPage() {
 
 /** Image side of the split card: a neutral, token-only placeholder (no stock photo). Hidden on mobile. */
 function BrandPanel() {
+  const appName = useAppName()
+  const logo = useCompanySettings().data?.branding.logoLight
   return (
     <div aria-hidden className="relative hidden items-center justify-center overflow-hidden border-l bg-fill-1 md:flex">
       <div className="absolute inset-0 bg-[radial-gradient(var(--border)_1px,transparent_1px)] bg-size-[16px_16px] mask-[radial-gradient(ellipse_at_center,black_30%,transparent_75%)]" />
       <div className="relative flex size-24 items-center justify-center rounded-(--radius-panel) bg-raised shadow-(--shadow-raised) ring-1 ring-border">
-        <span className="flex size-12 items-center justify-center rounded-xl bg-foreground text-xl font-semibold text-background">
-          {appConfig.name[0]?.toUpperCase()}
-        </span>
+        {logo ? (
+          <img src={logo} alt="" className="max-h-16 max-w-16 object-contain" />
+        ) : (
+          <span className="flex size-12 items-center justify-center rounded-xl bg-foreground text-xl font-semibold text-background">
+            {appName[0]?.toUpperCase()}
+          </span>
+        )}
       </div>
     </div>
   )

package/template/src/pages/not-found-page.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import { isRouteErrorResponse, useRouteError } from 'react-router'
 import { ArrowLeft } from 'lucide-react'
 
-import { appConfig } from '@/app.config'
 import { ButtonLink } from '@/core/components/button-link'
 import { cn } from '@/lib/utils'
 
@@ -22,7 +21,7 @@ export function Message({
   const { t } = useTranslation()
 
   useEffect(() => {
-    document.title = `${title} · ${appConfig.name}`
+    document.title = title
   }, [title])
 
   return (

package/template/src/pages/settings/account/account.service.ts

@@ -1,6 +1,10 @@
 import { ApiError } from '@/core/api/http'
-import { createMockDocument, delay, seededRandom } from '@/core/api/mock'
+import { demoSeed } from '@/core/api/demo'
+import { createMockDocument, delay } from '@/core/api/mock'
+import { appConfig } from '@/app.config'
 import { authStore } from '@/core/auth/auth-store'
+import { localCredentials } from '@/core/auth/local-credentials'
+import { isDemo } from '@/core/config/runtime'
 import {
   type ActiveSession,
   type LoginEvent,
@@ -30,53 +34,24 @@ export interface AccountService {
 /** Error codes in ApiError.message; screens map them to translations. */
 export const accountErrors = { wrongPassword: 'wrong_password', invalidCode: 'invalid_code' } as const
 
-type AccountDoc = {
+export type AccountDoc = {
   security: SecurityOverview
   sessions: ActiveSession[]
   history: LoginEvent[]
 }
 
-const hour = 3_600_000
-
-function seed(userId: string): AccountDoc {
-  const now = Date.now()
-  const rand = seededRandom(userId.length * 7919 + userId.charCodeAt(userId.length - 1))
-  const at = (hoursAgo: number) => new Date(now - hoursAgo * hour).toISOString()
-  const devices = [
-    { browser: 'Chrome', os: 'macOS', kind: 'desktop', location: 'İstanbul, TR', ip: '88.241.12.40' },
-    { browser: 'Safari', os: 'iOS', kind: 'mobile', location: 'İstanbul, TR', ip: '176.88.31.7' },
-    { browser: 'Firefox', os: 'Windows', kind: 'desktop', location: 'Ankara, TR', ip: '78.180.5.122' },
-    { browser: 'Edge', os: 'Windows', kind: 'desktop', location: 'Berlin, DE', ip: '91.64.200.18' },
-  ] as const
-  return {
-    security: { passwordChangedAt: at(24 * 64), twoFactorEnabled: false },
-    sessions: devices.slice(0, 3).map((d, i) => ({
-      ...d,
-      id: `s_${i + 1}`,
-      lastActiveAt: at(i === 0 ? 0 : i * 20 + rand() * 10),
-      current: i === 0,
-    })),
-    history: Array.from({ length: 8 }, (_, i) => {
-      const d = devices[Math.floor(rand() * devices.length)]!
-      return {
-        id: `l_${i + 1}`,
-        at: at(i * 19 + rand() * 6),
-        browser: d.browser,
-        os: d.os,
-        location: d.location,
-        ip: d.ip,
-        success: i !== 2 && i !== 5,
-      }
-    }),
-  }
-}
+const blankAccount = (): AccountDoc => ({
+  security: { passwordChangedAt: new Date().toISOString(), twoFactorEnabled: false },
+  sessions: [],
+  history: [],
+})
 
 function createMockAccountService(): AccountService {
   const docs = new Map<string, ReturnType<typeof createMockDocument<AccountDoc>>>()
   const doc = () => {
     const userId = authStore.getSession()?.user.id
     if (!userId) throw new ApiError(401, 'unauthorized')
-    if (!docs.has(userId)) docs.set(userId, createMockDocument(`account:${userId}`, () => seed(userId)))
+    if (!docs.has(userId)) docs.set(userId, createMockDocument(`account:${userId}`, () => demoSeed<(id: string) => AccountDoc>('account')?.(userId) ?? blankAccount()))
     return docs.get(userId)!
   }
   const update = (patch: Partial<AccountDoc>) => doc().save({ ...doc().get(), ...patch })
@@ -88,10 +63,16 @@ function createMockAccountService(): AccountService {
       return doc().get().security
     },
 
-    async changePassword({ current }) {
+    async changePassword({ current, next }) {
       await delay(500, 800)
-      // Demo rule so the error path can be tried: "wrong" is never the current password.
-      if (current === 'wrong') throw new ApiError(400, accountErrors.wrongPassword)
+      if (isDemo) {
+        // Demo rule so the error path can be tried: "wrong" is never the current password.
+        if (current === 'wrong') throw new ApiError(400, accountErrors.wrongPassword)
+      } else {
+        const userId = authStore.getSession()?.user.id ?? ''
+        if (!(await localCredentials.verify(userId, current))) throw new ApiError(400, accountErrors.wrongPassword)
+        await localCredentials.set(userId, next)
+      }
       update({ security: { ...doc().get().security, passwordChangedAt: new Date().toISOString() } })
     },
 
@@ -102,7 +83,7 @@ function createMockAccountService(): AccountService {
       const email = authStore.getSession()?.user.email ?? ''
       return {
         secret: pendingSecret.match(/.{4}/g)!.join(' '),
-        otpauthUrl: `otpauth://totp/freakpunch:${encodeURIComponent(email)}?secret=${pendingSecret}&issuer=freakpunch`,
+        otpauthUrl: `otpauth://totp/${encodeURIComponent(appConfig.name)}:${encodeURIComponent(email)}?secret=${pendingSecret}&issuer=${encodeURIComponent(appConfig.name)}`,
       }
     },
 

package/template/src/pages/settings/account/notifications-page.tsx

@@ -8,10 +8,10 @@ import { FormLayout } from '@/core/components/form-page'
 import { Page } from '@/core/components/page'
 import { ErrorState, LoadingState } from '@/core/components/states'
 import { useNotificationSettings, useUpdateNotificationSettings } from '@/core/notifications/hooks'
-import { notificationEvents, type NotificationGroup, type NotificationSettings } from '@/core/notifications/types'
+import { visibleNotificationEvents, type NotificationGroup, type NotificationSettings } from '@/core/notifications/types'
 
 const channels = ['email', 'inApp'] as const
-const groups = [...new Set(notificationEvents.map((e) => e.group))] as NotificationGroup[]
+const groups = [...new Set(visibleNotificationEvents.map((e) => e.group))] as NotificationGroup[]
 
 export default function NotificationsPage() {
   const { t } = useTranslation('account')
@@ -67,7 +67,7 @@ function NotificationsForm({ settings }: { settings: NotificationSettings }) {
                 {t(`notifications.groups.${group}`)}
               </span>
             </div>
-            {notificationEvents
+            {visibleNotificationEvents
               .filter((e) => e.group === group)
               .map(({ id }) => {
                 const label = t(`notifications.events.${id}.label`)

package/template/src/pages/settings/company/general-page.tsx

@@ -30,16 +30,18 @@ const required = (max: number) =>
     .min(1, vmsg('validation.required'))
     .max(max, vmsg('validation.maxChars', { max }))
 
+const optional = (max: number) => z.string().trim().max(max, vmsg('validation.maxChars', { max }))
+
 const schema = z
   .object({
     name: required(80),
-    legalName: required(160),
-    taxOffice: required(80),
+    legalName: optional(160),
+    taxOffice: optional(80),
     taxNumber: z
       .string()
       .trim()
-      .regex(/^\d{10}$/, vmsg('company:general.tax.numberInvalid')),
-    address: required(300),
+      .regex(/^(\d{10})?$/, vmsg('company:general.tax.numberInvalid')),
+    address: optional(300),
     contactEmail: z.string().trim().min(1, vmsg('validation.required')).pipe(z.email(vmsg('validation.email'))),
     phoneCountry: z.string(),
     phoneNumber: z.string().trim(),

package/template/src/pages/settings/company/integrations/integrations.service.ts

@@ -1,3 +1,4 @@
+import { demoSeed } from '@/core/api/demo'
 import { createMockDocument, delay } from '@/core/api/mock'
 import { auditService } from '@/core/audit/audit.service'
 
@@ -70,33 +71,12 @@ export interface IntegrationsService {
   revokeApiKey(id: string): Promise<Integrations>
 }
 
-const day = 86_400_000
-const ago = (days: number) => new Date(Date.now() - days * day).toISOString()
-
-const seed = (): Integrations => ({
-  smtp: {
-    host: 'smtp.postmarkapp.com',
-    port: 587,
-    encryption: 'tls',
-    username: 'freakpunch',
-    password: 'mock-smtp-password',
-    fromName: 'freakpunch',
-    fromEmail: 'no-reply@freakpunch.site',
-  },
-  storage: { provider: 'r2', bucket: 'freakpunch-media', region: 'auto', accessKeyId: 'R2AKIA7Q3EXAMPLE', secretAccessKey: 'mock-secret' },
-  payments: { provider: 'iyzico', mode: 'test', publicKey: 'sandbox-pk-1a2b3c', secretKey: 'mock-secret' },
-  webhooks: [
-    {
-      id: 'wh_1',
-      url: 'https://hooks.example.com/orders',
-      events: ['product.created', 'product.updated'],
-      active: true,
-      createdAt: ago(40),
-      lastDeliveryAt: ago(0.2),
-      lastStatus: 'success',
-    },
-  ],
-  apiKeys: [{ id: 'key_1', name: 'Order sync', prefix: 'fp_live_8Kd2', createdAt: ago(62), lastUsedAt: ago(0.5) }],
+const blank = (): Integrations => ({
+  smtp: { host: '', port: 587, encryption: 'tls', username: '', password: '', fromName: '', fromEmail: '' },
+  storage: { provider: 'r2', bucket: '', region: '', accessKeyId: '', secretAccessKey: '' },
+  payments: { provider: 'iyzico', mode: 'test', publicKey: '', secretKey: '' },
+  webhooks: [],
+  apiKeys: [],
 })
 
 /** Replace secrets with the placeholder before returning (as an API would). */
@@ -113,7 +93,7 @@ function redact(value: Integrations): Integrations {
 const keep = (next: string, prev: string) => (next === SECRET_PLACEHOLDER ? prev : next)
 
 function createMockIntegrationsService(): IntegrationsService {
-  const doc = createMockDocument('integrations', seed)
+  const doc = createMockDocument('integrations', () => demoSeed<() => Integrations>('integrations')?.() ?? blank())
   const save = (patch: Partial<Integrations>) => redact(doc.save({ ...doc.get(), ...patch }))
 
   return {