71 lines
3.1 KiB
TypeScript
71 lines
3.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { format, parseISO } from 'date-fns';
|
|
|
|
import { Operation, Balance } from '../types';
|
|
import ExportButton from './ExportButton';
|
|
|
|
interface HeaderProps {
|
|
associationName: string;
|
|
onLogout: () => void;
|
|
dateRange: { start: Date, end: Date };
|
|
setDateRange: (range: { start: Date, end: Date }) => void;
|
|
operations: Operation[];
|
|
balances: Balance[];
|
|
}
|
|
|
|
const Header: React.FC<HeaderProps> = ({ associationName, onLogout, dateRange, setDateRange, operations, balances }) => {
|
|
|
|
const handleDateChange = (field: 'start' | 'end', value: string) => {
|
|
const newDate = parseISO(value);
|
|
if (field === 'start' && newDate < dateRange.end) {
|
|
setDateRange({ ...dateRange, start: newDate });
|
|
}
|
|
if (field === 'end' && newDate > dateRange.start) {
|
|
setDateRange({ ...dateRange, end: newDate });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<header className="bg-white shadow-sm border-b border-gray-200">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center py-4">
|
|
<div className="flex items-center space-x-4">
|
|
<img src="/abacus.svg" alt="Abacus" className="h-12" />
|
|
<span className="hidden sm:block text-gray-400">|</span>
|
|
<p className="hidden sm:block text-3xl font-medium text-gray-600">{associationName}</p>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="date"
|
|
value={format(dateRange.start, 'yyyy-MM-dd')}
|
|
onChange={(e) => handleDateChange('start', e.target.value)}
|
|
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-gray-800"
|
|
/>
|
|
<span className="text-gray-500">-</span>
|
|
<input
|
|
type="date"
|
|
value={format(dateRange.end, 'yyyy-MM-dd')}
|
|
onChange={(e) => handleDateChange('end', e.target.value)}
|
|
className="px-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-1 focus:ring-gray-800"
|
|
/>
|
|
</div>
|
|
<ExportButton
|
|
operations={operations}
|
|
balances={balances}
|
|
dateRange={dateRange}
|
|
associationName={associationName}
|
|
/>
|
|
<button onClick={onLogout} className="text-sm font-medium text-gray-600 hover:text-gray-900 transition">
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Header;
|