diff --git a/src/components/PaginationControls.tsx b/src/components/PaginationControls.tsx
index c459dd0..cc9c109 100644
--- a/src/components/PaginationControls.tsx
+++ b/src/components/PaginationControls.tsx
@@ -13,6 +13,7 @@ type PaginationControlsProps = {
onPageChange: (page: number) => void;
onPageSizeChange: (pageSize: number) => void;
className?: string;
+ stacked?: boolean;
};
const clampPage = (page: number, totalPages: number) => {
@@ -32,7 +33,8 @@ const PaginationControls = ({
endIndex,
onPageChange,
onPageSizeChange,
- className = 'px-6 py-4 border-t border-zinc-100 dark:border-dark-border'
+ className = 'px-6 py-4 border-t border-zinc-100 dark:border-dark-border',
+ stacked = false
}: PaginationControlsProps) => {
const safeTotalPages = Math.max(1, totalPages);
const safeCurrentPage = clampPage(currentPage, safeTotalPages);
@@ -44,7 +46,7 @@ const PaginationControls = ({
};
return (
-
+
Mostrar
-
+
Mostrando {totalItems > 0 ? startIndex + 1 : 0} a {endIndex} de {totalItems} {itemLabel}
diff --git a/src/pages/Registrations.tsx b/src/pages/Registrations.tsx
index f73e721..4411e64 100644
--- a/src/pages/Registrations.tsx
+++ b/src/pages/Registrations.tsx
@@ -197,6 +197,7 @@ const Registrations = () => {
const [isLoading, setIsLoading] = useState(true);
const [activeTab, setActiveTab] = useState
('products');
const [productFilter, setProductFilter] = useState<'all' | CatalogProductType>('all');
+ const [referenceSearch, setReferenceSearch] = useState('');
const [pagination, setPagination] = useState({
products: { page: 1, pageSize: 10 },
categories: { page: 1, pageSize: 10 },
@@ -381,10 +382,20 @@ const Registrations = () => {
const categoryStartIndex = (safeCategoryPage - 1) * pagination.categories.pageSize;
const paginatedCategories = catalog.categories.slice(categoryStartIndex, categoryStartIndex + pagination.categories.pageSize);
- const referenceTotalPages = Math.ceil(catalog.consumptionReferences.length / pagination.references.pageSize);
+ const filteredReferences = useMemo(() => {
+ const query = referenceSearch.trim().toLocaleLowerCase('pt-BR');
+ if (!query) return catalog.consumptionReferences;
+ return catalog.consumptionReferences.filter(reference => (
+ `${reference.productSku} ${reference.productName} ${reference.materialSku} ${reference.materialName} ${reference.color}`
+ .toLocaleLowerCase('pt-BR')
+ .includes(query)
+ ));
+ }, [catalog.consumptionReferences, referenceSearch]);
+
+ const referenceTotalPages = Math.ceil(filteredReferences.length / pagination.references.pageSize);
const safeReferencePage = Math.min(pagination.references.page, referenceTotalPages || 1);
const referenceStartIndex = (safeReferencePage - 1) * pagination.references.pageSize;
- const paginatedReferences = catalog.consumptionReferences.slice(referenceStartIndex, referenceStartIndex + pagination.references.pageSize);
+ const paginatedReferences = filteredReferences.slice(referenceStartIndex, referenceStartIndex + pagination.references.pageSize);
const runAction = async (action: () => Promise, successMessage: string) => {
setStatus('saving');
@@ -993,9 +1004,23 @@ const Registrations = () => {
Rendimento pç/kg por produto, malha, cor e tamanho.
- {catalog.consumptionReferences.length} referencias
+ {referenceSearch ? `${filteredReferences.length} de ${catalog.consumptionReferences.length}` : catalog.consumptionReferences.length} referencias
+
+
+
{paginatedReferences.map(reference => (
@@ -1054,14 +1079,14 @@ const Registrations = () => {
))}
- {!catalog.consumptionReferences.length && (
+ {!filteredReferences.length && (
- Nenhuma referencia cadastrada.
+ {referenceSearch ? 'Nenhuma referência encontrada.' : 'Nenhuma referencia cadastrada.'}
)}
{
itemLabel="referências"
pageSizeLabel="por página"
startIndex={referenceStartIndex}
- endIndex={Math.min(referenceStartIndex + pagination.references.pageSize, catalog.consumptionReferences.length)}
+ endIndex={Math.min(referenceStartIndex + pagination.references.pageSize, filteredReferences.length)}
onPageChange={(page) => updatePagination('references', { page })}
onPageSizeChange={(pageSize) => updatePagination('references', { page: 1, pageSize })}
+ stacked
/>