refactor: streamline transaction page logic by consolidating state management and enhancing pagination, improving overall performance and maintainability

components/transactions/index.ts

@@ -1,3 +1,5 @@
 export { TransactionFilters } from "./transaction-filters";
 export { TransactionBulkActions } from "./transaction-bulk-actions";
 export { TransactionTable } from "./transaction-table";
+export { TransactionPagination } from "./transaction-pagination";
+export { formatCurrency, formatDate } from "./transaction-utils";

components/transactions/transaction-pagination.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+
+interface TransactionPaginationProps {
+  page: number;
+  pageSize: number;
+  total: number;
+  hasMore: boolean;
+  onPageChange: (page: number) => void;
+}
+
+export function TransactionPagination({
+  page,
+  pageSize,
+  total,
+  hasMore,
+  onPageChange,
+}: TransactionPaginationProps) {
+  if (total <= pageSize) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between mt-4">
+      <div className="text-sm text-muted-foreground">
+        Affichage de {page * pageSize + 1} à{" "}
+        {Math.min((page + 1) * pageSize, total)} sur {total}
+      </div>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(Math.max(0, page - 1))}
+          disabled={page === 0}
+        >
+          Précédent
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(page + 1)}
+          disabled={!hasMore}
+        >
+          Suivant
+        </Button>
+      </div>
+    </div>
+  );
+}
+

components/transactions/transaction-utils.ts

@@ -0,0 +1,18 @@
+/**
+ * Utility functions for transaction formatting
+ */
+
+export const formatCurrency = (amount: number): string => {
+  return new Intl.NumberFormat("fr-FR", {
+    style: "currency",
+    currency: "EUR",
+  }).format(amount);
+};
+
+export const formatDate = (dateStr: string): string => {
+  return new Date(dateStr).toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+};