Collapse client detail orders

src/pages/ClientDetails.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useParams, Link, useOutletContext } from 'react-router-dom';
-import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
+import { ArrowLeft, User, Tag, Package, DollarSign, Clock, Phone, ChevronDown, ChevronLeft, ChevronRight, ShoppingBag, ReceiptText } from 'lucide-react';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import DateRangePicker from '../components/DateRangePicker';
 import type { ClientDetailsAnalytics, DateRange, OrderData } from '../types';
@@ -55,6 +55,7 @@ const ClientDetails = () => {
   const [isLoading, setIsLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const [ordersPerPage, setOrdersPerPage] = useState(5);
+  const [expandedOrderIds, setExpandedOrderIds] = useState<Set<string>>(() => new Set());
 
   useEffect(() => {
     let isMounted = true;
@@ -94,9 +95,22 @@ const ClientDetails = () => {
 
   const handleDateRangeChange = (range: DateRange) => {
     setCurrentPage(1);
+    setExpandedOrderIds(new Set());
     setDateRange(range);
   };
 
+  const toggleOrder = (orderId: string) => {
+    setExpandedOrderIds(current => {
+      const next = new Set(current);
+      if (next.has(orderId)) {
+        next.delete(orderId);
+      } else {
+        next.add(orderId);
+      }
+      return next;
+    });
+  };
+
   if (isLoading) {
     return (
       <div className="text-center py-12">
@@ -261,18 +275,49 @@ const ClientDetails = () => {
       <p className="text-sm font-bold text-zinc-900 dark:text-dark-text">Nenhum pedido no período selecionado.</p>
       <p className="mt-1 text-sm text-zinc-500 dark:text-dark-muted">Altere o filtro de data para ver outros pedidos deste cliente.</p>
     </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">
-        <h2 className="text-sm font-bold uppercase tracking-wider text-zinc-500 dark:text-dark-muted flex items-center gap-2">
-          <Tag className="w-4 h-4 text-brand-primary" />
+  ) : paginatedOrders.map((group) => {
+    const isExpanded = expandedOrderIds.has(group.orderId);
+
+    return (
+      <div key={group.orderId} className="bg-white dark:bg-dark-card border border-zinc-200 dark:border-dark-border rounded-2xl overflow-hidden shadow-sm">
+        <button
+          type="button"
+          onClick={() => toggleOrder(group.orderId)}
+          aria-expanded={isExpanded}
+          className="flex w-full cursor-pointer items-center justify-between gap-4 bg-zinc-50/50 px-4 py-3 text-left transition-colors hover:bg-zinc-100/80 dark:bg-dark-header dark:hover:bg-dark-input/60"
+        >
+          <div className="flex min-w-0 items-center gap-3">
+            <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-zinc-200 bg-white text-brand-primary dark:border-dark-border dark:bg-dark-card">
+              <Tag className="h-4 w-4" />
+            </span>
+            <div className="min-w-0">
+              <h2 className="truncate text-sm font-bold uppercase tracking-wider text-zinc-700 dark:text-dark-text">
                 Pedido ID: {group.orderId}
               </h2>
-        <span className="text-sm font-bold text-brand-primary">
-                Total do Pedido: {formatCurrency(group.orderTotal)}
+              <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs font-bold text-zinc-400 dark:text-dark-muted">
+                <span>{group.items.length} {group.items.length === 1 ? 'item' : 'itens'}</span>
+                {group.date && (
+                  <span className="inline-flex items-center gap-1">
+                    <Clock className="h-3 w-3" />
+                    {group.date}
                   </span>
+                )}
+              </div>
+            </div>
           </div>
 
+          <div className="flex shrink-0 items-center gap-3">
+            <div className="text-right">
+              <p className="text-[10px] font-bold uppercase tracking-widest text-zinc-400 dark:text-dark-muted">Total</p>
+              <p className="text-sm font-bold text-brand-primary">{formatCurrency(group.orderTotal)}</p>
+            </div>
+            <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-zinc-200 bg-white text-zinc-500 transition-colors dark:border-dark-border dark:bg-dark-card dark:text-dark-muted">
+              <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
+            </span>
+          </div>
+        </button>
+
+        {isExpanded && (
           <div className="divide-y divide-zinc-100 dark:divide-dark-border">
             {group.items.map((order, index) => {
               const metadata = getOrderMetadata(order);
@@ -325,8 +370,10 @@ const ClientDetails = () => {
               );
             })}
           </div>
+        )}
       </div>
-        ))}
+    );
+  })}
       </div>
 
       <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">