Version : 2025.11.22

2025-11-23 16:34:11 +01:00
commit b399e803b3
31 changed files with 5810 additions and 0 deletions
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -0,0 +1,70 @@
+
+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;