Build Your Own Analytics Dashboard

Build me a custom analytics dashboard with the following specifications:

## Tech Stack
- Next.js 14 with App Router
- Recharts for data visualization
- Tailwind CSS for styling
- shadcn/ui components
- Direct database connection (Prisma or raw SQL)

## Core Features

### 1. Dashboard Layout
- Header with date range picker (Today, 7 days, 30 days, Custom)
- Grid layout for metric cards and charts
- Responsive design (cards stack on mobile)
- Dark mode support

### 2. Metric Cards
- Large number display with label
- Comparison to previous period (% change with up/down indicator)
- Sparkline mini-chart in card (optional)
- Click to see breakdown

### 3. Chart Types
- Line chart (time series data)
- Bar chart (categorical data)
- Pie/Donut chart (composition)
- Area chart (cumulative data)
- Table with sorting and pagination

### 4. Example Metrics (customize to your data)
- Total Users / New Users
- Revenue / Orders
- Page Views / Sessions
- Conversion Rate
- Top Pages / Products

### 5. Interactivity
- Hover tooltips on charts
- Click to drill down
- Filter by segment (e.g., country, device)
- Export data as CSV

### 6. Data Fetching
- Server-side data fetching with caching
- Loading skeletons
- Error states
- Auto-refresh option (every 5 min)

## File Structure
```
/app
  /dashboard
    /page.tsx (main dashboard)
    /api
      /metrics/route.ts
      /charts/route.ts
/components
  /dashboard
    /metric-card.tsx
    /line-chart.tsx
    /bar-chart.tsx
    /pie-chart.tsx
    /data-table.tsx
    /date-range-picker.tsx
  /ui (shadcn components)
/lib
  /db.ts (database connection)
  /queries.ts (SQL queries for metrics)
  /utils.ts
```

## Example SQL Queries
```sql
-- Daily active users (last 30 days)
SELECT DATE(created_at) as date, COUNT(DISTINCT user_id) as users
FROM events
WHERE created_at > NOW() - INTERVAL '30 days'
GROUP BY DATE(created_at)
ORDER BY date;

-- Revenue by product category
SELECT category, SUM(amount) as revenue
FROM orders
WHERE created_at > NOW() - INTERVAL '30 days'
GROUP BY category
ORDER BY revenue DESC;

-- Conversion funnel
SELECT 
  COUNT(*) FILTER (WHERE event = 'page_view') as views,
  COUNT(*) FILTER (WHERE event = 'add_to_cart') as add_to_cart,
  COUNT(*) FILTER (WHERE event = 'checkout') as checkout,
  COUNT(*) FILTER (WHERE event = 'purchase') as purchase
FROM events
WHERE created_at > NOW() - INTERVAL '7 days';
```

## UI Requirements
- Clean, data-dense design
- Consistent color palette for charts
- Numbers formatted appropriately (1.2K, $45.6K, etc.)
- Responsive grid that adapts to screen size
- Print-friendly styles for reports

## Sample Data
Include a seed script that generates realistic sample data:
- 10,000 events over 30 days
- Various event types and user segments
- Random but realistic distribution

Please generate all files needed for a working dashboard. Start with the core layout and chart components.

Add real-time updates to the dashboard:
- WebSocket connection for live data
- Counter that animates when metrics change
- "Live" indicator in header
- Optional: disable real-time to reduce load

Add ability for users to customize their dashboard:
- Drag and drop to reorder widgets
- Add/remove metric cards
- Save layout to localStorage (or database)
- Widget library to choose from
- Resize widgets (small, medium, large)

Add scheduled email reports:
- Configure daily/weekly/monthly reports
- Select which metrics to include
- Email as PDF or inline HTML
- Use Resend or similar for delivery
- Track report delivery status