Show recent client orders by default

src/pages/ClientDetails.tsx

@@ -9,7 +9,7 @@ const ClientDetails = () => {
   const decodedName = name ? decodeURIComponent(name) : '';
   const { ordersData, isDataLoading } = useOutletContext<{ ordersData: OrderData[], isDataLoading: boolean }>();
   const [currentPage, setCurrentPage] = useState(1);
-  const [ordersPerPage, setOrdersPerPage] = useState(10);
+  const [ordersPerPage, setOrdersPerPage] = useState(5);
 
   const { groupedOrders, totalSpent, totalItems, clientPhone } = useMemo(() => {
     return buildClientDetailsMetrics(ordersData, decodedName);
@@ -86,6 +86,52 @@ const ClientDetails = () => {
       </div>
 {/* Orders List */}
 <div className="flex flex-col gap-6">
+      <div className="px-6 py-4 border border-zinc-200 dark:border-dark-border rounded-2xl bg-white dark:bg-dark-card flex flex-col sm:flex-row items-center justify-between gap-4">
+        <div>
+          <h2 className="text-sm font-bold text-zinc-900 dark:text-dark-text">Últimos pedidos</h2>
+          <p className="text-xs font-semibold text-zinc-500 dark:text-dark-muted">
+            Mostrando {groupedOrders.length > 0 ? startIndex + 1 : 0} a {Math.min(startIndex + ordersPerPage, groupedOrders.length)} de {groupedOrders.length} pedidos
+          </p>
+        </div>
+
+        <div className="flex flex-col sm:flex-row sm:items-center gap-3">
+          <div className="flex items-center gap-2 text-sm text-zinc-500 dark:text-dark-muted">
+            <span>Mostrar</span>
+            <select
+              value={ordersPerPage}
+              onChange={(event) => {
+                setOrdersPerPage(Number(event.target.value));
+                setCurrentPage(1);
+              }}
+              className="bg-dark-card border border-dark-border rounded-lg px-2 py-1 focus:outline-none focus:border-brand-primary cursor-pointer text-dark-text"
+            >
+              <option value={5}>5</option>
+              <option value={10}>10</option>
+              <option value={20}>20</option>
+              <option value={50}>50</option>
+            </select>
+            <span>pedidos por página</span>
+          </div>
+
+          <div className="flex gap-1 justify-center">
+            <button
+              onClick={() => setCurrentPage(page => Math.max(1, page - 1))}
+              disabled={safeCurrentPage === 1}
+              className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
+            >
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+            <button
+              onClick={() => setCurrentPage(page => Math.min(totalPages, page + 1))}
+              disabled={safeCurrentPage === totalPages || totalPages === 0}
+              className="p-1 rounded-lg border border-dark-border disabled:opacity-50 disabled:cursor-not-allowed hover:border-brand-primary transition-colors text-dark-muted hover:text-dark-text cursor-pointer bg-dark-card"
+            >
+              <ChevronRight className="w-5 h-5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
   {paginatedOrders.map((group, groupIndex) => (
     <div key={groupIndex} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
       <div className="p-4 border-b border-zinc-100 dark:border-dark-border bg-zinc-50/50 dark:bg-dark-header flex justify-between items-center">