20 lines
1.4 KiB
TypeScript
20 lines
1.4 KiB
TypeScript
|
"use client";
|
||
|
|
import {usePathname,useRouter,useSearchParams} from 'next/navigation';
|
||
|
|
import {useTransition} from 'react';
|
||
|
|
|
||
|
|
export function InvoiceMonthFilter({selected,current,periods}:{selected:string;current:string;periods:string[]}){
|
||
|
|
const router=useRouter(),path=usePathname(),params=useSearchParams();
|
||
|
|
const [pending,startTransition]=useTransition();
|
||
|
|
const change=(value:string)=>{const query=new URLSearchParams(params.toString());query.set('month',value);startTransition(()=>router.push(`${path}?${query}`));};
|
||
|
|
const label=(period:string)=>new Date(`${period}-01T12:00:00Z`).toLocaleDateString('en-ZA',{month:'long',year:'numeric',timeZone:'Africa/Johannesburg'});
|
||
|
|
return <div className="mb-5 flex flex-wrap items-end gap-3" aria-busy={pending}>
|
||
|
|
<label className="flex min-w-0 flex-col gap-1 text-sm text-gray-600 dark:text-gray-300">Booked month
|
||
|
|
<select aria-label="Booked month" value={selected} onChange={e=>change(e.target.value)} className="min-h-[44px] max-w-full rounded-lg border border-gray-200 bg-white px-3 text-sm text-[#003D5B] dark:border-white/10 dark:bg-surface dark:text-white">
|
||
|
|
<option value="all">All months</option>
|
||
|
|
{periods.map(p=><option key={p} value={p}>{label(p)}{p===current?' (current month)':''}</option>)}
|
||
|
|
</select>
|
||
|
|
</label>
|
||
|
|
<p className="pb-3 text-xs text-gray-500 dark:text-gray-400">{pending?'Updating invoices…':'Totals and booking status follow the selected month.'}</p>
|
||
|
|
</div>;
|
||
|
|
}
|