chore: Enhanced Navigation & Analytics System with robust error handling and improved UX (#221)

Author: SnehaChaursia

src/app/analytics/page.tsx

@@ -13,7 +13,7 @@ import {
   AreaChart,
   Area,
 } from 'recharts';
-import { BarChart3, Download, FileSearch, Loader2, PieChart as PieChartIcon } from 'lucide-react';
+import { BarChart3, Download, FileSearch, Loader2, PieChart as PieChartIcon, RefreshCw } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 
@@ -40,24 +40,96 @@ export default function AnalyticsDashboard() {
   const [filterTheme, setFilterTheme] = useState<string>('all');
   const [filterTime, setFilterTime] = useState<string>('all');
   const [chartType, setChartType] = useState<string>('bar');
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  // Function to clear corrupted data
+  const clearCorruptedData = () => {
+    localStorage.removeItem('componentAnalytics');
+    setAnalyticsData([]);
+    setRefreshKey(prev => prev + 1);
+  };
 
   useEffect(() => {
     try {
       const data = typeof window !== 'undefined' ? localStorage.getItem('componentAnalytics') : null;
       if (data) {
-        setAnalyticsData(JSON.parse(data));
+        const parsedData = JSON.parse(data);
+        console.log('Parsed analytics data:', parsedData, 'Type:', typeof parsedData, 'Is Array:', Array.isArray(parsedData));
+        // Ensure parsedData is an array
+        if (Array.isArray(parsedData)) {
+          setAnalyticsData(parsedData);
+        } else {
+          console.warn('Analytics data is not an array, initializing with empty array. Data:', parsedData);
+          setAnalyticsData([]);
+        }
+      } else {
+        // Add sample data if no real data exists
+        const sampleData: AnalyticsEvent[] = [
+          {
+            component: "Button",
+            event: "copy",
+            theme: "dark",
+            timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
+          },
+          {
+            component: "Button",
+            event: "copy",
+            theme: "light",
+            timestamp: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
+          },
+          {
+            component: "Input",
+            event: "copy",
+            theme: "dark",
+            timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago
+          },
+          {
+            component: "Card",
+            event: "copy",
+            theme: "light",
+            timestamp: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago
+          },
+          {
+            component: "Button",
+            event: "copy",
+            theme: "dark",
+            timestamp: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 7 days ago
+          },
+          {
+            component: "Dialog",
+            event: "copy",
+            theme: "light",
+            timestamp: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago
+          },
+          {
+            component: "Select",
+            event: "copy",
+            theme: "dark",
+            timestamp: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(), // 15 days ago
+          },
+          {
+            component: "Badge",
+            event: "copy",
+            theme: "light",
+            timestamp: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString(), // 20 days ago
+          },
+        ];
+        setAnalyticsData(sampleData);
       }
     } catch (error) {
       // keep console.error for debugging in dev
       // eslint-disable-next-line no-console
       console.error('Error reading analytics data:', error);
+      // Set empty array as fallback
+      setAnalyticsData([]);
     } finally {
       setIsLoading(false);
     }
-  }, []);
+  }, [refreshKey]);
 
   // Filter and aggregate data for charts
