diff --git a/app/layout.tsx b/app/layout.tsx index 7cf0a76..a2cbfb2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,8 @@ import type { Metadata } from 'next' import localFont from 'next/font/local' import './globals.css' +import { ThemeProvider } from '@/components/providers/theme-provider' +import { Toaster } from '@/components/ui/toaster' const geistSans = localFont({ src: './fonts/GeistVF.woff', @@ -14,8 +16,8 @@ const geistMono = localFont({ }) export const metadata: Metadata = { - title: 'CodeGuide Starter Lite', - description: 'Starter kit from codeguide.dev', + title: 'Admin Dashboard - CodeGuide', + description: 'Modern admin dashboard built with Next.js, Tailwind CSS, and Radix UI', } export default function RootLayout({ @@ -24,8 +26,18 @@ export default function RootLayout({ children: React.ReactNode }>) { return ( - - {children} + + + + {children} + + + ) } diff --git a/app/page.tsx b/app/page.tsx index c401399..338fd8e 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,12 @@ "use client" -import { Hero } from '@/components/ui/animated-hero' -import Image from 'next/image' +import { DashboardLayout } from '@/components/dashboard/layout' +import { DashboardOverview } from '@/components/dashboard/overview' export default function Home() { - return + return ( + + + + ) } diff --git a/app/settings/page.tsx b/app/settings/page.tsx new file mode 100644 index 0000000..9c0aadd --- /dev/null +++ b/app/settings/page.tsx @@ -0,0 +1,12 @@ +"use client" + +import { DashboardLayout } from '@/components/dashboard/layout' +import { SettingsPage } from '@/components/dashboard/settings' + +export default function Settings() { + return ( + + + + ) +} \ No newline at end of file diff --git a/app/users/page.tsx b/app/users/page.tsx new file mode 100644 index 0000000..1ed0d0d --- /dev/null +++ b/app/users/page.tsx @@ -0,0 +1,12 @@ +"use client" + +import { DashboardLayout } from '@/components/dashboard/layout' +import { UserManagement } from '@/components/dashboard/user-management' + +export default function UsersPage() { + return ( + + + + ) +} \ No newline at end of file diff --git a/components/dashboard/layout.tsx b/components/dashboard/layout.tsx new file mode 100644 index 0000000..bb524d5 --- /dev/null +++ b/components/dashboard/layout.tsx @@ -0,0 +1,150 @@ +"use client" + +import { useState } from 'react' +import { + Home, + Users, + Settings, + BarChart3, + FileText, + Menu, + Moon, + Sun, + Monitor +} from 'lucide-react' +import { useTheme } from 'next-themes' +import { Button } from '@/components/ui/button' +import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger +} from '@/components/ui/dropdown-menu' +import { cn } from '@/lib/utils' +import Image from 'next/image' + +const navigation = [ + { name: 'Dashboard', href: '/', icon: Home, current: true }, + { name: 'Analytics', href: '/analytics', icon: BarChart3, current: false }, + { name: 'Users', href: '/users', icon: Users, current: false }, + { name: 'Reports', href: '/reports', icon: FileText, current: false }, + { name: 'Settings', href: '/settings', icon: Settings, current: false }, +] + +interface DashboardLayoutProps { + children: React.ReactNode +} + +function ThemeToggle() { + const { setTheme } = useTheme() + + return ( + + + + + + setTheme("light")}> + + Light + + setTheme("dark")}> + + Dark + + setTheme("system")}> + + System + + + + ) +} + +function Sidebar() { + return ( +
+ {/* Logo */} +
+ CodeGuide + CodeGuide +
+ + {/* Navigation */} + +
+ ) +} + +function MobileSidebar() { + const [open, setOpen] = useState(false) + + return ( + + + + + + + + + ) +} + +export function DashboardLayout({ children }: DashboardLayoutProps) { + return ( +
+ {/* Desktop Sidebar */} +
+ +
+ + {/* Main Content */} +
+ {/* Header */} +
+
+ +

Dashboard

+
+ +
+ +
+
+ + {/* Page Content */} +
+ {children} +
+
+
+ ) +} \ No newline at end of file diff --git a/components/dashboard/overview.tsx b/components/dashboard/overview.tsx new file mode 100644 index 0000000..a39f745 --- /dev/null +++ b/components/dashboard/overview.tsx @@ -0,0 +1,239 @@ +"use client" + +import { + Users, + TrendingUp, + Activity, + CreditCard, + ArrowUpRight, + ArrowDownRight +} from 'lucide-react' +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Badge } from '@/components/ui/badge' +import { Progress } from '@/components/ui/progress' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' + +const stats = [ + { + title: 'Total Users', + value: '12,234', + change: '+12.3%', + trend: 'up', + icon: Users, + description: 'Active users this month' + }, + { + title: 'Revenue', + value: '$45,231', + change: '+8.2%', + trend: 'up', + icon: CreditCard, + description: 'Total revenue this month' + }, + { + title: 'Conversion Rate', + value: '3.2%', + change: '-2.1%', + trend: 'down', + icon: TrendingUp, + description: 'Visitor to customer rate' + }, + { + title: 'Active Sessions', + value: '2,847', + change: '+18.1%', + trend: 'up', + icon: Activity, + description: 'Current active sessions' + }, +] + +const recentActivity = [ + { + user: 'John Doe', + action: 'Created new project', + time: '2 minutes ago', + status: 'success' + }, + { + user: 'Jane Smith', + action: 'Updated user profile', + time: '5 minutes ago', + status: 'info' + }, + { + user: 'Mike Johnson', + action: 'Deleted project', + time: '10 minutes ago', + status: 'warning' + }, + { + user: 'Sarah Wilson', + action: 'Made payment', + time: '15 minutes ago', + status: 'success' + }, +] + +const projectProgress = [ + { name: 'Website Redesign', progress: 75, status: 'In Progress' }, + { name: 'Mobile App', progress: 40, status: 'Planning' }, + { name: 'API Integration', progress: 90, status: 'Review' }, + { name: 'Database Migration', progress: 25, status: 'Started' }, +] + +export function DashboardOverview() { + return ( +
+ {/* Welcome Section */} +
+

