design a analytics page with below points
show multiple whitelisted urls list getting tracked for user duration on page , user accepted the nudge yes/no to get engaged
highlights like most visited page , unique users , logged in users ,
funnel with auto nudge shown, total user engaged , total user accepted yes - numbers.
date duration to see the respective data
pie charts with above important highlight data
I'll design an analytics page for you with the requested features. I'll use Next.js with the App Router and create a responsive design using Tailwind CSS and shadcn/ui components. Let's break this down into components and implement the analytics page.
Let's start by creating the main analytics page and its components:
This analytics dashboard includes all the requested features:
The design is responsive and uses Tailwind CSS for styling. The charts are implemented using Recharts, which is compatible with the shadcn/ui chart components.
To use this analytics dashboard in your Next.js project:
@radix-ui/react-popover, date-fns, lucide-react, and recharts.Remember to replace the mock data with actual data from your backend or analytics service. You may also need to adjust the styling and layout to fit your specific design requirements.