[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Manrope } from "next/font/google" import "./globals.css" const geist = Geist({ subsets: ["latin"], display: "swap", variable: "--font-geist", }) const manrope = Manrope({ subsets: ["latin"], display: "swap", variable: "--font-manrope", }) export const metadata: Metadata = { title: "Client Dashboard - Project Management", description: "Professional client dashboard for project management and tracking", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); /* #ffffff */ --foreground: oklch(0.25 0 0); /* #374151 */ --card: oklch(0.98 0.02 142); /* #f0fdf4 */ --card-foreground: oklch(0.25 0 0); /* #374151 */ --popover: oklch(1 0 0); /* #ffffff */ --popover-foreground: oklch(0.25 0 0); /* #374151 */ --primary: oklch(0.45 0.15 142); /* #15803d */ --primary-foreground: oklch(1 0 0); /* #ffffff */ --secondary: oklch(0.75 0.15 85); /* #84cc16 */ --secondary-foreground: oklch(0.25 0 0); /* #374151 */ --muted: oklch(0.98 0.02 142); /* #f0fdf4 */ --muted-foreground: oklch(0.35 0 0); /* #4b5563 */ --accent: oklch(0.75 0.15 85); /* #84cc16 */ --accent-foreground: oklch(0.25 0 0); /* #374151 */ --destructive: oklch(0.6 0.2 35); /* #ea580c */ --destructive-foreground: oklch(1 0 0); /* #ffffff */ --border: oklch(0.9 0 0); /* #e5e7eb */ --input: oklch(0.98 0.02 142); /* #f0fdf4 */ --ring: oklch(0.45 0.15 142); /* #15803d */ --chart-1: oklch(0.45 0.15 142); /* #15803d */ --chart-2: oklch(0.75 0.15 85); /* #84cc16 */ --chart-3: oklch(0.6 0.2 35); /* #ea580c */ --chart-4: oklch(0.65 0.2 30); /* #f97316 */ --chart-5: oklch(0.35 0 0); /* #4b5563 */ --radius: 0.5rem; --sidebar: oklch(0.98 0.02 142); /* #f0fdf4 */ --sidebar-foreground: oklch(0.25 0 0); /* #374151 */ --sidebar-primary: oklch(0.45 0.15 142); /* #15803d */ --sidebar-primary-foreground: oklch(1 0 0); /* #ffffff */ --sidebar-accent: oklch(0.75 0.15 85); /* #84cc16 */ --sidebar-accent-foreground: oklch(0.25 0 0); /* #374151 */ --sidebar-border: oklch(0.9 0 0); /* #e5e7eb */ --sidebar-ring: oklch(0.45 0.15 142); /* #15803d */ --font-geist: "Geist", sans-serif; --font-manrope: "Manrope", serif; } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist); --font-serif: var(--font-manrope); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground font-sans; } } [V0_FILE]typescriptreact:file="components/dashboard-header.tsx" isMerged="true" import { Search, Bell, Settings, User } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export function DashboardHeader() { return (

{/* Logo */}

ProjectManager

{/* Search Bar */}

{/* User Actions */}

John Doe

john.doe@company.com

Profile Settings Log out

) } [V0_FILE]typescriptreact:file="components/project-overview.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { TrendingUp, Clock, Users, CheckCircle } from "lucide-react" interface Project { id: number name: string client: string status: string progress: number deadline: string teamSize: number hoursAllocated: number hoursSpent: number tasks: Array<{ id: number name: string completed: boolean dueDate: string }> milestones: Array<{ id: number name: string completed: boolean date: string }> } interface ProjectOverviewProps { projects: Project[] } export function ProjectOverview({ projects }: ProjectOverviewProps) { const totalProjects = projects.length const onTrackProjects = projects.filter((p) => p.status === "on-track").length const delayedProjects = projects.filter((p) => p.status === "delayed").length const avgProgress = Math.round(projects.reduce((sum, p) => sum + p.progress, 0) / totalProjects) const totalTeamMembers = projects.reduce((sum, p) => sum + p.teamSize, 0) const totalHoursAllocated = projects.reduce((sum, p) => sum + p.hoursAllocated, 0) const totalHoursSpent = projects.reduce((sum, p) => sum + p.hoursSpent, 0) const completedTasks = projects.reduce((sum, p) => { return sum + p.tasks.filter((t) => t.completed).length }, 0) const totalTasks = projects.reduce((sum, p) => sum + p.tasks.length, 0) return (

Active Projects

{totalProjects}

{onTrackProjects} on track {delayedProjects > 0 && ( <> • {delayedProjects} delayed )}

Overall Progress

{avgProgress}%

Average across all projects

Resource Allocation

{totalTeamMembers}

{totalHoursSpent}h of {totalHoursAllocated}h allocated

Tasks Completed

{completedTasks}

