create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/pages/settings/company/integrations/settings-forms.tsx

@@ -0,0 +1,299 @@
+import type { ReactNode } from 'react'
+import { Controller, useForm, useWatch, type Control, type FieldValues, type Path } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { Send } from 'lucide-react'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import { Field, FieldDescription, 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 { FormFieldError } from '@/core/components/form-error'
+import { FormLayout, FormSection } from '@/core/components/form-page'
+import { StatusBadge } from '@/core/components/status-badge'
+import { vmsg } from '@/core/i18n/keys'
+import { useIntegrationMutation, useSendTestEmail } from './hooks'
+import {
+  integrationsService,
+  type PaymentSettings,
+  type SmtpSettings,
+  type StorageSettings,
+} from './integrations.service'
+
+const required = z.string().trim().min(1, vmsg('validation.required'))
+
+const smtpSchema = z.object({
+  host: required,
+  port: z
+    .number({ error: vmsg('validation.number') })
+    .int(vmsg('validation.integer'))
+    .min(1, vmsg('validation.required'))
+    .max(65535, vmsg('validation.max', { max: 65535 })),
+  encryption: z.enum(['none', 'ssl', 'tls']),
+  username: z.string().trim(),
+  password: z.string(),
+  fromName: required,
+  fromEmail: required.pipe(z.email(vmsg('validation.email'))),
+})
+
+const storageSchema = z
+  .object({
+    provider: z.enum(['local', 's3', 'r2', 'gcs']),
+    bucket: z.string().trim(),
+    region: z.string().trim(),
+    accessKeyId: z.string().trim(),
+    secretAccessKey: z.string(),
+  })
+  .superRefine((v, ctx) => {
+    if (v.provider === 'local') return
+    for (const key of ['bucket', 'accessKeyId'] as const) {
+      if (!v[key]) ctx.addIssue({ code: 'custom', path: [key], message: vmsg('validation.required') })
+    }
+  })
+
+const paymentsSchema = z
+  .object({
+    provider: z.enum(['none', 'iyzico', 'stripe', 'paytr']),
+    mode: z.enum(['test', 'live']),
+    publicKey: z.string().trim(),
+    secretKey: z.string(),
+  })
+  .superRefine((v, ctx) => {
+    if (v.provider !== 'none' && !v.publicKey) ctx.addIssue({ code: 'custom', path: ['publicKey'], message: vmsg('validation.required') })
+  })
+
+/** Card header row: title, connection status. */
+function Header({ title, description, status }: { title: string; description: string; status: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2 p-5 sm:flex-row sm:items-start sm:justify-between md:p-6">
+      <div>
+        <h2 className="text-sm font-medium">{title}</h2>
+        <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+      </div>
+      <div className="flex shrink-0 gap-2">{status}</div>
+    </div>
+  )
+}
+
+function useSave<T>(fn: (v: T) => ReturnType<typeof integrationsService.get>, name: string, reset: (values: T) => void, pick: (i: Awaited<ReturnType<typeof integrationsService.get>>) => T) {
+  const { t } = useTranslation('company')
+  const mutation = useIntegrationMutation(fn)
+  return async (values: T) => {
+    const saved = await mutation.mutateAsync(values)
+    reset(pick(saved))
+    toast.success(t('integrations.saved', { name }))
+  }
+}
+
+export function SmtpForm({ value }: { value: SmtpSettings }) {
+  const { t } = useTranslation(['company', 'common'])
+  const form = useForm<SmtpSettings>({ resolver: zodResolver(smtpSchema), defaultValues: value })
+  const { register, control, handleSubmit, formState, reset } = form
+  const { errors } = formState
+  const save = useSave((v: SmtpSettings) => integrationsService.updateSmtp(v), t('integrations.tabs.smtp'), reset, (i) => i.smtp)
+  const test = useSendTestEmail()
+  const encryptionItems = (['none', 'ssl', 'tls'] as const).map((e) => ({ value: e, label: t(`integrations.smtp.encryptionOptions.${e}`) }))
+
+  return (
+    <FormLayout onSubmit={handleSubmit(save)} saveBar="dirty" isDirty={formState.isDirty} isSubmitting={formState.isSubmitting} onCancel={() => reset()}>
+      <Header
+        title={t('integrations.smtp.title')}
+        description={t('integrations.smtp.description')}
+        status={<StatusBadge tone={value.host ? 'success' : 'neutral'}>{value.host ? t('integrations.status.connected') : t('integrations.status.notConnected')}</StatusBadge>}
+      />
+      <FormSection title={t('integrations.smtp.server')}>
+        <div className="grid gap-4 sm:grid-cols-[1fr_6rem_9rem]">
+          <TextField label={t('integrations.smtp.host')} id="smtp-host" error={errors.host} inputProps={register('host')} />
+          <TextField
+            label={t('integrations.smtp.port')}
+            id="smtp-port"
+            error={errors.port}
+            inputProps={{ ...register('port', { valueAsNumber: true }), type: 'number', inputMode: 'numeric' }}
+          />
+          <SelectField control={control} name="encryption" id="smtp-encryption" label={t('integrations.smtp.encryption')} items={encryptionItems} />
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <TextField label={t('integrations.smtp.username')} id="smtp-username" error={errors.username} inputProps={{ ...register('username'), autoComplete: 'off' }} />
+          <SecretField label={t('integrations.smtp.password')} id="smtp-password" inputProps={register('password')} />
+        </div>
+      </FormSection>
+      <FormSection title={t('integrations.smtp.sender.title')} description={t('integrations.smtp.sender.description')}>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <TextField label={t('integrations.smtp.fromName')} id="smtp-from-name" error={errors.fromName} inputProps={register('fromName')} />
+          <TextField label={t('integrations.smtp.fromEmail')} id="smtp-from-email" error={errors.fromEmail} inputProps={{ ...register('fromEmail'), type: 'email' }} />
+        </div>
+        <div>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={test.isPending}
+            onClick={async () => {
+              await test.mutateAsync()
+              toast.success(t('integrations.smtp.testSent', { email: value.fromEmail }))
+            }}
+          >
+            {test.isPending ? <Spinner data-icon="inline-start" /> : <Send data-icon="inline-start" />}
+            {t('integrations.smtp.test')}
+          </Button>
+        </div>
+      </FormSection>
+    </FormLayout>
+  )
+}
+
+export function StorageForm({ value }: { value: StorageSettings }) {
+  const { t } = useTranslation('company')
+  const form = useForm<StorageSettings>({ resolver: zodResolver(storageSchema), defaultValues: value })
+  const { register, control, handleSubmit, formState, reset } = form
+  const { errors } = formState
+  const provider = useWatch({ control, name: 'provider' })
+  const save = useSave((v: StorageSettings) => integrationsService.updateStorage(v), t('integrations.tabs.storage'), reset, (i) => i.storage)
+  const providerItems = (['local', 's3', 'r2', 'gcs'] as const).map((p) => ({ value: p, label: t(`integrations.storage.providers.${p}`) }))
+
+  return (
+    <FormLayout onSubmit={handleSubmit(save)} saveBar="dirty" isDirty={formState.isDirty} isSubmitting={formState.isSubmitting} onCancel={() => reset()}>
+      <Header
+        title={t('integrations.storage.title')}
+        description={t('integrations.storage.description')}
+        status={<StatusBadge tone="success">{t(`integrations.storage.providers.${value.provider}`)}</StatusBadge>}
+      />
+      <FormSection title={t('integrations.storage.provider')}>
+        <SelectField control={control} name="provider" id="storage-provider" label={t('integrations.storage.provider')} items={providerItems} />
+        {provider === 'local' ? (
+          <p className="text-xs text-muted-foreground">{t('integrations.storage.localHint')}</p>
+        ) : (
+          <>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <TextField label={t('integrations.storage.bucket')} id="storage-bucket" error={errors.bucket} inputProps={register('bucket')} />
+              <TextField label={t('integrations.storage.region')} id="storage-region" error={errors.region} inputProps={register('region')} />
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2">
+              <TextField label={t('integrations.storage.accessKey')} id="storage-access" error={errors.accessKeyId} inputProps={{ ...register('accessKeyId'), autoComplete: 'off' }} />
+              <SecretField label={t('integrations.storage.secretKey')} id="storage-secret" inputProps={register('secretAccessKey')} />
+            </div>
+          </>
+        )}
+      </FormSection>
+    </FormLayout>
+  )
+}
+
+export function PaymentsForm({ value }: { value: PaymentSettings }) {
+  const { t } = useTranslation('company')
+  const form = useForm<PaymentSettings>({ resolver: zodResolver(paymentsSchema), defaultValues: value })
+  const { register, control, handleSubmit, formState, reset } = form
+  const { errors } = formState
+  const provider = useWatch({ control, name: 'provider' })
+  const save = useSave((v: PaymentSettings) => integrationsService.updatePayments(v), t('integrations.tabs.payments'), reset, (i) => i.payments)
+  const providerItems = (['none', 'iyzico', 'stripe', 'paytr'] as const).map((p) => ({ value: p, label: t(`integrations.payments.providers.${p}`) }))
+  const modeItems = (['test', 'live'] as const).map((m) => ({ value: m, label: t(`integrations.payments.modes.${m}`) }))
+  const connected = value.provider !== 'none'
+
+  return (
+    <FormLayout onSubmit={handleSubmit(save)} saveBar="dirty" isDirty={formState.isDirty} isSubmitting={formState.isSubmitting} onCancel={() => reset()}>
+      <Header
+        title={t('integrations.payments.title')}
+        description={t('integrations.payments.description')}
+        status={
+          <>
+            <StatusBadge tone={connected ? 'success' : 'neutral'}>
+              {connected ? t('integrations.status.connected') : t('integrations.status.notConnected')}
+            </StatusBadge>
+            {connected && (
+              <StatusBadge tone={value.mode === 'live' ? 'success' : 'warning'}>
+                {value.mode === 'live' ? t('integrations.status.liveMode') : t('integrations.status.testMode')}
+              </StatusBadge>
+            )}
+          </>
+        }
+      />
+      <FormSection title={t('integrations.payments.provider')}>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <SelectField control={control} name="provider" id="pay-provider" label={t('integrations.payments.provider')} items={providerItems} />
+          {provider !== 'none' && (
+            <SelectField control={control} name="mode" id="pay-mode" label={t('integrations.payments.mode')} items={modeItems} />
+          )}
+        </div>
+        {provider !== 'none' && (
+          <div className="grid gap-4 sm:grid-cols-2">
+            <TextField label={t('integrations.payments.publicKey')} id="pay-public" error={errors.publicKey} inputProps={{ ...register('publicKey'), autoComplete: 'off' }} />
+            <SecretField label={t('integrations.payments.secretKey')} id="pay-secret" inputProps={register('secretKey')} />
+          </div>
+        )}
+      </FormSection>
+    </FormLayout>
+  )
+}
+
+function TextField({
+  id,
+  label,
+  error,
+  inputProps,
+}: {
+  id: string
+  label: string
+  error?: { message?: string }
+  inputProps: React.ComponentProps<'input'>
+}) {
+  return (
+    <Field data-invalid={!!error}>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Input id={id} aria-invalid={!!error} {...inputProps} />
+      <FormFieldError error={error} />
+    </Field>
+  )
+}
+
+function SecretField({ id, label, inputProps }: { id: string; label: string; inputProps: React.ComponentProps<'input'> }) {
+  const { t } = useTranslation('company')
+  return (
+    <Field>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Input id={id} type="password" autoComplete="new-password" {...inputProps} />
+      <FieldDescription>{t('integrations.secretHint')}</FieldDescription>
+    </Field>
+  )
+}
+
+function SelectField<T extends FieldValues>({
+  control,
+  name,
+  id,
+  label,
+  items,
+}: {
+  control: Control<T>
+  name: Path<T>
+  id: string
+  label: string
+  items: { value: string; label: string }[]
+}) {
+  return (
+    <Field>
+      <FieldLabel htmlFor={id}>{label}</FieldLabel>
+      <Controller
+        control={control}
+        name={name}
+        render={({ field }) => (
+          <Select items={items} value={field.value} onValueChange={(v) => v && field.onChange(v)}>
+            <SelectTrigger id={id} className="w-full">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {items.map((i) => (
+                <SelectItem key={i.value} value={i.value}>
+                  {i.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      />
+    </Field>
+  )
+}

package/template/src/pages/settings/company/integrations/webhooks-panel.tsx

@@ -0,0 +1,179 @@
+import { useState } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { Plus, Trash2, Webhook as WebhookIcon } from 'lucide-react'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { Spinner } from '@/components/ui/spinner'
+import { Switch } from '@/components/ui/switch'
+import { useConfirm } from '@/core/components/confirm-dialog'
+import { FormFieldError } from '@/core/components/form-error'
+import { Panel } from '@/core/components/page'
+import { EmptyState } from '@/core/components/states'
+import { StatusDot } from '@/core/components/status-badge'
+import { vmsg } from '@/core/i18n/keys'
+import { useFormat } from '@/core/i18n/use-format'
+import { useIntegrationMutation } from './hooks'
+import { integrationsService, webhookEvents, type Webhook, type WebhookEvent } from './integrations.service'
+
+export function WebhooksPanel({ webhooks }: { webhooks: Webhook[] }) {
+  const { t } = useTranslation(['company', 'common'])
+  const fmt = useFormat()
+  const confirm = useConfirm()
+  const [open, setOpen] = useState(false)
+  const toggle = useIntegrationMutation(({ id, active }: { id: string; active: boolean }) => integrationsService.setWebhookActive(id, active))
+  const remove = useIntegrationMutation((id: string) => integrationsService.deleteWebhook(id))
+
+  async function onDelete(webhook: Webhook) {
+    const ok = await confirm({
+      title: t('integrations.webhooks.deleteConfirm'),
+      description: t('integrations.webhooks.deleteDescription', { url: webhook.url }),
+      confirmLabel: t('common:actions.delete'),
+      destructive: true,
+    })
+    if (!ok) return
+    await remove.mutateAsync(webhook.id)
+    toast.success(t('integrations.webhooks.deleted'))
+  }
+
+  return (
+    <Panel
+      label={t('integrations.webhooks.title')}
+      actions={
+        <Button variant="ghost" size="sm" onClick={() => setOpen(true)}>
+          <Plus data-icon="inline-start" />
+          {t('integrations.webhooks.add')}
+        </Button>
+      }
+    >
+      <p className="border-b px-4 py-2.5 text-xs text-muted-foreground">{t('integrations.webhooks.description')}</p>
+      {webhooks.length === 0 ? (
+        <EmptyState
+          icon={<WebhookIcon />}
+          title={t('integrations.webhooks.empty')}
+          description={t('integrations.webhooks.emptyDescription')}
+          className="py-10"
+        />
+      ) : (
+        <ul className="divide-y">
+          {webhooks.map((w) => (
+            <li key={w.id} className="flex items-center gap-3 px-4 py-3">
+              <StatusDot tone={!w.active ? 'neutral' : w.lastStatus === 'failed' ? 'danger' : 'success'} />
+              <div className="min-w-0 flex-1">
+                <p className="truncate tabular-nums text-xs">{w.url}</p>
+                <p className="truncate text-xs text-muted-foreground">
+                  {t('integrations.webhooks.eventCount', { count: w.events.length })} ·{' '}
+                  {w.lastDeliveryAt
+                    ? t('integrations.webhooks.lastDelivery', { when: fmt.relative(w.lastDeliveryAt) })
+                    : t('integrations.webhooks.neverDelivered')}
+                </p>
+              </div>
+              <Switch
+                checked={w.active}
+                aria-label={t('integrations.webhooks.toggle', { url: w.url })}
+                onCheckedChange={(active) => toggle.mutate({ id: w.id, active })}
+              />
+              <Button variant="ghost" size="icon-sm" aria-label={t('integrations.webhooks.deleteLabel', { url: w.url })} onClick={() => void onDelete(w)}>
+                <Trash2 />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <WebhookDialog open={open} onOpenChange={setOpen} />
+    </Panel>
+  )
+}
+
+const schema = z.object({
+  url: z
+    .string()
+    .trim()
+    .regex(/^https:\/\/[^\s/$.?#].[^\s]*$/i, vmsg('company:integrations.webhooks.dialog.urlInvalid')),
+  events: z.array(z.enum(webhookEvents)).min(1, vmsg('company:integrations.webhooks.dialog.eventsRequired')),
+})
+type Values = { url: string; events: WebhookEvent[] }
+
+function WebhookDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const { t } = useTranslation(['company', 'common'])
+  const create = useIntegrationMutation((v: Values) => integrationsService.createWebhook(v))
+  const { register, control, handleSubmit, formState, reset } = useForm<Values>({
+    resolver: zodResolver(schema),
+    defaultValues: { url: '', events: ['product.created', 'product.updated'] },
+  })
+  const { errors } = formState
+
+  function close() {
+    onOpenChange(false)
+    reset()
+  }
+
+  const onSubmit = handleSubmit(async (values) => {
+    await create.mutateAsync(values)
+    toast.success(t('integrations.webhooks.created'))
+    close()
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && close()}>
+      <DialogContent showCloseButton={false} className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t('integrations.webhooks.dialog.title')}</DialogTitle>
+          <DialogDescription>{t('integrations.webhooks.dialog.description')}</DialogDescription>
+        </DialogHeader>
+        <form id="webhook-form" onSubmit={onSubmit} noValidate>
+          <FieldGroup className="gap-4">
+            <Field data-invalid={!!errors.url}>
+              <FieldLabel htmlFor="webhook-url">{t('integrations.webhooks.dialog.url')}</FieldLabel>
+              <Input id="webhook-url" type="url" inputMode="url" autoFocus placeholder="https://" className="tabular-nums" aria-invalid={!!errors.url} {...register('url')} />
+              <FormFieldError error={errors.url} />
+            </Field>
+            <FieldSet data-invalid={!!errors.events}>
+              <FieldLegend variant="label">{t('integrations.webhooks.dialog.events')}</FieldLegend>
+              <Controller
+                control={control}
+                name="events"
+                render={({ field }) => (
+                  <div className="flex flex-col gap-2">
+                    {webhookEvents.map((event) => (
+                      <Field key={event} orientation="horizontal">
+                        <Checkbox
+                          id={`event-${event}`}
+                          checked={field.value.includes(event)}
+                          onCheckedChange={(checked) =>
+                            field.onChange(checked ? [...field.value, event] : field.value.filter((e) => e !== event))
+                          }
+                        />
+                        <FieldLabel htmlFor={`event-${event}`} className="font-normal">
+                          {t(`integrations.webhooks.eventNames.${event}`)}
+                          <span className="tabular-nums text-2xs text-muted-foreground">{event}</span>
+                        </FieldLabel>
+                      </Field>
+                    ))}
+                  </div>
+                )}
+              />
+              <FormFieldError error={errors.events} />
+            </FieldSet>
+          </FieldGroup>
+        </form>
+        <DialogFooter>
+          <Button variant="ghost" onClick={close}>
+            {t('common:actions.cancel')}
+          </Button>
+          <Button type="submit" form="webhook-form" disabled={formState.isSubmitting}>
+            {formState.isSubmitting && <Spinner data-icon="inline-start" />}
+            {t('integrations.webhooks.add')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { Trans, useTranslation } from 'react-i18next'
+import { Blocks, Info } from 'lucide-react'
+
+import { Switch } from '@/components/ui/switch'
+import { appConfig } from '@/app.config'
+import { moduleActions } from '@/core/auth/permissions'
+import { Page } from '@/core/components/page'
+import { EmptyState } from '@/core/components/states'
+import { StatusBadge } from '@/core/components/status-badge'
+import { useAnyT } from '@/core/i18n/keys'
+import type { AppModule } from '@/core/modules/types'
+import { moduleRegistry, type ModuleId } from '@/modules/registry'
+
+const moduleIds = Object.keys(moduleRegistry) as ModuleId[]
+
+/** Read-only until a backend stores which modules are enabled (today: app.config.ts). */
+export default function ModulesPage() {
+  const { t } = useTranslation('company')
+  const anyT = useAnyT()
+
+  return (
+    <Page title={t('modules.title')} description={t('modules.description')}>
+      <p className="flex gap-2 rounded-xl border bg-fill-1 px-4 py-3 text-xs text-muted-foreground">
+        <Info className="mt-px size-3.5 shrink-0" />
+        <span>
+          <Trans t={t} i18nKey="modules.note" components={{ code: <code className="tabular-nums text-[11px] text-foreground" /> }} />
+        </span>
+      </p>
+      {moduleIds.length === 0 && (
+        <div className="rounded-xl border bg-card shadow-(--shadow-card)">
+          <EmptyState icon={<Blocks />} title={t('modules.emptyTitle')} description={t('modules.emptyDescription')} />
+        </div>
+      )}
+      <ul className="divide-y rounded-xl border bg-card shadow-(--shadow-card) empty:hidden">
+        {moduleIds.map((id) => {
+          // Typed explicitly: with no modules registered yet the registry's type is empty.
+          const module: AppModule = moduleRegistry[id]
+          const nav = module.nav[0]
+          const Icon = nav?.icon ?? Blocks
+          const name = nav ? anyT(nav.label) : id
+          const enabled = Boolean(appConfig.modules[id])
+          return (
+            <li key={id} className="flex items-center gap-4 p-4 md:px-6">
+              <span className="flex size-10 shrink-0 items-center justify-center rounded-xl border bg-raised text-muted-foreground shadow-(--shadow-raised)">
+                <Icon className="size-4" />
+              </span>
+              <div className="min-w-0 flex-1">
+                <p className="flex flex-wrap items-center gap-2 text-sm font-medium">
+                  {name}
+                  <StatusBadge tone={enabled ? 'success' : 'neutral'}>
+                    {enabled ? t('modules.enabled') : t('modules.disabled')}
+                  </StatusBadge>
+                </p>
+                <p className="mt-0.5 tabular-nums text-2xs text-muted-foreground">
+                  {id} · {t('modules.permissions', { count: moduleActions.length })}
+                </p>
+              </div>
+              <Switch checked={enabled} disabled aria-label={t('modules.toggleLabel', { name })} />
+            </li>
+          )
+        })}
+      </ul>
+    </Page>
+  )
+}

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

@@ -0,0 +1,116 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Check, Minus } from 'lucide-react'
+
+import { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table'
+import { TableHeaderCell } from '@/core/components/data-table/table-header-cell'
+import { hasPermission, matrixActions, permissionMatrix, roles, type Role } from '@/core/auth/permissions'
+import { Page, Panel } from '@/core/components/page'
+import type { AppModule } from '@/core/modules/types'
+import { Segmented } from '@/core/components/segmented'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useAnyT } from '@/core/i18n/keys'
+import { useActiveUsers } from '@/core/users/hooks'
+import { moduleRegistry } from '@/modules/registry'
+import { cn } from '@/lib/utils'
+
+/** "products.*", "settings.company.*": the shared prefix of a row's permission names. */
+function permissionPrefix(row: (typeof permissionMatrix)[number]) {
+  const first = Object.values(row.actions)[0] ?? ''
+  return `${first.slice(0, first.lastIndexOf('.'))}.*`
+}
+
+export default function RolesPage() {
+  const { t } = useTranslation(['company', 'common'])
+  const anyT = useAnyT()
+  const users = useActiveUsers()
+  const [role, setRole] = useState<Role>('editor')
+
+  const rowLabel = (row: (typeof permissionMatrix)[number]) =>
+    row.module
+      ? anyT((moduleRegistry[row.module] as AppModule).nav[0]?.label ?? 'common:nav.dashboard')
+      : t(`roles.resources.${row.id as 'dashboard'}`)
+
+  return (
+    <Page title={t('roles.title')} description={t('roles.description')}>
+      <ul className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        {roles.map((r) => {
+          const count = users.data?.filter((u) => u.role === r).length
+          return (
+            <li key={r} className="flex flex-col gap-2 rounded-xl border bg-card p-4 shadow-(--shadow-card)">
+              <div className="flex items-center justify-between gap-2">
+                <h2 className="text-sm font-medium">{t(`common:roles.${r as 'owner'}`)}</h2>
+                {count === undefined ? (
+                  <Skeleton className="h-4 w-14" />
+                ) : (
+                  <span className="text-[11px] text-muted-foreground tabular-nums">{t('roles.members', { count })}</span>
+                )}
+              </div>
+              <p className="text-xs leading-relaxed text-muted-foreground">{t(`roles.descriptions.${r as 'owner'}`)}</p>
+            </li>
+          )
+        })}
+      </ul>
+
+      <Panel label={t('roles.matrix.title')}>
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3">
+          <p className="text-xs text-muted-foreground">{t('roles.matrix.description')}</p>
+          <Segmented
+            label={t('roles.matrix.role')}
+            value={role}
+            onChange={setRole}
+            options={roles.map((r) => ({ value: r, label: t(`common:roles.${r as 'owner'}`) }))}
+          />
+        </div>
+        <div className="overflow-x-auto">
+          <Table>
+            <TableHeader>
+              <TableRow className="hover:bg-transparent">
+                <TableHeaderCell>{t('roles.matrix.resource')}</TableHeaderCell>
+                {matrixActions.map((a) => (
+                  <TableHeaderCell key={a} className="text-center">
+                    {t(`roles.actions.${a}`)}
+                  </TableHeaderCell>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {permissionMatrix.map((row) => (
+                <TableRow key={row.id}>
+                  <TableCell className="h-12 pl-4">
+                    <span className="block font-medium">{rowLabel(row)}</span>
+                    <span className="block tabular-nums text-2xs text-muted-foreground">{permissionPrefix(row)}</span>
+                  </TableCell>
+                  {matrixActions.map((action) => {
+                    const permission = row.actions[action]
+                    const granted = permission ? hasPermission(role, permission) : undefined
+                    return (
+                      <TableCell key={action} className="text-center last:pr-4">
+                        {permission === undefined ? (
+                          <span className="sr-only">{t('roles.matrix.notApplicable')}</span>
+                        ) : (
+                          <span
+                            title={permission}
+                            className={cn(
+                              'inline-flex size-6 items-center justify-center rounded-md',
+                              granted ? 'bg-fill-2 text-primary' : 'text-muted-foreground/60',
+                            )}
+                          >
+                            {granted ? <Check className="size-3.5" /> : <Minus className="size-3.5" />}
+                            <span className="sr-only">
+                              {permission}: {granted ? t('roles.matrix.granted') : t('roles.matrix.denied')}
+                            </span>
+                          </span>
+                        )}
+                      </TableCell>
+                    )
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </Panel>
+    </Page>
+  )
+}