forked from cardosofelipe/pragma-stack
Felipe Cardoso
6f5dd58b54
Implement the main dashboard homepage with: - WelcomeHeader: Personalized greeting with user name - DashboardQuickStats: Stats cards for projects, agents, issues, approvals - RecentProjects: Dynamic grid showing 3-6 recent projects - PendingApprovals: Action-required approvals section - EmptyState: Onboarding experience for new users - useDashboard hook: Mock data fetching with React Query The dashboard serves as the authenticated homepage at /(authenticated)/ and provides quick access to all project management features. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
/**
|
|
* EmptyState Component
|
|
*
|
|
* Displays a welcome message for new users with no projects.
|
|
* Provides call-to-action to create first project.
|
|
*
|
|
* @see Issue #53
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { Rocket, Bot, Settings } from 'lucide-react';
|
|
import { Card, CardContent } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Link } from '@/lib/i18n/routing';
|
|
|
|
export interface EmptyStateProps {
|
|
/** User's first name for personalization */
|
|
userName?: string;
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
export function EmptyState({ userName = 'there', className }: EmptyStateProps) {
|
|
return (
|
|
<Card className={className}>
|
|
<CardContent className="py-12 text-center">
|
|
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
|
|
<Rocket className="h-8 w-8 text-primary" />
|
|
</div>
|
|
|
|
<h2 className="text-2xl font-bold">Welcome to Syndarix, {userName}!</h2>
|
|
<p className="mx-auto mt-2 max-w-md text-muted-foreground">
|
|
Get started by creating your first project. Our AI agents will help you
|
|
turn your ideas into reality.
|
|
</p>
|
|
|
|
<Button size="lg" asChild className="mt-6">
|
|
<Link href="/projects/new">Create Your First Project</Link>
|
|
</Button>
|
|
|
|
<div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
|
<Link
|
|
href="/agents"
|
|
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
|
|
>
|
|
<Bot className="h-4 w-4" />
|
|
Set up AI agent types
|
|
</Link>
|
|
<Link
|
|
href="/settings"
|
|
className="flex items-center gap-2 text-sm text-muted-foreground hover:text-primary"
|
|
>
|
|
<Settings className="h-4 w-4" />
|
|
Configure your account
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|