[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import Link from "next/link" export default function Home() { return (

Bem-vindo ao CRM do Eduardo

Sistema de gerenciamento de relacionamento com clientes para arquitetos

) } [V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import Link from "next/link" export default function LoginPage() { const router = useRouter() const [isLoading, setIsLoading] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate login setTimeout(() => { setIsLoading(false) router.push("/dashboard") }, 1000) } return (

ArchiCRM

Welcome back Enter your credentials to access your account Login Register

Full Name

Password

By continuing, you agree to our{" "} Terms of Service {" "} and{" "} Privacy Policy .

) } [V0_FILE]typescriptreact:file="app/dashboard/clients/page.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Plus, Search, MoreHorizontal, FileText, MessageSquare, FileCodeIcon as FileContract, Pencil, Trash2, ArrowUpDown, ChevronDown, Filter, } from "lucide-react" import Link from "next/link" // Sample client data const clients = [ { id: "1", name: "John Smith", email: "john.smith@example.com", phone: "(555) 123-4567", address: "123 Main St, Anytown, CA", company: "Smith Enterprises", status: "Active Client", activeProjects: 2, completedProjects: 1, lastContact: "2025-03-05", tags: ["commercial", "office"], }, { id: "2", name: "Maria Johnson", email: "maria.johnson@example.com", phone: "(555) 987-6543", address: "456 Oak Ave, Somewhere, NY", company: "Johnson Family", status: "Proposal Sent", activeProjects: 1, completedProjects: 0, lastContact: "2025-03-08", tags: ["residential", "renovation"], }, { id: "3", name: "David Wilson", email: "david.wilson@example.com", phone: "(555) 456-7890", address: "789 Pine Rd, Nowhere, TX", company: "Wilson Enterprises", status: "New Lead", activeProjects: 0, completedProjects: 2, lastContact: "2025-02-28", tags: ["commercial", "high-budget"], }, { id: "4", name: "Sarah Parker", email: "sarah.parker@example.com", phone: "(555) 234-5678", address: "321 Elm Blvd, Elsewhere, FL", company: "Parker Industries", status: "Contacted", activeProjects: 1, completedProjects: 3, lastContact: "2025-03-10", tags: ["commercial", "office"], }, { id: "5", name: "Michael Brown", email: "michael.brown@example.com", phone: "(555) 876-5432", address: "654 Maple Dr, Anywhere, WA", company: "Brown Family", status: "Meeting Scheduled", activeProjects: 2, completedProjects: 1, lastContact: "2025-03-01", tags: ["residential", "new-build"], }, { id: "6", name: "Jennifer Lee", email: "jennifer.lee@example.com", phone: "(555) 345-6789", address: "987 Cedar St, Somewhere, CA", company: "Lee Designs", status: "Meeting Scheduled", activeProjects: 1, completedProjects: 0, lastContact: "2025-03-15", tags: ["commercial", "interior"], }, { id: "7", name: "Robert Garcia", email: "robert.garcia@example.com", phone: "(555) 567-8901", address: "246 Birch Ave, Nowhere, NY", company: "Garcia Homes", status: "Active Client", activeProjects: 3, completedProjects: 2, lastContact: "2025-03-18", tags: ["residential", "luxury"], }, { id: "8", name: "Emily Johnson", email: "emily.johnson@example.com", phone: "(555) 234-5678", address: "135 Willow Rd, Elsewhere, TX", company: "Johnson Family", status: "New Lead", activeProjects: 0, completedProjects: 0, lastContact: "2025-03-05", tags: ["residential", "renovation"], }, { id: "9", name: "Carlos Mendez", email: "carlos.mendez@example.com", phone: "(555) 987-6543", address: "864 Aspen Dr, Anywhere, FL", company: "Mendez Restaurants", status: "Contacted", activeProjects: 1, completedProjects: 0, lastContact: "2025-03-08", tags: ["commercial", "restaurant"], }, { id: "10", name: "Lisa Chen", email: "lisa.chen@example.com", phone: "(555) 890-1234", address: "753 Spruce Blvd, Somewhere, WA", company: "Chen Family", status: "Active Client", activeProjects: 2, completedProjects: 1, lastContact: "2025-03-28", tags: ["residential", "modern"], }, { id: "11", name: "James Wilson", email: "james.wilson@example.com", phone: "(555) 789-0123", address: "159 Redwood St, Nowhere, CA", company: "Wilson Properties", status: "Proposal Sent", activeProjects: 1, completedProjects: 0, lastContact: "2025-03-22", tags: ["commercial", "retail"], }, ] export default function ClientsPage() { const [searchTerm, setSearchTerm] = useState("") const [sortField, setSortField] = useState("name") const [sortDirection, setSortDirection] = useState("asc") const [statusFilter, setStatusFilter] = useState("all") const handleSort = (field) => { if (sortField === field) { setSortDirection(sortDirection === "asc" ? "desc" : "asc") } else { setSortField(field) setSortDirection("asc") } } const filteredClients = clients .filter( (client) => (statusFilter === "all" || client.status === statusFilter) && (client.name.toLowerCase().includes(searchTerm.toLowerCase()) || client.email.toLowerCase().includes(searchTerm.toLowerCase()) || client.company.toLowerCase().includes(searchTerm.toLowerCase())), ) .sort((a, b) => { const aValue = a[sortField] const bValue = b[sortField] if (typeof aValue === "string" && typeof bValue === "string") { return sortDirection === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue) } return sortDirection === "asc" ? aValue - bValue : bValue - aValue }) const getStatusColor = (status) => { switch (status) { case "Active Client": return "bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400" case "Proposal Sent": return "bg-blue-100 text-blue-800 dark:bg-blue-800/20 dark:text-blue-400" case "Meeting Scheduled": return "bg-purple-100 text-purple-800 dark:bg-purple-800/20 dark:text-purple-400" case "Contacted": return "bg-yellow-100 text-yellow-800 dark:bg-yellow-800/20 dark:text-yellow-400" case "New Lead": return "bg-gray-100 text-gray-800 dark:bg-gray-800/20 dark:text-gray-400" default: return "bg-gray-100 text-gray-800 dark:bg-gray-800/20 dark:text-gray-400" } } return (

Clients

Manage your client relationships and projects

Client Management View and manage all your clients and their projects

setSearchTerm(e.target.value)} />

setStatusFilter("all")}>All setStatusFilter("New Lead")}>New Lead setStatusFilter("Contacted")}>Contacted setStatusFilter("Meeting Scheduled")}> Meeting Scheduled setStatusFilter("Proposal Sent")}>Proposal Sent setStatusFilter("Active Client")}>Active Client

handleSort("name")}>

Name {sortField === "name" && ( )}

handleSort("email")}>

Contact {sortField === "email" && ( )}

Company Status handleSort("lastContact")} >

Last Contact {sortField === "lastContact" && ( )}

Tags Actions {filteredClients.map((client) => ( {client.name}

{client.email}

{client.phone}

{client.company} {client.status} {new Date(client.lastContact).toLocaleDateString()}

{client.tags.map((tag) => ( {tag} ))}

Actions Edit Client View Projects Send Message View Contracts Delete Client ))}

) } [V0_FILE]typescriptreact:file="app/dashboard/clients/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/dashboard/clients/new/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ArrowLeft, Save } from "lucide-react" import Link from "next/link" export default function NewClientPage() { const router = useRouter() const [isSubmitting, setIsSubmitting] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { setIsSubmitting(false) router.push("/dashboard/clients") }, 1000) } return (

