attached are the sample screenshots to understand the look and feel of my current nextjs15 web application
now build a single page dashboard where after users are submitted their form we will show this/if they submitted and came back to the application we will show this
it has the users high level details
below is the current schema of the json of intake form(look for snippet.txt)
we dont need to add all the details but name ,dob and few other high level details
along with a pdf icon and an downloadable way when clicked on it the pdf is downloaded
use the below details so that i wont face any conflicts when using this code in my existing application
tscongig.json
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"target": "ES6",
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/": ["./"]
}
},
"include": ["next-env.d.ts", "/*.ts", "/.tsx", ".next/types/**/.ts"],
"exclude": ["node_modules"]
}
tailwind.config.json
import type { Config } from "tailwindcss"
const config = {
darkMode: ["class"],
content: [
"./pages//*.{ts,tsx}",
"./components//.{ts,tsx}",
"./app/**/.{ts,tsx}",
"./src/**/.{ts,tsx}",
".{js,ts,jsx,tsx,mdx}",
],
prefix: "",
theme: {
container: {
center: true,
padding: '2rem',
screens: {
'2xl': '1400px'
}
},
extend: {
colors: {
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
brand: {
light: '#7FCDFF',
DEFAULT: '#3498db',
dark: '#2980b9',
gray: '#a0a0a0'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
keyframes: {
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
},
boxShadow: {
puzzle: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
}
}
},
plugins: [require("tailwindcss-animate")],
} satisfies Config
export default config
next.config.json
let userConfig = undefined
try {
userConfig = await import('./v0-user-next.config')
} catch (e) {
// ignore error
}
/** @type {import('next').NextConfig} */
const nextConfig = {
eslint: {
ignoreDuringBuilds: true,
},
typescript: {
ignoreBuildErrors: true,
},
images: {
unoptimized: true,
},
experimental: {
webpackBuildWorker: true,
parallelServerBuildTraces: true,
parallelServerCompiles: true,
},
output: 'standalone',
}
mergeConfig(nextConfig, userConfig)
function mergeConfig(nextConfig, userConfig) {
if (!userConfig) {
return
}
for (const key in userConfig) {
if (
typeof nextConfig[key] === 'object' &&
!Array.isArray(nextConfig[key])
) {
nextConfig[key] = {
...nextConfig[key],
...userConfig[key],
}
} else {
nextConfig[key] = userConfig[key]
}
}
}
export default nextConfig
package.json
{
"name": "my-v0-project",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@auth/mongodb-adapter": "^3.8.0",
"@azure/storage-blob": "^12.26.0",
"@emotion/is-prop-valid": "latest",
"@hookform/resolvers": "latest",
"@radix-ui/react-accordion": "^1.2.2",
"@radix-ui/react-alert-dialog": "^1.1.4",
"@radix-ui/react-aspect-ratio": "^1.1.1",
"@radix-ui/react-avatar": "^1.1.3",
"@radix-ui/react-checkbox": "^1.1.3",
"@radix-ui/react-collapsible": "^1.1.3",
"@radix-ui/react-context-menu": "^2.2.4",
"@radix-ui/react-dialog": "^1.1.6",
"@radix-ui/react-dropdown-menu": "^2.1.6",
"@radix-ui/react-hover-card": "^1.1.4",
"@radix-ui/react-label": "^2.1.2",
"@radix-ui/react-menubar": "^1.1.4",
"@radix-ui/react-navigation-menu": "^1.2.3",
"@radix-ui/react-popover": "^1.1.4",
"@radix-ui/react-progress": "^1.1.1",
"@radix-ui/react-radio-group": "^1.2.2",
"@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-select": "^2.1.4",
"@radix-ui/react-separator": "^1.1.2",
"@radix-ui/react-slider": "^1.2.2",
"@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2",
"@radix-ui/react-toast": "^1.2.4",
"@radix-ui/react-toggle": "^1.1.1",
"@radix-ui/react-toggle-group": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.8",
"@types/canvas-confetti": "^1.9.0",
"@types/prop-types": "latest",
"autoprefixer": "^10.4.20",
"canvas-confetti": "latest",
"card-validator": "^10.0.2",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "1.0.4",
"date-fns": "latest",
"embla-carousel-react": "8.5.1",
"framer-motion": "latest",
"input-otp": "1.4.1",
"lucide-react": "^0.454.0",
"mongodb": "^6.15.0",
"next": "15.1.0",
"next-auth": "^4.24.11",
"next-themes": "^0.4.4",
"prop-types": "latest",
"react": "^19",
"react-day-picker": "^8.10.1",
"react-dom": "^19",
"react-hook-form": "latest",
"react-resizable-panels": "^2.1.7",
"react-signature-canvas": "latest",
"recharts": "2.15.0",
"sonner": "^1.7.1",
"tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7",
"uuid": "^11.1.0",
"zod": "latest"
},
"devDependencies": {
"@types/node": "^22",
"@types/react": "^19",
"@types/react-dom": "^19",
"@types/react-signature-canvas": "^1.0.7",
"postcss": "^8",
"tailwindcss": "^3.4.17",
"typescript": "^5"
}
}
components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
ask for anything else before you jump into coding if you have any doubts
Based on your screenshots and requirements, I'll create a dashboard page that displays the user's submitted form information with high-level details and a PDF download option.
Let me build a comprehensive dashboard that matches your application's design language and provides a clean summary of the submitted form data.
I've created a comprehensive dashboard that displays the submitted ABA intake form information. Here's what it includes:
The dashboard is designed to be easily integrated into your existing application and can be extended with additional features as needed.
fill with random data for now later i will connect
I'll update the dashboard to use random data directly in the component. This way, you can see how it looks with realistic data without needing to connect to an API yet.
I've updated the dashboard to use mock data directly in the component. Here's what I've done:
MOCK_DATA constant with realistic sample data based on your JSON schema/dashboard to see the dashboard with mock dataWhen you're ready to connect to your real data:
MOCK_DATA with an API call to your backendWhen you're ready to connect this to your actual data:
useEffect hook to call your API instead of using mock dataThe dashboard is now ready to use with mock data and can be easily connected to your real data source when you're ready.
which page code i can directly copy and paste into my aplication so that it will show in the ui