feat: add relative date formatting, enhance table header styling with muted background and uppercase tracking

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/components/src/renderers/complex/data-table.tsx

@@ -624,18 +624,18 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
       <div className="rounded-md border flex-1 min-h-0 overflow-auto relative bg-background [-webkit-overflow-scrolling:touch] shadow-[inset_-8px_0_8px_-8px_rgba(0,0,0,0.08)]">
         <Table>
           {caption && <TableCaption>{caption}</TableCaption>}
-          <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
+          <TableHeader className="sticky top-0 bg-muted/30 z-10">
             <TableRow>
               {selectable && (
-                <TableHead className={cn("w-12 bg-background", frozenColumns > 0 && "sticky left-0 z-20")}>
+                <TableHead className={cn("w-12 bg-muted/30", frozenColumns > 0 && "sticky left-0 z-20")}>
                   <Checkbox
                     checked={allPageRowsSelected ? true : somePageRowsSelected ? 'indeterminate' : false}
                     onCheckedChange={handleSelectAll}
                   />
                 </TableHead>
               )}
               {showRowNumbers && (
-                <TableHead className={cn("w-12 bg-background text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
+                <TableHead className={cn("w-12 bg-muted/30 text-center", frozenColumns > 0 && "sticky z-20")} style={frozenColumns > 0 ? { left: selectable ? 48 : 0 } : undefined}>
                   <span className="text-xs text-muted-foreground">#</span>
                 </TableHead>
               )}
@@ -664,7 +664,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       isDragOver && 'border-l-2 border-primary',
                       col.align === 'right' && 'text-right',
                       col.align === 'center' && 'text-center',
-                      'relative group bg-background',
+                      'relative group bg-muted/30',
                       isFrozen && 'sticky z-20',
                       isFrozen && index === frozenColumns - 1 && 'border-r-2 border-border shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]',
                     )}
@@ -692,7 +692,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                         {col.headerIcon && (
                           <span className="text-muted-foreground flex-shrink-0">{col.headerIcon}</span>
                         )}
-                        <span>{col.header}</span>
+                        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70">{col.header}</span>
                         {sortable && col.sortable !== false && getSortIcon(col.accessorKey)}
                       </div>
                       {resizableColumns && col.resizable !== false && (
@@ -707,7 +707,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                 );
               })}
               {rowActions && (
-                <TableHead className="w-24 text-right bg-background">Actions</TableHead>
+                <TableHead className="w-24 text-right bg-muted/30">Actions</TableHead>
               )}
             </TableRow>
           </TableHeader>

packages/fields/src/index.tsx

@@ -119,6 +119,10 @@ export function formatDate(value: string | Date, style?: string): string {
     const year = String(date.getFullYear()).slice(-2);
     return `${month} ${day}, '${year}`;
   }
+
+  if (style === 'relative') {
+    return formatRelativeDate(date);
+  }
 
   // Default format: MMM DD, YYYY
   return date.toLocaleDateString('en-US', {
@@ -128,6 +132,32 @@ export function formatDate(value: string | Date, style?: string): string {
   });
 }
 
+/**
+ * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
+ */
+export function formatRelativeDate(value: string | Date): string {
+  if (!value) return '-';
+  const date = typeof value === 'string' ? new Date(value) : value;
+  if (isNaN(date.getTime())) return '-';
+
+  const now = new Date();
+  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const startOfDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const diffMs = startOfDate.getTime() - startOfToday.getTime();
+  const diffDays = Math.round(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return 'Today';
+  if (diffDays === 1) return 'Tomorrow';
+  if (diffDays === -1) return 'Yesterday';
+  if (diffDays < -1) {
+    const absDays = Math.abs(diffDays);
+    if (absDays <= 30) return `${absDays} days ago`;
+    return formatDate(date);
+  }
+  if (diffDays > 1 && diffDays <= 30) return `In ${diffDays} days`;
+  return formatDate(date);
+}
+
 /**
  * Format datetime value
  */

packages/plugin-grid/src/VirtualGrid.tsx

@@ -84,7 +84,7 @@ export const VirtualGrid: React.FC<VirtualGridProps> = ({
     <div className={className}>
       {/* Header */}
       <div
-        className={`grid border-b sticky top-0 bg-background z-10 ${headerClassName}`}
+        className={`grid border-b sticky top-0 bg-muted/30 z-10 ${headerClassName}`}
         style={{
           gridTemplateColumns: columns
             .map((col) => col.width || '1fr')
@@ -94,7 +94,7 @@ export const VirtualGrid: React.FC<VirtualGridProps> = ({
         {columns.map((column, index) => (
           <div
             key={index}
-            className={`px-4 py-2 font-semibold text-sm ${
+            className={`px-4 py-2 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/70 ${
               column.align === 'center'
                 ? 'text-center'
                 : column.align === 'right'