fix: updated packages and airtable api

package.json

@@ -31,7 +31,8 @@
     "tailwind-merge": "^2.5.4",
     "tailwindcss": "^3.3.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "node-fetch": "^2.6.1"
   },
   "devDependencies": {
     "@shadcn/ui": "^0.0.4",

src/app/api/airtable/route.ts

@@ -1,5 +1,5 @@
 import { NextResponse } from 'next/server';
-import Airtable from 'airtable';
+import { default as fetch } from 'node-fetch';
 
 export async function GET() {
   try {
@@ -9,24 +9,29 @@ export async function GET() {
       throw new Error('Missing Airtable credentials');
     }
 
-    const base = new Airtable({
-      apiKey: process.env.AIRTABLE_API_KEY,
-      endpointUrl: 'https://api.airtable.com'
-    }).base(process.env.AIRTABLE_BASE_ID);
-
     console.log('Querying Airtable base:', process.env.AIRTABLE_BASE_ID);
 
-    const records = await base('Weekly Engagement Survey').select({
-      maxRecords: 100,
-      view: 'Weekly Breakdown'
-    }).all();
+    const response = await fetch(
+      `https://api.airtable.com/v0/${process.env.AIRTABLE_BASE_ID}/Weekly%20Engagement%20Survey?view=Weekly%20Breakdown`,
+      {
+        headers: {
+          'Authorization': `Bearer ${process.env.AIRTABLE_API_KEY}`,
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(`Airtable API error: ${response.statusText}`);
+    }
 
+    const data = await response.json();
     console.log('Airtable records fetched:', {
-      count: records.length,
-      sampleFields: records[0]?.fields ? Object.keys(records[0].fields) : []
+      count: data.records?.length,
+      fields: data.records?.[0]?.fields ? Object.keys(data.records[0].fields) : []
     });
 
-    return NextResponse.json({ records });
+    return NextResponse.json({ records: data.records });
   } catch (error) {
     console.error('Airtable API error:', error);
     return NextResponse.json(

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Inter } from 'next/font/google'
 import { Header } from '@/components/layout/Header'
 import { Footer } from '@/components/layout/Footer'
 import { Providers } from '@/components/providers/Providers'
+import { ErrorBoundary } from '@/components/ErrorBoundary'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -22,7 +23,11 @@ export default function RootLayout({
         <Providers>
           <div className="min-h-screen flex flex-col">
             <Header />
-            <main className="flex-1">{children}</main>
+            <main className="flex-1">
+              <ErrorBoundary>
+                {children}
+              </ErrorBoundary>
+            </main>
             <Footer />
           </div>
         </Providers>

src/components/ErrorBoundary.tsx

@@ -8,6 +8,7 @@ interface Props {
 
 interface State {
   hasError: boolean;
+  error?: Error;
 }
 
 export class ErrorBoundary extends React.Component<Props, State> {
@@ -16,8 +17,8 @@ export class ErrorBoundary extends React.Component<Props, State> {
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError(_: Error): State {
-    return { hasError: true };
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
@@ -30,6 +31,9 @@ export class ErrorBoundary extends React.Component<Props, State> {
         <div className="flex items-center justify-center min-h-screen">
           <div className="text-center">
             <h2 className="text-xl font-semibold mb-2">Something went wrong</h2>
+            <p className="text-sm text-muted-foreground mb-4">
+              {this.state.error?.message}
+            </p>
             <button
               onClick={() => window.location.reload()}
               className="text-primary hover:underline"