Add New Client

Basic Information Contact Details Additional Information Basic Information Enter the client's basic information

First Name

Last Name

Company Name (Optional)

Client Type

Contact Details Enter the client's contact information

Email Address

Phone Number

Address

City

State/Province

Zip/Postal Code

Country

Additional Information Enter any additional information about the client

Referral Source

Notes

</div>
                <div className="space-y-2">
                  <Label htmlFor="tags">Tags</Label>
                  <Input id="tags" placeholder="residential, commercial, renovation" />
                  <p className="text-xs text-muted-foreground">Separate tags with commas</p>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" type="button" onClick={() => router.push("/dashboard/clients")}>
                  Cancel
                </Button>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? (
                    <>Saving...</>
                  ) : (
                    <>
                      <Save className="mr-2 h-4 w-4" />
                      Save Client
                    </>
                  )}
                </Button>
              </CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </form>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/clients/[id]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ArrowLeft,
  Pencil,
  FileText,
  MessageSquare,
  FileCodeIcon as FileContract,
  ClipboardList,
  Phone,
  Mail,
  MapPin,
  Calendar,
  Clock,
} from "lucide-react"
import Link from "next/link"

// Sample client data
const client = {
  id: "1",
  name: "John Smith",
  email: "john.smith@example.com",
  phone: "(555) 123-4567",
  address: "123 Main St, Anytown, CA 12345",
  company: "Smith Enterprises",
  clientType: "Business",
  referralSource: "Website",
  notes: "Interested in modern design aesthetics. Has a budget constraint but is flexible on timeline.",
  tags: ["commercial", "office", "renovation"],
  createdAt: "2024-12-15",
  projects: [
    {
      id: "p1",
      name: "Office Renovation",
      status: "In Progress",
      startDate: "2025-01-10",
      endDate: "2025-06-30",
      description: "Complete renovation of 3,000 sq ft office space",
    },
    {
      id: "p2",
      name: "Conference Room Design",
      status: "In Progress",
      startDate: "2025-02-15",
      endDate: "2025-04-30",
      description: "Design and furnishing of executive conference room",
    },
    {
      id: "p3",
      name: "Lobby Redesign",
      status: "Completed",
      startDate: "2024-08-01",
      endDate: "2024-11-30",
      description: "Modern redesign of company lobby and reception area",
    },
  ],
  communications: [
    {
      id: "c1",
      type: "Email",
      date: "2025-03-08",
      subject: "Project Update",
      content: "Sent weekly progress report on office renovation",
    },
    {
      id: "c2",
      type: "Meeting",
      date: "2025-03-05",
      subject: "Design Review",
      content: "Met to review conference room design options",
    },
    {
      id: "c3",
      type: "Phone Call",
      date: "2025-03-01",
      subject: "Budget Discussion",
      content: "Discussed budget adjustments for material upgrades",
    },
  ],
  contracts: [
    {
      id: "ct1",
      name: "Office Renovation Contract",
      status: "Active",
      signedDate: "2025-01-05",
      amount: "$85,000",
    },
    {
      id: "ct2",
      name: "Conference Room Design Contract",
      status: "Active",
      signedDate: "2025-02-10",
      amount: "$32,000",
    },
    {
      id: "ct3",
      name: "Lobby Redesign Contract",
      status: "Completed",
      signedDate: "2024-07-25",
      amount: "$45,000",
    },
  ],
}

export default function ClientDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState("overview")

return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-2">
          <Link href="/dashboard/clients">
            <Button variant="ghost" size="icon">
              <ArrowLeft className="h-4 w-4" />
            </Button>
          </Link>
          <h1 className="text-3xl font-bold tracking-tight">{client.name}</h1>
        </div>
        <div className="flex gap-2">
          <Button variant="outline">
            <MessageSquare className="mr-2 h-4 w-4" />
            Message
          </Button>
          <Button>
            <Pencil className="mr-2 h-4 w-4" />
            Edit Client
          </Button>
        </div>
      </div>

<Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
        <TabsList className="grid w-full grid-cols-2 md:grid-cols-5">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="projects">Projects</TabsTrigger>
          <TabsTrigger value="communications">Communications</TabsTrigger>
          <TabsTrigger value="contracts">Contracts</TabsTrigger>
          <TabsTrigger value="notes">Notes</TabsTrigger>
        </TabsList>

