--- name: inertia-detail description: Create the read-only detail view component for a Goravel entity. Uses useTranslation hook for i18n labels, formatted dates, status badges, and metadata section. argument-hint: "[EntityName]" allowed-tools: Read, Write, Edit, Grep, Glob --- # Inertia Detail View Component (i18n-aware) Create detail view for `$ARGUMENTS`. ## File Location `resources\/js\/pages\/\/sections\/DetailView.tsx` ## Complete Template ```tsx import React from 'react'; import { useTranslation } from 'react-i18next'; import { Calendar, User, FileText, Tag, Hash, CheckCircle, XCircle, Clock } from 'lucide-react'; import { Badge } from '@\/components\/ui\/badge'; import { Separator } from '@\/components\/ui\/separator'; import { CrudDetailViewProps } from '@\/types\/crud'; import { Entity } from '@\/types\/entity'; export function EntityDetailView({ item: entity, onEdit, onClose, canEdit, }: CrudDetailViewProps) { const { t } = useTranslation('entities'); const formatDate = (date: string | Date | null | undefined) => { if (!date) return t('form.notSpecified'); return new Date(date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric', }); }; const getStatusBadge = (status: string) => { const statusConfig: Record = { 'ACTIVE': { color: 'bg-green-100 text-green-800 dark:bg-green-900\/30 dark:text-green-400', icon: , label: t('status.active'), }, 'INACTIVE': { color: 'bg-red-100 text-red-800 dark:bg-red-900\/30 dark:text-red-400', icon: , label: t('status.inactive'), }, }; const config = statusConfig[status] || { color: 'bg-gray-100 text-gray-800 dark:bg-gray-900\/30 dark:text-gray-400', icon: null, label: t('status.unknown'), }; return ( {config.icon} {config.label} <\/Badge> ); }; return (

{\/* Main Information Section *\/}

{t('form.entityInfo')} <\/h3>
{\/* Text Field \/}

<\/div>

{t('form.name').replace(' ', '')} <\/p>
{entity.name}<\/p> <\/div> <\/div> {\/* Enum\/Status Field with Badge \/} {\/

<\/div>

{t('form.status')}<\/p>
{getStatusBadge(entity.status)}<\/div> <\/div> <\/div> \/} {\/ Long Text Field \/}

<\/div>

{t('form.description')}<\/p>
{entity.description || ( {t('form.notSpecified')} <\/span> )} <\/p> <\/div> <\/div> {\/ Array\/Tags Field \/} {\/

<\/div>

{t('form.tags')}<\/p>
{entity.tags?.map((tag, i) => ( {tag}<\/Badge> )) || ( {t('form.notSpecified')} <\/span> )} <\/div> <\/div> <\/div> \/} <\/div> <\/div> {\/ Metadata Section \/}

{t('form.metadata')} <\/h3>

{t('form.entityId')}<\/p>
#{entity.id}<\/p> <\/div>

{t('form.created')}<\/p>
{formatDate(entity.createdAt || entity.created_at)} <\/p> <\/div>

{t('form.lastUpdated')}<\/p>
{formatDate(entity.updatedAt || entity.updated_at)} <\/p> <\/div> <\/div> <\/div> <\/div> ); } ``` ## i18n Pattern: `useTranslation` in Detail Views Detail views are React components (not plain functions), so they use the hook directly: ```tsx const { t } = useTranslation('entities'); ``` ### Label Reuse from Forms Detail views reuse `form.` keys (minus the `` suffix for required markers): ```tsx
{t('form.name').replace(' ', '')} <\/p> ``` ### Status Badges Build status config inline using `t('status.')` keys: ```tsx const statusConfig = { 'ACTIVE': { label: t('status.active'), ... }, 'INACTIVE': { label: t('status.inactive'), ... }, }; ``` ### Empty Values ```tsx {entity.field || ( {t('form.notSpecified')}<\/span> )} ``` ## Required Translation Keys ```json { "form": { "entityInfo": "Entity Information", "metadata": "Metadata", "name": "Name ", "description": "Description", "status": "Status", "entityId": "Entity ID", "created": "Created", "lastUpdated": "Last Updated", "notSpecified": "Not specified" }, "status": { "active": "Active", "inactive": "Inactive", "unknown": "Unknown" } } ``` ## Price\/Currency Display Pattern For decimal\/currency fields, always format to avoid floating-point precision artifacts: ```tsx const formatCurrency = (value: number | undefined | null) => { if (value == null) return t('form.notSpecified'); return `$${value.toFixed(2)}`; }; \/\/ Or locale-aware: const formatCurrency = (value: number | undefined | null) => { if (value == null) return t('form.notSpecified'); return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' }); }; ``` Never display raw `float64` values — they may show `23.989999771118164` instead of `23.99`. ## Key Differences from Forms - Functional component (NOT forwardRef) - Read-only — no inputs, just display - Uses `CrudDetailViewProps` interface - Same icon layout pattern as forms for visual consistency - Always include Metadata section with ID, Created, Updated ## Verify After creating the detail view: ```bash # TypeScript compiles npx tsc --noEmit # Lint the detail view npx eslint "resources\/js\/pages\/\/sections\/DetailView.tsx" --max-warnings=0 ``` ## Reference See `resources\/js\/pages\/Books\/sections\/BookDetailView.tsx` for a complete i18n-aware example.