create-freakpunch 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,278 @@
+import { useEffect } from 'react'
+import { Controller, useForm, useWatch } from 'react-hook-form'
+import { Trans, useTranslation } from 'react-i18next'
+import { Check, ImageOff, RotateCcw } from 'lucide-react'
+import { toast } from 'sonner'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Switch } from '@/components/ui/switch'
+import { useCan } from '@/core/auth/can'
+import { useCompanySettings, useUpdateBranding } from '@/core/company/hooks'
+import type { CompanyBranding } from '@/core/company/types'
+import { FormLayout, FormSection } from '@/core/components/form-page'
+import { ImageUpload } from '@/core/components/image-upload'
+import { Page } from '@/core/components/page'
+import { ErrorState, LoadingState } from '@/core/components/states'
+import { brandPresets, type BrandPresetId, type BrandSetting } from '@/core/theme/brand'
+import { useBrand } from '@/core/theme/brand-context'
+import { cn } from '@/lib/utils'
+import { ReadOnlyNotice } from './components/read-only-notice'
+
+const presetIds = Object.keys(brandPresets) as BrandPresetId[]
+const LIGHT_TEXT = 'oklch(1 0 0)' // fp-design-ignore: custom brand color math
+const DARK_TEXT = 'oklch(0.17 0.004 84.6)' // fp-design-ignore: custom brand color math
+
+/** White text on dark colors, near-black on light ones (relative luminance of a #rrggbb color). */
+function foregroundFor(hex: string) {
+  const [r, g, b] = [1, 3, 5].map((i) => {
+    const c = parseInt(hex.slice(i, i + 2), 16) / 255
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  }) as [number, number, number]
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.45 ? DARK_TEXT : LIGHT_TEXT
+}
+
+export default function BrandingPage() {
+  const { t } = useTranslation('company')
+  const query = useCompanySettings()
+  return (
+    <Page title={t('branding.title')} description={t('branding.description')}>
+      {query.isPending ? (
+        <LoadingState />
+      ) : query.error ? (
+        <ErrorState error={query.error} onRetry={() => query.refetch()} />
+      ) : (
+        <BrandingForm branding={query.data.branding} />
+      )}
+    </Page>
+  )
+}
+
+function BrandingForm({ branding }: { branding: CompanyBranding }) {
+  const { t } = useTranslation(['company', 'common'])
+  const canEdit = useCan('settings.company.edit')
+  const update = useUpdateBranding()
+  const { setBrand, previewBrand, defaultBrand } = useBrand()
+  const form = useForm<CompanyBranding>({ defaultValues: branding })
+  const { control, handleSubmit, formState, reset, setValue } = form
+  const brand = useWatch({ control, name: 'brand' })
+
+  // Live preview: the whole app (sidebar, buttons, focus rings) follows the selection until saved or left.
+  useEffect(() => previewBrand(brand), [brand, previewBrand])
+  useEffect(() => () => previewBrand(null), [previewBrand])
+
+  const onSubmit = handleSubmit(async (values) => {
+    const saved = await update.mutateAsync(values)
+    setBrand(saved.branding.brand)
+    reset(saved.branding)
+    toast.success(t('branding.saved'))
+  })
+
+  const onImageError = (err: 'tooLarge' | 'invalidType') => toast.error(t(`branding.imageError.${err}`))
+  const brandId = typeof brand === 'string' ? brand : 'custom'
+  const customHex = typeof brand === 'object' && brand.color.startsWith('#') ? brand.color : '#4f46e5' // fp-design-ignore: native color input default
+  const isDefault = JSON.stringify(brand) === JSON.stringify(defaultBrand)
+  const defaultName = typeof defaultBrand === 'string' ? t(`branding.presets.${defaultBrand}`) : t('branding.color.custom')
+
+  return (
+    <>
+      {!canEdit && <ReadOnlyNotice />}
+      <FormLayout
+        onSubmit={onSubmit}
+        saveBar="dirty"
+        isDirty={formState.isDirty}
+        isSubmitting={formState.isSubmitting}
+        onCancel={() => reset()}
+        readOnly={!canEdit}
+      >
+        <FormSection title={t('branding.logos.title')} description={t('branding.logos.description')}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {(['logoLight', 'logoDark'] as const).map((name) => (
+              <div key={name} className="flex flex-col gap-2">
+                <span className="text-xs font-medium">{t(name === 'logoLight' ? 'branding.logos.light' : 'branding.logos.dark')}</span>
+                <Controller
+                  control={control}
+                  name={name}
+                  render={({ field }) => (
+                    <ImageUpload
+                      value={field.value}
+                      onChange={field.onChange}
+                      onError={onImageError}
+                      disabled={!canEdit}
+                      label={t(name === 'logoLight' ? 'branding.logos.uploadLight' : 'branding.logos.uploadDark')}
+                      className="flex-col items-start"
+                      preview={(src) => (
+                        // `.light` / `.dark` scope the tile to that theme regardless of the app theme.
+                        <div
+                          className={cn(
+                            name === 'logoLight' ? 'light' : 'dark',
+                            'flex h-20 w-full items-center justify-center rounded-xl border bg-background p-3 text-muted-foreground',
+                          )}
+                        >
+                          {src ? (
+                            <img src={src} alt="" className="max-h-full max-w-full object-contain" />
+                          ) : (
+                            <span className="flex items-center gap-1.5 text-xs">
+                              <ImageOff className="size-4" />
+                              {t('branding.logos.empty')}
+                            </span>
+                          )}
+                        </div>
+                      )}
+                    />
+                  )}
+                />
+              </div>
+            ))}
+          </div>
+        </FormSection>
+
+        <FormSection title={t('branding.favicon.title')} description={t('branding.favicon.description')}>
+          <Controller
+            control={control}
+            name="favicon"
+            render={({ field }) => (
+              <ImageUpload
+                value={field.value}
+                onChange={field.onChange}
+                onError={onImageError}
+                disabled={!canEdit}
+                label={t('branding.favicon.upload')}
+                preview={(src) => (
+                  <div className="flex size-12 shrink-0 items-center justify-center rounded-xl border bg-fill-1">
+                    <img src={src ?? `${import.meta.env.BASE_URL}favicon.svg`} alt="" className="size-6 object-contain" />
+                  </div>
+                )}
+              />
+            )}
+          />
+        </FormSection>
+
+        <FormSection title={t('branding.color.title')} description={t('branding.color.description')}>
+          <RadioGroup
+            value={brandId}
+            onValueChange={(v) =>
+              setValue(
+                'brand',
+                v === 'custom' ? { color: customHex, foreground: foregroundFor(customHex) } : (v as BrandPresetId),
+                { shouldDirty: true },
+              )
+            }
+            className="flex flex-wrap gap-3"
+            aria-label={t('branding.color.title')}
+          >
+            {presetIds.map((id) => (
+              <label key={id} className="flex w-14 flex-col items-center gap-1.5" title={t(`branding.presets.${id}`)}>
+                <RadioGroupItem
+                  value={id}
+                  aria-label={t(`branding.presets.${id}`)}
+                  style={{ background: brandPresets[id].color }}
+                  className="size-8 ring-offset-2 ring-offset-card data-checked:ring-2 data-checked:ring-(--brand) *:[span]:hidden"
+                />
+                <span className={cn('text-2xs', brandId === id ? 'text-foreground' : 'text-muted-foreground')}>
+                  {t(`branding.presets.${id}`)}
+                </span>
+              </label>
+            ))}
+            <label className="flex w-14 flex-col items-center gap-1.5">
+              <RadioGroupItem
+                value="custom"
+                aria-label={t('branding.color.custom')}
+                style={{ background: brandId === 'custom' ? customHex : undefined }}
+                className="size-8 bg-fill-3 ring-offset-2 ring-offset-card data-checked:ring-2 data-checked:ring-(--brand) *:[span]:hidden"
+              />
+              <span className={cn('text-2xs', brandId === 'custom' ? 'text-foreground' : 'text-muted-foreground')}>
+                {t('branding.color.custom')}
+              </span>
+            </label>
+          </RadioGroup>
+
+          {brandId === 'custom' && (
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                value={customHex}
+                aria-label={t('branding.color.customLabel')}
+                onChange={(e) =>
+                  setValue('brand', { color: e.target.value, foreground: foregroundFor(e.target.value) }, { shouldDirty: true })
+                }
+                className="size-8 cursor-pointer rounded-lg border bg-transparent p-0.5"
+              />
+              <Input value={customHex.toUpperCase()} readOnly aria-label={t('branding.color.customLabel')} className="w-28 tabular-nums" />
+            </div>
+          )}
+
+          <BrandPreview />
+
+          <div>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              disabled={isDefault}
+              onClick={() => setValue('brand', defaultBrand as BrandSetting, { shouldDirty: true })}
+            >
+              <RotateCcw data-icon="inline-start" />
+              {t('branding.color.reset', { name: defaultName })}
+            </Button>
+          </div>
+        </FormSection>
+      </FormLayout>
+    </>
+  )
+}
+
+/** Live sample of every place the brand token shows up. */
+function BrandPreview() {
+  const { t } = useTranslation('company')
+  return (
+    <div className="grid gap-4 rounded-xl border bg-canvas p-4 sm:grid-cols-2" aria-label={t('branding.preview.title')}>
+      <div className="flex flex-col gap-3">
+        <span className="label-caps">{t('branding.preview.controls')}</span>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button type="button" tabIndex={-1}>
+            {t('branding.preview.primary')}
+          </Button>
+          <Button type="button" variant="outline" tabIndex={-1}>
+            {t('branding.preview.secondary')}
+          </Button>
+          <Badge>{t('branding.preview.new')}</Badge>
+        </div>
+        <div className="flex items-center gap-4 text-sm">
+          <span className="flex items-center gap-2">
+            <Switch defaultChecked tabIndex={-1} aria-label={t('branding.preview.enabled')} /> {t('branding.preview.enabled')}
+          </span>
+          <span className="flex items-center gap-2">
+            <Checkbox defaultChecked tabIndex={-1} aria-label={t('branding.preview.selected')} /> {t('branding.preview.selected')}
+          </span>
+        </div>
+        <Input
+          placeholder={t('branding.preview.focusRing')}
+          aria-label={t('branding.preview.focusRing')}
+          className="max-w-xs bg-background"
+        />
+      </div>
+      <div className="flex flex-col gap-3">
+        <span className="label-caps">{t('branding.preview.navigation')}</span>
+        <div className="flex flex-col gap-0.5 text-[13px]">
+          <div className="flex h-8 items-center gap-2 rounded-lg bg-raised px-2 font-medium shadow-(--shadow-raised) ring-1 ring-border">
+            <Check className="size-4 text-primary" /> {t('branding.preview.activeItem')}
+          </div>
+          <div className="flex h-8 items-center gap-2 rounded-lg px-2 text-muted-foreground">
+            <Check className="size-4" /> {t('branding.preview.inactiveItem')}
+          </div>
+        </div>
+        <p className="text-sm">
+          <Trans
+            t={t}
+            i18nKey="branding.preview.link"
+            components={{ a: <span className="font-medium text-primary underline underline-offset-4" /> }}
+          />
+        </p>
+      </div>
+    </div>
+  )
+}

