Merge remote-tracking branch 'upstream/main' into feature/fe-payment-success-settings-dashboard-1179-1182

# Conflicts:
#	frontend/messages/en.json
#	frontend/messages/es.json
#	frontend/messages/pt.json
#	frontend/src/app/(authenticated)/settings/SettingsDashboardClient.test.tsx
#	frontend/src/app/(authenticated)/settings/page.tsx

Author: Dannyswiss1

.gitignore

@@ -5,6 +5,7 @@
 node_modules/
 npm-debug.log*
 yarn-debug.log*
+yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
@@ -39,6 +40,34 @@ resources.md
 x402_stellar_guide.md
 prompt.md
 backend_check_fail.md
-frontend_check_fail.md 
+frontend_check_fail.md
 issue.md
-pr.md
+pr.md
+
+# ── Test artifacts ────────────────────────────────────────────────
+# Playwright / Vitest output directories
+test-results/
+**/test-results/
+playwright-report/
+**/playwright-report/
+
+# Visual regression snapshots generated at runtime
+**/*.spec.ts-snapshots/
+**/*.spec.tsx-snapshots/
+**/e2e/*.spec.ts-snapshots/
+**/e2e/*.spec.tsx-snapshots/
+
+# ── Build / compile artifacts ─────────────────────────────────────
+# TypeScript incremental build cache — no value in version control
+tsconfig.tsbuildinfo
+**/tsconfig.tsbuildinfo
+
+# ── Misc output files ─────────────────────────────────────────────
+output.txt
+**/output.txt
+verify_output.txt
+**/verify_output.txt
+
+# ── Lock files (keep pnpm-lock.yaml, ignore others) ───────────────
+# Root-level package-lock from accidental npm installs
+package-lock.json

frontend/.gitignore

@@ -1,2 +1,21 @@
 node_modules/
