Company dashboard data - v0 by Vercel

Company dashboard data - v0 by VercelCompany dashboard data - v0 by Vercel

I want to show dashboard data for following json:

/api/company/:companyId/campaign/analytics -> {
pending: 30,
processed: 10 }

/api/company/:companyId/users/analytics -> {
activeUsers: 10
}

/api/company/:companyId/templates/analytics -> {
approvedTemplates: 20,
pendingTemplates: 10,
rejectedTemplate: 10
}

367d ago

I'll create a dashboard to display this data. Let me build a clean, responsive dashboard that fetches and displays analytics from these three endpoints.

I've created a clean, responsive analytics dashboard that fetches and displays data from your three API endpoints. The dashboard is organized into three sections:

Campaign Overview - Shows pending and processed campaigns
User Activity - Displays active users count
Template Status - Shows approved, pending, and rejected templates

Key Features:

React Server Components with Suspense for efficient data loading
Responsive layout that works on mobile, tablet, and desktop
Loading states with skeleton components while data is being fetched
Clean navigation with sidebar and top navigation
Organized sections with appropriate icons for each metric
Dynamic routing using the companyId parameter

The dashboard automatically fetches data from your API endpoints and refreshes every 5 minutes (configurable). Each card displays the relevant metric with an appropriate icon and description.

To use this dashboard, simply navigate to /dashboard/{companyId} where {companyId} is the ID of the company you want to view analytics for.

367d ago

The code returns the following error:

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Revise the code to address the error.

I was previewing: /dashboard/[companyId]

367d ago

The error indicates that the API endpoints are returning HTML (likely a 404 page) instead of JSON. Let me fix this by creating mock API endpoints and updating the dashboard to handle errors properly.

I've fixed the error by:

Created mock API endpoints that return proper JSON responses for all three analytics endpoints
Added proper error handling in the fetch functions with try-catch blocks
Added fallback data when API calls fail
Used absolute URLs with proper base URL handling
Added proper headers to ensure JSON responses
Added an alert to indicate this is using mock data

The dashboard now works with /dashboard/123 (or any company ID) and displays the mock analytics data. The API endpoints simulate the exact JSON structure you specified:

Campaign analytics: { pending: 30, processed: 10 }
User analytics: { activeUsers: 10 }
Template analytics: { approvedTemplates: 20, pendingTemplates: 10, rejectedTemplate: 10 }

You can now replace these mock API endpoints with your actual backend endpoints when ready.

Please make sure to add the following environment variable to your project:

Setup Integrations

367d ago

I want to show dashboard data for following json:

/api/company/:companyId/campaign/analytics -> {
pending: 30,
processed: 10 }

/api/company/:companyId/users/analytics -> {
activeUsers: 10
}

/api/company/:companyId/templates/analytics -> {
approvedTemplates: 20,
pendingTemplates: 10,
rejectedTemplate: 10
}

367d ago

I'll create a dashboard to display this data. Let me build a clean, responsive dashboard that fetches and displays analytics from these three endpoints.

I've created a clean, responsive analytics dashboard that fetches and displays data from your three API endpoints. The dashboard is organized into three sections:

Campaign Overview - Shows pending and processed campaigns
User Activity - Displays active users count
Template Status - Shows approved, pending, and rejected templates

Key Features:

React Server Components with Suspense for efficient data loading
Responsive layout that works on mobile, tablet, and desktop
Loading states with skeleton components while data is being fetched
Clean navigation with sidebar and top navigation
Organized sections with appropriate icons for each metric
Dynamic routing using the companyId parameter

The dashboard automatically fetches data from your API endpoints and refreshes every 5 minutes (configurable). Each card displays the relevant metric with an appropriate icon and description.

To use this dashboard, simply navigate to /dashboard/{companyId} where {companyId} is the ID of the company you want to view analytics for.

367d ago

The code returns the following error:

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Revise the code to address the error.

I was previewing: /dashboard/[companyId]

367d ago

The error indicates that the API endpoints are returning HTML (likely a 404 page) instead of JSON. Let me fix this by creating mock API endpoints and updating the dashboard to handle errors properly.

I've fixed the error by:

Created mock API endpoints that return proper JSON responses for all three analytics endpoints
Added proper error handling in the fetch functions with try-catch blocks
Added fallback data when API calls fail
Used absolute URLs with proper base URL handling
Added proper headers to ensure JSON responses
Added an alert to indicate this is using mock data

The dashboard now works with /dashboard/123 (or any company ID) and displays the mock analytics data. The API endpoints simulate the exact JSON structure you specified:

Campaign analytics: { pending: 30, processed: 10 }
User analytics: { activeUsers: 10 }
Template analytics: { approvedTemplates: 20, pendingTemplates: 10, rejectedTemplate: 10 }

You can now replace these mock API endpoints with your actual backend endpoints when ready.

Please make sure to add the following environment variable to your project:

Setup Integrations

367d ago