@hed-hog/core 0.0.387 → 0.0.390

package/hedhog/frontend/app/pages/_components/page-wizard-sheet.tsx.ejs

@@ -0,0 +1,1009 @@
+'use client';
+
+import { CopyButton } from '@/components/copy-button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { Switch } from '@/components/ui/switch';
+import { toKebabCase, toTitleCase } from '@/lib/scaffold/naming';
+import {
+  SCAFFOLD_COLUMN_TYPES,
+  type ScaffoldColumn,
+  type ScaffoldColumnType,
+  type ScaffoldContext,
+  type ScaffoldFile,
+  type ScaffoldPlan,
+  type ScaffoldTemplate,
+} from '@/lib/scaffold/types';
+import { cn } from '@/lib/utils';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Check, Loader2, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';
+import type { MenuNode, PaginatedResponse, RoleSummary } from './system-page-types';
+import { getMenuLabel, getRoleLabel } from './use-system-pages';
+
+const STEP_KEYS = [
+  'target',
+  'template',
+  'columns',
+  'backend',
+  'menu',
+  'review',
+] as const;
+
+const TEMPLATES: ScaffoldTemplate[] = [
+  'list-kpi',
+  'list-simple',
+  'detail-form',
+  'dashboard',
+];
+
+type PreviewResponse = {
+  files: ScaffoldFile[];
+  conflicts: string[];
+  steps: string[];
+};
+
+type ValidationIssue = { field: string; message: string };
+
+function emptyColumn(): ScaffoldColumn {
+  return {
+    name: '',
+    type: 'varchar',
+    nullable: false,
+    labelEn: '',
+    labelPt: '',
+    inList: true,
+    inFilters: false,
+  };
+}
+
+function createEmptyPlan(): ScaffoldPlan {
+  return {
+    library: '',
+    entity: '',
+    route: '',
+    labelEn: '',
+    labelPt: '',
+    descriptionEn: '',
+    descriptionPt: '',
+    template: 'list-kpi',
+    columns: [
+      {
+        name: 'name',
+        type: 'varchar',
+        nullable: false,
+        length: 255,
+        labelEn: 'Name',
+        labelPt: 'Nome',
+        inList: true,
+        inFilters: false,
+      },
+      {
+        name: 'status',
+        type: 'enum',
+        nullable: false,
+        defaultValue: 'active',
+        enumValues: ['active', 'inactive'],
+        labelEn: 'Status',
+        labelPt: 'Situação',
+        inList: true,
+        inFilters: true,
+      },
+    ],
+    apiBasePath: '',
+    endpoints: {
+      list: true,
+      stats: true,
+      get: true,
+      create: true,
+      update: true,
+      remove: true,
+    },
+    generateBackend: true,
+    menu: { parentSlug: null, icon: 'file-text', order: 0 },
+    roles: ['admin'],
+    newRole: null,
+    overwrite: false,
+  };
+}
+
+type PageWizardSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function PageWizardSheet({ open, onOpenChange }: PageWizardSheetProps) {
+  const t = useTranslations('core.PageWizard');
+  const { request, currentLocaleCode } = useApp();
+
+  const [step, setStep] = useState(0);
+  const [plan, setPlan] = useState<ScaffoldPlan>(createEmptyPlan);
+  const [preview, setPreview] = useState<PreviewResponse | null>(null);
+  const [issues, setIssues] = useState<ValidationIssue[]>([]);
+  const [isWorking, setIsWorking] = useState(false);
+  const [applied, setApplied] = useState<{ written: string[]; steps: string[] } | null>(
+    null
+  );
+  const [expandedFile, setExpandedFile] = useState<string | null>(null);
+
+  const { data: context } = useQuery<ScaffoldContext | null>({
+    queryKey: ['scaffold-context'],
+    queryFn: async () => {
+      const response = await fetch('/api/dev/scaffold/context');
+
+      if (!response.ok) {
+        return null;
+      }
+
+      return (await response.json()) as ScaffoldContext;
+    },
+    enabled: open,
+  });
+
+  const { data: menus = [] } = useQuery<MenuNode[]>({
+    queryKey: ['scaffold-menus', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<MenuNode[]>({
+        url: '/menu/all',
+        method: 'GET',
+      });
+
+      return Array.isArray(response.data) ? response.data : [];
+    },
+    enabled: open,
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  const { data: roles = [] } = useQuery<RoleSummary[]>({
+    queryKey: ['scaffold-roles', currentLocaleCode],
+    queryFn: async () => {
+      const response = await request<PaginatedResponse<RoleSummary>>({
+        url: '/role?pageSize=10000',
+        method: 'GET',
+      });
+
+      return response.data?.data ?? [];
+    },
+    enabled: open,
+    placeholderData: (previous) => previous ?? [],
+  });
+
+  useEffect(() => {
+    if (!open) {
+      setStep(0);
+      setPreview(null);
+      setIssues([]);
+      setApplied(null);
+      setPlan(createEmptyPlan());
+    }
+  }, [open]);
+
+  const updatePlan = useCallback((patch: Partial<ScaffoldPlan>) => {
+    setPlan((previous) => ({ ...previous, ...patch }));
+    setPreview(null);
+    setIssues([]);
+  }, []);
+
+  const updateColumn = useCallback(
+    (index: number, patch: Partial<ScaffoldColumn>) => {
+      setPlan((previous) => ({
+        ...previous,
+        columns: previous.columns.map((column, columnIndex) =>
+          columnIndex === index ? { ...column, ...patch } : column
+        ),
+      }));
+      setPreview(null);
+    },
+    []
+  );
+
+  /** Entity e rota derivam um do outro até o usuário editar a rota manualmente. */
+  const handleEntityChange = (value: string) => {
+    const entity = value.trim().toLowerCase().replace(/[^a-z0-9_]/g, '');
+    const kebab = toKebabCase(entity);
+
+    setPlan((previous) => ({
+      ...previous,
+      entity,
+      route: previous.library && kebab ? `/${previous.library}/${kebab}` : previous.route,
+      apiBasePath: kebab ? `/${kebab}` : previous.apiBasePath,
+      labelEn: previous.labelEn || toTitleCase(entity),
+      labelPt: previous.labelPt || toTitleCase(entity),
+    }));
+    setPreview(null);
+    setIssues([]);
+  };
+
+  const parentMenus = useMemo(
+    () =>
+      menus
+        .filter((menu) => menu.slug)
+        .sort((left, right) => getMenuLabel(left).localeCompare(getMenuLabel(right))),
+    [menus]
+  );
+
+  const canAdvance = useMemo(() => {
+    if (step === 0) {
+      return Boolean(plan.library && plan.entity && plan.route && plan.labelPt);
+    }
+
+    if (step === 2 && plan.generateBackend) {
+      return plan.columns.length > 0 && plan.columns.every((column) => column.name);
+    }
+
+    return true;
+  }, [plan, step]);
+
+  const runPreview = async () => {
+    setIsWorking(true);
+    setIssues([]);
+
+    try {
+      const response = await fetch('/api/dev/scaffold', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mode: 'preview', plan }),
+      });
+
+      if (response.status === 422) {
+        const data = (await response.json()) as { issues: ValidationIssue[] };
+        setIssues(data.issues);
+        setPreview(null);
+        return;
+      }
+
+      if (!response.ok) {
+        toast.error(t('previewError'));
+        return;
+      }
+
+      setPreview((await response.json()) as PreviewResponse);
+    } catch {
+      toast.error(t('previewError'));
+    } finally {
+      setIsWorking(false);
+    }
+  };
+
+  const runApply = async () => {
+    setIsWorking(true);
+
+    try {
+      const response = await fetch('/api/dev/scaffold', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ mode: 'apply', plan }),
+      });
+
+      if (!response.ok) {
+        const data = (await response.json().catch(() => null)) as {
+          message?: string;
+        } | null;
+
+        toast.error(data?.message ?? t('applyError'));
+        return;
+      }
+
+      const data = (await response.json()) as {
+        written: string[];
+        manual: ScaffoldFile[];
+        steps: string[];
+      };
+
+      setApplied({ written: data.written, steps: data.steps });
+      setStep(STEP_KEYS.length);
+      toast.success(t('applySuccess', { count: data.written.length }));
+    } catch {
+      toast.error(t('applyError'));
+    } finally {
+      setIsWorking(false);
+    }
+  };
+
+  const goNext = async () => {
+    if (step === STEP_KEYS.length - 2) {
+      setStep(STEP_KEYS.length - 1);
+      await runPreview();
+      return;
+    }
+
+    setStep((current) => Math.min(STEP_KEYS.length - 1, current + 1));
+  };
+
+  const isDone = step === STEP_KEYS.length;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <ResizableSheetContent
+        sheetId="core-page-wizard"
+        defaultWidth={860}
+        className="flex flex-col gap-0 p-0"
+      >
+        <SheetHeader className="border-b">
+          <SheetTitle>{t('title')}</SheetTitle>
+          <SheetDescription>{t('description')}</SheetDescription>
+        </SheetHeader>
+
+        {!isDone ? (
+          <div className="flex flex-wrap items-center gap-2 border-b px-4 py-3">
+            {STEP_KEYS.map((key, index) => (
+              <div key={key} className="flex items-center gap-1.5">
+                <span
+                  className={cn(
+                    'flex h-6 w-6 items-center justify-center rounded-full border text-[11px]',
+                    index < step
+                      ? 'border-primary bg-primary text-primary-foreground'
+                      : index === step
+                        ? 'border-primary text-primary'
+                        : 'border-border text-muted-foreground'
+                  )}
+                >
+                  {index < step ? <Check className="size-3.5" /> : index + 1}
+                </span>
+                <span
+                  className={cn(
+                    'text-xs',
+                    index === step
+                      ? 'font-medium text-foreground'
+                      : 'text-muted-foreground'
+                  )}
+                >
+                  {t(`steps.${key}` as never)}
+                </span>
+              </div>
+            ))}
+          </div>
+        ) : null}
+
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="space-y-4 p-4">
+            {isDone && applied ? (
+              <div className="space-y-4">
+                <Alert>
+                  <AlertTitle>{t('doneTitle')}</AlertTitle>
+                  <AlertDescription>
+                    {t('doneDescription', { count: applied.written.length })}
+                  </AlertDescription>
+                </Alert>
+
+                <div>
+                  <h4 className="text-sm font-semibold">{t('doneFiles')}</h4>
+                  <div className="mt-2 space-y-1">
+                    {applied.written.map((file) => (
+                      <div
+                        key={file}
+                        className="rounded-lg border bg-background/80 p-2 font-mono text-xs"
+                      >
+                        {file}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="text-sm font-semibold">{t('doneSteps')}</h4>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {t('doneStepsHint')}
+                  </p>
+                  <div className="mt-2 space-y-1">
+                    {applied.steps.map((command) => (
+                      <div
+                        key={command}
+                        className="flex items-center gap-2 rounded-lg border bg-muted/30 p-2"
+                      >
+                        <code className="min-w-0 flex-1 truncate text-xs">
+                          {command}
+                        </code>
+                        <CopyButton value={command} />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {!isDone && step === 0 ? (
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div className="space-y-1.5">
+                  <Label>{t('fieldLibrary')}</Label>
+                  <Select
+                    value={plan.library || undefined}
+                    onValueChange={(value) =>
+                      updatePlan({
+                        library: value,
+                        route: plan.entity
+                          ? `/${value}/${toKebabCase(plan.entity)}`
+                          : `/${value}`,
+                      })
+                    }
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder={t('fieldLibraryPlaceholder')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {(context?.libraries ?? []).map((library) => (
+                        <SelectItem key={library} value={library}>
+                          {library}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldEntity')}</Label>
+                  <Input
+                    value={plan.entity}
+                    onChange={(event) => handleEntityChange(event.target.value)}
+                    placeholder="service_order"
+                  />
+                  <p className="text-xs text-muted-foreground">
+                    {t('fieldEntityHint')}
+                  </p>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldRoute')}</Label>
+                  <Input
+                    value={plan.route}
+                    onChange={(event) => updatePlan({ route: event.target.value })}
+                    placeholder="/crm/contracts"
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldApiBasePath')}</Label>
+                  <Input
+                    value={plan.apiBasePath}
+                    onChange={(event) =>
+                      updatePlan({ apiBasePath: event.target.value })
+                    }
+                    placeholder="/contract"
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldLabelPt')}</Label>
+                  <Input
+                    value={plan.labelPt}
+                    onChange={(event) => updatePlan({ labelPt: event.target.value })}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldLabelEn')}</Label>
+                  <Input
+                    value={plan.labelEn}
+                    onChange={(event) => updatePlan({ labelEn: event.target.value })}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldDescriptionPt')}</Label>
+                  <Input
+                    value={plan.descriptionPt}
+                    onChange={(event) =>
+                      updatePlan({ descriptionPt: event.target.value })
+                    }
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label>{t('fieldDescriptionEn')}</Label>
+                  <Input
+                    value={plan.descriptionEn}
+                    onChange={(event) =>
+                      updatePlan({ descriptionEn: event.target.value })
+                    }
+                  />
+                </div>
+              </div>
+            ) : null}
+
+            {!isDone && step === 1 ? (
+              <div className="grid gap-3 sm:grid-cols-2">
+                {TEMPLATES.map((template) => (
+                  <Card
+                    key={template}
+                    className={cn(
+                      'cursor-pointer border-border/70 py-0 transition-colors',
+                      plan.template === template
+                        ? 'border-primary ring-1 ring-primary/20'
+                        : 'hover:border-border'
+                    )}
+                    onClick={() => updatePlan({ template })}
+                  >
+                    <CardContent className="space-y-1 p-4">
+                      <h4 className="text-sm font-semibold">
+                        {t(`template_${template}` as never)}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {t(`templateHint_${template}` as never)}
+                      </p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : null}
+
+            {!isDone && step === 2 ? (
+              <div className="space-y-3">
+                <p className="text-xs text-muted-foreground">
+                  {t('columnsHint')}
+                </p>
+
+                {plan.columns.map((column, index) => (
+                  <Card key={index} className="border-border/70 py-0">
+                    <CardContent className="space-y-3 p-3">
+                      <div className="grid gap-2 sm:grid-cols-4">
+                        <Input
+                          value={column.name}
+                          onChange={(event) =>
+                            updateColumn(index, {
+                              name: event.target.value
+                                .toLowerCase()
+                                .replace(/[^a-z0-9_]/g, ''),
+                            })
+                          }
+                          placeholder={t('columnName')}
+                        />
+
+                        <Select
+                          value={column.type}
+                          onValueChange={(value) =>
+                            updateColumn(index, {
+                              type: value as ScaffoldColumnType,
+                            })
+                          }
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {SCAFFOLD_COLUMN_TYPES.map((type) => (
+                              <SelectItem key={type} value={type}>
+                                {type}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+
+                        <Input
+                          value={column.labelPt}
+                          onChange={(event) =>
+                            updateColumn(index, { labelPt: event.target.value })
+                          }
+                          placeholder={t('columnLabelPt')}
+                        />
+
+                        <Input
+                          value={column.labelEn}
+                          onChange={(event) =>
+                            updateColumn(index, { labelEn: event.target.value })
+                          }
+                          placeholder={t('columnLabelEn')}
+                        />
+                      </div>
+
+                      {column.type === 'enum' ? (
+                        <Input
+                          value={(column.enumValues ?? []).join(', ')}
+                          onChange={(event) =>
+                            updateColumn(index, {
+                              enumValues: event.target.value
+                                .split(',')
+                                .map((value) => value.trim())
+                                .filter(Boolean),
+                            })
+                          }
+                          placeholder={t('columnEnumValues')}
+                        />
+                      ) : null}
+
+                      {column.type === 'fk' ? (
+                        <Select
+                          value={column.referencesTable}
+                          onValueChange={(value) =>
+                            updateColumn(index, { referencesTable: value })
+                          }
+                        >
+                          <SelectTrigger className="w-full">
+                            <SelectValue placeholder={t('columnReferences')} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {(context?.entitiesByLibrary[plan.library] ?? []).map(
+                              (table) => (
+                                <SelectItem key={table} value={table}>
+                                  {table}
+                                </SelectItem>
+                              )
+                            )}
+                          </SelectContent>
+                        </Select>
+                      ) : null}
+
+                      <div className="flex flex-wrap items-center gap-4">
+                        <label className="flex items-center gap-2 text-xs">
+                          <Switch
+                            checked={column.nullable}
+                            onCheckedChange={(checked) =>
+                              updateColumn(index, { nullable: checked })
+                            }
+                          />
+                          {t('columnNullable')}
+                        </label>
+
+                        <label className="flex items-center gap-2 text-xs">
+                          <Switch
+                            checked={column.inList}
+                            onCheckedChange={(checked) =>
+                              updateColumn(index, { inList: checked })
+                            }
+                          />
+                          {t('columnInList')}
+                        </label>
+
+                        <label className="flex items-center gap-2 text-xs">
+                          <Switch
+                            checked={column.inFilters}
+                            onCheckedChange={(checked) =>
+                              updateColumn(index, { inFilters: checked })
+                            }
+                          />
+                          {t('columnInFilters')}
+                        </label>
+
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          className="ml-auto h-8 w-8 text-red-600"
+                          onClick={() =>
+                            setPlan((previous) => ({
+                              ...previous,
+                              columns: previous.columns.filter(
+                                (_, columnIndex) => columnIndex !== index
+                              ),
+                            }))
+                          }
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setPlan((previous) => ({
+                      ...previous,
+                      columns: [...previous.columns, emptyColumn()],
+                    }))
+                  }
+                >
+                  <Plus className="h-4 w-4" />
+                  {t('addColumn')}
+                </Button>
+              </div>
+            ) : null}
+
+            {!isDone && step === 3 ? (
+              <div className="space-y-4">
+                <label className="flex items-center justify-between rounded-lg border p-3">
+                  <div>
+                    <div className="text-sm font-medium">{t('generateBackend')}</div>
+                    <p className="text-xs text-muted-foreground">
+                      {t('generateBackendHint')}
+                    </p>
+                  </div>
+                  <Switch
+                    checked={plan.generateBackend}
+                    onCheckedChange={(checked) =>
+                      updatePlan({ generateBackend: checked })
+                    }
+                  />
+                </label>
+
+                <div className="grid gap-2 sm:grid-cols-2">
+                  {(
+                    [
+                      ['list', 'GET ' + plan.apiBasePath],
+                      ['stats', 'GET ' + plan.apiBasePath + '/stats'],
+                      ['get', 'GET ' + plan.apiBasePath + '/:id'],
+                      ['create', 'POST ' + plan.apiBasePath],
+                      ['update', 'PATCH ' + plan.apiBasePath + '/:id'],
+                      ['remove', 'DELETE ' + plan.apiBasePath + '/:id'],
+                    ] as const
+                  ).map(([key, label]) => (
+                    <label
+                      key={key}
+                      className="flex items-center justify-between rounded-lg border p-2.5"
+                    >
+                      <code className="text-xs">{label}</code>
+                      <Switch
+                        checked={plan.endpoints[key]}
+                        disabled={!plan.generateBackend}
+                        onCheckedChange={(checked) =>
+                          updatePlan({
+                            endpoints: { ...plan.endpoints, [key]: checked },
+                          })
+                        }
+                      />
+                    </label>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+
+            {!isDone && step === 4 ? (
+              <div className="space-y-4">
+                <div className="grid gap-3 sm:grid-cols-3">
+                  <div className="space-y-1.5">
+                    <Label>{t('menuParent')}</Label>
+                    <Select
+                      value={plan.menu.parentSlug ?? '__root__'}
+                      onValueChange={(value) =>
+                        updatePlan({
+                          menu: {
+                            ...plan.menu,
+                            parentSlug: value === '__root__' ? null : value,
+                          },
+                        })
+                      }
+                    >
+                      <SelectTrigger className="w-full">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__root__">{t('menuRoot')}</SelectItem>
+                        {parentMenus.map((menu) => (
+                          <SelectItem key={menu.id} value={menu.slug}>
+                            {getMenuLabel(menu)}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label>{t('menuIcon')}</Label>
+                    <Input
+                      value={plan.menu.icon}
+                      onChange={(event) =>
+                        updatePlan({
+                          menu: { ...plan.menu, icon: event.target.value },
+                        })
+                      }
+                      placeholder="file-text"
+                    />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label>{t('menuOrder')}</Label>
+                    <Input
+                      type="number"
+                      value={plan.menu.order}
+                      onChange={(event) =>
+                        updatePlan({
+                          menu: {
+                            ...plan.menu,
+                            order: Number(event.target.value) || 0,
+                          },
+                        })
+                      }
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label>{t('rolesTitle')}</Label>
+                  <p className="mt-0.5 text-xs text-muted-foreground">
+                    {t('rolesHint')}
+                  </p>
+
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {roles.map((role) => {
+                      const slug = role.slug ?? '';
+                      const selected = plan.roles.includes(slug);
+
+                      return (
+                        <Badge
+                          key={role.id}
+                          variant="outline"
+                          className={cn(
+                            'cursor-pointer rounded-full px-2.5 py-1',
+                            selected
+                              ? 'border-primary/40 bg-primary/10 text-primary'
+                              : 'text-muted-foreground'
+                          )}
+                          onClick={() => {
+                            if (slug === 'admin') {
+                              return;
+                            }
+
+                            updatePlan({
+                              roles: selected
+                                ? plan.roles.filter((item) => item !== slug)
+                                : [...plan.roles, slug],
+                            });
+                          }}
+                        >
+                          {getRoleLabel(role)}
+                        </Badge>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            ) : null}
+
+            {!isDone && step === 5 ? (
+              <div className="space-y-3">
+                {issues.length > 0 ? (
+                  <Alert variant="destructive">
+                    <AlertTitle>{t('issuesTitle')}</AlertTitle>
+                    <AlertDescription>
+                      <ul className="list-disc pl-4">
+                        {issues.map((issue) => (
+                          <li key={`${issue.field}-${issue.message}`}>
+                            {issue.message}
+                          </li>
+                        ))}
+                      </ul>
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                {preview?.conflicts.length ? (
+                  <Alert>
+                    <AlertTitle>{t('conflictsTitle')}</AlertTitle>
+                    <AlertDescription>
+                      <ul className="list-disc pl-4">
+                        {preview.conflicts.map((file) => (
+                          <li key={file} className="font-mono text-xs">
+                            {file}
+                          </li>
+                        ))}
+                      </ul>
+                      <label className="mt-2 flex items-center gap-2 text-xs">
+                        <Switch
+                          checked={plan.overwrite}
+                          onCheckedChange={(checked) =>
+                            setPlan((previous) => ({
+                              ...previous,
+                              overwrite: checked,
+                            }))
+                          }
+                        />
+                        {t('overwrite')}
+                      </label>
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                {isWorking && !preview ? (
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    {t('previewLoading')}
+                  </div>
+                ) : null}
+
+                {preview?.files.map((file) => (
+                  <Card key={file.path} className="border-border/70 py-0">
+                    <CardContent className="p-3">
+                      <button
+                        type="button"
+                        className="flex w-full cursor-pointer items-center gap-2 text-left"
+                        onClick={() =>
+                          setExpandedFile((current) =>
+                            current === file.path ? null : file.path
+                          )
+                        }
+                      >
+                        <Badge
+                          variant="outline"
+                          className={cn(
+                            'rounded-full px-2 py-0 text-[10px]',
+                            file.action === 'create'
+                              ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-600'
+                              : file.action === 'manual'
+                                ? 'border-amber-500/30 bg-amber-500/10 text-amber-600'
+                                : 'border-blue-500/30 bg-blue-500/10 text-blue-600'
+                          )}
+                        >
+                          {t(`action_${file.action}` as never)}
+                        </Badge>
+                        <span className="min-w-0 flex-1 truncate font-mono text-xs">
+                          {file.path}
+                        </span>
+                      </button>
+
+                      {file.instruction ? (
+                        <p className="mt-2 text-xs text-amber-600">
+                          {file.instruction}
+                        </p>
+                      ) : null}
+
+                      {expandedFile === file.path && file.preview ? (
+                        <pre className="mt-2 max-h-80 overflow-auto rounded-lg bg-muted/40 p-2 text-[11px] leading-4">
+                          {file.preview}
+                        </pre>
+                      ) : null}
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </ScrollArea>
+
+        <div className="flex items-center justify-between gap-2 border-t p-4">
+          <Button
+            type="button"
+            variant="outline"
+            disabled={step === 0 || isWorking || isDone}
+            onClick={() => setStep((current) => Math.max(0, current - 1))}
+          >
+            {t('back')}
+          </Button>
+
+          {isDone ? (
+            <Button type="button" onClick={() => onOpenChange(false)}>
+              {t('close')}
+            </Button>
+          ) : step < STEP_KEYS.length - 1 ? (
+            <Button type="button" disabled={!canAdvance} onClick={goNext}>
+              {t('next')}
+            </Button>
+          ) : (
+            <div className="flex gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                disabled={isWorking}
+                onClick={runPreview}
+              >
+                {t('refreshPreview')}
+              </Button>
+              <Button
+                type="button"
+                disabled={isWorking || !preview || issues.length > 0}
+                onClick={runApply}
+              >
+                {isWorking ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : null}
+                {t('generate')}
+              </Button>
+            </div>
+          )}
+        </div>
+      </ResizableSheetContent>
+    </Sheet>
+  );
+}