Add pagination to Customer Insights top customers list

Implemented pagination controls and page size selection for the top customers section in CustomerInsightsChart. Updated analytics-service to support paginated customer insights API calls and handle pagination metadata. Improves usability for stores with large customer bases.

components/analytics/CustomerInsightsChart.tsx

@@ -3,9 +3,11 @@
 import { useState, useEffect } from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useToast } from "@/hooks/use-toast";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Users, Crown, UserPlus, UserCheck, Star } from "lucide-react";
+import { Users, Crown, UserPlus, UserCheck, Star, ChevronLeft, ChevronRight } from "lucide-react";
 import { getCustomerInsightsWithStore, type CustomerInsights } from "@/lib/services/analytics-service";
 import { formatGBP } from "@/utils/format";
 import { CustomerInsightsSkeleton } from './SkeletonLoaders';
@@ -14,6 +16,8 @@ export default function CustomerInsightsChart() {
   const [data, setData] = useState<CustomerInsights | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
   const { toast } = useToast();
 
   useEffect(() => {
@@ -21,7 +25,7 @@ export default function CustomerInsightsChart() {
       try {
         setIsLoading(true);
         setError(null);
-        const response = await getCustomerInsightsWithStore();
+        const response = await getCustomerInsightsWithStore(currentPage, pageSize);
         setData(response);
       } catch (err) {
         console.error('Error fetching customer insights:', err);
@@ -37,7 +41,7 @@ export default function CustomerInsightsChart() {
     };
 
     fetchCustomerData();
-  }, [toast]);
+  }, [toast, currentPage, pageSize]);
 
   const getSegmentColor = (segment: string) => {
     switch (segment) {
@@ -116,6 +120,15 @@ export default function CustomerInsightsChart() {
   const segments = Object.entries(data.segments);
   const totalCustomers = data.totalCustomers;
 
+  const handlePageChange = (newPage: number) => {
+    setCurrentPage(newPage);
+  };
+
+  const handlePageSizeChange = (newPageSize: string) => {
+    setPageSize(parseInt(newPageSize));
+    setCurrentPage(1); // Reset to first page when changing page size
+  };
+
   return (
     <div className="space-y-6">
       {/* Customer Overview */}
@@ -194,6 +207,11 @@ export default function CustomerInsightsChart() {
           </CardTitle>
           <CardDescription>
             Your highest-spending customers
+            {data.pagination && (
+              <span className="ml-2 text-sm">
+                (Showing {data.pagination.startIndex}-{data.pagination.endIndex} of {data.pagination.totalCustomers})
+              </span>
+            )}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -203,31 +221,85 @@ export default function CustomerInsightsChart() {
               <p className="text-muted-foreground">No customer data available</p>
             </div>
           ) : (
-            <div className="space-y-4">
-              {data.topCustomers.map((customer, index) => (
-                <div key={customer._id} className="flex items-center justify-between p-3 border rounded-lg">
-                  <div className="flex items-center gap-3">
-                    <div className="flex items-center justify-center w-8 h-8 bg-primary text-primary-foreground rounded-full text-sm font-bold">
-                      {index + 1}
-                    </div>
-                    <div>
-                      <div className="font-medium">{customer.displayName || `Customer #${customer._id.slice(-6)}`}</div>
-                      <div className="text-sm text-muted-foreground">
-                        {customer.orderCount} orders
+            <>
+              <div className="space-y-4">
+                {data.topCustomers.map((customer, index) => {
+                  const globalRank = data.pagination ? (data.pagination.currentPage - 1) * data.pagination.limit + index + 1 : index + 1;
+                  return (
+                    <div key={customer._id} className="flex items-center justify-between p-3 border rounded-lg">
+                      <div className="flex items-center gap-3">
+                        <div className="flex items-center justify-center w-8 h-8 bg-primary text-primary-foreground rounded-full text-sm font-bold">
+                          {globalRank}
+                        </div>
+                        <div>
+                          <div className="font-medium">{customer.displayName || `Customer #${customer._id.slice(-6)}`}</div>
+                          <div className="text-sm text-muted-foreground">
+                            {customer.orderCount} orders
+                          </div>
+                        </div>
+                      </div>
+                      <div className="text-right">
+                        <div className="font-bold text-green-600">
+                          {formatGBP(customer.totalSpent)}
+                        </div>
+                        <div className="text-sm text-muted-foreground">
+                          {formatGBP(customer.averageOrderValue)} avg
+                        </div>
                       </div>
                     </div>
+                  );
+                })}
+              </div>
+
+              {/* Pagination Controls */}
+              {data.pagination && data.pagination.totalPages > 1 && (
+                <div className="mt-6 flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm text-muted-foreground">Show</span>
+                    <Select value={pageSize.toString()} onValueChange={handlePageSizeChange}>
+                      <SelectTrigger className="w-20">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="5">5</SelectItem>
+                        <SelectItem value="10">10</SelectItem>
+                        <SelectItem value="20">20</SelectItem>
+                        <SelectItem value="50">50</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <span className="text-sm text-muted-foreground">customers per page</span>
                   </div>
-                  <div className="text-right">
-                    <div className="font-bold text-green-600">
-                      {formatGBP(customer.totalSpent)}
-                    </div>
-                    <div className="text-sm text-muted-foreground">
-                      {formatGBP(customer.averageOrderValue)} avg
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handlePageChange(currentPage - 1)}
+                      disabled={!data.pagination.hasPrevPage || isLoading}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                      Previous
+                    </Button>
+                    
+                    <div className="flex items-center gap-1">
+                      <span className="text-sm text-muted-foreground">
+                        Page {data.pagination.currentPage} of {data.pagination.totalPages}
+                      </span>
                     </div>
+
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handlePageChange(currentPage + 1)}
+                      disabled={!data.pagination.hasNextPage || isLoading}
+                    >
+                      Next
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
                   </div>
                 </div>
-              ))}
-            </div>
+              )}
+            </>
           )}
         </CardContent>
       </Card>