import { useState } from 'react'; import { Head, router, usePage } from '@inertiajs/react'; import { type BreadcrumbItem, type Project, type UserCan } from '@/types/index.d'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Plus } from 'lucide-react'; import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { SearchBar } from '@/components/ui/search-bar'; import CreateProjectModal from '@/pages/Projects/CreateProjectModal'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/', }, ]; interface Props { projects: Project[]; } export default function Dashboard({ projects }: Props) { const can = usePage().props.userCan as UserCan; const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const filteredProjects = projects.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()) || (project.description?.toLowerCase().includes(searchQuery.toLowerCase()) ?? false) ); return (

{/* Create Project Card */} {can.create_project && ( )} {/* Project Cards */} {filteredProjects.map((project) => ( router.visit(route('projects.show', project.id))} > {project.name} {project.description || 'No description'} ))}

); }