You are an expert front-end engineer. Generate a production-ready, dark-mode-only CRM dashboard web app. Tech stack and constraints - Framework: Next.js 15 App Router (TypeScript), src-less app directory routing. - UI: Tailwind CSS + shadcn/ui components. - Charts: Recharts. - Icons: lucide-react. - No inline styles. Use design tokens and CSS variables only. - Dark mode only: render with <html class="dark"> and set color-scheme: dark. Theming and tokens - Use CSS variables and shadcn tokens consistently: - Background/foreground: bg-background, text-foreground, text-muted-foreground. - Surfaces: bg-card, text-card-foreground, border-border, bg-popover, text-popover-foreground, bg-muted. - Actions: bg-primary, text-primary-foreground, bg-destructive, ring via outline-ring/50. - Charts should use theme variables for lines/fills (map to CSS vars and gradients), not hardcoded hex. Global - Add global styles that apply dark variables and color-scheme: dark. - Fonts: Geist and Geist Mono. - Metadata: title “NovaCRM” (customizable), description “Modern, dark-first CRM dashboard”. - Keyboard shortcut: Cmd/Ctrl+B toggles sidebar (offcanvas on mobile, collapsible on desktop). - No light mode toggle; enforce dark-only everywhere. Core layout - Create a CRMLayout that provides: - Left sidebar with brand badge (initial “N” by default) and brand name “NovaCRM”. - Search input inside the sidebar. - Main menu items (with icons): - Dashboard, Projects, Calendar, Leave Management, Settings, Notifications, Help Center, Performance, Payrolls, Invoices, Employees, Recruitment. - Top bar: sidebar trigger, page title, segmented ghost buttons (Overview, Order, Sales), right-aligned search, mail and bell icons (bell shows small red dot), avatar, and primary “Invite” button. - Content area renders the selected page. Pages and content 1) Dashboard - KPI grid (4 cards): Payrolls Cost, Total Expense, Pending Payments, Total Payrolls. Each shows value, delta (positive/neutral/negative color), and subtitle. - Charts row: - Bar chart “Sales Performance” (12 months, gradient fill, themed axes/grid/tooltip). - Line chart “Email Metrics” with two series: Click Through Rate, Open Rate. - Table “Team Directory” with avatar, name, email, role, department, status badge, and actions (view, more). - Use ResponsiveContainer and custom Tooltip styled with theme tokens. 2) Projects - Stats row (4 cards): Total Projects, Active Projects, Completed, On Hold. - Header with search, Filter button, and “New Project” button. - Project cards grid (2 columns): name, description, status badge (color by status), priority badge (outline), progress bar, due date, spend/budget, team avatars, members count. 3) Calendar - Month header with left/right chevrons and “New Event” button. - Calendar grid (7 columns): days of week header; current day highlighted with bg-primary text-primary-foreground; non-current days use text-muted-foreground and hover:bg-muted. - Right column: - “Today’s Events” list (type-colored badges). - “Upcoming Events” with small avatars; subtle borders using border-border. 4) Employees - Stats row (4 cards) similar to Projects/Performance. - Table “All Employees”: avatar/name/id, contact (email/phone), role, department, status badge, join date, salary, actions. 5) Performance - Metrics row (4 cards) with trending up/down indicators using themed colors. - Charts row: - Area chart “Performance Trend” with gradient fill, theme axes/grid/tooltip. - Bar chart “Goals Progress” with vertical gradient and rounded bars. - “Team Performance” list: avatar/name/role, score with trend, grade badge (Excellent/Good/Needs Improvement), progress bar for goals. 6) Invoices - Stats row (4 cards). - Table “All Invoices”: invoice id with icon, client, amount, issue/due dates, status badge (Paid/Pending/Overdue/Sent), actions (view/download/more). 7) Payrolls - Stats row (4 cards) with small icon chip on each card. - Table “Payroll Records”: employee info, base salary, overtime, bonuses, deductions (red tint), net pay, status badge, actions (view/process). 8) Leave Management - Stats row (4 cards). - Table “Leave Requests”: employee, leave type, duration, days with calendar icon, status badge (Approved/Rejected/Pending), applied date, actions with Approve/Reject when pending. 9) Recruitment - Left: “Job Openings” list cards with status badge. - Right: “Recent Candidates” list cards with search; status badges (Offer/Interview/Review/Rejected), score, stage, actions (Accept/Reject for Interview; View otherwise). 10) Notifications - Stats row (4 small cards): Unread, Read, High Priority, Total. - List “Recent Notifications” with icon chip colored by type (message/calendar/system/user/alert), title/description, optional High badge, unread dot, time, actions (Mark as read, View). 11) Help Center - Search hero card with centered heading and input. - Categories grid (Getting Started, Account Management, Projects & Tasks, Reports & Analytics). - “Popular Articles” simple list of links. - “Contact Support”: Live Chat, Email Support, Phone Support (disabled state messaging). - “Quick Links” list of ghost buttons. Component usage and styling rules - Use shadcn/ui for Avatar, Badge, Button, Card, Input, Label, Progress, Separator, Sheet, Sidebar (custom), Table, Tooltip, Switch. - Replace any hex colors with theme tokens or Tailwind color utilities that align with theme tokens. - Badges: status-dependent colors using Tailwind’s semantic colors (green/amber/blue/red/neutral) mixed with text color for contrast. - Inputs: bg-muted, border-border, placeholder:text-muted-foreground. - Buttons: - Primary: default. - Outline: border-border text-muted-foreground. - Ghost: text-muted-foreground hover:text-foreground. - No inline styles. No “bg-black text-white” shortcuts; always use tokens. - Charts: theme axes (muted-foreground), grid (border), popover tooltip, gradients from theme chart vars. Accessibility and UX - All interactive elements keyboard-accessible; visible focus states via ring. - Inputs with associated labels and placeholders where appropriate. - Icons have semantic context; provide aria-label or sr-only text where needed. - Subtle transitions for hover/focus. Use skeletons for loading states where appropriate. Project structure (example) - app/ - layout.tsx (injects dark class, fonts, metadata) - page.tsx (uses CRMLayout, defaults to Dashboard) - globals.css (Tailwind, theme variables, base layer) - components/ - crm-layout.tsx (sidebar/topbar/content switcher) - pages/ - dashboard.tsx, projects.tsx, calendar.tsx, leave-management.tsx, settings.tsx, notifications.tsx, help-center.tsx, performance.tsx, payrolls.tsx, invoices.tsx, employees.tsx, recruitment.tsx - ui/ (shadcn components incl. custom sidebar wrapper) - hooks/use-mobile.ts (for responsive sidebar behavior) - lib/utils.ts (cn helper) Deliverables - Complete Next.js app with the above pages and components. - Mock data for tables and charts embedded in page files. - Fully responsive layout (desktop and mobile sidebar behavior). - No ESLint or TypeScript errors. - All styles theme-token based; zero inline styles. Acceptance criteria - App loads in dark mode only; no light theme code paths. - Sidebar navigation switches pages within the main layout. - Charts render with themed axes/grid/tooltip and gradients. - Tables, cards, badges, inputs, and buttons use consistent design tokens. - No visual regressions in dark mode; legible contrast across the app. Optional branding - Default brand “NovaCRM” with initial “N”. Make both easy to change from a single constant.
Notes and citations:
- Dark-only rendering is enforced by setting the html class to dark and adding a global CSS file that sets color-scheme: dark, which aligns with shadcn’s Next.js dark mode approach that uses class-based theming in the root layout 2.
- The sidebar is implemented using shadcn/ui’s Sidebar components and wrapped with SidebarProvider. It supports a keyboard shortcut Cmd/Ctrl+B out of the box to toggle visibility and includes a SidebarTrigger in the top bar for manual toggling 1.
- Charts use shadcn/ui chart primitives with Recharts. Colors come from CSS variables via ChartContainer config (e.g., hsl(var(--chart-1))) and theme tokens for axes, grid, and tooltip 31.
How to use:
- Click “Open in v0” to preview this app. Use the built-in “Install” button in the top-right to download the code or “Deploy” to deploy on Vercel.
- You can change branding in constants/brand.ts to update the name and initial globally.
