create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/core/theme/brand-context.tsx

@@ -0,0 +1,53 @@
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState, type ReactNode } from 'react'
+
+import { appConfig } from '@/app.config'
+import { storage } from '@/core/lib/storage'
+import { applyBrand, type BrandSetting } from './brand'
+
+const STORAGE_KEY = 'brand'
+
+type BrandContextValue = {
+  brand: BrandSetting
+  /** The brand from app.config.ts, used when no user override is stored. */
+  defaultBrand: BrandSetting
+  setBrand: (brand: BrandSetting) => void
+  resetBrand: () => void
+  /** Temporarily apply a brand (live preview while editing); null restores the saved one. */
+  previewBrand: (brand: BrandSetting | null) => void
+}
+
+const BrandContext = createContext<BrandContextValue | null>(null)
+
+export function BrandProvider({ children }: { children: ReactNode }) {
+  const [brand, setBrandState] = useState<BrandSetting>(
+    () => storage.get<BrandSetting>(STORAGE_KEY) ?? appConfig.brand,
+  )
+
+  const [preview, setPreview] = useState<BrandSetting | null>(null)
+
+  useLayoutEffect(() => applyBrand(preview ?? brand), [brand, preview])
+
+  const setBrand = useCallback((next: BrandSetting) => {
+    storage.set(STORAGE_KEY, next)
+    setBrandState(next)
+  }, [])
+
+  const resetBrand = useCallback(() => {
+    storage.remove(STORAGE_KEY)
+    setBrandState(appConfig.brand)
+  }, [])
+
+  const value = useMemo(
+    () => ({ brand, defaultBrand: appConfig.brand, setBrand, resetBrand, previewBrand: setPreview }),
+    [brand, setBrand, resetBrand],
+  )
+
+  return <BrandContext value={value}>{children}</BrandContext>
+}
+
+// eslint-disable-next-line react/only-export-components
+export function useBrand() {
+  const ctx = useContext(BrandContext)
+  if (!ctx) throw new Error('useBrand must be used within <BrandProvider>')
+  return ctx
+}

package/template/src/core/theme/brand.ts

@@ -0,0 +1,29 @@
+/**
+ * Brand color presets (labels: `settings:brandPresets.<id>`). The active brand is written to the --brand and
+ * --brand-foreground CSS variables on <html>; everything else (primary
+ * buttons, focus rings, active states, chart series 1) derives from them.
+ */
+export const brandPresets = {
+  indigo: { color: 'oklch(0.585 0.233 277.117)', foreground: 'oklch(1 0 0)' },
+  blue: { color: 'oklch(0.588 0.217 257)', foreground: 'oklch(1 0 0)' },
+  violet: { color: 'oklch(0.56 0.25 302)', foreground: 'oklch(1 0 0)' },
+  emerald: { color: 'oklch(0.6 0.15 163)', foreground: 'oklch(1 0 0)' },
+  orange: { color: 'oklch(0.68 0.2 45)', foreground: 'oklch(1 0 0)' },
+  rose: { color: 'oklch(0.6 0.22 12)', foreground: 'oklch(1 0 0)' },
+  graphite: { color: 'oklch(0.25 0.005 84.6)', foreground: 'oklch(1 0 0)' },
+} as const
+
+export type BrandPresetId = keyof typeof brandPresets
+
+export type BrandSetting = BrandPresetId | { color: string; foreground: string }
+
+export function resolveBrand(setting: BrandSetting) {
+  return typeof setting === 'string' ? brandPresets[setting] : setting
+}
+
+export function applyBrand(setting: BrandSetting) {
+  const { color, foreground } = resolveBrand(setting)
+  const root = document.documentElement.style
+  root.setProperty('--brand', color)
+  root.setProperty('--brand-foreground', foreground)
+}

package/template/src/core/theme/theme-context.tsx

