@hed-hog/core 0.0.370 → 0.0.373

package/hedhog/frontend/app/integrations-webhooks/page.tsx.ejs

@@ -505,12 +505,43 @@ function getPublicWebhookUrl(uuid: string, publicUrl?: string | null) {
   return `${baseUrl.replace(/\/+$/, '')}/webhook/${uuid}`;
 }
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export default function IntegrationsWebhooksPage() {
   const t = useTranslations('core.IntegrationsWebhooksPage');
   const { request, currentLocaleCode, getSettingValue, locales, accessToken } =
     useApp();
   const queryClient = useQueryClient();
-  const pageSizeOptions = [6, 12, 24, 48] as const;
+
+  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 catalog = usePagination({
     url: '/integration-event-catalog',
@@ -566,6 +597,8 @@ export default function IntegrationsWebhooksPage() {
   const [incomingLogsPageSize, setIncomingLogsPageSize] = useState(12);
   const [logOrder, setLogOrder] = useState<'desc' | 'asc'>('desc');
   const [selectedLog, setSelectedLog] = useState<IncomingCallLog | null>(null);
+  const [retryTarget, setRetryTarget] = useState<IncomingCallLog | null>(null);
+  const [isRetryingLog, setIsRetryingLog] = useState(false);
   const sseAbortRef = useRef<AbortController | null>(null);
 
   const [eventWebhookOpen, setEventWebhookOpen] = useState(false);
@@ -1467,6 +1500,32 @@ export default function IntegrationsWebhooksPage() {
     await incoming.refetch();
   };
 
+  const retryIncomingLog = async (log: IncomingCallLog) => {
+    if (!incomingEdit) return;
+    setIsRetryingLog(true);
+    try {
+      const response = await request<{ success?: boolean }>({
+        url: `/webhook-integration/${incomingEdit.id}/log/${log.id}/retry`,
+        method: 'POST',
+      });
+      // A new call log is always created by the retry, so refresh the list.
+      await queryClient.invalidateQueries({
+        queryKey: ['incoming-webhook-logs', incomingEdit.id],
+      });
+      if (response.data?.success) {
+        toast.success(t('logRetrySuccess'));
+      } else {
+        toast.error(t('logRetryFailedAgain'));
+      }
+      setSelectedLog(null);
+      setRetryTarget(null);
+    } catch {
+      toast.error(t('logRetryError'));
+    } finally {
+      setIsRetryingLog(false);
+    }
+  };
+
   const regenerateToken = async () => {
     if (!incomingEdit) return;
     const response = await request<IncomingIntegration>({
@@ -2011,7 +2070,7 @@ export default function IntegrationsWebhooksPage() {
             </SheetTitle>
             <SheetDescription>{t('eventFormDescription')}</SheetDescription>
           </SheetHeader>
-          <div className="space-y-4 px-3 pb-8 sm:px-4">
+          <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-8 sm:px-4">
             <Field label={t('eventName')}>
               <Input
                 value={catalogForm.name}
@@ -2092,7 +2151,7 @@ export default function IntegrationsWebhooksPage() {
           <Tabs
             value={incomingSheetTab}
             onValueChange={setIncomingSheetTab}
-            className="mt-4"
+            className="mt-4 flex min-h-0 flex-1 flex-col"
           >
             <div className="px-3 sm:px-4">
               <TabsList className="grid w-full grid-cols-3">
@@ -2110,7 +2169,10 @@ export default function IntegrationsWebhooksPage() {
                 </TabsTrigger>
               </TabsList>
             </div>
-            <TabsContent value="settings" className="mt-0">
+            <TabsContent
+              value="settings"
+              className="mt-0 min-h-0 flex-1 overflow-y-auto"
+            >
               <div className="space-y-6 px-3 pb-8 sm:px-4">
                 <div className="grid gap-4 md:grid-cols-2">
                   <Field label={t('name')}>
@@ -2352,7 +2414,7 @@ export default function IntegrationsWebhooksPage() {
 
             <TabsContent
               value="actions"
-              className="mt-0 space-y-4 px-3 pb-8 sm:px-4"
+              className="mt-0 min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-8 sm:px-4"
             >
               {!incomingEdit ? (
                 <EmptyState
@@ -2433,7 +2495,7 @@ export default function IntegrationsWebhooksPage() {
 
             <TabsContent
               value="logs"
-              className="mt-0 space-y-4 px-3 pb-8 sm:px-4"
+              className="mt-0 min-h-0 flex-1 space-y-4 overflow-y-auto px-3 pb-8 sm:px-4"
             >
               {!incomingEdit ? (
                 <EmptyState
@@ -2583,7 +2645,7 @@ export default function IntegrationsWebhooksPage() {
                 </SheetTitle>
                 <SheetDescription>{t('actionSection')}</SheetDescription>
               </SheetHeader>
-              <div className="space-y-5 px-3 pb-8 sm:px-4">
+              <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-3 pb-8 sm:px-4">
                 <div className="grid gap-3 md:grid-cols-3">
                   <Field label={t('actionType')}>
                     <Select
@@ -3358,7 +3420,7 @@ export default function IntegrationsWebhooksPage() {
               {t('eventWebhookFormDescription')}
             </SheetDescription>
           </SheetHeader>
-          <div className="space-y-5 px-3 pb-8 sm:px-4">
+          <div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-3 pb-8 sm:px-4">
             <div className="grid gap-4 md:grid-cols-2">
               <Field label={t('name')}>
                 <Input
@@ -3554,7 +3616,7 @@ export default function IntegrationsWebhooksPage() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="space-y-6 px-3 pb-8 sm:px-4">
+          <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-3 pb-8 sm:px-4">
             <div className="grid gap-6 md:grid-cols-2">
               <Field label={t('name')}>
                 <Input
@@ -3841,7 +3903,7 @@ export default function IntegrationsWebhooksPage() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="space-y-6 px-3 pb-8 sm:px-4">
+          <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-3 pb-8 sm:px-4">
             <div className="grid gap-6 md:grid-cols-2">
               <Field label={t('technicalName')}>
                 <Input
@@ -3942,7 +4004,7 @@ export default function IntegrationsWebhooksPage() {
           </SheetHeader>
 
           {selectedLog ? (
-            <div className="space-y-6 px-3 pb-8 sm:px-4">
+            <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-3 pb-8 sm:px-4">
               <div className="flex flex-wrap gap-3 pt-2">
                 <Badge
                   variant="outline"
@@ -3964,6 +4026,21 @@ export default function IntegrationsWebhooksPage() {
                 </span>
               </div>
 
+              {selectedLog.status === 'failed' ? (
+                <div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setRetryTarget(selectedLog)}
+                    disabled={isRetryingLog}
+                  >
+                    <RotateCcw className="mr-2 h-4 w-4" />
+                    {t('logRetry')}
+                  </Button>
+                </div>
+              ) : null}
+
               {selectedLog.error_message ? (
                 <div>
                   <p className="mb-1 text-xs font-medium text-destructive">
@@ -4127,6 +4204,36 @@ export default function IntegrationsWebhooksPage() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      <AlertDialog
+        open={Boolean(retryTarget)}
+        onOpenChange={(open) => {
+          if (!open && !isRetryingLog) setRetryTarget(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('logRetryConfirmTitle')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('logRetryConfirmDescription')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isRetryingLog}>
+              {t('cancel')}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={(event) => {
+                event.preventDefault();
+                if (retryTarget) retryIncomingLog(retryTarget);
+              }}
+              disabled={isRetryingLog}
+            >
+              {t('logRetry')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </Page>
   );
 }

package/hedhog/frontend/app/mail/log/page.tsx.ejs

@@ -97,6 +97,8 @@ type DeliveryStatusFilter = 'all' | 'received' | 'read' | 'error';
 type HasErrorFilter = 'all' | 'true' | 'false';
 type ViewMode = 'cards' | 'table';
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export default function MailLogPage() {
   const t = useTranslations('core.MailLog');
   const [selectedLog, setSelectedLog] = useState<MailSent | null>(null);
@@ -110,13 +112,44 @@ export default function MailLogPage() {
   const [viewMode, setViewMode] = useState<ViewMode>('cards');
   const debouncedSearch = useDebounce(searchTerm);
   const debouncedRecipientEmail = useDebounce(recipientEmail);
+  const { request, getSettingValue } = useApp();
+
+  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: 10,
-    allowedValues: [10, 20, 30, 40, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
-  const { request, getSettingValue } = useApp();
 
   const {
     data: logsResult,
@@ -559,7 +592,7 @@ export default function MailLogPage() {
           setPageSize(newSize);
           setPage(1);
         }}
-        pageSizeOptions={[10, 20, 30, 40, 50]}
+        pageSizeOptions={pageSizeOptions}
       />
 
       {selectedLog && (

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

@@ -1283,6 +1283,8 @@ const NO_PARENT = '__none__';
 const MENU_CREATE_DRAFT_STORAGE_KEY = 'core-menu-create-draft';
 const MENU_EDIT_DRAFT_STORAGE_KEY = 'core-menu-edit-draft';
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export default function MenuPage() {
   const t = useTranslations('core.MenuPage');
   const { request, currentLocaleCode, locales, getSettingValue } = useApp();
@@ -1298,10 +1300,40 @@ export default function MenuPage() {
   const [isRefreshingMenu, setIsRefreshingMenu] = useState(false);
 
   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:core-menu:pageSize',
     defaultValue: 12,
-    allowedValues: [6, 12, 24, 48],
+    allowedValues: pageSizeOptions,
   });
 
   const { data: allMenus, refetch: refetchAllMenus } = useQuery<MenuItem[]>({
@@ -2578,7 +2610,7 @@ export default function MenuPage() {
             setPageSize(size);
             setPage(1);
           }}
-          pageSizeOptions={[6, 12, 24, 48]}
+          pageSizeOptions={pageSizeOptions}
         />
       </div>
 

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

@@ -44,6 +44,10 @@ export default function PreferencesPage() {
   const {
     currentTheme,
     setCurrentTheme,
+    density,
+    setDensity,
+    zoom,
+    setZoom,
     refetchUser,
     request,
     getSettingValue,
@@ -121,6 +125,21 @@ export default function PreferencesPage() {
     }
   };
 
+  const handleSpacingDensityChange = (
+    value: 'compact' | 'comfortable' | 'spacious'
+  ) => {
+    setDensity(value);
+    showToastHandler(
+      'success',
+      t('spacingDensityUpdated') || 'Spacing density updated successfully'
+    );
+  };
+
+  const handleZoomChange = (value: string) => {
+    setZoom(value);
+    showToastHandler('success', t('zoomUpdated') || 'Zoom updated successfully');
+  };
+
   const handleLanguageChange = async (code: string) => {
     try {
       await request({
@@ -226,6 +245,64 @@ export default function PreferencesPage() {
                     </Select>
                   </div>
                 </div>
+
+                <div className="flex justify-between mt-4">
+                  <div className="flex-col">
+                    <label className="font-semibold">
+                      {t('spacingDensity')}
+                    </label>
+                    <p className="text-muted-foreground text-sm">
+                      {t('setPreferredSpacingDensity')}
+                    </p>
+                  </div>
+
+                  <div className="h-full flex items-center">
+                    <Select
+                      value={density}
+                      onValueChange={handleSpacingDensityChange}
+                    >
+                      <SelectTrigger className="w-[180px] bg-background">
+                        <SelectValue placeholder={t('selectSpacingDensity')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="compact">
+                          {t('densityCompact')}
+                        </SelectItem>
+                        <SelectItem value="comfortable">
+                          {t('densityComfortable')}
+                        </SelectItem>
+                        <SelectItem value="spacious">
+                          {t('densitySpacious')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="flex justify-between mt-4">
+                  <div className="flex-col">
+                    <label className="font-semibold">{t('zoom')}</label>
+                    <p className="text-muted-foreground text-sm">
+                      {t('setPreferredZoom')}
+                    </p>
+                  </div>
+
+                  <div className="h-full flex items-center">
+                    <Select value={zoom} onValueChange={handleZoomChange}>
+                      <SelectTrigger className="w-[180px] bg-background">
+                        <SelectValue placeholder={t('selectZoom')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="80%">80%</SelectItem>
+                        <SelectItem value="90%">90%</SelectItem>
+                        <SelectItem value="100%">100%</SelectItem>
+                        <SelectItem value="110%">110%</SelectItem>
+                        <SelectItem value="125%">125%</SelectItem>
+                        <SelectItem value="150%">150%</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
               </CardContent>
             </Card>
 

package/hedhog/frontend/app/roles/menus.tsx.ejs

@@ -55,6 +55,8 @@ type RoleMenusSectionProps = {
 
 const EMPTY_MENUS: Menu[] = [];
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function RoleMenusSection({
   roleId,
   onMenuChange,
@@ -63,10 +65,40 @@ export function RoleMenusSection({
   const { request, currentLocaleCode } = useApp();
   const [togglingMenuId, setTogglingMenuId] = 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, 40, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const [expandedMenus, setExpandedMenus] = useState<string[]>([]);
 
@@ -466,7 +498,7 @@ export function RoleMenusSection({
                 <SelectValue placeholder={pageSize} />
               </SelectTrigger>
               <SelectContent side="top">
-                {[10, 20, 30, 40, 50].map((size) => (
+                {pageSizeOptions.map((size) => (
                   <SelectItem key={size} value={`${size}`}>
                     {size}
                   </SelectItem>

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

@@ -156,6 +156,8 @@ function getErrorMessage(error: unknown, fallbackMessage: string) {
   return fallbackMessage;
 }
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export default function RolePage() {
   const t = useTranslations('core.RolePage');
   const { request, currentLocaleCode, locales, getSettingValue } = useApp();
@@ -168,10 +170,40 @@ export default function RolePage() {
   const [selectedLocale, setSelectedLocale] = useState(currentLocaleCode);
 
   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:core-roles:pageSize',
     defaultValue: 12,
-    allowedValues: [6, 12, 24, 48],
+    allowedValues: pageSizeOptions,
   });
   const [activeTab, setActiveTab] = useState('basic-info');
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
@@ -681,7 +713,7 @@ export default function RolePage() {
               setPageSize(size);
               setPage(1);
             }}
-            pageSizeOptions={[6, 12, 24, 48]}
+            pageSizeOptions={pageSizeOptions}
           />
         </div>
 

package/hedhog/frontend/app/roles/routes.tsx.ejs

@@ -26,7 +26,7 @@ import {
   Search,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
 
 type RouteType = {
@@ -54,6 +54,8 @@ const normalizeRouteMethod = (method: string | null) => {
   return normalizedMethod || UNKNOWN_METHOD_LABEL;
 };
 
+const DEFAULT_PAGE_SIZES = [6, 12, 24, 48, 96] as const;
+
 export function RoleRoutesSection({
   roleId,
   onRouteChange,
@@ -62,10 +64,40 @@ export function RoleRoutesSection({
   const { request } = useApp();
   const [togglingRouteId, setTogglingRouteId] = 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, 40, 50],
+    defaultValue: 12,
+    allowedValues: pageSizeOptions,
   });
   const [searchTerm, setSearchTerm] = useState('');
   const [searchType, setSearchType] = useState<SearchType>('contains');
@@ -355,7 +387,7 @@ export function RoleRoutesSection({
                 <SelectValue placeholder={pageSize} />
               </SelectTrigger>
               <SelectContent side="top">
-                {[10, 20, 30, 40, 50].map((size) => (
+                {pageSizeOptions.map((size) => (
                   <SelectItem key={size} value={`${size}`}>
                     {size}
                   </SelectItem>