of {totalTasks} total tasks

) } [V0_FILE]typescriptreact:file="components/project-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Calendar, Users, CheckCircle2, Circle, Target, Clock } from "lucide-react" import { cn } from "@/lib/utils" interface Task { id: number name: string completed: boolean dueDate: string } interface Milestone { id: number name: string completed: boolean date: string } interface Project { id: number name: string client: string status: string progress: number deadline: string teamSize: number hoursAllocated: number hoursSpent: number tasks: Task[] milestones: Milestone[] } interface ProjectCardProps { project: Project } export function ProjectCard({ project }: ProjectCardProps) { const getStatusColor = (status: string) => { switch (status) { case "on-track": return "bg-primary text-primary-foreground" case "delayed": return "bg-destructive text-destructive-foreground" case "completed": return "bg-secondary text-secondary-foreground" default: return "bg-muted text-muted-foreground" } } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }) } const completedTasks = project.tasks.filter((task) => task.completed).length const completedMilestones = project.milestones.filter((milestone) => milestone.completed).length return (

{project.name}

{project.client}

Due {formatDate(project.deadline)}

{project.teamSize} team members

{project.status.replace("-", " ")}

Progress {project.progress}%

View Details

{completedTasks}/{project.tasks.length} tasks {completedMilestones}/{project.milestones.length} milestones

{/* Tasks Section */}

Tasks ({completedTasks}/{project.tasks.length})

{project.tasks.map((task) => (

{task.completed ? ( ) : ( )} {task.name}

{formatDate(task.dueDate)}

))}

{/* Milestones Section */}

Milestones ({completedMilestones}/{project.milestones.length})

{project.milestones.map((milestone) => (

{milestone.completed ? ( ) : ( )} {milestone.name}

{formatDate(milestone.date)}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" import { DashboardHeader } from "@/components/dashboard-header" import { ProjectOverview } from "@/components/project-overview" import { ProjectCard } from "@/components/project-card" const projects = [ { id: 1, name: "E-commerce Platform Redesign", client: "TechCorp Inc.", status: "on-track", progress: 75, deadline: "2024-03-15", teamSize: 6, hoursAllocated: 800, hoursSpent: 600, tasks: [ { id: 1, name: "User Research & Analysis", completed: true, dueDate: "2024-01-15" }, { id: 2, name: "Wireframe Development", completed: true, dueDate: "2024-01-30" }, { id: 3, name: "UI/UX Design", completed: true, dueDate: "2024-02-15" }, { id: 4, name: "Frontend Development", completed: false, dueDate: "2024-03-01" }, { id: 5, name: "Backend Integration", completed: false, dueDate: "2024-03-10" }, { id: 6, name: "Testing & QA", completed: false, dueDate: "2024-03-15" }, ], milestones: [ { id: 1, name: "Design Phase Complete", completed: true, date: "2024-02-15" }, { id: 2, name: "Development Phase Complete", completed: false, date: "2024-03-01" }, { id: 3, name: "Project Launch", completed: false, date: "2024-03-15" }, ], }, { id: 2, name: "Mobile App Development", client: "StartupXYZ", status: "delayed", progress: 45, deadline: "2024-04-01", teamSize: 4, hoursAllocated: 600, hoursSpent: 270, tasks: [ { id: 1, name: "Requirements Gathering", completed: true, dueDate: "2024-01-10" }, { id: 2, name: "Technical Architecture", completed: true, dueDate: "2024-01-25" }, { id: 3, name: "Core Features Development", completed: false, dueDate: "2024-02-28" }, { id: 4, name: "API Integration", completed: false, dueDate: "2024-03-15" }, { id: 5, name: "Testing & Deployment", completed: false, dueDate: "2024-04-01" }, ], milestones: [ { id: 1, name: "MVP Complete", completed: false, date: "2024-02-28" }, { id: 2, name: "Beta Release", completed: false, date: "2024-03-20" }, { id: 3, name: "Production Launch", completed: false, date: "2024-04-01" }, ], }, { id: 3, name: "Data Analytics Dashboard", client: "Enterprise Solutions Ltd.", status: "on-track", progress: 90, deadline: "2024-02-28", teamSize: 3, hoursAllocated: 400, hoursSpent: 360, tasks: [ { id: 1, name: "Data Source Integration", completed: true, dueDate: "2024-01-15" }, { id: 2, name: "Dashboard Design", completed: true, dueDate: "2024-02-01" }, { id: 3, name: "Chart Implementation", completed: true, dueDate: "2024-02-15" }, { id: 4, name: "User Testing", completed: true, dueDate: "2024-02-20" }, { id: 5, name: "Final Deployment", completed: false, dueDate: "2024-02-28" }, ], milestones: [ { id: 1, name: "Core Dashboard Complete", completed: true, date: "2024-02-15" }, { id: 2, name: "User Acceptance Testing", completed: true, date: "2024-02-20" }, { id: 3, name: "Go Live", completed: false, date: "2024-02-28" }, ], }, ] export default function Dashboard() { return (

Project Dashboard

Monitor active projects, track progress, and manage deliverables

Active Projects

{projects.map((project) => ( ))}

) }