-  const filteredData = analyticsData.filter((event) => {
+  console.log('analyticsData before filter:', analyticsData, 'Type:', typeof analyticsData, 'Is Array:', Array.isArray(analyticsData));
+  const filteredData = (Array.isArray(analyticsData) ? analyticsData : []).filter((event) => {
     const componentMatch = filterComponent === 'all' || event.component === filterComponent;
     const themeMatch = filterTheme === 'all' || event.theme === filterTheme;
     const timeMatch =
@@ -119,9 +191,15 @@ export default function AnalyticsDashboard() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-background to-muted/50 dark:from-background dark:to-muted/30 py-6 px-4 sm:px-6 lg:px-8">
       <div className="max-w-7xl mx-auto space-y-6">
-        <h1 className="text-2xl sm:text-3xl font-bold text-foreground tracking-tight animate-in fade-in duration-500">
-          Analytics Dashboard
-        </h1>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <h1 className="text-2xl sm:text-3xl font-bold text-foreground tracking-tight animate-in fade-in duration-500">
+            Analytics Dashboard
+          </h1>
+          <div className="flex items-center gap-4 text-sm text-muted-foreground">
+            <span>Total Events: {Array.isArray(analyticsData) ? analyticsData.length : 0}</span>
+            <span>Components: {Array.isArray(analyticsData) ? new Set(analyticsData.map(d => d.component)).size : 0}</span>
+          </div>
+        </div>
 
         {/* Filters Card */}
         <Card className="border-none shadow-sm">
@@ -140,11 +218,11 @@ export default function AnalyticsDashboard() {
                     <SelectItem value="all" key="all">
                       All Components
                     </SelectItem>
-                    {[...new Set(analyticsData.map((d) => d.component))].map((comp) => (
+                    {Array.isArray(analyticsData) ? [...new Set(analyticsData.map((d) => d.component))].map((comp) => (
                       <SelectItem key={comp} value={comp}>
                         {comp}
                       </SelectItem>
-                    ))}
+                    )) : null}
                   </SelectContent>
                 </Select>
               </div>
@@ -202,9 +280,60 @@ export default function AnalyticsDashboard() {
                 </button>
               </div>
             </div>
+            
+            {/* Sample Data Notice */}
+            {Array.isArray(analyticsData) && analyticsData.length > 0 && analyticsData[0]?.component === "Button" && analyticsData[0]?.timestamp.includes("2024") && (
+              <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+                <p className="text-sm text-blue-800 dark:text-blue-200">
+                  📊 <strong>Demo Mode:</strong> This is sample data. Copy some components from the home page to see real analytics!
+                </p>
+                <button
+                  className="mt-2 text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                  onClick={() => {
+                    localStorage.removeItem('componentAnalytics');
+                    window.location.reload();
+                  }}
+                >
+                  Clear sample data
+                </button>
+              </div>
+            )}
           </CardContent>
         </Card>
 
+        {/* Recent Activity */}
+        {Array.isArray(analyticsData) && analyticsData.length > 0 && (
+          <Card className="border-none shadow-sm">
+            <CardHeader>
+              <CardTitle className="text-lg font-semibold text-foreground">Recent Activity</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-2">
+                {analyticsData
+                  .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+                  .slice(0, 5)
+                  .map((event, index) => (
+                    <div key={index} className="flex items-center justify-between p-3 bg-muted/30 rounded-lg">
+                      <div className="flex items-center gap-3">
+                        <div className="w-2 h-2 bg-primary rounded-full"></div>
+                        <span className="font-medium">{event.component}</span>
+                        <span className="text-sm text-muted-foreground">copied</span>
+                      </div>
+                      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                        <span className={`px-2 py-1 rounded-full text-xs ${
+                          event.theme === 'dark' ? 'bg-gray-800 text-gray-200' : 'bg-gray-200 text-gray-800'
+                        }`}>
+                          {event.theme}
+                        </span>
+                        <span>{new Date(event.timestamp).toLocaleString()}</span>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
         {/* Loading State */}
         {isLoading ? (
           <Card className="border-none shadow-sm">
@@ -222,7 +351,22 @@ export default function AnalyticsDashboard() {
           <Card className="border-none shadow-sm animate-in fade-in zoom-in-95 duration-500">
             <CardHeader className="flex flex-col space-y-2 md:flex-row md:space-y-0 md:items-center md:justify-between">
               <CardTitle className="text-lg font-semibold text-foreground">Most Copied Components</CardTitle>
-              <Select value={chartType} onValueChange={setChartType}>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setRefreshKey(prev => prev + 1)}
+                  className="p-2 hover:bg-muted rounded-md transition-colors"
+                  title="Refresh data"
+                >
+                  <RefreshCw className="h-4 w-4" />
+                </button>
+                <button
+                  onClick={clearCorruptedData}
+                  className="p-2 hover:bg-muted rounded-md transition-colors text-red-500 hover:text-red-700"
+                  title="Clear all data"
+                >
+                  🗑️
+                </button>
+                <Select value={chartType} onValueChange={setChartType}>
                 <SelectTrigger
                   aria-label="Select chart type"
                   className="h-9 w-full md:w-32 bg-background/80 hover:bg-background transition-colors duration-200 border-border/50 focus:ring-2 focus:ring-primary focus:ring-offset-1"
@@ -249,14 +393,20 @@ export default function AnalyticsDashboard() {
                     </div>
                   </SelectItem>
                 </SelectContent>
-              </Select>
+                </Select>
+              </div>
             </CardHeader>
 
             <CardContent>
               {copyChartData.length === 0 ? (
                 <div className="flex flex-col gap-y-4 items-center justify-center h-[200px] w-full">
                   <FileSearch className="size-6 text-muted-foreground" />
-                  <p className="text-muted-foreground text-sm">No data for this period</p>
+                  <div className="text-center space-y-2">
+                    <p className="text-muted-foreground text-sm">No data for this period</p>
+                    <p className="text-xs text-muted-foreground/70">
+                      Try adjusting your filters or copy some components from the home page
+                    </p>
+                  </div>
                 </div>
               ) : (
                 <div className="space-y-6">

src/app/layout.tsx

@@ -6,6 +6,8 @@ import "./globals.css";
 import ThemeColorPicker from "@/components/ui/ThemeColorPicker";
 import { ThemeProvider } from "next-themes"; // ⬅️ import
 import { Toaster } from "@/components/ui/sonner";
+import Header from "@/components/Header";
+import { SearchProvider } from "@/lib/SearchContext";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -33,12 +35,15 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {/* ✅ Wrap everything in ThemeProvider */}
+        {/*  Wrap everything in ThemeProvider */}
         <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
-          <ThemeColorPicker />
-          {children}
-          <Toaster position="top-center" richColors />
-          <BackToTopButton />
+          <SearchProvider>
+            <ThemeColorPicker />
+            <Header />
+            {children}
+            <Toaster position="top-center" richColors />
+            <BackToTopButton />
+          </SearchProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/page.tsx

@@ -21,11 +21,11 @@
   } from "lucide-react";
   import { Button } from "@/components/ui/button";
   import Link from "next/link";
-  import Header from "@/components/Header";
+  import { useSearch } from "@/lib/SearchContext";
 
   const Index = () => {
-    // ✅ This logic STAYS here. This page will control the search.
-    const [searchQuery, setSearchQuery] = useState("");
+    // Use search context instead of local state
+    const { searchQuery, setSearchQuery } = useSearch();
     const [debouncedQuery, setDebouncedQuery] = useState("");
     const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
 
@@ -115,8 +115,6 @@
 
   return (
     <div className="min-h-screen bg-background">
-      {/* ✅ We will now pass the search state and function to the Header */}
-      <Header searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
 
       {/* Hero Section */}
       <section