import { Head, setLayoutProps } from '@inertiajs/react'; import { Search } from 'lucide-react'; import { useMemo, useState } from 'react'; import { DivisionHeader } from '@/components/divisions/DivisionHeader'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Input } from '@/components/ui/input'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@/components/ui/table'; import { avatarUrl, getInitials } from '@/lib/utils'; import { index as divisionsIndex } from '@/routes/divisions'; import type { DivisionMember, DivisionSecondaryData } from '@/types/division'; interface DivisionShowProps { data: { primary: { projects: unknown[]; active_schedule: { act: string; tasks: unknown[]; }; tasks: { act: string; tasks: unknown[]; }; }; secondary: DivisionSecondaryData & { members: { act: string; members: DivisionMember[]; }; }; }; } export default function DivisionsShowMembers({ data }: DivisionShowProps) { const { base_info, members } = data.secondary; const [memberSearchQuery, setMemberSearchQuery] = useState(''); const filteredMembers = useMemo(() => { let result = [...(members.members || [])]; if (memberSearchQuery) { const query = memberSearchQuery.toLowerCase(); result = result.filter( (m) => m.user_name.toLowerCase().includes(query) || (m.role_label && m.role_label.toLowerCase().includes(query)), ); } return result; }, [members.members, memberSearchQuery]); setLayoutProps({ breadcrumbs: [ { title: 'Divisions', href: divisionsIndex().url, }, { title: base_info.name, }, { title: 'Members', }, ], }); return ( <>
{/* Division Header */} {/* Main Content Area */}

Division Members

setMemberSearchQuery( e.target.value, ) } />
{filteredMembers.length > 0 ? ( NO. Member Jabatan {filteredMembers.map( (member, index) => ( {index + 1}.
{getInitials( member.user_name, )} { member.user_name }
{ member.role_label } ), )}
) : (

No members found matching your filters.

)}
); }