@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/DetailView.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { 
   cn, 
+  Badge,
   Button, 
   Skeleton,
   DropdownMenu,
@@ -20,6 +21,10 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
 } from '@object-ui/components';
 import { 
   ArrowLeft, 
@@ -32,12 +37,24 @@ import {
   History, 
   Star,
   StarOff,
+  Check,
+  ChevronLeft,
+  ChevronRight,
 } from 'lucide-react';
 import { DetailSection } from './DetailSection';
 import { DetailTabs } from './DetailTabs';
 import { RelatedList } from './RelatedList';
+import { SectionGroup } from './SectionGroup';
+import { HeaderHighlight } from './HeaderHighlight';
+import { RecordComments } from './RecordComments';
+import { ActivityTimeline } from './ActivityTimeline';
 import { SchemaRenderer } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
 import type { DetailViewSchema, DataSource } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
+
+/** Default page size for related lists in the detail view */
+const DEFAULT_RELATED_PAGE_SIZE = 5;
 
 export interface DetailViewProps {
   schema: DetailViewSchema;
@@ -46,6 +63,10 @@ export interface DetailViewProps {
   onEdit?: () => void;
   onDelete?: () => void;
   onBack?: () => void;
+  /** Enable inline editing toggle for detail fields */
+  inlineEdit?: boolean;
+  /** Callback when a field value is saved inline */
+  onFieldSave?: (field: string, value: any, record: any) => void | Promise<void>;
 }
 
 export const DetailView: React.FC<DetailViewProps> = ({
@@ -55,13 +76,21 @@ export const DetailView: React.FC<DetailViewProps> = ({
   onEdit,
   onDelete,
   onBack,
+  inlineEdit = false,
+  onFieldSave,
 }) => {
   const [data, setData] = React.useState<any>(schema.data);
   const [loading, setLoading] = React.useState(!schema.data && !!((schema.api && schema.resourceId) || (dataSource && schema.objectName && schema.resourceId)));
   const [isFavorite, setIsFavorite] = React.useState(false);
+  const [isInlineEditing, setIsInlineEditing] = React.useState(false);
+  const [editedValues, setEditedValues] = React.useState<Record<string, any>>({});
+  const [objectSchema, setObjectSchema] = React.useState<any>(null);
+  const { t } = useDetailTranslation();
 
-  // Fetch data if API or DataSource provided
+  // Fetch objectSchema + data with $expand when DataSource is provided
   React.useEffect(() => {
+    let isMounted = true;
+
     // If inline data provided, use it
      if (schema.data) {
         setData(schema.data);
@@ -71,26 +100,86 @@ export const DetailView: React.FC<DetailViewProps> = ({
 
     if (dataSource && schema.objectName && schema.resourceId) {
       setLoading(true);
-      dataSource.findOne(schema.objectName, schema.resourceId).then((result) => {
-         setData(result);
-         setLoading(false);
+      // Clear stale state when navigating between objects/records
+      setObjectSchema(null);
+      setData(null);
+      const objectName = schema.objectName;
+      const resourceId = schema.resourceId;
+      const prefix = `${objectName}-`;
+
+      // Collect all visible fields from sections and top-level fields
+      const allFields = [
+        ...(schema.sections?.flatMap(s => s.fields) || []),
+        ...(schema.fields || []),
+      ];
+
+      // Load objectSchema first, then fetch data with $expand
+      const schemaPromise = dataSource.getObjectSchema
+        ? dataSource.getObjectSchema(objectName).catch(() => null)
+        : Promise.resolve(null);
+
+      schemaPromise.then((resolvedSchema) => {
+        if (!isMounted) return;
+        setObjectSchema(resolvedSchema);
+
+        // Compute $expand from objectSchema
+        const expandFields = buildExpandFields(resolvedSchema?.fields, allFields);
+        const params = expandFields.length > 0 ? { $expand: expandFields } : undefined;
+
+        const findOnePromise = params
+          ? dataSource.findOne(objectName, resourceId, params)
+          : dataSource.findOne(objectName, resourceId);
+
+        return findOnePromise.then((result) => {
+          if (!isMounted) return;
+          if (result) {
+            setData(result);
+            setLoading(false);
+            return;
+          }
+          // Fallback: try alternate ID format for backward compatibility
+          const resIdStr = String(resourceId);
+          const altId = resIdStr.startsWith(prefix)
+            ? resIdStr.slice(prefix.length)   // strip prefix
+            : `${prefix}${resIdStr}`;          // prepend prefix
+          return (params
+            ? dataSource.findOne(objectName, altId, params)
+            : dataSource.findOne(objectName, altId)
+          ).then((fallbackResult) => {
+            if (isMounted) {
+              setData(fallbackResult);
+              setLoading(false);
+            }
+          }).catch(() => {
+            if (isMounted) {
+              setData(null);
+              setLoading(false);
+            }
+          });
+        });
       }).catch((err) => {
-         console.error('Failed to fetch detail data:', err);
-         setLoading(false);
+         if (isMounted) {
+           console.error('Failed to fetch detail data:', err);
+           setLoading(false);
+         }
       });
     } else if (schema.api && schema.resourceId) {
       setLoading(true);
       fetch(`${schema.api}/${schema.resourceId}`)
         .then(res => res.json())
         .then(result => {
-          setData(result?.data || result);
+          if (isMounted) {
+            setData(result?.data || result);
+          }
         })
         .catch(err => {
           console.error('Failed to fetch detail data:', err);
         })
-        .finally(() => setLoading(false));
+        .finally(() => { if (isMounted) setLoading(false); });
     }
-  }, [schema.api, schema.resourceId]);
+
+    return () => { isMounted = false; };
+  }, [schema.api, schema.resourceId, schema.objectName, dataSource, schema.sections, schema.fields]);
 
   const handleBack = React.useCallback(() => {
     if (onBack) {
@@ -121,7 +210,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
   }, [onEdit, schema]);
 
   const handleDelete = React.useCallback(() => {
-    const confirmMessage = schema.deleteConfirmation || 'Are you sure you want to delete this record?';
+    const confirmMessage = schema.deleteConfirmation || t('detail.deleteConfirmation');
     // Use window.confirm as fallback — the ActionProvider's onConfirm handler
     // will intercept this if wired up via the action system.
     if (window.confirm(confirmMessage)) {
@@ -137,7 +226,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
     // Share functionality - could trigger share dialog or copy link
     if (navigator.share && schema.objectName && schema.resourceId) {
       navigator.share({
-        title: schema.title || 'Record Details',
+        title: schema.title || t('detail.details'),
         text: `${schema.objectName} #${schema.resourceId}`,
         url: window.location.href,
       }).catch((err) => console.log('Share failed:', err));
@@ -168,6 +257,82 @@ export const DetailView: React.FC<DetailViewProps> = ({
     setIsFavorite(!isFavorite);
   }, [isFavorite]);
 
+  const handleInlineEditToggle = React.useCallback(() => {
+    if (isInlineEditing) {
+      // Save changes
+      const changes = Object.entries(editedValues);
+      if (changes.length > 0) {
+        const updatedData = { ...data, ...editedValues };
+        setData(updatedData);
+        changes.forEach(([field, value]) => {
+          onFieldSave?.(field, value, updatedData);
+        });
+      }
+      setEditedValues({});
+    }
+    setIsInlineEditing(!isInlineEditing);
+  }, [isInlineEditing, editedValues, data, onFieldSave]);
+
+  const handleInlineFieldChange = React.useCallback((field: string, value: any) => {
+    setEditedValues(prev => ({ ...prev, [field]: value }));
+  }, []);
+
+  // Keyboard shortcuts for prev/next record navigation (← / →)
+  React.useEffect(() => {
+    if (!schema.recordNavigation) return;
+    const nav = schema.recordNavigation;
+    const handler = (e: KeyboardEvent) => {
+      // Skip when focus is inside an input, textarea, or contenteditable
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable) return;
+      if (e.key === 'ArrowLeft' && nav.currentIndex > 0) {
+        e.preventDefault();
+        nav.onNavigate(nav.recordIds[nav.currentIndex - 1]);
+      } else if (e.key === 'ArrowRight' && nav.currentIndex < nav.recordIds.length - 1) {
+        e.preventDefault();
+        nav.onNavigate(nav.recordIds[nav.currentIndex + 1]);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [schema.recordNavigation]);
+
+  // Auto-discover related lists from objectSchema reference fields
+  const discoveredRelated = React.useMemo(() => {
+    if (!schema.autoDiscoverRelated || !objectSchema?.fields) return [];
+    // Only auto-discover when no explicit related config is provided
+    if (schema.related && schema.related.length > 0) return [];
+    const refs: Array<{ title: string; type: 'list' | 'grid' | 'table'; objectName: string; referenceField: string }> = [];
+    const fields = objectSchema.fields;
+    for (const [fieldName, fieldDef] of Object.entries<any>(fields)) {
+      const refTarget = fieldDef?.reference_to || fieldDef?.reference;
+      if (
+        fieldDef &&
+        (fieldDef.type === 'lookup' || fieldDef.type === 'master_detail') &&
+        refTarget
+      ) {
+        refs.push({
+          title: fieldDef.label || fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
+          type: 'table',
+          objectName: refTarget,
+          referenceField: fieldName,
+        });
+      }
+    }
+    return refs;
+  }, [schema.autoDiscoverRelated, schema.related, objectSchema]);
+
+  // Merge explicit and auto-discovered related lists
+  const effectiveRelated: NonNullable<DetailViewSchema['related']> = React.useMemo(() => {
+    if (schema.related && schema.related.length > 0) return schema.related;
+    return discoveredRelated.map((r) => ({
+      title: r.title,
+      type: r.type,
+      api: r.objectName,
+      data: [] as any[],
+    }));
+  }, [schema.related, discoveredRelated]);
+
   if (loading || schema.loading) {
     return (
       <div className={cn('space-y-4', className)}>
@@ -178,6 +343,23 @@ export const DetailView: React.FC<DetailViewProps> = ({
     );
   }
 
+  if (!data && !schema.data) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-16 text-center', className)}>
+        <p className="text-lg font-semibold">{t('detail.recordNotFound')}</p>
+        <p className="text-sm text-muted-foreground mt-1">
+          {t('detail.recordNotFoundDescription')}
+        </p>
+        {(schema.showBack ?? true) && (
+          <Button variant="outline" size="sm" onClick={handleBack} className="mt-4 gap-2">
+            <ArrowLeft className="h-4 w-4" />
+            {t('detail.goBack')}
+          </Button>
+        )}
+      </div>
+    );
+  }
+
   return (
     <TooltipProvider>
       <div className={cn('space-y-6', className)}>
@@ -191,12 +373,23 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     <ArrowLeft className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Back</TooltipContent>
+                <TooltipContent>{t('detail.back')}</TooltipContent>
               </Tooltip>
             )}
             <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <h1 className="text-xl sm:text-2xl font-bold truncate">{schema.title || 'Details'}</h1>
+              <div className="flex items-center gap-2 flex-wrap">
+                <h1 className="text-xl sm:text-2xl font-bold truncate">
+                  {(schema.primaryField && data?.[schema.primaryField]) || schema.title || t('detail.details')}
+                </h1>
+                {schema.summaryFields?.map((fieldName) => {
+                  const val = data?.[fieldName];
+                  if (val === null || val === undefined || val === '') return null;
+                  return (
+                    <Badge key={fieldName} variant="secondary" className="text-xs" aria-label={`${fieldName}: ${val}`}>
+                      {String(val)}
+                    </Badge>
+                  );
+                })}
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button 
@@ -213,7 +406,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+                    {isFavorite ? t('detail.removeFromFavorites') : t('detail.addToFavorites')}
                   </TooltipContent>
                 </Tooltip>
               </div>
@@ -228,30 +421,106 @@ export const DetailView: React.FC<DetailViewProps> = ({
           </div>
 
           <div className="flex flex-wrap items-center gap-1.5 shrink-0 w-full sm:w-auto">
+            {/* Prev/Next Record Navigation */}
+            {schema.recordNavigation && (
+              <div className="flex items-center gap-1 mr-2">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="h-8 w-8"
+                      disabled={schema.recordNavigation.currentIndex <= 0}
+                      onClick={() => {
+                        const nav = schema.recordNavigation!;
+                        if (nav.currentIndex > 0) {
+                          nav.onNavigate(nav.recordIds[nav.currentIndex - 1]);
+                        }
+                      }}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t('detail.previousRecord')}</TooltipContent>
+                </Tooltip>
+                <span className="text-xs text-muted-foreground whitespace-nowrap px-1">
+                  {t('detail.recordOf', { current: schema.recordNavigation.currentIndex + 1, total: schema.recordNavigation.recordIds.length })}
+                </span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="h-8 w-8"
+                      disabled={schema.recordNavigation.currentIndex >= schema.recordNavigation.recordIds.length - 1}
+                      onClick={() => {
+                        const nav = schema.recordNavigation!;
+                        if (nav.currentIndex < nav.recordIds.length - 1) {
+                          nav.onNavigate(nav.recordIds[nav.currentIndex + 1]);
+                        }
+                      }}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t('detail.nextRecord')}</TooltipContent>
+                </Tooltip>
+              </div>
+            )}
+
             {schema.actions?.map((action, index) => (
               <SchemaRenderer key={index} schema={action} data={data} />
             ))}
 
-            {/* Share Button */}
+            {/* Inline Edit Toggle - hidden on mobile, accessible via more menu */}
+            {inlineEdit && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button 
+                    variant={isInlineEditing ? 'default' : 'outline'} 
+                    size="sm"
+                    onClick={handleInlineEditToggle}
+                    className="gap-2 hidden sm:inline-flex"
+                  >
+                    {isInlineEditing ? (
+                      <>
+                        <Check className="h-4 w-4" />
+                        <span className="hidden sm:inline">{t('detail.save')}</span>
+                      </>
+                    ) : (
+                      <>
+                        <Edit className="h-4 w-4" />
+                        <span className="hidden sm:inline">{t('detail.editInline')}</span>
+                      </>
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {isInlineEditing ? t('detail.saveChanges') : t('detail.editFieldsInline')}
+                </TooltipContent>
+              </Tooltip>
+            )}
+
+            {/* Share Button - hidden on mobile, accessible via more menu */}
             <Tooltip>
               <TooltipTrigger asChild>
-                <Button variant="outline" size="icon" onClick={handleShare}>
+                <Button variant="outline" size="icon" onClick={handleShare} className="hidden sm:inline-flex">
                   <Share2 className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Share</TooltipContent>
+              <TooltipContent>{t('detail.share')}</TooltipContent>
             </Tooltip>
 
-            {/* Edit Button */}
+            {/* Edit Button - hidden on mobile, accessible via more menu */}
             {schema.showEdit && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button variant="default" onClick={handleEdit} className="gap-2">
+                  <Button variant="default" onClick={handleEdit} className="gap-2 hidden sm:inline-flex">
                     <Edit className="h-4 w-4" />
-                    <span className="hidden sm:inline">Edit</span>
+                    <span className="hidden sm:inline">{t('detail.edit')}</span>
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Edit record</TooltipContent>
+                <TooltipContent>{t('detail.editRecord')}</TooltipContent>
               </Tooltip>
             )}
 
@@ -265,20 +534,38 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     </Button>
                   </DropdownMenuTrigger>
                 </TooltipTrigger>
-                <TooltipContent>More actions</TooltipContent>
+                <TooltipContent>{t('detail.moreActions')}</TooltipContent>
               </Tooltip>
               <DropdownMenuContent align="end" className="w-[calc(100vw-2rem)] sm:w-48 max-h-[60vh] overflow-y-auto">
+                {/* Mobile-only: Share, Edit, Inline Edit */}
+                <DropdownMenuItem onClick={handleShare} className="sm:hidden">
+                  <Share2 className="h-4 w-4 mr-2" />
+                  {t('detail.share')}
+                </DropdownMenuItem>
+                {schema.showEdit && (
+                  <DropdownMenuItem onClick={handleEdit} className="sm:hidden">
+                    <Edit className="h-4 w-4 mr-2" />
+                    {t('detail.edit')}
+                  </DropdownMenuItem>
+                )}
+                {inlineEdit && (
+                  <DropdownMenuItem onClick={handleInlineEditToggle} className="sm:hidden">
+                    <Edit className="h-4 w-4 mr-2" />
+                    {isInlineEditing ? t('detail.save') : t('detail.editInline')}
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuSeparator className="sm:hidden" />
                 <DropdownMenuItem onClick={handleDuplicate}>
                   <Copy className="h-4 w-4 mr-2" />
-                  Duplicate
+                  {t('detail.duplicate')}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={handleExport}>
                   <Download className="h-4 w-4 mr-2" />
-                  Export
+                  {t('detail.export')}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={handleViewHistory}>
                   <History className="h-4 w-4 mr-2" />
-                  View history
+                  {t('detail.viewHistory')}
                 </DropdownMenuItem>
                 {schema.showDelete && (
                   <>
@@ -288,7 +575,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                       className="text-destructive focus:text-destructive"
                     >
                       <Trash2 className="h-4 w-4 mr-2" />
-                      Delete
+                      {t('detail.delete')}
                     </DropdownMenuItem>
                   </>
                 )}
@@ -304,51 +591,217 @@ export const DetailView: React.FC<DetailViewProps> = ({
         </div>
       )}
 
-      {/* Sections */}
-      {schema.sections && schema.sections.length > 0 && (
-        <div className="space-y-3 sm:space-y-4">
-          {schema.sections.map((section, index) => (
+      {/* Header Highlight Area */}
+      {schema.highlightFields && schema.highlightFields.length > 0 && (
+        <HeaderHighlight fields={schema.highlightFields} data={data} objectName={schema.objectName} />
+      )}
+
+      {/* Auto Tabs mode: wrap sections, related, activity into tabs */}
+      {schema.autoTabs && !schema.tabs?.length ? (
+        <Tabs defaultValue="details" className="w-full">
+          <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0">
+            <TabsTrigger
+              value="details"
+              className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+            >
+              {t('detail.details')}
+            </TabsTrigger>
+            {effectiveRelated.length > 0 && (
+              <TabsTrigger
+                value="related"
+                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                <span className="flex items-center gap-1.5">
+                  {t('detail.related')}
+                  <Badge variant="secondary" className="text-xs">{effectiveRelated.length}</Badge>
+                </span>
+              </TabsTrigger>
+            )}
+            {schema.activities && schema.activities.length > 0 && (
+              <TabsTrigger
+                value="activity"
+                className="relative rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                <span className="flex items-center gap-1.5">
+                  {t('detail.activity')}
+                  <Badge variant="secondary" className="text-xs">{schema.activities.length}</Badge>
+                </span>
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {/* Details Tab Content */}
+          <TabsContent value="details" className="mt-4">
+            <div className="space-y-3 sm:space-y-4">
+              {/* Section Groups */}
+              {schema.sectionGroups && schema.sectionGroups.length > 0 && (
+                schema.sectionGroups.map((group, index) => (
+                  <SectionGroup
+                    key={index}
+                    group={group}
+                    data={{ ...data, ...editedValues }}
+                    objectSchema={objectSchema}
+                    objectName={schema.objectName}
+                    isEditing={isInlineEditing}
+                    onFieldChange={handleInlineFieldChange}
+                  />
+                ))
+              )}
+              {schema.sections && schema.sections.length > 0 && (
+                schema.sections.map((section, index) => (
+                  <DetailSection
+                    key={index}
+                    section={section}
+                    data={{ ...data, ...editedValues }}
+                    objectSchema={objectSchema}
+                    objectName={schema.objectName}
+                    isEditing={isInlineEditing}
+                    onFieldChange={handleInlineFieldChange}
+                  />
+                ))
+              )}
+              {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
+                <DetailSection
+                  section={{
+                    fields: schema.fields,
+                    columns: schema.columns,
+                  }}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              )}
+              {/* Comments in details tab */}
+              {schema.comments && (
+                <RecordComments
+                  comments={schema.comments}
+                  onAddComment={schema.onAddComment}
+                />
+              )}
+            </div>
+          </TabsContent>
+
+          {/* Related Tab Content */}
+          {effectiveRelated.length > 0 && (
+            <TabsContent value="related" className="mt-4">
+              <div className="space-y-4">
+                {effectiveRelated.map((related, index) => (
+                  <RelatedList
+                    key={index}
+                    title={related.title}
+                    type={related.type}
+                    api={related.api}
+                    data={related.data}
+                    columns={related.columns as any}
+                    dataSource={dataSource}
+                    objectName={related.api}
+                    collapsible
+                    pageSize={DEFAULT_RELATED_PAGE_SIZE}
+                  />
+                ))}
+              </div>
+            </TabsContent>
+          )}
+
+          {/* Activity Tab Content */}
+          {schema.activities && schema.activities.length > 0 && (
+            <TabsContent value="activity" className="mt-4">
+              <ActivityTimeline activities={schema.activities} />
+            </TabsContent>
+          )}
+        </Tabs>
+      ) : (
+        <>
+          {/* Section Groups */}
+          {schema.sectionGroups && schema.sectionGroups.length > 0 && (
+            <div className="space-y-3 sm:space-y-4">
+              {schema.sectionGroups.map((group, index) => (
+                <SectionGroup
+                  key={index}
+                  group={group}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Sections */}
+          {schema.sections && schema.sections.length > 0 && (
+            <div className="space-y-3 sm:space-y-4">
+              {schema.sections.map((section, index) => (
+                <DetailSection
+                  key={index}
+                  section={section}
+                  data={{ ...data, ...editedValues }}
+                  objectSchema={objectSchema}
+                  objectName={schema.objectName}
+                  isEditing={isInlineEditing}
+                  onFieldChange={handleInlineFieldChange}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Direct Fields (if no sections) */}
+          {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
             <DetailSection
-              key={index}
-              section={section}
-              data={data}
+              section={{
+                fields: schema.fields,
+                columns: schema.columns,
+              }}
+              data={{ ...data, ...editedValues }}
+              objectSchema={objectSchema}
+              objectName={schema.objectName}
+              isEditing={isInlineEditing}
+              onFieldChange={handleInlineFieldChange}
             />
-          ))}
-        </div>
-      )}
+          )}
 
-      {/* Direct Fields (if no sections) */}
-      {schema.fields && schema.fields.length > 0 && !schema.sections?.length && (
-        <DetailSection
-          section={{
-            fields: schema.fields,
-            columns: schema.columns || 2,
-          }}
-          data={data}
-        />
-      )}
+          {/* Tabs */}
+          {schema.tabs && schema.tabs.length > 0 && (
+            <DetailTabs tabs={schema.tabs} data={data} />
+          )}
 
-      {/* Tabs */}
-      {schema.tabs && schema.tabs.length > 0 && (
-        <DetailTabs tabs={schema.tabs} data={data} />
-      )}
+          {/* Related Lists */}
+          {effectiveRelated.length > 0 && (
+            <div className="space-y-4">
+              <h2 className="text-xl font-semibold">{t('detail.related')}</h2>
+              {effectiveRelated.map((related, index) => (
+                <RelatedList
+                  key={index}
+                  title={related.title}
+                  type={related.type}
+                  api={related.api}
+                  data={related.data}
+                  columns={related.columns as any}
+                  dataSource={dataSource}
+                  objectName={related.api}
+                  collapsible
+                  pageSize={DEFAULT_RELATED_PAGE_SIZE}
+                />
+              ))}
+            </div>
+          )}
 
-      {/* Related Lists */}
-      {schema.related && schema.related.length > 0 && (
-        <div className="space-y-4">
-          <h2 className="text-xl font-semibold">Related</h2>
-          {schema.related.map((related, index) => (
-            <RelatedList
-              key={index}
-              title={related.title}
-              type={related.type}
-              api={related.api}
-              data={related.data}
-              columns={related.columns as any}
-              dataSource={dataSource}
+          {/* Comments */}
+          {schema.comments && (
+            <RecordComments
+              comments={schema.comments}
+              onAddComment={schema.onAddComment}
             />
-          ))}
-        </div>
+          )}
+
+          {/* Activity Timeline */}
+          {schema.activities && schema.activities.length > 0 && (
+            <ActivityTimeline activities={schema.activities} />
+          )}
+        </>
       )}
 
       {/* Custom Footer */}