@hed-hog/core 0.0.387 → 0.0.390

package/hedhog/frontend/app/ai_instruction/page.tsx.ejs

@@ -0,0 +1,422 @@
+'use client';
+
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { FilterBar } from '@/components/ui/filter-bar';
+import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useDebounce } from '@/hooks/use-debounce';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
+import { formatDateTime } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { Pencil, ShieldAlert, Sparkles } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { AiInstructionForm } from './_components/ai-instruction-form';
+import {
+  AI_INSTRUCTION_LAYERS,
+  type AiInstruction,
+  type AiInstructionLayer,
+  type AiPromptRegistryEntry,
+  type PaginatedResponse,
+} from './_lib/types';
+
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+const ALL = 'all';
+
+export default function AiInstructionPage() {
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+  const t = useTranslations('core.AiInstructionPage');
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Filters live in the URL so the shortcut on a module's settings tab can deep
+  // link into this screen (?module=lms) and the result stays shareable.
+  const layerFilter = searchParams.get('layer') || ALL;
+  const moduleFilter = searchParams.get('module') || ALL;
+  const statusFilter = searchParams.get('status') || ALL;
+
+  const setFilter = useCallback(
+    (key: string, value: string) => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (!value || value === ALL) {
+        params.delete(key);
+      } else {
+        params.set(key, value);
+      }
+      router.replace(`?${params.toString()}`);
+    },
+    [router, searchParams]
+  );
+
+  const activeFilterCount = [layerFilter, moduleFilter, statusFilter].filter(
+    (value) => value !== ALL
+  ).length;
+
+  const clearFilters = useCallback(() => {
+    router.replace('?');
+  }, [router]);
+
+  const { data: generalSettings } = useQuery<{
+    data: Array<{ slug: string; value: string }>;
+  }>({
+    queryKey: ['setting-group-general'],
+    queryFn: async () => {
+      const response = await request<{
+        data: Array<{ slug: string; value: string }>;
+      }>({ url: '/setting/group/general', method: 'GET' });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const pageSizeOptions = useMemo(() => {
+    const setting = generalSettings?.data?.find(
+      (s) => s.slug === 'pagination-page-sizes'
+    );
+    if (!setting?.value) return DEFAULT_PAGE_SIZES;
+    try {
+      const parsed = JSON.parse(setting.value) as string[];
+      const sizes = parsed
+        .map(Number)
+        .filter((n) => !isNaN(n) && n > 0)
+        .sort((a, b) => a - b);
+      return sizes.length > 0 ? sizes : DEFAULT_PAGE_SIZES;
+    } catch {
+      return DEFAULT_PAGE_SIZES;
+    }
+  }, [generalSettings]);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:global:pageSize',
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
+  });
+  const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearch = useDebounce(searchQuery, 400);
+
+  const [editing, setEditing] = useState<AiInstruction | null>(null);
+
+  useEffect(() => {
+    setPage(1);
+  }, [layerFilter, moduleFilter, statusFilter, debouncedSearch]);
+
+  const { data: modules } = useQuery<string[]>({
+    queryKey: ['ai-instruction-modules'],
+    queryFn: async () => {
+      const response = await request<string[]>({
+        url: '/ai-instruction/modules',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const { data: registry } = useQuery<AiPromptRegistryEntry[]>({
+    queryKey: ['ai-instruction-registry'],
+    queryFn: async () => {
+      const response = await request<AiPromptRegistryEntry[]>({
+        url: '/ai-instruction/registry',
+        method: 'GET',
+      });
+      return response.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const registryBySlug = useMemo(() => {
+    const map = new Map<string, AiPromptRegistryEntry>();
+    for (const entry of registry ?? []) map.set(entry.slug, entry);
+    return map;
+  }, [registry]);
+
+  const { data, isLoading, refetch } = useQuery<PaginatedResponse<AiInstruction>>({
+    queryKey: [
+      'ai-instructions',
+      page,
+      pageSize,
+      debouncedSearch,
+      layerFilter,
+      moduleFilter,
+      statusFilter,
+    ],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (debouncedSearch) params.set('search', debouncedSearch);
+      if (layerFilter !== ALL) params.set('layer', layerFilter);
+      if (moduleFilter !== ALL) params.set('module_slug', moduleFilter);
+      if (statusFilter !== ALL) params.set('is_active', String(statusFilter === 'active'));
+
+      const response = await request<PaginatedResponse<AiInstruction>>({
+        url: `/ai-instruction?${params.toString()}`,
+        method: 'GET',
+      });
+      return response.data;
+    },
+  });
+
+  const list = data ?? { data: [], total: 0, page: 1, pageSize, totalPages: 1 };
+
+  const renderModelParams = (instruction: AiInstruction) => {
+    const parts = [
+      instruction.model,
+      instruction.temperature === null ? null : `t=${instruction.temperature}`,
+      instruction.max_tokens === null ? null : `${instruction.max_tokens} tok`,
+    ].filter(Boolean);
+
+    return parts.length ? parts.join(' · ') : '—';
+  };
+
+  const renderState = (instruction: AiInstruction) => {
+    const entry = registryBySlug.get(instruction.slug);
+
+    return (
+      <div className="flex flex-wrap items-center gap-1">
+        {entry ? (
+          <Badge variant={entry.db_matches_fallback ? 'outline' : 'secondary'}>
+            {entry.db_matches_fallback ? t('badgeDefault') : t('badgeCustomized')}
+          </Badge>
+        ) : null}
+        {instruction.is_locked ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="destructive" className="gap-1">
+                <ShieldAlert className="h-3 w-3" />
+                {t('badgeLocked')}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent>{t('lockedDescription')}</TooltipContent>
+          </Tooltip>
+        ) : null}
+        {instruction.is_active ? null : (
+          <Badge variant="outline">{t('badgeInactive')}</Badge>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <Page>
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbDashboard'), href: '/' },
+          { label: t('breadcrumbManagement'), href: '/core/management' },
+          { label: t('breadcrumbCurrent') },
+        ]}
+        title={t('title')}
+        description={t('description')}
+      />
+
+      {/* FilterBar already renders the search input, so no separate SearchBar. */}
+      <FilterBar
+        searchPlaceholder={t('searchPlaceholder')}
+        searchValue={searchQuery}
+        onSearchChange={setSearchQuery}
+        activeFilters={activeFilterCount}
+        onClearFilters={activeFilterCount ? clearFilters : undefined}
+        filters={[
+          {
+            id: 'layer',
+            label: t('filterLayer'),
+            value: layerFilter,
+            onChange: (value) => setFilter('layer', value),
+            options: [
+              { value: ALL, label: t('filterAllLayers') },
+              ...AI_INSTRUCTION_LAYERS.map((layer) => ({
+                value: layer,
+                label: t(`layer_${layer}` as never),
+              })),
+            ],
+          },
+          {
+            id: 'module',
+            label: t('filterModule'),
+            value: moduleFilter,
+            onChange: (value) => setFilter('module', value),
+            options: [
+              { value: ALL, label: t('filterAllModules') },
+              ...(modules ?? []).map((slug) => ({ value: slug, label: slug })),
+            ],
+          },
+          {
+            id: 'status',
+            label: t('filterStatus'),
+            value: statusFilter,
+            onChange: (value) => setFilter('status', value),
+            options: [
+              { value: ALL, label: t('filterAllStatuses') },
+              { value: 'active', label: t('filterActive') },
+              { value: 'inactive', label: t('filterInactive') },
+            ],
+          },
+        ]}
+      />
+
+      {isLoading || list.data.length > 0 ? (
+        <Card>
+          <CardContent className="p-0">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Slug</TableHead>
+                  <TableHead>{t('columnName')}</TableHead>
+                  <TableHead>{t('columnLayer')}</TableHead>
+                  <TableHead>{t('columnModule')}</TableHead>
+                  <TableHead>{t('columnParams')}</TableHead>
+                  <TableHead>{t('columnState')}</TableHead>
+                  <TableHead className="text-right">v</TableHead>
+                  <TableHead>{t('columnUpdatedAt')}</TableHead>
+                  <TableHead className="w-12" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {isLoading ? (
+                  <TableRow>
+                    <TableCell colSpan={9}>{t('loading')}</TableCell>
+                  </TableRow>
+                ) : (
+                  list.data.map((instruction) => (
+                    <TableRow
+                      key={instruction.id}
+                      className="cursor-pointer"
+                      onClick={() => setEditing(instruction)}
+                    >
+                      <TableCell className="max-w-72 font-mono text-xs">
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="block truncate">{instruction.slug}</span>
+                          </TooltipTrigger>
+                          <TooltipContent>{instruction.slug}</TooltipContent>
+                        </Tooltip>
+                      </TableCell>
+                      <TableCell className="max-w-60 truncate">{instruction.name}</TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          {t(`layer_${instruction.layer}` as never)}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>
+                        {instruction.module_slug ? (
+                          <Badge variant="secondary">{instruction.module_slug}</Badge>
+                        ) : (
+                          '—'
+                        )}
+                      </TableCell>
+                      <TableCell className="font-mono text-xs">
+                        {renderModelParams(instruction)}
+                      </TableCell>
+                      <TableCell>{renderState(instruction)}</TableCell>
+                      <TableCell className="text-right font-mono text-xs">
+                        {instruction.version}
+                      </TableCell>
+                      <TableCell className="whitespace-nowrap text-xs">
+                        {formatDateTime(
+                          new Date(instruction.updated_at),
+                          getSettingValue,
+                          currentLocaleCode
+                        )}
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          title={t('edit')}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setEditing(instruction);
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          icon={<Sparkles className="h-12 w-12" />}
+          title={t('empty')}
+          description={t('emptyDescription')}
+        />
+      )}
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={list.total}
+        onPageChange={setPage}
+        onPageSizeChange={(value) => {
+          setPageSize(value);
+          setPage(1);
+        }}
+        pageSizeOptions={pageSizeOptions}
+      />
+
+      <Sheet open={Boolean(editing)} onOpenChange={(open) => !open && setEditing(null)}>
+        <ResizableSheetContent
+          sheetId="core-ai-instruction-form-sheet"
+          defaultWidth={900}
+          minWidth={560}
+          maxWidth={1500}
+          side="right"
+          className="overflow-y-auto sm:max-w-none"
+        >
+          <SheetHeader>
+            <SheetTitle>{editing?.name}</SheetTitle>
+            <SheetDescription className="font-mono text-xs">{editing?.slug}</SheetDescription>
+          </SheetHeader>
+
+          <div className="px-4 pb-6">
+            {editing ? (
+              <AiInstructionForm
+                key={editing.id}
+                instruction={editing}
+                registryEntry={registryBySlug.get(editing.slug)}
+                onSaved={async () => {
+                  await refetch();
+                  setEditing(null);
+                }}
+                onClose={() => setEditing(null)}
+              />
+            ) : null}
+          </div>
+        </ResizableSheetContent>
+      </Sheet>
+    </Page>
+  );
+}

package/hedhog/frontend/app/configurations/[slug]/components/setting-field.tsx.ejs

@@ -27,7 +27,8 @@ import {
   SettingTypeEnum,
 } from '@hed-hog/api-types';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Eye, EyeOff, Pencil, Plus, Upload } from 'lucide-react';
+import { ExternalLink, Eye, EyeOff, Pencil, Plus, Upload } from 'lucide-react';
+import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
@@ -96,6 +97,13 @@ const HEDHOG_K8S_INFRA_PROFILE_SETTING_SLUG =
   'hedhog.k8s_integration_profile_id';
 const COMMERCE_PAYMENT_PROFILE_SETTING_SLUG =
   'commerce-default-payment-profile-id';
+/**
+ * Providers de pagamento que existem no sistema mas não servem como gateway
+ * padrão do checkout web. O Google Play só cobra por compra dentro do app
+ * Android (`commerce-android-checkout-mode`), então escolhê-lo aqui quebraria o
+ * checkout do site. O backend também recusa — isto é só para não oferecer.
+ */
+const NON_WEB_CHECKOUT_PAYMENT_PROVIDERS = new Set(['google_play']);
 const DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG =
   'operations.daily-report.email-integration-profile-id';
 const DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG =
@@ -103,6 +111,7 @@ const DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG =
 const AI_PROFILE_SETTING_SLUGS = [
   'ai-gemini-profile-id',
   'ai-openai-profile-id',
+  'ai-deepseek-profile-id',
   'mcp-ai-profile-id',
 ];
 const OAUTH_PROFILE_SLUG_TO_PROVIDER: Record<string, string> = {
@@ -207,6 +216,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   } = useApp();
   const component =
     setting.component?.replaceAll('_', '-') || SettingComponentEnum.INPUT_TEXT;
+  /**
+   * Rótulo de uma opção de lista (radio/combobox). Valores como `play_billing`
+   * não dizem nada ao administrador, então procuramos uma tradução dedicada em
+   * `settingOptions.<slug>.<valor>` e só caímos no valor cru quando não existe.
+   */
+  const optionLabel = (value: string) => {
+    const key = `settingOptions.${setting.slug}.${value}`;
+    return t.has(key) ? t(key) : value;
+  };
   const [localValue, setLocalValue] = useState(setting.value);
   const [storageProfileSelectedLabel, setStorageProfileSelectedLabel] =
     useState('');
@@ -649,7 +667,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           <SelectContent>
             {options.map((option) => (
               <SelectItem key={option.id} value={option.value}>
-                {option.value}
+                {optionLabel(option.value)}
               </SelectItem>
             ))}
           </SelectContent>
@@ -671,7 +689,9 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 id={`radio-${option.id}`}
                 className="bg-background"
               />
-              <Label htmlFor={`radio-${option.id}`}>{option.value}</Label>
+              <Label htmlFor={`radio-${option.id}`}>
+                {optionLabel(option.value)}
+              </Label>
             </div>
           ))}
         </RadioGroup>
@@ -702,6 +722,25 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         </div>
       );
 
+    // Read-only navigation shortcut: takes the user from a module's settings tab
+    // to a related screen. Deliberately does NOT set isTextInputRef nor call
+    // handleChangeValue — rendering it must never write anything.
+    case SettingComponentEnum.LINK: {
+      const href = String(parsedValue || '');
+      // Internal paths only. A setting value must not become an open redirect.
+      const safeHref =
+        href.startsWith('/') && !href.startsWith('//') ? href : '#';
+
+      return (
+        <Button asChild variant="outline" size="sm" disabled={safeHref === '#'}>
+          <Link href={safeHref}>
+            <ExternalLink className="h-4 w-4" />
+            {t('openLink')}
+          </Link>
+        </Button>
+      );
+    }
+
     case SettingComponentEnum.ENTITY_PICKER:
       const dailyReportIntegrationTypeSlug = getDailyReportIntegrationTypeSlug(
         setting.slug
@@ -1089,7 +1128,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                   });
                   const paged = response.data;
                   return {
-                    items: paged?.data ?? [],
+                    // O endpoint filtra só por tipo; tirar aqui os providers que
+                    // não fazem checkout web evita uma escolha que o backend
+                    // recusaria na hora de cobrar.
+                    items: (paged?.data ?? []).filter(
+                      (opt) =>
+                        !NON_WEB_CHECKOUT_PAYMENT_PROVIDERS.has(
+                          String(opt.integration_provider?.slug ?? '')
+                        )
+                    ),
                     hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
                   };
                 }}