feat: add filter badges, skip navigation, mobile nav, and structured correlation logger

apps/backend/src/utils/logger.util.ts

@@ -0,0 +1,41 @@
+import { Logger } from '@nestjs/common';
+
+export interface LogContext {
+  correlationId?: string;
+  userId?: string;
+  action?: string;
+}
+
+function generateId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export class CorrelationLogger {
+  private readonly logger: Logger;
+
+  constructor(context: string) {
+    this.logger = new Logger(context);
+  }
+
+  private format(message: string, ctx?: LogContext): string {
+    const cid = ctx?.correlationId ?? generateId();
+    const meta = ctx ? { ...ctx, correlationId: cid } : { correlationId: cid };
+    return `[cid:${cid}] ${message} | ${JSON.stringify(meta)}`;
+  }
+
+  log(message: string, ctx?: LogContext): void {
+    this.logger.log(this.format(message, ctx));
+  }
+
+  warn(message: string, ctx?: LogContext): void {
+    this.logger.warn(this.format(message, ctx));
+  }
+
+  error(message: string, ctx?: LogContext): void {
+    this.logger.error(this.format(message, ctx));
+  }
+}
+
+export function createLogger(context: string): CorrelationLogger {
+  return new CorrelationLogger(context);
+}

apps/frontend/components/common/SkipLink.tsx

@@ -0,0 +1,27 @@
+"use client";
+import React from "react";
+
+interface SkipLinkProps {
+  targetId?: string;
+  label?: string;
+}
+
+export default function SkipLink({
+  targetId = "main-content",
+  label = "Skip to main content",
+}: SkipLinkProps) {
+  return (
+    <a
+      href={`#${targetId}`}
+      className={[
+        "sr-only",
+        "focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-50",
+        "focus:rounded focus:border focus:border-blue-600 focus:bg-white",
+        "focus:px-4 focus:py-2 focus:text-blue-700 focus:shadow-lg focus:outline-none",
+      ].join(" ")}
+      aria-label={label}
+    >
+      {label}
+    </a>
+  );
+}

apps/frontend/components/dashboard/FilterBadges.tsx

@@ -0,0 +1,44 @@
+"use client";
+import React from "react";
+import { X } from "lucide-react";
+
+interface FilterBadgesProps {
+  searchQuery?: string;
+  minAmount?: string;
+  maxAmount?: string;
+  fromDate?: string;
+  toDate?: string;
+  activeStatuses?: string[];
+  onClear: (key: string) => void;
+  onClearAll: () => void;
+}
+
+export default function FilterBadges({
+  searchQuery, minAmount, maxAmount, fromDate, toDate,
+  activeStatuses = [], onClear, onClearAll,
+}: FilterBadgesProps) {
+  const badges: { key: string; label: string }[] = [
+    ...(searchQuery ? [{ key: "search", label: `Search: ${searchQuery}` }] : []),
+    ...(minAmount ? [{ key: "minAmount", label: `Min: ${minAmount} XLM` }] : []),
+    ...(maxAmount ? [{ key: "maxAmount", label: `Max: ${maxAmount} XLM` }] : []),
+    ...(fromDate ? [{ key: "fromDate", label: `From: ${fromDate}` }] : []),
+    ...(toDate ? [{ key: "toDate", label: `To: ${toDate}` }] : []),
+    ...activeStatuses.map((s) => ({ key: `status-${s}`, label: s })),
+  ];
+  if (badges.length === 0) return null;
+  return (
+    <div className="flex flex-wrap items-center gap-2 py-1">
+      {badges.map((b) => (
+        <span key={b.key} className="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
+          {b.label}
+          <button onClick={() => onClear(b.key)} aria-label={`Remove ${b.label} filter`} className="hover:text-blue-600 focus:outline-none">
+            <X className="h-3 w-3" />
+          </button>
+        </span>
+      ))}
+      <button onClick={onClearAll} className="text-xs text-gray-400 underline hover:text-gray-600">
+        Clear all
+      </button>
+    </div>
+  );
+}

apps/frontend/components/layout/MobileNav.tsx

@@ -0,0 +1,41 @@
+"use client";
+import React from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const NAV_LINKS = [
+  { href: "/dashboard", label: "Dashboard" },
+  { href: "/escrow/create", label: "New Escrow" },
+  { href: "/transactions", label: "History" },
+  { href: "/settings", label: "Settings" },
+];
+
+export default function MobileNav() {
+  const pathname = usePathname();
+  return (
+    <nav
+      className="fixed bottom-0 left-0 right-0 z-50 border-t border-gray-200 bg-white sm:hidden"
+      role="navigation"
+      aria-label="Mobile navigation"
+    >
+      <ul className="flex">
+        {NAV_LINKS.map(({ href, label }) => {
+          const active = pathname?.startsWith(href) ?? false;
+          return (
+            <li key={href} className="flex-1">
+              <Link
+                href={href}
+                className={`flex flex-col items-center py-3 text-xs font-medium transition-colors ${
+                  active ? "text-blue-600" : "text-gray-500 hover:text-gray-700"
+                }`}
+                aria-current={active ? "page" : undefined}
+              >
+                {label}
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}