forked from cardosofelipe/pragma-stack
Felipe Cardoso
c65e35a397
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.
56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
/**
|
|
* WelcomeHeader Component
|
|
*
|
|
* Displays a personalized welcome message for the dashboard.
|
|
*
|
|
* @see Issue #53
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { Plus } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Link } from '@/lib/i18n/routing';
|
|
import { useAuth } from '@/lib/auth/AuthContext';
|
|
|
|
export interface WelcomeHeaderProps {
|
|
/** Additional CSS classes */
|
|
className?: string;
|
|
}
|
|
|
|
export function WelcomeHeader({ className }: WelcomeHeaderProps) {
|
|
const { user } = useAuth();
|
|
|
|
// Get first name for greeting
|
|
const firstName = user?.first_name || user?.email?.split('@')[0] || 'there';
|
|
|
|
// Get time-based greeting
|
|
const getGreeting = () => {
|
|
const hour = new Date().getHours();
|
|
if (hour < 12) return 'Good morning';
|
|
if (hour < 18) return 'Good afternoon';
|
|
return 'Good evening';
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<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">
|
|
{getGreeting()}, {firstName}
|
|
</h1>
|
|
<p className="mt-1 text-muted-foreground">
|
|
Here's what's happening with your projects today.
|
|
</p>
|
|
</div>
|
|
<Button asChild>
|
|
<Link href="/projects/new">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
Create Project
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|