<TabsContent value="overview" className="space-y-4">
          <div className="grid gap-4 md:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle>Client Information</CardTitle>
                <CardDescription>Basic details about the client</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-2">
                  <Mail className="h-4 w-4 text-muted-foreground" />
                  <span>{client.email}</span>
                </div>
                <div className="flex items-center gap-2">
                  <Phone className="h-4 w-4 text-muted-foreground" />
                  <span>{client.phone}</span>
                </div>
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                  <span>{client.address}</span>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <p className="text-sm font-medium">Company</p>
                    <p className="text-sm text-muted-foreground">{client.company}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Client Type</p>
                    <p className="text-sm text-muted-foreground">{client.clientType}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Referral Source</p>
                    <p className="text-sm text-muted-foreground">{client.referralSource}</p>
                  </div>
                  <div>
                    <p className="text-sm font-medium">Client Since</p>
                    <p className="text-sm text-muted-foreground">{new Date(client.createdAt).toLocaleDateString()}</p>
                  </div>
                </div>
                <div>
                  <p className="text-sm font-medium">Tags</p>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {client.tags.map((tag) => (
                      <span
                        key={tag}
                        className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Client Notes</CardTitle>
                <CardDescription>Additional information about the client</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm">{client.notes}</p>
              </CardContent>
            </Card>
          </div>

<Card>
            <CardHeader>
              <CardTitle>Project Summary</CardTitle>
              <CardDescription>Overview of client projects</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Active Projects</div>
                    <div className="text-2xl font-bold">
                      {client.projects.filter((p) => p.status === "In Progress").length}
                    </div>
                  </div>
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Completed Projects</div>
                    <div className="text-2xl font-bold">
                      {client.projects.filter((p) => p.status === "Completed").length}
                    </div>
                  </div>
                  <div className="rounded-lg border p-3">
                    <div className="text-sm font-medium">Total Contract Value</div>
                    <div className="text-2xl font-bold">
                      {client.contracts
                        .reduce((sum, contract) => {
                          const amount = Number.parseFloat(contract.amount.replace(/[$,]/g, ""))
                          return sum + amount
                        }, 0)
                        .toLocaleString("en-US", { style: "currency", currency: "USD" })}
                    </div>
                  </div>
                </div>

<div>
                  <h3 className="text-lg font-medium mb-2">Recent Projects</h3>
                  <div className="space-y-3">
                    {client.projects.slice(0, 2).map((project) => (
                      <div key={project.id} className="flex items-start gap-4 rounded-lg border p-3">
                        <div className="flex-1">
                          <div className="font-medium">{project.name}</div>
                          <div className="text-sm text-muted-foreground">{project.description}</div>
                          <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
                            <Calendar className="h-3 w-3" />
                            <span>
                              {new Date(project.startDate).toLocaleDateString()} -{" "}
                              {new Date(project.endDate).toLocaleDateString()}
                            </span>
                          </div>
                        </div>
                        <div
                          className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
                            project.status === "Completed"
                              ? "bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"
                              : "bg-blue-100 text-blue-800 dark:bg-blue-800/20 dark:text-blue-400"
                          }`}
                        >
                          {project.status}
                        </div>
                      </div>
                    ))}
                  </div>
                  <Button variant="ghost" className="mt-2" onClick={() => setActiveTab("projects")}>
                    View all projects
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

<Card>
            <CardHeader>
              <CardTitle>Recent Communications</CardTitle>
              <CardDescription>Latest interactions with the client</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {client.communications.slice(0, 3).map((comm) => (
                  <div key={comm.id} className="flex items-start gap-4 rounded-lg border p-3">
                    <div className="flex-1">
                      <div className="font-medium">{comm.subject}</div>
                      <div className="text-sm text-muted-foreground">{comm.content}</div>
                      <div className="mt-1 flex items-center gap-2 text-xs text-muted-foreground">
                        <Clock className="h-3 w-3" />
                        <span>{new Date(comm.date).toLocaleDateString()}</span>
                        <span className="rounded-full bg-secondary px-2 py-0.5 text-xs font-medium">{comm.type}</span>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <Button variant="ghost" className="mt-2" onClick={() => setActiveTab("communications")}>
                View all communications
              </Button>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="projects" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>Projects</CardTitle>
                <CardDescription>All projects for this client</CardDescription>
              </div>
              <Button>
                <FileText className="mr-2 h-4 w-4" />
                New Project
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {client.projects.map((project) => (
                  <div key={project.id} className="rounded-lg border p-4">
                    <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                      <div>
                        <h3 className="font-medium">{project.name}</h3>
                        <p className="text-sm text-muted-foreground">{project.description}</p>
                        <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
                          <div className="flex items-center gap-1">
                            <Calendar className="h-4 w-4 text-muted-foreground" />
                            <span>
                              {new Date(project.startDate).toLocaleDateString()} -{" "}
                              {new Date(project.endDate).toLocaleDateString()}
                            </span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div
                          className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
                            project.status === "Completed"
                              ? "bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"
                              : "bg-blue-100 text-blue-800 dark:bg-blue-800/20 dark:text-blue-400"
                          }`}
                        >
                          {project.status}
                        </div>
                        <Button variant="outline" size="sm">
                          View Details
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="communications" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>Communications</CardTitle>
                <CardDescription>History of all client communications</CardDescription>
              </div>
              <Button>
                <MessageSquare className="mr-2 h-4 w-4" />
                New Message
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {client.communications.map((comm) => (
                  <div key={comm.id} className="rounded-lg border p-4">
                    <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                      <div>
                        <h3 className="font-medium">{comm.subject}</h3>
                        <p className="text-sm text-muted-foreground">{comm.content}</p>
                        <div className="mt-2 flex items-center gap-2 text-sm text-muted-foreground">
                          <Clock className="h-4 w-4" />
                          <span>{new Date(comm.date).toLocaleDateString()}</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <span className="rounded-full bg-secondary px-2.5 py-0.5 text-xs font-medium">{comm.type}</span>
                        <Button variant="outline" size="sm">
                          View Details
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="contracts" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>Contracts</CardTitle>
                <CardDescription>All contracts with this client</CardDescription>
              </div>
              <Button>
                <FileContract className="mr-2 h-4 w-4" />
                New Contract
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {client.contracts.map((contract) => (
                  <div key={contract.id} className="rounded-lg border p-4">
                    <div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
                      <div>
                        <h3 className="font-medium">{contract.name}</h3>
                        <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm">
                          <div className="flex items-center gap-1">
                            <Calendar className="h-4 w-4 text-muted-foreground" />
                            <span>Signed: {new Date(contract.signedDate).toLocaleDateString()}</span>
                          </div>
                          <div>
                            <span className="font-medium">Amount:</span> {contract.amount}
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div
                          className={`rounded-full px-2.5 py-0.5 text-xs font-semibold ${
                            contract.status === "Completed"
                              ? "bg-green-100 text-green-800 dark:bg-green-800/20 dark:text-green-400"
                              : "bg-blue-100 text-blue-800 dark:bg-blue-800/20 dark:text-blue-400"
                          }`}
                        >
                          {contract.status}
                        </div>
                        <Button variant="outline" size="sm">
                          View Contract
                        </Button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="notes" className="space-y-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <div>
                <CardTitle>Notes & Activities</CardTitle>
                <CardDescription>Record of activities and notes for this client</CardDescription>
              </div>
              <Button>
                <ClipboardList className="mr-2 h-4 w-4" />
                Add Note
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="rounded-lg border p-4">
                  <div className="mb-2 flex items-center justify-between">
                    <h3 className="font-medium">Initial Consultation Notes</h3>
                    <span className="text-sm text-muted-foreground">March 1, 2025</span>
                  </div>
                  <p className="text-sm">
                    Client expressed interest in modern design with sustainable materials. Budget is approximately
                    $150,000 for the entire office renovation. Timeline needs to accommodate continued operations during
                    construction.
                  </p>
                </div>
                <div className="rounded-lg border p-4">
                  <div className="mb-2 flex items-center justify-between">
                    <h3 className="font-medium">Design Preferences</h3>
                    <span className="text-sm text-muted-foreground">February 15, 2025</span>
                  </div>
                  <p className="text-sm">
                    Client prefers open floor plan with flexible workspaces. Color scheme should incorporate company
                    branding (blue and gray). Natural lighting is a priority for all workspaces.
                  </p>
                </div>
                <div className="rounded-lg border p-4">
                  <div className="mb-2 flex items-center justify-between">
                    <h3 className="font-medium">Budget Adjustment</h3>
                    <span className="text-sm text-muted-foreground">January 20, 2025</span>
                  </div>
                  <p className="text-sm">
                    Client approved additional budget of $25,000 for premium materials in the conference room and
                    reception area. Total budget now $175,000.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescript:file="hooks/use-mobile.ts" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export const useMobile = () => {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768) // Adjust breakpoint as needed
    }

// Set initial value
    handleResize()

// Listen for window resize events
    window.addEventListener("resize", handleResize)

// Clean up event listener on unmount
    return () => {
      window.removeEventListener("resize", handleResize)
    }
  }, [])

return isMobile
}

[V0_FILE]typescriptreact:file="app/dashboard/clients/kanban/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
import { Search, Plus, MoreHorizontal, Phone, Mail, Calendar } from "lucide-react"
import Link from "next/link"

// Sample client data
const initialClients = {
  new: [
    {
      id: "client-1",
      name: "David Wilson",
      email: "david.wilson@example.com",
      phone: "(555) 456-7890",
      company: "Wilson Enterprises",
      status: "New Lead",
      lastContact: "2025-03-01",
      tags: ["commercial", "high-budget"],
      avatar: "DW",
    },
    {
      id: "client-2",
      name: "Emily Johnson",
      email: "emily.johnson@example.com",
      phone: "(555) 234-5678",
      company: "Johnson Family",
      status: "New Lead",
      lastContact: "2025-03-05",
      tags: ["residential", "renovation"],
      avatar: "EJ",
    },
    {
      id: "client-3",
      name: "Carlos Mendez",
      email: "carlos.mendez@example.com",
      phone: "(555) 987-6543",
      company: "Mendez Restaurants",
      status: "New Lead",
      lastContact: "2025-03-08",
      tags: ["commercial", "restaurant"],
      avatar: "CM",
    },
  ],
  contacted: [
    {
      id: "client-4",
      name: "Sarah Parker",
      email: "sarah.parker@example.com",
      phone: "(555) 234-5678",
      company: "Parker Industries",
      status: "Contacted",
      lastContact: "2025-03-10",
      tags: ["commercial", "office"],
      avatar: "SP",
    },
    {
      id: "client-5",
      name: "Michael Brown",
      email: "michael.brown@example.com",
      phone: "(555) 876-5432",
      company: "Brown Family",
      status: "Contacted",
      lastContact: "2025-03-12",
      tags: ["residential", "new-build"],
      avatar: "MB",
    },
  ],
  meeting: [
    {
      id: "client-6",
      name: "Jennifer Lee",
      email: "jennifer.lee@example.com",
      phone: "(555) 345-6789",
      company: "Lee Designs",
      status: "Meeting Scheduled",
      lastContact: "2025-03-15",
      tags: ["commercial", "interior"],
      avatar: "JL",
    },
    {
      id: "client-7",
      name: "Robert Garcia",
      email: "robert.garcia@example.com",
      phone: "(555) 567-8901",
      company: "Garcia Homes",
      status: "Meeting Scheduled",
      lastContact: "2025-03-18",
      tags: ["residential", "luxury"],
      avatar: "RG",
    },
  ],
  proposal: [
    {
      id: "client-8",
      name: "Maria Rodriguez",
      email: "maria.rodriguez@example.com",
      phone: "(555) 678-9012",
      company: "Rodriguez Family",
      status: "Proposal Sent",
      lastContact: "2025-03-20",
      tags: ["residential", "renovation"],
      avatar: "MR",
    },
    {
      id: "client-9",
      name: "James Wilson",
      email: "james.wilson@example.com",
      phone: "(555) 789-0123",
      company: "Wilson Properties",
      status: "Proposal Sent",
      lastContact: "2025-03-22",
      tags: ["commercial", "retail"],
      avatar: "JW",
    },
  ],
  active: [
    {
      id: "client-10",
      name: "John Smith",
      email: "john.smith@example.com",
      phone: "(555) 123-4567",
      company: "Smith Enterprises",
      status: "Active Client",
      lastContact: "2025-03-25",
      tags: ["commercial", "office"],
      avatar: "JS",
    },
    {
      id: "client-11",
      name: "Lisa Chen",
      email: "lisa.chen@example.com",
      phone: "(555) 890-1234",
      company: "Chen Family",
      status: "Active Client",
      lastContact: "2025-03-28",
      tags: ["residential", "modern"],
      avatar: "LC",
    },
  ],
}

const columnTitles = {
  new: "New Leads",
  contacted: "Contacted",
  meeting: "Meeting Scheduled",
  proposal: "Proposal Sent",
  active: "Active Clients",
}

export default function ClientsKanbanPage() {
  const [clients, setClients] = useState(initialClients)
  const [searchTerm, setSearchTerm] = useState("")

const handleDragEnd = (result) => {
    const { destination, source, draggableId } = result

// If there's no destination or the item is dropped back in the same place
    if (!destination || (destination.droppableId === source.droppableId && destination.index === source.index)) {
      return
    }

// Find the client that was dragged
    const sourceColumn = clients[source.droppableId]
    const draggedClient = sourceColumn.find((client) => client.id === draggableId)

// Create new arrays for the source and destination columns
    const newSourceColumn = [...sourceColumn]
    newSourceColumn.splice(source.index, 1)

const destinationColumn = clients[destination.droppableId]
    const newDestinationColumn = [...destinationColumn]
    newDestinationColumn.splice(destination.index, 0, draggedClient)

// Update the state with the new arrays
    setClients({
      ...clients,
      [source.droppableId]: newSourceColumn,
      [destination.droppableId]: newDestinationColumn,
    })
  }

const filteredClients = Object.keys(clients).reduce((acc, columnId) => {
    acc[columnId] = clients[columnId].filter(
      (client) =>
        client.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
        client.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
        client.company.toLowerCase().includes(searchTerm.toLowerCase()),
    )
    return acc
  }, {})

return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Client Kanban</h1>
          <p className="text-muted-foreground">Manage your client pipeline visually</p>
        </div>
        <div className="flex gap-2">
          <Link href="/dashboard/clients">
            <Button variant="outline">List View</Button>
          </Link>
          <Link href="/dashboard/clients/new">
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Client
            </Button>
          </Link>
        </div>
      </div>

<div className="flex flex-col gap-4">
        <div className="flex flex-col gap-4 sm:flex-row">
          <div className="relative flex-1">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              type="search"
              placeholder="Search clients..."
              className="pl-8"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
          <div className="flex gap-2">
            <Button variant="outline">Filter</Button>
            <Button variant="outline">Export</Button>
          </div>
        </div>

<DragDropContext onDragEnd={handleDragEnd}>
          <div className="flex gap-4 overflow-x-auto pb-4">
            {Object.keys(columnTitles).map((columnId) => (
              <div key={columnId} className="flex-shrink-0 w-80">
                <Card className="h-full">
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle className="text-lg">{columnTitles[columnId]}</CardTitle>
                      <Badge variant="outline">{filteredClients[columnId].length}</Badge>
                    </div>
                    <CardDescription>
                      {columnId === "new" && "New potential clients"}
                      {columnId === "contacted" && "Initial contact made"}
                      {columnId === "meeting" && "Meeting date confirmed"}
                      {columnId === "proposal" && "Waiting for approval"}
                      {columnId === "active" && "Ongoing projects"}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="pt-2">
                    <Droppable droppableId={columnId}>
                      {(provided) => (
                        <div ref={provided.innerRef} {...provided.droppableProps} className="space-y-3 min-h-[200px]">
                          {filteredClients[columnId].map((client, index) => (
                            <Draggable key={client.id} draggableId={client.id} index={index}>
                              {(provided) => (
                                <div
                                  ref={provided.innerRef}
                                  {...provided.draggableProps}
                                  {...provided.dragHandleProps}
                                  className="rounded-md border bg-card p-3 shadow-sm"
                                >
                                  <div className="flex items-start justify-between">
                                    <div className="flex items-start gap-3">
                                      <Avatar className="h-8 w-8 bg-primary/10">
                                        <AvatarFallback className="text-primary">{client.avatar}</AvatarFallback>
                                      </Avatar>
                                      <div>
                                        <h3 className="font-medium">{client.name}</h3>
                                        <p className="text-sm text-muted-foreground">{client.company}</p>
                                      </div>
                                    </div>
                                    <Button variant="ghost" size="icon" className="h-8 w-8">
                                      <MoreHorizontal className="h-4 w-4" />
                                    </Button>
                                  </div>
                                  <div className="mt-2 space-y-2">
                                    <div className="flex items-center text-xs text-muted-foreground">
                                      <Mail className="mr-1 h-3 w-3" />
                                      <span>{client.email}</span>
                                    </div>
                                    <div className="flex items-center text-xs text-muted-foreground">
                                      <Phone className="mr-1 h-3 w-3" />
                                      <span>{client.phone}</span>
                                    </div>
                                    <div className="flex items-center text-xs text-muted-foreground">
                                      <Calendar className="mr-1 h-3 w-3" />
                                      <span>Last Contact: {new Date(client.lastContact).toLocaleDateString()}</span>
                                    </div>
                                  </div>
                                  <div className="mt-2 flex flex-wrap gap-1">
                                    {client.tags.map((tag) => (
                                      <Badge key={tag} variant="secondary" className="text-xs">
                                        {tag}
                                      </Badge>
                                    ))}
                                  </div>
                                </div>
                              )}
                            </Draggable>
                          ))}
                          {provided.placeholder}
                        </div>
                      )}
                    </Droppable>
                  </CardContent>
                </Card>
              </div>
            ))}
          </div>
        </DragDropContext>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/clients/kanban/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}

[V0_FILE]json:file="package.json" type="code" isFixed="true" isQuickEdit="true" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@hookform/resolvers": "^3.9.1",
    "@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.2",
    "@radix-ui/react-checkbox": "^1.1.3",
    "@radix-ui/react-collapsible": "^1.1.2",
    "@radix-ui/react-context-menu": "^2.2.4",
    "@radix-ui/react-dialog": "^1.1.4",
    "@radix-ui/react-dropdown-menu": "^2.1.4",
    "@radix-ui/react-hover-card": "^1.1.4",
    "@radix-ui/react-label": "^2.1.1",
    "@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.1",
    "@radix-ui/react-slider": "^1.2.2",
    "@radix-ui/react-slot": "^1.1.1",
    "@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.6",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "14.2.16",
    "next-themes": "^0.4.4",
    "react": "^19",
    "react-day-picker": "8.10.1",
    "react-dom": "^19",
    "react-hook-form": "^7.54.1",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.0",
    "sonner": "^1.7.1",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^0.9.6",
    "zod": "^3.24.1",
    "@hello-pangea/dnd": "^16.5.0"
  },
  "devDependencies": {
    "@types/node": "^22",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "postcss": "^8",
    "tailwindcss": "^3.4.17",
    "typescript": "^5"
  }
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  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: "#007AFF", // Apple Blue
          foreground: "#FFFFFF", // White
        },
        secondary: {
          DEFAULT: "#F5F5F7", // Light Gray (Apple background)
          foreground: "#1C1C1E", // Space Gray
        },
        accent: {
          DEFAULT: "#34C759", // Apple Green
          foreground: "#FFFFFF", // White
        },
        destructive: {
          DEFAULT: "#FF3B30", // Apple Red
          foreground: "#FFFFFF", // White
        },
        muted: {
          DEFAULT: "#F5F5F7", // Light Gray
          foreground: "#86868B", // Apple Secondary Text
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      fontFamily: {
        sans: ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"],
      },
      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 },
        },
        "fade-in": {
          from: { opacity: 0 },
          to: { opacity: 1 },
        },
        "slide-up": {
          from: { transform: "translateY(10px)", opacity: 0 },
          to: { transform: "translateY(0)", opacity: 1 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "fade-in": "fade-in 0.3s ease-out",
        "slide-up": "slide-up 0.3s ease-out",
      },
      backdropFilter: {
        none: "none",
        blur: "blur(20px)",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]css:file="app/globals.css" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 211 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 142 70.6% 45.3%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 211 100% 50%;
  --radius: 12px;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 211 100% 50%;
  --primary-foreground: 0 0% 100%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --accent: 142 70.6% 45.3%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 3.7% 15.9%;
  --input: 240 3.7% 15.9%;
  --ring: 211 100% 50%;
}

body {
  @apply bg-background text-foreground antialiased;
  font-feature-settings: "ss01" on, "ss02" on, "ss03" on, "ss04" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apple-style frosted glass effect */
.frosted-glass {
  @apply bg-white/70 dark:bg-black/70 backdrop-blur-lg border border-white/20 dark:border-white/10;
}

.card-hover {
  @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
}

/* Apple-style button */
.apple-button {
  @apply rounded-full bg-primary text-white font-medium px-5 py-2 transition-all duration-200 hover:bg-primary/90 active:scale-95;
}

/* Apple-style card */
.apple-card {
  @apply bg-white dark:bg-[#1C1C1E] rounded-xl shadow-sm border border-gray-100 dark:border-gray-800 overflow-hidden transition-all duration-300;
}

/* Apple-style input */
.apple-input {
  @apply rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1C1C1E] px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary/30;
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx"
"use client"

import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import { Moon, Sun } from "lucide-react"
import { useEffect, useState } from "react"

export function ThemeToggle() {
  const { setTheme, theme } = useTheme()
  const [mounted, setMounted] = useState(false)

useEffect(() => {
    setMounted(true)
  }, [])

if (!mounted) {
    return null
  }

return (
    <Button
      variant="ghost"
      size="icon"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      className="rounded-full w-8 h-8"
    >
      {theme === "dark" ? <Moon className="h-[1.2rem] w-[1.2rem]" /> : <Sun className="h-[1.2rem] w-[1.2rem]" />}
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/layout.tsx" isEdit="true"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import {
  Users,
  UserCircle,
  FileText,
  MessageSquare,
  Bell,
  FileCodeIcon as FileContract,
  ClipboardList,
  Menu,
  X,
  LogOut,
  Home,
  ChevronDown,
  Search,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useMobile } from "@/hooks/use-mobile"
import { ThemeToggle } from "@/components/theme-toggle"
import { Input } from "@/components/ui/input"

interface NavItemProps {
  href: string
  icon: React.ReactNode
  label: string
  active: boolean
  onClick?: () => void
  children?: { href: string; label: string }[]
}

function NavItem({
  href,
  icon,
  label,
  active,
  onClick,
  children,
}: NavItemProps & { children?: { href: string; label: string }[] }) {
  const [open, setOpen] = useState(false)
  const pathname = usePathname()

if (children) {
    return (
      <div className="space-y-1">
        <button
          onClick={() => setOpen(!open)}
          className={cn(
            "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-sm transition-all duration-200",
            active
              ? "bg-primary/10 text-primary font-medium"
              : "text-foreground/80 hover:bg-secondary hover:text-foreground",
          )}
        >
          {icon}
          {label}
          <ChevronDown className={cn("ml-auto h-4 w-4 transition-transform duration-200", open ? "rotate-180" : "")} />
        </button>
        {open && (
          <div className="ml-6 space-y-1 pt-1 animate-slide-up">
            {children.map((child) => (
              <Link
                key={child.href}
                href={child.href}
                onClick={onClick}
                className={cn(
                  "flex items-center rounded-xl px-3 py-2 text-sm transition-all duration-200",
                  pathname === child.href
                    ? "text-primary font-medium"
                    : "text-foreground/70 hover:bg-secondary hover:text-foreground",
                )}
              >
                {child.label}
              </Link>
            ))}
          </div>
        )}
      </div>
    )
  }

return (
    <Link
      href={href}
      onClick={onClick}
      className={cn(
        "flex items-center gap-3 rounded-xl px-3 py-2 text-sm transition-all duration-200",
        active
          ? "bg-primary/10 text-primary font-medium"
          : "text-foreground/80 hover:bg-secondary hover:text-foreground",
      )}
    >
      {icon}
      {label}
    </Link>
  )
}

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  const pathname = usePathname()
  const isMobile = useMobile()
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [scrolled, setScrolled] = useState(false)

useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 10)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const navItems = [
    { href: "/dashboard", icon: <Home className="h-4 w-4" />, label: "Dashboard" },
    {
      href: "/dashboard/clients",
      icon: <Users className="h-4 w-4" />,
      label: "Clients",
      children: [
        { href: "/dashboard/clients", label: "List View" },
        { href: "/dashboard/clients/kanban", label: "Kanban View" },
      ],
    },
    { href: "/dashboard/architects", icon: <UserCircle className="h-4 w-4" />, label: "Architects" },
    { href: "/dashboard/projects", icon: <FileText className="h-4 w-4" />, label: "Projects" },
    { href: "/dashboard/notes", icon: <ClipboardList className="h-4 w-4" />, label: "Notes" },
    { href: "/dashboard/messages", icon: <MessageSquare className="h-4 w-4" />, label: "Messages" },
    { href: "/dashboard/contracts", icon: <FileContract className="h-4 w-4" />, label: "Contracts" },
    { href: "/dashboard/forms", icon: <ClipboardList className="h-4 w-4" />, label: "Forms" },
  ]

const toggleSidebar = () => setSidebarOpen(!sidebarOpen)
  const closeSidebar = () => setSidebarOpen(false)

return (
    <div className="flex min-h-screen flex-col bg-secondary dark:bg-[#000000]">
      {/* Header */}
      <header
        className={cn(
          "sticky top-0 z-30 flex h-16 items-center gap-4 px-4 md:px-6 transition-all duration-200",
          scrolled
            ? "bg-white/80 dark:bg-[#1C1C1E]/80 backdrop-blur-md border-b border-gray-200/50 dark:border-gray-800/50"
            : "bg-white dark:bg-[#1C1C1E] border-b border-gray-200 dark:border-gray-800",
        )}
      >
        <Button variant="ghost" size="icon" className="md:hidden rounded-full" onClick={toggleSidebar}>
          <Menu className="h-5 w-5 text-foreground" />
          <span className="sr-only">Toggle menu</span>
        </Button>
        <div className="flex items-center gap-2">
          <Link href="/" className="flex items-center gap-2 font-semibold">
            <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
              <span className="text-white font-bold text-sm">A</span>
            </div>
            <span className="text-lg font-medium text-foreground">ArchiCRM</span>
          </Link>
        </div>

<div className="ml-auto flex items-center gap-2">
          <ThemeToggle />
          <Button variant="ghost" size="icon" className="rounded-full">
            <Bell className="h-5 w-5 text-foreground" />
            <span className="sr-only">Notifications</span>
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" className="relative h-8 w-8 rounded-full">
                <Avatar className="h-8 w-8">
                  <AvatarImage src="/placeholder.svg?height=32&width=32" alt="Avatar" />
                  <AvatarFallback className="bg-primary text-white">AD</AvatarFallback>
                </Avatar>
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent className="w-56 mt-1 frosted-glass" align="end" forceMount>
              <DropdownMenuLabel className="font-normal">
                <div className="flex flex-col space-y-1">
                  <p className="text-sm font-medium leading-none">Architect Name</p>
                  <p className="text-xs leading-none text-muted-foreground">architect@example.com</p>
                </div>
              </DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem>
                <UserCircle className="mr-2 h-4 w-4" />
                <span>Profile</span>
              </DropdownMenuItem>
              <DropdownMenuItem>
                <LogOut className="mr-2 h-4 w-4" />
                <span>Log out</span>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </header>

<div className="flex flex-1">
        {/* Sidebar for mobile */}
        {isMobile && (
          <div
            className={cn(
              "fixed inset-0 z-40 bg-background/80 backdrop-blur-sm transition-all duration-300",
              sidebarOpen ? "opacity-100" : "pointer-events-none opacity-0",
            )}
            onClick={closeSidebar}
          >
            <div
              className={cn(
                "fixed inset-y-0 left-0 z-40 w-64 bg-white dark:bg-[#1C1C1E] p-4 shadow-lg transition-transform duration-300 ease-in-out",
                sidebarOpen ? "translate-x-0" : "-translate-x-full",
              )}
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex items-center justify-between mb-6">
                <div className="flex items-center gap-2">
                  <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                    <span className="text-white font-bold text-sm">A</span>
                  </div>
                  <span className="font-medium text-foreground">ArchiCRM</span>
                </div>
                <Button variant="ghost" size="icon" onClick={closeSidebar} className="rounded-full">
                  <X className="h-5 w-5 text-foreground" />
                </Button>
              </div>
              <div className="relative mb-4">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search..."
                  className="pl-9 rounded-full bg-secondary dark:bg-[#2C2C2E] border-0 focus-visible:ring-primary/20"
                />
              </div>
              <nav className="flex flex-col gap-1">
                {navItems.map((item) => (
                  <NavItem
                    key={item.href}
                    href={item.href}
                    icon={item.icon}
                    label={item.label}
                    active={
                      item.children
                        ? item.children.some((child) => pathname === child.href) || pathname === item.href
                        : pathname === item.href
                    }
                    onClick={closeSidebar}
                    children={item.children}
                  />
                ))}
              </nav>
            </div>
          </div>
        )}

{/* Sidebar for desktop */}
        {!isMobile && (
          <div className="hidden w-64 flex-col border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1C1C1E] md:flex">
            <div className="p-6">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                  <span className="text-white font-bold text-sm">A</span>
                </div>
                <span className="font-medium text-foreground">ArchiCRM</span>
              </div>
            </div>
            <div className="px-4 mb-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder="Search..."
                  className="pl-9 rounded-full bg-secondary dark:bg-[#2C2C2E] border-0 focus-visible:ring-primary/20"
                />
              </div>
            </div>
            <nav className="flex flex-col gap-1 p-4">
              {navItems.map((item) => (
                <NavItem
                  key={item.href}
                  href={item.href}
                  icon={item.icon}
                  label={item.label}
                  active={
                    item.children
                      ? item.children.some((child) => pathname === child.href) || pathname === item.href
                      : pathname === item.href
                  }
                  children={item.children}
                />
              ))}
            </nav>
          </div>
        )}

{/* Main content */}
        <main className="flex-1 p-4 md:p-6 animate-fade-in">{children}</main>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import {
  Users,
  FileText,
  MessageSquare,
  FileCodeIcon as FileContract,
  Calendar,
  DollarSign,
  Clock,
  ArrowUpRight,
  ArrowDownRight,
  MoreHorizontal,
  ChevronRight,
  Plus,
  BarChart3,
  PieChart,
  Activity,
} from "lucide-react"
import Link from "next/link"
import {
  BarChart,
  Bar,
  PieChart as RechartPieChart,
  Pie,
  Cell,
  ResponsiveContainer,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
} from "recharts"

// Mock data for charts
const projectData = [
  { name: "Jan", completed: 65, new: 28 },
  { name: "Feb", completed: 59, new: 48 },
  { name: "Mar", completed: 80, new: 40 },
  { name: "Apr", completed: 81, new: 19 },
  { name: "May", completed: 56, new: 86 },
  { name: "Jun", completed: 55, new: 27 },
  { name: "Jul", completed: 40, new: 90 },
]

const revenueData = [
  { name: "Residential", value: 24500 },
  { name: "Commercial", value: 12250 },
  { name: "Renovation", value: 7350 },
  { name: "Other", value: 4900 },
]

const COLORS = ["#007AFF", "#34C759", "#FF9500", "#FF3B30"]

export default function DashboardPage() {
  const [period, setPeriod] = useState("month")

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground">Dashboard</h1>
          <p className="text-muted-foreground">
            Welcome back, Eduardo. Here's an overview of your architecture practice.
          </p>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="outline" className="rounded-full border-gray-200 dark:border-gray-800">
            <Calendar className="mr-2 h-4 w-4" />
            {new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
          </Button>
        </div>
      </div>

{/* Key Metrics */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card className="apple-card card-hover">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Clients</CardTitle>
            <Users className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">24</div>
            <div className="flex items-center pt-1 text-xs text-green-500">
              <ArrowUpRight className="mr-1 h-3 w-3" />
              <span>8% from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="apple-card card-hover">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Active Projects</CardTitle>
            <FileText className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">12</div>
            <div className="flex items-center pt-1 text-xs text-green-500">
              <ArrowUpRight className="mr-1 h-3 w-3" />
              <span>12% from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="apple-card card-hover">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Revenue</CardTitle>
            <DollarSign className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">$48,500</div>
            <div className="flex items-center pt-1 text-xs text-red-500">
              <ArrowDownRight className="mr-1 h-3 w-3" />
              <span>3% from last month</span>
            </div>
          </CardContent>
        </Card>
        <Card className="apple-card card-hover">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Pending Contracts</CardTitle>
            <FileContract className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">3</div>
            <div className="flex items-center pt-1 text-xs text-green-500">
              <ArrowUpRight className="mr-1 h-3 w-3" />
              <span>2 new this week</span>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Charts Section */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card className="apple-card">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <BarChart3 className="h-5 w-5 text-primary" />
                <CardTitle className="text-lg">Project Overview</CardTitle>
              </div>
              <div className="flex items-center gap-2">
                <select
                  className="text-sm border-0 bg-transparent text-muted-foreground focus:ring-0"
                  value={period}
                  onChange={(e) => setPeriod(e.target.value)}
                >
                  <option value="week">This Week</option>
                  <option value="month">This Month</option>
                  <option value="year">This Year</option>
                </select>
                <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
                  <MoreHorizontal className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <CardDescription>Project completion and new projects</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[240px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={projectData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
                  <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip
                    contentStyle={{
                      borderRadius: "8px",
                      border: "none",
                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                      background: "rgba(255, 255, 255, 0.9)",
                    }}
                  />
                  <Legend />
                  <Bar dataKey="completed" name="Completed Projects" fill="#007AFF" radius={[4, 4, 0, 0]} />
                  <Bar dataKey="new" name="New Clients" fill="#34C759" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </CardContent>
        </Card>

<Card className="apple-card">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <PieChart className="h-5 w-5 text-primary" />
                <CardTitle className="text-lg">Revenue Breakdown</CardTitle>
              </div>
              <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
                <MoreHorizontal className="h-4 w-4" />
              </Button>
            </div>
            <CardDescription>Revenue by project type</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-[240px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <RechartPieChart>
                  <Pie
                    data={revenueData}
                    cx="50%"
                    cy="50%"
                    innerRadius={60}
                    outerRadius={80}
                    paddingAngle={2}
                    dataKey="value"
                    label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                    labelLine={false}
                  >
                    {revenueData.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                  </Pie>
                  <Tooltip
                    formatter={(value) => [`$${value.toLocaleString()}`, "Revenue"]}
                    contentStyle={{
                      borderRadius: "8px",
                      border: "none",
                      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                      background: "rgba(255, 255, 255, 0.9)",
                    }}
                  />
                </RechartPieChart>
              </ResponsiveContainer>
            </div>
            <div className="grid grid-cols-2 gap-4 mt-4">
              {revenueData.map((item, index) => (
                <div key={item.name} className="flex items-center gap-2">
                  <div
                    className="h-3 w-3 rounded-full"
                    style={{ backgroundColor: COLORS[index % COLORS.length] }}
                  ></div>
                  <div className="flex flex-col">
                    <span className="text-sm font-medium">{item.name}</span>
                    <span className="text-xs text-muted-foreground">
                      ${item.value.toLocaleString()} (
                      {((item.value / revenueData.reduce((acc, curr) => acc + curr.value, 0)) * 100).toFixed(0)}%)
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Recent Activity and Upcoming */}
      <div className="grid gap-4 md:grid-cols-2">
        <Card className="apple-card">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Activity className="h-5 w-5 text-primary" />
                <CardTitle className="text-lg">Recent Activity</CardTitle>
              </div>
              <Button variant="ghost" size="sm" className="gap-1 text-primary rounded-full">
                View All <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-start gap-4">
                <div className="rounded-full bg-primary/10 p-2">
                  <MessageSquare className="h-4 w-4 text-primary" />
                </div>
                <div className="flex-1 space-y-1">
                  <div className="flex items-center justify-between">
                    <p className="font-medium">New message from John Smith</p>
                    <span className="text-xs text-muted-foreground">2h ago</span>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    "Can we schedule a meeting to discuss the kitchen layout?"
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="rounded-full bg-green-100 dark:bg-green-900/30 p-2">
                  <FileContract className="h-4 w-4 text-green-600 dark:text-green-400" />
                </div>
                <div className="flex-1 space-y-1">
                  <div className="flex items-center justify-between">
                    <p className="font-medium">Contract signed by Maria Johnson</p>
                    <span className="text-xs text-muted-foreground">Yesterday</span>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Residential renovation project contract has been signed
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="rounded-full bg-blue-100 dark:bg-blue-900/30 p-2">
                  <Users className="h-4 w-4 text-blue-600 dark:text-blue-400" />
                </div>
                <div className="flex-1 space-y-1">
                  <div className="flex items-center justify-between">
                    <p className="font-medium">New client registration</p>
                    <span className="text-xs text-muted-foreground">2 days ago</span>
                  </div>
                  <p className="text-sm text-muted-foreground">David Wilson has registered as a new client</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-2">
                  <FileText className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                </div>
                <div className="flex-1 space-y-1">
                  <div className="flex items-center justify-between">
                    <p className="font-medium">Project milestone completed</p>
                    <span className="text-xs text-muted-foreground">3 days ago</span>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Initial designs for the Parker Office project approved
                  </p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="apple-card">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Calendar className="h-5 w-5 text-primary" />
                <CardTitle className="text-lg">Upcoming Events</CardTitle>
              </div>
              <Button variant="ghost" size="sm" className="gap-1 text-primary rounded-full">
                View Calendar <ChevronRight className="h-4 w-4" />
              </Button>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-start gap-4 rounded-lg border border-gray-100 dark:border-gray-800 p-3 transition-all hover:shadow-sm">
                <div className="flex flex-col items-center justify-center rounded-md bg-primary/10 px-2 py-1 text-center">
                  <span className="text-xs font-medium text-primary">MAY</span>
                  <span className="text-lg font-bold text-primary">12</span>
                </div>
                <div className="flex-1 space-y-1">
                  <p className="font-medium">Client Meeting: Sarah Parker</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="mr-1 h-3 w-3" />
                    <span>10:00 AM - 11:30 AM</span>
                  </div>
                  <p className="text-sm text-muted-foreground">Initial consultation for office redesign</p>
                </div>
              </div>
              <div className="flex items-start gap-4 rounded-lg border border-gray-100 dark:border-gray-800 p-3 transition-all hover:shadow-sm">
                <div className="flex flex-col items-center justify-center rounded-md bg-primary/10 px-2 py-1 text-center">
                  <span className="text-xs font-medium text-primary">MAY</span>
                  <span className="text-lg font-bold text-primary">15</span>
                </div>
                <div className="flex-1 space-y-1">
                  <p className="font-medium">Project Deadline: Johnson Residence</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="mr-1 h-3 w-3" />
                    <span>End of Day</span>
                  </div>
                  <p className="text-sm text-muted-foreground">Final design submission due</p>
                </div>
              </div>
              <div className="flex items-start gap-4 rounded-lg border border-gray-100 dark:border-gray-800 p-3 transition-all hover:shadow-sm">
                <div className="flex flex-col items-center justify-center rounded-md bg-primary/10 px-2 py-1 text-center">
                  <span className="text-xs font-medium text-primary">MAY</span>
                  <span className="text-lg font-bold text-primary">18</span>
                </div>
                <div className="flex-1 space-y-1">
                  <p className="font-medium">Site Visit: Commercial Plaza</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Clock className="mr-1 h-3 w-3" />
                    <span>2:00 PM - 4:00 PM</span>
                  </div>
                  <p className="text-sm text-muted-foreground">Progress inspection with client</p>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Project Status */}
      <Card className="apple-card">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <FileText className="h-5 w-5 text-primary" />
              <CardTitle className="text-lg">Project Status</CardTitle>
            </div>
            <Button variant="ghost" size="sm" className="gap-1 text-primary rounded-full">
              View All Projects <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
          <CardDescription>Track the progress of your active projects</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div>
              <div className="mb-2 flex items-center justify-between">
                <div className="space-y-1">
                  <p className="font-medium">Smith Residence Renovation</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Calendar className="mr-1 h-3 w-3" />
                    <span>Due May 30, 2025</span>
                  </div>
                </div>
                <span className="rounded-full bg-blue-100 dark:bg-blue-900/30 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-300">
                  In Progress
                </span>
              </div>
              <div className="h-2 w-full rounded-full bg-secondary dark:bg-gray-800">
                <div className="h-2 rounded-full bg-primary" style={{ width: "65%" }}></div>
              </div>
              <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
                <span>65% Complete</span>
                <span>18 days left</span>
              </div>
            </div>

<div>
              <div className="mb-2 flex items-center justify-between">
                <div className="space-y-1">
                  <p className="font-medium">Downtown Office Complex</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Calendar className="mr-1 h-3 w-3" />
                    <span>Due June 15, 2025</span>
                  </div>
                </div>
                <span className="rounded-full bg-blue-100 dark:bg-blue-900/30 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:text-blue-300">
                  In Progress
                </span>
              </div>
              <div className="h-2 w-full rounded-full bg-secondary dark:bg-gray-800">
                <div className="h-2 rounded-full bg-primary" style={{ width: "40%" }}></div>
              </div>
              <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
                <span>40% Complete</span>
                <span>34 days left</span>
              </div>
            </div>

<div>
              <div className="mb-2 flex items-center justify-between">
                <div className="space-y-1">
                  <p className="font-medium">Riverside Restaurant Design</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Calendar className="mr-1 h-3 w-3" />
                    <span>Due May 20, 2025</span>
                  </div>
                </div>
                <span className="rounded-full bg-amber-100 dark:bg-amber-900/30 px-2.5 py-0.5 text-xs font-medium text-amber-800 dark:text-amber-300">
                  At Risk
                </span>
              </div>
              <div className="h-2 w-full rounded-full bg-secondary dark:bg-gray-800">
                <div className="h-2 rounded-full bg-amber-500" style={{ width: "25%" }}></div>
              </div>
              <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
                <span>25% Complete</span>
                <span>8 days left</span>
              </div>
            </div>

<div>
              <div className="mb-2 flex items-center justify-between">
                <div className="space-y-1">
                  <p className="font-medium">Parker Residence Kitchen</p>
                  <div className="flex items-center text-sm text-muted-foreground">
                    <Calendar className="mr-1 h-3 w-3" />
                    <span>Due May 10, 2025</span>
                  </div>
                </div>
                <span className="rounded-full bg-green-100 dark:bg-green-900/30 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-300">
                  On Track
                </span>
              </div>
              <div className="h-2 w-full rounded-full bg-secondary dark:bg-gray-800">
                <div className="h-2 rounded-full bg-green-500" style={{ width: "85%" }}></div>
              </div>
              <div className="mt-1 flex items-center justify-between text-xs text-muted-foreground">
                <span>85% Complete</span>
                <span>2 days left</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Quick Actions */}
      <div className="grid gap-4 md:grid-cols-3">
        <Card className="apple-card">
          <CardHeader>
            <div className="flex items-center gap-2">
              <Plus className="h-5 w-5 text-primary" />
              <CardTitle className="text-lg">Quick Actions</CardTitle>
            </div>
          </CardHeader>
          <CardContent className="space-y-2">
            <Link href="/dashboard/clients/new">
              <Button className="w-full bg-primary hover:bg-primary/90 text-white rounded-full">Add New Client</Button>
            </Link>
            <Link href="/dashboard/projects/new">
              <Button
                variant="outline"
                className="w-full border-gray-200 dark:border-gray-800 text-foreground hover:bg-secondary rounded-full"
              >
                Create New Project
              </Button>
            </Link>
            <Link href="/dashboard/messages">
              <Button
                variant="outline"
                className="w-full border-gray-200 dark:border-gray-800 text-foreground hover:bg-secondary rounded-full"
              >
                Check Messages
              </Button>
            </Link>
          </CardContent>
        </Card>

<Card className="apple-card md:col-span-2">
          <CardHeader>
            <div className="flex items-center gap-2">
              <Users className="h-5 w-5 text-primary" />
              <CardTitle className="text-lg">Recent Clients</CardTitle>
            </div>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <span className="font-medium text-primary">DW</span>
                  </div>
                  <div>
                    <p className="font-medium">David Wilson</p>
                    <p className="text-sm text-muted-foreground">david.wilson@example.com</p>
                  </div>
                </div>
                <Button variant="ghost" size="sm" className="gap-1 text-primary rounded-full">
                  View <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <span className="font-medium text-primary">SP</span>
                  </div>
                  <div>
                    <p className="font-medium">Sarah Parker</p>
                    <p className="text-sm text-muted-foreground">sarah.parker@example.com</p>
                  </div>
                </div>
                <Button variant="ghost" size="sm" className="gap-1 text-primary rounded-full">
                  View <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
                    <span className="font-medium text-primary">MB</span>
                  </div>
                  <div>
                    <p className="font-medium">Michael Brown</p>
                    <p className="text-sm text-muted-foreground">michael.brown@example.com</p>
                  </div>
                </div>
                <Button variant="ghost" size="sm" className="gap-1 text-primary rounded-full">
                  View <ChevronRight className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This