@hed-hog/core 0.0.368 → 0.0.371

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

@@ -16,6 +16,9 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
+import { TagsInput } from '@/components/ui/tags-input';
+import { ByteSizeInput } from './byte-size-input';
+import { DurationInput } from './duration-input';
 import { revalidateSystemIcon } from '@/lib/revalidate-icon';
 import { cn } from '@/lib/utils';
 import {
@@ -88,6 +91,7 @@ function getLocalizedIntegrationName(
 }
 
 const MAIL_INTEGRATION_PROFILE_SETTING_SLUG = 'mail-integration-profile-id';
+const SCALING_INFRA_PROFILE_SETTING_SLUG = 'scaling.video.integration_profile_id';
 const COMMERCE_PAYMENT_PROFILE_SETTING_SLUG =
   'commerce-default-payment-profile-id';
 const DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG =
@@ -106,9 +110,16 @@ const OAUTH_PROFILE_SLUG_TO_PROVIDER: Record<string, string> = {
   'oauth-microsoft-profile-id': 'microsoft-oauth',
   'oauth-microsoft-entra-id-profile-id': 'microsoft-entra-id-oauth',
 };
-const INTEGRATION_PROFILE_PICKER_SLUGS = [
-  'file-storage-profile-id',
+// Settings cujo valor é o SLUG de um integration_profile. O picker continua sendo
+// selecionado/exibido pelo nome; apenas o valor persistido é o slug.
+const ALL_INTEGRATION_PROFILE_SETTING_SLUGS = [
+  MAIL_INTEGRATION_PROFILE_SETTING_SLUG,
+  SCALING_INFRA_PROFILE_SETTING_SLUG,
   COMMERCE_PAYMENT_PROFILE_SETTING_SLUG,
+  DAILY_REPORT_EMAIL_INTEGRATION_SETTING_SLUG,
+  DAILY_REPORT_WHATSAPP_INTEGRATION_SETTING_SLUG,
+  'file-storage-profile-id',
+  'lms-bulk-upload-storage-profile-id',
   ...AI_PROFILE_SETTING_SLUGS,
   ...Object.keys(OAUTH_PROFILE_SLUG_TO_PROVIDER),
 ];
@@ -199,6 +210,11 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   const [storageProfileEditingId, setStorageProfileEditingId] = useState<
     number | null
   >(null);
+  // Id resolvido a partir do slug salvo (a setting guarda o slug; o botão "editar"
+  // e o sheet precisam do id numérico do perfil).
+  const [resolvedProfileId, setResolvedProfileId] = useState<number | null>(
+    null
+  );
   const [showSecretValue, setShowSecretValue] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
@@ -261,21 +277,24 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
   }, [localValue]);
 
   useEffect(() => {
-    if (!INTEGRATION_PROFILE_PICKER_SLUGS.includes(setting.slug)) {
+    if (!ALL_INTEGRATION_PROFILE_SETTING_SLUGS.includes(setting.slug)) {
       setStorageProfileSelectedLabel('');
+      setResolvedProfileId(null);
       return;
     }
 
-    const profileId = Number(localValue);
-    if (!profileId) {
+    const profileSlug = String(localValue ?? '').trim();
+    if (!profileSlug) {
       setStorageProfileSelectedLabel('');
+      setResolvedProfileId(null);
       return;
     }
 
     let isCurrent = true;
 
-    request<IntegrationProfileOption>({
-      url: `/integration-profile/${profileId}`,
+    const qs = new URLSearchParams({ slug: profileSlug, pageSize: '1' });
+    request<ApiPaginated<IntegrationProfileOption>>({
+      url: `/integration-profile?${qs}`,
       method: 'GET',
     })
       .then((response) => {
@@ -283,11 +302,14 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
           return;
         }
 
-        setStorageProfileSelectedLabel(response.data?.name ?? '');
+        const profile = response.data?.data?.[0] ?? null;
+        setStorageProfileSelectedLabel(profile?.name ?? '');
+        setResolvedProfileId(profile?.id ?? null);
       })
       .catch(() => {
         if (isCurrent) {
           setStorageProfileSelectedLabel('');
+          setResolvedProfileId(null);
         }
       });
 
@@ -375,6 +397,36 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         />
       );
 
+    case SettingComponentEnum.INPUT_DURATION:
+      isTextInputRef.current = true; // reaproveita o debounce de 500ms existente
+      return (
+        <DurationInput
+          value={
+            typeof parsedValue === 'number'
+              ? parsedValue
+              : parseFloat(parsedValue) || 0
+          }
+          onChange={(seconds) => handleChangeValue(formatValue(seconds))}
+          persistKey={setting.slug}
+          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
+        />
+      );
+
+    case SettingComponentEnum.INPUT_BYTES:
+      isTextInputRef.current = true; // reaproveita o debounce de 500ms existente
+      return (
+        <ByteSizeInput
+          value={
+            typeof parsedValue === 'number'
+              ? parsedValue
+              : parseFloat(parsedValue) || 0
+          }
+          onChange={(bytes) => handleChangeValue(formatValue(bytes))}
+          persistKey={setting.slug}
+          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
+        />
+      );
+
     case SettingComponentEnum.INPUT_SECRET:
       isTextInputRef.current = true;
       return (
@@ -503,6 +555,17 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
         </div>
       );
 
+    case SettingComponentEnum.INPUT_TAGS: {
+      const tagsValue: string[] = Array.isArray(parsedValue) ? parsedValue : [];
+      return (
+        <TagsInput
+          value={tagsValue}
+          onChange={(val) => handleChangeValue(formatValue(val), true)}
+          className={cn(className, 'w-full min-w-0 bg-background md:min-w-50')}
+        />
+      );
+    }
+
     case SettingComponentEnum.SWITCH:
       return (
         <Switch
@@ -664,12 +727,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
                 placeholder={t('selectStorageProfile')}
                 emptyStateDescription={t('storageProfileEmptyState')}
-                value={parsedValue ? Number(parsedValue) : null}
-                onChange={(id, option) => {
+                value={parsedValue || null}
+                onChange={(slug, option) => {
                   setStorageProfileSelectedLabel(option?.name ?? '');
-                  handleChangeValue(id != null ? String(id) : '', true);
+                  setResolvedProfileId(
+                    option ? Number((option as { id?: number }).id) || null : null
+                  );
+                  handleChangeValue(slug != null ? String(slug) : '', true);
                 }}
-                valueType="number"
+                valueType="string"
                 initialSelectedLabel={storageProfileSelectedLabel}
                 showCreateButton={false}
                 clearable={false}
@@ -695,7 +761,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                     hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
                   };
                 }}
-                getOptionValue={(opt) => opt.id}
+                getOptionValue={(opt) => opt.slug}
                 getOptionLabel={(opt) => String(opt.name ?? '')}
                 getOptionDescription={(opt) => {
                   const providerSlug = String(
@@ -718,12 +784,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 size="icon"
                 className="h-10 w-10 shrink-0"
                 onClick={() => {
-                  setStorageProfileEditingId(
-                    parsedValue ? Number(parsedValue) : null
-                  );
+                  setStorageProfileEditingId(resolvedProfileId);
                   setIsStorageProfileSheetOpen(true);
                 }}
-                disabled={!parsedValue}
+                disabled={!resolvedProfileId}
                 aria-label="Editar perfil de armazenamento"
                 title="Editar perfil de armazenamento"
               >
@@ -759,7 +823,8 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               lockedTypeSlug="storage"
               onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
                 setStorageProfileSelectedLabel(profile.name ?? '');
-                handleChangeValue(String(profile.id), true);
+                setResolvedProfileId(profile.id ?? null);
+                handleChangeValue(String(profile.slug ?? ''), true);
               }}
             />
           </>
@@ -773,12 +838,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
                 placeholder={t('selectAiProfile')}
                 emptyStateDescription={t('aiProfileEmptyState')}
-                value={parsedValue ? Number(parsedValue) : null}
-                onChange={(id, option) => {
+                value={parsedValue || null}
+                onChange={(slug, option) => {
                   setStorageProfileSelectedLabel(option?.name ?? '');
-                  handleChangeValue(id != null ? String(id) : '', true);
+                  setResolvedProfileId(
+                    option ? Number((option as { id?: number }).id) || null : null
+                  );
+                  handleChangeValue(slug != null ? String(slug) : '', true);
                 }}
-                valueType="number"
+                valueType="string"
                 initialSelectedLabel={storageProfileSelectedLabel}
                 showCreateButton={false}
                 clearable={false}
@@ -803,7 +871,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                     hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
                   };
                 }}
-                getOptionValue={(opt) => opt.id}
+                getOptionValue={(opt) => opt.slug}
                 getOptionLabel={(opt) => String(opt.name ?? '')}
                 getOptionDescription={(opt) => {
                   const providerSlug = String(
@@ -826,12 +894,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 size="icon"
                 className="h-10 w-10 shrink-0"
                 onClick={() => {
-                  setStorageProfileEditingId(
-                    parsedValue ? Number(parsedValue) : null
-                  );
+                  setStorageProfileEditingId(resolvedProfileId);
                   setIsStorageProfileSheetOpen(true);
                 }}
-                disabled={!parsedValue}
+                disabled={!resolvedProfileId}
                 aria-label="Editar perfil de IA"
                 title="Editar perfil de IA"
               >
@@ -865,7 +931,8 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               lockedTypeSlug="ai"
               onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
                 setStorageProfileSelectedLabel(profile.name ?? '');
-                handleChangeValue(String(profile.id), true);
+                setResolvedProfileId(profile.id ?? null);
+                handleChangeValue(String(profile.slug ?? ''), true);
               }}
             />
           </>
@@ -880,12 +947,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
                 placeholder={t('selectOAuthProfile')}
                 emptyStateDescription={t('oauthProfileEmptyState')}
-                value={parsedValue ? Number(parsedValue) : null}
-                onChange={(id, option) => {
+                value={parsedValue || null}
+                onChange={(slug, option) => {
                   setStorageProfileSelectedLabel(option?.name ?? '');
-                  handleChangeValue(id != null ? String(id) : '', true);
+                  setResolvedProfileId(
+                    option ? Number((option as { id?: number }).id) || null : null
+                  );
+                  handleChangeValue(slug != null ? String(slug) : '', true);
                 }}
-                valueType="number"
+                valueType="string"
                 initialSelectedLabel={storageProfileSelectedLabel}
                 showCreateButton={false}
                 clearable={false}
@@ -910,7 +980,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                     hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
                   };
                 }}
-                getOptionValue={(opt) => opt.id}
+                getOptionValue={(opt) => opt.slug}
                 getOptionLabel={(opt) => String(opt.name ?? '')}
                 getOptionDescription={(opt) => {
                   const providerSlug = String(
@@ -933,12 +1003,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 size="icon"
                 className="h-10 w-10 shrink-0"
                 onClick={() => {
-                  setStorageProfileEditingId(
-                    parsedValue ? Number(parsedValue) : null
-                  );
+                  setStorageProfileEditingId(resolvedProfileId);
                   setIsStorageProfileSheetOpen(true);
                 }}
-                disabled={!parsedValue}
+                disabled={!resolvedProfileId}
                 aria-label="Editar perfil OAuth"
                 title="Editar perfil OAuth"
               >
@@ -972,7 +1040,8 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               lockedTypeSlug="oauth"
               onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
                 setStorageProfileSelectedLabel(profile.name ?? '');
-                handleChangeValue(String(profile.id), true);
+                setResolvedProfileId(profile.id ?? null);
+                handleChangeValue(String(profile.slug ?? ''), true);
               }}
             />
           </>
@@ -986,12 +1055,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
                 placeholder={t('selectPaymentProfile')}
                 emptyStateDescription={t('paymentProfileEmptyState')}
-                value={parsedValue ? Number(parsedValue) : null}
-                onChange={(id, option) => {
+                value={parsedValue || null}
+                onChange={(slug, option) => {
                   setStorageProfileSelectedLabel(option?.name ?? '');
-                  handleChangeValue(id != null ? String(id) : '', true);
+                  setResolvedProfileId(
+                    option ? Number((option as { id?: number }).id) || null : null
+                  );
+                  handleChangeValue(slug != null ? String(slug) : '', true);
                 }}
-                valueType="number"
+                valueType="string"
                 initialSelectedLabel={storageProfileSelectedLabel}
                 showCreateButton={false}
                 clearable={false}
@@ -1016,7 +1088,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                     hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
                   };
                 }}
-                getOptionValue={(opt) => opt.id}
+                getOptionValue={(opt) => opt.slug}
                 getOptionLabel={(opt) => String(opt.name ?? '')}
                 getOptionDescription={(opt) => {
                   const providerSlug = String(
@@ -1039,12 +1111,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 size="icon"
                 className="h-10 w-10 shrink-0"
                 onClick={() => {
-                  setStorageProfileEditingId(
-                    parsedValue ? Number(parsedValue) : null
-                  );
+                  setStorageProfileEditingId(resolvedProfileId);
                   setIsStorageProfileSheetOpen(true);
                 }}
-                disabled={!parsedValue}
+                disabled={!resolvedProfileId}
                 aria-label="Editar perfil de pagamento"
                 title="Editar perfil de pagamento"
               >
@@ -1078,7 +1148,116 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               lockedTypeSlug="payment"
               onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
                 setStorageProfileSelectedLabel(profile.name ?? '');
-                handleChangeValue(String(profile.id), true);
+                setResolvedProfileId(profile.id ?? null);
+                handleChangeValue(String(profile.slug ?? ''), true);
+              }}
+            />
+          </>
+        );
+      }
+
+      if (setting.slug === SCALING_INFRA_PROFILE_SETTING_SLUG) {
+        return (
+          <>
+            <div className="flex w-full min-w-0 items-center gap-2 md:max-w-72">
+              <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
+                placeholder={t('selectInfraProfile')}
+                emptyStateDescription={t('infraProfileEmptyState')}
+                value={parsedValue || null}
+                onChange={(slug, option) => {
+                  setStorageProfileSelectedLabel(option?.name ?? '');
+                  setResolvedProfileId(
+                    option ? Number((option as { id?: number }).id) || null : null
+                  );
+                  handleChangeValue(slug != null ? String(slug) : '', true);
+                }}
+                valueType="string"
+                initialSelectedLabel={storageProfileSelectedLabel}
+                showCreateButton={false}
+                clearable
+                loadOptions={async ({ page, pageSize, search }) => {
+                  const qs = new URLSearchParams({
+                    page: String(page),
+                    pageSize: String(pageSize),
+                    typeSlug: 'infrastructure',
+                  });
+                  if (search) qs.set('search', search);
+                  const response = await request<
+                    ApiPaginated<
+                      IntegrationProfileOption & Record<string, unknown>
+                    >
+                  >({
+                    url: `/integration-profile?${qs}`,
+                    method: 'GET',
+                  });
+                  const paged = response.data;
+                  return {
+                    items: paged?.data ?? [],
+                    hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
+                  };
+                }}
+                getOptionValue={(opt) => opt.slug}
+                getOptionLabel={(opt) => String(opt.name ?? '')}
+                getOptionDescription={(opt) => {
+                  const providerSlug = String(
+                    opt.integration_provider?.slug ?? ''
+                  );
+                  const providerName = getLocalizedIntegrationName(
+                    opt.integration_provider?.integration_provider_locale,
+                    currentLocaleCode
+                  );
+                  return [providerName || providerSlug, opt.slug]
+                    .filter(Boolean)
+                    .join(' • ');
+                }}
+                className={cn('flex-1 min-w-0', className)}
+              />
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-10 w-10 shrink-0"
+                onClick={() => {
+                  setStorageProfileEditingId(resolvedProfileId);
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                disabled={!resolvedProfileId}
+                aria-label="Editar perfil de infraestrutura"
+                title="Editar perfil de infraestrutura"
+              >
+                <Pencil className="h-4 w-4" />
+              </Button>
+
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="h-10 w-10 shrink-0"
+                onClick={() => {
+                  setStorageProfileEditingId(null);
+                  setIsStorageProfileSheetOpen(true);
+                }}
+                aria-label="Criar perfil de infraestrutura"
+                title="Criar perfil de infraestrutura"
+              >
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <IntegrationProfileSheet
+              open={isStorageProfileSheetOpen}
+              onOpenChange={(nextOpen) => {
+                setIsStorageProfileSheetOpen(nextOpen);
+                if (!nextOpen) setStorageProfileEditingId(null);
+              }}
+              profileId={storageProfileEditingId}
+              initialTypeSlug="infrastructure"
+              lockedTypeSlug="infrastructure"
+              onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
+                setStorageProfileSelectedLabel(profile.name ?? '');
+                setResolvedProfileId(profile.id ?? null);
+                handleChangeValue(String(profile.slug ?? ''), true);
               }}
             />
           </>
@@ -1092,12 +1271,15 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               <EntityPicker<IntegrationProfileOption & Record<string, unknown>>
                 placeholder={t('selectMailProfile')}
                 emptyStateDescription={t('mailProfileEmptyState')}
-                value={parsedValue ? Number(parsedValue) : null}
-                onChange={(id, option) => {
+                value={parsedValue || null}
+                onChange={(slug, option) => {
                   setStorageProfileSelectedLabel(option?.name ?? '');
-                  handleChangeValue(id != null ? String(id) : '', true);
+                  setResolvedProfileId(
+                    option ? Number((option as { id?: number }).id) || null : null
+                  );
+                  handleChangeValue(slug != null ? String(slug) : '', true);
                 }}
-                valueType="number"
+                valueType="string"
                 initialSelectedLabel={storageProfileSelectedLabel}
                 showCreateButton={false}
                 clearable={false}
@@ -1122,7 +1304,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                     hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
                   };
                 }}
-                getOptionValue={(opt) => opt.id}
+                getOptionValue={(opt) => opt.slug}
                 getOptionLabel={(opt) => String(opt.name ?? '')}
                 getOptionDescription={(opt) => {
                   const providerSlug = String(
@@ -1145,12 +1327,10 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 size="icon"
                 className="h-10 w-10 shrink-0"
                 onClick={() => {
-                  setStorageProfileEditingId(
-                    parsedValue ? Number(parsedValue) : null
-                  );
+                  setStorageProfileEditingId(resolvedProfileId);
                   setIsStorageProfileSheetOpen(true);
                 }}
-                disabled={!parsedValue}
+                disabled={!resolvedProfileId}
                 aria-label="Editar perfil de email"
                 title="Editar perfil de email"
               >
@@ -1184,7 +1364,8 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
               lockedTypeSlug="email"
               onSaved={(profile: IntegrationProfileSheetSavedProfile) => {
                 setStorageProfileSelectedLabel(profile.name ?? '');
-                handleChangeValue(String(profile.id), true);
+                setResolvedProfileId(profile.id ?? null);
+                handleChangeValue(String(profile.slug ?? ''), true);
               }}
             />
           </>
@@ -1225,11 +1406,11 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 ? t('selectMailProfile')
                 : t('selectWhatsAppProfile')
             }
-            value={parsedValue ? Number(parsedValue) : null}
-            onChange={(id) =>
-              handleChangeValue(id != null ? String(id) : '', true)
+            value={parsedValue || null}
+            onChange={(slug) =>
+              handleChangeValue(slug != null ? String(slug) : '', true)
             }
-            valueType="number"
+            valueType="string"
             loadOptions={async ({ page, pageSize, search }) => {
               const qs = new URLSearchParams({
                 page: String(page),
@@ -1249,7 +1430,7 @@ export const SettingField = ({ setting, className }: SettingFieldProps) => {
                 hasMore: (paged?.page ?? 0) < (paged?.lastPage ?? 0),
               };
             }}
-            getOptionValue={(opt) => opt.id}
+            getOptionValue={(opt) => opt.slug}
             getOptionLabel={(opt) => String(opt.name ?? '')}
             getOptionDescription={(opt) =>
               String(opt.integration_provider?.slug ?? opt.slug ?? '')

package/hedhog/frontend/app/dashboard/[slug]/dashboard-content.tsx.ejs

@@ -158,6 +158,8 @@ const normalizeUserDashboardLayout = (item: WidgetLayout): LayoutItem => {
   return layoutItem;
 };
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export const DashboardContent = ({
   dashboardSlug,
   showHeader = true,
@@ -183,11 +185,41 @@ export const DashboardContent = ({
   const [widgets, setWidgets] = useState<WidgetLayout[]>([]);
   const [hasChanges, setHasChanges] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  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 [componentsPage, setComponentsPage] = useState(1);
   const [componentsPageSize, setComponentsPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
     defaultValue: 12,
-    allowedValues: [6, 12, 24, 48],
+    allowedValues: pageSizeOptions,
   });
   const [componentsSearchQuery, setComponentsSearchQuery] = useState('');
   const [componentsModuleFilter, setComponentsModuleFilter] = useState('all');

package/hedhog/frontend/app/dashboard/management/tabs/component-roles-tab.tsx.ejs

@@ -134,6 +134,8 @@ type RequestError = {
   };
 };
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function ComponentRolesTab() {
   const t = useTranslations('core.DashboardManagement');
   const { request, currentLocaleCode, getSettingValue } = useApp();
@@ -147,10 +149,40 @@ export function ComponentRolesTab() {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [roleToDelete, setRoleToDelete] = useState<number | null>(null);
   const [page, setPage] = useState(1);
+  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 [pageSize, setPageSize] = usePersistedPageSize({
     storageKey: 'pagination:global:pageSize',
-    defaultValue: 10,
-    allowedValues: [10, 20, 30, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const searchQuery = '';
   const debouncedSearch = useDebounce(searchQuery, 500);
@@ -540,7 +572,7 @@ export function ComponentRolesTab() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  {[10, 20, 30, 50].map((size) => (
+                  {pageSizeOptions.map((size) => (
                     <SelectItem key={size} value={String(size)}>
                       {size}
                     </SelectItem>