feat: integrate contextual links and fix coupons navigation

- Added DocLink component and mapped routes
- Fixed Coupons nav link to /marketing/coupons
- Updated Settings pages to show inline documentation links

admin-spa/src/routes/Marketing/Coupons/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { usePageHeader } from '@/contexts/PageHeaderContext';
 import { Link, useNavigate } from 'react-router-dom';
 import { __ } from '@/lib/i18n';
 import { CouponsApi, type Coupon } from '@/lib/api/coupons';
@@ -36,6 +37,12 @@ export default function CouponsIndex() {
   // Configure FAB to navigate to new coupon page
   useFABConfig('coupons');
 
+  // Set page header for contextual link
+  const { setPageHeader } = usePageHeader();
+  React.useEffect(() => {
+    setPageHeader(__('Coupons'));
+  }, [setPageHeader]);
+
   // Count active filters
   const activeFiltersCount = discountType && discountType !== 'all' ? 1 : 0;
 

admin-spa/src/routes/Marketing/Newsletter/index.tsx

@@ -6,6 +6,8 @@ import { __ } from '@/lib/i18n';
 import { useModules } from '@/hooks/useModules';
 import { cn } from '@/lib/utils'; // Assuming cn exists, widely used in ShadCN
 
+import { DocLink } from '@/components/DocLink';
+
 export default function NewsletterLayout() {
     const navigate = useNavigate();
     const location = useLocation();
@@ -16,7 +18,10 @@ export default function NewsletterLayout() {
         return (
             <div className="w-full space-y-6">
                 <div>
-                    <h1 className="text-2xl font-bold tracking-tight">{__('Newsletter')}</h1>
+                    <div className="flex items-center">
+                        <h1 className="text-2xl font-bold tracking-tight">{__('Newsletter')}</h1>
+                        <DocLink />
+                    </div>
                     <p className="text-muted-foreground mt-2">{__('Newsletter module is disabled')}</p>
                 </div>
                 <div className="bg-yellow-50 dark:bg-yellow-950/20 border border-yellow-200 dark:border-yellow-900 rounded-lg p-6 text-center">
@@ -53,7 +58,10 @@ export default function NewsletterLayout() {
     return (
         <div className="w-full space-y-6">
             <div>
-                <h1 className="text-2xl font-bold tracking-tight">{__('Newsletter')}</h1>
+                <div className="flex items-center">
+                    <h1 className="text-2xl font-bold tracking-tight">{__('Newsletter')}</h1>
+                    <DocLink />
+                </div>
                 <p className="text-muted-foreground mt-2">{__('Manage subscribers and send email campaigns')}</p>
             </div>
 

admin-spa/src/routes/Marketing/index.tsx

@@ -24,13 +24,18 @@ const cards: MarketingCard[] = [
   },
 ];
 
+import { DocLink } from '@/components/DocLink';
+
 export default function Marketing() {
   const navigate = useNavigate();
 
   return (
     <div className="w-full space-y-6">
       <div>
-        <h1 className="text-2xl font-bold tracking-tight">{__('Marketing')}</h1>
+        <div className="flex items-center">
+          <h1 className="text-2xl font-bold tracking-tight">{__('Marketing')}</h1>
+          <DocLink />
+        </div>
         <p className="text-muted-foreground mt-2">{__('Newsletter, campaigns, and promotions')}</p>
       </div>
 

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -3,6 +3,8 @@ import { Button } from '@/components/ui/button';
 import { Loader2 } from 'lucide-react';
 import { usePageHeader } from '@/contexts/PageHeaderContext';
 
+import { DocLink } from '@/components/DocLink';
+
 interface SettingsLayoutProps {
   title: string | React.ReactNode;
   description?: string;
@@ -40,7 +42,7 @@ export function SettingsLayout({
   useEffect(() => {
     // Extract string title if it's a ReactNode
     const titleString = typeof title === 'string' ? title : '';
-    
+
     if (onSave) {
       // Combine custom action with save button
       const headerAction = (
@@ -84,7 +86,10 @@ export function SettingsLayout({
           <div className="mb-8">
             <div className="flex items-start justify-between gap-4 min-w-0">
               <div className="min-w-0 flex-1">
-                <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+                <div className="flex items-center">
+                  <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+                  <DocLink />
+                </div>
                 {description && (
                   <p className="text-muted-foreground mt-2">{description}</p>
                 )}