@@ -0,0 +1,62 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
+
+import { storage } from '@/core/lib/storage'
+
+export type Theme = 'light' | 'dark' | 'system'
+type Resolved = 'light' | 'dark'
+
+/** Keep in sync with the pre-paint script in index.html. */
+export const THEME_STORAGE_KEY = 'theme'
+
+type ThemeContextValue = {
+  theme: Theme
+  resolvedTheme: Resolved
+  setTheme: (theme: Theme) => void
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null)
+const media = () => window.matchMedia('(prefers-color-scheme: dark)')
+
+function apply(resolved: Resolved) {
+  const root = document.documentElement
+  // Suppress transitions while swapping so the whole UI changes at once.
+  const style = document.createElement('style')
+  style.textContent = '*,*::before,*::after{transition:none!important}'
+  document.head.append(style)
+  root.classList.toggle('dark', resolved === 'dark')
+  root.style.colorScheme = resolved
+  void window.getComputedStyle(document.body).opacity
+  requestAnimationFrame(() => style.remove())
+}
+
+/** Light / dark / system theme on <html class="dark">. Defaults to the system preference. */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>(() => storage.get<Theme>(THEME_STORAGE_KEY) ?? 'system')
+  const [systemDark, setSystemDark] = useState(() => media().matches)
+
+  useEffect(() => {
+    const mql = media()
+    const onChange = (e: MediaQueryListEvent) => setSystemDark(e.matches)
+    mql.addEventListener('change', onChange)
+    return () => mql.removeEventListener('change', onChange)
+  }, [])
+
+  const resolvedTheme: Resolved = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme
+
+  useEffect(() => apply(resolvedTheme), [resolvedTheme])
+
+  const setTheme = useCallback((next: Theme) => {
+    storage.set(THEME_STORAGE_KEY, next)
+    setThemeState(next)
+  }, [])
+
+  const value = useMemo(() => ({ theme, resolvedTheme, setTheme }), [theme, resolvedTheme, setTheme])
+  return <ThemeContext value={value}>{children}</ThemeContext>
+}
+
+// eslint-disable-next-line react/only-export-components
+export function useTheme() {
+  const ctx = useContext(ThemeContext)
+  if (!ctx) throw new Error('useTheme must be used within <ThemeProvider>')
+  return ctx
+}

package/template/src/core/theme/theme-options.ts

@@ -0,0 +1,8 @@
+import { Monitor, Moon, Sun } from 'lucide-react'
+
+/** Labels are `common:theme.<value>`. */
+export const themeOptions = [
+  { value: 'light', icon: Sun },
+  { value: 'dark', icon: Moon },
+  { value: 'system', icon: Monitor },
+] as const

