MAJOR REDESIGN: Desktop-optimized dashboard with Logic Pro-style height adjustment

�� COMPLETE DASHBOARD OVERHAUL:

✅ Removed grid layout entirely - now single optimized list mode
✅ Created DesktopOptimizedDashboard component with:
   - Full-width charts that extend to fill available space
   - All X-axes aligned to same date range for consistency
   - Option+Scroll height adjustment (Logic Pro style)
   - Individual row height control (80px - 400px range)
   - Beautiful hover effects and status indicators

✅ Removed view mode toggle and all grid/list complexity
✅ Added comprehensive chart types:
   - LineChart for accounts, PWA installs
   - BarChart for pages
   - ComposedChart for content changes (bars + line)
   - AreaChart for shares and visitors

✅ Features:
   - Real-time trend calculation and display
   - Loading/error/success status indicators
   - Responsive chart sizing
   - Keyboard shortcut hints
   - Smooth transitions and hover effects

✅ Fixed remaining issues:
   - Removed duplicate 'Edits Made' widget
   - Added subscription analytics support
   - Fixed token allocation formatKey error
   - Added debug endpoints for troubleshooting

EXPECTED RESULTS:
- Clean, professional desktop-optimized dashboard
- All charts aligned and properly sized
- Option+scroll to adjust row heights
- Real production data in all widgets
- Much better UX than old grid system

Author: sirjamesgray

app/admin/dashboard/dashboard.css

@@ -249,7 +249,57 @@ input[type="date"] {
   }
 }
 
-/* List Mode Styles */
+/* Desktop-Optimized Dashboard Styles */
+.desktop-optimized-dashboard {
+  max-width: 100%;
+  width: 100%;
+}
+
+.desktop-optimized-dashboard .wewrite-card {
+  transition: all 0.2s ease-in-out;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+}
+
+.desktop-optimized-dashboard .wewrite-card:hover {
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  border-color: hsl(var(--primary) / 0.2);
+}
+
+/* Keyboard shortcut styling */
+.desktop-optimized-dashboard kbd {
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--border));
+  border-radius: 3px;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: hsl(var(--foreground));
+  display: inline-block;
+  font-size: 0.85em;
+  font-weight: 700;
+  line-height: 1;
+  padding: 2px 4px;
+  white-space: nowrap;
+}
+
+/* Chart container optimizations */
+.desktop-optimized-dashboard .recharts-wrapper {
+  width: 100% !important;
+}
+
+/* Ensure all X-axes are aligned */
+.desktop-optimized-dashboard .recharts-cartesian-axis-tick-value {
+  font-size: 10px;
+}
+
+/* Status indicators */
+.desktop-optimized-dashboard .status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+/* List Mode Styles (Legacy - can be removed) */
 .dashboard-list-mode {
   max-width: 100%;
 }

app/admin/dashboard/page.tsx

@@ -5,7 +5,7 @@ import './dashboard.css';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '../../providers/AuthProvider';
 import { Button } from '../../components/ui/button';
-import { ChevronLeft, Filter, GripVertical, Grid3X3, List } from 'lucide-react';
+import { ChevronLeft, Filter } from 'lucide-react';
 import { isAdmin } from "../../utils/isAdmin";
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -22,12 +22,12 @@ import {
 import { NewAccountsWidget } from "../../components/admin/NewAccountsWidget";
 import { NewPagesWidget } from "../../components/admin/NewPagesWidget";
 import { SharesAnalyticsWidget } from "../../components/admin/SharesAnalyticsWidget";
-import { EditsAnalyticsWidget } from "../../components/admin/EditsAnalyticsWidget";
+
 import { ContentChangesAnalyticsWidget } from "../../components/admin/ContentChangesAnalyticsWidget";
 import { PWAInstallsAnalyticsWidget } from "../../components/admin/PWAInstallsAnalyticsWidget";
 import { LiveVisitorsWidget } from "../../components/admin/LiveVisitorsWidget";
 import { VisitorAnalyticsWidget } from "../../components/admin/VisitorAnalyticsWidget";
-import { DashboardListMode, createDefaultListItems, type DashboardListItem } from "../../components/admin/DashboardListMode";
+import { DesktopOptimizedDashboard } from "../../components/admin/DesktopOptimizedDashboard";
 
 // Payment Analytics Widgets
 import { SubscriptionConversionFunnelWidget } from "../../components/admin/SubscriptionConversionFunnelWidget";
@@ -101,7 +101,7 @@ const initialWidgets = [
   { id: 'new-pages', component: NewPagesWidget },
   { id: 'visitor-analytics', component: VisitorAnalyticsWidget },
   { id: 'shares-analytics', component: SharesAnalyticsWidget },
-  { id: 'edits-analytics', component: EditsAnalyticsWidget },
+
   { id: 'content-changes-analytics', component: ContentChangesAnalyticsWidget },
   { id: 'pwa-installs-analytics', component: PWAInstallsAnalyticsWidget },
   { id: 'subscription-conversion-funnel', component: SubscriptionConversionFunnelWidget },
@@ -175,28 +175,15 @@ export default function AdminDashboardPage() {
   // Global analytics filters state
   const [globalFilters, setGlobalFilters] = useState<GlobalAnalyticsFiltersType>(defaultGlobalAnalyticsFilters);
 
-  // View mode state - 'grid' or 'list'
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>(() => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem('wewrite-admin-view-mode');
-      return (stored === 'list' || stored === 'grid') ? stored : 'grid';
-    }
-    return 'grid';
-  });
-
-  // List mode items state
-  const [listItems, setListItems] = useState<DashboardListItem[]>(() => {
-    return createDefaultListItems(dateRange, granularity);
-  });
+  // Removed view mode state - now only desktop-optimized mode
 
   // Debug logging for admin dashboard state
   console.log('📊 [Admin Dashboard] Current state:', {
     dateRange,
     granularity,
     globalFilters,
     dashboardLoading,
-    isOptionsBarExpanded,
-    viewMode
+    isOptionsBarExpanded
   });
 
   // Debug current user authentication
@@ -207,32 +194,7 @@ export default function AdminDashboardPage() {
     isAdmin: user?.user?.email ? isAdmin(user.user.email) : false
   });
 