Welcome back!

+

+ Here's what's happening with your projects today. +

+
+ + {/* Stats Grid */} +
+ {stats.map((stat) => { + const Icon = stat.icon + return ( + + + + {stat.title} + + + + +
{stat.value}
+
+ {stat.trend === 'up' ? ( + + ) : ( + + )} +

+ {stat.change} +

+
+

+ {stat.description} +

+ + + ) + })} +
+ + {/* Main Content Tabs */} + + + Overview + Analytics + Reports + + + +
+ {/* Recent Activity */} + + + Recent Activity + + Latest user actions and system events + + + +
+ {recentActivity.map((activity, index) => ( +
+
+

+ {activity.user} +

+

+ {activity.action} +

+
+
+ + {activity.time} + +
+
+ ))} +
+ + + + {/* Project Progress */} + + + Project Progress + + Track your ongoing projects + + + +
+ {projectProgress.map((project, index) => ( +
+
+

{project.name}

+ {project.status} +
+ +

+ {project.progress}% complete +

+
+ ))} +
+ + +
+ + + + + + Analytics Overview + + Detailed analytics and insights coming soon + + + +
+

Analytics dashboard will be implemented here

+
+ + + + + + + + Reports + + Generate and view detailed reports + + + +
+

Reporting features will be implemented here

+
+ + + + +
+ ) +} \ No newline at end of file diff --git a/components/dashboard/settings.tsx b/components/dashboard/settings.tsx new file mode 100644 index 0000000..9d35684 --- /dev/null +++ b/components/dashboard/settings.tsx @@ -0,0 +1,277 @@ +"use client" + +import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' +import { Button } from '@/components/ui/button' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Switch } from '@/components/ui/switch' +import { Textarea } from '@/components/ui/textarea' +import { Separator } from '@/components/ui/separator' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { Badge } from '@/components/ui/badge' +import { + Bell, + Shield, + Palette, + Database, + Upload +} from 'lucide-react' + +export function SettingsPage() { + return ( +
+ {/* Header */} +
+

Settings

+

+ Manage your account settings and preferences +

+
+ +
+ {/* Profile Settings */} + + + + + Profile Settings + + + Update your personal information and profile picture + + + +
+ + + JD + +
+ +

+ JPG, GIF or PNG. 1MB max. +

+
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ +