712b06f118
Complete personal finance management application with: - Dashboard with financial metrics and alerts - Credit card management and payments - Fixed and variable debt tracking - Monthly budget planning - Intelligent alert system - Responsive design with Tailwind CSS Tech stack: Next.js 14, TypeScript, Zustand, Recharts 🤖 Generated with [Claude Code](https://claude.com/claude-code)
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { RefreshCw } from 'lucide-react'
|
|
import { getMonthName } from '@/lib/utils'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface DashboardHeaderProps {
|
|
onRefresh?: () => void
|
|
isRefreshing?: boolean
|
|
}
|
|
|
|
export function DashboardHeader({
|
|
onRefresh,
|
|
isRefreshing = false,
|
|
}: DashboardHeaderProps) {
|
|
const now = new Date()
|
|
const currentMonth = now.getMonth() + 1
|
|
const currentYear = now.getFullYear()
|
|
const monthName = getMonthName(currentMonth)
|
|
|
|
// Formatear fecha actual
|
|
const formattedDate = new Intl.DateTimeFormat('es-AR', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
}).format(now)
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 border-b border-slate-700 bg-slate-800/50 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">
|
|
Dashboard
|
|
<span className="ml-2 text-lg font-normal text-slate-400">
|
|
{monthName} {currentYear}
|
|
</span>
|
|
</h1>
|
|
<p className="mt-1 text-sm capitalize text-slate-400">
|
|
{formattedDate}
|
|
</p>
|
|
</div>
|
|
|
|
{onRefresh && (
|
|
<button
|
|
onClick={onRefresh}
|
|
disabled={isRefreshing}
|
|
className={cn(
|
|
'inline-flex items-center gap-2 rounded-lg border border-slate-600',
|
|
'bg-slate-700 px-4 py-2 text-sm font-medium text-white',
|
|
'transition-colors hover:bg-slate-600',
|
|
'focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-slate-800',
|
|
'disabled:cursor-not-allowed disabled:opacity-50'
|
|
)}
|
|
>
|
|
<RefreshCw
|
|
className={cn('h-4 w-4', isRefreshing && 'animate-spin')}
|
|
/>
|
|
{isRefreshing ? 'Actualizando...' : 'Actualizar'}
|
|
</button>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|