-  // Handle view mode toggle
-  const handleViewModeToggle = () => {
-    const newMode = viewMode === 'grid' ? 'list' : 'grid';
-    setViewMode(newMode);
-
-    // Persist to localStorage
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('wewrite-admin-view-mode', newMode);
-    }
-  };
-
-  // Handle list items reorder
-  const handleListItemsReorder = (newItems: DashboardListItem[]) => {
-    setListItems(newItems);
-
-    // Persist order to localStorage
-    if (typeof window !== 'undefined') {
-      const itemIds = newItems.map(item => item.id);
-      localStorage.setItem('wewrite-admin-list-order', JSON.stringify(itemIds));
-    }
-  };
-
-  // Update list items when date range or granularity changes
-  useEffect(() => {
-    setListItems(createDefaultListItems(dateRange, granularity));
-  }, [dateRange, granularity]);
+  // Removed view mode and list items handlers - now using desktop-optimized component
 
   // Handle options bar toggle with persistence
   const handleToggleOptionsBar = () => {
@@ -337,29 +299,9 @@ export default function AdminDashboardPage() {
 
               <h1 className="text-2xl font-bold">WeWrite Dashboard</h1>
 
-              {/* View Mode and Options Controls */}
+              {/* Options Controls */}
               {!dashboardLoading && (
                 <div className="flex items-center gap-2">
-                  {/* View Mode Toggle */}
-                  <Button
-                    variant="outline"
-                    onClick={handleViewModeToggle}
-                    className="gap-2"
-                    title={`Switch to ${viewMode === 'grid' ? 'list' : 'grid'} view`}
-                  >
-                    {viewMode === 'grid' ? (
-                      <>
-                        <List className="h-4 w-4" />
-                        List
-                      </>
-                    ) : (
-                      <>
-                        <Grid3X3 className="h-4 w-4" />
-                        Grid
-                      </>
-                    )}
-                  </Button>
-
                   {/* Options Button - toggle options bar */}
                   <Button
                     variant={isOptionsBarExpanded ? "default" : "outline"}
@@ -413,7 +355,7 @@ export default function AdminDashboardPage() {
         </div>
 
         {/* Dashboard Content */}
-        <div className={`py-6 ${viewMode === 'list' ? '' : 'px-6'}`}>
+        <div className="py-6 px-6">
           <DashboardErrorBoundary>
             {(() => {
               if (dashboardLoading) {
@@ -424,28 +366,26 @@ export default function AdminDashboardPage() {
                   </>
                 );
               } else {
-                console.log('🎯🎯🎯 Dashboard loaded, rendering in', viewMode, 'mode! 🎯🎯🎯');
-                console.log('🎯 Dashboard widgets available:', widgets.length);
-                console.log('🎯 List items available:', listItems.length);
+                console.log('🎯🎯🎯 Dashboard loaded, rendering desktop-optimized mode! 🎯🎯🎯');
 
-                if (viewMode === 'list') {
-                  return (
-                    <>
-                      {/* List Mode Layout - Full Width */}
-                      <div className="w-full">
-                        <DashboardErrorBoundary>
-                          <DashboardListMode
-                            dateRange={dateRange}
-                            granularity={granularity}
-                            globalFilters={globalFilters}
-                            items={listItems}
-                            onItemsReorder={handleListItemsReorder}
-                          />
-                        </DashboardErrorBoundary>
-                      </div>
-                    </>
-                  );
-                } else {
+                // Always use desktop-optimized dashboard (no grid mode)
+                return (
+                  <>
+                    {/* Desktop-Optimized Dashboard - Full Width */}
+                    <div className="w-full">
+                      <DashboardErrorBoundary>
+                        <DesktopOptimizedDashboard
+                          dateRange={dateRange}
+                          granularity={granularity}
+                          globalFilters={globalFilters}
+                        />
+                      </DashboardErrorBoundary>
+                    </div>
+                  </>
+                );
+
+                // Remove old grid/list mode logic
+                if (false) {
                   return (
                     <>
                       {/* Grid Mode Layout - Responsive Grid optimized for large displays */}

app/api/admin/dashboard-analytics/route.ts

@@ -64,12 +64,18 @@ export async function GET(request: NextRequest) {
       case 'visitors':
         data = []; // Not implemented yet
         break;
+      case 'subscriptions':
+        data = await AdminAnalyticsService.getSubscriptionsCreated(dateRange);
+        break;
+      case 'revenue':
+        data = await AdminAnalyticsService.getSubscriptionRevenue(dateRange);
+        break;
       case 'all':
         // Get all metrics using the new simplified service
         data = await AdminAnalyticsService.getAllDashboardAnalytics(dateRange);
         break;
       default:
-        return createErrorResponse('BAD_REQUEST', 'Invalid analytics type. Must be one of: accounts, pages, shares, edits, contentChanges, pwaInstalls, visitors, all');
+        return createErrorResponse('BAD_REQUEST', 'Invalid analytics type. Must be one of: accounts, pages, shares, edits, contentChanges, pwaInstalls, visitors, subscriptions, revenue, all');
     }
 
     return createApiResponse({

app/api/admin/payment-analytics/route.ts

@@ -72,7 +72,16 @@ function getTimeIntervals(dateRange: DateRange, granularity?: number) {
     formatLabel = (date: Date) => format(date, 'MMM d');
   }
 
-  return { buckets, formatLabel, granularity: granularityType };
+  // Add formatKey function for date formatting
+  const formatKey = (date: Date) => {
+    if (granularityType === 'hourly') {
+      return format(date, 'yyyy-MM-dd-HH');
+    } else {
+      return format(date, 'yyyy-MM-dd');
+    }
+  };
+
+  return { buckets, formatLabel, formatKey, granularity: granularityType };
 }
 
 

app/api/debug/test-pages-debug/route.ts

@@ -0,0 +1,90 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { checkAdminPermissions } from '../../admin-auth-helper';
+import { AdminAnalyticsService } from '../../../services/adminAnalytics';
+
+/**
+ * Debug pages analytics specifically to see why 44 pages aren't showing
+ */
+export async function GET(request: NextRequest) {
+  try {
+    console.log('[Pages Debug] Testing pages analytics...');
+    
+    // Check admin permissions
+    const adminCheck = await checkAdminPermissions(request);
+    if (!adminCheck.success) {
+      return NextResponse.json({
+        error: 'Admin access required',
+        details: adminCheck.error
+      }, { status: 403 });
+    }
+    
+    const testResults = {
+      timestamp: new Date().toISOString(),
+      tests: []
+    };
+    
+    // Test last 7 days (should show 44 pages)
+    try {
+      const dateRange7Days = {
+        startDate: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000),
+        endDate: new Date()
+      };
+      
+      console.log('[Pages Debug] Testing 7-day range:', dateRange7Days);
+      const pages7Days = await AdminAnalyticsService.getNewPagesCreated(dateRange7Days);
+      
+      testResults.tests.push({
+        name: 'Last 7 Days Pages',
+        dateRange: dateRange7Days,
+        result: pages7Days,
+        totalPages: pages7Days.reduce((sum, item) => sum + item.totalPages, 0),
+        daysWithData: pages7Days.filter(item => item.totalPages > 0).length
+      });
+    } catch (error) {
+      testResults.tests.push({
+        name: 'Last 7 Days Pages',
+        error: error.message
+      });
+    }
+    
+    // Test last 30 days (should show even more)
+    try {
+      const dateRange30Days = {
+        startDate: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000),
+        endDate: new Date()
+      };
+      
+      console.log('[Pages Debug] Testing 30-day range:', dateRange30Days);
+      const pages30Days = await AdminAnalyticsService.getNewPagesCreated(dateRange30Days);
+      
+      testResults.tests.push({
+        name: 'Last 30 Days Pages',
+        dateRange: dateRange30Days,
+        result: pages30Days,
+        totalPages: pages30Days.reduce((sum, item) => sum + item.totalPages, 0),
+        daysWithData: pages30Days.filter(item => item.totalPages > 0).length
+      });
+    } catch (error) {
+      testResults.tests.push({
+        name: 'Last 30 Days Pages',
+        error: error.message
+      });
+    }
+    
+    return NextResponse.json(testResults, { 
+      status: 200,
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate'
+      }
+    });
+    
+  } catch (error) {
+    console.error('[Pages Debug] Error:', error);
+    
+    return NextResponse.json({
+      error: 'Pages debug failed',
+      details: error instanceof Error ? error.message : 'Unknown error',
+      timestamp: new Date().toISOString()
+    }, { status: 500 });
+  }
+}