@hed-hog/operations 0.0.330 → 0.0.332

package/hedhog/frontend/app/project-cost-categories/page.tsx.ejs

@@ -1,20 +1,20 @@
 'use client';
 
 import {
-    EmptyState,
-    Page,
-    PaginationFooter,
-    SearchBar,
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
 } from '@/components/entity-list';
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -23,50 +23,51 @@ import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@/components/ui/select';
 import {
-    Sheet,
-    SheetContent,
-    SheetDescription,
-    SheetHeader,
-    SheetTitle,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
 } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import {
-    FolderKanban,
-    LayoutGrid,
-    List,
-    Pencil,
-    Tag,
-    Trash2,
+  FolderKanban,
+  LayoutGrid,
+  List,
+  Pencil,
+  Tag,
+  Trash2,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import {
-    createProjectCostCategory,
-    deleteProjectCostCategory,
-    listProjectCostCategories,
-    updateProjectCostCategory,
+  createProjectCostCategory,
+  deleteProjectCostCategory,
+  listProjectCostCategories,
+  updateProjectCostCategory,
 } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type { PaginatedResponse, ProjectCostCategory } from '../_lib/types';
 
 type CategoryFormState = {
@@ -96,9 +97,15 @@ export default function ProjectCostCategoriesPage() {
   const access = useOperationsAccess();
 
   const [search, setSearch] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
+  const [statusFilter, setStatusFilter] = useState<
+    'all' | 'active' | 'inactive'
+  >('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-project-cost-categories:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
     if (typeof window === 'undefined') return 'table';
     const saved = window.localStorage.getItem(
@@ -517,18 +524,17 @@ export default function ProjectCostCategoriesPage() {
         </div>
       )}
 
-      {response && response.lastPage > 1 ? (
-        <PaginationFooter
-          currentPage={page}
-          pageSize={pageSize}
-          totalItems={response.total}
-          onPageChange={setPage}
-          onPageSizeChange={(size) => {
-            setPageSize(size);
-            setPage(1);
-          }}
-        />
-      ) : null}
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={response?.total ?? 0}
+        pageSizeOptions={[12, 24, 48]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
 
       {/* Create / Edit Sheet */}
       <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>

package/hedhog/frontend/app/project-cost-types/page.tsx.ejs

@@ -1,20 +1,20 @@
 'use client';
 
 import {
-    EmptyState,
-    Page,
-    PaginationFooter,
-    SearchBar,
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
 } from '@/components/entity-list';
 import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -23,27 +23,27 @@ import { Input } from '@/components/ui/input';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
 import { Label } from '@/components/ui/label';
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from '@/components/ui/select';
 import {
-    Sheet,
-    SheetContent,
-    SheetDescription,
-    SheetHeader,
-    SheetTitle,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
 } from '@/components/ui/sheet';
 import { Switch } from '@/components/ui/switch';
 import {
-    Table,
-    TableBody,
-    TableCell,
-    TableHead,
-    TableHeader,
-    TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
@@ -54,17 +54,18 @@ import Link from 'next/link';
 import { useMemo, useState } from 'react';
 import { OperationsHeader } from '../_components/operations-header';
 import {
-    createProjectCostType,
-    deleteProjectCostType,
-    listProjectCostCategories,
-    listProjectCostTypes,
-    updateProjectCostType,
+  createProjectCostType,
+  deleteProjectCostType,
+  listProjectCostCategories,
+  listProjectCostTypes,
+  updateProjectCostType,
 } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
+import { usePersistedPageSize } from '@/hooks/use-persisted-page-size';
 import type {
-    PaginatedResponse,
-    ProjectCostCategory,
-    ProjectCostType,
+  PaginatedResponse,
+  ProjectCostCategory,
+  ProjectCostType,
 } from '../_lib/types';
 import { formatEnumLabel } from '../_lib/utils/format';
 
@@ -112,7 +113,11 @@ export default function ProjectCostTypesPage() {
   const [categoryFilter, setCategoryFilter] = useState<string>('all');
   const [calcTypeFilter, setCalcTypeFilter] = useState<string>('all');
   const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(12);
+  const [pageSize, setPageSize] = usePersistedPageSize({
+    storageKey: 'pagination:operations-project-cost-types:pageSize',
+    defaultValue: 12,
+    allowedValues: [12, 24, 48],
+  });
   const [viewMode, setViewMode] = useState<'table' | 'cards'>(() => {
     if (typeof window === 'undefined') return 'table';
     const saved = window.localStorage.getItem(
@@ -166,7 +171,8 @@ export default function ProjectCostTypesPage() {
       };
       if (search.trim()) params.search = search.trim();
       if (categoryFilter !== 'all') params.category_id = categoryFilter;
-      if (calcTypeFilter !== 'all') params.default_calculation_type = calcTypeFilter;
+      if (calcTypeFilter !== 'all')
+        params.default_calculation_type = calcTypeFilter;
       return listProjectCostTypes(request, params) as Promise<
         PaginatedResponse<ProjectCostType>
       >;
@@ -409,7 +415,9 @@ export default function ProjectCostTypesPage() {
               <SelectValue placeholder={t('filters.allCalculationTypes')} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="all">{t('filters.allCalculationTypes')}</SelectItem>
+              <SelectItem value="all">
+                {t('filters.allCalculationTypes')}
+              </SelectItem>
               {CALCULATION_TYPE_OPTIONS.map((ct) => (
                 <SelectItem key={ct} value={ct}>
                   {calculationTypeLabel(ct)}
@@ -639,18 +647,17 @@ export default function ProjectCostTypesPage() {
         </div>
       )}
 
-      {response && response.lastPage > 1 ? (
-        <PaginationFooter
-          currentPage={page}
-          pageSize={pageSize}
-          totalItems={response.total}
-          onPageChange={setPage}
-          onPageSizeChange={(size) => {
-            setPageSize(size);
-            setPage(1);
-          }}
-        />
-      ) : null}
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={response?.total ?? 0}
+        pageSizeOptions={[12, 24, 48]}
+        onPageChange={setPage}
+        onPageSizeChange={(size) => {
+          setPageSize(size);
+          setPage(1);
+        }}
+      />
 
       {/* Create / Edit Sheet */}
       <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>