App Dashboard 1

1'use client'
2 
3import { useState } from 'react'
4import {
5  BarChart3,
6  Bell,
7  ChevronDown,
8  ClipboardList,
9  FileText,
10  Menu,
11  Search,
12  Users,
13} from 'lucide-react'
14 
15import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
16import { Badge } from '@/components/ui/badge'
17import { Button } from '@/components/ui/button'
18import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
19import { Progress } from '@/components/ui/progress'
20 
21import { projects, recentActivity } from "@/components/data/app-1-data"
22import { App1Sidebar } from './app-1-sidebar'
23 
24const stats = [
25  { label: 'Total Projects', value: '24', hint: '+2 from last month', icon: FileText },
26  { label: 'Active Tasks', value: '127', hint: '+12 from yesterday', icon: ClipboardList },
27  { label: 'Team Members', value: '16', hint: '+1 new member', icon: Users },
28  { label: 'Completion Rate', value: '87%', hint: '+5% from last week', icon: BarChart3 },
29]
30 
31export function App1() {
32  const [sidebarOpen, setSidebarOpen] = useState(false)
33 
34  return (
35    <div className="flex min-h-dvh">
36      <App1Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
37 
38      <div className="flex-1 overflow-hidden">
39        <header className="bg-card flex h-16.25 items-center justify-between border-b px-6">
40          <div className="flex items-center gap-4">
41            <Button
42              variant="ghost"
43              size="icon"
44              className="size-9 me-2 cursor-pointer md:hidden"
45              aria-label="Open sidebar"
46              onClick={() => setSidebarOpen(true)}
47            >
48              <Menu />
49            </Button>
50            <h1 className="hidden md:block text-xl font-semibold text-balance">Welcome back, John!</h1>
51          </div>
52          <div className="flex items-center gap-2">
53            <Button variant="ghost" size="icon" className="size-9 cursor-pointer">
54              <Search />
55            </Button>
56            <Button variant="ghost" size="icon" className="size-9 cursor-pointer">
57              <Bell />
58            </Button>
59            <Button variant="ghost" className="h-9 px-4 py-2 flex cursor-pointer items-center">
60              <Avatar className="bg-muted size-8">
61                <AvatarImage src="https://notion-avatars.netlify.app/api/avatar" />
62                <AvatarFallback>JD</AvatarFallback>
63              </Avatar>
64              <ChevronDown />
65            </Button>
66          </div>
67        </header>
68 
69// … truncated