criptscheck-and-run-organize.js

warning: in the working copy of 'src/app/admin/tools/page.tsx', LF will be replaced by CRLF the next time Git touches it
warning: in the working copy of 'src/app/api/admin/products/route.ts', LF will be replaced by CRLF the next time Git touches it
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 40213a7..ccac953 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -5,12 +5,12 @@ import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import Link from 'next/link';
 import Script from 'next/script';
-import { 
-  Users, 
-  Package, 
-  ShoppingCart, 
-  BarChart3, 
-  Settings, 
+import {

+  Users,

+  Package,

+  ShoppingCart,

+  BarChart3,

+  Settings,

   Shield,
   ShieldCheck,
   UserPlus,
@@ -75,7 +75,7 @@ import { AdminSkeleton, TableSkeleton } from '@/components/LoadingSkeleton';
 import SelectField, { SelectOption } from '@/components/SelectField';
 import toast from 'react-hot-toast';
 
-const allowedTabs = ['users','roles','products','policy-review','orders','overview','marketing','performance','analytics','etsy','seo','seo-raw','analytics-seo','blogs','keyword-planner','sourcing','email-tracking'] as const;
+const allowedTabs = ['users', 'roles', 'products', 'policy-review', 'orders', 'overview', 'marketing', 'performance', 'analytics', 'etsy', 'seo', 'seo-raw', 'analytics-seo', 'blogs', 'keyword-planner', 'sourcing', 'email-tracking'] as const;

 type TabKey = typeof allowedTabs[number];
 type SidebarTab = {
   id: TabKey;
@@ -285,7 +285,7 @@ export default function AdminDashboard() {
   const [segmentDaysSinceLogin, setSegmentDaysSinceLogin] = useState<number | ''>('');
   const [segmentCategory, setSegmentCategory] = useState('');
   const [sendingCampaign, setSendingCampaign] = useState(false);
-  
+

   // SEO Research (SerpAPI) state
   const [keywordQuery, setKeywordQuery] = useState('');
   const [seoSelectedCategory, setSeoSelectedCategory] = useState('');
@@ -295,7 +295,7 @@ export default function AdminDashboard() {
   const seoLoadedOnceRef = useRef(false);
   const [seoAudit, setSeoAudit] = useState<any>(null);
   const [seoHistory, setSeoHistory] = useState<any[]>([]);
-  
+

   // Product modal state
   const [selectedProductForModal, setSelectedProductForModal] = useState<Product | null>(null);
   const [showProductModal, setShowProductModal] = useState(false);
@@ -305,13 +305,13 @@ export default function AdminDashboard() {
   const [analysisSelectedMeta, setAnalysisSelectedMeta] = useState<Record<string, { name: string; price?: number }>>({});
   const [etsyExportLoading, setEtsyExportLoading] = useState<Record<string, boolean>>({});
   const [etsyProductSearch, setEtsyProductSearch] = useState('');
-  
+

   const ETSY_SYNC_ACTION_OPTIONS: SelectOption[] = [
     { value: 'create', label: 'Create' },
     { value: 'update', label: 'Update' },
     { value: 'delete', label: 'Delete' },
   ];
-  
+

   const ETSY_EXPORT_CATEGORY_OPTIONS: SelectOption[] = [
     { value: 'all', label: 'All Categories' },
     { value: 'Men', label: 'Men' },
@@ -320,7 +320,7 @@ export default function AdminDashboard() {
     { value: 'Accessories', label: 'Accessories' },
     { value: 'Gifting', label: 'Gifting' },
   ];
-  
+

   const ETSY_EXPORT_LIMIT_OPTIONS: SelectOption[] = [
     { value: '10', label: '10' },
     { value: '25', label: '25' },
@@ -330,7 +330,7 @@ export default function AdminDashboard() {
     { value: '500', label: '500' },
     { value: 'custom', label: 'Custom' },
   ];
-  
+

   const [etsySyncProductId, setEtsySyncProductId] = useState('');
   const [etsySyncProductOpen, setEtsySyncProductOpen] = useState(false);
   const [etsySyncAction, setEtsySyncAction] = useState<'create' | 'update' | 'delete'>('create');
@@ -348,7 +348,7 @@ export default function AdminDashboard() {
   const [policyReviewStatus, setPolicyReviewStatus] = useState<Record<string, { loading: boolean; error?: string; result?: PolicyReviewResult }>>({});
   const [policyImprovements, setPolicyImprovements] = useState<Record<string, ProductImprovementState>>({});
   const [rawSearchItems, setRawSearchItems] = useState<any[]>([]);
-  
+

   const hydratePolicyReviewsFromProducts = (productList: Product[]) => {
     if (!Array.isArray(productList) || productList.length === 0) {
       return;
@@ -447,11 +447,11 @@ export default function AdminDashboard() {
       action
     };
   }, [keywordQuery, keywords, productsSeo]);
-  
+

   // SEO Research functions
   const searchKeywords = async () => {
     if (!keywordQuery.trim()) return;
-    
+

     setSeoLoading(prev => ({ ...prev, keywords: true }));
     try {
       const response = await fetch(`/api/seo/keywords?q=${encodeURIComponent(keywordQuery)}&limit=20`);
@@ -549,7 +549,7 @@ export default function AdminDashboard() {
   // Google & Google Shopping Analytics functions
   const searchAnalytics = async () => {
     if (!analyticsSearchQuery.trim()) return;
-    
+

     setAnalyticsSeoLoading(true);
     try {
       const response = await fetch(`/api/seo/raw-search?q=${encodeURIComponent(analyticsSearchQuery)}&limit=10`);
@@ -594,7 +594,7 @@ export default function AdminDashboard() {
     totalClicked: number;
     lastSentAt: string;
   }>>({});
-  
+

   const etsyProductOptions = useMemo<SelectOption[]>(() => {
     if (!Array.isArray(products) || products.length === 0) return [];
     return products.map((product) => {
@@ -606,7 +606,7 @@ export default function AdminDashboard() {
       };
     });
   }, [products]);
-  
+

   const [orders, setOrders] = useState<Order[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
@@ -651,7 +651,7 @@ export default function AdminDashboard() {
   const isProductOrganized = (product: Product): boolean => {
     const allImages = [product.image, ...(product.images || [])].filter(Boolean);
     if (allImages.length === 0) return false;
-    return allImages.some((url: string) => 
+    return allImages.some((url: string) =>

       url && typeof url === 'string' && (url.includes('cloudinary.com') || url.includes('res.cloudinary.com'))
     );
   };
@@ -698,11 +698,31 @@ export default function AdminDashboard() {
     try {
       setMetricsLoading(true);
       const token = localStorage.getItem('token');
+      if (!token) {

+        // If no token, we can't fetch metrics.

+        // We might want to redirect or just stop here.

+        // Since this is called in useEffect, stopping is safer to avoid loops.

+        console.warn('No token found, skipping metrics fetch');

+        return;

+      }

+

       const response = await fetch(`/api/admin/metrics?days=${days}`, {
         headers: { 'Authorization': `Bearer ${token}` }
       });
+

       const data = await response.json();
-      if (!response.ok) throw new Error(data.error || 'Failed to fetch metrics');
+

+      if (!response.ok) {

+        if (response.status === 401) {

+          // Token expired or invalid

+          localStorage.removeItem('token');

+          router.push('/login');

+          toast.error('Session expired. Please login again.');

+          return;

+        }

+        throw new Error(data.error || 'Failed to fetch metrics');

+      }

+

       setMetrics(data);
     } catch (e) {
       console.error('Metrics fetch error', e);
@@ -737,7 +757,7 @@ export default function AdminDashboard() {
     try {
       setAnalyticsLoading(true);
       const token = localStorage.getItem('token');
-      const res = await fetch(`/api/admin/analytics?days=${days}` , { headers: { 'Authorization': `Bearer ${token}` } });
+      const res = await fetch(`/api/admin/analytics?days=${days}`, { headers: { 'Authorization': `Bearer ${token}` } });

       const data = await res.json();
       if (!res.ok) throw new Error(data.error || 'Failed to fetch analytics');
       setAnalytics(data);
@@ -769,11 +789,11 @@ export default function AdminDashboard() {
     ];
     return (
       <div className="p-6">
-          <div className="flex items-center gap-2 mb-4">
+        <div className="flex items-center gap-2 mb-4">

           <span className="text-sm text-gray-600">Range:</span>
           <div className="inline-flex rounded-md border bg-white shadow-sm overflow-hidden">
-            {[7,30,90].map(d => (
-              <button key={d} onClick={() => { lastAnalyticsKeyRef.current = null; setAnalyticsDays(d as 7|30|90); }} className={`px-3 py-1.5 text-sm ${analyticsDays===d?'bg-blue-600 text-white':'text-gray-700 hover:bg-gray-50'}`}>{d}d</button>
+            {[7, 30, 90].map(d => (

+              <button key={d} onClick={() => { lastAnalyticsKeyRef.current = null; setAnalyticsDays(d as 7 | 30 | 90); }} className={`px-3 py-1.5 text-sm ${analyticsDays === d ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-50'}`}>{d}d</button>

             ))}
           </div>
         </div>
@@ -810,7 +830,7 @@ export default function AdminDashboard() {
             <div className="border rounded-lg p-4">
               <div className="font-medium text-gray-900 mb-2">No-results Queries</div>
               <div className="space-y-2">
-                {(analytics?.search || []).filter((s: any) => s.noResults>0).map((s: any) => (
+                {(analytics?.search || []).filter((s: any) => s.noResults > 0).map((s: any) => (

                   <div key={s._id} className="flex items-center justify-between text-sm">
                     <span className="truncate max-w-[70%]">{s._id}</span>
                     <span className="font-mono">{s.noResults}</span>
@@ -825,7 +845,7 @@ export default function AdminDashboard() {
   }
 
   function CohortAnalytics() {
-    const entries = Object.entries(analytics?.cohorts || {}).sort(([a],[b]) => a.localeCompare(b));
+    const entries = Object.entries(analytics?.cohorts || {}).sort(([a], [b]) => a.localeCompare(b));

     return (
       <div className="p-6">
         <div className="mb-4 text-gray-700">Estimated average LTV: <span className="font-semibold">${(analytics?.ltv || 0).toFixed(2)}</span></div>
@@ -836,228 +856,224 @@ export default function AdminDashboard() {
               <div className="text-sm text-gray-700">Users: <span className="font-medium">{val.users}</span></div>
               <div className="text-sm text-gray-700">Revenue: <span className="font-medium">${val.revenue.toFixed(2)}</span></div>
             </div>
-          )        )}
-      </div>
-      
-      {/* Product Details Modal */}
-      {showProductModal && selectedProductForModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-          <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
-            <div className="p-6">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-xl font-semibold text-gray-900">Product Details</h2>
-                <button
-                  onClick={() => setShowProductModal(false)}
-                  className="text-gray-400 hover:text-gray-600 transition-colors"
-                >
-                  <XCircle className="h-6 w-6" />
-                </button>
-              </div>
-              
-              <div className="space-y-6">
-                {/* Product Image */}
-                <div className="flex justify-center">
-                  <img
-                    src={selectedProductForModal.image || '/placeholder-product.svg'}
-                    alt={selectedProductForModal.name}
-                    className="w-48 h-48 object-cover rounded-lg border border-gray-200"
-                    onError={(e) => {
-                      (e.target as HTMLImageElement).src = '/placeholder-product.svg';
-                    }}
-                  />
+          ))}

+        </div>

+

+        {/* Product Details Modal */}

+        {showProductModal && selectedProductForModal && (

+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">

+            <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">

+              <div className="p-6">

+                <div className="flex items-center justify-between mb-4">

+                  <h2 className="text-xl font-semibold text-gray-900">Product Details</h2>

+                  <button

+                    onClick={() => setShowProductModal(false)}

+                    className="text-gray-400 hover:text-gray-600 transition-colors"

+                  >

+                    <XCircle className="h-6 w-6" />

+                  </button>

                 </div>
-                
-                {/* Product Info */}
-                <div className="space-y-4">
-                  <div>
-                    <h3 className="text-2xl font-bold text-gray-900">{selectedProductForModal.name}</h3>
-                    <p className="text-lg text-gray-600 mt-1">{selectedProductForModal.description}</p>
-                  </div>
-                  
-                  <div className="flex items-center space-x-4">
-                    <span className="text-3xl font-bold text-green-600">${selectedProductForModal.price}</span>
-                    {selectedProductForModal.originalPrice && selectedProductForModal.originalPrice > selectedProductForModal.price && (
-                      <span className="text-xl text-gray-500 line-through">${selectedProductForModal.originalPrice}</span>
-                    )}
-                  </div>
-                  
-                  <div className="flex items-center space-x-4">
-                    <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
-                      {selectedProductForModal.category}
-                    </span>
-                    <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
-                      {selectedProductForModal.brand}
-                    </span>
-                  </div>
-                  
-                  <div className="flex items-center space-x-2">
-                    <div className="flex items-center">
-                      {[...Array(5)].map((_, i) => (
-                        <svg
-                          key={i}
-                          className={`h-5 w-5 ${
-                            i < Math.floor(selectedProductForModal.rating || 0)
-                              ? 'text-yellow-400'
-                              : 'text-gray-300'
-                          }`}
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                        </svg>
-                      ))}
-                      <span className="text-sm text-gray-500 ml-2">
-                        {selectedProductForModal.rating || 0} ({selectedProductForModal.reviewCount || 0} reviews)
-                      </span>
-                    </div>
+

+                <div className="space-y-6">

+                  {/* Product Image */}

+                  <div className="flex justify-center">

+                    <img

+                      src={selectedProductForModal.image || '/placeholder-product.svg'}

+                      alt={selectedProductForModal.name}

+                      className="w-48 h-48 object-cover rounded-lg border border-gray-200"

+                      onError={(e) => {

+                        (e.target as HTMLImageElement).src = '/placeholder-product.svg';

+                      }}

+                    />

                   </div>
-                  
-                  <div className="grid grid-cols-2 gap-4">
+

+                  {/* Product Info */}

+                  <div className="space-y-4">

                     <div>
-                      <h4 className="font-medium text-gray-900 mb-2">Stock Status</h4>
-                      <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
-                        selectedProductForModal.inStock 
-                          ? 'bg-green-100 text-green-800' 
-                          : 'bg-red-100 text-red-800'
-                      }`}>
-                        {selectedProductForModal.inStock ? `In Stock (${selectedProductForModal.stockCount || 0})` : 'Out of Stock'}
-                      </span>
+                      <h3 className="text-2xl font-bold text-gray-900">{selectedProductForModal.name}</h3>

+                      <p className="text-lg text-gray-600 mt-1">{selectedProductForModal.description}</p>

                     </div>
-                    <div>
-                      <h4 className="font-medium text-gray-900 mb-2">Status</h4>
-                      <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
-                        selectedProductForModal.isActive 
-                          ? 'bg-green-100 text-green-800' 
-                          : 'bg-gray-100 text-gray-800'
-                      }`}>
-                        {selectedProductForModal.isActive ? 'Active' : 'Inactive'}
+

+                    <div className="flex items-center space-x-4">

+                      <span className="text-3xl font-bold text-green-600">${selectedProductForModal.price}</span>

+                      {selectedProductForModal.originalPrice && selectedProductForModal.originalPrice > selectedProductForModal.price && (

+                        <span className="text-xl text-gray-500 line-through">${selectedProductForModal.originalPrice}</span>

+                      )}

+                    </div>

+

+                    <div className="flex items-center space-x-4">

+                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">

+                        {selectedProductForModal.category}

+                      </span>

+                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">

+                        {selectedProductForModal.brand}

                       </span>
                     </div>
-                  </div>
-                  
-                  {isSuperAdmin && (
-                    <div className="flex items-center justify-between p-4 border border-purple-100 rounded-lg bg-purple-50/40">
+

+                    <div className="flex items-center space-x-2">

+                      <div className="flex items-center">

+                        {[...Array(5)].map((_, i) => (

+                          <svg

+                            key={i}

+                            className={`h-5 w-5 ${i < Math.floor(selectedProductForModal.rating || 0)

+                              ? 'text-yellow-400'

+                              : 'text-gray-300'

+                              }`}

+                            fill="currentColor"

+                            viewBox="0 0 20 20"

+                          >

+                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />

+                          </svg>

+                        ))}

+                        <span className="text-sm text-gray-500 ml-2">

+                          {selectedProductForModal.rating || 0} ({selectedProductForModal.reviewCount || 0} reviews)

+                        </span>

+                      </div>

+                    </div>

+

+                    <div className="grid grid-cols-2 gap-4">

                       <div>
-                        <h4 className="font-medium text-purple-900 mb-1">Etsy Export</h4>
-                        <p className="text-sm text-purple-700">
-                          {selectedProductForModal.etsyExported
-                            ? `Exported${selectedProductForModal.etsyExportedAt ? ` on ${new Date(selectedProductForModal.etsyExportedAt).toLocaleDateString()}` : ''}`
-                            : 'Not exported yet'}
-                        </p>
+                        <h4 className="font-medium text-gray-900 mb-2">Stock Status</h4>

+                        <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${selectedProductForModal.inStock

+                          ? 'bg-green-100 text-green-800'

+                          : 'bg-red-100 text-red-800'

+                          }`}>

+                          {selectedProductForModal.inStock ? `In Stock (${selectedProductForModal.stockCount || 0})` : 'Out of Stock'}

+                        </span>

                       </div>
-                      <button
-                        onClick={() => handleToggleEtsyExport(selectedProductForModal._id, !selectedProductForModal.etsyExported)}
-                        disabled={!!etsyExportLoading[selectedProductForModal._id]}
-                        className={`inline-flex items-center space-x-2 rounded-lg px-3 py-2 text-sm font-medium ${
-                          selectedProductForModal.etsyExported
+                      <div>

+                        <h4 className="font-medium text-gray-900 mb-2">Status</h4>

+                        <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${selectedProductForModal.isActive

+                          ? 'bg-green-100 text-green-800'

+                          : 'bg-gray-100 text-gray-800'

+                          }`}>

+                          {selectedProductForModal.isActive ? 'Active' : 'Inactive'}

+                        </span>

+                      </div>

+                    </div>

+

+                    {isSuperAdmin && (

+                      <div className="flex items-center justify-between p-4 border border-purple-100 rounded-lg bg-purple-50/40">

+                        <div>

+                          <h4 className="font-medium text-purple-900 mb-1">Etsy Export</h4>

+                          <p className="text-sm text-purple-700">

+                            {selectedProductForModal.etsyExported

+                              ? `Exported${selectedProductForModal.etsyExportedAt ? ` on ${new Date(selectedProductForModal.etsyExportedAt).toLocaleDateString()}` : ''}`

+                              : 'Not exported yet'}

+                          </p>

+                        </div>

+                        <button

+                          onClick={() => handleToggleEtsyExport(selectedProductForModal._id, !selectedProductForModal.etsyExported)}

+                          disabled={!!etsyExportLoading[selectedProductForModal._id]}

+                          className={`inline-flex items-center space-x-2 rounded-lg px-3 py-2 text-sm font-medium ${selectedProductForModal.etsyExported

                             ? 'bg-white text-purple-700 border border-purple-200 hover:bg-purple-50'
                             : 'bg-purple-600 text-white hover:bg-purple-700'
-                        } ${etsyExportLoading[selectedProductForModal._id] ? 'opacity-60 cursor-not-allowed' : ''}`}
-                      >
-                        {etsyExportLoading[selectedProductForModal._id] ? (
-                          <Loader2 className="h-4 w-4 animate-spin" />
-                        ) : (
-                          <CheckCircle className="h-4 w-4" />
-                        )}
-                        <span>{selectedProductForModal.etsyExported ? 'Unmark' : 'Mark exported'}</span>
-                      </button>
-                    </div>
-                  )}
-                  
-                  {selectedProductForModal.tags && selectedProductForModal.tags.length > 0 && (
-                    <div>
-                      <h4 className="font-medium text-gray-900 mb-2">Tags</h4>
-                      <div className="flex flex-wrap gap-2">
-                        {selectedProductForModal.tags.map((tag, index) => (
-                          <span key={index} className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
-                            {tag}
-                          </span>
-                        ))}
+                            } ${etsyExportLoading[selectedProductForModal._id] ? 'opacity-60 cursor-not-allowed' : ''}`}

+                        >

+                          {etsyExportLoading[selectedProductForModal._id] ? (

+                            <Loader2 className="h-4 w-4 animate-spin" />

+                          ) : (

+                            <CheckCircle className="h-4 w-4" />

+                          )}

+                          <span>{selectedProductForModal.etsyExported ? 'Unmark' : 'Mark exported'}</span>

+                        </button>

                       </div>
-                    </div>
-                  )}
-                  
-                  {selectedProductForModal.specifications && Object.keys(selectedProductForModal.specifications).length > 0 && (
-                    <div>
-                      <h4 className="font-medium text-gray-900 mb-2">Specifications</h4>
-                      <div className="grid grid-cols-1 gap-2">
-                        {Object.entries(selectedProductForModal.specifications).map(([key, value]) => (
-                          <div key={key} className="flex justify-between py-1 border-b border-gray-100">
-                            <span className="font-medium text-gray-600">{key}:</span>
-                            <span className="text-gray-900">{value}</span>
+                    )}

+

+                    {selectedProductForModal.tags && selectedProductForModal.tags.length > 0 && (

+                      <div>

+                        <h4 className="font-medium text-gray-900 mb-2">Tags</h4>

+                        <div className="flex flex-wrap gap-2">

+                          {selectedProductForModal.tags.map((tag, index) => (

+                            <span key={index} className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">

+                              {tag}

+                            </span>

+                          ))}

+                        </div>

+                      </div>

+                    )}

+

+                    {selectedProductForModal.specifications && Object.keys(selectedProductForModal.specifications).length > 0 && (

+                      <div>

+                        <h4 className="font-medium text-gray-900 mb-2">Specifications</h4>

+                        <div className="grid grid-cols-1 gap-2">

+                          {Object.entries(selectedProductForModal.specifications).map(([key, value]) => (

+                            <div key={key} className="flex justify-between py-1 border-b border-gray-100">

+                              <span className="font-medium text-gray-600">{key}:</span>

+                              <span className="text-gray-900">{value}</span>

+                            </div>

+                          ))}

+                        </div>

+                      </div>

+                    )}

+

+                    {isSuperAdmin && (

+                      <div className="space-y-3">

+                        <h4 className="font-medium text-gray-900">Quick Copy for Etsy</h4>

+                        {[

+                          { label: 'Title', value: selectedProductTitle },

+                          { label: 'Description', value: selectedProductDescription },

+                          { label: 'Tags', value: selectedProductTagsText },

+                          { label: 'Specifications', value: selectedProductSpecsText },

+                        ].map(section => (

+                          <div key={section.label} className="flex items-start justify-between gap-4 rounded-lg border border-gray-200 bg-white p-3">

+                            <div className="flex-1">

+                              <p className="text-xs uppercase tracking-wide text-gray-500">{section.label}</p>

+                              <p className="mt-1 text-sm text-gray-900 whitespace-pre-wrap break-words max-h-32 overflow-y-auto">

+                                {section.value || '—'}

+                              </p>

+                            </div>

+                            <button

+                              onClick={() => copyProductSection(section.label, section.value)}

+                              className="inline-flex items-center space-x-1 rounded-md border border-purple-200 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-50"

+                            >

+                              <Copy className="h-4 w-4" />

+                              <span>Copy</span>

+                            </button>

                           </div>
                         ))}
                       </div>
-                    </div>
-                  )}
-                  
-                  {isSuperAdmin && (
-                    <div className="space-y-3">
-                      <h4 className="font-medium text-gray-900">Quick Copy for Etsy</h4>
-                      {[
-                        { label: 'Title', value: selectedProductTitle },
-                        { label: 'Description', value: selectedProductDescription },
-                        { label: 'Tags', value: selectedProductTagsText },
-                        { label: 'Specifications', value: selectedProductSpecsText },
-                      ].map(section => (
-                        <div key={section.label} className="flex items-start justify-between gap-4 rounded-lg border border-gray-200 bg-white p-3">
-                          <div className="flex-1">
-                            <p className="text-xs uppercase tracking-wide text-gray-500">{section.label}</p>
-                            <p className="mt-1 text-sm text-gray-900 whitespace-pre-wrap break-words max-h-32 overflow-y-auto">
-                              {section.value || '—'}
-                            </p>
-                          </div>
-                          <button
-                            onClick={() => copyProductSection(section.label, section.value)}
-                            className="inline-flex items-center space-x-1 rounded-md border border-purple-200 px-3 py-2 text-sm font-medium text-purple-700 hover:bg-purple-50"
-                          >
-                            <Copy className="h-4 w-4" />
-                            <span>Copy</span>
-                          </button>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                  
-                  <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
-                    <div>
-                      <span className="font-medium">Created:</span> {new Date(selectedProductForModal.createdAt).toLocaleDateString()}
-                    </div>
-                    <div>
-                      <span className="font-medium">Updated:</span> {new Date(selectedProductForModal.updatedAt).toLocaleDateString()}
+                    )}

+

+                    <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">

+                      <div>

+                        <span className="font-medium">Created:</span> {new Date(selectedProductForModal.createdAt).toLocaleDateString()}

+                      </div>

+                      <div>

+                        <span className="font-medium">Updated:</span> {new Date(selectedProductForModal.updatedAt).toLocaleDateString()}

+                      </div>

                     </div>
                   </div>
                 </div>
-              </div>
-              
-              <div className="flex justify-end space-x-3 mt-6 pt-4 border-t border-gray-200">
-                <button
-                  onClick={() => setShowProductModal(false)}
-                  className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
-                >
-                  Close
-                </button>
-                <button
-                  onClick={() => {
-                    handleProductSelection(selectedProductForModal._id);
-                    toast.success(selectedProductIds.includes(selectedProductForModal._id) ? 'Product deselected' : 'Product selected');
-                    setShowProductModal(false);
-                  }}
-                  className="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"
-                >
-                  {selectedProductIds.includes(selectedProductForModal._id) ? 'Deselect' : 'Select'} Product
-                </button>
+

+                <div className="flex justify-end space-x-3 mt-6 pt-4 border-t border-gray-200">

+                  <button

+                    onClick={() => setShowProductModal(false)}

+                    className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"

+                  >

+                    Close

+                  </button>

+                  <button

+                    onClick={() => {

+                      handleProductSelection(selectedProductForModal._id);

+                      toast.success(selectedProductIds.includes(selectedProductForModal._id) ? 'Product deselected' : 'Product selected');

+                      setShowProductModal(false);

+                    }}

+                    className="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors"

+                  >

+                    {selectedProductIds.includes(selectedProductForModal._id) ? 'Deselect' : 'Select'} Product

+                  </button>

+                </div>

               </div>
             </div>
           </div>
-        </div>
-      )}
-    </div>
-  );
-}
+        )}

+      </div>

+    );

+  }

 
   function EventTester() {
-    const [type, setType] = useState<'product_view'|'add_to_cart'|'checkout_start'|'purchase'|'page_view'>('page_view');
+    const [type, setType] = useState<'product_view' | 'add_to_cart' | 'checkout_start' | 'purchase' | 'page_view'>('page_view');

     const [productId, setProductId] = useState('');
     const [orderId, setOrderId] = useState('');
     const [value, setValue] = useState('');
@@ -1102,9 +1118,9 @@ export default function AdminDashboard() {
         <div className="space-y-4">
           <div className="text-sm font-semibold text-blue-900">Send Event</div>
           <div className="grid grid-cols-2 gap-3">
-            <select 
-              value={type} 
-              onChange={(e) => setType(e.target.value as any)} 
+            <select

+              value={type}

+              onChange={(e) => setType(e.target.value as any)}

               className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
             >
               <option value="page_view">page_view</option>
@@ -1113,28 +1129,28 @@ export default function AdminDashboard() {
               <option value="checkout_start">checkout_start</option>
               <option value="purchase">purchase</option>
             </select>
-            <input 
-              placeholder="value (optional)" 
-              value={value} 
-              onChange={(e)=>setValue(e.target.value)} 
-              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+            <input

+              placeholder="value (optional)"

+              value={value}

+              onChange={(e) => setValue(e.target.value)}

+              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"

             />
-            <input 
-              placeholder="productId" 
-              value={productId} 
-              onChange={(e)=>setProductId(e.target.value)} 
-              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+            <input

+              placeholder="productId"

+              value={productId}

+              onChange={(e) => setProductId(e.target.value)}

+              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"

             />
-            <input 
-              placeholder="orderId" 
-              value={orderId} 
-              onChange={(e)=>setOrderId(e.target.value)} 
-              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+            <input

+              placeholder="orderId"

+              value={orderId}

+              onChange={(e) => setOrderId(e.target.value)}

+              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"

             />
           </div>
-          <button 
-            onClick={sendEvent} 
-            disabled={loading} 
+          <button

+            onClick={sendEvent}

+            disabled={loading}

             className="px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 disabled:opacity-50 w-fit transition-all duration-200 shadow-sm hover:shadow-md"
           >
             {loading ? 'Sending...' : 'Send'}
@@ -1143,22 +1159,22 @@ export default function AdminDashboard() {
         <div className="space-y-4">
           <div className="text-sm font-semibold text-blue-900">Record Search</div>
           <div className="grid grid-cols-2 gap-3">
-            <input 
-              placeholder="query" 
-              value={query} 
-              onChange={(e)=>setQuery(e.target.value)} 
-              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+            <input

+              placeholder="query"

+              value={query}

+              onChange={(e) => setQuery(e.target.value)}

+              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"

             />
-            <input 
-              placeholder="results count" 
-              value={results} 
-              onChange={(e)=>setResults(e.target.value)} 
-              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors" 
+            <input

+              placeholder="results count"

+              value={results}

+              onChange={(e) => setResults(e.target.value)}

+              className="px-3 py-2 border border-blue-200 rounded-lg bg-white text-gray-700 placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"

             />
           </div>
-          <button 
-            onClick={sendSearch} 
-            disabled={loading} 
+          <button

+            onClick={sendSearch}

+            disabled={loading}

             className="px-4 py-2 bg-gradient-to-r from-indigo-600 to-indigo-700 text-white rounded-lg hover:from-indigo-700 hover:to-indigo-800 disabled:opacity-50 w-fit transition-all duration-200 shadow-sm hover:shadow-md"
           >
             {loading ? 'Recording...' : 'Record'}
@@ -1295,8 +1311,8 @@ export default function AdminDashboard() {
   }, [isAuthenticated, user, router, activeTab]);
 
   const getAttributionCookies = () => {
-    if (typeof document === 'undefined') return [] as Array<{ key: string; value: string }>; 
-    const keys = ['utm_source','utm_medium','utm_campaign','utm_term','utm_content','ref','aff'];
+    if (typeof document === 'undefined') return [] as Array<{ key: string; value: string }>;

+    const keys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'ref', 'aff'];

     const cookies = document.cookie.split(';').map(c => c.trim());
     const map: Record<string, string> = {};
     for (const c of cookies) {
@@ -1465,13 +1481,13 @@ export default function AdminDashboard() {
       const token = localStorage.getItem('token');
       const page = pageToFetch || productPage;
       const limit = productPerPage;
-      
+

       // Build query params including all filters
       const params = new URLSearchParams({
         page: page.toString(),
         limit: limit.toString(),
       });
-      
+

       if (searchTerm) {
         params.append('search', searchTerm);
       }
@@ -1499,7 +1515,7 @@ export default function AdminDashboard() {
       if (productSortOrder) {
         params.append('sortOrder', productSortOrder);
       }
-      
+

       const res = await fetch(`/api/admin/products?${params.toString()}`, {
         headers: { 'Authorization': `Bearer ${token}` },
       });
@@ -1549,7 +1565,7 @@ export default function AdminDashboard() {
       const response = await fetch('/api/products/email-stats', {
         headers: { 'Authorization': `Bearer ${token}` },
       });
-      
+

       if (response.ok) {
         const data = await response.json();
         if (data.success && data.productStats) {
@@ -1582,7 +1598,7 @@ export default function AdminDashboard() {
     if (productSortBy !== column) {
       return <ArrowUpDown className="h-3 w-3 ml-1 text-gray-400" />;
     }
-    return productSortOrder === 'asc' 
+    return productSortOrder === 'asc'

       ? <ArrowUp className="h-3 w-3 ml-1 text-blue-600" />
       : <ArrowDown className="h-3 w-3 ml-1 text-blue-600" />;
   };
@@ -1658,15 +1674,15 @@ export default function AdminDashboard() {
               prev.map(p =>
                 p._id === product._id
                   ? {
-                      ...p,
-                      policyReview: {
-                        lastRunAt: data.policyReview.lastRunAt,
-                        score: data.policyReview.score,
-                        complianceRate: data.policyReview.complianceRate,
-                        summary: data.policyReview.summary,
-                        aiReview: data.policyReview.aiReview,
-                      },
-                    }
+                    ...p,

+                    policyReview: {

+                      lastRunAt: data.policyReview.lastRunAt,

+                      score: data.policyReview.score,

+                      complianceRate: data.policyReview.complianceRate,

+                      summary: data.policyReview.summary,

+                      aiReview: data.policyReview.aiReview,

+                    },

+                  }

                   : p
               )
             );
@@ -1711,15 +1727,15 @@ export default function AdminDashboard() {
         prev.map(p =>
           p._id === product._id
             ? {
-                ...p,
-                policyReview: {
-                  lastRunAt: persistedPolicyReview.lastRunAt,
-                  score: persistedPolicyReview.score,
-                  complianceRate: persistedPolicyReview.complianceRate,
-                  summary: persistedPolicyReview.summary,
-                  aiReview: persistedPolicyReview.aiReview,
-                },
-              }
+              ...p,

+              policyReview: {

+                lastRunAt: persistedPolicyReview.lastRunAt,

+                score: persistedPolicyReview.score,

+                complianceRate: persistedPolicyReview.complianceRate,

+                summary: persistedPolicyReview.summary,

+                aiReview: persistedPolicyReview.aiReview,

+              },

+            }

             : p
         )
       );
@@ -1780,10 +1796,10 @@ export default function AdminDashboard() {
         },
         body: JSON.stringify({ reviewSummary: review }),
       });
-      
+

       console.log('[Frontend] Response status:', response.status);
       console.log('[Frontend] Response ok:', response.ok);
-      
+

       let data;
       try {
         const text = await response.text();
@@ -1794,9 +1810,9 @@ export default function AdminDashboard() {
         console.error('[Frontend] Failed to parse response:', parseError);
         throw new Error('Failed to parse server response');
       }
-      
+

       console.log('[Frontend] Parsed data:', data);
-      
+

       if (!response.ok) {
         console.error('[Frontend] Response not ok. Error:', data.error);
         throw new Error(data.error || 'Failed to generate improvements');
@@ -1804,7 +1820,7 @@ export default function AdminDashboard() {
 
       const improvements: ProductImprovementResult | undefined = data?.improvements;
       console.log('[Frontend] Improvements received:', !!improvements);
-      
+

       const selection = {
         title: !!improvements?.title?.suggestion,
         description: !!improvements?.description?.suggestion,
@@ -1998,11 +2014,10 @@ export default function AdminDashboard() {
             type="button"
             onClick={() => goToProductPage(productPage - 1)}
             disabled={productPage === 1 || loading}
-            className={`px-4 py-2.5 text-sm font-medium rounded-xl border-2 transition-all ${
-              productPage === 1 || loading
-                ? 'text-gray-400 border-gray-200 bg-gray-50 cursor-not-allowed'
-                : 'text-gray-700 border-gray-300 bg-white hover:bg-blue-50 hover:border-blue-400 hover:text-blue-700 shadow-sm hover:shadow-md transform hover:-translate-y-0.5'
-            }`}
+            className={`px-4 py-2.5 text-sm font-medium rounded-xl border-2 transition-all ${productPage === 1 || loading

+              ? 'text-gray-400 border-gray-200 bg-gray-50 cursor-not-allowed'

+              : 'text-gray-700 border-gray-300 bg-white hover:bg-blue-50 hover:border-blue-400 hover:text-blue-700 shadow-sm hover:shadow-md transform hover:-translate-y-0.5'

+              }`}

           >
             <span className="flex items-center space-x-1.5">
               <ChevronLeft className="h-4 w-4" />
@@ -2016,11 +2031,10 @@ export default function AdminDashboard() {
             type="button"
             onClick={() => goToProductPage(productPage + 1)}
             disabled={productPage === totalPages || loading}
-            className={`px-4 py-2.5 text-sm font-medium rounded-xl border-2 transition-all ${
-              productPage === totalPages || loading
-                ? 'text-gray-400 border-gray-200 bg-gray-50 cursor-not-allowed'
-                : 'text-gray-700 border-gray-300 bg-white hover:bg-blue-50 hover:border-blue-400 hover:text-blue-700 shadow-sm hover:shadow-md transform hover:-translate-y-0.5'
-            }`}
+            className={`px-4 py-2.5 text-sm font-medium rounded-xl border-2 transition-all ${productPage === totalPages || loading

+              ? 'text-gray-400 border-gray-200 bg-gray-50 cursor-not-allowed'

+              : 'text-gray-700 border-gray-300 bg-white hover:bg-blue-50 hover:border-blue-400 hover:text-blue-700 shadow-sm hover:shadow-md transform hover:-translate-y-0.5'

+              }`}

           >
             <span className="flex items-center space-x-1.5">
               <span>Next</span>
@@ -2204,7 +2218,7 @@ export default function AdminDashboard() {
       toast.success(
         `Images organized! ${data.stats?.uploaded || 0} uploaded to Cloudinary folder: ${data.product?.folder || ''}`
       );
-      
+

       // Refresh products list
       fetchProducts();
     } catch (error) {
@@ -2283,7 +2297,7 @@ export default function AdminDashboard() {
       toast.error('No alt texts available. Generate them first!');
       return;
     }
-    const altTextsString = altTexts.map((text: string, index: number) => 
+    const altTextsString = altTexts.map((text: string, index: number) =>

       `Image ${index + 1}: ${text}`
     ).join('\n');
     copyToClipboard(altTextsString, 'Image Alt Texts');
@@ -2313,7 +2327,7 @@ export default function AdminDashboard() {
       toast.success(
         `Generated ${data.altTexts?.length || 0} unique alt texts for product images!`
       );
-      
+

       // Refresh products list
       fetchProducts();
     } catch (error) {
@@ -2347,8 +2361,8 @@ export default function AdminDashboard() {
 
   // Handle product selection for export
   const handleProductSelection = (productId: string) => {
-    setSelectedProductIds(prev => 
-      prev.includes(productId) 
+    setSelectedProductIds(prev =>

+      prev.includes(productId)

         ? prev.filter(id => id !== productId)
         : [...prev, productId]
     );
@@ -2588,6 +2602,55 @@ export default function AdminDashboard() {
     }
   };
 
+  const handleExportCsv = async () => {

+    try {

+      const token = localStorage.getItem('token');

+      if (!token) {

+        toast.error('Please login to export data');

+        router.push('/login');

+        return;

+      }

+

+      const response = await fetch('/api/admin/products/export-csv', {

+        headers: {

+          'Authorization': `Bearer ${token}`,

+        },

+      });

+

+      if (!response.ok) {

+        if (response.status === 401) {

+          localStorage.removeItem('token');

+          router.push('/login');

+          toast.error('Session expired. Please login again.');

+          return;

+        }

+        const errorData = await response.json().catch(() => ({}));

+        throw new Error(errorData.error || 'Failed to export CSV');

+      }

+

+      // Get the blob content

+      const blob = await response.blob();

+      const url = window.URL.createObjectURL(blob);

+

+      // Create download link

+      const a = document.createElement('a');

+      a.href = url;

+      a.download = `products-export-${new Date().toISOString().split('T')[0]}.csv`;

+      a.style.display = 'none';

+      document.body.appendChild(a);

+      a.click();

+

+      // Cleanup

+      window.URL.revokeObjectURL(url);

+      document.body.removeChild(a);

+

+      toast.success('Products exported successfully');

+    } catch (error) {

+      console.error('Export CSV error:', error);

+      toast.error(error instanceof Error ? error.message : 'Failed to export CSV');

+    }

+  };

+

   const handleDownloadInvoice = async (orderId: string) => {
     try {
       const token = localStorage.getItem('token');
@@ -2604,11 +2667,11 @@ export default function AdminDashboard() {
 
       // Get the HTML content
       const htmlContent = await response.text();
-      
+

       // Create a blob with the HTML content
       const blob = new Blob([htmlContent], { type: 'text/html' });
       const url = window.URL.createObjectURL(blob);
-      
+

       // Create download link
       const a = document.createElement('a');
       a.href = url;
@@ -2616,11 +2679,11 @@ export default function AdminDashboard() {
       a.style.display = 'none';
       document.body.appendChild(a);
       a.click();
-      
+

       // Cleanup
       window.URL.revokeObjectURL(url);
       document.body.removeChild(a);
-      
+

       toast.success('Invoice downloaded successfully');
     } catch (error) {
       console.error('Download invoice error:', error);
@@ -2680,7 +2743,7 @@ export default function AdminDashboard() {
   // Filter users
   const filteredUsers = users.filter(user => {
     const matchesSearch = user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-                         user.email.toLowerCase().includes(searchTerm.toLowerCase());
+      user.email.toLowerCase().includes(searchTerm.toLowerCase());

     const matchesRole = !selectedRole || user.role?.name === selectedRole;
     return matchesSearch && matchesRole;
   });
@@ -2757,8 +2820,8 @@ export default function AdminDashboard() {
   const selectedProductTagsText = selectedProductForModal?.tags?.join(', ') || '';
   const selectedProductSpecsText = selectedProductForModal?.specifications
     ? Object.entries(selectedProductForModal.specifications)
-        .map(([key, value]) => `${key}: ${value}`)
-        .join('\n')
+      .map(([key, value]) => `${key}: ${value}`)

+      .join('\n')

     : '';
 
   if (!isAuthenticated || !user?.permissions?.includes('system:settings')) {
@@ -2804,11 +2867,10 @@ export default function AdminDashboard() {
           <aside
             id="admin-sidebar"
             aria-label="Admin navigation"
-            className={`md:w-64 lg:w-72 xl:w-80 ${
-              mobileSidebarOpen
-                ? 'fixed inset-y-4 left-4 right-4 z-40 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-2xl border border-gray-200 bg-white p-4 shadow-2xl md:relative md:block md:h-full md:max-h-none md:p-0 md:border-0 md:shadow-none'
-                : 'hidden md:block md:sticky md:top-6'
-            }`}
+            className={`md:w-64 lg:w-72 xl:w-80 ${mobileSidebarOpen

+              ? 'fixed inset-y-4 left-4 right-4 z-40 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-2xl border border-gray-200 bg-white p-4 shadow-2xl md:relative md:block md:h-full md:max-h-none md:p-0 md:border-0 md:shadow-none'

+              : 'hidden md:block md:sticky md:top-6'

+              }`}

           >
             <div className={`space-y-6 ${mobileSidebarOpen ? '' : 'md:sticky md:top-6'}`}>
               {mobileSidebarOpen && (
@@ -2857,11 +2919,10 @@ export default function AdminDashboard() {
                     return (
                       <div key={tab.id} className="space-y-1.5">
                         <div
-                          className={`flex items-center gap-2 rounded-xl px-3 py-3 text-sm transition-all border ${
-                            active
-                              ? 'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200 text-blue-700 shadow-sm'
-                              : 'border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50'
-                          }`}
+                          className={`flex items-center gap-2 rounded-xl px-3 py-3 text-sm transition-all border ${active

+                            ? 'bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200 text-blue-700 shadow-sm'

+                            : 'border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50'

+                            }`}

                         >
                           <button
                             type="button"
@@ -2893,9 +2954,8 @@ export default function AdminDashboard() {
                               aria-controls={`sidebar-section-${tab.id}`}
                             >
                               <ChevronDown
-                                className={`h-4 w-4 transition-transform ${
-                                  childrenVisible ? 'rotate-180 text-blue-600' : 'text-gray-400'
-                                }`}
+                                className={`h-4 w-4 transition-transform ${childrenVisible ? 'rotate-180 text-blue-600' : 'text-gray-400'

+                                  }`}

                               />
                             </button>
                           )}
@@ -2906,9 +2966,8 @@ export default function AdminDashboard() {
                             role="region"
                             aria-label={`${tab.label} submenu`}
                             aria-hidden={!childrenVisible}
-                            className={`ml-9 flex flex-col gap-1 border-l border-gray-100 pl-3 transition-all duration-200 ${
-                              childrenVisible ? 'mt-1 mb-2 opacity-100' : 'max-h-0 overflow-hidden opacity-0'
-                            }`}
+                            className={`ml-9 flex flex-col gap-1 border-l border-gray-100 pl-3 transition-all duration-200 ${childrenVisible ? 'mt-1 mb-2 opacity-100' : 'max-h-0 overflow-hidden opacity-0'

+                              }`}

                           >
                             {tab.children.map((child) => {
                               const childActive = activeTab === child.id;
@@ -2918,11 +2977,10 @@ export default function AdminDashboard() {
                                   key={child.id}
                                   onClick={() => handleTabChange(child.id)}
                                   aria-current={childActive ? 'page' : undefined}
-                                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
-                                    childActive
-                                      ? 'bg-blue-600/10 text-blue-700'
-                                      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
-                                  }`}
+                                  className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${childActive

+                                    ? 'bg-blue-600/10 text-blue-700'

+                                    : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'

+                                    }`}

                                 >
                                   {child.icon && (
                                     <child.icon
@@ -2988,854 +3046,852 @@ export default function AdminDashboard() {
           <div className={`flex-1 min-w-0 ${mobileSidebarOpen ? 'lg:pl-0' : ''}`}>
             <div className="space-y-8">
 
-        {/* Sourcing Tab */}
-        {activeTab === 'sourcing' && (
-          <div className="space-y-6">
-            <SourcingPanel />
-          </div>
-        )}
-
-        {/* Overview Tab */}
-        {activeTab === 'overview' && (
-          <div className="space-y-6">
-            {/* Controls for metrics */}
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="text-sm text-gray-600">Metrics Range:</span>
-                <div className="inline-flex rounded-md border bg-white shadow-sm overflow-hidden">
-                  {[7, 30, 90].map((d) => (
-                    <button
-                      key={d}
-                      onClick={() => { setMetricsDays(d as 7 | 30 | 90); fetchMetrics(d as 7 | 30 | 90); }}
-                      className={`px-3 py-1.5 text-sm ${metricsDays === d ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-50'}`}
-                    >
-                      {d}d
-                    </button>
-                  ))}
-        </div>
-
-        
-              </div>
-              <button onClick={() => fetchMetrics(metricsDays)} className="flex items-center gap-2 text-sm px-3 py-1.5 border rounded-md">
-                <RefreshCw className="h-4 w-4" /> Refresh
-              </button>
-            </div>
-
-            {/* New KPI Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              <div className="bg-white p-6 rounded-lg shadow-sm border">
-                <p className="text-sm font-medium text-gray-600">Total Revenue ({metricsDays}d)</p>
-                <p className="text-3xl font-bold text-green-600 mt-2">
-                  ${metrics?.kpis.totalRevenue?.toFixed(2) || '0.00'}
-                </p>
-              </div>
-              <div className="bg-white p-6 rounded-lg shadow-sm border">
-                <p className="text-sm font-medium text-gray-600">Total Orders ({metricsDays}d)</p>
-                <p className="text-3xl font-bold text-blue-600 mt-2">
-                  {metrics?.kpis.totalOrders ?? 0}
-                </p>
-              </div>
-              <div className="bg-white p-6 rounded-lg shadow-sm border">
-                <p className="text-sm font-medium text-gray-600">Average Order Value</p>
-                <p className="text-3xl font-bold text-purple-600 mt-2">
-                  ${metrics?.kpis.avgOrderValue?.toFixed(2) || '0.00'}
-                </p>
-              </div>
-            </div>
-
-            {/* Inline SVG Revenue Chart */}
-            <div className="bg-white p-6 rounded-lg shadow-sm border">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Revenue (last {metricsDays} days)</h3>
-              {metricsLoading ? (
-                <p className="text-gray-500">Loading metrics...</p>
-              ) : chartPoints.length ? (
-                <div className="overflow-x-auto">
-                  <svg width={640} height={180} className="min-w-[640px]">
-                    {/* Axes */}
-                    <line x1="20" y1="160" x2="620" y2="160" stroke="#e5e7eb" />
-                    <line x1="20" y1="20" x2="20" y2="160" stroke="#e5e7eb" />
-                    {/* Path */}
-                    <polyline
-                      fill="none"
-                      stroke="#3b82f6"
-                      strokeWidth="2"
-                      points={chartPoints.map(p => `${p.x},${p.y}`).join(' ')}
-                    />
-                    {/* Points */}
-                    {chartPoints.map((p, i) => (
-                      <circle key={i} cx={p.x} cy={p.y} r={3} fill="#2563eb" />
-                    ))}
-                  </svg>
+              {/* Sourcing Tab */}

+              {activeTab === 'sourcing' && (

+                <div className="space-y-6">

+                  <SourcingPanel />

                 </div>
-              ) : (
-                <p className="text-gray-500">No data</p>
               )}
-            </div>
 
-            {/* Top Products */}
-            <div className="bg-white p-6 rounded-lg shadow-sm border">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Top Products (by revenue)</h3>
-              {metrics?.topProducts?.length ? (
-                <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-                  {metrics.topProducts.map((p) => (
-                    <div key={p.productId} className="flex items-center gap-4 border rounded-lg p-3">
-                      <img src={p.image || '/vercel.svg'} alt={p.name || 'Product'} className="w-14 h-14 rounded object-cover border" />
-                      <div className="flex-1">
-                        <div className="font-medium text-gray-900 truncate">{p.name || p.productId}</div>
-                        <div className="text-sm text-gray-600">${p.revenue.toFixed(2)} · {p.units} units</div>
+              {/* Overview Tab */}

+              {activeTab === 'overview' && (

+                <div className="space-y-6">

+                  {/* Controls for metrics */}

+                  <div className="flex items-center justify-between">

+                    <div className="flex items-center gap-2">

+                      <span className="text-sm text-gray-600">Metrics Range:</span>

+                      <div className="inline-flex rounded-md border bg-white shadow-sm overflow-hidden">

+                        {[7, 30, 90].map((d) => (

+                          <button

+                            key={d}

+                            onClick={() => { setMetricsDays(d as 7 | 30 | 90); fetchMetrics(d as 7 | 30 | 90); }}

+                            className={`px-3 py-1.5 text-sm ${metricsDays === d ? 'bg-blue-600 text-white' : 'text-gray-700 hover:bg-gray-50'}`}

+                          >

+                            {d}d

+                          </button>

+                        ))}

                       </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                <p className="text-gray-500">No top products yet.</p>
-              )}
-            </div>
 
-            {/* Stats Grid */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              <div onClick={goToUsers} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-blue-100 rounded-lg">
-                    <Users className="h-6 w-6 text-blue-600" />
+

+                    </div>

+                    <button onClick={() => fetchMetrics(metricsDays)} className="flex items-center gap-2 text-sm px-3 py-1.5 border rounded-md">

+                      <RefreshCw className="h-4 w-4" /> Refresh

+                    </button>

                   </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Total Users</p>
-                    <p className="text-2xl font-bold text-gray-900">{users.length}</p>
+

+                  {/* New KPI Cards */}

+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">

+                    <div className="bg-white p-6 rounded-lg shadow-sm border">

+                      <p className="text-sm font-medium text-gray-600">Total Revenue ({metricsDays}d)</p>

+                      <p className="text-3xl font-bold text-green-600 mt-2">

+                        ${metrics?.kpis.totalRevenue?.toFixed(2) || '0.00'}

+                      </p>

+                    </div>

+                    <div className="bg-white p-6 rounded-lg shadow-sm border">

+                      <p className="text-sm font-medium text-gray-600">Total Orders ({metricsDays}d)</p>

+                      <p className="text-3xl font-bold text-blue-600 mt-2">

+                        {metrics?.kpis.totalOrders ?? 0}

+                      </p>

+                    </div>

+                    <div className="bg-white p-6 rounded-lg shadow-sm border">

+                      <p className="text-sm font-medium text-gray-600">Average Order Value</p>

+                      <p className="text-3xl font-bold text-purple-600 mt-2">

+                        ${metrics?.kpis.avgOrderValue?.toFixed(2) || '0.00'}

+                      </p>

+                    </div>

                   </div>
-                </div>
-              </div>
-              <div onClick={goToUsers} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-green-100 rounded-lg">
-                    <UserCheck className="h-6 w-6 text-green-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Active Users</p>
-                    <p className="text-2xl font-bold text-gray-900">
-                      {users.filter(u => u.isActive).length}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div onClick={goToRoles} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-purple-100 rounded-lg">
-                    <Shield className="h-6 w-6 text-purple-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Roles</p>
-                    <p className="text-2xl font-bold text-gray-900">{roles.length}</p>
-                  </div>
-                </div>
-              </div>
-              <div onClick={goToProducts} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-orange-100 rounded-lg">
-                    <Package className="h-6 w-6 text-orange-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Total Products</p>
-                    <p className="text-2xl font-bold text-gray-900">{products.length}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
 
-            {/* Order Statistics */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6">
-              <div onClick={() => goToOrders()} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-blue-100 rounded-lg">
-                    <ShoppingCart className="h-6 w-6 text-blue-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Total Orders</p>
-                    <p className="text-2xl font-bold text-gray-900">{orders.length}</p>
-                  </div>
-                </div>
-              </div>
-              <div onClick={() => goToOrders('pending')} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-yellow-100 rounded-lg">
-                    <Clock className="h-6 w-6 text-yellow-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Pending</p>
-                    <p className="text-2xl font-bold text-gray-900">
-                      {orders.filter(o => o.status === 'pending').length}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div onClick={() => goToOrders('processing')} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-blue-100 rounded-lg">
-                    <Truck className="h-6 w-6 text-blue-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Processing</p>
-                    <p className="text-2xl font-bold text-gray-900">
-                      {orders.filter(o => o.status === 'processing').length}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div onClick={() => goToOrders('delivered')} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-green-100 rounded-lg">
-                    <CheckCircle className="h-6 w-6 text-green-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Delivered</p>
-                    <p className="text-2xl font-bold text-gray-900">
-                      {orders.filter(o => o.status === 'delivered').length}
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div onClick={() => goToOrders('cancelled')} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-                <div className="flex items-center">
-                  <div className="p-2 bg-red-100 rounded-lg">
-                    <XCircle className="h-6 w-6 text-red-600" />
-                  </div>
-                  <div className="ml-4">
-                    <p className="text-sm font-medium text-gray-600">Cancelled</p>
-                    <p className="text-2xl font-bold text-gray-900">
-                      {orders.filter(o => o.status === 'cancelled').length}
-                    </p>
+                  {/* Inline SVG Revenue Chart */}

+                  <div className="bg-white p-6 rounded-lg shadow-sm border">

+                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Revenue (last {metricsDays} days)</h3>

+                    {metricsLoading ? (

+                      <p className="text-gray-500">Loading metrics...</p>

+                    ) : chartPoints.length ? (

+                      <div className="overflow-x-auto">

+                        <svg width={640} height={180} className="min-w-[640px]">

+                          {/* Axes */}

+                          <line x1="20" y1="160" x2="620" y2="160" stroke="#e5e7eb" />

+                          <line x1="20" y1="20" x2="20" y2="160" stroke="#e5e7eb" />

+                          {/* Path */}

+                          <polyline

+                            fill="none"

+                            stroke="#3b82f6"

+                            strokeWidth="2"

+                            points={chartPoints.map(p => `${p.x},${p.y}`).join(' ')}

+                          />

+                          {/* Points */}

+                          {chartPoints.map((p, i) => (

+                            <circle key={i} cx={p.x} cy={p.y} r={3} fill="#2563eb" />

+                          ))}

+                        </svg>

+                      </div>

+                    ) : (

+                      <p className="text-gray-500">No data</p>

+                    )}

                   </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Revenue Summary */}
-            <div onClick={() => goToOrders()} className="bg-white p-6 rounded-lg shadow-sm border cursor-pointer hover:border-blue-300 hover:shadow transition-colors">
-              <h3 className="text-lg font-semibold text-gray-900 mb-4">Revenue Summary</h3>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                <div className="text-center">
-                  <p className="text-sm font-medium text-gray-600">Total Revenue</p>
-                  <p className="text-3xl font-bold text-green-600">
-                    ${orders.reduce((sum, order) => sum + order.total, 0).toFixed(2)}
-                  </p>
-                </div>
-                <div className="text-center">
-                  <p className="text-sm font-medium text-gray-600">Average Order Value</p>
-                  <p className="text-3xl font-bold text-blue-600">
-                    ${orders.length > 0 ? (orders.reduce((sum, order) => sum + order.total, 0) / orders.length).toFixed(2) : '0.00'}
-                  </p>
-                </div>
-                <div className="text-center">
-                  <p className="text-sm font-medium text-gray-600">Orders This Month</p>
-                  <p className="text-3xl font-bold text-purple-600">
-                    {orders.filter(order => {
-                      const orderDate = new Date(order.createdAt);
-                      const now = new Date();
-                      return orderDate.getMonth() === now.getMonth() && orderDate.getFullYear() === now.getFullYear();
-                    }).length}
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
 
-        {/* Performance Tab */}
-        {(activeTab as any) === 'performance' && (
-          <div className="space-y-8">
-            {/* Image Optimization */}
-            <div className="bg-white rounded-lg shadow-sm border border-blue-100">
-              <div className="p-6 border-b border-blue-100 bg-gradient-to-r from-blue-50/40 to-indigo-50/30">
-                <h2 className="text-xl font-semibold text-blue-900">Image Optimization</h2>
-                <p className="text-blue-700/80 mt-1 text-sm">Using Next/Image with optional CDN loader.</p>
-              </div>
-              <div className="p-6 grid grid-cols-1 md:grid-cols-2 gap-6 text-sm">
-                <div className="space-y-2">
-                  <div className="flex items-center justify-between p-3 border border-blue-100 rounded-lg bg-blue-50/20">
-                    <span className="text-blue-900">CDN Origin</span>
-                    <code className="text-blue-800">{process.env.NEXT_PUBLIC_IMAGE_CDN || 'Not set'}</code>
+                  {/* Top Products */}

+                  <div className="bg-white p-6 rounded-lg shadow-sm border">

+                    <h3 className="text-lg font-semibold text-gray-900 mb-4">Top Products (by revenue)</h3>

+                    {metrics?.topProducts?.length ? (

+                      <div className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

+                        {metrics.topProducts.map((p) => (

+                          <div key={p.productId} className="flex items-center gap-4 border rounded-lg p-3">

+                            <img src={p.image || '/vercel.svg'} alt={p.name || 'Product'} className="w-14 h-14 rounded object-cover border" />

+                            <div className="flex-1">

+                              <div className="font-medium text-gray-900 truncate">{p.name || p.productId}</div>

+                              <div className="text-sm text-gray-600">${p.revenue.toFixed(2)} · {p.units} units</div>

+                            </div>

+                          </div>

+                        ))}

+                      </div>

+                    ) : (

+                      <p className="text-gray-500">No top products yet.</p>

+                    )}

                   </div>
-                  <p className="text-gray-700">Set <code className="px-1 py-0.5 bg-blue-50 border border-blue-100 rounded">NEXT_PUBLIC_IMAGE_CDN</code> to proxy images via your CDN.</p>
-                </div>
-                <div className="space-y-2">
-                  <a className="inline-block px-4 py-2 border border-blue-200 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100" href="/categories/men" target="_blank">Open Category (optimized hero)</a>
-                  <a className="ml-3 inline-block px-4 py-2 border border-blue-200 b