import { Head } from "@inertiajs/react"; import { Badge } from "@/components/ui/badge"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Label } from "@/components/ui/label"; import AuthenticatedLayout from "@/layouts/AuthenticatedLayout"; import type { PageProps } from "@/types"; // Assuming a global Project type is defined in @/types // If not, define it here based on the data structure from the controller interface User { id: number; name: string; } interface Category { id: number; name: string; } interface Client { id: number; name: string; } interface ProjectPhoto { id: number; photo: string; } interface MoreProject { id: number; doc: string; position: string; image: string; } interface Project { id: number; title: string; description: string; doc: string; image: string; location: string | null; complete: string; slug: string; status: boolean; type: string; category: Category; client: Client | null; posted_by: User; edited_by: User | null; created_at: string; updated_at: string; project_photos: ProjectPhoto[]; more_projects: MoreProject[]; } export default function ProjectShow({ auth, project, }: PageProps<{ project: Project }>) { return ( Project Details } >
{project.title} {project.slug}
{project.title}

{project.description}

{project.location || "N/A"}

{project.complete}

{project.status ? "Active" : "Inactive"}

{project.type}

{project.category.name}

{project.client?.name || "N/A"}

{project.edited_by && (

{project.posted_by.name}

)} {project.edited_by && (

{project.edited_by.name}

)}

{new Date(project.created_at).toLocaleString()}

{new Date(project.updated_at).toLocaleString()}

{project.project_photos.map((photo) => (
Project Photo
))}
    {project.more_projects.map((moreProject) => (
    More Project
    ))}
); }