-package-lock.json
+package-lock.json
+
+# Next.js build output
+.next/
+out/
+
+# TypeScript incremental build cache
+tsconfig.tsbuildinfo
+
+# Playwright test artifacts
+test-results/
+playwright-report/
+
+# Visual regression snapshots (generated at runtime, not committed)
+tests/e2e/*.spec.ts-snapshots/
+tests/e2e/*.spec.tsx-snapshots/
+*-snapshots/
+
+# Misc output files generated by scripts/debug runs
+output.txt

frontend/USER_PERMISSIONS_MANAGER_BUNDLE_OPTIMIZATION.md

@@ -0,0 +1,31 @@
+# User Permissions Manager Bundle Optimization
+
+## Summary
+
+Issue #1174 reduces the client-side cost of the User Permissions Manager while keeping the same accessible controls and visual feedback.
+
+## Changes
+
+- Removed the direct `framer-motion` dependency from `UserPermissionsManager`.
+- Replaced row, toggle, and category affordance animations with Tailwind/CSS transitions.
+- Preserved `motion-reduce` behavior for users who prefer reduced motion.
+- Lazy-loaded the permissions manager from the Settings permissions tab with `next/dynamic`.
+- Added a tabpanel wrapper around the settings permissions view for consistent screen-reader navigation.
+
+## Accessibility
+
+- Permission switches remain native checkboxes with stable `aria-label` values.
+- Category groups keep `aria-expanded`, `aria-controls`, and region labels.
+- Pending permission writes continue to set `aria-busy` on the manager region.
+- Read-only mode disables controls and keeps the read-only notice visible.
+
+## Verification
+
+Run:
+
+```bash
+npm run test:unit -- UserPermissionsManager.test.tsx
+npx eslint src/components/UserPermissionsManager.tsx "src/app/(authenticated)/settings/page.tsx"
+```
+
+Full build verification may still be blocked by unrelated syntax errors in other frontend files and by `next/font` network access in restricted environments.

frontend/messages/en.json

@@ -440,5 +440,17 @@
     "failedToTestWebhook": "Failed to test webhook",
     "testWebhookSentStatus": "Test webhook sent — status {status}",
     "colorPickerLabel": "{label} color picker"
+  },
+  "notificationCenter": {
+    "buttonLabel": "Notifications",
+    "buttonLabelWithCount": "Notifications ({count} unread)",
+    "panelLabel": "Notification Center",
+    "heading": "Notifications",
+    "unreadCount": "{count} unread",
+    "noAlerts": "No new alerts",
+    "alertLabel": "Alert",
+    "dismissLabel": "Dismiss notification: {message}",
+    "notificationLabel": "Notification: {message}",
+    "timestampLabel": "Timestamp: {timestamp}"
   }
 }

frontend/messages/es.json

@@ -440,5 +440,17 @@
     "failedToTestWebhook": "Error al probar el webhook",
     "testWebhookSentStatus": "Webhook de prueba enviado — estado {status}",
     "colorPickerLabel": "Selector de color {label}"
+  },
+  "notificationCenter": {
+    "buttonLabel": "Notificaciones",
+    "buttonLabelWithCount": "Notificaciones ({count} sin leer)",
+    "panelLabel": "Centro de Notificaciones",
+    "heading": "Notificaciones",
+    "unreadCount": "{count} sin leer",
+    "noAlerts": "Sin nuevas alertas",
+    "alertLabel": "Alerta",
+    "dismissLabel": "Descartar notificación: {message}",
+    "notificationLabel": "Notificación: {message}",
+    "timestampLabel": "Marca de tiempo: {timestamp}"
   }
 }

frontend/messages/pt.json

@@ -440,5 +440,17 @@
     "failedToTestWebhook": "Falha ao testar o webhook",
     "testWebhookSentStatus": "Webhook de teste enviado — status {status}",
     "colorPickerLabel": "Seletor de cor {label}"
+  },
+  "notificationCenter": {
+    "buttonLabel": "Notificacoes",
+    "buttonLabelWithCount": "Notificacoes ({count} nao lidas)",
+    "panelLabel": "Central de Notificacoes",
+    "heading": "Notificacoes",
+    "unreadCount": "{count} nao lidas",
+    "noAlerts": "Sem novos alertas",
+    "alertLabel": "Alerta",
+    "dismissLabel": "Dispensar notificacao: {message}",
+    "notificationLabel": "Notificacao: {message}",
+    "timestampLabel": "Carimbo de data/hora: {timestamp}"
   }
 }

frontend/src/app/(authenticated)/layout.tsx

@@ -1,17 +1,29 @@
 "use client";
 
 import { useState } from "react";
+import dynamic from "next/dynamic";
 import AuthGuard from "@/components/AuthGuard";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import LocaleSwitcher from "@/components/LocaleSwitcher";
-import NotificationCenter from "@/components/NotificationCenter";
 import PaymentToastListener from "@/components/PaymentToastListener";
 import Sidebar from "@/components/Sidebar";
 import SupportOverlay from "@/components/SupportOverlay";
 import UserNav from "@/components/UserNav";
 import { useHydrateMerchantStore } from "@/lib/merchant-store";
 import { motion } from "framer-motion";
 
+/**
+ * #1189 — Bundle size optimisation:
+ * NotificationCenter (which pulls in framer-motion panel logic) is loaded
+ * dynamically so it does not bloat the initial authenticated-layout bundle.
+ * The bell trigger itself is tiny, so SSR is disabled — it is purely
+ * interactive and only meaningful after hydration.
+ */
+const NotificationCenter = dynamic(
+  () => import("@/components/NotificationCenter"),
+  { ssr: false }
+);
+
 export default function AuthenticatedLayout({
   children,
 }: {

frontend/src/app/(authenticated)/payment-history/page.tsx

@@ -1,25 +1,36 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import dynamic from "next/dynamic";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
-import PaymentDetailModal from "@/components/PaymentDetailModal";
-import PaymentDetailsSheet from "@/components/PaymentDetailsSheet";
-import ExportCsvButton from "@/components/ExportCsvButton";
-import TransactionFilterSidebar from "@/components/TransactionFilterSidebar";
 import { localeToLanguageTag } from "@/i18n/config";
 import { toast } from "sonner";
 import {
   useHydrateMerchantStore,
   useMerchantApiKey,
   useMerchantId,
 } from "@/lib/merchant-store";
-import { buildPaymentHistorySearchParams } from "@/lib/payment-history-filters";
 import { useTransactionFilters } from "@/hooks/useTransactionFilters";
 import { usePaymentSocket } from "@/lib/usePaymentSocket";
 
+const ExportCsvButton = dynamic(() => import("@/components/ExportCsvButton"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-10 w-28 rounded-xl border border-[#E8E8E8] bg-[#F9F9F9]" aria-hidden="true" />
+  ),
+});
+const PaymentDetailModal = dynamic(() => import("@/components/PaymentDetailModal"), { ssr: false });
+const PaymentDetailsSheet = dynamic(() => import("@/components/PaymentDetailsSheet"), { ssr: false });
+const TransactionFilterSidebar = dynamic(() => import("@/components/TransactionFilterSidebar"), {
+  ssr: false,
+  loading: () => (
+    <div className="hidden h-[420px] w-[320px] rounded-2xl border border-[#E8E8E8] bg-[#F9F9F9] lg:block" aria-hidden="true" />
+  ),
+});
+
 interface Payment {
   id: string;
   amount: string;
@@ -60,6 +71,10 @@ export default function PaymentHistoryPage() {
   const searchParams = useSearchParams();
   const apiKey = useMerchantApiKey();
   const merchantId = useMerchantId();
+  const currentPage = useMemo(() => {
+    const parsed = Number(searchParams.get("page") ?? "1");
+    return Number.isFinite(parsed) && parsed > 0 ? Math.floor(parsed) : 1;
+  }, [searchParams]);
 
   useHydrateMerchantStore();
 
@@ -81,6 +96,19 @@ export default function PaymentHistoryPage() {
     onClearFilter,
     onClearAll,
   } = useTransactionFilters(pushSearchParams, searchParams);
+  const handlePageChange = useCallback(
+    (page: number) => {
+      const nextPage = Math.max(1, page);
+      const params = new URLSearchParams(searchParams.toString());
+      if (nextPage === 1) {
+        params.delete("page");
+      } else {
+        params.set("page", String(nextPage));
+      }
+      pushSearchParams(params);
+    },
+    [pushSearchParams, searchParams],
+  );
 
   // ── UI state ────────────────────────────────────────────────────────────────
   const [payments, setPayments] = useState<Payment[]>([]);
@@ -159,7 +187,7 @@ export default function PaymentHistoryPage() {
 
         const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000";
         const params = new URLSearchParams(searchParams.toString());
-        params.set("page", "1");
+        params.set("page", currentPage.toString());
         params.set("limit", LIMIT.toString());
 
         const response = await fetch(`${apiUrl}/api/payments?${params.toString()}`, {
@@ -182,13 +210,16 @@ export default function PaymentHistoryPage() {
 
     fetchPayments();
     return () => controller.abort();
-  }, [searchParams, apiKey, t]);
+  }, [searchParams, currentPage, apiKey, t]);
 
   // ── Handlers ─────────────────────────────────────────────────────────────────
   const handlePaymentClick = (paymentId: string) => {
     setSelectedPayment(paymentId);
     setIsSheetOpen(true);
   };
+  const totalPages = Math.max(1, Math.ceil(totalCount / LIMIT));
+  const pageStart = totalCount === 0 ? 0 : (currentPage - 1) * LIMIT + 1;
+  const pageEnd = Math.min(currentPage * LIMIT, totalCount);
 
   // ── Loading state ─────────────────────────────────────────────────────────────
   if (loading) {
@@ -430,7 +461,9 @@ export default function PaymentHistoryPage() {
           {/* Results count */}
           <div className="flex items-center justify-between px-2">
             <p className="text-xs text-[#6B6B6B] font-medium">
-              {t("showingResults", { shown: payments.length, total: totalCount })}
+              {totalPages > 1
+                ? `Showing ${pageStart}-${pageEnd} of ${totalCount}`
+                : t("showingResults", { shown: payments.length, total: totalCount })}
             </p>
           </div>
 
@@ -501,9 +534,29 @@ export default function PaymentHistoryPage() {
             </div>
           )}
 
-          {totalCount > LIMIT && (
-            <div className="flex items-center justify-center py-6">
-              <p className="text-[10px] font-bold uppercase tracking-widest text-[#A0A0A0]">End of list (Showing {LIMIT} most recent)</p>
+          {totalPages > 1 && (
+            <div className="flex flex-col items-center justify-between gap-3 border-t border-[#F0F0F0] py-6 sm:flex-row">
+              <p className="text-[10px] font-bold uppercase tracking-widest text-[#A0A0A0]">
+                Page {currentPage} of {totalPages}
+              </p>
+              <nav className="flex items-center gap-2" aria-label="Transaction history pagination">
+                <button
+                  type="button"
+                  onClick={() => handlePageChange(currentPage - 1)}
+                  disabled={currentPage <= 1 || isFilterPending}
+                  className="inline-flex min-h-10 items-center rounded-xl border border-[#E8E8E8] bg-white px-4 text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] transition-all hover:bg-[#F5F5F5] disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Previous
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePageChange(currentPage + 1)}
+                  disabled={currentPage >= totalPages || isFilterPending}
+                  className="inline-flex min-h-10 items-center rounded-xl bg-[#0A0A0A] px-4 text-[10px] font-bold uppercase tracking-widest text-white transition-all hover:bg-[#2A2A2A] disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Next
+                </button>
+              </nav>
             </div>
           )}
         </div>
@@ -518,4 +571,4 @@ export default function PaymentHistoryPage() {
       )}
     </div>
   );
-}
+}

…ed)/settings/SettingsDashboardClient.tsx …thenticated)/settings/SettingsWidget.tsxfrontend/src/app/(authenticated)/settings/SettingsDashboardClient.tsx renamed to frontend/src/app/(authenticated)/settings/SettingsWidget.tsx frontend/src/app/(authenticated)/settings/SettingsDashboardClient.tsx renamed to frontend/src/app/(authenticated)/settings/SettingsWidget.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import dynamic from "next/dynamic";
 import {
   useCallback,
   useEffect,
@@ -25,7 +26,6 @@ import { useDisplayPreferences } from "@/lib/display-preferences";
 import WebhookHealthIndicator from "@/components/WebhookHealthIndicator";
 import DangerZone from "@/components/DangerZone";
 import { EmailReceiptPreview } from "@/components/EmailReceiptPreview";
-import UserPermissionsManager from "@/components/UserPermissionsManager";
 import SettingsPanelSkeleton from "@/components/SettingsPanelSkeleton";
 import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import { Spinner } from "@/components/ui/Spinner";
@@ -36,6 +36,14 @@ import {
   type SettingsTab,
 } from "./accessibility";
 
+const UserPermissionsManager = dynamic(
+  () => import("@/components/UserPermissionsManager"),
+  {
+    ssr: false,
+    loading: () => <SettingsPanelSkeleton />,
+  },
+);
+
 const API_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000";
 const HEX_COLOR_REGEX = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
 const DEFAULT_BRANDING = {
@@ -268,7 +276,7 @@ function buildNavItems(t: (key: string) => string): {
   ];
 }
 
-export default function SettingsDashboardClient() {
+export default function SettingsWidget() {
   const t = useTranslations("settingsPage");
   const navItems = useMemo(() => buildNavItems(t), [t]);
   const apiKey = useMerchantApiKey();
@@ -1364,7 +1372,16 @@ export default function SettingsDashboardClient() {
 
           {/* Permissions Tab */}
           {activeTab === "permissions" && (
-            <UserPermissionsManager />
+            <div
+              id={getSettingsPanelDomId("permissions")}
+              role="tabpanel"
+              aria-label={t("navPermissions")}
+              aria-labelledby="permissions-tab permissions-tab-mobile"
+              tabIndex={0}
+              className="rounded-2xl border border-[#E8E8E8] bg-white p-8"
+            >
+              <UserPermissionsManager showCategories />
+            </div>
           )}
 
           {/* Danger Tab */}