fix(M3-M11): clients meta pagination, client detail types, sidebar icon imports, payments error state; add E2E specs for all modules

app/(app)/payments/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { RefreshCw, CreditCard } from "lucide-react";
+import { RefreshCw, CreditCard, AlertCircle } from "lucide-react";
 import { Card, CardContent, CardHeader } from "@/components/ui/Card";
 import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
 import { Badge } from "@/components/ui/Badge";
@@ -35,7 +35,7 @@ export default function PaymentsPage() {
   const [page, setPage] = useState(1);
   const [selected, setSelected] = useState<Payment | null>(null);
 
-  const { data, isLoading, refetch } = useQuery<PaymentsResponse>({
+  const { data, isLoading, isError, refetch } = useQuery<PaymentsResponse>({
     queryKey: ["payments", search, channelFilter, page],
     queryFn: async () => {
       const params = new URLSearchParams({ page: String(page), limit: "20" });
@@ -85,6 +85,8 @@ export default function PaymentsPage() {
                 Array.from({ length: 8 }).map((_, i) => (
                   <TableRow key={i}><Td colSpan={7}><div className="h-4 bg-gray-100 rounded animate-pulse" /></Td></TableRow>
                 ))
+              ) : isError ? (
+                <TableRow><Td colSpan={7}><div className="flex items-center gap-2 py-6 justify-center text-red-400 text-sm"><AlertCircle size={16} />Failed to load payments. <button onClick={() => refetch()} className="underline">Retry</button></div></Td></TableRow>
               ) : payments.length === 0 ? (
                 <EmptyState colSpan={7} message="No payments found" icon={<CreditCard size={24} />} />
               ) : payments.map(p => (