import { Head, usePage } from '@inertiajs/react'; import { useState } from 'react'; import { Link } from '@inertiajs/react'; import { Copy, Save, Layers, FileText, Image, Webhook } from 'lucide-react'; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { Textarea } from '@/components/ui/textarea'; import axios from 'axios'; import { toast } from 'sonner'; import { type Project, type BreadcrumbItem, UserCan } from '@/types/index.d'; import AppLayout from '@/layouts/app-layout'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Separator } from '@/components/ui/separator'; import { Button } from '@/components/ui/button'; import { HardDrive, Globe, Users, Settings, Key } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'; import ProjectSidebar from './ProjectSidebar'; import ProjectsLayout from './layout'; interface Props { project: Project; } export default function Show({ project }: Props) { const can = usePage().props.userCan as UserCan; const { copied, copyToClipboard } = useCopyToast(); const [templateModalOpen, setTemplateModalOpen] = useState(false); const [templateName, setTemplateName] = useState(project.name); const [templateDesc, setTemplateDesc] = useState(project.description ?? ''); const [cloneModalOpen, setCloneModalOpen] = useState(false); const [cloneName, setCloneName] = useState(project.name + ' Copy'); const [cloneDesc, setCloneDesc] = useState(project.description ?? ''); const slugify = (str: string) => str.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, ''); const handleSaveTemplate = async () => { try { await axios.post(route('projects.saveAsTemplate', project.id), { name: templateName, slug: slugify(templateName), description: templateDesc, }); toast.success('Template saved'); setTemplateModalOpen(false); } catch (e) { console.error(e); toast.error('Failed to save template'); } }; const handleCloneProject = async () => { try { const res = await axios.post(route('projects.clone', project.id), { name: cloneName, description: cloneDesc, }); const redirect = res.data?.redirect; if (redirect) { window.location.href = redirect; } else { toast.success('Project cloned'); setCloneModalOpen(false); } } catch (e) { console.error(e); toast.error('Failed to clone project'); } }; const diskLabel = project.disk === 'public' ? 'Local Storage' : project.disk.toUpperCase(); const breadcrumbs: BreadcrumbItem[] = [ { title: project.name, href: '/project', }, ]; return (

{project.name} {project.description || 'No description'}

{/* Badges and top-right actions */}

{diskLabel} {project.disk === 'public' ? 'Files stored on this server.' : 'Amazon S3 storage'} {project.default_locale.toUpperCase()} {project.public_api && ( Public API )} {/* Actions */} {can.create_project && ( )}

{can.access_assets && ( )} {can.access_project_settings && ( )} {can.access_localization_settings && ( )} {can.access_user_access_settings && ( )} {can.access_api_access_settings && ( )} {can.access_webhooks_settings && ( )}

Project ID

{project.uuid}

{copied && Copied!}

Storage

{diskLabel}

Default Locale

{project.default_locale}

Available Locales

{(project.locales?.length ? project.locales.join(', ') : project.default_locale).toUpperCase()}

Public API

{project.public_api ? Enabled : Disabled }

Created At

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

Last Updated

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

{/* Save Template Modal */}