import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head, useForm } from '@inertiajs/react'; import {useState } from 'react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArrowRight } from '@fortawesome/free-solid-svg-icons' interface CustomerProps { customers: [{ id: number name: string group_id: string, is_group: boolean }], }; type Customer = { id: number name: string group_id: string, is_group: boolean }; export default function Dashboard({ customers }: CustomerProps) { const [searchItem, setSearchItem] = useState('') const [activeTab, setActiveTab] = useState('') const [filteredCustomers, setFilteredCustomers] = useState(customers) const letterArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "Å", "Ä", "Ö"]; const handleInputChange = (e: any) => { const searchTerm = e.target.value; setSearchItem(searchTerm) const filteredItems = customers.filter((customer) => customer.name.toLowerCase().includes(searchTerm.toLowerCase()) ); setFilteredCustomers(filteredItems); } const handleInputClick = (searchTerm: any) => { const filteredItems = customers.filter((customer) => customer.name.toLowerCase().startsWith(searchTerm.toLowerCase()) ); setFilteredCustomers(filteredItems); } return (

Deltagare

    {letterArray && letterArray.map(letter => { return
  • [setActiveTab(letter), handleInputClick(letter)]}> {letter}
    • }) }
  • [setActiveTab(""), setFilteredCustomers(customers), setSearchItem("")]}> Rensa
{filteredCustomers && filteredCustomers.map(customer => { return

{customer.id}. {customer.name}

 })}
); }