@hed-hog/operations 0.0.306 → 0.0.310

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

@@ -1,6 +1,11 @@
 'use client';
 
-import { EmptyState, Page, SearchBar } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
@@ -41,12 +46,8 @@ import { ProjectFormScreen } from '../_components/project-form-screen';
 import { StatusBadge } from '../_components/status-badge';
 import { fetchOperations, mutateOperations } from '../_lib/api';
 import { useOperationsAccess } from '../_lib/hooks/use-operations-access';
-import type { OperationsProject } from '../_lib/types';
-import {
-  formatDate,
-  formatEnumLabel,
-  getStatusBadgeClass,
-} from '../_lib/utils/format';
+import type { OperationsProject, PaginatedResponse } from '../_lib/types';
+import { formatDate, getStatusBadgeClass } from '../_lib/utils/format';
 
 const PROJECT_VIEW_STORAGE_KEY = 'operations-projects-view-mode';
 
@@ -60,6 +61,21 @@ function parseEditProjectId(value: string | null) {
 export default function OperationsProjectsPage() {
   const t = useTranslations('operations.ProjectsPage');
   const commonT = useTranslations('operations.Common');
+  const projectFormT = useTranslations('operations.ProjectFormPage');
+  const contractFormT = useTranslations('operations.ContractFormPage');
+
+  const tProjectStatus = (status: string | null | undefined) =>
+    status
+      ? (projectFormT as unknown as (k: string) => string)(
+          `options.statuses.${status}`
+        )
+      : '-';
+  const tContractStatus = (status: string | null | undefined) =>
+    status
+      ? (contractFormT as unknown as (k: string) => string)(
+          `options.statuses.${status}`
+        )
+      : '-';
   const { request, showToastHandler, currentLocaleCode, getSettingValue } =
     useApp();
   const access = useOperationsAccess();
@@ -68,6 +84,8 @@ export default function OperationsProjectsPage() {
   const searchParams = useSearchParams();
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState('all');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
   const [viewMode, setViewMode] = useState<ProjectViewMode>(() => {
     if (typeof window === 'undefined') {
       return 'table';
@@ -117,38 +135,40 @@ export default function OperationsProjectsPage() {
     updateSheetQuery({ editId: projectId });
   };
 
-  const { data: projects = [], refetch } = useQuery<OperationsProject[]>({
-    queryKey: ['operations-projects-list', currentLocaleCode],
-    queryFn: () =>
-      fetchOperations<OperationsProject[]>(request, '/operations/projects'),
-  });
+  const { data: projectsResponse, refetch } = useQuery<
+    PaginatedResponse<OperationsProject>
+  >({
+    queryKey: [
+      'operations-projects-list',
+      currentLocaleCode,
+      search,
+      statusFilter,
+      page,
+      pageSize,
+    ],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        page: String(page),
+        pageSize: String(pageSize),
+      });
 
-  const filteredRows = useMemo(
-    () =>
-      projects.filter((item) => {
-        const matchesSearch = !search.trim()
-          ? true
-          : [
-              item.name,
-              item.code,
-              item.clientName,
-              item.managerName,
-              item.contractName,
-            ]
-              .filter(Boolean)
-              .some((value) =>
-                String(value)
-                  .toLowerCase()
-                  .includes(search.trim().toLowerCase())
-              );
-
-        const matchesStatus =
-          statusFilter === 'all' ? true : item.status === statusFilter;
-
-        return matchesSearch && matchesStatus;
-      }),
-    [projects, search, statusFilter]
-  );
+      if (search.trim()) {
+        params.set('search', search.trim());
+      }
+
+      if (statusFilter !== 'all') {
+        params.set('status', statusFilter);
+      }
+
+      return fetchOperations<PaginatedResponse<OperationsProject>>(
+        request,
+        `/operations/projects?${params.toString()}`
+      );
+    },
+    placeholderData: (previous) => previous,
+  });
+  const projects = projectsResponse?.data ?? [];
+  const filteredRows = projects;
 
   const statsCards = useMemo(
     () => [
@@ -245,24 +265,31 @@ export default function OperationsProjectsPage() {
           <SearchBar
             className="w-full"
             searchQuery={search}
-            onSearchChange={setSearch}
-            onSearch={() => undefined}
+            onSearchChange={(value) => {
+              setSearch(value);
+              setPage(1);
+            }}
+            showSearchButton={false}
+            debounceMs={500}
             placeholder={t('searchPlaceholder')}
             controls={[
               {
                 id: 'status',
                 type: 'select',
                 value: statusFilter,
-                onChange: setStatusFilter,
+                onChange: (value) => {
+                  setStatusFilter(value);
+                  setPage(1);
+                },
                 placeholder: commonT('labels.status'),
                 options: [
                   { value: 'all', label: commonT('filters.allStatuses') },
-                  { value: 'planning', label: formatEnumLabel('planning') },
-                  { value: 'active', label: formatEnumLabel('active') },
-                  { value: 'at_risk', label: formatEnumLabel('at_risk') },
-                  { value: 'paused', label: formatEnumLabel('paused') },
-                  { value: 'completed', label: formatEnumLabel('completed') },
-                  { value: 'archived', label: formatEnumLabel('archived') },
+                  { value: 'planning', label: tProjectStatus('planning') },
+                  { value: 'active', label: tProjectStatus('active') },
+                  { value: 'at_risk', label: tProjectStatus('at_risk') },
+                  { value: 'paused', label: tProjectStatus('paused') },
+                  { value: 'completed', label: tProjectStatus('completed') },
+                  { value: 'archived', label: tProjectStatus('archived') },
                 ],
               },
             ]}
@@ -326,7 +353,7 @@ export default function OperationsProjectsPage() {
                       </div>
                     </div>
                     <StatusBadge
-                      label={formatEnumLabel(project.status)}
+                      label={tProjectStatus(project.status)}
                       className={getStatusBadgeClass(project.status)}
                     />
                   </div>
@@ -376,7 +403,7 @@ export default function OperationsProjectsPage() {
                       </span>
                       {project.contractStatus ? (
                         <StatusBadge
-                          label={formatEnumLabel(project.contractStatus)}
+                          label={tContractStatus(project.contractStatus)}
                           className={getStatusBadgeClass(
                             project.contractStatus
                           )}
@@ -497,7 +524,7 @@ export default function OperationsProjectsPage() {
                     </TableCell>
                     <TableCell>
                       <StatusBadge
-                        label={formatEnumLabel(project.status)}
+                        label={tProjectStatus(project.status)}
                         className={getStatusBadgeClass(project.status)}
                       />
                     </TableCell>
@@ -526,7 +553,7 @@ export default function OperationsProjectsPage() {
                     <TableCell className="hidden 2xl:table-cell">
                       {project.contractStatus ? (
                         <StatusBadge
-                          label={formatEnumLabel(project.contractStatus)}
+                          label={tContractStatus(project.contractStatus)}
                           className={getStatusBadgeClass(
                             project.contractStatus
                           )}
@@ -604,6 +631,18 @@ export default function OperationsProjectsPage() {
         />
       )}
 
+      <PaginationFooter
+        currentPage={projectsResponse?.page ?? page}
+        pageSize={projectsResponse?.pageSize ?? pageSize}
+        totalItems={projectsResponse?.total ?? 0}
+        onPageChange={setPage}
+        onPageSizeChange={(value) => {
+          setPageSize(value);
+          setPage(1);
+        }}
+        pageSizeOptions={[12, 24, 48]}
+      />
+
       <Sheet
         open={isSheetOpen}
         onOpenChange={(open) => {