MichilisandClaude Opus 5.5
e203fb6c74
Event finance - Finance tab on the event page: P&L summary with a revenue-to-result waterfall, costs and other income in one ledger, and the partner split with payouts. Lifecycle stepper (Selling, Adding costs, Ready to close, Finalized) with what is left to do; closing the books goes through a checklist dialog that freezes the numbers. - Expense modal shows only the fields each calculation type needs, a live preview with the event's real counts, and a category suggested from the description. Date inputs follow the UI language. - Global Finance page: profit per event with outliers clipped and labelled, and a "Ready to close" list of past events whose books are still open. - Calculation service (integer PYG, basis points) with pinned regression scenarios; PYG formatting centralised in lib/money with locale-aware separators. Event team permissions - Per-event members with role presets and requireEventPermission; the header stat "Confirmed" is relabelled "Not checked in yet", which is what it counts. Public sales state - One sales state (online, door, sold out, ended, external, cancelled) for the event page, listings and JSON-LD, with the door price and tenders shown only while people can still pay at the door. Frontend unit tests run with vitest (npm test in frontend/). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
|
import { inputClass } from './ui';
|
|
|
|
export interface UserHit { id: string; name: string; email: string; role: string }
|
|
|
|
/** Debounced search box with a result list; `search` decides who is eligible. */
|
|
export function UserSearch({ search, onPick, placeholder, noResults }: {
|
|
search: (q: string) => Promise<{ users: UserHit[] }>;
|
|
onPick: (u: UserHit) => void;
|
|
placeholder: string;
|
|
noResults: string;
|
|
}) {
|
|
const [q, setQ] = useState('');
|
|
const [hits, setHits] = useState<UserHit[]>([]);
|
|
const [searched, setSearched] = useState(false);
|
|
const seq = useRef(0);
|
|
|
|
useEffect(() => {
|
|
const term = q.trim();
|
|
if (term.length < 2) { setHits([]); setSearched(false); return; }
|
|
const mine = ++seq.current;
|
|
const timer = setTimeout(() => {
|
|
search(term)
|
|
.then((res) => { if (mine === seq.current) { setHits(res.users); setSearched(true); } })
|
|
.catch(() => { if (mine === seq.current) { setHits([]); setSearched(true); } });
|
|
}, 250);
|
|
return () => clearTimeout(timer);
|
|
}, [q, search]);
|
|
|
|
return (
|
|
<div>
|
|
<div className="relative">
|
|
<MagnifyingGlassIcon className="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2" />
|
|
<input className={`${inputClass} pl-9`} value={q} onChange={(e) => setQ(e.target.value)} placeholder={placeholder} />
|
|
</div>
|
|
{hits.length > 0 && (
|
|
<ul className="mt-1 border border-gray-100 rounded-btn divide-y divide-gray-100 max-h-56 overflow-y-auto">
|
|
{hits.map((u) => (
|
|
<li key={u.id}>
|
|
<button
|
|
type="button"
|
|
onClick={() => { onPick(u); setQ(''); setHits([]); setSearched(false); }}
|
|
className="w-full text-left px-3 py-2 hover:bg-gray-50 min-h-[44px]"
|
|
>
|
|
<p className="text-sm font-medium truncate">{u.name}</p>
|
|
<p className="text-xs text-gray-500 truncate">{u.email} · {u.role}</p>
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{searched && hits.length === 0 && <p className="text-xs text-gray-400 mt-1">{noResults}</p>}
|
|
</div>
|
|
);
|
|
}
|