forked from cardosofelipe/pragma-stack
feat(frontend): add Dashboard page and components for #53
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.
This commit is contained in:
55
frontend/src/components/dashboard/WelcomeHeader.tsx
Normal file
55
frontend/src/components/dashboard/WelcomeHeader.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user