package/template/src/core/theme/theme-toggle.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useTheme, type Theme } from './theme-context'
+import { themeOptions } from './theme-options'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const { t } = useTranslation()
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={
+          <Button variant="ghost" size="icon-sm" aria-label={t('theme.change')}>
+            <Sun className="dark:hidden" />
+            <Moon className="hidden dark:block" />
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="w-36">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{t('theme.label')}</DropdownMenuLabel>
+          <DropdownMenuRadioGroup value={theme} onValueChange={(v) => setTheme(v as Theme)}>
+            {themeOptions.map(({ value, icon: Icon }) => (
+              <DropdownMenuRadioItem key={value} value={value}>
+                <Icon />
+                {t(`theme.${value}`)}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/template/src/core/users/hooks.ts

@@ -0,0 +1,51 @@
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import type { ListParams } from '@/core/api/types'
+import type { AssignableRole, InviteInput, ProfilePatch, UserFilters } from './types'
+import { usersService } from './users.service'
+
+/** Query keys: invalidate `userKeys.all` after any write. */
+export const userKeys = {
+  all: ['users'] as const,
+  list: (params: ListParams<UserFilters>) => [...userKeys.all, 'list', params] as const,
+  active: () => [...userKeys.all, 'active'] as const,
+}
+
+export function useUsers(params: ListParams<UserFilters>) {
+  return useQuery({
+    queryKey: userKeys.list(params),
+    queryFn: () => usersService.list(params),
+    placeholderData: keepPreviousData,
+  })
+}
+
+export function useActiveUsers() {
+  return useQuery({ queryKey: userKeys.active(), queryFn: () => usersService.listActive() })
+}
+
+function useUsersMutation<TVars, TResult>(fn: (vars: TVars) => Promise<TResult>) {
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: fn,
+    // Audit entries are recorded by user writes, so refresh the log too.
+    onSuccess: () => Promise.all([qc.invalidateQueries({ queryKey: userKeys.all }), qc.invalidateQueries({ queryKey: ['audit'] })]),
+  })
+}
+
+export const useUpdateProfile = () =>
+  useUsersMutation(({ id, patch }: { id: string; patch: ProfilePatch }) => usersService.updateProfile(id, patch))
+
+export const useResolveEmailChange = () =>
+  useUsersMutation(({ id, accept }: { id: string; accept: boolean }) => usersService.resolveEmailChange(id, accept))
+
+export const useInviteUser = () => useUsersMutation((input: InviteInput) => usersService.invite(input))
+
+export const useResendInvite = () => useUsersMutation((id: string) => usersService.resendInvite(id))
+
+export const useChangeRole = () =>
+  useUsersMutation(({ id, role }: { id: string; role: AssignableRole }) => usersService.changeRole(id, role))
+
+export const useSetUserStatus = () =>
+  useUsersMutation(({ id, status }: { id: string; status: 'active' | 'deactivated' }) => usersService.setStatus(id, status))
+
+export const useTransferOwnership = () => useUsersMutation((toUserId: string) => usersService.transferOwnership(toUserId))

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

@@ -0,0 +1,37 @@
+import { roles, type Role } from '@/core/auth/roles'
+
+export const userStatuses = ['active', 'invited', 'deactivated'] as const
+export type UserStatus = (typeof userStatuses)[number]
+
+export type User = {
+  id: string
+  firstName: string
+  lastName: string
+  email: string
+  /** New email waiting for verification; `email` stays in use until then. */
+  pendingEmail?: string
+  /** E.164, e.g. +905321234567. */
+  phone?: string
+  jobTitle?: string
+  /** Image URL (a data URL in mock mode). */
+  avatarUrl?: string
+  role: Role
+  status: UserStatus
+  createdAt: string
+  lastActiveAt?: string
+}
+
+export type UserFilters = { role?: string; status?: string }
+
+/** Roles that can be given by invite or role change; Owner only via transfer. */
+export type AssignableRole = Exclude<Role, 'owner'>
+export const assignableRoles = roles.filter((r) => r !== 'owner') as [AssignableRole, ...AssignableRole[]]
+
+export type InviteInput = { email: string; role: AssignableRole }
+
+export type ProfilePatch = Partial<Pick<User, 'firstName' | 'lastName' | 'phone' | 'jobTitle' | 'avatarUrl'>> & {
+  /** Requesting a different email starts verification (sets pendingEmail). */
+  email?: string
+}
+
+export const fullName = (user: Pick<User, 'firstName' | 'lastName'>) => `${user.firstName} ${user.lastName}`.trim()

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

@@ -0,0 +1,167 @@
+import { demoSeed } from '@/core/api/demo'
+import { ApiError } from '@/core/api/http'
+import { createMockCollection, delay, notFound, paginate } from '@/core/api/mock'
+import { auditService } from '@/core/audit/audit.service'
+import type { ListParams, Paginated } from '@/core/api/types'
+import { authStore } from '@/core/auth/auth-store'
+import { canManageUser, type Role } from '@/core/auth/permissions'
+import { fullName, type AssignableRole, type InviteInput, type ProfilePatch, type User, type UserFilters } from './types'
+
+/**
+ * Team members. Screens depend only on this interface; a real backend
+ * implements it with `http` (e.g. GET /users, POST /users/invitations,
+ * PATCH /users/:id/role, POST /company/ownership-transfer).
+ * The mock enforces the same Owner rules a backend must enforce.
+ */
+export interface UsersService {
+  list(params: ListParams<UserFilters>): Promise<Paginated<User>>
+  /** All active users (for pickers such as the ownership transfer). */
+  listActive(): Promise<User[]>
+  get(id: string): Promise<User>
+  findByEmail(email: string): Promise<User | undefined>
+  invite(input: InviteInput): Promise<User>
+  resendInvite(id: string): Promise<User>
+  changeRole(id: string, role: AssignableRole): Promise<User>
+  setStatus(id: string, status: 'active' | 'deactivated'): Promise<User>
+  transferOwnership(toUserId: string): Promise<void>
+  updateProfile(id: string, patch: ProfilePatch): Promise<User>
+  /** Mock helper: completes or cancels a pending email change. */
+  resolveEmailChange(id: string, accept: boolean): Promise<User>
+}
+
+/** Error codes in ApiError.message; screens map them to translations. */
+export const userErrors = {
+  duplicateEmail: 'duplicate_email',
+  forbidden: 'forbidden',
+  inactive: 'inactive_account',
+} as const
+
+function createMockUsersService(): UsersService {
+  const db = createMockCollection('users', () => demoSeed<() => User[]>('users')?.() ?? [])
+  const find = (id: string) => db.find(id) ?? notFound('User', id)
+  const nextId = () => `u_${String(db.all().length + 1).padStart(4, '0')}_${Date.now().toString(36)}`
+  const actor = () => authStore.getSession()?.user ?? null
+
+  function save(user: User) {
+    db.save(db.all().map((u) => (u.id === user.id ? user : u)))
+    // Keep the signed-in user's session in sync with profile/role changes.
+    const session = authStore.getSession()
+    if (session?.user.id === user.id) authStore.set({ ...session, user })
+    return user
+  }
+
+  function assertCanManage(target: User) {
+    if (!canManageUser(actor(), target)) throw new ApiError(403, userErrors.forbidden)
+  }
+
+  return {
+    async list(params) {
+      await delay()
+      const { role, status } = params.filters ?? {}
+      const rows = db
+        .all()
+        .filter((u) => (!role || u.role === role) && (!status || u.status === status))
+        .map((u) => ({ ...u, name: fullName(u) || u.email }))
+      return paginate(rows, params, ['name', 'email', 'jobTitle'])
+    },
+
+    async listActive() {
+      await delay(150, 300)
+      return db.all().filter((u) => u.status === 'active')
+    },
+
+    async get(id) {
+      await delay(150, 300)
+      return find(id)
+    },
+
+    async findByEmail(email) {
+      return db.all().find((u) => u.email.toLowerCase() === email.trim().toLowerCase())
+    },
+
+    async invite({ email, role }) {
+      await delay()
+      if (!canManageUser(actor(), { id: '', role })) throw new ApiError(403, userErrors.forbidden)
+      if (db.all().some((u) => u.email.toLowerCase() === email.toLowerCase())) {
+        throw new ApiError(409, userErrors.duplicateEmail)
+      }
+      const user: User = {
+        id: nextId(),
+        firstName: '',
+        lastName: '',
+        email: email.trim().toLowerCase(),
+        role,
+        status: 'invited',
+        createdAt: new Date().toISOString(),
+      }
+      db.save([...db.all(), user])
+      auditService.record('userInvited', user.email, { role })
+      return user
+    },
+
+    async resendInvite(id) {
+      await delay()
+      const user = find(id)
+      assertCanManage(user)
+      auditService.record('inviteResent', user.email)
+      return save({ ...user, createdAt: new Date().toISOString() })
+    },
+
+    async changeRole(id, role) {
+      await delay()
+      const user = find(id)
+      assertCanManage(user)
+      const updated = save({ ...user, role })
+      auditService.record('roleChanged', user.email, { from: user.role, to: role })
+      return updated
+    },
+
+    async setStatus(id, status) {
+      await delay()
+      const user = find(id)
+      assertCanManage(user)
+      const updated = save({ ...user, status })
+      auditService.record(status === 'active' ? 'userReactivated' : 'userDeactivated', user.email)
+      return updated
+    },
+
+    async transferOwnership(toUserId) {
+      await delay(500, 900)
+      const current = actor()
+      if (current?.role !== 'owner') throw new ApiError(403, userErrors.forbidden)
+      const target = find(toUserId)
+      if (target.status !== 'active' || target.id === current.id) throw new ApiError(400, userErrors.forbidden)
+      const owner = find(current.id)
+      const demoted: Role = 'admin'
+      save({ ...target, role: 'owner' })
+      save({ ...owner, role: demoted })
+      auditService.record('ownershipTransferred', target.email)
+    },
+
+    async updateProfile(id, { email, ...patch }) {
+      await delay()
+      const user = find(id)
+      const changingEmail = email !== undefined && email.toLowerCase() !== user.email.toLowerCase()
+      if (changingEmail && db.all().some((u) => u.id !== id && u.email.toLowerCase() === email.toLowerCase())) {
+        throw new ApiError(409, userErrors.duplicateEmail)
+      }
+      return save({
+        ...user,
+        ...patch,
+        pendingEmail: changingEmail ? email.toLowerCase() : user.pendingEmail,
+      })
+    },
+
+    async resolveEmailChange(id, accept) {
+      await delay()
+      const user = find(id)
+      if (!user.pendingEmail) return user
+      return save({ ...user, email: accept ? user.pendingEmail : user.email, pendingEmail: undefined })
+    },
+  }
+}
+
+export const usersService: UsersService = createMockUsersService()
+
+/** Mock login lookup used by the auth service. */
+export const findUserByEmail = (email: string) => usersService.findByEmail(email)

package/template/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}