package/template/src/pages/settings/company/components/invite-dialog.tsx

@@ -0,0 +1,106 @@
+import { Controller, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Field, FieldGroup, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Spinner } from '@/components/ui/spinner'
+import { ApiError } from '@/core/api/http'
+import { useCompanySettings } from '@/core/company/hooks'
+import { FormFieldError } from '@/core/components/form-error'
+import { vmsg } from '@/core/i18n/keys'
+import { useInviteUser } from '@/core/users/hooks'
+import { assignableRoles } from '@/core/users/types'
+import { userErrors } from '@/core/users/users.service'
+
+const schema = z.object({
+  email: z.string().trim().min(1, vmsg('validation.required')).pipe(z.email(vmsg('validation.email'))),
+  role: z.enum(assignableRoles),
+})
+type Values = z.infer<typeof schema>
+
+export function InviteDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const { t } = useTranslation(['company', 'common'])
+  const invite = useInviteUser()
+  const companyName = useCompanySettings().data?.general.name ?? ''
+  const { register, control, handleSubmit, formState, reset, setError } = useForm<Values>({
+    resolver: zodResolver(schema),
+    defaultValues: { email: '', role: 'editor' },
+  })
+  const { errors } = formState
+  const roleItems = assignableRoles.map((r) => ({ value: r, label: t(`common:roles.${r as 'owner'}`) }))
+
+  function close() {
+    onOpenChange(false)
+    reset()
+  }
+
+  const onSubmit = handleSubmit(async (values) => {
+    try {
+      await invite.mutateAsync(values)
+      toast.success(t('users.toasts.invited', { email: values.email }))
+      close()
+    } catch (e) {
+      if (e instanceof ApiError && e.message === userErrors.duplicateEmail) {
+        setError('email', { message: vmsg('company:users.inviteDialog.duplicate') })
+        return
+      }
+      toast.error(t('users.toasts.failed'))
+    }
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && close()}>
+      <DialogContent showCloseButton={false} className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('users.inviteDialog.title')}</DialogTitle>
+          <DialogDescription>{t('users.inviteDialog.description', { company: companyName })}</DialogDescription>
+        </DialogHeader>
+        <form id="invite-form" onSubmit={onSubmit} noValidate>
+          <FieldGroup className="gap-4">
+            <Field data-invalid={!!errors.email}>
+              <FieldLabel htmlFor="invite-email">{t('users.inviteDialog.email')}</FieldLabel>
+              <Input id="invite-email" type="email" autoFocus autoComplete="off" aria-invalid={!!errors.email} {...register('email')} />
+              <FormFieldError error={errors.email} />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="invite-role">{t('users.inviteDialog.role')}</FieldLabel>
+              <Controller
+                control={control}
+                name="role"
+                render={({ field }) => (
+                  <Select items={roleItems} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
+                    <SelectTrigger id="invite-role" className="w-full">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {roleItems.map((r) => (
+                        <SelectItem key={r.value} value={r.value}>
+                          {r.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              />
+            </Field>
+          </FieldGroup>
+        </form>
+        <DialogFooter>
+          <Button variant="ghost" onClick={close}>
+            {t('common:actions.cancel')}
+          </Button>
+          <Button type="submit" form="invite-form" disabled={formState.isSubmitting}>
+            {formState.isSubmitting && <Spinner data-icon="inline-start" />}
+            {t('users.inviteDialog.submit')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/template/src/pages/settings/company/components/read-only-notice.tsx

@@ -0,0 +1,13 @@
+import { useTranslation } from 'react-i18next'
+import { Lock } from 'lucide-react'
+
+/** Shown above company settings the current role can view but not change. */
+export function ReadOnlyNotice() {
+  const { t } = useTranslation('company')
+  return (
+    <p className="flex items-center gap-2 rounded-xl border bg-fill-1 px-4 py-3 text-xs text-muted-foreground">
+      <Lock className="size-3.5 shrink-0" />
+      {t('readOnly')}
+    </p>
+  )
+}

package/template/src/pages/settings/company/danger-zone-page.tsx

@@ -0,0 +1,127 @@
+import { useState, type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router'
+import { toast } from 'sonner'
+
+import { Button } from '@/components/ui/button'
+import { Field, FieldLabel } from '@/components/ui/field'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { useSession } from '@/core/auth/use-auth'
+import { useCompanySettings, useDeleteCompany } from '@/core/company/hooks'
+import { useConfirm } from '@/core/components/confirm-dialog'
+import { Page } from '@/core/components/page'
+import { useActiveUsers, useTransferOwnership } from '@/core/users/hooks'
+import { fullName } from '@/core/users/types'
+
+/** Owner only (route permission `company.delete`). Each action needs a typed confirmation. */
+export default function DangerZonePage() {
+  const { t } = useTranslation('company')
+  return (
+    <Page title={t('danger.title')} description={t('danger.description')}>
+      <TransferOwnership />
+      <DeleteCompany />
+    </Page>
+  )
+}
+
+function DangerCard({ title, description, children }: { title: string; description: string; children: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-4 rounded-xl border bg-card p-5 shadow-(--shadow-card) md:p-6">
+      <div>
+        <h2 className="text-sm font-medium">{title}</h2>
+        <p className="mt-1 max-w-prose text-xs text-muted-foreground">{description}</p>
+      </div>
+      {children}
+    </section>
+  )
+}
+
+function TransferOwnership() {
+  const { t } = useTranslation(['company', 'common'])
+  const me = useSession()?.user
+  const users = useActiveUsers()
+  const company = useCompanySettings().data?.general.name ?? ''
+  const transfer = useTransferOwnership()
+  const confirm = useConfirm()
+  const navigate = useNavigate()
+  const [target, setTarget] = useState<string | null>(null)
+
+  // Admins first, then the rest alphabetically.
+  const candidates = (users.data ?? [])
+    .filter((u) => u.id !== me?.id && fullName(u))
+    .sort((a, b) => Number(b.role === 'admin') - Number(a.role === 'admin') || fullName(a).localeCompare(fullName(b)))
+  const items = candidates.map((u) => ({ value: u.id, label: `${fullName(u)} · ${t(`common:roles.${u.role as 'owner'}`)}` }))
+  const selected = candidates.find((u) => u.id === target)
+
+  async function onTransfer() {
+    if (!selected) return
+    const name = fullName(selected)
+    const ok = await confirm({
+      title: t('danger.transfer.confirmTitle', { name }),
+      description: t('danger.transfer.confirmDescription', { name, company }),
+      confirmLabel: t('danger.transfer.button'),
+      destructive: true,
+      typeToConfirm: company,
+    })
+    if (!ok) return
+    await transfer.mutateAsync(selected.id)
+    toast.success(t('danger.transfer.done', { name }))
+    navigate('/app/settings/company/users', { replace: true })
+  }
+
+  return (
+    <DangerCard title={t('danger.transfer.title')} description={t('danger.transfer.description')}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-end">
+        <Field className="sm:max-w-xs">
+          <FieldLabel htmlFor="new-owner">{t('danger.transfer.select')}</FieldLabel>
+          <Select items={items} value={target} onValueChange={(v) => setTarget(v as string | null)}>
+            <SelectTrigger id="new-owner" className="w-full" disabled={items.length === 0}>
+              <SelectValue placeholder={t('danger.transfer.placeholder')} />
+            </SelectTrigger>
+            <SelectContent>
+              {items.map((i) => (
+                <SelectItem key={i.value} value={i.value}>
+                  {i.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </Field>
+        <Button variant="destructive" disabled={!selected || transfer.isPending} onClick={() => void onTransfer()}>
+          {t('danger.transfer.button')}
+        </Button>
+      </div>
+      {users.data && items.length === 0 && <p className="text-xs text-muted-foreground">{t('danger.transfer.noCandidates')}</p>}
+    </DangerCard>
+  )
+}
+
+function DeleteCompany() {
+  const { t } = useTranslation(['company', 'common'])
+  const company = useCompanySettings().data?.general.name ?? ''
+  const confirm = useConfirm()
+  const remove = useDeleteCompany()
+
+  async function onDelete() {
+    const ok = await confirm({
+      title: t('danger.delete.confirmTitle', { company }),
+      description: t('danger.delete.confirmDescription'),
+      confirmLabel: t('danger.delete.button'),
+      destructive: true,
+      typeToConfirm: company,
+    })
+    if (!ok) return
+    toast.success(t('danger.delete.done'))
+    await remove.mutateAsync(company)
+  }
+
+  return (
+    <DangerCard title={t('danger.delete.title')} description={t('danger.delete.description', { company })}>
+      <div>
+        <Button variant="destructive" disabled={!company || remove.isPending} onClick={() => void onDelete()}>
+          {t('danger.delete.button')}
+        </Button>
+      </div>
+    </DangerCard>
+  )
+}